Merge pull request #527 from pixiv/naporitan/merge-v4-v3.11.0

merge v4 v3.11.0

.eslintrc.js

@@ -7,6 +7,7 @@ const config = {
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
     'plugin:storybook/recommended',
+    'plugin:import/recommended',
     'prettier',
   ],
   rules: {
@@ -24,6 +25,20 @@ const config = {
     'no-console': 'warn',
     'react/jsx-uses-react': 'off',
     'react/react-in-jsx-scope': 'off',
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: [
+          '*.config.ts',
+          '**/*.config.ts',
+          '**/*.test.ts',
+          '**/*.test.tsx',
+          '**/*.story.tsx',
+          '**/_lib/**',
+          '**/*.config.js',
+        ],
+      },
+    ],
   },
   parserOptions: {
     project: ['./tsconfig.json', './packages/**/tsconfig.json'],
@@ -36,8 +51,13 @@ const config = {
     react: {
       version: 'detect',
     },
+    'import/resolver': {
+      typescript: {
+        project: ['./tsconfig.json', './packages/**/tsconfig.json'],
+      },
+    },
   },
-  plugins: ['jest'],
+  plugins: ['jest', 'import'],
   overrides: [{ files: ['*.cjs', '*.mjs'] }],
 }
 

.husky/commit-msg

@@ -0,0 +1 @@
+yarn commitlint -e $HUSKY_GIT_PARAMS

.prettierignore

@@ -2,6 +2,7 @@ dist/
 node_modules/
 __snapshots__/
 .yarn/
+yarn.lock
 /public/
 /storybook-static/
 /coverage/

.storybook/docs-container.tsx

@@ -0,0 +1,16 @@
+import React, { ComponentPropsWithoutRef, FC } from 'react'
+import { DocsContainer as BaseContainer } from '@storybook/addon-docs'
+import { useDarkMode } from 'storybook-dark-mode'
+import { themes } from '@storybook/theming'
+
+export const DocsContainer: FC<
+  ComponentPropsWithoutRef<typeof BaseContainer>
+> = ({ children, ...rest }) => {
+  const dark = useDarkMode()
+
+  return (
+    <BaseContainer {...rest} theme={dark ? themes.dark : themes.light}>
+      {children}
+    </BaseContainer>
+  )
+}

.storybook/jest.config.mjs

@@ -7,6 +7,7 @@ export default {
       '<rootDir>/../__mocks__/file.ts',
     '\\.(styl|css|less|scss)$': '<rootDir>/../__mocks__/style.ts',
     '\\.(mdx)$': '<rootDir>/../__mocks__/mdx.ts',
+    '@storybook/react-dom-shim': '@storybook/react-dom-shim/dist/react-16',
   },
   setupFilesAfterEnv: ['../jest.setup.ts', './jest.setup.ts'],
 }

.storybook/main.js

@@ -1,32 +1,51 @@
+import { dirname, join } from 'path'
 const path = require('path')
 const { promisify } = require('util')
 const glob = promisify(require('glob'))
 const { viteCommonjs } = require('@originjs/vite-plugin-commonjs')
 
 module.exports = {
   stories: ['../packages/**/*.mdx', '../packages/**/*.story.@(tsx)'],
+
   addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-a11y',
-    '@storybook/addon-links',
-    '@storybook/addon-storysource',
-    // '@storybook/addon-knobs',
-    'storybook-dark-mode',
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-storysource'),
+    getAbsolutePath('storybook-dark-mode'),
+    getAbsolutePath('@storybook/addon-mdx-gfm'),
+    getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
+    getAbsolutePath('@storybook/addon-themes'),
     {
-      name: '@storybook/addon-styling',
+      name: '@storybook/addon-styling-webpack',
       options: {
-        postCss: {
-          implementation: require.resolve('postcss'),
-        },
-        postcssLoaderOptions: {
-          postcssOptions: {
-            config: path.resolve(__dirname, 'postcss.config.js'),
+        rules: [
+          {
+            test: /\.css$/,
+            use: [
+              'style-loader',
+              {
+                loader: 'css-loader',
+                options: {
+                  importLoaders: 1,
+                  modules: {
+                    auto: true,
+                    localIdentName: '[name]__[local]--[hash:base64:5]',
+                  },
+                },
+              },
+              {
+                // Gets options from `postcss.config.js` in your project root
+                loader: 'postcss-loader',
+                options: { implementation: require.resolve('postcss') },
+              },
+            ],
           },
-          implementation: require('postcss'),
-        },
+        ],
       },
     },
   ],
+
   async webpackFinal(config, { configType }) {
     if (configType === 'PRODUCTION') {
       return config
@@ -35,6 +54,7 @@ module.exports = {
     config.resolve.alias = { ...config.resolve.alias, ...(await alias()) }
     return config
   },
+
   async viteFinal(config, { configType }) {
     if (configType === 'PRODUCTION') {
       return config
@@ -48,6 +68,7 @@ module.exports = {
     config.plugins.push(viteCommonjs({ include: 'packages/icons' }))
     return config
   },
+
   // 実験的にviteをpreviewビルドでviteを利用する
   // CLIENT_PORT=443 yarn storybook:experimental-vite -p 6007 --no-manager-cache
   ...(process.env.USE_VITE === '1'
@@ -60,9 +81,28 @@ module.exports = {
     : {
         framework: {
           name: '@storybook/react-webpack5',
-          options: {},
+          options: {
+            builder: {
+              useSWC: true,
+            },
+          },
         },
       }),
+
+  swc() {
+    return {
+      jsc: {
+        transform: {
+          react: {
+            runtime: 'automatic',
+          },
+        },
+      },
+    }
+  },
+  docs: {
+    autodocs: true,
+  },
 }
 
 const packagesDir = path.resolve(__dirname, '../packages')
@@ -75,3 +115,7 @@ const alias = async () =>
       return [from, to]
     })
   )
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')))
+}

.storybook/preview.js

@@ -1,6 +1,9 @@
 import themeDecorator from './theme-decorator'
+import { DocsContainer } from './docs-container'
+
 import './global.css'
 
+/** @type  */
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z0-9].*' },
   controls: {
@@ -9,6 +12,10 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  viewMode: 'docs',
+  docs: {
+    container: DocsContainer,
+  },
 }
 
 export const decorators = [themeDecorator]

.storybook/storybook.test.ts

@@ -31,9 +31,11 @@ const compose = (
 
 function getAllStoryFiles() {
   // Place the glob you want to match your stories files
-  const storyFiles = glob.sync(
-    path.join(__dirname, '../packages/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}')
-  )
+  const globPatterns = '../packages/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'
+  const ignorePatterns = /node_modules|react-sandbox/
+  const storyFiles = glob
+    .sync(path.join(__dirname, globPatterns))
+    .filter((filePath) => !ignorePatterns.test(filePath))
 
   return storyFiles.map((filePath) => {
     const storyFile = require(filePath)

.storybook/test-runner.ts

@@ -13,8 +13,6 @@ const config: TestRunnerConfig = {
       customSnapshotIdentifier: context.id,
       customDiffDir: `${process.cwd()}/__diff_output__`,
       customSnapshotsDir: `${process.cwd()}/__image_snapshots__`,
-      failureThresholdType: 'percent',
-      failureThreshold: 0.0001,
     })
   },
   tags: {

jest.setup.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import type { ReactPortal } from 'react'
 
 export {}
 
@@ -8,6 +8,15 @@ globalThis.ResizeObserver = jest.fn().mockImplementation(() => ({
   disconnect: jest.fn(),
 }))
 
+global.IntersectionObserver = jest.fn().mockImplementation(() => ({
+  observe() {
+    return null
+  },
+  disconnect() {
+    return null
+  },
+}))
+
 window.matchMedia = jest.fn().mockImplementation((query: string) => ({
   matches: false,
   media: query,
@@ -26,7 +35,7 @@ jest.mock('@react-aria/utils', () => ({
 
 jest.mock('@react-aria/overlays', () => ({
   ...jest.requireActual('@react-aria/overlays'),
-  Overlay: jest.fn(({ children }: { children: ReactNode }) => children),
+  Overlay: jest.fn(({ children }) => children as ReactPortal),
 }))
 
 import type { OverlayTriggerProps } from 'react-stately'