Merge pull request #56 from etchteam/fix/auto-init-global-variables

fix: auto init global variables

.storybook/main.js

@@ -1,11 +1,11 @@
 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: {}
   },
   docs: {
     autodocs: true
   }
-};
+};

.storybook/preview.js

@@ -22,7 +22,3 @@ export const parameters = {
 export const decorators = [
   cssVariablesTheme,
 ];
-
-export const globals = {
-  cssVariables: null,
-};

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'],
 };
 ```
 

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",

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 };

src/preview.ts

@@ -0,0 +1,3 @@
+export const globals = {
+  cssVariables: <string | null>null,
+};

stories/Button.stories.tsx

@@ -14,30 +14,24 @@ export default {
 } as ComponentMeta<typeof Button>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => {
-  return <Button {...args} />;
+const Template: ComponentStory<typeof Button> = (args, context) => {
+  return <Button {...args}>{context.globals.cssVariables}</Button>;
 };
 
 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',
 };

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}
     </button>
   );
 };