Merge pull request lost-pixel#380 from davincho/feat/storybook-8-support

feat: Make LostPixel compatible with StoryBook V8 and upwards

.github/workflows/main.yml

@@ -30,6 +30,9 @@ jobs:
       - name: Build Example Storybook v6.5 with StoryStore v7
         run: npm run build-example-storybook-v6.5-storystore-v7
 
+      - name: Build Example Storybook v8
+        run: npm run build-example-storybook-v8
+
       - name: Build Example Pages
         run: npm run build-example-next-js-pages
 

.github/workflows/pr.yml

@@ -31,6 +31,9 @@ jobs:
       - name: Build Example Storybook v6.5 with StoryStore v7
         run: npm run build-example-storybook-v6.5-storystore-v7
 
+      - name: Build Example Storybook v8
+        run: npm run build-example-storybook-v8
+
       - name: Test
         run: npm run test
 

.github/workflows/release.yml

@@ -33,6 +33,9 @@ jobs:
       - name: Build Example Storybook v6.5 with StoryStore v7
         run: npm run build-example-storybook-v6.5-storystore-v7
 
+      - name: Build Example Storybook v8
+        run: npm run build-example-storybook-v8
+
       - name: Test
         run: npm run test
 

examples/example-storybook-v8/.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+
+# Storybook build
+storybook-static/

examples/example-storybook-v8/.lostpixel/.gitignore

@@ -0,0 +1,2 @@
+current
+difference

examples/example-storybook-v8/.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+};
+export default config;

examples/example-storybook-v8/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

examples/example-storybook-v8/README.md

@@ -0,0 +1,21 @@
+<h1>Create React App Latest (Webpack | TypeScript)</h1>
+
+<p>
+  This is project generated to serve as a reproduction starter for Storybook.
+</p>
+
+<a  href="https://stackblitz.com/github/storybookjs/sandboxes/tree/next/cra/default-ts/after-storybook?preset=node=">
+  View it in Stackblitz
+</a>
+
+<h3>Testing instructions</h3>
+
+<p>Install dependencies:</p>
+<pre>
+  npm install
+</pre>
+
+<p>Run Storybook:</p>
+<pre>
+  npm run storybook
+</pre>

examples/example-storybook-v8/lostpixel.config.ts

@@ -0,0 +1,12 @@
+// @ts-nocheck
+
+import { CustomProjectConfig } from 'lost-pixel';
+
+export const config: CustomProjectConfig = {
+  storybookShots: {
+    storybookUrl: './storybook-static',
+    breakpoints: [320, 768],
+  },
+  generateOnly: true,
+  failOnDifference: true,
+};