feat: add docs-light and docs-dark themes

.github/workflows/preview.yml

@@ -41,6 +41,8 @@ jobs:
         run: yarn build
 
       - name: Build Docs
+        env:
+          STORYBOOK_BASE: /element/pr-preview/pr-${{ github.event.number }}/
         run: yarn build:storybook:ci
 
       - name: Deploy PR Preview

apps/element-storybook/.storybook/main.ts

@@ -1,9 +1,12 @@
 // This file has been automatically migrated to valid ESM format by Storybook.
-import { createRequire } from "node:module";
-import { dirname, join } from 'path';
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
 import remarkGfm from 'remark-gfm';
+import tsconfigPaths from 'vite-tsconfig-paths';
 import { StorybookConfig } from '@storybook/react-vite';
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
 
 const config: StorybookConfig = {
@@ -20,15 +23,15 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-themes'),
     getAbsolutePath('@storybook/addon-a11y'),
     {
-      name: getAbsolutePath("@storybook/addon-docs"),
+      name: getAbsolutePath('@storybook/addon-docs'),
       options: {
         mdxPluginOptions: {
           mdxCompileOptions: {
             remarkPlugins: [remarkGfm],
           },
         },
       },
-    }
+    },
   ],
 
   framework: {
@@ -55,10 +58,18 @@ const config: StorybookConfig = {
   features: {
     actions: false,
     interactions: false,
-    storyStoreV7: false
+    storyStoreV7: false,
   },
 
-  docs: {}
+  docs: {},
+
+  viteFinal: async (config) => {
+    config.plugins = [...(config.plugins || []), tsconfigPaths({ root: join(__dirname, '../../..') })];
+    if (process.env.STORYBOOK_BASE) {
+      config.base = process.env.STORYBOOK_BASE;
+    }
+    return config;
+  },
 };
 
 export default config;

apps/element-storybook/.storybook/preview.tsx

@@ -1,18 +1,47 @@
- import React from 'react';
-import { themes } from 'storybook/theming';
+import React from 'react';
 import { Preview } from '@storybook/react-vite';
 import { Title, Subtitle, Description, Primary, Controls, Stories, useOf } from '@storybook/addon-docs/blocks';
 import type { StoryContext } from 'storybook/internal/types';
 import { ThemeProvider } from '@availity/theme-provider';
 
-const withThemeProvider = (Story: () => React.JSX.Element, context: StoryContext) => {
+const docsBackgrounds: Record<string, string> = {
+  lightTheme: '#FFFFFF',
+  legacyBS: '#FFFFFF',
+  docsLight: '#EEF1F8',
+  docsDark: '#000C30',
+};
+
+const ThemeWrapper = ({ Story, theme }: { Story: () => React.JSX.Element; theme: string }) => {
+  const bg = docsBackgrounds[theme] || '#FFFFFF';
+  const isDark = theme === 'docsDark';
+
+  React.useEffect(() => {
+    document.body.style.background = bg;
+    document.body.style.color = isDark ? '#EFF3FF' : '#000C30';
+
+    const docsStory = document.querySelector('.docs-story') as HTMLElement;
+    if (docsStory) {
+      docsStory.style.background = bg;
+    }
+    const sbDocs = document.querySelector('.sb-docs') as HTMLElement;
+    if (sbDocs) {
+      sbDocs.style.background = bg;
+      sbDocs.style.color = isDark ? '#EFF3FF' : '#000C30';
+    }
+  }, [bg, isDark]);
+
   return (
-    <ThemeProvider theme={context.globals.theme || 'lightTheme'}>
+    <ThemeProvider theme={theme}>
       <Story />
     </ThemeProvider>
   );
 };
 
+const withThemeProvider = (Story: () => React.JSX.Element, context: StoryContext) => {
+  const theme = context.globals.theme || 'lightTheme';
+  return <ThemeWrapper Story={Story} theme={theme} />;
+};
+
 const preview: Preview = {
   globalTypes: {
     theme: {
@@ -23,6 +52,8 @@ const preview: Preview = {
         items: [
           { value: 'lightTheme', icon: 'sun', title: 'Light (default)' },
           { value: 'legacyBS', icon: 'markup', title: 'Legacy Bootstrap' },
+          { value: 'docsLight', icon: 'document', title: 'Docs Light' },
+          { value: 'docsDark', icon: 'moon', title: 'Docs Dark' },
         ],
         dynamicTitle: true,
         showName: true,
@@ -38,14 +69,14 @@ const preview: Preview = {
         sort: 'requiredFirst',
         disableSaveFromUI: true,
       },
-      theme: themes.light,
       source: {
         excludeDecorators: true,
         type: 'code',
       },
       page: () => {
         // https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/blocks/DocsPage.tsx
         // Adjusting autodocs when no component passed
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         const resolvedOf = useOf('meta', ['meta']);
         const { stories, meta } = resolvedOf.csfFile;
         const isSingleStory = Object.keys(stories).length === 1;
@@ -79,7 +110,15 @@ const preview: Preview = {
           'Sample Layouts',
           'Design System',
           'Form Components',
-          ['Component Guide', 'Controlled Form', ['*', 'README'], 'Uncontrolled Fields', ['Autocomplete', ['*', 'README'], '*', 'Datepicker', ['*', 'README'], 'TextField', ['*', 'README']], 'Uncontrolled FormUtils', ['*', 'README']],
+          [
+            'Component Guide',
+            'Controlled Form',
+            ['*', 'README'],
+            'Uncontrolled Fields',
+            ['Autocomplete', ['*', 'README'], '*', 'Datepicker', ['*', 'README'], 'TextField', ['*', 'README']],
+            'Uncontrolled FormUtils',
+            ['*', 'README'],
+          ],
           'Components',
         ],
       },
@@ -88,9 +127,9 @@ const preview: Preview = {
 };
 
 // Make sure we are in the browser before starting
-if (typeof global.process === 'undefined') {
-  // eslint-disable-next-line @nx/enforce-module-boundaries
-  import('../../../packages/mock/src/lib/browser').then(({ worker }) => {
+if (global.process === undefined) {
+  // eslint-disable-next-line promise/catch-or-return, unicorn/prefer-top-level-await
+  import('@availity/mock/src/lib/browser').then(({ worker }) => {
     const config =
       process.env.NODE_ENV === 'development'
         ? {
@@ -100,7 +139,7 @@ if (typeof global.process === 'undefined') {
             serviceWorker: { url: '/element/mockServiceWorker.js' },
             onUnhandledRequest: 'bypass',
           };
-    worker.start(config);
+    return worker.start(config);
   });
 }
 

packages/theme-provider/src/lib/theme-provider.tsx

@@ -1,4 +1,4 @@
-import { lightTheme as lightThemeOptions, legacyTheme as legacyThemeOptions } from '@availity/theme';
+import { lightTheme as lightThemeOptions, legacyTheme as legacyThemeOptions, docsLightTheme as docsLightThemeOptions, docsDarkTheme as docsDarkThemeOptions } from '@availity/theme';
 import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';
 import type { Theme, ThemeOptions } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
@@ -8,16 +8,20 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 
 const lightTheme = createTheme(lightThemeOptions as ThemeOptions);
 const legacyTheme = createTheme(legacyThemeOptions as ThemeOptions);
+const docsLightTheme = createTheme(docsLightThemeOptions as ThemeOptions);
+const docsDarkTheme = createTheme(docsDarkThemeOptions as ThemeOptions);
 
 export type ThemeProviderProps = {
   children: React.ReactNode;
   /** Availity theme to use */
-  theme?: 'lightTheme' | 'legacyBS';
+  theme?: 'lightTheme' | 'legacyBS' | 'docsLight' | 'docsDark';
 };
 
 const themes: Record<string, Theme> = {
   lightTheme,
   legacyBS: legacyTheme,
+  docsLight: docsLightTheme,
+  docsDark: docsDarkTheme,
 };
 
 export function ThemeProvider({ children, theme = 'lightTheme' }: ThemeProviderProps) {
@@ -26,7 +30,7 @@ export function ThemeProvider({ children, theme = 'lightTheme' }: ThemeProviderP
       dateAdapter={AdapterDayjs}
       localeText={enUSDate.components.MuiLocalizationProvider.defaultProps.localeText}
     >
-      <MuiThemeProvider theme={themes[theme]}>
+      <MuiThemeProvider theme={themes[theme] || themes.lightTheme}>
         <CssBaseline />
         {children}
       </MuiThemeProvider>

packages/theme/src/index.ts

@@ -1,2 +1,4 @@
 export * from './lib/legacy-theme';
 export * from './lib/light-theme';
+export * from './lib/docs-light-theme';
+export * from './lib/docs-dark-theme';