Introduce legacy sb module

.github/workflows/integrated_test.yml

@@ -14,17 +14,20 @@ jobs:
     strategy:
       matrix:
         example_dir:
-          - examples/v5-managed-react-legacy-decorator
-          - examples/v5-simple
-          - examples/v6-managed-react
-          - examples/v6-simple
-          - examples/v6-story-store-v7
+          # - examples/v5-managed-react-legacy-decorator
+          # - examples/v5-simple
+          # - examples/v6-managed-react
+          # - examples/v6-simple
+          # - examples/v6-story-store-v7
           - examples/v7-managed-react
           - examples/v7-react18
           - examples/v8-react18
+          - examples/v8-react18-vite-prod
         include:
           - example_dir: examples/v8-react18
             node-version: 18.x
+          - example_dir: examples/v8-react18-vite-prod
+            node-version: 18.x
 
     steps:
       - uses: actions/checkout@v3

examples/v5-managed-react-legacy-decorator/.storybook/addons.js

@@ -1,4 +1,4 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 
-import 'storycap/register';
+import 'storycap/legacy-sb/register';

examples/v5-managed-react-legacy-decorator/.storybook/config.js

@@ -1,5 +1,5 @@
 import { configure, addDecorator } from '@storybook/react';
-import { withScreenshot } from 'storycap';
+import { withScreenshot } from 'storycap/legacy-sb';
 
 function loadStories() {
   require('../src/stories');

examples/v5-managed-vue/.storybook/addons.js

@@ -1,4 +1,4 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 
-import 'storycap/register';
+import 'storycap/legacy-sb/register';

examples/v5-managed-vue/.storybook/config.js

@@ -1,5 +1,5 @@
 import { configure, addDecorator, addParameters } from '@storybook/vue';
-import { withScreenshot } from 'storycap';
+import { withScreenshot } from 'storycap/legacy-sb';
 
 addDecorator(withScreenshot);
 addParameters({

examples/v6-managed-react/.storybook/main.js

@@ -1,4 +1,4 @@
 module.exports = {
   stories: ['../src/**/*.stories.@(js|jsx|mdx)'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links', 'storycap'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links', 'storycap/legacy-sb'],
 };

examples/v6-managed-react/.storybook/preview.js

@@ -1,4 +1,4 @@
-import { withScreenshot } from 'storycap';
+import { withScreenshot } from 'storycap/legacy-sb';
 
 export const decorators = [
   withScreenshot,

examples/v7-managed-react/.storybook/main.js

@@ -3,7 +3,7 @@ module.exports = {
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-links',
-    'storycap',
+    'storycap/legacy-sb',
     '@storybook/preset-create-react-app',
   ],
   framework: {
@@ -13,4 +13,4 @@ module.exports = {
   docs: {
     autodocs: true
   }
-};
+};

examples/v7-managed-react/.storybook/preview.js

@@ -1,4 +1,4 @@
-import { withScreenshot } from 'storycap';
+import { withScreenshot } from 'storycap/legacy-sb';
 
 export const decorators = [
   withScreenshot,

examples/v7-managed-react/package.json

@@ -16,7 +16,7 @@
     "storybook": "storybook dev -p 9009",
     "build-storybook": "storybook build",
     "prestorybook": "../../scripts/e2e-prestorybook.js .",
-    "storycap:all": "yarn prestorybook && yarn test && storycap --verbose --server-timeout 100000 --server-cmd \"storybook dev -p 9009\" \"http://localhost:9009\""
+    "storycap:all": "yarn prestorybook && CI=true yarn test && storycap --verbose --server-timeout 100000 --server-cmd \"storybook dev -p 9009\" \"http://localhost:9009\""
   },
   "eslintConfig": {
     "extends": "react-app",

examples/v7-react18/.storybook/main.js

@@ -3,7 +3,7 @@ module.exports = {
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-links',
-    'storycap',
+    'storycap/legacy-sb',
     '@storybook/preset-create-react-app',
   ],
   framework: {
@@ -13,4 +13,4 @@ module.exports = {
   docs: {
     autodocs: true
   }
-};
+};

examples/v7-react18/.storybook/preview.js

@@ -1,4 +1,4 @@
-import { withScreenshot } from 'storycap';
+import { withScreenshot } from 'storycap/legacy-sb';
 
 export const decorators = [
   withScreenshot,

examples/v7-react18/package.json

@@ -16,7 +16,7 @@
     "storybook": "storybook dev -p 9009",
     "build-storybook": "storybook build",
     "prestorybook": "../../scripts/e2e-prestorybook.js .",
-    "storycap:all": "yarn prestorybook && yarn test && storycap --verbose --server-timeout 100000 --server-cmd \"storybook dev -p 9009\" \"http://localhost:9009\""
+    "storycap:all": "yarn prestorybook && CI=true yarn test && storycap --verbose --server-timeout 100000 --server-cmd \"storybook dev -p 9009\" \"http://localhost:9009\""
   },
   "eslintConfig": {
     "extends": "react-app",

examples/v8-react18-vite-prod/.gitignore

@@ -0,0 +1,25 @@
+# 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*
+yarn-debug.log*
+yarn-error.log*
+
+storybook-static/

examples/v8-react18-vite-prod/.storybook/main.js

@@ -0,0 +1,30 @@
+import { join, dirname } from 'path';
+
+/**
+ * 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')));
+}
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.stories.@(js|jsx|mdx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('storycap'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

examples/v8-react18-vite-prod/.storybook/preview.js

@@ -0,0 +1,34 @@
+import { withScreenshot } from 'storycap';
+
+const decorators = [
+  withScreenshot,
+];
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  decorators,
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    screenshot: {
+      viewports: {
+        LARGE: {
+          width: 1200,
+          height: 800,
+        },
+        SMALL: {
+          width: 375,
+          height: 667,
+          deviceScaleFactor: 2,
+          isMobile: true,
+        },
+      },
+    },
+  },
+};
+
+export default preview;

examples/v8-react18-vite-prod/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "v8-react18-vite-prod",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "clear": "rimraf __screenshots__",
+    "build": "react-scripts build",
+    "test": "react-scripts test --setupFiles ./setupFile.js",
+    "storybook": "storybook dev -p 9011",
+    "build-storybook": "storybook build",
+    "prestorybook": "../../scripts/e2e-prestorybook.js .",
+    "storycap:all": "yarn prestorybook && yarn build-storybook && storycap --verbose --server-timeout 100000 --server-cmd \"http-server -p 9011 storybook-static\" \"http://127.0.0.1:9011\""
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.2.25",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-onboarding": "^8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-vite": "^8.0.4",
+    "@storybook/test": "^8.0.4",
+    "http-server": "^14.1.1",
+    "prop-types": "^15.8.1",
+    "storybook": "^8.0.4",
+    "vite": "^5.2.6"
+  }
+}

examples/v8-react18-vite-prod/src/App.css

@@ -0,0 +1,33 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

examples/v8-react18-vite-prod/src/App.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <p>
+            Edit <code>src/App.js</code> and save to reload.
+          </p>
+          <a
+            className="App-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+        </header>
+      </div>
+    );
+  }
+}
+
+export default App;

examples/v8-react18-vite-prod/src/App.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  const root = ReactDOM.createRoot(div);
+  root.render(<App />);
+  root.unmount();
+});

examples/v8-react18-vite-prod/src/Button.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Button = ({ children, onClick }) => (
+  <button className='button' onClick={onClick} type="button">
+    {children}
+  </button>
+);

examples/v8-react18-vite-prod/src/Button.stories.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Button } from './Button';
+import { action } from '@storybook/addon-actions';
+
+import { isScreenshot } from 'storycap';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const WithText = {
+  render: () => <Button onClick={action('clicked')}>Hello {isScreenshot() ? 'Storycap' : 'Button'}</Button>,
+};
+
+export const WithSomeEmoji = {
+  render: () => (
+    <Button onClick={action('clicked')}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  ),
+};
+
+export const ToBeSkipped = {
+  parameters: {
+    screenshot: {
+      skip: true,
+    },
+  },
+};

examples/v8-react18-vite-prod/src/ClickableButton.jsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+
+const ClickableButton = () => {
+  const [counter, setCounter] = useState(0);
+  return (
+    <button className="clickable" onClick={() => setCounter(counter + 1)}>
+      Clicked: {counter}
+    </button>
+  );
+};
+
+export default ClickableButton;