playing around with theme switcher

.storybook/preview.js

@@ -1,7 +1,8 @@
-import { withDesign } from "storybook-addon-designs";
+import { withDesign } from 'storybook-addon-designs'
+import { withThemeProvider, AVAILABLE_THEMES } from '../src/helpers/ThemeProvider'
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -10,6 +11,20 @@ export const parameters = {
   },
 }
 
-export const decorators = [
-  withDesign
-];
+const themeKeys = Object.keys(AVAILABLE_THEMES)
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Switch theme for preview',
+    defaultValue: themeKeys[0],
+    toolbar: {
+      items: themeKeys.map((key) => {
+        return { value: key, title: AVAILABLE_THEMES[key] }
+      }),
+      showName: true,
+    },
+  },
+}
+
+export const decorators = [withDesign, withThemeProvider]

src/helpers/ThemeProvider.tsx

@@ -0,0 +1,40 @@
+import React, { ReactNode } from 'react'
+import { Tokens } from '../../tokens'
+
+export const AVAILABLE_THEMES = {
+  org: 'betterplace.org',
+  at: 'betterplace.at',
+  me: 'betterplace.me',
+}
+
+type Theme = keyof typeof AVAILABLE_THEMES
+
+type ThemeProviderProps = {
+  theme: Theme
+  children: ReactNode
+}
+
+export const ThemeProvider = (props: ThemeProviderProps) => {
+  const tokens = {
+    globals: Tokens.globals,
+    [props.theme]: Tokens[props.theme],
+  }
+
+  console.log(tokens)
+
+  const ThemeContext = React.createContext(props.theme)
+
+  return (
+    <ThemeContext.Provider value={props.theme}>
+      <div className={'theme-' + props.theme}>{props.children}</div>
+    </ThemeContext.Provider>
+  )
+}
+
+export const withThemeProvider = (Story: any, context: { globals: { theme: Theme } }) => {
+  return (
+    <ThemeProvider theme={context.globals.theme}>
+      <Story {...context} />
+    </ThemeProvider>
+  )
+}

tokens/globals.json

@@ -0,0 +1,7 @@
+{
+  "colors": {
+    "colorRed100": "#ff0000",
+    "colorGreen100": "#00ff00",
+    "colorGreen300": "#00aa00"
+  }
+}

tokens/index.ts

@@ -0,0 +1,11 @@
+import globals from './globals.json'
+import org from './theme-org.json'
+import at from './theme-at.json'
+import me from './theme-me.json'
+
+export const Tokens = {
+  globals,
+  org,
+  at,
+  me,
+}

tokens/theme-at.json

@@ -0,0 +1,5 @@
+{
+  "colors": {
+    "colorPrimary": "colorGreen300"
+  }
+}

tokens/theme-me.json

@@ -0,0 +1,5 @@
+{
+  "colors": {
+    "colorPrimary": "colorRed100"
+  }
+}

tokens/theme-org.json

@@ -0,0 +1,5 @@
+{
+  "colors": {
+    "colorPrimary": "colorGreen100"
+  }
+}