Add Storybook 7 support; React 18 to build (#847)
* add storybook 7 support, React 18 to build * semver * update semver
This commit is contained in:
Chris Trevino
GitHub
Родитель
5bd0afa04f
Коммит
f624f9f58a
|
|
@ -34,7 +34,7 @@ jobs:
|
|||
if: "github.actor != 'dependabot[bot]'"
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [16.x]
|
||||
node-version: [16.x, 18.x]
|
||||
steps:
|
||||
- run: echo "actor is ${{github.actor}}, ref is ${{github.ref}} head_ref is ${{github.head_ref}}"
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
releases:
|
||||
"@essex/scripts": patch
|
||||
"@essex/storybook-config": minor
|
||||
|
||||
declined:
|
||||
- "@essex/test-lib-dual"
|
||||
- "@essex/test-lib-esm"
|
||||
- "@essex/test-lib-legacy"
|
||||
- "@essex/test-lib-md-index"
|
||||
- "@essex/test-stories"
|
||||
- "@essex/test-webapp-vite"
|
||||
- "@essex/test-webapp-webpack"
|
||||
- "@essex/test-webapp-webpack-custom-cjs"
|
||||
- "@essex/test-webapp-webpack-custom-esm"
|
||||
- "@essex/test-zips"
|
||||
102
.yarnrc.yml
102
.yarnrc.yml
|
|
@ -7,24 +7,35 @@ packageExtensions:
|
|||
fork-ts-checker-webpack-plugin@*:
|
||||
dependencies:
|
||||
"@types/tapable": ^1.0.6
|
||||
"@storybook/store@*":
|
||||
"@storybook/store@*":
|
||||
peerDependenciesMeta:
|
||||
react: { optional: true }
|
||||
react-dom: { optional: true }
|
||||
"@storybook/addon-docs@*":
|
||||
peerDependencies:
|
||||
"@babel/core": "*"
|
||||
webpack: '*'
|
||||
vite-tsconfig-paths@*:
|
||||
"webpack": "*"
|
||||
"@storybook/react-webpack5": "*"
|
||||
peerDependenciesMeta:
|
||||
"@babel/core":
|
||||
optional: true
|
||||
"webpack":
|
||||
optional: true
|
||||
"@storybook/react-webpack5":
|
||||
optional: true
|
||||
react-dom:
|
||||
optional: true
|
||||
vite-tsconfig-paths@*:
|
||||
peerDependencies:
|
||||
vite: "*"
|
||||
"@design-systems/utils@*":
|
||||
peerDependenciesMeta:
|
||||
react-dom: { optional: true }
|
||||
"@storybook/core-common@*":
|
||||
peerDependenciesMeta:
|
||||
react: { optional: true }
|
||||
react-dom: { optional: true }
|
||||
webpack: { optional: true }
|
||||
peerDependencies:
|
||||
"@storybook/react-webpack5": "*"
|
||||
"webpack": ">= 5"
|
||||
"@fluentui/theme@*":
|
||||
peerDependenciesMeta:
|
||||
'@types/react': { optional: true }
|
||||
|
|
@ -37,9 +48,84 @@ packageExtensions:
|
|||
"@fluentui/style-utilities@*":
|
||||
peerDependencies:
|
||||
react: "*"
|
||||
"@storybook/mdx1-csf@*":
|
||||
"@storybook/telemetry@*":
|
||||
peerDependencies:
|
||||
"@babel/core": "*"
|
||||
"react": "*"
|
||||
"react-dom": "*"
|
||||
"@storybook/react-webpack5": "*"
|
||||
peerDependenciesMeta:
|
||||
"react":
|
||||
optional: true
|
||||
"react-dom":
|
||||
optional: true
|
||||
"@storybook/react-webpack5":
|
||||
optional: true
|
||||
"@storybook/addon-essentials@*":
|
||||
peerDependencies:
|
||||
"@storybook/react-webpack5": "*"
|
||||
"webpack": "*"
|
||||
peerDependenciesMeta:
|
||||
"@storybook/react-webpack5":
|
||||
optional: true
|
||||
"webpack":
|
||||
optional: true
|
||||
react-dom:
|
||||
optional: true
|
||||
"@storybook/addon-interactions@*":
|
||||
peerDependencies:
|
||||
"@storybook/react-webpack5": "*"
|
||||
"webpack": "*"
|
||||
"@storybook/addon-controls@*":
|
||||
peerDependencies:
|
||||
"webpack": "*"
|
||||
"@storybook/react-webpack5": "*"
|
||||
"@storybook/instrumenter@*":
|
||||
peerDependencies:
|
||||
"react": "*"
|
||||
"react-dom": "*"
|
||||
"@storybook/docs-tools@*":
|
||||
peerDependencies:
|
||||
"react": "*"
|
||||
"react-dom": "*"
|
||||
"@storybook/react-webpack5": "*"
|
||||
"@storybook/builder-manager@*":
|
||||
peerDependencies:
|
||||
"@storybook/react-webpack5": "*"
|
||||
"@storybook/builder-webpack5@*":
|
||||
peerDependencies:
|
||||
"@storybook/react-webpack5": "*"
|
||||
"@storybook/blocks@*":
|
||||
peerDependencies:
|
||||
"@storybook/react-webpack5": "*"
|
||||
"@storybook/preset-react-webpack@*":
|
||||
peerDependencies:
|
||||
"@storybook/react-webpack5": "*"
|
||||
"@storybook/react@*":
|
||||
peerDependencies:
|
||||
"@storybook/react-webpack5": "*"
|
||||
"@storybook/cli@*":
|
||||
peerDependencies:
|
||||
"@storybook/react-webpack5": "*"
|
||||
"@storybook/core-server@*":
|
||||
peerDependencies:
|
||||
"@storybook/react-webpack5": "*"
|
||||
"@storybook/core-webpack@*":
|
||||
peerDependencies:
|
||||
"@storybook/react-webpack5": "*"
|
||||
"storybook@*":
|
||||
peerDependencies:
|
||||
"@storybook/react-webpack5": "*"
|
||||
"@storybook/api@*":
|
||||
peerDependencies:
|
||||
react: "*"
|
||||
"react-dom": "*"
|
||||
"@storybook/react-webpack5@*":
|
||||
peerDependencies:
|
||||
"webpack": "*"
|
||||
"@thematic/fluent@*":
|
||||
peerDependencies:
|
||||
styled-components: "*"
|
||||
|
||||
|
||||
plugins:
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
|
||||
|
|
|
|||
|
|
@ -16,54 +16,62 @@
|
|||
"./babel.config.js": "./lib/babel.config.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@open-wc/webpack-import-meta-loader": "^0.4.7",
|
||||
"@swc/core": "^1.3.31",
|
||||
"hsluv": "^1.0.0",
|
||||
"react-docgen-typescript": "^2.2.2",
|
||||
"react-is": "^18.2.0",
|
||||
"resolve-typescript-plugin": "^2.0.0",
|
||||
"storybook": "^7.0.0-beta.38",
|
||||
"swc-loader": "^0.2.3",
|
||||
"tslib": "^2.4.1",
|
||||
"webpack": "^4.46.0"
|
||||
"webpack": "^5.75.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.12",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@essex/tsconfig-node": "workspace:^",
|
||||
"@fluentui/react": "^8.104.6",
|
||||
"@storybook/addon-essentials": "^6.5.15",
|
||||
"@storybook/addon-interactions": "^6.5.15",
|
||||
"@storybook/addon-links": "^6.5.15",
|
||||
"@storybook/react": "^6.5.15",
|
||||
"@storybook/addon-a11y": "^7.0.0-beta.38",
|
||||
"@storybook/addon-docs": "^7.0.0-beta.38",
|
||||
"@storybook/addon-essentials": "^7.0.0-beta.38",
|
||||
"@storybook/addon-interactions": "^7.0.0-beta.38",
|
||||
"@storybook/addon-links": "^7.0.0-beta.38",
|
||||
"@storybook/addons": "^7.0.0-beta.38",
|
||||
"@storybook/client-api": "^7.0.0-beta.38",
|
||||
"@storybook/core-events": "^7.0.0-beta.38",
|
||||
"@storybook/react": "^7.0.0-beta.38",
|
||||
"@storybook/react-webpack5": "^7.0.0-beta.38",
|
||||
"@thematic/core": "^4.0.4",
|
||||
"@thematic/fluent": "^5.0.5",
|
||||
"@thematic/react": "^2.1.6",
|
||||
"@types/open-wc__webpack-import-meta-loader": "^0.4.2",
|
||||
"@types/react": "^18.0.27",
|
||||
"@types/styled-components": "^5.1.26",
|
||||
"@types/webpack": "^5.28.0",
|
||||
"react": "^18.2.0",
|
||||
"react-is": "^18.2.0",
|
||||
"require-from-string": "^2.0.2",
|
||||
"rimraf": "^4.1.1",
|
||||
"storybook": "^7.0.0-beta.38",
|
||||
"styled-components": "^5.3.6",
|
||||
"typescript": "^4.9.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": ">= 7",
|
||||
"@babel/preset-env": ">= 7",
|
||||
"@babel/preset-react": ">= 7",
|
||||
"@babel/preset-typescript": ">= 7",
|
||||
"@fluentui/react": ">= 8",
|
||||
"@storybook/addon-essentials": ">= 6",
|
||||
"@storybook/addon-interactions": ">= 6",
|
||||
"@storybook/addon-links": ">= 6",
|
||||
"@storybook/react": ">= 6",
|
||||
"@storybook/addon-a11y": "^7.0.0-beta.38",
|
||||
"@storybook/addon-docs": "^7.0.0-beta.38",
|
||||
"@storybook/addon-essentials": "^7.0.0-beta.38",
|
||||
"@storybook/addon-interactions": "^7.0.0-beta.38",
|
||||
"@storybook/addon-links": "^7.0.0-beta.38",
|
||||
"@storybook/addons": "^7.0.0-beta.38",
|
||||
"@storybook/client-api": "^7.0.0-beta.38",
|
||||
"@storybook/core-events": "^7.0.0-beta.38",
|
||||
"@storybook/react": "^7.0.0-beta.38",
|
||||
"@storybook/react-webpack5": "^7.0.0-beta.38",
|
||||
"@thematic/core": ">= 4",
|
||||
"@thematic/fluent": ">= 5",
|
||||
"@thematic/react": ">= 2",
|
||||
"react": ">= 18",
|
||||
"react-dom": ">= 18",
|
||||
"react-is": ">= 18",
|
||||
"require-from-string": ">= 2",
|
||||
"storybook": "^7.0.0-beta.38",
|
||||
"styled-components": ">= 5",
|
||||
"typescript": ">= 4"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { initializeIcons, Toggle } from '@fluentui/react'
|
||||
import type { StoryFnReactReturnType } from '@storybook/react/dist/ts3.9/client/preview/types'
|
||||
import { loadById } from '@thematic/core'
|
||||
import { loadFluentTheme, ThematicFluentProvider } from '@thematic/fluent'
|
||||
import { ApplicationStyles } from '@thematic/react'
|
||||
|
|
@ -15,9 +14,7 @@ initializeIcons()
|
|||
* ThematicFluentDecorator configures both Thematic and the Fluent wrapper
|
||||
* @param storyFn
|
||||
*/
|
||||
export const ThematicFluentDecorator = (
|
||||
storyFn: any,
|
||||
): StoryFnReactReturnType => {
|
||||
export const ThematicFluentDecorator = (storyFn: any) => {
|
||||
const [dark, setDark] = useState(false)
|
||||
// load a non-standard theme, so it is obvious that it isn't the default
|
||||
// this helps identify problems with theme application in Fluent, which looks a lot like our default essex theme
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
/*!
|
||||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
module.exports = {
|
||||
presets: [
|
||||
[require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
|
||||
[
|
||||
require.resolve('@babel/preset-env'),
|
||||
{
|
||||
targets: {
|
||||
esmodules: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
[require.resolve('@babel/preset-typescript'), {}],
|
||||
],
|
||||
}
|
||||
|
|
@ -3,20 +3,55 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
import ResolveTypescriptPlugin from 'resolve-typescript-plugin'
|
||||
import type {
|
||||
Configuration as WebpackConfig,
|
||||
RuleSetRule,
|
||||
WebpackPluginInstance,
|
||||
} from 'webpack'
|
||||
import type { Configuration as WebpackConfig } from 'webpack'
|
||||
|
||||
export interface EssexStorybookConfig {
|
||||
/**
|
||||
* The stories globs. Default = [../../*\/src/**\/*.stories.@(mdx|js|jsx|ts|tsx)']
|
||||
*/
|
||||
stories?: string[]
|
||||
|
||||
/**
|
||||
* The static folders to serve
|
||||
*/
|
||||
staticDirs?: string[]
|
||||
resolveAliases?: Record<string, string>
|
||||
transpileMatch: (string | RegExp)[]
|
||||
|
||||
/**
|
||||
* A config hook for mutating the webpack configuration
|
||||
* @param config - The webpack to use for stories
|
||||
* @returns The updated webpack config
|
||||
*/
|
||||
webpackFinal?: (config: WebpackConfig) => WebpackConfig
|
||||
}
|
||||
|
||||
const DEFAULT_SWC_CONFIG = {
|
||||
sourceMaps: true,
|
||||
jsc: {
|
||||
target: 'es2021',
|
||||
parser: {
|
||||
syntax: 'typescript',
|
||||
tsx: true,
|
||||
decorators: true,
|
||||
dynamicImport: true,
|
||||
importAssertions: true,
|
||||
},
|
||||
experimental: {
|
||||
keepImportAssertions: true,
|
||||
},
|
||||
transform: {
|
||||
react: { runtime: 'automatic', useBuiltins: true },
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const SWCRC_FILE = path.join(process.cwd(), '.swcrc')
|
||||
const SWC_CONFIG = fs.existsSync(path.join(process.cwd(), '.swcrc'))
|
||||
? JSON.parse(fs.readFileSync(SWCRC_FILE, { encoding: 'utf-8' }))
|
||||
: DEFAULT_SWC_CONFIG
|
||||
|
||||
const DEFAULT_STORIES = [
|
||||
/**
|
||||
* search sibling packages by default
|
||||
|
|
@ -24,25 +59,31 @@ const DEFAULT_STORIES = [
|
|||
'../../*/src/**/*.stories.@(mdx|js|jsx|ts|tsx)',
|
||||
]
|
||||
const DEFAULT_STATIC_DIRS: string[] = []
|
||||
const DEFAULT_TRANSPILE_MATCHES = [/@essex\/components/, /styled-components/]
|
||||
|
||||
const identity = <T>(input: T) => input
|
||||
|
||||
export function configure({
|
||||
stories = DEFAULT_STORIES,
|
||||
staticDirs = DEFAULT_STATIC_DIRS,
|
||||
resolveAliases = {},
|
||||
transpileMatch = [],
|
||||
webpackFinal = identity,
|
||||
}: EssexStorybookConfig) {
|
||||
return {
|
||||
stories,
|
||||
staticDirs,
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
require.resolve('@storybook/addon-links'),
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions',
|
||||
],
|
||||
framework: '@storybook/react',
|
||||
framework: {
|
||||
name: '@storybook/react-webpack5',
|
||||
options: {},
|
||||
},
|
||||
docs: {
|
||||
autodocs: true,
|
||||
},
|
||||
typescript: {
|
||||
reactDocgen: require.resolve('react-docgen-typescript'),
|
||||
reactDocgen: 'react-docgen-typescript',
|
||||
reactDocgenTypescriptOptions: {
|
||||
compilerOptions: {
|
||||
allowSyntheticDefaultImports: false,
|
||||
|
|
@ -51,69 +92,21 @@ export function configure({
|
|||
},
|
||||
},
|
||||
webpackFinal(config: WebpackConfig) {
|
||||
// mute build output
|
||||
if (process.env['CI'] || process.env['SB_QUIET']) {
|
||||
config.stats = 'errors-only'
|
||||
config.plugins = config.plugins?.filter(
|
||||
(plugin: WebpackPluginInstance) =>
|
||||
plugin.constructor.name !== 'ProgressPlugin',
|
||||
)
|
||||
}
|
||||
config.resolve!.plugins = [
|
||||
...(config.resolve!.plugins ?? []),
|
||||
new ResolveTypescriptPlugin(),
|
||||
]
|
||||
|
||||
if (!config.resolve) {
|
||||
config.resolve = {}
|
||||
}
|
||||
|
||||
config.resolve.alias = {
|
||||
...(config.resolve.alias ?? {}),
|
||||
'styled-components': require.resolve('styled-components'),
|
||||
hsluv: require.resolve('hsluv'),
|
||||
'@thematic/react': require.resolve('@thematic/react'),
|
||||
'@thematic/fluent': require.resolve('@thematic/fluent'),
|
||||
'@fluentui/react': require.resolve('@fluentui/react'),
|
||||
...resolveAliases,
|
||||
}
|
||||
|
||||
// resolve files ending with .ts
|
||||
if (!config.resolve.plugins) {
|
||||
config.resolve.plugins = []
|
||||
}
|
||||
// Resolve extensions from TS code
|
||||
config.resolve.plugins.push(new ResolveTypescriptPlugin())
|
||||
|
||||
// run transpiler over monorepo linked projects
|
||||
const firstRule = config.module?.rules?.[0] as RuleSetRule | undefined
|
||||
|
||||
if (firstRule != null) {
|
||||
const transpileMatchRules: RuleSetRule[] = [
|
||||
...DEFAULT_TRANSPILE_MATCHES,
|
||||
transpileMatch,
|
||||
].map((match) => {
|
||||
return {
|
||||
...firstRule,
|
||||
include: match,
|
||||
exclude: undefined,
|
||||
}
|
||||
})
|
||||
const importMeta = {
|
||||
test: /\.js$/,
|
||||
loader: require.resolve('@open-wc/webpack-import-meta-loader'),
|
||||
}
|
||||
const handleMjs = {
|
||||
test: /\.mjs$/,
|
||||
include: /node_modules/,
|
||||
type: 'javascript/auto',
|
||||
}
|
||||
config.module!.rules!.push(
|
||||
...transpileMatchRules,
|
||||
importMeta,
|
||||
handleMjs,
|
||||
)
|
||||
} else {
|
||||
throw new Error('unexpected incoming webpack config')
|
||||
}
|
||||
|
||||
return config
|
||||
// Swap out babel w/ swc for transpiling app-assets
|
||||
const babelRule = config.module!.rules![2]!
|
||||
config!.module!.rules!.splice(2, 1, {
|
||||
test: /\.(cjs|mjs|jsx?|cts|mts|tsx?)$/,
|
||||
loader: require.resolve('swc-loader'),
|
||||
options: SWC_CONFIG,
|
||||
include: (babelRule as any).include,
|
||||
exclude: (babelRule as any).exclude,
|
||||
})
|
||||
return webpackFinal(config)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { addDecorator } from '@storybook/react'
|
||||
|
||||
import { ThematicFluentDecorator } from './ThematicFluentDecorator.js'
|
||||
|
||||
addDecorator(ThematicFluentDecorator)
|
||||
export const decorators = [ThematicFluentDecorator]
|
||||
|
|
|
|||
|
|
@ -30,9 +30,11 @@ export function checkDeps({ ignore = [] }: { ignore?: string[] }) {
|
|||
'@types/react',
|
||||
'@types/node',
|
||||
'react',
|
||||
'react-dom',
|
||||
// Storybook dependencies
|
||||
'@mdx-js/react',
|
||||
'@storybook/addon-docs',
|
||||
'@storybook/addon-essentials',
|
||||
// Testing Dependencies
|
||||
'@types/jest',
|
||||
'jest-environment*',
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
const config = require('@essex/storybook-config/babel.config')
|
||||
|
||||
module.exports = config
|
||||
|
|
@ -1,3 +1 @@
|
|||
const config = require('@essex/storybook-config/lib/preview.js')
|
||||
|
||||
module.exports = config
|
||||
export * from '@essex/storybook-config/preview'
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
"private": true,
|
||||
"scripts": {
|
||||
"clean": "rimraf dist storybook_static",
|
||||
"build": "build-storybook",
|
||||
"start": "start-storybook"
|
||||
"build": "storybook build",
|
||||
"start": "storybook dev"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -13,20 +13,24 @@
|
|||
"directory": "packages/test-suite-lib"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.12",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
"@essex/scripts": "workspace:^",
|
||||
"@essex/storybook-config": "workspace:^",
|
||||
"@essex/tsconfig-base": "workspace:^",
|
||||
"@storybook/addon-essentials": "^6.5.15",
|
||||
"@storybook/addon-interactions": "^6.5.15",
|
||||
"@storybook/addon-links": "^6.5.15",
|
||||
"@storybook/react": "^6.5.15",
|
||||
"@storybook/addon-a11y": "^7.0.0-beta.38",
|
||||
"@storybook/addon-docs": "^7.0.0-beta.38",
|
||||
"@storybook/addon-essentials": "^7.0.0-beta.38",
|
||||
"@storybook/addon-interactions": "^7.0.0-beta.38",
|
||||
"@storybook/addon-links": "^7.0.0-beta.38",
|
||||
"@storybook/addons": "^7.0.0-beta.38",
|
||||
"@storybook/client-api": "^7.0.0-beta.38",
|
||||
"@storybook/core-events": "^7.0.0-beta.38",
|
||||
"@storybook/react": "^7.0.0-beta.38",
|
||||
"@storybook/react-webpack5": "^7.0.0-beta.38",
|
||||
"@types/react": "^18.0.27",
|
||||
"require-from-string": "^2.0.2",
|
||||
"rimraf": "^4.1.1"
|
||||
"rimraf": "^4.1.1",
|
||||
"storybook": "^7.0.0-beta.38",
|
||||
"webpack": "^5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/react-dom": "^18.0.10",
|
||||
|
|
|
|||
7187
yarn.lock
7187
yarn.lock
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Загрузка…
Ссылка в новой задаче