docs: update storybook guide for v10

.storybook/main.js → .storybook/main.ts

@@ -1,21 +1,17 @@
 // had to add @rollup/rollup-linux-x64-gnu as an optional dep
 // https://github.com/vitejs/vite/discussions/15532
-/** @type { import('@storybook/web-components-vite').StorybookConfig } */
-const config = {
+import type { StorybookConfig } from "@storybook/web-components-vite";
+
+const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
     "@chromatic-com/storybook",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-links",
     "storybook-addon-fetch-mock",
   ],
-  framework: {
-    name: "@storybook/web-components-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
+  framework: "@storybook/web-components-vite",
   staticDirs: ["../src"],
 };
 

.storybook/preview.js → .storybook/preview.ts

@@ -1,14 +1,18 @@
 import "../src/styles/theme.css";
+import "./reset.css";
+import type { Preview } from "@storybook/web-components-vite";
 
-/** @type { import('@storybook/web-components').Preview } */
-const preview = {
+const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+    a11y: {
+      test: "error",
+    },
   },
 };
 

.storybook/reset.css

@@ -0,0 +1,3 @@
+strong {
+  font-size: 14px;
+}

CONTRIBUTING.md

@@ -267,13 +267,13 @@ Below is an example of a basic Storybook file:
 ```js
 import "./header.js";
 
-export default {
+const meta = {
   title: "Components/Header",
 };
 
-const Template = () => "<app-header></app-header>";
+export default meta;
 
-export const Primary = Template.bind({});
+export const Primary = () => "<app-header></app-header>";
 ```
 
 #### Content as Data