fix: storybook build (DX-1551) (#116)

Co-authored-by: Tyler Han <tylerhan97@gmail.com>

.gitignore

@@ -31,3 +31,5 @@ nyc_coverage*
 .turbo
 
 .env.*
+
+build-storybook.log

package.json

@@ -38,19 +38,19 @@
     "access": "public"
   },
   "scripts": {
+    "//": "Scripts to make binaries available to workspaces",
     "build": "turbo run build",
     "build:all": "yarn build",
     "dev": "turbo run dev --parallel",
+    "g:run-p": "cd $INIT_CWD && run-p",
+    "g:tsc": "cd $INIT_CWD && tsc",
     "lint": "turbo run lint",
     "lint:fix": "turbo run lint:fix",
     "lint:report": "turbo run lint:report",
     "prepare": "husky install",
     "setup_github_pages": "./scripts/setup_github_pages.sh",
     "test:dependencies": "depcheck && turbo run test:dependencies",
-    "test:unit": "turbo run test:unit",
-    "//": "Scripts to make binaries available to workspaces",
-    "g:run-p": "cd $INIT_CWD && run-p",
-    "g:tsc": "cd $INIT_CWD && tsc"
+    "test:unit": "turbo run test:unit"
   },
   "volta": {
     "node": "20.10.0",

packages/react-chat/.babelrc.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
+}

packages/react-chat/.depcheckrc

@@ -30,6 +30,7 @@
     "husky",
     "lint-staged",
     "slate",
-    "zod"
+    "zod",
+    "chromatic"
   ]
 }

packages/react-chat/.storybook/main.ts

@@ -1,18 +1,16 @@
-import { StorybookViteConfig } from '@storybook/builder-vite';
+import { StorybookConfig } from '@storybook/react-vite';
 import { mergeConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
 
 import { createPlugins } from '../vite.config';
 
-const config: StorybookViteConfig = {
-  stories: ['../src/**/*.story.mdx', '../src/**/*.story.@(js|jsx|ts|tsx)', '../iframe/**/*.story.@(js|jsx|ts|tsx)'],
+const config: StorybookConfig = {
+  stories: ['../src/**/*.story.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', 'storybook-dark-mode'],
-  framework: '@storybook/react',
+  framework: '@storybook/react-vite',
   core: {
     builder: '@storybook/builder-vite',
   },
-  features: {
-    storyStoreV7: true,
-  },
   typescript: {
     check: true,
     reactDocgen: 'react-docgen-typescript',
@@ -27,11 +25,14 @@ const config: StorybookViteConfig = {
     },
   },
 
-  viteFinal: (config) =>
-    mergeConfig(config, {
-      base: '/react-chat/',
-      plugins: createPlugins(__dirname),
-    }),
+  viteFinal: (config) => {
+    return mergeConfig(config, {
+      plugins: [...createPlugins(__dirname), svgr()],
+      define: {
+        __USE_SHADOW_ROOT__: false,
+      },
+    });
+  },
 };
 
 export default config;

packages/react-chat/.storybook/preview-head.html

@@ -7,4 +7,5 @@
 
 <script>
   window.global = window;
+  __USE_SHADOW_ROOT__ = false;
 </script>

packages/react-chat/.storybook/preview.tsx

@@ -0,0 +1,28 @@
+import { Preview } from '@storybook/react';
+import React from 'react';
+
+import { RuntimeProvider } from '../src/contexts/RuntimeContext/index';
+
+const MOCK_CONFIG = { render: { mode: 'embedded' }, verify: { projectID: ' ' } } as any;
+const MOCK_ASSISTANT = { persistence: {}, extensions: [] } as any;
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <RuntimeProvider config={MOCK_CONFIG} assistant={MOCK_ASSISTANT}>
+        <Story />
+      </RuntimeProvider>
+    ),
+  ],
+};
+
+export default preview;

packages/react-chat/chromatic.config.json

@@ -0,0 +1,3 @@
+{
+    "outputDir": "./storybook-static"
+}

packages/react-chat/package.json

@@ -7,11 +7,12 @@
     "url": "https://github.com/voiceflow/react-chat/issues"
   },
   "dependencies": {
+    "@storybook/react": "^8.0.2",
     "@voiceflow/base-types": "2.97.3",
     "@voiceflow/dtos": "1.10.0",
     "@voiceflow/sdk-runtime": "1.7.0",
     "@voiceflow/slate-serializer": "1.5.5",
-    "@voiceflow/stitches-react": "2.3.0",
+    "@voiceflow/stitches-react": "2.3.1",
     "@voiceflow/voiceflow-types": "3.26.21",
     "bowser": "^2.11.0",
     "chroma-js": "2.4.2",
@@ -34,15 +35,18 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.24.1",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@emotion/core": "10.1.1",
     "@playwright/test": "^1.41.2",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/builder-vite": "^0.2.2",
+    "@storybook/addon-actions": "8.0.2",
+    "@storybook/addon-essentials": "8.0.2",
+    "@storybook/addon-interactions": "8.0.2",
+    "@storybook/addon-links": "8.0.2",
+    "@storybook/builder-vite": "8.0.2",
     "@storybook/eslint-config-storybook": "^3.1.2",
-    "@storybook/react": "^6.5.10",
+    "@storybook/react-vite": "8.0.2",
     "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "12.1.4",
@@ -55,6 +59,7 @@
     "@voiceflow/eslint-config": "6.1.0",
     "@voiceflow/prettier-config": "1.2.1",
     "@voiceflow/tsconfig": "1.4.8",
+    "chromatic": "11.2.0",
     "depcheck": "1.4.3",
     "eslint": "7.32.0",
     "eslint-output": "^3.0.1",
@@ -69,13 +74,14 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "3.0.2",
+    "storybook": "8.0.2",
     "storybook-dark-mode": "^1.1.0",
     "tsc-alias": "1.8.6",
     "vite": "3.2.2",
     "vite-plugin-dts": "^1.6.6",
     "vite-plugin-fonts": "^0.6.0",
     "vite-plugin-html": "^3.2.0",
-    "vite-plugin-svgr": "^2.2.1",
+    "vite-plugin-svgr": "4.1.0",
     "vite-tsconfig-paths": "^3.5.0",
     "vitest": "0.23.1"
   },
@@ -99,7 +105,8 @@
   "scripts": {
     "build": "yarn clean && yarn g:run-p \"types\" \"build:package\" \"build:bundle\"",
     "build:bundle": "NODE_ENV=production vite build",
-    "build:docs": "NODE_OPTIONS=--openssl-legacy-provider STORYBOOK_BASE_HREF=react-chat build-storybook -o docs",
+    "build:docs": "NODE_OPTIONS=--openssl-legacy-provider STORYBOOK_BASE_HREF=react-chat storybook build -o docs",
+    "build-storybook": "storybook build -o docs",
     "build:package": "NODE_ENV=production vite --config vite.package.config.ts build && tsc-alias -p tsconfig.build.json",
     "clean": "rimraf build dist",
     "dev": "NODE_ENV=development vite",
@@ -110,11 +117,11 @@
     "lint:report": "yarn lint:output",
     "prepublishOnly": "yarn build",
     "start:e2e": "http-server -o e2e",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "test": "yarn test:run",
     "test:dependencies": "depcheck",
-    "test:unit": "NODE_ENV=test vitest run --coverage",
     "test:e2e": "yarn playwright test",
+    "test:unit": "NODE_ENV=test vitest run --coverage",
     "types": "yarn g:tsc --project tsconfig.build.json --noEmit"
   },
   "types": "build/src/package.entry.d.ts"

packages/react-chat/src/assets/svg/index.ts

@@ -1,7 +1,7 @@
-export { ReactComponent as close } from './close.svg';
-export { ReactComponent as closeV2 } from './closeV2.svg';
-export { ReactComponent as largeArrowLeft } from './large-arrow-left.svg';
-export { ReactComponent as minus } from './minus.svg';
-export { ReactComponent as smallArrowUp } from './small-arrow-up.svg';
-export { ReactComponent as thumbsUp } from './thumbs-up.svg';
-export { ReactComponent as topCaret } from './top-caret.svg';
+export { default as close } from './close.svg?react';
+export { default as closeV2 } from './closeV2.svg?react';
+export { default as largeArrowLeft } from './large-arrow-left.svg?react';
+export { default as minus } from './minus.svg?react';
+export { default as smallArrowUp } from './small-arrow-up.svg?react';
+export { default as thumbsUp } from './thumbs-up.svg?react';
+export { default as topCaret } from './top-caret.svg?react';

packages/react-chat/src/components/AssistantInfo/AssistantInfo.story.tsx

@@ -1,24 +1,28 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import Chat from '@/components/Chat';
 import { VF_ICON } from '@/fixtures';
 
-import AssistantInfo from '.';
+import AssistantInfo, { AssistantInfoProps } from '.';
 
-export default {
+type Story = StoryObj<typeof AssistantInfo>;
+
+const meta: Meta<typeof AssistantInfo> = {
   title: 'Components/Chat/AssistantInfo',
   component: AssistantInfo,
   args: {
     title: 'Assistant Name',
     description: "Voiceflow's virtual assistant is here to help.",
     avatar: VF_ICON,
   },
-} as ComponentMeta<typeof AssistantInfo>;
+};
 
-const Template: ComponentStory<typeof AssistantInfo> = (args) => (
-  <Chat.Container>
-    <AssistantInfo {...args} />
-  </Chat.Container>
-);
+export default meta;
 
-export const Default = Template.bind({});
+export const Default: Story = {
+  render: (args: AssistantInfoProps) => (
+    <Chat.Container>
+      <AssistantInfo {...args} />
+    </Chat.Container>
+  ),
+};

packages/react-chat/src/components/Avatar/Avatar.story.tsx

@@ -1,10 +1,12 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { VF_ICON } from '@/fixtures';
 
 import Avatar from '.';
 
-export default {
+type Story = StoryObj<typeof Avatar>;
+
+const meta: Meta<typeof Avatar> = {
   title: 'Core/Avatar',
   component: Avatar,
   argTypes: {
@@ -17,16 +19,17 @@ export default {
   args: {
     avatar: VF_ICON,
   },
-} as ComponentMeta<typeof Avatar>;
-
-const Template: ComponentStory<typeof Avatar> = (args) => <Avatar {...args} />;
+};
+export default meta;
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
+export const Small: Story = {
+  args: {
+    size: 'small',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
+export const Large: Story = {
+  args: {
+    size: 'large',
+  },
 };

packages/react-chat/src/components/Bubble/Bubble.story.tsx

@@ -1,10 +1,12 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import * as SVGs from '@/assets/svg';
 
 import Bubble from '.';
 
-export default {
+type Story = StoryObj<typeof Bubble>;
+
+const meta: Meta<typeof Bubble> = {
   title: 'Core/Bubble',
   component: Bubble,
   args: {
@@ -21,18 +23,19 @@ export default {
       control: { type: 'radio' },
     },
   },
-} as ComponentMeta<typeof Bubble>;
-
-const Template: ComponentStory<typeof Bubble> = (args) => <Bubble {...args} />;
+};
+export default meta;
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  svg: 'smallArrowUp',
+export const Small: Story = {
+  args: {
+    size: 'small',
+    svg: 'smallArrowUp',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  svg: 'close',
+export const Large: Story = {
+  args: {
+    size: 'large',
+    svg: 'close',
+  },
 };