Upgrade Storybook

.storybook/DocsTemplate.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Stories } from "@storybook/blocks";
+import { Meta, Title, Subtitle, Stories } from "@storybook/addon-docs/blocks";
 
 <Meta isTemplate />
 

.storybook/main.ts

@@ -3,19 +3,18 @@ import type { StorybookConfig } from "@storybook/web-components-vite";
 const config: StorybookConfig = {
   framework: "@storybook/web-components-vite",
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: ["@storybook/addon-essentials"],
-  docs: {
-    autodocs: true,
-  },
+  addons: ["@storybook/addon-docs"],
+
   async viteFinal(config) {
     const { mergeConfig } = await import("vite");
     return mergeConfig(config, {
-      optimizeDeps: {
-        exclude: [
-          "@storybook/blocks",
-          "@storybook/theming",
-          "@storybook/components",
-        ],
+      css: {
+        preprocessorOptions: {
+          scss: {
+            api: "modern",
+            quietDeps: true,
+          },
+        },
       },
     });
   },

.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from "@storybook/web-components";
+import type { Preview } from "@storybook/web-components-vite";
 import { html } from "lit";
 
 import "../src/js/main.js";
@@ -23,11 +23,11 @@ const preview: Preview = {
       },
     },
     backgrounds: {
-      values: [
-        { name: "light", value: "#fff" },
-        { name: "grey", value: "#f6f6f6" },
-        { name: "dark", value: "#155366" },
-      ],
+      options: {
+        light: { name: "light", value: "#fff" },
+        grey: { name: "grey", value: "#f6f6f6" },
+        dark: { name: "dark", value: "#155366" },
+      },
     },
     docs: {
       page: DocsTemplate,
@@ -38,6 +38,7 @@ const preview: Preview = {
     },
     designSystemEnabled: true,
   },
+
   decorators: [
     (storyFn, { parameters }) => {
       const { designSystemEnabled } = parameters;
@@ -49,6 +50,8 @@ const preview: Preview = {
       return storyFn();
     },
   ],
+
+  tags: ["autodocs"],
 };
 
 export default preview;

eslint.config.js

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import js from "@eslint/js";
 import gitignore from "eslint-config-flat-gitignore";
 import eslintConfigPrettier from "eslint-config-prettier";
@@ -17,4 +20,5 @@ export default [
   js.configs.recommended,
   ...tsEslint.configs.recommended,
   eslintConfigPrettier,
+  ...storybook.configs["flat/recommended"],
 ];