Theme designer v9

packages/react-components/theme-designer/src/Context/ThemeDesignerContext.tsx

@@ -0,0 +1,196 @@
+import * as React from 'react';
+import type { BrandVariants, Theme } from '@fluentui/react-components';
+import { createLightTheme } from '@fluentui/react-components';
+import { brandWeb } from '../utils/brandColors';
+import { getBrandTokensFromPalette } from '../utils/getBrandTokensFromPalette';
+import { getOverridableTokenBrandColors } from '../utils/getOverridableTokenBrandColors';
+import { Brands } from '@fluentui/react-theme';
+import { createDarkThemeWithUpdatedMapping } from '../utils/getOverridableTokenBrandColors';
+
+export type ColorOverrideBrands = Record<string, Brands>;
+
+export type ColorOverridePayload = {
+  colorToken: string;
+  newColor: string;
+  brand: number;
+};
+
+export type CustomAttributes = {
+  keyColor: string;
+  hueTorsion: number;
+  vibrancy: number;
+};
+
+interface ThemeDesignerContextProps {
+  children: React.ReactNode;
+}
+
+type Action =
+  | { type: 'isDark'; payload: boolean }
+  | { type: 'override'; payload: Partial<Theme> }
+  | { type: 'reset' }
+  | { type: 'updateThemeWithCustomerAttributes'; payload: CustomAttributes }
+  | { type: 'addOverride'; payload: ColorOverridePayload }
+  | { type: 'themeName'; payload: string }
+  | { type: 'showExportPanel'; payload: boolean };
+
+type Dispatch = (action: Action) => void;
+
+export type ThemeDesignerState = {
+  themeName: string;
+  keyColorHex: string;
+  brand: BrandVariants;
+  theme: Theme;
+  themeWithOverrides: Theme;
+  isDark: boolean;
+  lightThemeOverrides: Partial<Theme>;
+  darkThemeOverrides: Partial<Theme>;
+  lightBrandOverrides: ColorOverrideBrands;
+  darkBrandOverrides: ColorOverrideBrands;
+  showExportPanel: boolean;
+};
+
+export const defaultThemePlaceholderName = 'myNewTheme';
+
+export const initialThemeDesignerState: ThemeDesignerState = {
+  themeName: defaultThemePlaceholderName,
+  keyColorHex: '#0F6CBD',
+  brand: brandWeb,
+  theme: createLightTheme(brandWeb),
+  themeWithOverrides: createLightTheme(brandWeb),
+  isDark: false,
+  lightThemeOverrides: {},
+  darkThemeOverrides: {},
+  lightBrandOverrides: getOverridableTokenBrandColors(createLightTheme(brandWeb), brandWeb),
+  darkBrandOverrides: getOverridableTokenBrandColors(createDarkThemeWithUpdatedMapping(brandWeb), brandWeb),
+  showExportPanel: false,
+};
+
+export const ThemeDesignerContext = React.createContext<{ state: ThemeDesignerState; dispatch: Dispatch } | undefined>(
+  undefined,
+);
+
+const createCustomTheme = ({ hueTorsion, keyColor, vibrancy }: CustomAttributes): BrandVariants => {
+  return getBrandTokensFromPalette(keyColor, {
+    hueTorsion,
+    darkCp: vibrancy,
+    lightCp: vibrancy,
+  });
+};
+
+export const ThemeDesignerReducer = (state: ThemeDesignerState, action: Action): ThemeDesignerState => {
+  switch (action.type) {
+    case 'isDark':
+      const theme = action.payload ? createDarkThemeWithUpdatedMapping(state.brand) : createLightTheme(state.brand);
+
+      return {
+        ...state,
+        theme,
+        isDark: action.payload,
+        themeWithOverrides: {
+          ...theme,
+          ...(action.payload ? state.darkThemeOverrides : state.lightThemeOverrides),
+        },
+      };
+    case 'reset':
+      const resetTheme = state.isDark ? createDarkThemeWithUpdatedMapping(state.brand) : createLightTheme(state.brand);
+      return {
+        ...state,
+        theme: resetTheme,
+        themeWithOverrides: resetTheme,
+        lightThemeOverrides: {},
+        darkThemeOverrides: {},
+        lightBrandOverrides: getOverridableTokenBrandColors(
+          createDarkThemeWithUpdatedMapping(state.brand),
+          state.brand,
+        ),
+        darkBrandOverrides: getOverridableTokenBrandColors(createDarkThemeWithUpdatedMapping(state.brand), state.brand),
+      };
+    case 'updateThemeWithCustomerAttributes':
+      const newBrand = createCustomTheme(action.payload);
+      const newTheme = state.isDark ? createDarkThemeWithUpdatedMapping(newBrand) : createLightTheme(newBrand);
+      return {
+        ...state,
+        keyColorHex: action.payload.keyColor,
+        brand: newBrand,
+        theme: newTheme,
+        themeWithOverrides: newTheme,
+        lightThemeOverrides: {},
+        darkThemeOverrides: {},
+        // new overrides -- reset
+        lightBrandOverrides: getOverridableTokenBrandColors(createLightTheme(newBrand), newBrand),
+        darkBrandOverrides: getOverridableTokenBrandColors(createDarkThemeWithUpdatedMapping(newBrand), newBrand),
+      };
+    case 'addOverride':
+      if (state.isDark) {
+        const overrides = {
+          ...state.darkThemeOverrides,
+          // This overrides a THEME token to a new color
+          [action.payload.colorToken]: action.payload.newColor,
+        };
+        return {
+          ...state,
+          darkBrandOverrides: {
+            ...state.darkBrandOverrides,
+            // this is signifying for e.g. 'colorBrandBackground2' = 8 (which is the 8th sqaure in the color wheel)
+            [action.payload.colorToken]: action.payload.brand,
+          } as ColorOverrideBrands,
+          darkThemeOverrides: overrides,
+          themeWithOverrides: {
+            ...createDarkThemeWithUpdatedMapping(state.brand),
+            ...overrides,
+          },
+        };
+      } else {
+        const overrides = {
+          ...state.lightThemeOverrides,
+          // This overrides a THEME token to a new color
+          [action.payload.colorToken]: action.payload.newColor,
+        };
+        return {
+          ...state,
+          lightBrandOverrides: {
+            ...state.lightBrandOverrides,
+            // this is signifying for e.g. 'colorBrandBackground2' = 8 (which is the 8th sqaure in the color wheel)
+            [action.payload.colorToken]: action.payload.brand,
+          } as ColorOverrideBrands,
+          lightThemeOverrides: overrides,
+          themeWithOverrides: {
+            ...createLightTheme(state.brand),
+            ...overrides,
+          },
+        };
+      }
+    case 'themeName':
+      return {
+        ...state,
+        themeName: action.payload,
+      };
+    case 'showExportPanel':
+      return {
+        ...state,
+        showExportPanel: action.payload,
+      };
+
+    default:
+      return {
+        ...state,
+      };
+  }
+};
+
+export const useThemeDesigner = () => {
+  const context = React.useContext(ThemeDesignerContext);
+  if (context === undefined) {
+    throw new Error('useWizard must be used within a WizardProvider');
+  }
+  return context;
+};
+
+export const ThemeDesignerContextProvider = ({ children }: ThemeDesignerContextProps) => {
+  const [state, dispatch] = React.useReducer(ThemeDesignerReducer, initialThemeDesignerState);
+
+  const value = { state, dispatch };
+
+  return <ThemeDesignerContext.Provider value={value}>{children}</ThemeDesignerContext.Provider>;
+};

packages/react-components/theme-designer/src/ThemeDesigner.stories.mdx

@@ -1,6 +1,31 @@
 import { ThemeDesigner } from './index';
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="ThemeDesigner" />
+<Meta
+  title="ThemeDesigner"
+  parameters={{
+    showToolbar: false,
+    viewMode: 'canvas',
+    toolbar: {
+      hidden: true,
+      title: { hidden: true },
+      zoom: { hidden: true },
+      eject: { hidden: true },
+      copy: { hidden: true },
+      fullscreen: { hidden: true },
+      'storybook/fluentui-react-addon/strict-mode': { hidden: true },
+      'storybook/fluentui-react-addon/theme': { hidden: true },
+    },
+    backgrounds: {
+      disable: true,
+      grid: {
+        disable: true,
+      },
+      outline: {
+        disable: true,
+      },
+    },
+  }}
+/>
 
 <ThemeDesigner />

packages/react-components/theme-designer/src/ThemeDesigner.tsx

@@ -1,53 +1,26 @@
 import * as React from 'react';
 import type { ThemeDesignerProps } from './ThemeDesigner.types';
-import { useStaticStyles, useStyles } from './ThemeDesigner.styles';
-import { AppState, DispatchTheme, initialAppState, useThemeDesignerReducer } from './useThemeDesignerReducer';
+import { useStyles } from './ThemeDesigner.styles';
+import { ThemeDesignerContextProvider } from './Context/ThemeDesignerContext';
 import { FluentProvider, webLightTheme } from '@fluentui/react-components';
-import { createContext } from '@fluentui/react-context-selector';
-import { Nav } from './components/Nav/Nav';
+import { Header } from './components/Header/Header';
 import { Sidebar } from './components/Sidebar/Sidebar';
 import { Content } from './components/Content/Content';
 
-export type AppContextValue = {
-  appState: AppState;
-  dispatchAppState: React.Dispatch<DispatchTheme>;
-  name: string;
-  setName: React.Dispatch<React.SetStateAction<string>>;
-};
-
-// eslint-disable-next-line @fluentui/no-context-default-value
-export const AppContext = createContext<AppContextValue>({
-  appState: initialAppState,
-  dispatchAppState: () => null,
-  name: 'Untitled',
-  setName: () => null,
-});
-
 /**
  * ThemeDesigner component - TODO: add more docs
  */
 export const ThemeDesigner: React.FC<ThemeDesignerProps> = props => {
   const styles = useStyles();
-  useStaticStyles();
-
-  const [appState, dispatchAppState] = useThemeDesignerReducer();
-  const [name, setName] = React.useState<string>('myTheme');
-
-  const { darkOverrides, isDark, lightOverrides, theme } = appState;
-  const overrides = isDark ? darkOverrides : lightOverrides;
-  const overridenTheme = { ...theme, ...overrides };
-
   return (
     <FluentProvider theme={webLightTheme}>
-      <AppContext.Provider value={{ appState, dispatchAppState, name, setName }}>
+      <ThemeDesignerContextProvider>
         <div className={styles.root}>
-          <Nav className={styles.nav} />
+          <Header className={styles.nav} />
           <Sidebar className={styles.sidebar} />
-          <FluentProvider theme={overridenTheme}>
-            <Content className={styles.content} />
-          </FluentProvider>
+          <Content className={styles.content} />
         </div>
-      </AppContext.Provider>
+      </ThemeDesignerContextProvider>
     </FluentProvider>
   );
 };