build(design-system): Add scripts for storybook build using nx (novuh…

…q#5333)

* build(design-system): Add scripts for storybook build using nx

* feat(design-system): Add brand logos

* refactor(design-system): Use typescript for Storybook configuration

* feat(design-system): Add novu favicon

libs/design-system/.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/design-system/.storybook/main.js → libs/design-system/.storybook/main.ts

@@ -1,5 +1,7 @@
 import { dirname, join } from 'path';
-module.exports = {
+import { StorybookConfig } from '@storybook/react-webpack5';
+
+export default {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
   addons: [
@@ -10,7 +12,7 @@ module.exports = {
   ],
 
   framework: {
-    name: getAbsolutePath('@storybook/react-webpack5'),
+    name: '@storybook/react-webpack5',
     options: {},
   },
 
@@ -21,7 +23,9 @@ module.exports = {
   docs: {
     autodocs: true,
   },
-};
+
+  staticDirs: ['./public'],
+} satisfies StorybookConfig;
 
 function getAbsolutePath(value) {
   return dirname(require.resolve(join(value, 'package.json')));

libs/design-system/.storybook/manager-head.html

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

libs/design-system/.storybook/preview.jsx → libs/design-system/.storybook/preview.tsx

@@ -4,15 +4,18 @@ import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 import { ThemeProvider } from '../src/ThemeProvider';
 import { DocsContainer } from './Doc.container';
 import { useLocalThemePreference } from '@novu/shared-web';
+import { lightTheme, darkTheme } from './NovuTheme';
+import { Parameters, Decorator } from '@storybook/react'
 
 // Bring in the Panda-generated stylesheets
 import '../styled-system/styles.css';
 
-export const parameters = {
+export const parameters: Parameters = {
   layout: 'fullscreen',
   viewMode: 'docs',
   docs: {
-    container: DocsContainer,
+    // @TODO: fix the container context
+    // container: DocsContainer,
   },
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
@@ -21,6 +24,12 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  darkMode: {
+    // Override the default dark theme
+    dark: darkTheme,
+    // Override the default light theme
+    light: lightTheme
+  }
 };
 
 const channel = addons.getChannel();
@@ -43,4 +52,4 @@ function ColorSchemeThemeWrapper({ children }) {
   );
 }
 
-export const decorators = [(renderStory) => <ColorSchemeThemeWrapper>{renderStory()}</ColorSchemeThemeWrapper>];
+export const decorators: Decorator[] = [(renderStory) => <ColorSchemeThemeWrapper>{renderStory()}</ColorSchemeThemeWrapper>];

libs/design-system/package.json

@@ -16,7 +16,9 @@
     "dist/types"
   ],
   "scripts": {
-    "prepare": "panda codegen --clean",
+    "prepare": "pnpm prepare:panda && pnpm prepare:audit",
+    "prepare:panda": "panda codegen --clean",
+    "prepare:audit": "pnpm audit-components",
     "start": "npm run build:watch",
     "prebuild": "rimraf dist",
     "lint": "eslint --ext .ts,.tsx src",
@@ -28,7 +30,7 @@
     "build:esm:watch": "cross-env node_modules/.bin/tsc -p tsconfig.esm.json -w --preserveWatchOutput",
     "build:types": "tsc --declaration --emitDeclarationOnly --declarationMap --declarationDir dist/types -p tsconfig.json",
     "storybook": "pnpm panda --watch & storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "build-storybook": "pnpm panda && storybook build",
     "cypress:install": "cypress install",
     "cypress:open": "cross-env NODE_ENV=test cypress open",
     "cypress:run": "cross-env NODE_OPTIONS=--max_old_space_size=4096 NODE_ENV=test cypress run --component",
@@ -95,5 +97,14 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "nx": {
+    "targets": {
+      "build-storybook": {
+        "dependsOn": ["^build"],
+        "outputs": ["{projectRoot}/storybook-static"],
+        "inputs": ["{projectRoot}/.storybook", "{projectRoot}/src"]
+      }
+    }
   }
 }

package.json

@@ -51,7 +51,7 @@
     "build:web": "nx build @novu/web",
     "build:widget": "nx build @novu/widget",
     "build:embed": "nx build @novu/embed",
-    "build:storybook": "nx run @novu/web:build-storybook",
+    "build:storybook": "nx run @novu/design-system:build-storybook",
     "test:providers": "cross-env pnpm --filter './providers/**' test",
     "release:patch": "lerna version patch --no-push",
     "release:minor": "lerna version minor --no-push",