Migrate storybook to 6.2.9 #18693
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| import * as React from 'react'; | ||
| import { DecoratorFunction } from '@storybook/addons'; | ||
| import { StoryFnReactReturnType } from '@storybook/react/dist/ts3.9/client/preview/types'; | ||
|
|
||
| export const FabricDecorator: DecoratorFunction<StoryFnReactReturnType> = story => ( | ||
| <div style={{ display: 'flex' }}> | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| import { FluentProvider } from '@fluentui/react-provider'; | ||
| import { webLightTheme } from '@fluentui/react-theme'; | ||
| import { DecoratorFunction } from '@storybook/addons'; | ||
| import { StoryFnReactReturnType } from '@storybook/react/dist/ts3.9/client/preview/types'; | ||
| import * as React from 'react'; | ||
|
|
||
| export const FluentProviderDecorator: DecoratorFunction<StoryFnReactReturnType> = story => ( | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,7 +8,7 @@ export interface IStoryConfig { | |
| rtl?: boolean; | ||
| } | ||
|
|
||
| declare module '@storybook/addons/dist/ts3.9/types' { | ||
Hotell marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| interface StoryApi<StoryFnReturnType = unknown> { | ||
| /** adds a story, but via VR Tests' addon which auto adds variants like RTL */ | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "patch", | ||
| "comment": "fix: replace class with className in mdx file", | ||
| "packageName": "@fluentui/react-examples", | ||
| "email": "tristan.watanabe@gmail.com", | ||
| "dependentChangeType": "patch" | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -51,7 +51,7 @@ | |
| "rename-package": "node -r ./scripts/ts-node-register ./scripts/rename-package.ts", | ||
| "run:published": "node ./scripts/monorepo/runPublished.js", | ||
| "runto:lerna": "node ./scripts/monorepo/runTo.js", | ||
| "satisfied": "satisfied --skip-invalid --ignore \"angular|builder-webpack5|sass|svelte|@testing-library|vue\"", | ||
| "scrub": "node ./scripts/scrub.js", | ||
| "start": "node scripts/start.js", | ||
| "start:legacy": "yarn workspace @fluentui/public-docsite-resources start", | ||
|
|
@@ -82,16 +82,17 @@ | |
| "@nrwl/node": "12.1.0", | ||
| "@nrwl/tao": "12.1.0", | ||
| "@nrwl/workspace": "12.1.0", | ||
| "@storybook/addon-a11y": "6.2.9", | ||
| "@storybook/addon-actions": "6.2.9", | ||
| "@storybook/addon-docs": "6.2.9", | ||
| "@storybook/addon-essentials": "6.2.9", | ||
| "@storybook/addon-info": "6.0.0-alpha.2", | ||
| "@storybook/addon-knobs": "6.2.9", | ||
| "@storybook/addon-postcss": "2.0.0", | ||
| "@storybook/addons": "6.2.9", | ||
| "@storybook/channels": "6.2.9", | ||
| "@storybook/core": "6.2.9", | ||
| "@storybook/react": "6.2.9", | ||
| "@testing-library/jest-dom": "5.11.9", | ||
| "@testing-library/react": "10.4.9", | ||
| "@testing-library/react-hooks": "5.0.3", | ||
|
|
@@ -108,6 +109,7 @@ | |
| "@types/webpack-env": "1.16.0", | ||
| "@types/yargs": "13.0.11", | ||
| "ajv": "8.4.0", | ||
| "autoprefixer": "^9.7.2", | ||
|
There was a problem hiding this comment. please use fixed versions in root devDependencies |
||
| "babel-plugin-annotate-pure-calls": "0.4.0", | ||
| "beachball": "1.53.1", | ||
| "chalk": "4.1.0", | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,6 +5,10 @@ const config = createConfig({ | |
| setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))], | ||
|
|
||
| snapshotSerializers: [resolveMergeStylesSerializer()], | ||
|
|
||
| moduleNameMapper: { | ||
| '@storybook/addon-docs/blocks$': '@storybook/addon-docs/dist/cjs/blocks', | ||
|
There was a problem hiding this comment. q: is this a know limitation (to explicitly provide CJS storybooks output) ? I mean we don't run tests on stories do we? |
||
| }, | ||
| }); | ||
|
|
||
| module.exports = config; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,16 +4,16 @@ import './intro.css'; | |
|
|
||
| <Meta title="Concepts/Introduction" /> | ||
|
|
||
| <h1 className="fluent">Fluent UI React vNext</h1> | ||
Hotell marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| <img src="./fluentui-banner2.jpg" alt="Hello3" /> | ||
|
|
||
| > **⚠ NOT PRODUCTION READY COMPONENTS - API SURFACES MAY CHANGE WITHOUT NOTICE** | ||
|
|
||
| --- | ||
|
|
||
| <h2 className="fluent">Overview</h2> | ||
| <div className="fluent-text"> | ||
|
|
||
| Fluent UI vNext is a set of UI components and utilities resulting from an effort to converge the set of React based component libraries in production today: `@fluentui/react` and `@fluentui/react-northstar`. | ||
|
|
||
|
|
@@ -27,6 +27,6 @@ Each component is designed adhere to following attributes: | |
|
|
||
| </div> | ||
|
|
||
| <h2 className="fluent">Questions?</h2> | ||
|
|
||
| Reach out to the Fluent UI React team on [Github](https://github.com/microsoft/fluentui) | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -27,9 +27,9 @@ | |
| "@fluentui/react-storybook": "^9.0.0-alpha.0", | ||
| "@fluentui/react": "^8.21.0", | ||
| "@fluentui/theme": "^2.1.3", | ||
| "@storybook/addon-knobs": "6.2.9", | ||
| "@storybook/addon-essentials": "6.2.9", | ||
| "@storybook/addons": "6.2.9", | ||
| "@fluentui/azure-themes": "^8.1.29", | ||
| "@fluentui/theme-samples": "^8.1.29", | ||
| "tslib": "^2.1.0" | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| module.exports = { | ||
TristanWatanabe marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| plugins: [ | ||
| require('autoprefixer')({ | ||
| flexbox: 'no-2009', | ||
| }), | ||
| ], | ||
| }; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -47,7 +47,7 @@ | |
| "@types/puppeteer": "1.12.3", | ||
| "@types/read-pkg-up": "^6.0.0", | ||
| "async": "^2.6.1", | ||
|
There was a problem hiding this comment. Why the downgrade from autoprefixer 10 to 9? (looking at the root package.json) There was a problem hiding this comment. Due to changes in 6.2 that required us to manually add
Was also getting this error below when I used
There was a problem hiding this comment.
So the next thing to look at is whether there's a newer version of There was a problem hiding this comment. Yeah i agree about sticking to
There was a problem hiding this comment. I'd really like to get off anything using webpack 4 if possible, because overall that's likely to introduce more problems since the rest of our repo is on webpack 5. How are we using addon-info? Can we just remove it? There was a problem hiding this comment. If you search for There was a problem hiding this comment. Ok I'll remove There was a problem hiding this comment. Both tasks above have been completed |
||
| "autoprefixer": "^9.7.2", | ||
TristanWatanabe marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| "babel-jest": "^24.5.0", | ||
| "babel-plugin-annotate-pure-imports": "^1.0.0-1", | ||
| "babel-plugin-iife-wrap-react-components": "^1.0.0-5", | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -49,9 +49,10 @@ function getCommonOptions(): StorybookCommonOptions { | |
| console.log(`node heap limit = ${require('v8').getHeapStatistics().heap_size_limit / (1024 * 1024)} MB`); | ||
|
|
||
| const localConfigDir = path.join(process.cwd(), '.storybook'); | ||
| const localStaticDir = path.join(process.cwd(), 'static'); | ||
|
|
||
| return { | ||
| staticDir: fs.existsSync(localStaticDir) ? [localStaticDir] : [], | ||
Hotell marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| configDir: fs.existsSync(localConfigDir) | ||
| ? localConfigDir | ||
| : path.join(findGitRoot(), 'packages/react-examples/.storybook'), | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
q: why is this needed ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since we require postcss
8.2.4, this needed to be added per document snippet below:There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hmm I don't think we need postcss for vNext (as styling is processed by make-styles - so vendor prefix etc are being properly added - am I right @layershifter ?)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, it's correct, we don't need PostCSS for vNext components
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Got it - I will remove
addon-postcssfrom the storybook addons and also remove thepostcss.config.jsfile i created.