Modernize Perseus' components folder stories

[jeremywiebe]

Summary:

I spent some of Hackathon 2024 looking into a Storybook upgrade (unfinished). During this time, I read up on how Storybook recommends writing stories. The new format (CSF) makes Typescript understand the stories much better.

So, it turns out, with a few changes, the Storybook tooling becomes a bunch more helpful and reduces how much code we need to write in our stories. I'll outline the types of changes this PR contains so that it's easy to follow if you want to adjust other stories in this repo.

Here is what a very, simple, modern Storybook file looks like:

import MyComponent from "./my-component";

import type {Meta, StoryObj> from "@storybook/react";

const meta: Meta = {
    title: "Perseus/Components/MyComponent",
    component: MyComponent,
}
export default meta; 

type Story = StoryObj<typeof MyComponent>;

export const Default: Story = {};

1. Always define the default export as:

   const meta: Meta = {
       title: "..path where this component should show up in storybook", 
       component: MyComponent
   }
   export default meta; 
   

   Two things are important here:

   1. The default export is typed as Meta (from @storybook/react). This enables Storybook to infer the props this component has and enables "intellisense" on the different parameters to meta.
   2. We do not use as Meta on this object definition. I'm unclear why, but that doesn't seem to work as well as the example above.

2. Always define a type in the file as type Story = StoryObj<typeof MyComponent>. (again, the StoryObj<T> type comes from @storybook/react.

3. Define stories as export const MyStory: Story = {}. By defining stories as simple data objects we get better type checking on the args we provide and reduce alot of boilerplate that our stories typically had.

4. Use render and/or decorators to reduce duplication. Often times we need to wrap our component in order for it to behave properly or to look better in Storybook. Instead of writing each story with this wrapper, move the common wrapping code into the meta object's render key. (note: I'm not 100% clear when to use the render key and when to use the decorators. I was able to accomplish similar things with both. I suspect decorators is more useful if you have multiple things you want to adorn the component with but do not want to merge them together into a single render function.

Issue: "none"

Test plan:

Review the stories in Perseus/components (yarn start; open http://localhost:6006/?path=/docs/perseus-components-button-group--docs)

[github-actions]

Size Change: +907 B (+0.11%)

Total Size: 858 kB

Filename	Size	Change
packages/perseus/dist/es/index.js	409 kB	+907 B (+0.22%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.8 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.8 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	282 kB
packages/perseus-linter/dist/es/index.js	22.2 kB
packages/perseus/dist/es/strings.js	3.49 kB
packages/pure-markdown/dist/es/index.js	3.66 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[github-actions]

npm Snapshot: Published

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

Example:

yarn add @khanacademy/perseus@PR1802

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

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

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/old-lamps-wonder.md, packages/perseus/src/icon-paths.ts, packages/perseus/src/types.ts, packages/perseus/src/components/hud.tsx, packages/perseus/src/components/icon.tsx, packages/perseus/src/components/image-loader.tsx, packages/perseus/src/components/inline-icon.tsx, packages/perseus/src/components/input-with-examples.tsx, packages/perseus/src/components/lint.tsx, packages/perseus/src/components/math-input.tsx, packages/perseus/src/components/multi-button-group.tsx, packages/perseus/src/components/number-input.tsx, packages/perseus/src/components/range-input.tsx, packages/perseus/src/components/stub-tag-editor.tsx, packages/perseus/src/components/svg-image.tsx, packages/perseus/src/components/text-list-editor.tsx, packages/perseus/src/components/tooltip.tsx, packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx, packages/perseus/src/components/__stories__/graph.stories.tsx, packages/perseus/src/components/__stories__/graphie.stories.tsx, packages/perseus/src/components/__stories__/hud.stories.tsx, packages/perseus/src/components/__stories__/icon.stories.tsx, packages/perseus/src/components/__stories__/image-loader.stories.tsx, packages/perseus/src/components/__stories__/info-tip.stories.tsx, packages/perseus/src/components/__stories__/inline-icon.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__/multi-button-group.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__/simple-keypad-input.stories.tsx, packages/perseus/src/components/__stories__/sortable.stories.tsx, packages/perseus/src/components/__stories__/stub-tag-editor.stories.tsx, packages/perseus/src/components/__stories__/svg-image.stories.tsx, packages/perseus/src/components/__stories__/tex.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__/tooltip.stories.tsx, packages/perseus/src/components/__stories__/zoomable-tex.stories.tsx, packages/perseus/src/components/__stories__/zoomable.stories.tsx, packages/perseus/src/components/__tests__/math-input.test.tsx, packages/perseus/src/widgets/expression/expression.tsx, packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx, packages/perseus-editor/src/components/__stories__/scrollless-number-text-field.stories.tsx

---

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

[catandthemachines]

Looked through all the storybook pages updated and they are 10x better with the ability to see an interact with the props. Let's ship!

[nishasy]

THIS IS SO EXCITING! 🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉

I'm requesting changes to make sure the actions work everywhere that's specified before shipping this, but everything else looks awesome.

I also had one question about why the action props are all removed from the control panel, but that's nonblocking. (Usually in wonder blocks, we keep all the function props in the table, but we set the control type to null so they're not interactable. But it's clear that they're still props on the component.)

[nishasy]

Yayyyy thanks for the updates! This is SO EXCITING! And I learned a ton from your PR too 🎉