Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
styled-system-props-table
Advanced tools
This is a props table generator for documenting a React component's props using Styled System. The library can be extended to
suit your own implementation of styled-system but the idea is to output a table of props to document components with wide, highly repetitive props footprints
by analyzing their propTypes
and defaultProps
settings and applying rich documentation to the table. This has several advantages over the Storybook
Docs add-on's props table generator:
This component is recommned for use with Storybook, but compatible with any jsx
-compatible format.
yarn add styled-system-props-table
Only one prop is required component
which takes a React component.
import { StyledSystemPropsTable } from 'sytled-system-props-table'
import Card from '../path/to/components/Card'
<StyledSystemPropsTable component={Card} />
You can intercept and decorate individual prop rows as well, however all props should have reasonable data attached to them by default. The example below will populate a column for the variant
prop on the Card column.
import { StyledSystemPropsTable, PropRow } from 'sytled-system-props-table'
import Card from 'path-to-components/Card'
import theme from './path/to/your-styled-system-theme'
const transformProps = (name = '', properties = {}) => {
if (name === 'variant') return {
...properties,
description: <ul>
<li><strong>EMPTY</strong> Empty placeholder card</li>
<li><strong>PRODUCT</strong> applies rouned corner and displays a ProductImage</li>
<li>SHARP_TOP_CORNER</li>
...
</ul>
}
}
<StyledSystemPropsTable
component={Card}
theme={theme}
transformProps={transformProps}
/>
Other data you can modify this way include
description
: prop description
type
: Overrides the type from propTypes
assignmemnt
themeKey
: If theme
is passed, available theme properties relevant to the prop will appear in the Theme Values column
required
sortWeight
: make the prop appear higher or lower in the output table. Highest appears first. Default is 0
This library exports props-table
as well as styled-system-props-table
. The difference is that styled-system-props-table
includes a props-table
wrapped with a large library of prop transformers mapped to the styled-system API. However, if you are using another interface you wrap your own props-table
with your own transformers.
<PropsTable transformProps={[yourOwnStyledSystem, otherDecorators]} component={...}/>
TODO
at the moment you must call in parse-prop-types at the root of your React project. This is necessary because under the hood, this library depends on it to preserve proptype metadata.
FAQs
Props table generator with styled-system decorator
The npm package styled-system-props-table receives a total of 0 weekly downloads. As such, styled-system-props-table popularity was classified as not popular.
We found that styled-system-props-table demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.