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

Upgrade Storybook v8.x #1904

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Upgrade Storybook v8.x #1904

wants to merge 11 commits into from

Conversation

mark-fitzgerald
Copy link
Contributor

@mark-fitzgerald mark-fitzgerald commented Nov 21, 2024 •
edited
Loading

Summary:

Nothing is broken. Everything is happy.

Test plan:

yarn start is happy
yarn build-storybook; python3 -m http.server -d storybook-static; -> open http://localhost:8000 in a browser
yarn build-storybook --stats-json works and generates /storybook-static/preview-stats.json
yarn dev is happy
yarn cypress:ci is happy

Upgrade Storybook (and related dependencies) to v8.x.
1fb31fc 
Adjust Storybook files accordingly.
@mark-fitzgerald mark-fitzgerald self-assigned this Nov 21, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Nov 21, 2024 •
edited
Loading

Size Change: 0 B

Total Size: 1.29 MB

ℹ️ View Unchanged
Filename Size
packages/kas/dist/es/index.js 39 kB
packages/keypad-context/dist/es/index.js 760 B
packages/kmath/dist/es/index.js 4.27 kB
packages/math-input/dist/es/index.js 77.9 kB
packages/math-input/dist/es/strings.js 1.79 kB
packages/perseus-core/dist/es/index.js 1.48 kB
packages/perseus-editor/dist/es/index.js 697 kB
packages/perseus-linter/dist/es/index.js 22.2 kB
packages/perseus/dist/es/index.js 421 kB
packages/perseus/dist/es/strings.js 3.57 kB
packages/pure-markdown/dist/es/index.js 3.66 kB
packages/simple-markdown/dist/es/index.js 12.5 kB

compressed-size-action

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Nov 22, 2024 •
edited
Loading

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (35a5605) and published it to npm. You
can install it using the tag PR1904.

Example:

yarn add @khanacademy/perseus@PR1904

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1904

@mark-fitzgerald mark-fitzgerald marked this pull request as ready for review November 25, 2024 20:32
@mark-fitzgerald mark-fitzgerald requested a review from a team November 25, 2024 20:32
@khan-actions-bot
Copy link
Contributor

Gerald

Required Reviewers
  • @Khan/perseus for changes to package.json, yarn.lock, .changeset/chilled-donuts-serve.md, .changeset/yellow-carrots-obey.md, .storybook/main.ts, .storybook/preview.tsx, dev/package.json, dev/vite.config.ts, packages/math-input/src/full-keypad.stories.tsx, packages/perseus/src/components/__stories__/input-with-examples.stories.tsx, packages/perseus/src/components/__stories__/lint.stories.tsx, packages/perseus/src/components/__stories__/math-input.stories.tsx, packages/perseus/src/components/__stories__/number-input.stories.tsx, packages/perseus/src/components/__stories__/range-input.stories.tsx, packages/perseus/src/components/__stories__/stub-tag-editor.stories.tsx, packages/perseus/src/components/__stories__/text-input.stories.tsx, packages/perseus/src/components/__stories__/text-list-editor.stories.tsx, packages/perseus/src/components/__stories__/zoomable.stories.tsx, packages/perseus-editor/src/widgets/__stories__/interactive-graph-editor.stories.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

mark-fitzgerald
mark-fitzgerald commented Nov 25, 2024
View reviewed changes
package.json
"style-loader": "^3.3.3",
"tiny-invariant": "^1.3.1",
"typescript": "^5.4.2",
"typescript-coverage-report": "^0.7.0",
"vite-plugin-istanbul": "^5.0.0",
"vite-plugin-turbosnap": "^1.0.3",
Copy link
Contributor Author

@mark-fitzgerald mark-fitzgerald Nov 25, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

turbosnap is now built into the "@storybook/react-vite" bundle and can be enabled with the standard --stats-json argument

mark-fitzgerald
mark-fitzgerald commented Nov 25, 2024
View reviewed changes
.storybook/main.ts

typescript: {
reactDocgen: "react-docgen",
},
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Storybook now defaults to react-docgen so no need to specify this here: https://storybook.js.org/docs/api/main-config/main-config-typescript#reactdocgen

mark-fitzgerald
mark-fitzgerald commented Nov 25, 2024
View reviewed changes
.storybook/preview.tsx
tags: [
//👇 Enables auto-generated documentation for all stories
"autodocs",
],
Copy link
Contributor Author

Choose a reason for hiding this comment

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

New config location (https://storybook.js.org/docs/writing-docs/autodocs)

mark-fitzgerald
mark-fitzgerald commented Nov 25, 2024
View reviewed changes
dev/package.json
@@ -34,6 +34,7 @@
"@phosphor-icons/core": "^2.0.2"
},
"devDependencies": {
"vite": "^5.1.0"
"vite": "^5.1.0",
"@vitejs/plugin-react": "^4.3.3"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We now need to specify this dep explicitly.

jeremywiebe
jeremywiebe approved these changes Nov 25, 2024
View reviewed changes
Copy link
Collaborator

@jeremywiebe jeremywiebe left a comment

Choose a reason for hiding this comment

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

Nice. Thanks for pushing this along!

packages/perseus-editor/src/widgets/__stories__/interactive-graph-editor.stories.tsx Outdated
Comment on lines 46 to 51
apiOptions: {table: {disable: true}},
backgroundImage: {table: {disable: true}},
correct: {table: {disable: true}},
graph: {table: {disable: true}},
onChange: {table: {disable: true}},
valid: {table: {disable: true}},
Copy link
Collaborator

Choose a reason for hiding this comment

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

@nishasy had thoughts that we shouldn't hide props from the table even if they didn't make sense to edit so that folks could have a view of all the props a component supported.

I'm open to deleting all these {table: { disable: true}} if folks would like these props shown in Storybook.

Copy link
Contributor

@nishasy nishasy Nov 25, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I approve this message! I like seeing the props that should be available just for documentation purposes, even if they're not editable in the table itself. That's also how it's done in Wonder Blocks.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@jeremywiebe / @nishasy - to confirm, I should remove any setting where table: {disable: true}} is specified?

Copy link
Collaborator

Choose a reason for hiding this comment

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

Confirmed. Let's remove them. :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Unhided.

@jeremywiebe jeremywiebe mentioned this pull request Nov 26, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nishasy nishasy nishasy left review comments

@jeremywiebe jeremywiebe jeremywiebe approved these changes

Assignees

@mark-fitzgerald mark-fitzgerald

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@mark-fitzgerald @khan-actions-bot @jeremywiebe @nishasy