chore: update storybook to version 7

.changeset/good-turkeys-add.md

@@ -0,0 +1,7 @@
+---
+"@marigold/jest-config": minor
+"@marigold/storybook-config": major
+"@marigold/components": minor
+---
+
+chore: update storybook to version 7 + fix coverage

.npmrc

@@ -1,6 +1,7 @@
 public-hoist-pattern[]=*@emotion/core*
 public-hoist-pattern[]=*@types*
 public-hoist-pattern[]=*@react-types*
+public-hoist-pattern[]=*storybook*
 
 strict-peer-dependencies=false
 save-prefix=''

config/jest/index.js

@@ -17,7 +17,7 @@ const base = {
       '@swc/jest',
       {
         jsc: {
-          target: 'es2021',
+          target: 'es2022',
         },
         sourceMaps: true,
       },
@@ -26,6 +26,7 @@ const base = {
   transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'],
 
   // coverage
+  coverageProvider: 'v8',
   coverageDirectory: 'coverage',
   collectCoverageFrom: [
     '**/*.{ts,tsx}',
@@ -37,6 +38,7 @@ const base = {
     '!**/node_modules/**',
   ],
 
+  clearMocks: true,
   snapshotFormat: {
     printBasicPrototype: false,
   },

config/storybook/main.ts

@@ -1,11 +1,11 @@
-import type { StorybookConfig } from '@storybook/react/types';
+import type { StorybookConfig } from '@storybook/react-vite';
 import path from 'node:path';
 import { sync as findUpSync } from 'find-up';
-import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+import { mergeConfig } from 'vite';
+import viteTsConfigPaths from 'vite-tsconfig-paths';
 
 const parent = path.resolve(__dirname, '..');
 const root = path.dirname(findUpSync('package.json', { cwd: parent }) || '.');
-const configFile = findUpSync('tsconfig.json', { cwd: root });
 
 let paths = [path.resolve(root, '**/*.stories.tsx')];
 if (process.env.FOLDERS) {
@@ -32,20 +32,27 @@ const config: StorybookConfig = {
   ],
   typescript: {
     check: false,
-    checkOptions: {},
-    reactDocgen: false,
   },
   features: {
-    postcss: false,
-    interactionsDebugger: true,
+    storyStoreV7: false,
   },
-  framework: '@storybook/react',
-  webpackFinal: async config => {
-    // Add support for TS path mapping
-    config.resolve!.plugins = [new TsconfigPathsPlugin({ configFile })];
-    return config;
+  framework: '@storybook/react-vite',
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [
+        viteTsConfigPaths({
+          root: '../../',
+        }),
+      ],
+      use: [
+        {
+          loader: require.resolve('@storybook/source-loader'),
+          options: {} /* your sourceLoaderOptions here */,
+        },
+      ],
+    });
   },
   staticDirs: [{ from: './assets', to: '/assets' }],
 };
 
-module.exports = config;
+export default config;

config/storybook/package.json

@@ -27,33 +27,39 @@
     "@marigold/theme-core": "workspace:*",
     "@marigold/theme-unicorn": "workspace:*",
     "@mdx-js/react": "2.3.0",
-    "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-interactions": "6.5.16",
-    "@storybook/jest": "0.0.10",
-    "@storybook/testing-library": "0.0.13",
+    "@storybook/addon-a11y": "7.0.0-beta.55",
+    "@storybook/addon-essentials": "7.0.0-beta.55",
+    "@storybook/addon-interactions": "7.0.0-beta.55",
+    "@storybook/jest": "0.0.11-next.0",
+    "@storybook/source-loader": "7.0.0-beta.55",
+    "@storybook/testing-library": "0.0.14-next.1",
     "@types/react": "18",
     "babel-loader": "9.1.2",
     "chromatic": "^6.6.3",
     "find-up": "5.0.0",
-    "tsconfig-paths-webpack-plugin": "4.0.0",
+    "vite-tsconfig-paths": "4.0.5",
     "webpack": "4"
   },
   "devDependencies": {
+    "@storybook/builder-vite": "7.0.0-beta.55",
+    "@storybook/cli": "7.0.0-beta.55",
+    "@storybook/react-vite": "7.0.0-beta.55",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "4.9.5"
+    "storybook": "next",
+    "typescript": "4.9.4",
+    "vite": "4.1.2"
   },
   "peerDependencies": {
-    "@storybook/react": "6.5.16",
+    "@storybook/react": "7.0.0-beta.49",
     "react": "18.x",
     "react-dom": "18.x",
     "typescript": "4.9.5"
   },
   "scripts": {
-    "start": "start-storybook -p 1337 -c .",
-    "build": "build-storybook --disable-telemetry -c . -o ../../storybook-static",
-    "test": "start-storybook --smoke-test --ci -c .",
+    "start": "storybook dev -p 1337 -c .",
+    "build": "storybook build --disable-telemetry -c . -o ../../storybook-static",
+    "test": "storybook dev --smoke-test --ci -c .",
     "chromatic": "pnpm dlx chromatic --force-rebuild --only-changed --exit-zero-on-changes",
     "ci": "pnpm dlx chromatic"
   }

config/storybook/preview-head.html

@@ -3,3 +3,6 @@
   href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
   rel="stylesheet"
 />
+<script>
+  window.global = window;
+</script>

package.json

@@ -17,7 +17,6 @@
     "@marigold/jest-config": "workspace:*",
     "@marigold/prettier-config": "workspace:*",
     "@marigold/tsconfig": "workspace:*",
-    "@storybook/react": "6.5.16",
     "@testing-library/dom": "9.0.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
@@ -40,7 +39,7 @@
   },
   "scripts": {
     "start": "pnpm --filter @marigold/docs dev",
-    "dev": "FOLDERS=packages/components/src,packages/system/src,packages/tokens/src pnpm --filter @marigold/storybook-config start",
+    "dev": "FOLDERS=packages/components/src,packages/system/src pnpm --filter @marigold/storybook-config start",
     "build": "pnpm --filter \"@marigold/components...\" --filter \"@marigold/theme*...\" build",
     "build:docs": "pnpm --filter @marigold/docs build",
     "build:storybook": "pnpm --filter @marigold/storybook-config build",

packages/components/src/Aside/Aside.stories.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Box } from '../Box';
 
 import { Aside } from './Aside';
 import isChromatic from 'chromatic';
 
-export default {
+const meta = {
   title: 'Components/Aside',
+  component: Aside,
   argTypes: {
     space: {
       control: {
@@ -22,73 +23,101 @@ export default {
         'xlarge',
         'xxlarge',
       ],
-      defaultValue: 'medium',
+      table: {
+        type: { summary: 'select' },
+        defaultValue: { summary: 'medium' },
+      },
       description: 'Value representing the space between the two elements',
     },
     side: {
       control: {
         type: 'select',
       },
       options: ['left', 'right'],
-      defaultValue: 'left',
+      table: {
+        type: { summary: 'select' },
+        defaultValue: { summary: 'left' },
+      },
       description: 'Which element to treat as the sidebar',
     },
     stretch: {
       control: {
         type: 'boolean',
       },
-      defaultValue: true,
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
       description: 'Make the adjacent elements adopt their natural height',
     },
     sideWidth: {
       control: {
         type: 'text',
       },
-      defaultValue: 'xxlarge',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'xxlarge' },
+      },
       description: `Represents the width of the sidebar when adjacent. If not set (undefined) it defaults to the sidebar's content width`,
     },
     wrap: {
       control: {
         type: 'text',
       },
-      defaultValue: '50%',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '50%' },
+      },
       description:
         'The narrowest the content (main) element can be before wrapping. Should be a percentage.',
     },
   },
-} as Meta;
+  args: {
+    side: 'left',
+    space: 'medium',
+    wrap: '50%',
+    stretch: true,
+    sideWidth: 'xxlarges',
+  },
+} satisfies Meta;
+
+export default meta;
 
-export const Basic: ComponentStory<typeof Aside> = args => (
-  <Aside {...args}>
-    <Box css={{ bg: '#f1f3f5' }}>
-      Ketchup was once sold as medicine. The condiment was prescribed and sold
-      to people suffering with indigestion back in 1834.
-    </Box>
-    <Box css={{ bg: '#f1f3f5' }}>
-      There is actually a word for someone giving an opinion on something they
-      know nothing about. An 'ultracrepidarian' is someone who voices thoughts
-      beyond their expertise.
-    </Box>
-  </Aside>
-);
+export const Basic: StoryObj<typeof Aside> = {
+  render: args => (
+    <Aside {...args}>
+      <Box css={{ bg: '#f1f3f5' }}>
+        Ketchup was once sold as medicine. The condiment was prescribed and sold
+        to people suffering with indigestion back in 1834.
+      </Box>
+      <Box css={{ bg: '#f1f3f5' }}>
+        There is actually a word for someone giving an opinion on something they
+        know nothing about. An 'ultracrepidarian' is someone who voices thoughts
+        beyond their expertise.
+      </Box>
+    </Aside>
+  ),
+};
 
-export const InheritWidth: ComponentStory<typeof Aside> = () => (
-  <Aside space="large">
-    <img
-      src="https://images.dog.ceo/breeds/pug/n02110958_13993.jpg"
-      alt="Pug"
-      width="250px"
-    />
-    <Box css={{ bg: '#f1f3f5' }}>
-      Pugs were originally bred to be lapdogs for Chinese royalty. They lived in
-      luxury with the emperor, his family, and members of the imperial court.
-      They were royal and loyal companions, and were highly valued in society.
-    </Box>
-  </Aside>
-);
+export const InheritWidth: StoryObj<typeof Aside> = {
+  render: args => (
+    <Aside space="large" {...args}>
+      <img
+        src="https://images.dog.ceo/breeds/pug/n02110958_13993.jpg"
+        alt="Pug"
+        width="250px"
+      />
+      <Box css={{ bg: '#f1f3f5' }}>
+        Pugs were originally bred to be lapdogs for Chinese royalty. They lived
+        in luxury with the emperor, his family, and members of the imperial
+        court. They were royal and loyal companions, and were highly valued in
+        society.
+      </Box>
+    </Aside>
+  ),
+};
 
 Basic.parameters = {
-  // Set the viewports in Chromatic at a story level.
   chromatic: { viewports: [320, 1200] },
   theme: isChromatic() ? 'b2b' : 'stacked',
 };