reg-viz · Quramy · Mar 26, 2024 · Mar 19, 2024 · Mar 19, 2024 · Mar 20, 2024
diff --git a/.github/workflows/integrated_test.yml b/.github/workflows/integrated_test.yml
@@ -22,9 +22,12 @@ jobs:
           - examples/v7-managed-react
           - examples/v7-react18
           - examples/v8-react18
+          - examples/v8-vite5
         include:
           - example_dir: examples/v8-react18
             node-version: 18.x
+          - example_dir: examples/v8-vite5
+            node-version: 18.x
 
     steps:
       - uses: actions/checkout@v3

diff --git a/examples/v8-vite5/.eslintrc.cjs b/examples/v8-vite5/.eslintrc.cjs
@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/examples/v8-vite5/.gitignore b/examples/v8-vite5/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*storybook.log
diff --git a/examples/v8-vite5/.storybook/main.js b/examples/v8-vite5/.storybook/main.js
@@ -0,0 +1,27 @@
+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/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('storycap'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;
diff --git a/examples/v8-vite5/.storybook/preview.js b/examples/v8-vite5/.storybook/preview.js
@@ -0,0 +1,22 @@
+import { withScreenshot } from 'storycap'
+
+export const decorators = [
+  withScreenshot,
+];
+
+export const parameters = {
+  screenshot: {
+    viewports: {
+      LARGE: {
+        width: 1200,
+        height: 800,
+      },
+      SMALL: {
+        width: 375,
+        height: 667,
+        deviceScaleFactor: 2,
+        isMobile: true,
+      },
+    },
+  },
+};
diff --git a/examples/v8-vite5/README.md b/examples/v8-vite5/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/examples/v8-vite5/index.html b/examples/v8-vite5/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/examples/v8-vite5/package.json b/examples/v8-vite5/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "v8-vite5",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "clear": "rimraf __screenshots__",
+    "dev": "vite",
+    "build": "vite build",
+    "test": "vitest run",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prestorybook": "../../scripts/e2e-prestorybook.js .",
+    "prebuild-storybook": "../../scripts/e2e-prestorybook.js .",
+    "storycap:all": "yarn prestorybook && yarn test && storycap --verbose --server-timeout 100000 --server-cmd \"storybook dev -p 9009\" \"http://localhost:9009\""
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.2.23",
+    "@storybook/addon-essentials": "^8.0.2",
+    "@storybook/addon-interactions": "^8.0.2",
+    "@storybook/addon-links": "^8.0.2",
+    "@storybook/addon-onboarding": "^8.0.2",
+    "@storybook/blocks": "^8.0.2",
+    "@storybook/manager-api": "^8.0.0",
+    "@storybook/preview-api": "^8.0.0",
+    "@storybook/react": "^8.0.2",
+    "@storybook/react-vite": "^8.0.2",
+    "@storybook/test": "^8.0.2",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-storybook": "^0.8.0",
+    "jsdom": "^24.0.0",
+    "prop-types": "^15.8.1",
+    "rimraf": "^2.6.3",
+    "storybook": "^8.0.2",
+    "vite": "^5.1.6",
+    "vitest": "^1.4.0"
+  }
+}
diff --git a/examples/v8-vite5/public/vite.svg b/examples/v8-vite5/public/vite.svg
diff --git a/examples/v8-vite5/setupFile.js b/examples/v8-vite5/setupFile.js
@@ -0,0 +1,5 @@
+import '@testing-library/jest-dom'
+import { setProjectAnnotations } from '@storybook/react';
+import * as globalStorybookConfig from './.storybook/preview.js';
+
+setProjectAnnotations(globalStorybookConfig);
diff --git a/examples/v8-vite5/src/App.css b/examples/v8-vite5/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);
+  }
+}
diff --git a/examples/v8-vite5/src/App.jsx b/examples/v8-vite5/src/App.jsx
@@ -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;
diff --git a/examples/v8-vite5/src/App.test.jsx b/examples/v8-vite5/src/App.test.jsx
@@ -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();
+});
diff --git a/examples/v8-vite5/src/Button.jsx b/examples/v8-vite5/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>
+);
diff --git a/examples/v8-vite5/src/Button.stories.jsx b/examples/v8-vite5/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,
+    },
+  },
+};
diff --git a/examples/v8-vite5/src/ClickableButton.jsx b/examples/v8-vite5/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;
diff --git a/examples/v8-vite5/src/ClickableButton.stories.jsx b/examples/v8-vite5/src/ClickableButton.stories.jsx
@@ -0,0 +1,14 @@
+import ClickableButton from './ClickableButton';
+
+export default {
+  title: 'ClickableButton',
+  component: ClickableButton,
+};
+
+export const Normal = {
+  parameters: {
+    screenshot: {
+      click: 'button.clickable',
+    },
+  },
+};
diff --git a/examples/v8-vite5/src/ImageButton.jsx b/examples/v8-vite5/src/ImageButton.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const ImageButton = () => (
+  <button style={{
+    width: 48,
+    height: 48,
+    backgroundSize: 'contain',
+    backgroundImage: "url('https://raw.githubusercontent.com/reg-viz/artwork/master/logo/reg-viz-default.svg?sanitize=true')",
+  }} />
+);
+
+export default ImageButton;
diff --git a/examples/v8-vite5/src/ImageButton.stories.jsx b/examples/v8-vite5/src/ImageButton.stories.jsx
@@ -0,0 +1,8 @@
+import ImageButton from './ImageButton';
+
+export default {
+  title: 'ImageButton',
+  component: ImageButton,
+};
+
+export const Normal = {};
diff --git a/examples/v8-vite5/src/MyButton.jsx b/examples/v8-vite5/src/MyButton.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const MyButton = () => (
+  <button className="my-button">
+    My Button
+  </button>
+);
+
+export default MyButton;
diff --git a/examples/v8-vite5/src/MyButton.stories.jsx b/examples/v8-vite5/src/MyButton.stories.jsx
@@ -0,0 +1,23 @@
+import MyButton from './MyButton';
+
+export default {
+  title: 'MyButton',
+  component: MyButton,
+};
+
+export const Normal = {
+  parameters: {
+    screenshot: {
+      variants: {
+        hovered: {
+          extends: ['LARGE', 'SMALL'],
+          hover: '.my-button',
+        },
+        focused: {
+          extends: ['LARGE', 'SMALL'],
+          focus: '.my-button',
+        },
+      },
+    },
+  },
+};