Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: re-enable react-storybook-addon and babel-make-styles for react-components #21247

Merged
merged 3 commits into from
Jan 13, 2022
Merged

chore: re-enable react-storybook-addon and babel-make-styles for react-components #21247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fffd08a
fix(react-storybook-addon): make devloop and package usage within sto…
Hotell Jan 11, 2022
da517e2
chore(react-components): make sb start work with babel-make-styles an…
Hotell Jan 11, 2022
32b8870
Change files
Hotell Jan 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-components-9d99eb03-ece2-4410-be0a-ef3e876c43b3.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "chore(react-components): make sb start work with babel-make-styles and react-sb-addon",
"packageName": "@fluentui/react-components",
"email": "[email protected]",
"dependentChangeType": "none"
}
6 changes: 1 addition & 5 deletions packages/react-components/.storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
'../src/**/*.stories.@(ts|tsx)',
...utils.getVnextStories(),
],
addons: [
...rootMain.addons,
// Should be re-enabled, see https://github.com/microsoft/fluentui/issues/20896
// '@fluentui/react-storybook-addon'
],
addons: [...rootMain.addons, '@fluentui/react-storybook-addon'],
webpackFinal: (config, options) => {
const localConfig = { ...rootMain.webpackFinal(config, options) };

Expand Down
5 changes: 4 additions & 1 deletion packages/react-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,12 @@
"start": "yarn storybook",
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-components/src && yarn docs",
"storybook": "start-storybook --port 3000 -s ./public",
"prestorybook": "yarn prepare-storybook-local-build",
"storybook": "start-storybook --port 3000 -s ./public --no-manager-cache",
"prestorybook:docs": "yarn prepare-storybook-local-build",
"storybook:docs": "start-storybook --port 3000 -s ./public --docs --no-manager-cache",
"build-storybook": "build-storybook -s ./public -o ./dist/storybook --docs",
"prepare-storybook-local-build": "lage build --to @fluentui/babel-make-styles @fluentui/react-storybook-addon",
Copy link
Member

@layershifter layershifter Jan 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you going to do the same for all other packages? 🤔 As the problem remains for them, too:

  • yarn workspace @fluentui/babel-make-styles clean
  • yarn workspace @fluentui/react-image start --no-manager-cache

⬇️⬇️⬇️

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm not really. I wanted to unblock public facing, which is react-component suite. but probably you're right to have this everywhere to not add additional DX confustion - "it works in react-components but not per package waaat"

I'll update generator and do the migration in follow up PR.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#21265
#21267

"test": "jest",
"type-check": "tsc -b tsconfig.json"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react-storybook-addon/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,6 @@ module.exports = {

1. Run inner loop from monorepo root `yarn workspace @fluentui/react-storybook-addon storybook`

- > 💡 this will run `build` script that compiles addon implementation so it can be consumed by local storybook
- > 💡 this will run `prestorybook` script that compiles addon implementation with all of its direct dependencies that live within monorepo, so it can be consumed by local storybook

2. Every time you do any change to implementation, after you ran your local storybook you'll need to manually run `yarn workspace @fluentui/react-storybook-addon build` to reflect those changes
1 change: 1 addition & 0 deletions packages/react-storybook-addon/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"test": "jest --passWithNoTests",
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-storybook-addon/src && yarn docs",
"prestorybook": "lage build --to @fluentui/react-storybook-addon",
"storybook": "start-storybook",
"type-check": "tsc -b tsconfig.json"
},
Expand Down
12 changes: 2 additions & 10 deletions packages/react-storybook-addon/preset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
function config(entry = []) {
// This entrypoint is deliberately set to ts for monorepo DX
// However this is bad for publishing
// https://github.com/microsoft/fluentui/issues/20474
// https://github.com/microsoft/fluentui/issues/18357
return [...entry, require.resolve('./src/preset/preview.ts')];
return [...entry, require.resolve('./lib/preset/preview')];
Copy link
Contributor Author

@Hotell Hotell Jan 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • making this work is just not possible because there is no auto transpilation happening when storybook loads presets
  • also trick with babel/register won't work unless major overhaul of "how we build"

}

function managerEntries(entry = []) {
// This entrypoint is deliberately set to ts for monorepo DX
// However this is bad for publishing
// https://github.com/microsoft/fluentui/issues/20474
// https://github.com/microsoft/fluentui/issues/18357
return [...entry, require.resolve('./src/preset/manager.ts')];
return [...entry, require.resolve('./lib/preset/manager')];
}

module.exports = { managerEntries, config };