Upgrade to Storybook 7

.gitignore

@@ -114,16 +114,13 @@ dist
 # Local Netlify folder
 .netlify
 
-# TypeScript definition files
-*.d.ts
-
 # Style Dictionary related, generated files
 /.storybook/IconSprite.js
 /.storybook/icons.html
 /.storybook/tokens.css
 /.storybook/tokens.js
 /.storybook/icons.svg
-
+/.storybook/preview.jsx
 /src/_token-map.scss
 /src/icon-sprite.html
 /src/tokens.css

.storybook/main.ts

@@ -0,0 +1,32 @@
+import { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    "../docs/**/*.mdx",
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-a11y",
+    "@kickstartds/storybook-addon-component-tokens",
+    "@whitespace/storybook-addon-html",
+    "@kickstartds/storybook-addon-jsonschema",
+    {
+      name: "storybook-design-token",
+      options: {
+        designTokenGlob: ".storybook/*.{css,svg}",
+      },
+    },
+  ],
+  staticDirs: ["../static"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,76 @@
+import { PropsWithChildren } from "react";
+import { actions } from "@storybook/addon-actions";
+import { Preview } from "@storybook/react";
+import { DocsContainer, DocsContainerProps } from "@storybook/addon-docs";
+import { Decorator } from "@storybook/react";
+import { defaultDecorateStory } from "@storybook/preview-api";
+// @see https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange
+import "lazysizes/plugins/attrchange/ls.attrchange";
+import { unpackDecorator } from "@kickstartds/core/lib/storybook";
+
+import "@kickstartds/base/lib/global/base.js";
+import "@kickstartds/base/lib/global/base.css";
+import "../src/index.js";
+import "../static/index.css";
+import { IconSprite } from "../src/icon-sprite/IconSpriteComponent";
+import Providers from "../src/Providers";
+import { LinkProvider } from "../docs/LinkProvider";
+
+const myActions = actions("radio");
+window._ks.radio.on("*", myActions.radio);
+
+const providerDecorator: Decorator = (Story, context) => (
+  <Providers>{Story(context)}</Providers>
+);
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    html: {
+      prettier: {
+        tabWidth: 4,
+      },
+      decorator: (Story, context) =>
+        defaultDecorateStory(Story, [unpackDecorator, providerDecorator])(
+          context
+        ),
+    },
+    options: {
+      storySort: {
+        order: ["Welcome", "Design Token", "*", "Custom", "Recipes", "Pages"],
+        method: "alphabetical",
+      },
+    },
+    designToken: {
+      disable: true,
+    },
+    docs: {
+      container: (props: PropsWithChildren<DocsContainerProps>) => (
+        <LinkProvider>
+          <Providers>
+            <IconSprite />
+            <DocsContainer {...props} />
+          </Providers>
+        </LinkProvider>
+      ),
+    },
+  },
+  decorators: [
+    unpackDecorator,
+    providerDecorator,
+    (Story) => (
+      <>
+        <IconSprite />
+        <Story />
+      </>
+    ),
+  ],
+};
+
+export default preview;

docs/Welcome.story.mdx → docs/Welcome.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta, Unstyled } from "@storybook/blocks";
 import { Welcome } from "./WelcomePage";
 
 <Meta
@@ -8,4 +8,6 @@ import { Welcome } from "./WelcomePage";
   }}
 />
 
-<Welcome />
+<Unstyled>
+  <Welcome />
+</Unstyled>

docs/WelcomePage.jsx

@@ -1,11 +1,7 @@
 import { Button } from "@kickstartds/base/lib/button";
-import { Picture } from "@kickstartds/base/lib/picture";
 import { Section } from "@kickstartds/base/lib/section";
 import { TeaserBox } from "@kickstartds/base/lib/teaser-box";
-import { ContentBox } from "@kickstartds/base/lib/content-box";
-import { Headline } from "@kickstartds/base/lib/headline";
 import { Visual } from "@kickstartds/content/lib/visual";
-import { Inline } from "@bedrock-layout/primitives";
 
 export const Welcome = () => (
   <>
@@ -60,7 +56,6 @@ export const Welcome = () => (
         align: "center",
         content: "Getting started with ...",
         level: "h2",
-        pageHeader: false,
       }}
       className="col-four"
       mode="tile"
@@ -121,6 +116,7 @@ export const Welcome = () => (
         }}
       />
     </Section>
+
     <Section
       className="col-four"
       spaceAfter="small"
@@ -151,8 +147,8 @@ export const Welcome = () => (
           variant: "solid",
         }}
       />
-
     </Section>
+
     <Section
       className="col-four"
       spaceAfter="small"
@@ -191,14 +187,12 @@ export const Welcome = () => (
         align: "left",
         content: "Next-gen UI-development toolkit",
         level: "h2",
-        pageHeader: false,
         subheadline: "and framework for Design System creation",
       }}
       mode="list"
       spaceAfter="small"
       spaceBefore="small"
       width="max"
-      deko="true"
       pattern="1"
       ks-inverted="true"
     >