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: +617 B (+0.07%)

Total Size: 867 kB

Filename	Size	Change
packages/perseus/dist/es/index.js	420 kB	+617 B (+0.15%)

ℹ️ 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	280 kB
packages/perseus-linter/dist/es/index.js	22.2 kB
packages/perseus/dist/es/strings.js	3.4 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 (2f4f7b1) 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