feat: ✨ add storybook to cli #1561
Conversation
|
@lloydrichards is attempting to deploy a commit to the shadcn-pro Team on Vercel. A member of the Team first needs to authorize it. |
|
I believe!!! |
|
@lloydrichards did you have any trouble with the code blocks showing corrupted code? Happens to me with |
I had a look and things loook correct in the code block for my dev env, but i've gone and upgraded storybook to v7.4.5 incase there was some bug in there somewhere. are you using |
i implemented a lot of stories myself before i found your repo. Now i cloned yours and am running it and got this error:
just fyi. Seems like awesome work though. I've also built tests for about half of the components so far. i will have to write tests for all of them soon |
I think the issue is using npm vs pnpm. i usually use yarn and was running into issues with |
|
ahhh nevermind, i was on now it works |
|
@lloydrichards what do you think is the easiest way to add the import code block on each story at the top. like this: import { Button } from 'mylibrary/button'`Right now i'm having to make a .mdx for each story and put that at the top manually like this:
|
|
The way its done through the CLI, is that within the /registry/ui components they reference using aliases: import { buttonVariants } from "@/registry/default/ui/button"and then later in the CLI process there is a pretty cool transform-import function ( This should also apply to the .stories.tsx files so if you use the |
lloydrichards
force-pushed
the
feat/storybook-cli
branch
from
f222e67 to
24727b8
Compare
|
@lloydrichards This looks great!!! 😁 is there anything that you need from me or the Storybook team to wrap up? |
One piece of the puzzle that is still missing is bring able to infer the arg types better for the components. Normally in a story the Meta does a pretty good job building out the controls, but i've noticed with the Radix components that this only works if you specify a prop in the Story.args. Do you know if there is a better way to infer the argTypes, otherwise its a manual process of picking which props are most useful for each story |
|
@shadcn Would it be possible to have a look and see if the changes im proposing here to the CLI and the inclusion o Storybook is inline with you roadmap with shadch/ui? So far I've achieved the core of what i want to do with this PR:
next steps for me really depend if there is any pushback from your side or any requests for changes. just let me know or if you don't have time, maybe ping another maintainer so I can try test the CLI? 🙏 |
This is most likely because Storybook, by default, filters out all props sourced from Try adjusting the prop filter like so: // .storybook/main.ts
import type { StorybookConfig } from "@storybook/nextjs"
const config: StorybookConfig = {
// ...
typescript: {
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
// 👇 Adjusted prop filter
propFilter: (prop) =>
prop.parent ? !/node_modules\/(?!@radix-ui)/.test(prop.parent.fileName) : true,
},
},
}
export default config |
Signed-off-by: Xavier Geerinck <[email protected]>
There is still am issue with <Story /> in .mdx, will be easier to refactor into .stories.tsx
| .map(([name, colors]) => { | ||
| return { | ||
| name, | ||
| colors: typeof colors === "string" ? { [name]: colors } : colors, |
There was a problem hiding this comment.
this does not cover when user update the config to be more have more object in their color systems.
Maybe we can do flatten the object here instead?
There was a problem hiding this comment.
https://github.com/hughsk/flat/blob/master/index.js
can use util function from "flat" to flatten the object.
There was a problem hiding this comment.
| colors: typeof colors === "string" ? { [name]: colors } : colors, | |
| colors: typeof colors === "string" ? { [name]: colors } : flatten(colors), |
drawer meta has both ´satisfies Meta<typeof Drawer>´ and ´:Meta<typeof Drawer>´
|
@shadcn |
* Scaffold next app * Init storybook on top of Next * Add shadcn/ui stories * Update structure.mdx * Update package.json * Remove eslint * Update package.json * Keep working on implementation * Flatten stories * Start fixing story contexts * Fix fonts * Start working on stories * Add stories from later PR shadcn-ui/ui#1561 * Update toast.stories.tsx * Update pnpm-lock.yaml * Create storybook.mdx
|
this should be a high priority than any other task |
|
+1 eagerly awaiting for storybook support |
|
For anyone interested in a sneak-peak into the future, I've been putting together a registry for all the stories made so far. There is a full list as well as some easy to copy commands at registry.lloydrichards.dev but for warn that things are a wip so no judgement on styling atm 🙏 If you want to add one of these stories to your own repo its easy, just add in the registry url for the story you want into the command below: npx shadcn@latest add <Registry URL>This will add the story and any missing components to your repo, but its important to check file and make sure the imports are correct incase you have a different ui path.
I've made the repo pubic so if you have any suggestions or issues, feel free to add them there 👍 |
* Scaffold next app * Init storybook on top of Next * Add shadcn/ui stories * Update structure.mdx * Update package.json * Remove eslint * Update package.json * Keep working on implementation * Flatten stories * Start fixing story contexts * Fix fonts * Start working on stories * Add stories from later PR shadcn-ui/ui#1561 * Update toast.stories.tsx * Update pnpm-lock.yaml * Create storybook.mdx
* Scaffold next app * Init storybook on top of Next * Add shadcn/ui stories * Update structure.mdx * Update package.json * Remove eslint * Update package.json * Keep working on implementation * Flatten stories * Start fixing story contexts * Fix fonts * Start working on stories * Add stories from later PR shadcn-ui/ui#1561 * Update toast.stories.tsx * Update pnpm-lock.yaml * Create storybook.mdx
|
Firstly I want to thank everyone who has subscribes and been part of the conversation to try and get this PR merged in 🫶 Its been a lot of fun the last 18 months keeping up with the merge commits and tweaking the stories. That said, and with the release of v2.3.0, it more evident then ever that this PR is not going to be merged and instead the focus is to build a robust ecosystem of components rather then a monolithic repository. I personally feel this is the correct path forward for shadcn/ui as it elevates the pressure of constant component and block requests and shifts responsibility of maintenance towards registries. Next steps for StoriesAs mentioned in the previous comment 👆 I've used the new registry documentations to build out a place for the stories I've build and will continue to maintain and use them from here. If you haven't already, check out the website for lists of cli commands or visit the repo if you want to help contribute through issues or PRs https://registry.lloydrichards.dev/ This might also be a good time for Storybook (@kylegach 👀 ) to fork or take over this initiative with their own registry, but no pressure or hard feelings either way. Just happy to have been part of the journey 🫡 Next step for this PRThis is where it would be great to get the final input from @shadcn (but I know is super busy with Tailwind v4 issues atm) but my thoughts are that this PR is now stale and can be closed to help reduce the entropy a bit in the open PRs. Unless i hear otherwise, I'll close the PR myself in ~1 week 🙏 Thanks again for the support and look forward to helping out in the repo in other ways in the future ❤️ |
|
@lloydrichards amazing contribution to the community, regardless of merge status. thank you for all your good work! 👏👏👏 |
|
Seconding that—I've been following this issue, I think since its inception, and it's a testament to your commitment to open source and to the community that you've stuck with it, @lloydrichards. Awesome work, much appreciated. 🙌 |
|
Thank you, Lloyd. Your work creating and maintaining this PR has been incredible. I especially appreciate how receptive you were to making sure anyone using this would get the latest Storybook best practices. I've raised this with the Storybook team, and I'll let you know what comes of that as soon as we're able. |
|
@lloydrichards — Can you please email me at [email protected], so we can discuss next steps? (Sorry for the notification spam, everyone else. 🙃) |
Goals/Scope
This is extension of PR #11 regarding adding stories for storybook through the CLI. A lot of work was already done by XavierGeerinck to get this going, but the PR seems to have been lost despite renewed interest and push to get this feature added. I've created this renewed PR with the hope of getting some attention and momentum in adding this to the CLI.
For the sake of narrowing the scope of this PR, i've removed the typography component so we can focus on just storybook.
Description
There are two main areas that have been changed in this PR, first is the addition of a storybook folder in the /registry which contain
*.story.tsxfiles for most of the component (some are still missing). Second is I've added an additional option to thecomponent.tsxwhich should allow for the stories to be loaded in through the CLI when adding a component (still need to test)Component Stories
The stories are added to the
registryfolder in the*.story.tsxfiles. While most of the components follow the examples in the shadcn/ui docs, some of the examples needed to be simplified or broken up into multiple stories to make them more readable. Below you will find a list of the components and their stories.Expand Component Table
Comments
I'm very happy for support with getting this PR through so if anyone would like to review the stories, or add new ones, or help with upgrading the CLI, please join the conversation in the comments 🙇
if you would like to add a missing story, you can create the
.story.tsxfile in the/apps/www/registry/stories/directory and add the file to theapps/www/public/registry/index.jsonfor the correct component.