Skip to content

chore(react-examples): replace storybook deprecated api with static stories#32074

Merged
dmytrokirpa merged 10 commits into
microsoft:masterfrom
dmytrokirpa:react-examples-stories
Jul 25, 2024
Merged

chore(react-examples): replace storybook deprecated api with static stories#32074
dmytrokirpa merged 10 commits into
microsoft:masterfrom
dmytrokirpa:react-examples-stories

Conversation

@dmytrokirpa

@dmytrokirpa dmytrokirpa commented Jul 23, 2024

Copy link
Copy Markdown
Contributor

Previous Behavior

Several deprecated Storybook APIs have been used to dynamically generate and incorporate react-examples stories.

New Behavior

  1. Updated deprecated APIs used in .storybook/preview.js with their current counterparts:
  • addDecorator(...) => export const decorators = [...]
  • addParameters(...) => export const parameters = [...]
  • configure(module, loadStories) => stories: getStories() in .storybook/main.js
  1. Added default exports into existing stories for CSF compatibility.
  2. Implemented static story files that export components from ./[ComponentName].[Variant].Example, preserving the existing logic but removing dynamic story generation. For instances where React class components are used, direct re-exporting isn't feasible; hence, they are wrapped and exported as functional components, such as export const Component = () => <ComponentExample />.

No changes have been made to the actual .doc.tsx or .Example.tsx files.

Related Issue(s)

@dmytrokirpa dmytrokirpa added Fluent UI react (v8) Issues about @fluentui/react (v8) Storybook labels Jul 23, 2024
@dmytrokirpa dmytrokirpa self-assigned this Jul 23, 2024
Comment thread packages/react-examples/.storybook/main.js
Comment thread packages/react-examples/.storybook/main.js
@dmytrokirpa
dmytrokirpa marked this pull request as ready for review July 23, 2024 11:25
@dmytrokirpa
dmytrokirpa requested review from a team as code owners July 23, 2024 11:25
@fabricteam

fabricteam commented Jul 23, 2024

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

✅ No changes found

@dmytrokirpa
dmytrokirpa requested a review from Hotell July 23, 2024 15:02

@AtishayMsft AtishayMsft left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Approving from charting package side

dmytrokirpa added a commit to dmytrokirpa/fluentui that referenced this pull request Jul 24, 2024
@dmytrokirpa

dmytrokirpa commented Jul 24, 2024

Copy link
Copy Markdown
Contributor Author

Could someone from @microsoft/cxe-red take a look on this one? 🙏 It blocks the Storybook v7 migration (#32018)

@dmytrokirpa
dmytrokirpa merged commit 1e212a4 into microsoft:master Jul 25, 2024
@dmytrokirpa
dmytrokirpa deleted the react-examples-stories branch July 25, 2024 11:17
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jul 25, 2024
* master: (77 commits)
  chore(react-examples): replace storybook deprecated api with static stories (microsoft#32074)
  [chore]: create base class for accordion item and remove style and layout specific api (microsoft#32102)
  release: applying package updates - web-components
  chore(web-components): add test for complex focus management (microsoft#32009)
  [chore]: create base class for avatar and remove style and layout specific api (microsoft#32083)
  [chore]: create base class for text input and remove style and layout specific api (microsoft#32080)
  release: applying package updates - web-components
  chore:(react-nav-preview) Scaffold AppItem (microsoft#32088)
  docs(`react-teaching-popover`): Adding subcomponents' API to `TeachingPopover` documentation page (microsoft#32084)
  feat(web-components): relax setTheme() argument type to allow custom tokens (microsoft#32087)
  release: applying package updates - react-components
  [Chore]: Create Spinner base class to abstract out style and layout specific api. (microsoft#32067)
  [Chore]: Create Progress Bar base class to abstract out style and layout specific api. (microsoft#32066)
  fix(react-storybook-addon): transform decorator to function in withAriaLive() (microsoft#32011)
  fix(motion): improve Web Animations API detection in tests (microsoft#32029)
  chore(eslint-plugin): removes type dependency on @fluentui/react-utilities internals in ban-instanceof-html-element rule (microsoft#32072)
  release: applying package updates - react v8
  release: applying package updates - web-components
  Chore: Create Divider base class to abstract out style and layout specific api (microsoft#32065)
  fix(TimePicker): Clear text when date value changes to null (microsoft#31626)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Fluent UI react (v8) Issues about @fluentui/react (v8) Storybook

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants