Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ljcl/storybook-addon-cssprops
Interact with css custom properties dynamically in the Storybook UI
https://github.com/ljcl/storybook-addon-cssprops
addon react storybook
Last synced: 4 months ago
JSON representation
Interact with css custom properties dynamically in the Storybook UI
- Host: GitHub
- URL: https://github.com/ljcl/storybook-addon-cssprops
- Owner: ljcl
- License: mit
- Created: 2021-02-02T03:34:35.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-08T22:25:49.000Z (10 months ago)
- Last Synced: 2024-09-29T11:45:38.327Z (4 months ago)
- Topics: addon, react, storybook
- Language: TypeScript
- Homepage: https://storybook.js.org/addons/@ljcl/storybook-addon-cssprops
- Size: 69.3 MB
- Stars: 21
- Watchers: 3
- Forks: 13
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Storybook CSS Custom Properties Addon
## Installation
```sh
npm i -D @ljcl/storybook-addon-cssprops
```
Enable the addon in [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
```js
module.exports = {
addons: ["@ljcl/storybook-addon-cssprops"],
};
```
To use it inside MDX, or when customising the docs page:
```js
import { CssPropsBlock } from "@ljcl/storybook-addon-cssprops";
```
## Usage
Include your CSS Custom Properties without the initial `--` prefix, the addon will apply and document this automatically.
```jsx
export default {
title: "Simple Component",
parameters: {
cssprops: {
"css-custom-property-1": {
value: "hsl(120deg 100% 25% / 49%)",
description: "Optional description",
},
}
},
} as Meta;
```
## Configuration
The addon can be configured wherever other [parameters](https://storybook.js.org/docs/react/writing-stories/parameters) can be configured (at the Global, Story, or individual story level). It will also attempt to detect between `colour` and `text`, this can be overriden by specifying the `control` property.
```ts
parameters: {
cssprops: {
// Disable the addon by setting disable to true:
disable: false,
// Override the detected default control type:
"override-property-detection-type": {
value: "green",
control: "text",
description: "Maybe you want 'green' for reasons differing to colour"
},
// Override the detected default control type:
"optional-category-or-subcategory": {
value: "red",
category: "Optional",
subcategory: "Very Optional",
description: "This property will be grouped under a category called 'Optional', and then a further subcategory of 'Very Optional'",
},
// Customise preset colours for the colourpicker
presetColors: ['#FFF']
}
}
```
### Adding to DocsPage and MDX
#### DocsPage
Modify the docs page based by [following the storybook docs](https://storybook.js.org/docs/react/writing-docs/docs-page#remixing-docspage-using-doc-blocks). Including `` where you prefer.
## Development
This monorepo uses npm@7 workspaces, run `npm i` at the root.
### TODO
- [ ] Look for the args of a defined component when in MDX
- [ ] Better specificity when injecting styles (with & without iframes)
- [ ] Reset the default values without requiring a page refresh (ArgsTable)