Merge pull request #50 from storybookjs/build/upgrade-storybook-examples

Update Storybook examples

.github/workflows/release.yml

@@ -7,15 +7,16 @@ jobs:
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
     steps:
-      - uses: actions/checkout@v2
-
+      - uses: actions/checkout@v3
+
+      - name: Enable Corepack
+        run: corepack enable
+
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 18.x
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1

.github/workflows/test.yml

@@ -0,0 +1,39 @@
+name: Tests
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+
+      - name: Build coverage addon
+        run: | 
+          yarn install
+          yarn build
+
+      - name: Run tests in webpack example
+        run: |
+          yarn install
+          npx playwright install --with-deps
+          yarn test-storybook:ci-coverage
+        working-directory: examples/webpack5
+
+      - name: Run tests in vite example
+        run: |
+          yarn install
+          npx playwright install --with-deps
+          yarn test-storybook:ci-coverage
+        working-directory: examples/vite
+
+      - name: Generate code coverage
+        uses: codecov/codecov-action@v3
+        with:
+          verbose: true

.gitignore

@@ -6,4 +6,15 @@ build-storybook.log
 .env
 yarn-*.log
 coverage
-.nyc_output
+.nyc_output
+
+# Yarn berry
+/**/.yarn/*
+!/**/.yarn/releases
+!/**/.yarn/patches
+!/**/.yarn/plugins
+!/**/.yarn/sdks
+!/**/.yarn/versions
+/**/.pnp.*
+
+examples/webpack5/.yarn

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

examples/vite/.gitignore

@@ -22,3 +22,12 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Yarn berry
+/**/.yarn/*
+!/**/.yarn/releases
+!/**/.yarn/patches
+!/**/.yarn/plugins
+!/**/.yarn/sdks
+!/**/.yarn/versions
+/**/.pnp.*

examples/vite/.storybook/main.js → examples/vite/.storybook/main.ts

@@ -1,15 +1,14 @@
-module.exports = {
+export default {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+
   addons: [
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/addon-coverage",
   ],
+
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-  docs: {
-    autodocs: true,
-  },
 };

examples/vite/.storybook/preview.js → examples/vite/.storybook/preview.ts

@@ -4,7 +4,6 @@ export const decorators = [(StoryFn) => {
 }]
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,

examples/vite/package.json

@@ -8,28 +8,30 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "storybook": "npx storybook dev -p 6006",
-    "build-storybook": "npx storybook build"
-  },
-  "resolutions": {
-    "jackspeak": "2.1.1"
+    "build-storybook": "npx storybook build",
+    "test-storybook": "test-storybook --coverage",
+    "test-storybook:ci-coverage": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && yarn test-storybook --coverage\""
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.4.2",
-    "@storybook/addon-interactions": "7.4.2",
-    "@storybook/addon-coverage": "link:../..",
-    "@storybook/react": "7.4.2",
-    "@storybook/react-vite": "7.4.2",
-    "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.1",
+    "@storybook/addon-coverage": "portal:../..",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/test-runner": "^0.21.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^2.1.0",
-    "storybook": "7.4.2",
+    "@vitejs/plugin-react": "^3.1.0",
+    "concurrently": "^9.1.0",
+    "storybook": "^8.4.7",
     "typescript": "^4.6.4",
-    "vite": "^4.2.1"
-  }
+    "vite": "^4.2.1",
+    "wait-on": "^8.0.1"
+  },
+  "packageManager": "[email protected]"
 }

examples/vite/src/stories/Button.stories.tsx

@@ -1,41 +1,42 @@
-import React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from "@storybook/react";
 
-import { Button } from './Button';
+import { Button } from "./Button";
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-  title: 'Example/Button',
+  title: "Example/Button",
   component: Button,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' },
+    backgroundColor: { control: "color" },
   },
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
+const Template: StoryFn<typeof Button> = (args) => (
+  <Button {...args} />
+);
 
 export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   primary: true,
-  label: 'Button',
+  label: "Button",
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
-  label: 'Button',
+  label: "Button",
 };
 
 export const Large = Template.bind({});
 Large.args = {
-  size: 'large',
-  label: 'Button',
+  size: "large",
+  label: "Button",
 };
 
 export const Small = Template.bind({});
 Small.args = {
-  size: 'small',
-  label: 'Button',
+  size: "small",
+  label: "Button",
 };

examples/vite/src/stories/Header.stories.tsx

@@ -1,23 +1,24 @@
-import React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from "@storybook/react";
 
-import { Header } from './Header';
+import { Header } from "./Header";
 
 export default {
-  title: 'Example/Header',
+  title: "Example/Header",
   component: Header,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
-} as ComponentMeta<typeof Header>;
+} as Meta<typeof Header>;
 
-const Template: ComponentStoryFn<typeof Header> = (args) => <Header {...args} />;
+const Template: StoryFn<typeof Header> = (args) => (
+  <Header {...args} />
+);
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
   user: {
-    name: 'Jane Doe',
+    name: "Jane Doe",
   },
 };