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

Jump to bottom

migration: migrate converged packages to new DX (1st stage) #18579

Closed
32 tasks done
Hotell opened this issue Jun 16, 2021 · 24 comments · Fixed by #18695, #18772 or #18794
Closed
32 tasks done

migration: migrate converged packages to new DX (1st stage) #18579

Hotell opened this issue Jun 16, 2021 · 24 comments · Fixed by #18695, #18772 or #18794
Assignees
@miroslavstastny
Labels
Area: Build System Fluent UI react-components (v9) Status: Fixed Fixed in some PR Type: Epic
Milestone
August Project Cy...

Comments

@Hotell
Copy link
Contributor

Hotell commented Jun 16, 2021 •
edited
Loading

Preparation:

What is new DX (1st stage) ?

  • Tooling: only source of truth for package resolution/mapping is tsconfig.base.json, that uses TSpath aliases
  • TypeScript: go to definition goes to actual source instead to generated declaration files
  • Plug n play: clone/update your local copy and start working without need to build anything (jest-serializer-make-styles and babel-make-styles needs still manual build node packages within repo are required to be built first before using (blocking no-build dev loop mode) #18357)
  • Task runner:
    • simplified package.json#scripts tasks
    • running storybook/start and test will invoke native storybook and jest binaries respectively
  • Storybook:
    • every package uses collocated stories with local setup that inherits from global /.storybook configuration.
    • this makes running storybook much faster and also enables for experimentation on your local package level without affecting rest
  • Testing:
    • tests are setup via locally scoped config that inherits from root /jest.preset.js.
    • all projects are registered via jest projects in root /jest.config.js which enables also easy debugging from within your IDE.

Packages that need migration

How to migrate

  1. execute migration generator
    • from CLI yarn nx workspace-generator migrate-converged-pkg --name='@fluentui/<package-name>'
    • via NX console VSCode plugin
  2. Apply any manual adjustments that might be needed. Check documentation
  3. Create PR and make sure to add @microsoft/fluentui-react-build as reviewer to double check your changes

FAQ

Why should I migrate my own/teams packages instead of one person doing the whole migration for me?

As we are in process of introducing new Dev Experience for how to approach migrations in general within monorepo, that could be implemented also for customers in the future, we wanna:

  • get early feedback within the internal team
  • show you gradual approach with less efforts (small focused PRs)
  • distribute the knowledge about the new underlying tooling (nx) that we use within internal team

I wanna create new package, how should I proceed ?

  • bootstrap new package via plop for convergence
  • follow steps mentioned above 🙌

If you'll run into any issues while running the migration generator please open github issue.

Thank you and Happy migrating!
@Hotell Hotell added this to the June Project Cycle Q2 2021 milestone Jun 16, 2021
@Hotell Hotell mentioned this issue Jun 16, 2021
Closed
@Hotell Hotell changed the title migration: migrate converged package to new DX (1st stage) migration: migrate converged packages to new DX (1st stage) Jun 16, 2021
@andrefcdias andrefcdias mentioned this issue Jun 17, 2021
Merged
2 tasks
This was referenced Jun 17, 2021
Merged
Merged
This was referenced Jun 18, 2021
Merged
Closed
@Hotell Hotell mentioned this issue Jun 18, 2021
Merged
2 tasks
msft-fluent-ui-bot pushed a commit that referenced this issue Jun 18, 2021
@andrefcdias
react-image - Migration to new DX (#18606)
dad03f4 
#### Pull request checklist

- [x] Addresses an existing issue: partially implements #18579
- [x] Include a change request file using `$ yarn change`

#### Description of changes

- Migration of package to new DX
- Conversion of styling from SASS to make-styles
msft-fluent-ui-bot pushed a commit that referenced this issue Jun 18, 2021
@TristanWatanabe
react-divider: Migrate to new DX (#18625)
d222fbc 
#### Pull request checklist

- [x] Addresses an existing issue: Fixes part of #18579
- [x] Include a change request file using `$ yarn change`

#### Description of changes
- migrates the `react-divider` package to new DX using `nx workspace-generator migrate-converged-pkg`
@miroslavstastny miroslavstastny mentioned this issue Jun 22, 2021
Merged
2 tasks
@tringakrasniqi tringakrasniqi mentioned this issue Jun 22, 2021
Merged
2 tasks
@layershifter layershifter mentioned this issue Jun 23, 2021
Merged
2 tasks
@TristanWatanabe TristanWatanabe mentioned this issue Jun 24, 2021
Merged
2 tasks
@ling1726 ling1726 mentioned this issue Jun 24, 2021
Merged
2 tasks
@Hotell Hotell reopened this Jun 25, 2021
@msft-fluent-ui-bot msft-fluent-ui-bot added Status: Fixed Fixed in some PR and removed Status: In PR labels Jul 1, 2021
@Hotell Hotell reopened this Jul 1, 2021
@tringakrasniqi tringakrasniqi mentioned this issue Jul 9, 2021
Merged
2 tasks
@tringakrasniqi tringakrasniqi mentioned this issue Jul 16, 2021
Merged
2 tasks
@layershifter layershifter mentioned this issue Jul 19, 2021
Merged
2 tasks
msft-fluent-ui-bot pushed a commit that referenced this issue Jul 19, 2021
@TristanWatanabe
Button: Migrate react-button to new DX (#18607)
f8578ee 
#### Pull request checklist

- [x] Addresses an existing issue: Fixes part of #18579
- [x] Include a change request file using `$ yarn change`

#### Description of changes
- migrates `react-button` package using `yarn nx workspace-generator migrate-converged-pkg`
- moved `Playground.tsx` and `Playground.types.tsx` to `react-button` package as they were deleted by migration script.
- updates `useCompountButtonStyles` to explicitly declare `marginTop` value to fix babel-loader error.
- extracted `buttonBaseProps` from `Button` story to its own file.
- updated import paths for all Button stories.
@tringakrasniqi tringakrasniqi mentioned this issue Jul 21, 2021
Merged
1 task
This was referenced Jul 21, 2021
Merged
Merged
msft-fluent-ui-bot pushed a commit that referenced this issue Jul 21, 2021
@tringakrasniqi
react-card: Migrate to new DX (#19036)
37b972a 
#### Pull request checklist

- [x] Addresses an existing issue: Fixes partially #18579, fixes #19050
- [ ] Include a change request file using `$ yarn change`

#### Description of changes

Migration to new DX for react-card
@tringakrasniqi tringakrasniqi mentioned this issue Jul 22, 2021
Merged
2 tasks
PeterDraex pushed a commit to PeterDraex/fluentui that referenced this issue Aug 6, 2021
@TristanWatanabe @PeterDraex
Button: Migrate react-button to new DX (microsoft#18607)
97c1a55 
#### Pull request checklist

- [x] Addresses an existing issue: Fixes part of microsoft#18579
- [x] Include a change request file using `$ yarn change`

#### Description of changes
- migrates `react-button` package using `yarn nx workspace-generator migrate-converged-pkg`
- moved `Playground.tsx` and `Playground.types.tsx` to `react-button` package as they were deleted by migration script.
- updates `useCompountButtonStyles` to explicitly declare `marginTop` value to fix babel-loader error.
- extracted `buttonBaseProps` from `Button` story to its own file.
- updated import paths for all Button stories.
PeterDraex pushed a commit to PeterDraex/fluentui that referenced this issue Aug 6, 2021
@tringakrasniqi @PeterDraex
react-card: Migrate to new DX (microsoft#19036)
f6f8ed2 
#### Pull request checklist

- [x] Addresses an existing issue: Fixes partially microsoft#18579, fixes microsoft#19050
- [ ] Include a change request file using `$ yarn change`

#### Description of changes

Migration to new DX for react-card
@Hotell
Copy link
Contributor Author

Hotell commented Aug 19, 2021

all vNext and react-components suite has been migrated 🎉 excellent collaboration team !

@Hotell Hotell closed this as completed Aug 19, 2021
This was referenced Aug 27, 2021
Merged
Merged
@microsoft microsoft locked as resolved and limited conversation to collaborators Sep 19, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@miroslavstastny miroslavstastny

Labels
Area: Build System Fluent UI react-components (v9) Status: Fixed Fixed in some PR Type: Epic
Projects
None yet
Milestone
August Project Cycle Q3 2021
5 participants
@Hotell @ecraig12345 @miroslavstastny @layershifter @msft-fluent-ui-bot