Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

Migrate Storybook stories to CSF v3 #11930

Merged
merged 4 commits into from
Apr 23, 2024
Merged

Migrate Storybook stories to CSF v3 #11930

merged 4 commits into from
Apr 23, 2024

Conversation

jesstelford
Copy link
Contributor

@jesstelford jesstelford commented Apr 23, 2024 •
edited
Loading

Tip

View this PR without whitespace changes

CSF v3 is Storybook's new format for stories supported in Storybook v7+.

A couple highlights of the new format:

  • Clearer story configuration (each story is now an object instead of a function with some attached properties)
  • Support for the new play function to automate interactions

The changes in this PR were achieved in 3 steps (each added as a seperate commit for easier reviewing):

  1. Add csf-v3 internal migration
    • A jscodeshift migration using our migration tool to move from the CSF 2 Function export format to CSF 3 Object export syntax (the official storybook migrator doesn't handle this)
  2. Add storybook lint rules
  3. Migrate to CSF v3
    • Run storybook's csf v3 migration: 
      • pnpm dlx storybook@latest migrate csf-2-to-3 --glob="polaris-react/**/*.stories.tsx" --parser=tsx
    • Run the internal csf v3 migration: 
      • pnpm --filter=@shopify/polaris-migrator build && pnpm --filter=@shopify/polaris-migrator start --force csf-v3 "../polaris-react/**/*.stories.tsx"
    • Format all changed files: 
      • git diff --name-only --diff-filter=ACMR | sed 's| |\\ |g' | xargs pnpm exec prettier --write --ignore-unknown

@jesstelford jesstelford force-pushed the csf-3 branch 2 times, most recently from 25c5105 to 92b3ecf Compare April 23, 2024 06:56
@jesstelford jesstelford mentioned this pull request Apr 23, 2024
Merged
@jesstelford jesstelford merged commit b111629 into main Apr 23, 2024
@jesstelford jesstelford deleted the csf-3 branch April 23, 2024 07:44
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Apr 23, 2024
Merged
sophschneider pushed a commit that referenced this pull request Apr 24, 2024
@shopify-github-actions-access @github-actions
Version Packages (#11922)
d3099a5 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris@13.2.0

### Minor Changes

- [#11535](#11535)
[`bcd16df24`](bcd16df)
Thanks [@ShabanaRumane](https://github.com/ShabanaRumane)! - Added
support for setting `maxHeight` and `minHeight` on `Popover.Pane` and
`Combobox`


- [#11907](#11907)
[`45308c97a`](45308c9)
Thanks [@zakwarsame](https://github.com/zakwarsame)! - Added an optional
`fiterLabel` prop to `ActionList` to allow for a custom placeholder

### Patch Changes

- [#11897](#11897)
[`a83084b3b`](a83084b)
Thanks [@jesstelford](https://github.com/jesstelford)! - Fixed edges of
disabled `IndexTable.Row` `Checkbox` triggering selection


- [#11924](#11924)
[`5ec70e688`](5ec70e6)
Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest
29


- [#11929](#11929)
[`9ee700be6`](9ee700b)
Thanks [@sophschneider](https://github.com/sophschneider)! - Rounded
`Navigation` at `mdDown` behind a feature flag


- [#11923](#11923)
[`ce13c4366`](ce13c43)
Thanks [@jesstelford](https://github.com/jesstelford)! - Update dev
dependency: `postcss-import@^15.1.0` -> `postcss-import@^16.1.0`


- [#11925](#11925)
[`364ada59e`](364ada5)
Thanks [@sophschneider](https://github.com/sophschneider)! - Updated
Frame to only apply rounded Frame when passed a `topBar`


- [#11734](#11734)
[`1fef06256`](1fef062)
Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to
Storybook v8


- [#11898](#11898)
[`1539f0e7c`](1539f0e)
Thanks [@jesstelford](https://github.com/jesstelford)! - Removed extra
padding around `IndexTable.Row` `Checkbox`


- [#11927](#11927)
[`5a32a3ff6`](5a32a3f)
Thanks [@sophschneider](https://github.com/sophschneider)! - Added
`prefers-reduced-motion` media queries to `Frame` width transitions


- [#11930](#11930)
[`b111629d7`](b111629)
Thanks [@jesstelford](https://github.com/jesstelford)! - Migrate
Storybook stories to CSF v3


- [#11805](#11805)
[`0a9b72721`](0a9b727)
Thanks [@LA1CH3](https://github.com/LA1CH3)! - Fixed `IndexTable`
`loading` prop to correctly show/hide loading UI when prop value changes

- Updated dependencies
\[[`5ec70e688`](5ec70e6)]:
    -   @shopify/polaris-icons@9.0.1
    -   @shopify/polaris-tokens@9.0.1

## @shopify/polaris-icons@9.0.1

### Patch Changes

- [#11924](#11924)
[`5ec70e688`](5ec70e6)
Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest
29

## @shopify/polaris-migrator@1.0.1

### Patch Changes

- [#11924](#11924)
[`5ec70e688`](5ec70e6)
Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest
29


- [#11930](#11930)
[`b111629d7`](b111629)
Thanks [@jesstelford](https://github.com/jesstelford)! - Migrate
Storybook stories to CSF v3

- Updated dependencies
\[[`5ec70e688`](5ec70e6)]:
    -   @shopify/polaris-tokens@9.0.1
    -   @shopify/stylelint-polaris@16.0.1

## @shopify/polaris-tokens@9.0.1

### Patch Changes

- [#11924](#11924)
[`5ec70e688`](5ec70e6)
Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest
29

## @shopify/stylelint-polaris@16.0.1

### Patch Changes

- Updated dependencies
\[[`5ec70e688`](5ec70e6)]:
    -   @shopify/polaris-tokens@9.0.1

## polaris-for-vscode@1.0.1

### Patch Changes

- Updated dependencies
\[[`5ec70e688`](5ec70e6)]:
    -   @shopify/polaris-tokens@9.0.1

## polaris.shopify.com@1.0.4

### Patch Changes

- [#11924](#11924)
[`5ec70e688`](5ec70e6)
Thanks [@jesstelford](https://github.com/jesstelford)! - Upgrade to jest
29

- Updated dependencies
\[[`a83084b3b`](a83084b),
[`5ec70e688`](5ec70e6),
[`9ee700be6`](9ee700b),
[`bcd16df24`](bcd16df),
[`ce13c4366`](ce13c43),
[`364ada59e`](364ada5),
[`1fef06256`](1fef062),
[`45308c97a`](45308c9),
[`1539f0e7c`](1539f0e),
[`5a32a3ff6`](5a32a3f),
[`b111629d7`](b111629),
[`0a9b72721`](0a9b727)]:
    -   @shopify/polaris@13.2.0
    -   @shopify/polaris-icons@9.0.1
    -   @shopify/polaris-tokens@9.0.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
1 more reviewer

@alex-page alex-page alex-page approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@jesstelford @alex-page