use essex storybook config v7
This commit is contained in:
Chris Trevino
Родитель
4041a9df3d
Коммит
62f229d4fb
|
|
@ -64,10 +64,6 @@ packageExtensions:
|
|||
"react": "*"
|
||||
"react-dom": "*"
|
||||
"@storybook/react-webpack5": "*"
|
||||
"@storybook/testing-library@*":
|
||||
peerDependencies:
|
||||
"react": "*"
|
||||
"react-dom": "*"
|
||||
"@storybook/core-common@*":
|
||||
peerDependencies:
|
||||
"@storybook/react-webpack5": "*"
|
||||
|
|
@ -111,6 +107,9 @@ packageExtensions:
|
|||
"@storybook/react-webpack5@*":
|
||||
peerDependencies:
|
||||
"webpack": "*"
|
||||
"@essex/storybook-config@*":
|
||||
peerDependencies:
|
||||
"@fluentui/react": "*"
|
||||
|
||||
plugins:
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@essex/eslint-config": "^20.5.1",
|
||||
"@essex/scripts": "^24.0.2",
|
||||
"@essex/scripts": "^24.0.3",
|
||||
"@types/jest": "^29.4.0",
|
||||
"@types/node": "^18.11.18",
|
||||
"@types/react": "^18.0.27",
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
"release": "yarn npm publish --tolerate-republish --access public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@essex/scripts": "^24.0.2",
|
||||
"@essex/scripts": "^24.0.3",
|
||||
"@fluentui/react": "^8.105.0",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addon-docs": "^7.0.0-beta.38",
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
"lodash-es": "^4.17.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@essex/scripts": "^24.0.2",
|
||||
"@essex/scripts": "^24.0.3",
|
||||
"@essex/tsconfig-base": "^1.0.2",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addon-docs": "^7.0.0-beta.38",
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
"react-if": "^4.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@essex/scripts": "^24.0.2",
|
||||
"@essex/scripts": "^24.0.3",
|
||||
"@fluentui/react": "^8.105.0",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addon-docs": "^7.0.0-beta.38",
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@apollo/server": "^4.3.1",
|
||||
"@essex/scripts": "^24.0.2",
|
||||
"@essex/scripts": "^24.0.3",
|
||||
"@graphql-tools/utils": "^9.1.4",
|
||||
"@tsconfig/node14": "^1.0.3",
|
||||
"fastify": "^4.12.0",
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
"styled-components": "^5.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@essex/scripts": "^24.0.2",
|
||||
"@essex/scripts": "^24.0.3",
|
||||
"@fluentui/react": "^8.105.0",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addon-docs": "^7.0.0-beta.38",
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@essex/jest-config": "^21.0.20",
|
||||
"@essex/scripts": "^24.0.2",
|
||||
"@essex/scripts": "^24.0.3",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@types/jest": "^29.4.0",
|
||||
"@types/lodash-es": "^4.17.6",
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@azure/msal-browser": "^2.32.2",
|
||||
"@essex/scripts": "^24.0.2",
|
||||
"@essex/scripts": "^24.0.3",
|
||||
"@types/debug": "^4.1.7"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@essex/jest-config": "^21.0.20",
|
||||
"@essex/scripts": "^24.0.2",
|
||||
"@essex/scripts": "^24.0.3",
|
||||
"@essex/tsconfig-base": "^1.0.2",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@types/react": "^18.0.27",
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
/*!
|
||||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { initializeIcons, Toggle } from '@fluentui/react'
|
||||
import { loadById } from '@thematic/core'
|
||||
import { loadFluentTheme, ThematicFluentProvider } from '@thematic/fluent'
|
||||
import { ApplicationStyles } from '@thematic/react'
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import styled, { ThemeProvider } from 'styled-components'
|
||||
|
||||
initializeIcons()
|
||||
/**
|
||||
* ThematicFluentDecorator configures both Thematic and the Fluent wrapper
|
||||
* @param storyFn
|
||||
*/
|
||||
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
|
||||
const thematicTheme = useMemo(
|
||||
() =>
|
||||
loadById('autumn', {
|
||||
dark,
|
||||
}),
|
||||
[dark],
|
||||
)
|
||||
const fluentTheme = useMemo(
|
||||
() => loadFluentTheme(thematicTheme),
|
||||
[thematicTheme],
|
||||
)
|
||||
const handleDarkChange = useCallback(
|
||||
(_e: unknown, v: boolean | undefined) => {
|
||||
setDark(v ?? false)
|
||||
},
|
||||
[],
|
||||
)
|
||||
return (
|
||||
<ThematicFluentProvider theme={thematicTheme}>
|
||||
<style>
|
||||
{`* {
|
||||
box-sizing: border-box;
|
||||
}`}
|
||||
</style>
|
||||
<ApplicationStyles />
|
||||
<Toggle label="Dark mode" checked={dark} onChange={handleDarkChange} />
|
||||
<ThemeProvider theme={fluentTheme}>
|
||||
<Container>{storyFn(undefined, undefined)}</Container>
|
||||
</ThemeProvider>
|
||||
</ThematicFluentProvider>
|
||||
)
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
padding: 20px;
|
||||
border: 1px solid ${({ theme }) => theme.application().faint().hex()};
|
||||
`
|
||||
|
|
@ -3,68 +3,9 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
||||
import ResolveTypescriptPlugin from 'resolve-typescript-plugin'
|
||||
import { configure } from '@essex/storybook-config/main'
|
||||
const path = require('path')
|
||||
|
||||
const 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 },
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
stories: ['../../*/src/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
|
||||
module.exports = configure({
|
||||
staticDirs: [path.join(__dirname, '../public')],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions',
|
||||
],
|
||||
framework: {
|
||||
name: '@storybook/react-webpack5',
|
||||
options: {},
|
||||
},
|
||||
typescript: {
|
||||
reactDocgen: 'react-docgen-typescript',
|
||||
reactDocgenTypescriptOptions: {
|
||||
compilerOptions: {
|
||||
allowSyntheticDefaultImports: false,
|
||||
esModuleInterop: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
webpackFinal(config) {
|
||||
config.resolve.plugins = [
|
||||
...(config.resolve.plugins ?? []),
|
||||
new ResolveTypescriptPlugin(),
|
||||
]
|
||||
|
||||
// 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.include,
|
||||
exclude: babelRule.exclude,
|
||||
})
|
||||
return config
|
||||
},
|
||||
docs: {
|
||||
autodocs: true,
|
||||
},
|
||||
}
|
||||
})
|
||||
|
|
@ -2,6 +2,4 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { ThematicFluentDecorator } from './ThematicFluentDecorator.js'
|
||||
|
||||
export const decorators = [ThematicFluentDecorator]
|
||||
export * from '@essex/storybook-config/preview'
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
"scripts": {
|
||||
"clean": "essex clean docs",
|
||||
"start": "storybook dev",
|
||||
"bundle": "storybook build",
|
||||
"build": "storybook build",
|
||||
"start:storybook": "yarn start",
|
||||
"bundle:storybook": "yarn bundle",
|
||||
"fix": "essex fix --formatter none",
|
||||
|
|
@ -27,8 +27,8 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@essex/jest-config": "^21.0.20",
|
||||
"@essex/scripts": "^24.0.2",
|
||||
"@essex/storybook-config": "^0.0.3",
|
||||
"@essex/scripts": "^24.0.3",
|
||||
"@essex/storybook-config": "^0.1.0",
|
||||
"@fluentui/font-icons-mdl2": "^8.5.7",
|
||||
"@fluentui/react": "^8.105.0",
|
||||
"@fluentui/utilities": "^8.13.5",
|
||||
|
|
@ -42,8 +42,6 @@
|
|||
"@storybook/core-events": "^7.0.0-beta.38",
|
||||
"@storybook/react": "^7.0.0-beta.38",
|
||||
"@storybook/react-webpack5": "^7.0.0-beta.38",
|
||||
"@storybook/testing-library": "^0.0.14-next.1",
|
||||
"@swc/core": "^1.3.31",
|
||||
"@thematic/core": "^4.0.4",
|
||||
"@thematic/fluent": "^5.0.5",
|
||||
"@thematic/react": "^2.1.6",
|
||||
|
|
@ -57,9 +55,7 @@
|
|||
"prop-types": "^15.8.1",
|
||||
"react-is": "^18.2.0",
|
||||
"require-from-string": "^2.0.2",
|
||||
"resolve-typescript-plugin": "^2.0.0",
|
||||
"storybook": "^7.0.0-beta.38",
|
||||
"swc-loader": "^0.2.3",
|
||||
"typescript": "^4.9.5",
|
||||
"webpack": "^5.75.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
"release": "yarn npm publish --tolerate-republish --access public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@essex/scripts": "^24.0.2",
|
||||
"@essex/scripts": "^24.0.3",
|
||||
"@essex/tsconfig-base": "^1.0.2",
|
||||
"@types/styled-components": "^5.1.26",
|
||||
"react": "^18.2.0",
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
"tslib": "^2.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@essex/scripts": "^24.0.2",
|
||||
"@essex/scripts": "^24.0.3",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@storybook/addon-docs": "^7.0.0-beta.38",
|
||||
"@storybook/addon-essentials": "^7.0.0-beta.38",
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@essex/jest-config": "^21.0.20",
|
||||
"@essex/scripts": "^24.0.2",
|
||||
"@essex/scripts": "^24.0.3",
|
||||
"jest": "^29.4.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
"release": "yarn npm publish --tolerate-republish --access public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@essex/scripts": "^24.0.2",
|
||||
"@essex/scripts": "^24.0.3",
|
||||
"@essex/tsconfig-base": "^1.0.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
"outputs": ["coverage/**/*"]
|
||||
},
|
||||
"ci": {
|
||||
"dependsOn": ["build", "check", "test", "check-deps", "bundle"],
|
||||
"dependsOn": ["check", "test", "check-deps", "build"],
|
||||
"outputs": []
|
||||
},
|
||||
"check": {
|
||||
|
|
|
|||
1590
yarn.lock
1590
yarn.lock
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Загрузка…
Ссылка в новой задаче