Upgrade to Storybook 7

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 
 defaults: &defaults
   docker:
-    - image: cimg/node:14.17
+    - image: cimg/node:18.12
   working_directory: /mnt/ramdisk
   resource_class: medium+
 

.nvmrc

@@ -1 +1 @@
-v14.11.0
+18.12

lerna.json

@@ -1,7 +1,6 @@
 {
   "version": "independent",
   "npmClient": "yarn",
-  "useWorkspaces": true,
   "command": {
     "version": {
       "no-private": true

package.json

@@ -7,11 +7,11 @@
     "packages/*"
   ],
   "devDependencies": {
-    "@kickstartds/auto-config": "^1.0.2",
-    "auto": "^10.30.0",
-    "concurrently": "^6.2.0",
-    "lerna": "^4.0.0",
-    "prettier": "^2.3.2"
+    "@kickstartds/auto-config": "^1.1.2",
+    "auto": "^10.46.0",
+    "concurrently": "^8.2.0",
+    "lerna": "^7.1.4",
+    "prettier": "^3.0.0"
   },
   "scripts": {
     "build": "yarn workspace @kickstartds/storybook-addon-component-tokens build",

packages/examples/.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

packages/examples/.storybook/main.js

@@ -1,11 +1,27 @@
+import { dirname, join } from "path";
 module.exports = {
   stories: [
     "../stories/**/*.stories.mdx",
     "../stories/**/*.stories.{js,jsx,ts,tsx}",
   ],
   addons: [
-    "@kickstartds/storybook-addon-component-tokens",
-    "@storybook/addon-docs",
-    "@storybook/addon-controls",
+    getAbsolutePath("@kickstartds/storybook-addon-component-tokens"),
+    getAbsolutePath("@storybook/addon-docs"),
+    getAbsolutePath("@storybook/addon-controls"),
   ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-webpack5"),
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
 };
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}

packages/examples/.storybook/preview.js

@@ -1,18 +1,17 @@
 import React from "react";
-import { addParameters } from "@storybook/react";
 import {
   DocsContainer,
   Title,
   Subtitle,
   Description,
   Primary,
-  ArgsTable,
+  ArgTypes,
   Stories,
   PRIMARY_STORY,
 } from "@storybook/addon-docs";
 import { CssPropsBlock } from "@kickstartds/storybook-addon-component-tokens";
 
-addParameters({
+export const parameters = {
   docs: {
     container: DocsContainer,
     page: () => {
@@ -22,18 +21,17 @@ addParameters({
           <Subtitle />
           <Description />
           <Primary />
-          <ArgsTable story={PRIMARY_STORY} />
+          <ArgTypes story={PRIMARY_STORY} />
           <CssPropsBlock />
           <Stories />
         </>
       );
     },
-    inlineStories: true,
     prepareForInline: (story) => story(),
   },
   options: {
     sidebar: {
       showRoots: true,
     },
   },
-});
+};

packages/examples/package.json

@@ -3,19 +3,24 @@
   "version": "0.1.6",
   "private": true,
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.1"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
     "@kickstartds/storybook-addon-component-tokens": "^0.1.6",
-    "@storybook/addon-controls": "^6.5",
-    "@storybook/addon-docs": "^6.5",
-    "@storybook/addons": "^6.5",
-    "@storybook/react": "^6.5",
-    "@storybook/theming": "^6.5"
+    "@storybook/addon-controls": "^7.1",
+    "@storybook/addon-docs": "^7.1",
+    "@storybook/addons": "^7.1",
+    "@storybook/react": "^7.1",
+    "@storybook/react-webpack5": "^7.1",
+    "@storybook/theming": "^7.1"
   },
   "scripts": {
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev",
+    "build-storybook": "storybook build"
   }
 }

packages/examples/stories/Simple/Simple.stories.mdx → packages/examples/stories/Simple/Simple.mdx

@@ -1,8 +1,8 @@
 import { Meta, Story, Canvas } from "@storybook/addon-docs";
 import { CssPropsBlock } from "@kickstartds/storybook-addon-component-tokens";
-import SimpleStories from "./Simple.stories";
+import * as SimpleStories from "./Simple.stories";
 
-<Meta title="Simple Component/MDX" />
+<Meta of={SimpleStories} />
 
 # Simple Component Example
 
@@ -14,12 +14,8 @@ Importing `CssPropsBlock` and configuring directly in MDX.
 import { CssPropsBlock } from "@kickstartds/storybook-addon-component-tokens";
 ```
 
-<CssPropsBlock customProperties={SimpleStories.parameters.cssprops} />
+<CssPropsBlock />
 
-<Canvas>
-  <Story id="simple-component-csf--default-story" />
-</Canvas>
+<Canvas of={SimpleStories.DefaultStory} />
 
-<Canvas>
-  <Story id="simple-component-csf--secondary-story" />
-</Canvas>
+<Canvas of={SimpleStories.SecondaryStory} />

packages/examples/stories/Simple/Simple.stories.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
-import type { Meta, Story } from "@storybook/react/types-6-0";
+import type { Meta, StoryObj } from "@storybook/react";
+import CustomDoc from "./Simple.mdx";
 import "./style.css";
 
 const cssprops = {
@@ -15,15 +16,14 @@ export default {
   title: "Simple Component/CSF",
   parameters: {
     cssprops,
+    docs: { page: CustomDoc },
   },
+  component: (args) => <div className={args.className}>Hello world!</div>,
 } as Meta;
 
-const Swatches: Story = (args) => (
-  <div className={args.className}>Hello world!</div>
-);
-
-export const DefaultStory = Swatches.bind({});
-DefaultStory.args = {
-  className: "foo",
+export const DefaultStory: StoryObj = {
+  args: {
+    className: "foo",
+  },
 };
-export const SecondaryStory = Swatches.bind({});
+export const SecondaryStory: StoryObj = {};

packages/examples/stories/Simple/Simple2.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { Meta, Story } from "@storybook/react/types-6-0";
+import type { Meta, StoryObj } from "@storybook/react";
 import "./style.css";
 
 const cssprops = {
@@ -11,8 +11,7 @@ export default {
   parameters: {
     cssprops,
   },
+  component: () => <div>Lorem Ipsum</div>,
 } as Meta;
 
-const Swatches: Story = () => <div>Lorem Ipsum</div>;
-
-export const DefaultStory = Swatches.bind({});
+export const DefaultStory: StoryObj = {};

packages/storybook-addon-component-tokens/package.json

@@ -12,8 +12,8 @@
   ],
   "homepage": "https://github.com/kickstartds/storybook-addon-component-tokens/tree/main/packages/storybook-addon-component-tokens",
   "repository": "https://github.com/kickstartds/storybook-addon-component-tokens.git",
-  "author": "ruhmesmeile GmbH <mail@ruhmesmeile.com> (https://ruhmesmeile.com)",
   "license": "MIT",
+  "author": "ruhmesmeile GmbH <mail@ruhmesmeile.com> (https://ruhmesmeile.com)",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -23,34 +23,37 @@
     "*.js",
     "*.d.ts"
   ],
-  "devDependencies": {
-    "@storybook/addons": "^6.5",
-    "@storybook/api": "^6.5",
-    "@storybook/client-api": "^6.5",
-    "@storybook/components": "^6.5",
-    "@storybook/node-logger": "^6.5",
-    "@storybook/theming": "^6.5",
-    "@types/node": "^14.14.22",
-    "@types/react": "^16.8.8",
-    "custom-property-extract": "^1.2.1",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.1.3"
-  },
-  "peerDependencies": {
-    "@storybook/addon-docs": "^6.5",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  },
   "scripts": {
-    "dev": "tsc --watch --preserveWatchOutput",
     "build": "yarn build:esm && yarn build:cjs",
-    "build:esm": "tsc",
     "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "build:esm": "tsc",
     "clean": "rimraf dist",
+    "dev": "tsc --watch --preserveWatchOutput",
     "prepublishOnly": "yarn clean && cp ../../README.md ./ && yarn build"
   },
+  "devDependencies": {
+    "@storybook/addons": "^7.1",
+    "@storybook/api": "^7.1",
+    "@storybook/components": "^7.1",
+    "@storybook/theming": "^7.1",
+    "@types/node": "^20.4.5",
+    "@types/react": "^18.2.17",
+    "@types/webpack-env": "^1.18.1",
+    "custom-property-extract": "^1.2.1",
+    "rimraf": "^5.0.1",
+    "typescript": "^5.1.6"
+  },
+  "peerDependencies": {
+    "@storybook/addons": "^7.1",
+    "@storybook/api": "^7.1",
+    "@storybook/blocks": "^7.1",
+    "@storybook/components": "^7.1",
+    "@storybook/theming": "^7.1",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
   "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
   }
 }

packages/storybook-addon-component-tokens/src/components/CssPropsBlock.tsx

@@ -1,24 +1,36 @@
-import * as React from "react";
+import { FC } from "react";
+import { useOf, Of } from "@storybook/addon-docs";
 import { FullExtractResult } from "custom-property-extract/dist/types";
 import { CssPropsTable } from "./CssPropsTable";
-import { DocsContext, DocsContextProps } from "@storybook/addon-docs";
 import { hasEntries } from "./utils";
 
 interface CssPropsBlockProps {
-  customProperties: FullExtractResult;
+  of?: Of;
+  customProperties?: FullExtractResult;
 }
 
 /**
  * For use inside Storybook Docs and MDX
  */
-export const CssPropsBlock: React.FC<CssPropsBlockProps> = (props) => {
-  const overrideCustomProperties = props.customProperties;
+export const CssPropsBlock: FC<CssPropsBlockProps> = (props) => {
+  let cssprops: FullExtractResult = {};
 
-  const context = React.useContext<DocsContextProps>(DocsContext);
-  const cssprops: FullExtractResult = { ...context?.parameters?.cssprops };
-  const customProperties = overrideCustomProperties || cssprops;
+  try {
+    const resolvedOf = useOf(props.of || "meta");
+    const { parameters = {} } =
+      resolvedOf.type === "meta"
+        ? resolvedOf.csfFile.meta
+        : resolvedOf.type === "story"
+        ? resolvedOf.story
+        : resolvedOf.type === "component"
+        ? resolvedOf.projectAnnotations
+        : {};
+    cssprops = { ...parameters.cssprops };
+  } catch (error) {}
 
-  return hasEntries(customProperties) ? (
-    <CssPropsTable customProperties={customProperties} inAddonPanel={false} />
+  cssprops = props.customProperties || cssprops;
+
+  return hasEntries(cssprops) ? (
+    <CssPropsTable customProperties={cssprops} inAddonPanel={false} />
   ) : null;
 };

packages/storybook-addon-component-tokens/src/components/CssPropsPanel.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { FC } from "react";
 import { FullExtractResult } from "custom-property-extract/dist/types";
 import { CssPropsTable } from "./CssPropsTable";
 import { NoCustomPropertiesWarning } from "./NoCustomPropertiesWarning";
@@ -9,7 +9,7 @@ import { hasEntries } from "./utils";
 /**
  * Used by the Storybook Addons Panel
  */
-export const CssPropsPanel: React.FC = () => {
+export const CssPropsPanel: FC = () => {
   const cssprops = useParameter<FullExtractResult>(PARAM_KEY, {});
 
   return hasEntries(cssprops) ? (