feat: convert stories to storybook 7

.storybook/main.ts

@@ -2,8 +2,8 @@ import { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
   stories: [
-    "../docs/**/*.story.mdx",
-    "../src/**/*.stories.mdx",
+    "../docs/**/*.mdx",
+    "../src/**/*.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)",
   ],
   addons: [
@@ -15,10 +15,9 @@ const config: StorybookConfig = {
     {
       name: "storybook-design-token",
       options: {
-        designTokenGlob: ".storybook/tokens/*.{css,svg}",
+        designTokenGlob: ".storybook/*.{css,svg}",
       },
     },
-    "@storybook/addon-mdx-gfm",
   ],
   staticDirs: ["../static"],
   framework: {

.storybook/preview.tsx

@@ -1,6 +1,7 @@
+import { PropsWithChildren } from "react";
 import { actions } from "@storybook/addon-actions";
 import { Preview } from "@storybook/react";
-import { DocsContainer } from "@storybook/addon-docs";
+import { DocsContainer, DocsContainerProps } from "@storybook/addon-docs";
 // @see https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange
 import "lazysizes/plugins/attrchange/ls.attrchange";
 import { unpackDecorator } from "@kickstartds/core/lib/storybook";
@@ -66,7 +67,7 @@ const preview: Preview = {
       disable: true,
     },
     docs: {
-      container: (props) => (
+      container: (props: PropsWithChildren<DocsContainerProps>) => (
         <LinkProvider>
           <Providers>
             <IconSprite />

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"
     >

package.json

@@ -1,9 +1,10 @@
 {
   "name": "@kickstartds/design-system",
   "version": "2.5.20",
-  "author": "ruhmesmeile GmbH <[email protected]> (https://ruhmesmeile.com)",
+  "keywords": [],
   "homepage": "https://ruhmesmeile.com",
   "license": "SEE LICENSE IN LICENSE",
+  "author": "ruhmesmeile GmbH <[email protected]> (https://ruhmesmeile.com)",
   "main": "dist/index.js",
   "types": "dist/components/types.d.ts",
   "files": [
@@ -20,6 +21,7 @@
     "dist:schema": "yarn schema && node scripts/copySchema.js && yarn typings",
     "dist:images": "cp -r static/img static/patterns static/logo.svg static/logo-dark.svg dist/",
     "dist:favicons": "cp -r static/favicon dist/",
+    "prepare": "patch-package",
     "prepublishOnly": "rm -rf dist && mkdir -p dist && run-p 'build-tokens' 'schema' 'token' && run-p dist:*",
     "sass": "sass --load-path=node_modules src/index.scss static/index.css",
     "sass-manager": "sass --load-path=node_modules .storybook/manager.scss static/manager.css",
@@ -32,47 +34,35 @@
     "start": "yarn sass && run-p watch:* storybook",
     "storybook": "DESIGN_TOKEN_GLOB=.storybook/tokens.css storybook dev -p 6006"
   },
-  "keywords": [],
   "dependencies": {
     "@bedrock-layout/primitives": "^2.2.5",
-    "@kickstartds/base": "^2.2.0",
-    "@kickstartds/blog": "^2.2.0",
-    "@kickstartds/content": "^2.1.0",
-    "@kickstartds/core": "^2.2.0",
-    "@kickstartds/form": "^2.2.0",
-    "@kickstartds/style-dictionary": "^2.2.0",
-    "change-case": "^4.1.2",
+    "@kickstartds/base": "^2.3.0-next.2",
+    "@kickstartds/blog": "^2.3.0-next.2",
+    "@kickstartds/content": "^2.2.0-next.1",
+    "@kickstartds/core": "^2.3.0-next.2",
+    "@kickstartds/form": "^2.3.0-next.2",
+    "@kickstartds/style-dictionary": "^2.2.1-next.0",
     "classnames": "^2.3.2",
-    "json-schema-to-typescript": "^13.0.2",
-    "json-schema-traverse": "^1.0.0",
-    "postinstall-postinstall": "^2.1.0",
-    "styled-components": "^5.3.11",
-    "typescript": "^5.1.6"
+    "styled-components": "^5.3.11"
   },
   "devDependencies": {
     "@auto-it/npm": "^10.46.0",
     "@auto-it/released": "^10.46.0",
-    "@babel/core": "^7.22.5",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
     "@kickstartds/storybook-addon-component-tokens": "1.0.0-canary.18.36.0",
     "@kickstartds/storybook-addon-jsonschema": "^1.0.6",
-    "@storybook/addon-a11y": "^7.0.24",
-    "@storybook/addon-actions": "^7.0.24",
-    "@storybook/addon-docs": "^7.0.24",
-    "@storybook/addon-essentials": "^7.0.24",
-    "@storybook/addon-links": "^7.0.24",
-    "@storybook/addon-mdx-gfm": "^7.0.24",
-    "@storybook/addons": "^7.0.24",
-    "@storybook/react": "^7.0.24",
-    "@storybook/react-vite": "^7.0.24",
-    "@storybook/react-webpack5": "^7.0.24",
-    "@storybook/theming": "^7.0.24",
+    "@storybook/addon-a11y": "^7.4.0",
+    "@storybook/addon-actions": "^7.4.0",
+    "@storybook/addon-docs": "^7.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addons": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-vite": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
+    "@storybook/theming": "^7.4.0",
     "@whitespace/storybook-addon-html": "git+https://github.com/lmestel/storybook-addon-html.git#v5.4.0",
     "auto": "^10.46.0",
-    "babel-loader": "^9.1.2",
+    "change-case": "^4.1.2",
     "chokidar-cli": "^3.0.0",
     "chromatic": "^6.19.9",
     "custom-property-extract": "^1.2.1",
@@ -83,20 +73,25 @@
     "include-media": "^2.0.0",
     "json-schema-merge-allof": "^0.8.1",
     "json-schema-ref-parser": "^9.0.9",
+    "json-schema-to-typescript": "^13.0.2",
+    "json-schema-traverse": "^1.0.0",
     "kickstartds": "^2.0.0",
     "lazysizes": "^5.3.2",
     "npm-run-all": "^4.1.5",
+    "patch-package": "^8.0.0",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.63.6",
-    "storybook": "^7.0.24",
-    "storybook-design-token": "^2.9.0"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
+    "storybook": "^7.4.0",
+    "storybook-design-token": "3.0.0-beta.3",
+    "typescript": "^5.1.6"
   },
   "engines": {
     "yarn": "^1.22.10"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
   }
 }