Updates

.github/workflows/main.yml

@@ -72,7 +72,7 @@ jobs:
         run: |
           pnpm exec playwright install --with-deps chromium
           npm install -g nyc
-          pnpm run storybook:validate
+          pnpm run storybook:build:validate
 
       - name: SonarCloud Scan
         if: "!startsWith(github.ref, 'refs/tags/')"

.storybook/Story.tsx

@@ -0,0 +1,70 @@
+import { CSSProperties, forwardRef, ReactNode } from 'react';
+import styled from '@emotion/styled';
+import { Simplify } from '@gilbarbara/types';
+
+import { getStyledOptions } from '~/modules/system';
+import { spacing } from '~/modules/theme';
+
+import {
+  OmitElementProps,
+  SpacingOrZero,
+  StyledProps,
+  Theme,
+  WithFlexBox,
+  WithMargin,
+  WithPadding,
+} from '../src/types';
+
+export interface StoryKnownProps
+  extends StyledProps,
+    Pick<WithFlexBox, 'direction'>,
+    Pick<WithPadding, 'padding'>,
+    Pick<WithMargin, 'mx'> {
+  align: string;
+  children?: ReactNode;
+  display: string;
+  justify: string;
+  maxWidth?: number;
+  minHeight?: string;
+  minWidth?: number;
+  style?: CSSProperties;
+}
+
+type StoryProps = Simplify<OmitElementProps<HTMLDivElement, StoryKnownProps>>;
+
+export interface Context {
+  args: Record<string, any>;
+  globals: {
+    appearance: 'light' | 'dark' | 'side-by-side';
+    backgrounds: { value: string };
+    color: keyof Theme['colors'];
+  };
+  parameters: StoryProps & {
+    layout: string;
+    paddingDocs: SpacingOrZero;
+  };
+  viewMode: string;
+}
+
+const StyledStory = styled(
+  'div',
+  getStyledOptions(),
+)<StoryProps>(props => {
+  const { align, direction, display, justify, maxWidth, minHeight, minWidth, mx, padding } = props;
+
+  return {
+    alignItems: align,
+    display,
+    flexDirection: direction,
+    justifyContent: justify,
+    margin: `0 ${mx && mx !== 'auto' ? spacing[mx] : mx}`,
+    maxWidth,
+    minHeight,
+    minWidth,
+    padding: padding ? spacing[padding] : undefined,
+  };
+});
+
+export const Story = forwardRef<HTMLDivElement, StoryProps>((props, ref) => (
+  <StyledStory ref={ref} {...props} />
+));

.storybook/main.ts

@@ -1,6 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
-import { variants } from '../src/modules/theme';
+import { colors } from '../src/modules/theme';
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.mdx', '../src/components/**/*.stories.tsx'],
@@ -31,16 +31,16 @@ const config: StorybookConfig = {
     ${head}
     <style>
       #storybook-explorer-menu [data-nodetype="root"] [data-action="collapse-root"] {
-        color: ${variants.primary['600']};
+        color: ${colors.primary};
         width: 100%;
       }
 
       #storybook-explorer-menu [data-nodetype="root"] [data-action="collapse-root"][aria-expanded="true"] {
-        background-color: ${variants.primary['100']};
+        font-size: 14px;
       }
 
       [data-selected='true'] {
-        background-color: ${variants.primary['400']} !important;
+        background-color: ${colors.primary} !important;
        }
     </style>
   `,

.storybook/preview.tsx

@@ -4,44 +4,25 @@ import CacheProvider from 'react-inlinesvg/provider';
 import { ThemeProvider } from '@emotion/react';
 import styled from '@emotion/styled';
 import { objectKeys } from '@gilbarbara/helpers';
+import { useSingleton, useUpdateEffect } from '@gilbarbara/hooks';
 import { DocsContainer } from '@storybook/addon-docs';
 import { useGlobals } from '@storybook/preview-api';
 import { GlobalTypes } from '@storybook/types';
 
-import { Box, mergeTheme } from '../src';
-import { colors as themeColors } from '../src/modules/theme';
-import { Theme, WithFlexBox, WithPadding } from '../src/types';
+import { Context, Story } from './Story';
 
-interface Context {
-  globals: {
-    appearance: 'light' | 'dark' | 'side-by-side';
-    backgrounds: { value: string };
-    color: keyof Theme['colors'];
-  };
-  parameters: {
-    align: string;
-    direction: WithFlexBox['direction'];
-    display: string;
-    justify: string;
-    layout: string;
-    maxWidth: number;
-    minHeight?: string;
-    minWidth: number;
-    padding: WithPadding['padding'];
-    paddingDocs: WithPadding['padding'];
-  };
-  viewMode: string;
-}
+import { mergeTheme } from '../src';
+import { black, colors as themeColors, darkColor, lightColor, white } from '../src/modules/theme';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   backgrounds: {
     default: 'white',
     values: [
       { name: 'white', value: '#fff', default: true },
-      { name: 'light', value: '#f0f0f0' },
+      { name: 'light', value: lightColor },
       { name: 'gray', value: '#999' },
-      { name: 'dark', value: '#101010' },
+      { name: 'dark', value: darkColor },
     ],
   },
   controls: {
@@ -66,13 +47,12 @@ export const parameters = {
     storySort: {
       method: 'alphabetical',
       order: [
-        'About',
-        'Exports',
-        'Composition',
+        'Introduction',
         'Colors',
         'Icons',
         'Theme',
-        'Customize Theme',
+        'Theme Customization',
+        'Composition',
         'Components',
       ],
     },
@@ -114,8 +94,8 @@ const ThemeBlock = styled.div(
     width: '50vw',
   },
   ({ theme }) => ({
-    background: theme.darkMode ? '#101010' : '#fff',
-    color: theme.darkMode ? '#fff' : '#101010',
+    background: theme.darkMode ? darkColor : white,
+    color: theme.darkMode ? white : black,
   }),
   ({ side }: any) =>
     side === 'left'
@@ -153,9 +133,17 @@ function Preview(StoryFn: FC, context: Context) {
   const isDocs = viewMode === 'docs';
   const isDarkMode = appearance === 'dark';
   const isSideBySide = appearance === 'side-by-side';
-  const desiredBackground = isSideBySide || appearance === 'light' ? '#fff' : '#101010';
+  const desiredBackground = isSideBySide || appearance === 'light' ? white : darkColor;
   const requireBackgroundUpdate = backgrounds?.value !== desiredBackground;
 
+  useSingleton(() => {
+    if (isDocs) {
+      return;
+    }
+
+    updateGlobals({ backgrounds: { value: isDarkMode ? darkColor : white } });
+  });
+
   useEffect(() => {
     const target = docsRef.current
       ?.closest('.docs-story')
@@ -170,7 +158,7 @@ function Preview(StoryFn: FC, context: Context) {
     }
   }, [desiredBackground, isDocs, requireBackgroundUpdate, updateGlobals]);
 
-  useEffect(() => {
+  useUpdateEffect(() => {
     if (isDocs) {
       return;
     }
@@ -191,20 +179,19 @@ function Preview(StoryFn: FC, context: Context) {
   if (isDocs) {
     return (
       <ThemeProvider theme={customTheme(isDarkMode)}>
-        <Box
+        <Story
           ref={docsRef}
           align={align}
-          data-testid="StoryDocs"
           direction={direction}
           display={display}
           justify={justify}
           minHeight={minHeight}
           minWidth={minWidth}
           padding={paddingDocs}
-          style={{ color: isDarkMode ? '#fff' : '#101010' }}
+          style={{ color: isDarkMode ? white : darkColor }}
         >
           <StoryFn />
-        </Box>
+        </Story>
       </ThemeProvider>
     );
   }
@@ -214,7 +201,7 @@ function Preview(StoryFn: FC, context: Context) {
       <>
         <ThemeProvider theme={customTheme(false)}>
           <ThemeBlock data-side="left" side="left">
-            <Box
+            <Story
               align={align}
               data-testid="Story-Left"
               direction={direction}
@@ -226,12 +213,12 @@ function Preview(StoryFn: FC, context: Context) {
               width="100%"
             >
               <StoryFn />
-            </Box>
+            </Story>
           </ThemeBlock>
         </ThemeProvider>
         <ThemeProvider theme={customTheme(true)}>
           <ThemeBlock data-side="right" side="right">
-            <Box
+            <Story
               align={align}
               data-testid="Story-Right"
               direction={direction}
@@ -243,7 +230,7 @@ function Preview(StoryFn: FC, context: Context) {
               width="100%"
             >
               <StoryFn />
-            </Box>
+            </Story>
           </ThemeBlock>
         </ThemeProvider>
       </>
@@ -252,7 +239,7 @@ function Preview(StoryFn: FC, context: Context) {
 
   return (
     <ThemeProvider theme={customTheme(isDarkMode)}>
-      <Box
+      <Story
         align={align}
         data-testid="Story"
         direction={direction}
@@ -262,11 +249,11 @@ function Preview(StoryFn: FC, context: Context) {
         minWidth={minWidth}
         mx="auto"
         padding={padding}
-        style={{ color: isDarkMode ? '#fff' : '#101010' }}
+        style={{ color: isDarkMode ? white : darkColor }}
         width="100%"
       >
         <StoryFn />
-      </Box>
+      </Story>
     </ThemeProvider>
   );
 }

.storybook/test-runner.ts

@@ -0,0 +1,27 @@
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { getStoryContext, TestRunnerConfig } from '@storybook/test-runner';
+
+const DEFAULT_VIEWPORT_SIZE = { width: 1280, height: 720 };
+
+const config: TestRunnerConfig = {
+  async preVisit(page, story) {
+    const context = await getStoryContext(page, story);
+    const viewportName = context.parameters?.viewport?.defaultViewport;
+    const viewportParameter = MINIMAL_VIEWPORTS[viewportName];
+
+    if (viewportParameter) {
+      const viewportSize = Object.fromEntries(
+        Object.entries(viewportParameter.styles!).map(([screen, size]) => [
+          screen,
+          parseInt(size, 10),
+        ]),
+      ) as { height: number; width: number };
+
+      await page.setViewportSize(viewportSize);
+    } else {
+      await page.setViewportSize(DEFAULT_VIEWPORT_SIZE);
+    }
+  },
+};
+
+export default config;

.storybook/theme.ts

@@ -1,15 +1,15 @@
 import { create } from '@storybook/theming';
 
-import { variants } from '../src/modules/theme';
+import { colors, darkColor, variants } from '../src/modules/theme';
 
 export default create({
   base: 'light',
 
   appBg: variants.primary['50'],
-  barSelectedColor: variants.primary['500'],
+  barSelectedColor: colors.primary,
 
-  colorPrimary: variants.primary['500'],
-  colorSecondary: '#101010',
+  colorPrimary: colors.primary,
+  colorSecondary: darkColor,
 
   fontBase: 'Rubik, sans-serif',
   fontCode: 'monospace',