feat: ✨ add storybook to cli #1561

lloydrichards · 2023-09-19T20:41:37Z

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.tsx files for most of the component (some are still missing). Second is I've added an additional option to the component.tsx which 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 registry folder in the *.story.tsx files. 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

Checkbox	Name	Link to Storybook
✅	accordion	Storybook
✅	alert	Storybook
✅	alert-dialog	Storybook
✅	aspect-ratio	Storybook
✅	avatar	Storybook
✅	badge	Storybook
✅	breadcrumb	Storybook
✅	button	Storybook
✅	calendar	Storybook
✅	card	Storybook
✅	carousel	Storybook
✅	checkbox	Storybook
✅	collapsible	Storybook
✅	command	Storybook
✅	context-menu	Storybook
✅	dialog	Storybook
✅	drawer	Storybook
✅	dropdown-menu	Storybook
✅	form	Storybook
✅	hover-card	Storybook
✅	input-otp	Storybook
✅	input	Storybook
✅	label	Storybook
✅	menubar	Storybook
✅	navigation-menu	Storybook
✅	pagination	Storybook
✅	popover	Storybook
✅	progress	Storybook
✅	radio-group	Storybook
✅	resizable	Storybook
✅	scroll-area	Storybook
✅	select	Storybook
✅	separator	Storybook
✅	sheet	Storybook
✅	skeleton	Storybook
✅	slider	Storybook
✅	sonner	Storybook
✅	switch	Storybook
✅	table	Storybook
✅	tabs	Storybook
✅	textarea	Storybook
✅	toast	Storybook
✅	toggle	Storybook
✅	toggle-group	Storybook
✅	tooltip	Storybook

Bonus	Name	Link to Stories
⭐️	color - functional	Storybook
⭐️	color - tailwind	Storybook
⭐️	radius	Storybook
⭐️	shadow	Storybook
⭐️	padding	Storybook
⭐️	typography - font family	Storybook
⭐️	typography - font size	Storybook
⭐️	typography - font weight	Storybook

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.tsx file in the /apps/www/registry/stories/ directory and add the file to the apps/www/public/registry/index.json for the correct component.

cc: @XavierGeerinck @integrayshaun

vercel · 2023-09-19T20:41:40Z

@lloydrichards is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

csartor · 2023-09-22T14:43:07Z

I believe!!!

Jared-Dahlke · 2023-09-27T15:54:59Z

@lloydrichards did you have any trouble with the code blocks showing corrupted code? Happens to me with <Source/> and just the auto docs

lloydrichards · 2023-09-28T11:07:43Z

@lloydrichards did you have any trouble with the code blocks showing corrupted code? Happens to me with <Source/> and just the auto docs

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 pnpm storybook to spin it up?

Jared-Dahlke · 2023-09-28T15:06:18Z

@lloydrichards did you have any trouble with the code blocks showing corrupted code? Happens to me with <Source/> and just the auto docs

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 pnpm storybook to spin it up?

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

lloydrichards · 2023-09-28T15:14:55Z

i implemented a lot of stories myself before i found your repo. Now i cloned yours and am running it and got this error:

I think the issue is using npm vs pnpm. i usually use yarn and was running into issues with yarn install, but noticed the pnpm.lock so tried using pnpm install instead.

Jared-Dahlke · 2023-09-28T15:17:59Z

ahhh nevermind, i was on main, i needed to git checkout feat/storybook-cli

now it works

Jared-Dahlke · 2023-09-28T15:21:03Z

@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:

lloydrichards · 2023-09-28T15:38:54Z

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 (/packages/cli/src/utils/transformers/transform-import.ts) that swaps out the @/registry/default with the config from component.ts

This should also apply to the .stories.tsx files so if you use the @/registry/default alias for importing then the CLI process will fix it to your mylibrary/

ShaunEvening · 2023-09-29T13:15:22Z

@lloydrichards This looks great!!! 😁 is there anything that you need from me or the Storybook team to wrap up?

lloydrichards · 2023-09-29T15:09:42Z

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

lloydrichards · 2023-10-01T20:07:30Z

@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:

write storybook files for all ui components
integrate the stories into the CLI so they can be loaded when added
keep the PR up to date with the latest main and storybook versions

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? 🙏

kylegach · 2023-10-02T20:37:56Z

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

@lloydrichards —

This is most likely because Storybook, by default, filters out all props sourced from node_modules (otherwise, you end up with every prop from, say, @types/react, which includes all valid HTML attributes).

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

lloydrichards · 2024-04-30T14:33:10Z

apps/www/scripts/build-registry.mts

+ const resolveFiles = item.files.map((file) => {
+ switch (file.split(".")[1]) {
+ case "stories":
+ return `registry/${file}`
+ default:
+ return `registry/${style.name}/${file}`
+ }
+ })


My thinking is that a switch statement here will be more extendable in the future incase there are other supporting file types independent of the style (thinking maybe the hooks?)

lloydrichards · 2024-04-30T14:34:59Z

apps/www/scripts/build-registry.mts

+ switch (file.split(".")[1]) {
+ case "stories":
+ return {
+ name: basename(file),
+ content: readFileSync(
+ path.join(process.cwd(), "registry", file),
+ "utf8"
+ ),
+ }
+ default:
+ return {
+ name: basename(file),
+ content: readFileSync(
+ path.join(process.cwd(), "registry", style.name, file),
+ "utf8"
+ ),
+ }


Similar to the switch-statement in the buildRegistry function, there might be some room for refactoring here to make more DRY, but am not seeing a huge need with only two cases atm.

sheldonj · 2024-05-27T23:00:58Z

Any help required at
This point to get this across the line?

lloydrichards · 2024-05-28T06:56:43Z

I think whats needed at this point is for @shadcn to review and give any feedback on changes or additional requirements. The PR is still part of the next milestone so would assume that its still planned in 🤞

Jared-Dahlke · 2024-06-04T00:19:56Z

@lloydrichards I noticed in your storybook some of the components are corrupted:

I am having this same problem in my other implementation of this. it is not corrupted locally, only on the deployed instance.

lloydrichards · 2024-06-04T06:10:58Z

I noticed in your storybook some of the components are corrupted:

This would be a good question for @kylegach and the storybook team, I've ran into similar issues with using the children as an arg prop (guessing its something to do with stringifying JSX components).

The other day I ran into a bug where if i wanted to render a ReactNode inside braces, using a template literal creates:

const stringComponent: ReactNode = foo(); // <-- "hello"
...
return (  // <-- "([object Object])"
  <p>
    {'(${foo()})'}
  </p>
)

but using string concatenation rendered correctly:

return (  // <-- "(hello)"
  <p>
    {"("}
    {foo()}
    {")"}
  </p>
)

Jared-Dahlke · 2024-06-04T23:46:11Z

I noticed in your storybook some of the components are corrupted:

This would be a good question for @kylegach and the storybook team, I've ran into similar issues with using the children as an arg prop (guessing its something to do with stringifying JSX components).

The other day I ran into a bug where if i wanted to render a ReactNode inside braces, using a template literal creates:
const stringComponent: ReactNode = foo(); // <-- "hello"
...
return (  // <-- "([object Object])"
  <p>
    {'(${foo()})'}
  </p>
)
but using string concatenation rendered correctly:
return (  // <-- "(hello)"
  <p>
    {"("}
    {foo()}
    {")"}
  </p>
)

I figured out how to fix my implementation. I upgraded to latest v8, and also had to change all of my displayName to be raw text:

lloydrichards · 2024-07-30T06:03:22Z

Took me a little while to find time to add the stories for the New Chart components, but they're done now. Didn't want to go too complicated so tried to use the same dataset and config for as many chart types as was appropriate.

ruslanguns · 2024-07-30T18:32:42Z

@lloydrichards I noticed in your storybook some of the components are corrupted:

I am having this same problem in my other implementation of this. it is not corrupted locally, only on the deployed instance.

This usually happens if you are using a component that is wrapped with a memo, forwardRef, etc. and not using a displayName... Yae, I experienced the same issue in the past.

IndyVC · 2024-08-07T10:28:42Z

@shadcn any update when we can see this coming? :)

amirakbulut · 2024-08-14T13:41:16Z

@shadcn Looking forward to your approvement

panzacoder · 2024-08-23T00:02:27Z

#1561 (comment)

If anyone in 2024 is here looking for answers about pulling these components into a SB, this was the answer for me, with some revisions:

// in .storybook/main.ts config
typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      shouldExtractValuesFromUnion: true,
      shouldIncludePropTagMap: true,
      shouldRemoveUndefinedFromOptional: true,

      // 👇 Adjusted prop filter
      propFilter: (prop) =>
        prop.parent
          ? !/node_modules\/(?!@radix-ui)/.test(prop.parent.fileName)
          : true
    }
  },

lloydrichards · 2024-08-31T15:55:56Z

@shadcn I've refactored the registry changes I made previously to match the new 2.0 CLI (which has made it much easier to extend. 😘👌) mostly through extending the registry item type with registry:story which can be used to better select and parse the storybook files.

Have tested building the registry but not included the built files as it makes reviewing the PR quite overwhelming, but feel free to open the changes and test out the output yourself (and before committing the new output for testing I assume).

Am still motivated to get this PR merged so let me know if there is anything you need from my end or if you have some changes you would like me to tackle 🙏

0pilatos0

Great effort!

Would love to see this changed merged, as adding the storybooks by hand takes up some valuable time.

linkb15

support for more deep object in colors

colors: {
  primary: {
    someKey: {
      DEFAULT: "***",
      ...
      500: "***"
    }
  ...
  }
...
}

linkb15 · 2024-10-09T05:57:56Z

apps/www/.storybook/tokens/color.stories.tsx

+ .map(([name, colors]) => {
+ return {
+ name,
+ colors: typeof colors === "string" ? { [name]: colors } : colors,


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?

https:/hughsk/flat/blob/master/index.js

can use util function from "flat" to flatten the object.

Suggested change

colors: typeof colors === "string" ? { [name]: colors } : colors,

colors: typeof colors === "string" ? { [name]: colors } : flatten(colors),

lloydrichards force-pushed the feat/storybook-cli branch from f222e67 to 24727b8 Compare September 28, 2023 17:26

XavierGeerinck and others added 16 commits October 3, 2023 17:52

Storybook support

0d4e33c

Signed-off-by: Xavier Geerinck <[email protected]>

build(storybook): ⬆️ upgrade Storybook to v7.0.26

8b42574

refactor(storybook): ♻️ move stories out of /registry

6e1af2e

refactor(storybook): ⬆️ change to @storybook/nextjs

406a675

fix(storybook): 🐛 fix single story in mdx

a41c81e

There is still am issue with <Story /> in .mdx, will be easier to refactor into .stories.tsx

fix(storybook): 🐛 get tailwind and nextjs working with storybook

49708ff

refactor(storybook): ♻️ changed stories from MDX to CSF3

e9a86d5

ci: 💚 format prettier

8c120e4

ci: 💚 lock unist-builder to v3.0.0

3754b0b

chore: ♻️ nit fixes for dependancies and comments

fc966fc

feat(ui): ✨ added typography for NewYork style

e520dde

fix(storybook): 🐛 globally set font variable

1f16ddf

build: ⬆️ upgrade storybook to v7.0.27

205868a

ci: 💚 formatted preview.tsx

7b23b74

feat(storybook): ✨ added storybook files to registry and CLI

6f61b2c

fix: ✅ fix get-config.test.ts

22630e3

lloydrichards commented Apr 30, 2024

View reviewed changes

Merge branch 'main' into feat/storybook-cli

2a8f829

chore: remove update to registry.ts

5df58f1

lloydrichards and others added 3 commits July 28, 2024 23:31

Merge branch 'main' into feat/storybook-cli

9a53eed

chore: upgrade storybook to 8.2.6

50d7636

feat(storybook): ✨ add chart stories

2f27087

Merge branch 'main' into feat/storybook-cli

3ccdf16

lloydrichards and others added 6 commits August 24, 2024 11:15

Merge branch 'main' into feat/storybook-cli

085afc4

Merge branch 'main' into feat/storybook-cli

0a9b085

chore: rebuild lock

9d430c1

refactor: ♻️ extend registry with item type for stories

3f9c0ea

chore: ⬆️ upgrade storybook to v8.2.9

f0683e4

chore: 🚨 fix linting for stories

4d679ee

lloydrichards added 2 commits September 3, 2024 22:37

Merge branch 'main' into feat/storybook-cli

b096c9a

Merge branch 'main' into feat/storybook-cli

f3b6ac1

0pilatos0 approved these changes Oct 4, 2024

View reviewed changes

linkb15 suggested changes Oct 9, 2024

View reviewed changes

Merge branch 'main' into feat/storybook-cli

6af9889

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ✨ add storybook to cli #1561

feat: ✨ add storybook to cli #1561

lloydrichards commented Sep 19, 2023 •

edited

Loading

vercel bot commented Sep 19, 2023

csartor commented Sep 22, 2023

Jared-Dahlke commented Sep 27, 2023 •

edited

Loading

lloydrichards commented Sep 28, 2023 •

edited

Loading

Jared-Dahlke commented Sep 28, 2023

lloydrichards commented Sep 28, 2023 •

edited

Loading

Jared-Dahlke commented Sep 28, 2023

Jared-Dahlke commented Sep 28, 2023 •

edited

Loading

lloydrichards commented Sep 28, 2023

ShaunEvening commented Sep 29, 2023

lloydrichards commented Sep 29, 2023

lloydrichards commented Oct 1, 2023

kylegach commented Oct 2, 2023

lloydrichards Apr 30, 2024

lloydrichards Apr 30, 2024

sheldonj commented May 27, 2024

lloydrichards commented May 28, 2024

Jared-Dahlke commented Jun 4, 2024

lloydrichards commented Jun 4, 2024 •

edited

Loading

Jared-Dahlke commented Jun 4, 2024

lloydrichards commented Jul 30, 2024

ruslanguns commented Jul 30, 2024 •

edited

Loading

IndyVC commented Aug 7, 2024

amirakbulut commented Aug 14, 2024

panzacoder commented Aug 23, 2024 •

edited

Loading

lloydrichards commented Aug 31, 2024

0pilatos0 left a comment •

edited

Loading

linkb15 left a comment

linkb15 Oct 9, 2024

linkb15 Oct 9, 2024

linkb15 Oct 9, 2024

	colors: typeof colors === "string" ? { [name]: colors } : colors,
	colors: typeof colors === "string" ? { [name]: colors } : flatten(colors),

feat: ✨ add storybook to cli #1561

Are you sure you want to change the base?

feat: ✨ add storybook to cli #1561

Conversation

lloydrichards commented Sep 19, 2023 • edited Loading

Goals/Scope

Description

Component Stories

Comments

vercel bot commented Sep 19, 2023

csartor commented Sep 22, 2023

Jared-Dahlke commented Sep 27, 2023 • edited Loading

lloydrichards commented Sep 28, 2023 • edited Loading

Jared-Dahlke commented Sep 28, 2023

lloydrichards commented Sep 28, 2023 • edited Loading

Jared-Dahlke commented Sep 28, 2023

Jared-Dahlke commented Sep 28, 2023 • edited Loading

lloydrichards commented Sep 28, 2023

ShaunEvening commented Sep 29, 2023

lloydrichards commented Sep 29, 2023

lloydrichards commented Oct 1, 2023

kylegach commented Oct 2, 2023

lloydrichards Apr 30, 2024

Choose a reason for hiding this comment

lloydrichards Apr 30, 2024

Choose a reason for hiding this comment

sheldonj commented May 27, 2024

lloydrichards commented May 28, 2024

Jared-Dahlke commented Jun 4, 2024

lloydrichards commented Jun 4, 2024 • edited Loading

Jared-Dahlke commented Jun 4, 2024

lloydrichards commented Jul 30, 2024

ruslanguns commented Jul 30, 2024 • edited Loading

IndyVC commented Aug 7, 2024

amirakbulut commented Aug 14, 2024

panzacoder commented Aug 23, 2024 • edited Loading

lloydrichards commented Aug 31, 2024

0pilatos0 left a comment • edited Loading

Choose a reason for hiding this comment

linkb15 left a comment

Choose a reason for hiding this comment

linkb15 Oct 9, 2024

Choose a reason for hiding this comment

linkb15 Oct 9, 2024

Choose a reason for hiding this comment

linkb15 Oct 9, 2024

Choose a reason for hiding this comment

lloydrichards commented Sep 19, 2023 •

edited

Loading

Jared-Dahlke commented Sep 27, 2023 •

edited

Loading

lloydrichards commented Sep 28, 2023 •

edited

Loading

lloydrichards commented Sep 28, 2023 •

edited

Loading

Jared-Dahlke commented Sep 28, 2023 •

edited

Loading

lloydrichards commented Jun 4, 2024 •

edited

Loading

ruslanguns commented Jul 30, 2024 •

edited

Loading

panzacoder commented Aug 23, 2024 •

edited

Loading

0pilatos0 left a comment •

edited

Loading