redwoodjs / redwood

The App Framework for Startups
https://redwoodjs.com
MIT License
17.31k stars 995 forks source link

[Docs]: Chapter 5 of the Tutorial uses an old format of Storybook #9745

Open suzdalnitski opened 10 months ago

suzdalnitski commented 10 months ago

Summary and description

https://github.com/redwoodjs/redwood/tree/main/docs/docs/tutorial/chapter5

Stories generated with yarn rw g component are generated in the new CSF format, whereas the tutorial makes use of the older format. This is confusing to people not familiar with Storybook.

The tutorial has this:

import Article from './Article'

const ARTICLE = {
  id: 1,
  title: 'First Post',
  body: `Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Street art next level umami squid. Hammock hexagon glossier 8-bit banjo. Neutra la croix mixtape echo park four loko semiotics kitsch forage chambray. Semiotics salvia selfies jianbing hella shaman. Letterpress helvetica vaporware cronut, shaman butcher YOLO poke fixie hoodie gentrify woke heirloom.`,
}

export const full = () => {
  return <Article article={ARTICLE} />
}

export const summary = () => {
  return <Article article={ARTICLE} summary={true} />
}

export default { title: 'Components/Article' }

Whereas the generated code is something like this:

import type { Meta, StoryObj } from '@storybook/react'

import Article from './Article'

const meta: Meta<typeof Article> = {
  component: Article,
}

export default meta

type Story = StoryObj<typeof Article >

export const Primary: Story = {}

Are you interested in working on this?

jtoar commented 10 months ago

Hey again @suzdalnitski, you're right we've been updating the storybook generators recently and I failed to remember to update the tutorial as well. No pressure but if you're up for making another PR I'm happy to review again—hope you're enjoying the tutorial!

ageddesi commented 6 months ago

Happy to take this on if your not working on it @suzdalnitski