[Storybook] Upgrade dependencies, add examples for variations

storybook/.storybook/test-runner.ts

@@ -1,7 +1,8 @@
 import { TestRunnerConfig } from '@storybook/test-runner';
-import { postVisit } from '@saucelabs/visual-storybook';
+import { postVisit, preVisit } from '@saucelabs/visual-storybook';
 
 const config: TestRunnerConfig = {
+    preVisit,
     postVisit,
 };
 

storybook/package.json

@@ -2,19 +2,20 @@
   "name": "visual-storybook",
   "version": "0.1.0",
   "engines": {
-    "node": "^16.13 || >=18"
+    "node": ">=18"
   },
   "dependencies": {
-    "@storybook/test": "^8.3.0",
+    "@storybook/test": "^8.4.4",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "27.5.2",
-    "@types/node": "20.12.3",
-    "@types/react": "18.2.74",
-    "@types/react-dom": "18.2.13",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@types/node": "20.17.6",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "playwright": "1.49.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
     "typescript": "4.9.5",
     "web-vitals": "3.5.2"
@@ -52,24 +53,25 @@
     ]
   },
   "devDependencies": {
-    "@saucelabs/visual-storybook": "0.6.1",
-    "@storybook/addon-essentials": "^8.3.0",
-    "@storybook/addon-interactions": "^8.3.0",
-    "@storybook/addon-links": "^8.3.0",
-    "@storybook/addon-onboarding": "^8.3.0",
-    "@storybook/blocks": "^8.3.0",
-    "@storybook/preset-create-react-app": "^8.3.0",
-    "@storybook/react": "^8.3.0",
-    "@storybook/react-webpack5": "^8.3.0",
+    "@saucelabs/visual-storybook": "0.9.0",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.4",
+    "@storybook/addon-onboarding": "^8.4.4",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/preset-create-react-app": "^8.4.4",
+    "@storybook/react": "^8.4.4",
+    "@storybook/react-webpack5": "^8.4.4",
     "@storybook/test-runner": "^0.19.1",
     "babel-plugin-named-exports-order": "0.0.2",
     "concurrently": "8.2.2",
     "eslint-plugin-storybook": "^0.8.0",
     "http-server": "14.1.1",
+    "jest": "29.7.0",
     "prop-types": "15.8.1",
-    "storybook": "^8.3.0",
-    "wait-on": "7.2.0",
-    "webpack": "5.89.0"
+    "storybook": "^8.4.4",
+    "wait-on": "8.0.1",
+    "webpack": "5.96.1"
   },
   "packageManager": "[email protected]+sha1.75c6e8a4075abfc494770f998bf37b9ada110f51"
 }

storybook/src/stories/Button.stories.ts

@@ -1,17 +1,76 @@
 import type { Meta, StoryObj } from "@storybook/react";
-
+import { takeVisualSnapshot } from "@saucelabs/visual-storybook/play";
 import { Button } from "./Button";
+import { expect, userEvent, within } from '@storybook/test';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
   title: "Example/Button",
   component: Button,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.hover(button);
+
+    // Take a screenshot of the focus behavior
+    await button.focus();
+    await expect(button).toHaveFocus();
+    await takeVisualSnapshot('Button Focused');
+
+    await userEvent.click(button);
+    await takeVisualSnapshot('Button Clicked / Active');
+
+    // Unfocus the element to reset it for the remaining screenshots / variations
+    await button.blur();
+  },
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
     layout: "centered",
+    sauceVisual: {
+      variations: [
+        {
+          // Prefixes the story name with `[disabled]` -- eg: `Example/Button/[disabled] Button`.
+          prefix: '[disabled] ',
+          args: {
+            disabled: true,
+          },
+        },
+        // Examples to test multiple sizes of a single component
+        {
+          prefix: '[small] ',
+          args: {
+            size: "small",
+          },
+        },
+        {
+          prefix: '[medium] ',
+          args: {
+            size: "medium",
+          },
+        },
+        {
+          prefix: '[large] ',
+          args: {
+            size: "large",
+          },
+        },
+        {
+          // postfixes the story name with ` Primary` -- eg: `Example/Button/Button Primary`.
+          postfix: ' Primary',
+          args: {
+            primary: true,
+          },
+        },
+        {
+          // Overrides the name completely. -- eg `Example/Button/Btn primary=true`
+          name: 'Btn primary=true',
+          args: {
+            primary: true,
+          },
+        },
+      ],
+    } satisfies SauceVisualParams<Meta<typeof Button>['args']>,
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-  tags: ["autodocs"],
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: "color" },
@@ -21,30 +80,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: "Button",
-  },
-};
-
-export const Secondary: Story = {
+export const _Button: Story = {
   args: {
     label: "Button",
   },
 };
-
-export const Large: Story = {
-  args: {
-    size: "large",
-    label: "Button!",
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: "small",
-    label: "Button!",
-  },
-};

storybook/src/stories/Button.tsx

@@ -22,6 +22,7 @@ interface ButtonProps {
    * Optional click handler
    */
   onClick?: () => void;
+  disabled?: boolean;
 }
 
 /**

storybook/src/stories/button.css

@@ -7,6 +7,12 @@
   display: inline-block;
   line-height: 1;
 }
+.storybook-button:hover {
+  background: #f1f1f1;
+}
+.storybook-button:focus {
+  box-shadow: 0 0 10px blue;
+}
 .storybook-button--primary {
   color: white;
   background-color: #1ea7fd;
@@ -28,3 +34,6 @@
   font-size: 16px;
   padding: 12px 24px;
 }
+.storybook-button:disabled {
+  background: #e8e8e8;
+}

storybook/test-runner-jest.config.js

@@ -17,6 +17,7 @@ module.exports = {
       devices: [ 'Desktop Edge', 'Desktop Firefox', 'Desktop Chrome', 'Desktop Safari', 'Pixel 5', 'iPhone 14 Pro Max'],
     },
   },
+  testTimeout: 60_000,
 
   /** Add your own overrides below
    * @see https://jestjs.io/docs/configuration