From 397bf94cd7e0316558d7004356387f7ae1eebdad Mon Sep 17 00:00:00 2001
From: Gavyn McKenzie <gavyn@etch.co>
Date: Thu, 14 Dec 2023 05:28:33 +0000
Subject: [PATCH] fix: auto init global variables

---
 .storybook/main.js         |  4 ++--
 .storybook/preview.js      |  4 ----
 Readme.md                  |  2 +-
 package-lock.json          |  2 +-
 package.json               |  2 +-
 src/preset/index.ts        |  6 +++++-
 src/preview.ts             |  3 +++
 stories/Button.stories.tsx | 10 ++--------
 stories/Button.tsx         |  6 +++---
 9 files changed, 18 insertions(+), 21 deletions(-)
 create mode 100644 src/preview.ts

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: <string | null>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<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',
 };
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}
     </button>
   );
 };