chore: migrate storybook to v8

apps/storybook/.storybook/main.js

@@ -22,13 +22,12 @@ const config = {
     getAbsolutePath("@storybook/addon-designs"),
     getAbsolutePath("@storybook/addon-themes"),
     getAbsolutePath("@storybook/addon-a11y"),
+    "@chromatic-com/storybook"
   ],
   framework: {
     name: getAbsolutePath("@storybook/html-vite"),
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
+  docs: {},
 };
 export default config;

apps/storybook/.storybook/preview.js

@@ -6,7 +6,6 @@ defineCustomElements();
 const preview = {
   tags: ["autodocs"],
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,

apps/storybook/package.json

@@ -11,30 +11,32 @@
     "storybook-test": "storybook build && clear && concurrently -k -s first -n 'Server,Test' -c 'magenta,blue' --hide 'Server' 'http-server ./storybook-static --port 6006 --silent' 'wait-on http-get://127.0.0.1:6006 && test-storybook --no-cache --verbose --'"
   },
   "dependencies": {
+    "@storybook/web-components": "^8.1.11",
     "ui-stencil": "workspace:*"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.5.2",
-    "@storybook/addon-designs": "^7.0.5",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-interactions": "^7.5.2",
-    "@storybook/addon-links": "^7.5.2",
-    "@storybook/addon-storysource": "^7.5.2",
-    "@storybook/addon-styling-webpack": "^0.0.5",
-    "@storybook/addon-themes": "^7.5.2",
-    "@storybook/blocks": "^7.5.2",
-    "@storybook/html": "^7.5.2",
-    "@storybook/html-vite": "^7.5.2",
-    "@storybook/manager-api": "^7.5.2",
-    "@storybook/nextjs": "^7.5.2",
-    "@storybook/react": "^7.5.2",
-    "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.5.2",
-    "eslint-plugin-storybook": "^0.6.15",
+    "@chromatic-com/storybook": "^1",
+    "@storybook/addon-a11y": "^8.1.11",
+    "@storybook/addon-designs": "^8.0.2",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-storysource": "^8.1.11",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-themes": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/html": "^8.1.11",
+    "@storybook/html-vite": "^8.1.11",
+    "@storybook/manager-api": "^8.1.11",
+    "@storybook/nextjs": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/test": "^8.1.11",
+    "@storybook/test-runner": "^0.19.0",
+    "@storybook/theming": "^8.1.11",
+    "eslint-plugin-storybook": "^0.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.5.2",
+    "storybook": "^8.1.11",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
     "wait-on": "^7.0.1"

apps/storybook/stories/search-box.stories.tsx

@@ -1,10 +1,9 @@
-import type { StoryObj, Meta } from '@storybook/html'
+import type { StoryObj, Meta } from '@storybook/web-components'
 
-// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
-const meta = {
+const meta: Meta = {
   title: 'SearchBox',
-  tags: ['autodocs']
-} satisfies Meta
+  component: 'search-box',
+}
 
 export default meta
 type Story = StoryObj
@@ -20,7 +19,7 @@ const Template = (props) => {
 }
 
 // More on writing stories with args: https://storybook.js.org/docs/html/writing-stories/args
-export const Button: Story = {
+export const Primary: Story = {
   render: Template,
   args: {
     theme: {