refactor: Tweak storybook

novuhq · May 14, 2024 · 4fd92ee · 4fd92ee
1 parent 8af5b56
commit 4fd92ee
Show file tree

Hide file tree

Showing 6 changed files with 1,368 additions and 339 deletions.
diff --git a/libs/novui/.storybook/Doc.container.tsx b/libs/novui/.storybook/Doc.container.tsx
diff --git a/libs/novui/.storybook/main.ts b/libs/novui/.storybook/main.ts
@@ -1,23 +1,19 @@
-import { dirname, join } from 'path';
 import { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
-  addons: [getAbsolutePath('storybook-dark-mode'), getAbsolutePath('@storybook/addon-mdx-gfm')],
+  addons: ['storybook-dark-mode', '@storybook/addon-controls'],
 
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
 
   docs: {
-    autodocs: true,
+    // TODO: re-enable docs when we decide how to incorporate them
+    autodocs: false,
   },
 
   staticDirs: ['./public'],
 } satisfies StorybookConfig;
-
-function getAbsolutePath(value) {
-  return dirname(require.resolve(join(value, 'package.json')));
-}
diff --git a/libs/novui/.storybook/preview.tsx b/libs/novui/.storybook/preview.tsx
@@ -1,20 +1,15 @@
 import React from 'react';
-// import { addons } from '@storybook/preview-api';
-// import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
-// import { ColorSchemePreferenceEnum, useLocalThemePreference } from '@novu/shared-web';
 import { lightTheme, darkTheme } from './NovuTheme';
 import { Parameters, Decorator } from '@storybook/react';
+import { css } from '../styled-system/css';
 
 // Bring in the Panda-generated stylesheets
 import '../src/index.css';
 
-// import '../styled-system/styles.css';
-
 export const parameters: Parameters = {
   layout: 'fullscreen',
-  viewMode: 'docs',
   docs: {
-    // @TODO: fix the container context
+    // TODO: fix the container context
     // container: DocsContainer,
   },
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -29,23 +24,15 @@ export const parameters: Parameters = {
     dark: darkTheme,
     // Override the default light theme
     light: lightTheme,
+    darkClass: 'dark',
+    stylePreview: true,
   },
 };
 
 // const channel = addons.getChannel();
 function ColorSchemeThemeWrapper({ children }) {
-  // const { setThemeStatus } = useLocalThemePreference();
-
-  // const handleColorScheme = (value) => {
-  //   setThemeStatus(value ? ColorSchemePreferenceEnum.DARK : ColorSchemePreferenceEnum.LIGHT);
-  // };
-
-  // useEffect(() => {
-  //   channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
-  //   return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
-  // }, [channel]);
-
-  return <div style={{ margin: '3em' }}>{children}</div>;
+  // wraps the component preview in a full-page container with proper bg color
+  return <section className={css({ padding: '250', bg: 'surface.page', height: '[100dvh]' })}>{children}</section>;
 }
 
 export const decorators: Decorator[] = [

diff --git a/libs/novui/package.json b/libs/novui/package.json
@@ -65,12 +65,13 @@
     "@pandacss/dev": "^0.38.0",
     "@pandacss/eslint-plugin": "^0.1.2",
     "@pandacss/studio": "^0.38.0",
-    "@storybook/addon-actions": "^7.5.0",
-    "@storybook/addon-docs": "^8.0.10",
-    "@storybook/client-api": "^7.6.10",
-    "@storybook/react": "^8.0.10",
-    "@storybook/react-vite": "^8.0.10",
-    "@storybook/theming": "^8.0.10",
+    "@storybook/addon-actions": "8.1.0",
+    "@storybook/addon-controls": "^8.1.0",
+    "@storybook/addon-docs": "^8.1.0",
+    "@storybook/react": "^8.1.0",
+    "@storybook/react-vite": "^8.1.0",
+    "@storybook/theming": "^8.1.0",
+    "@storybook/types": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -84,7 +85,8 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
-    "storybook": "^8.0.10",
+    "storybook": "^8.1.0",
+    "storybook-dark-mode": "^4.0.1",
     "typescript": "^4.9.5",
     "vite": "^4.5.2",
     "vite-tsconfig-paths": "^4.3.2",

diff --git a/libs/novui/src/tokens/typography/typography.stories.tsx b/libs/novui/src/tokens/typography/typography.stories.tsx
@@ -1,36 +1,28 @@
 import { Meta } from '@storybook/react';
 import React from 'react';
-/*
- * import { Divider, Flex, styled } from '../../../styled-system/jsx';
- * import { text, title } from '../../../styled-system/recipes';
- */
+import { Divider, Flex, styled } from '../../../styled-system/jsx';
+import { text, title } from '../../../styled-system/recipes';
 
-/*
- * const Text = styled('p', text);
- * const Title = styled('h2', title);
- */
+const Text = styled('p', text);
+const Title = styled('h2', title);
 
 export default {
   title: 'Panda/Components/Typography',
-  // component: Text,
+  component: Text,
   argTypes: {},
-};
-// } as Meta<typeof Text>;
+} as Meta<typeof Text>;
 
 export const all = () => (
-  /*
-   * <Flex direction="column" gap="100">
-   *   <Text>Default Body</Text>
-   *   <Text variant="main">Main text</Text>
-   *   <Text variant="secondary">Secondary text</Text>
-   *   <Text variant="strong">Strong text</Text>
-   *   <Text variant="mono">Mono text</Text>
-   *   <Divider />
-   *   <Title>Default title</Title>
-   *   <Title variant="page">Page title</Title>
-   *   <Title variant="section">Section title</Title>
-   *   <Title variant="subsection">Subsection title</Title>
-   * </Flex>
-   */
-  <div>Hello</div>
+  <Flex direction="column" gap="100">
+    <Text>Default Body</Text>
+    <Text variant="main">Main text</Text>
+    <Text variant="secondary">Secondary text</Text>
+    <Text variant="strong">Strong text</Text>
+    <Text variant="mono">Mono text</Text>
+    <Divider />
+    <Title>Default title</Title>
+    <Title variant="page">Page title</Title>
+    <Title variant="section">Section title</Title>
+    <Title variant="subsection">Subsection title</Title>
+  </Flex>
 );