feat: Add Storybook support and Typography

[XavierGeerinck]

Overview

This PR introduces the following:

Storybook Support

Introduction

Storybook is a frontend workshop for building UI components and pages in isolation. Used by large corporations around the world such as Microsoft, Shopify, AirBnB, Monday and many more.

It provides the following advantages:

• Storybook allows for easy development and testing of individual UI components in isolation, making it easier to catch and fix bugs early in the development process.
• It provides a central place to store and organize all of the components in a project, making it easy for developers to find and reuse existing components.
• It provides a way to document and showcase the components in a project, making it easier for designers and other stakeholders to understand and use them.
• It allows for easy collaboration between developers and designers, as they can both access and test the components in the same environment.
• It can integrate with other tools like Jest and Enzyme for testing, and Webpack for building and bundling, making it a flexible and powerful tool for development teams.

Why Storybook

Beside the advantages listed before, the reason I am submitting Storybook is because it allows visibility to be improved as well. As an amazing repository, this can be published on the Storybook websites for others to discover and use.

Preview

Typography Abstraction

To adhere to corporate theming, common HTML elements are often override. Since this repository provides a starting point for Typography, I decided to integrate Typography as an abstraction. Users can simply utilize the capitalized elements and add their own classes or stylings as they would do so otherwise.

Example:

import { UL, LI } from "@/components/ui/typography";

<UL className="my-6 ml-6 list-disc [&>li]:mt-2">
    <LI>1st level of puns: 5 gold coins</LI>
    <LI>2nd level of jokes: 10 gold coins</LI>
    <LI>3rd level of one-liners : 20 gold coins</LI>
</UL>

Note

This PR also added a shameless "Thank You" message for contributing back. Open for opinions on this one.

Checklist

• [x] Updated Documentation

GitHub

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

[vercel[bot]]

Someone is attempting to deploy a commit to a Personal Account owned by @shadcn on Vercel.

@shadcn first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	❌ Failed (Inspect)			Jul 18, 2023 7:04am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
next-template	⬜️ Ignored (Inspect)	Visit Preview		Jul 18, 2023 7:04am

[XavierGeerinck]

@shadcn anything that should change for this to get approved?

[shadcn]

@XavierGeerinck I'll check it out.

I've only used Storybook on one or two projects so wondering how much maintenance work this is going to require moving forward.

[XavierGeerinck]

Perfect! Looking forward to it :)

Regarding to the maintenance, I think it in the end is always going to be minimal seeing that it just requires a story file to be included for the different components which is the documentation of the component itself.

Personally, I would even argue that Storybook could become main for this project as its community adopted in the way how large organization manage and document their components. The documentation must be created anyways, and storybook standardized that (and offers test suites in more advanced functionality as well)

As an example, including the Microsoft: https://master--628d031b55e942004ac95df1.chromatic.com/ and Shopify: https://main--5d559397bae39100201eedc1.chromatic.com/ components

[pedroapfilho]

It would be cool to add the addon: @storybook/addon-a11y

[its-monotype]

Maybe https://github.com/tajo/ladle instead?

[pedroapfilho]

To be honest, I didn't understand why you offered ladle, but then I saw that a11y has the name Testing on their description, but I only use it to see if the components are accessible or not, like this:

https://github.com/storybookjs/storybook/blob/main/addons/a11y/docs/screenshot.png

[shadcn]

Hi everyone. Thanks for your work on this.

This is looking good. I'm open to merging it.

However we might need help with maintenance going forward.

Anyone here willing to help (from time to time) on Storybook-related issues?

[pedroapfilho]

I can help with it, as I want to also update the version of storybook here, and I have to maintain it on other codebases too

[svict4]

Ah cool I'm glad I stopped and checked, as I was in the middle of generating these myself. Would love to get this merged 🙏 Upkeep should be fairly minimal

[JiajiaHuang]

I hope it can be merged as soon as possible, looking forward to it.

[jlorezz]

Hi everyone. Thanks for your work on this.

This is looking good. I'm open to merging it.

However we might need help with maintenance going forward.

Anyone here willing to help (from time to time) on Storybook-related issues?

I would be open to helping with storybook as well. I used it in a couple of projects. Really great choice of adding this.

[DarlonHenrique]

i would love this merge, im trying to do this integration between storybook and shadcn from scratch right now, please @shadcn 🙏

[JSON-FS]

I also approve of the Storybook support. However, the code in this PR is now deprecated. Storybook has deprecated defining stories in MDX files

[MildTomato]

Just wanted to say I came here hoping to use these for our own storybook. Think it's a good idea to provide stories somehow. makes component development easier to pick up for us.

[winkerVSbecks]

Hi everyone. Thanks for your work on this.

This is looking good. I'm open to merging it.

However we might need help with maintenance going forward.

Anyone here willing to help (from time to time) on Storybook-related issues?

@shadcn 👋🏽 I'm part of the Storybook DX team. Happy to help out with any Storybook related issues.

[winkerVSbecks]

@XavierGeerinck if you're okay, I'm happy to upgrade to 7.0, convert stories into tsx and enable autodocs

[XavierGeerinck]

This would definitely be ok!!

[dan5py]

@winkerVSbecks @Integrayshaun Your help is really appreciated.

[ShaunEvening]

You're very welcome, @dan5py 🙇 We're happy to help however we can

[jameskbecker]

Am definitely down to help maintain this!

Storybook definitely provides a much better developer experience as the number of components starts to scale.

However, it usually takes a bit of time to setup so it's usually only worth it on big projects. Nevertheless, I'm thinking it would be really powerful if the shadcn UI cli script also has the option to set this up for you and all you need to do is implement the stories including stuff like tests for your feature components.

Note: I've only just glanced over the current PR not sure what the current state is in terms of the implementation but assuming it's just automatically added when setup project/add shadcn components.

[ShaunEvening]

@jameskbecker thats a wonderful idea!

We have a lot of templates for scaffolding storybook and I’ve written a ton of codemods lately for it too if you want a hand from our end.

[lloydrichards]

@XavierGeerinck Love the PR and would definitely support with maintenance if possible 👍

Question though, why are you making the stories in Mdx and not using CSF3? I've actually ran into issues where using other .mdx parsers (like contentlayer) which pick up the *.mdx files and crash the build when not able to parse the <Meta /> or <Story />`.

Would there maybe be an option for making the stories .stories.tsx instead?

[XavierGeerinck]

Hi all! Thanks for the amazing feedback. I'd love to update this to the latest version of Storybook, but I am currently low on bandwidth to do so.

[pedroapfilho]

@XavierGeerinck I'll create a PR to do so, I already did something similar.

[lloydrichards]

@XavierGeerinck I've just forked and updated your forked version with the needed changes to get it working with both Storybook v7.0.26 and Shadcn/ui 2.0.3 But i can't push or create a PR to your repo without being a "contributor".

There are 175 commits to be merged in since you forked so while i would very much like to keep your initial commits, i'm also thinking it might be more worth a clean fork.

Check your PR #1

[XavierGeerinck]

Hi @lloydrichards ! Thank you so much for this. I’ve approved the PR. Is there anything else expected from my side or is the approval ok?

[lloydrichards]

Hi @lloydrichards ! Thank you so much for this. I’ve approved the PR. Is there anything else expected from my side or is the approval ok?

Thanks so much! There is still some refactoring that needs to be done in order to get either @storybook/addon-docs working or to convert over the stories.mdx to use <Story /> which i can have a go at. There are also some odd behaviour with yarn and next 13.4.8 and contentlayer 0.3.4 which might be caused by my switch from @storybook/react-vite to @storybook/nextjs that maybe @Integrayshaun has some ideas and suggestions on?

Something that i'm still not sure on is how you imagine the stories being included with the CLI or just part of the app/www repo as an example.

I sort of imagine something along the lines of installing a component along with the .stories.tsx file via something like:

npx shadcn-ui@latest add avatar --storybook

or a flag in the new component.json file 🤷 But this might be a better questions for @shadcn 🙏

For now i'll made the changes and submit them as another PR to your repo as it keeps things nice and concurrent in this PR 👍

[ShaunEvening]

@lloydrichards We have a codemod that will convert your *.stories.mdx files into Component Story Format (CSF) files. You can find it in our Storybook 7 migration guide

As for the odd behaviour after moving to @storybook/nextjs, can you tell me more about what's happening?