[Design System] Storybook & Vitest (#5569)

* refactor: Setup storybook & vitest

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,19 @@
+import { StorybookConfig } from '@storybook/react-vite';
+
+export default {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  addons: ['storybook-dark-mode', '@storybook/addon-controls'],
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  docs: {
+    // TODO: re-enable docs when we decide how to incorporate them
+    autodocs: false,
+  },
+
+  staticDirs: ['./public'],
+} satisfies StorybookConfig;

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,40 @@
+import React from 'react';
+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';
+
+export const parameters: Parameters = {
+  layout: 'fullscreen',
+  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,
+    darkClass: 'dark',
+    stylePreview: true,
+  },
+};
+
+// const channel = addons.getChannel();
+function ColorSchemeThemeWrapper({ children }) {
+  // 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[] = [
+  (renderStory) => <ColorSchemeThemeWrapper>{renderStory()}</ColorSchemeThemeWrapper>,
+];

libs/novui/package.json

@@ -5,7 +5,10 @@
   "description": "Novu's Design System & Component Library",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
-  "files": ["dist", "styled-system"],
+  "files": [
+    "dist",
+    "styled-system"
+  ],
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -49,7 +52,9 @@
     "prebuild": "rimraf dist styled-system",
     "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: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": [],
@@ -60,17 +65,51 @@
     "@pandacss/dev": "^0.38.0",
     "@pandacss/eslint-plugin": "^0.1.2",
     "@pandacss/studio": "^0.38.0",
+    "@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",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^18.11.12",
     "@types/react": "^17.0.1",
     "@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",
-    "typescript": "^4.9.5"
+    "storybook": "^8.1.0",
+    "storybook-dark-mode": "^4.0.1",
+    "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/components/Test.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { Test } from './Test';
+
+export default {
+  title: 'Components/Test',
+  component: Test,
+  argTypes: {},
+} as Meta<typeof Test>;
+
+const Template: StoryFn<typeof Test> = ({ ...args }) => <Test {...args}>Example Text</Test>;
+
+export const all = () => <Test />;

libs/novui/src/index.css

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

libs/novui/vite.config.ts

@@ -0,0 +1,24 @@
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    // leverages tsconfig to work with panda styled-system
+    tsconfigPaths(),
+    react(),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: ['react', 'react/jsx-runtime'],
+    },
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.jsx', '.js'],
+  },
+});

libs/novui/vitest.config.ts

@@ -0,0 +1,11 @@
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: './setup-tests.ts',
+  },
+});