feat: Working setup for Storybook

libs/novui/.storybook/Doc.container.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { DocsContainer as BaseContainer } from '@storybook/addon-docs';
+import { themes } from '@storybook/theming';
+
+export const DocsContainer = ({ children, context }) => {
+  return (
+    <BaseContainer
+      context={{
+        ...context,
+        storyById: (id) => {
+          const storyContext = context.storyById(id);
+          return {
+            ...storyContext,
+            parameters: {
+              ...storyContext?.parameters,
+              docs: {
+                // theme: dark ? themes.dark : themes.light,
+              },
+            },
+          };
+        },
+      }}
+    >
+      {children}
+    </BaseContainer>
+  );
+};

libs/novui/.storybook/NovuTheme.tsx

@@ -0,0 +1,23 @@
+import { ThemeVarsPartial } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
+
+const themeBase: ThemeVarsPartial = {
+  base: 'light',
+  brandTitle: 'Novu Design System',
+  brandTarget: '_self',
+}
+/**
+ * Novu Design System theme for Storybook
+ * 
+ * @see https://storybook.js.org/docs/configure/theming
+ */
+export const lightTheme = create({
+  ...themeBase,
+  brandImage: './novu-logo-light.svg',
+});
+
+export const darkTheme = create({
+  ...themeBase,
+  base: 'dark',
+  brandImage: './novu-logo-dark.svg',
+});

libs/novui/.storybook/main.ts

@@ -0,0 +1,23 @@
+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')],
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
+
+  staticDirs: ['./public'],
+} satisfies StorybookConfig;
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

libs/novui/.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="icon" type="image/svg+xml" href="./favicon.svg">

libs/novui/.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<script>
+  window._env_ = {
+    SKIP_PREFLIGHT_CHECK: 'true',
+  };
+</script>

libs/novui/.storybook/preview.tsx

@@ -0,0 +1,53 @@
+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';
+
+// 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
+    // container: DocsContainer,
+  },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  darkMode: {
+    // Override the default dark theme
+    dark: darkTheme,
+    // Override the default light theme
+    light: lightTheme,
+  },
+};
+
+// 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>;
+}
+
+export const decorators: Decorator[] = [
+  (renderStory) => <ColorSchemeThemeWrapper>{renderStory()}</ColorSchemeThemeWrapper>,
+];

libs/novui/package.json

@@ -53,6 +53,8 @@
     "lint": "eslint --ext .ts,.tsx src",
     "build": "cross-env node_modules/.bin/tsc",
     "build:watch": "pnpm panda & cross-env node_modules/.bin/tsc -w --preserveWatchOutput",
+    "build:storybook": "pnpm panda && storybook build",
+    "storybook": "pnpm panda --watch & storybook dev -p 6006",
     "studio": "pnpm panda studio"
   },
   "keywords": [],
@@ -64,11 +66,11 @@
     "@pandacss/eslint-plugin": "^0.1.2",
     "@pandacss/studio": "^0.38.0",
     "@storybook/addon-actions": "^7.5.0",
-    "@storybook/addon-docs": "^7.4.2",
+    "@storybook/addon-docs": "^8.0.10",
     "@storybook/client-api": "^7.6.10",
-    "@storybook/react": "^7.4.2",
-    "@storybook/react-webpack5": "^7.4.2",
-    "@storybook/theming": "^7.4.2",
+    "@storybook/react": "^8.0.10",
+    "@storybook/react-vite": "^8.0.10",
+    "@storybook/theming": "^8.0.10",
     "@testing-library/jest-dom": "^6.4.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -78,15 +80,34 @@
     "@types/react-dom": "^17.0.1",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.6.13",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
+    "storybook": "^8.0.10",
     "typescript": "^4.9.5",
     "vite": "^4.5.2",
+    "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.2.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "nx": {
+    "targets": {
+      "build-storybook": {
+        "dependsOn": [
+          "^build"
+        ],
+        "outputs": [
+          "{projectRoot}/storybook-static"
+        ],
+        "inputs": [
+          "{projectRoot}/.storybook",
+          "{projectRoot}/src"
+        ]
+      }
+    }
   }
 }

libs/novui/postcss.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  /**
+   * must use this syntax for vite + panda
+   * https://panda-css.com/docs/installation/storybook#install-panda
+   */
+  plugins: [require('@pandacss/dev/postcss')()],
+};

libs/novui/setup-tests.ts

@@ -0,0 +1,8 @@
+import { afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+// runs a clean after each test case (e.g. clearing jsdom)
+afterEach(() => {
+  cleanup();
+});

libs/novui/src/index.css

@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;

libs/novui/src/tokens/typography/typography.stories.tsx

@@ -1,28 +1,36 @@
 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>
+  /*
+   * <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>
 );