diff --git a/.storybook/main.js b/.storybook/main.js index 830134f..a7d608a 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,6 +1,6 @@ module.exports = { "stories": ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"], - "addons": ["../register.js", "@storybook/addon-essentials"], + "addons": ["../dist/preset/index.js", "@storybook/addon-essentials"], "framework": { name: "@storybook/react-webpack5", options: {} @@ -8,4 +8,4 @@ module.exports = { docs: { autodocs: true } -}; \ No newline at end of file +}; diff --git a/.storybook/preview.js b/.storybook/preview.js index 3e48619..a8af2b9 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -22,7 +22,3 @@ export const parameters = { export const decorators = [ cssVariablesTheme, ]; - -export const globals = { - cssVariables: null, -}; diff --git a/Readme.md b/Readme.md index 5e6d886..760a91c 100644 --- a/Readme.md +++ b/Readme.md @@ -20,7 +20,7 @@ Add the following code to it: ```js module.exports = { - addons: ['@etchteam/storybook-addon-css-variables-theme'], + addons: ['@etchteam/storybook-addon-css-variables-theme/preset'], }; ``` diff --git a/package-lock.json b/package-lock.json index ad38296..3b1fe48 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@etchteam/storybook-addon-css-variables-theme", - "version": "2.0.0", + "version": "2.0.1", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/package.json b/package.json index 8e46431..82ba49c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@etchteam/storybook-addon-css-variables-theme", - "version": "2.0.0", + "version": "2.0.1", "description": "Switch CSS files to change themes", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/src/preset/index.ts b/src/preset/index.ts index b35ff5a..c7de13f 100644 --- a/src/preset/index.ts +++ b/src/preset/index.ts @@ -3,4 +3,8 @@ export function managerEntries(entry: any[] = []) { return [...entry, require.resolve('../register')]; } -module.exports = { managerEntries }; +export const previewAnnotations = (entry: any[] = []) => { + return [...entry, require.resolve('../preview')]; +}; + +module.exports = { managerEntries, previewAnnotations }; diff --git a/src/preview.ts b/src/preview.ts new file mode 100644 index 0000000..11b6421 --- /dev/null +++ b/src/preview.ts @@ -0,0 +1,3 @@ +export const globals = { + cssVariables: null, +}; diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx index d35a934..58e0151 100644 --- a/stories/Button.stories.tsx +++ b/stories/Button.stories.tsx @@ -14,30 +14,24 @@ export default { } as ComponentMeta; // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args -const Template: ComponentStory = (args) => { - return ; }; export const Primary = Template.bind({}); // More on args: https://storybook.js.org/docs/react/writing-stories/args Primary.args = { primary: true, - label: 'Button', }; export const Secondary = Template.bind({}); -Secondary.args = { - label: 'Button', -}; export const Large = Template.bind({}); Large.args = { size: 'large', - label: 'Button', }; export const Small = Template.bind({}); Small.args = { size: 'small', - label: 'Button', }; diff --git a/stories/Button.tsx b/stories/Button.tsx index 10cd755..63284fa 100644 --- a/stories/Button.tsx +++ b/stories/Button.tsx @@ -17,7 +17,7 @@ interface ButtonProps { /** * Button contents */ - readonly label: string; + readonly children: React.ReactNode; /** * Optional click handler */ @@ -31,7 +31,7 @@ const Button = ({ primary = false, size = 'medium', backgroundColor, - label, + children, ...props }: ButtonProps) => { const mode = primary @@ -46,7 +46,7 @@ const Button = ({ style={{ backgroundColor }} {...props} > - {label} + {children} ); };