feat: Add Storybook support and Typography #11

XavierGeerinck · 2023-01-25T10:00:46Z

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

Updated Documentation

GitHub

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

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

vercel · 2023-01-25T10:00:49Z

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

@shadcn first needs to authorize it.

vercel · 2023-01-27T15:40:55Z

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 · 2023-02-03T09:51:17Z

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

shadcn · 2023-02-03T13:00:01Z

@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 · 2023-02-03T13:03:58Z

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 · 2023-02-13T13:18:22Z

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

its-monotype · 2023-02-13T13:34:48Z

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

pedroapfilho · 2023-02-14T16:42:59Z

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 · 2023-02-15T06:08:42Z

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 · 2023-02-15T10:16:48Z

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 · 2023-03-23T06:45:11Z

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 · 2023-03-23T09:13:11Z

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

jlorezz · 2023-04-14T14:27:20Z

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.

jlorezz · 2023-04-14T14:29:35Z

apps/www/package.json

@@ -70,11 +93,13 @@
    "remark-code-import": "^1.1.1",
    "remark-gfm": "^3.0.1",
    "shiki": "^0.12.1",
-    "tailwindcss": "^3.1.7",
-    "typescript": "^4.5.3",
+    "storybook": "^7.0.0-beta.33",


Suggested change

"storybook": "^7.0.0-beta.33",

"storybook": "^7.0.4",

storybook v.7 is now out of beta. https://storybook.js.org/blog/storybook-7-0/

DarlonHenrique · 2023-06-12T17:18:41Z

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

JSON-FS · 2023-06-13T08:54:35Z

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 · 2023-06-23T20:09:50Z

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 · 2023-06-28T15:22:30Z

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 · 2023-06-28T15:28:35Z

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

lloydrichards · 2023-07-16T21:23:03Z

@lloydrichards is there an easy way to utilize the storybook content for a project before it gets fully merged/integrated?

I think the easiest way would be to just copy and paste the stories you need from the Files Change in the PR here and change the import {} from "@/registry/default/ui/..." to wherever you have your components. If you want to download them all at once, then it might be faster to fork the repo and just open the PR#11 branch 👍

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

docs: fix readme

Lythenas · 2023-08-01T19:52:38Z

apps/www/.storybook/main.ts

+import type { StorybookConfig } from "@storybook/nextjs"
+
+const config: StorybookConfig = {
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],


Suggested change

stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],

stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)", "../registry/stories/**/*.stories.@(js|jsx|ts|tsx)"],

I had to add this to get the components to show up in the storybook.

leah-potato · 2023-08-03T06:28:06Z

Another +1 from me. Storybook would allow me to programmatically sync our design system to Figma.

ShaunEvening · 2023-08-29T13:29:39Z

Hey friends 👋 @XavierGeerinck @shadcn

Just your friendly neighbourhood Storybook maintainer here looking to see if there's anything I can do to lend a hand on this effort 🧑‍🔧

pedroapfilho · 2023-08-29T13:46:29Z

@integrayshaun I'm pretty sure, at this point, that you can fork this branch and create a PR for main.

lloydrichards · 2023-08-29T14:29:02Z

I would love some more movement on this or just remake it and hope it gets noticed again... i guess being #11 out of 1379 PR's has some visibility issues.

I've also created several more stories for the missing components in other projects recently so if things start moving then i can add those to this or the new PR ❤️

ShaunEvening · 2023-09-07T01:02:20Z

@pedroapfilho @lloydrichards

I'm more than happy to put together a new up-to-date PR based on the great work done here but I don't want to go over @XavierGeerinck if they still want to finish this PR up :)

csartor · 2023-09-08T05:29:32Z

Just wanted to note that I'm very, VERY much looking forward to this, as we are integrating this with a modern workflow for the updated version of our product.

react/next
shadcn
tailwind UI
figma -> tokens studio -> supernova (DSM/token exporters)
storybook integration as source of truth for components (which also integrates with supernova/figma)

Only one piece of the puzzle missing... Can't wait!

alemesa · 2023-09-12T17:30:38Z

👍 looking forward to this too, my case is similar to @csartor

nx monorepo with multiple react/next repos
zustand
figma design system + supernova
global components using tailwind + shadcn-ui + storybook

Jared-Dahlke · 2023-09-18T14:29:17Z

i too will find great joy if i can opt in to auto-creating stories with the cli

lloydrichards · 2023-09-19T20:59:26Z

I've forked this PR and removed the typography component to try and better scope the PR and get shadcn's attention and momentum into seeing whats needed to get this implemented. I'll try play a more active role in maintaining and adding any additional commits from others 🤞

csartor · 2023-09-20T14:38:41Z

I've forked this PR and removed the typography component to try and better scope the PR and get shadcn's attention and momentum into seeing whats needed to get this implemented. I'll try play a more active role in maintaining and adding any additional commits from others 🤞

You rock!!

d-ivashchuk · 2023-10-19T08:20:04Z

I have been using shadcn-ui quite intensively lately and just wanted to offer free lost-pixel.com visual regression testing runs on our platform if this gets merged. So, answering the question about maintenance, I would be happy to help with the maintenance of storybook issues & and visual regression tests(that would come for free with the storybook) maintenance as well.

Excited about this PR 🙌🏼

ruymon · 2023-10-23T11:41:28Z

apps/www/registry/stories/colors.stories.mdx

+    subtitle="Default background color of <body />...etc"
+    colors={{
+      background: "hsl(var(--background))",
+      oreground: "hsl(var(--foreground))",


Small mistake

Thanks, I updated this in the color.stories.mdx for the #1561 👍

aleczratiu · 2023-10-23T12:15:56Z

Any updates here if this will be merged soon?

lloydrichards · 2023-10-23T14:12:20Z

Any updates here if this will be merged soon?

The forked version of this (#1561) has been added to the roadmap under the next milestone so Im hoping to hear an update soon 🥳

bunsyy · 2023-11-30T07:56:06Z

apps/www/stories/colors.stories.mdx

+    subtitle="Default background color of <body />...etc"
+    colors={{
+      background: "hsl(var(--background))",
+      oreground: "hsl(var(--foreground))",


You have a typo here.

Thanks, I updated this in the color.stories.mdx for the #1561 👍

🙏

zeahoo · 2023-12-05T06:41:23Z

Hello there, Is there any plan to merge this cool feature?

0xRapid · 2023-12-30T01:33:02Z

Will this be merged anytime soon? :)

ShaunEvening · 2024-01-02T13:46:31Z

@0xRapid the work is now actively happening on #1561.

@shadcn maybe we should close this in favour of the other PR

sudarshan-mane · 2024-03-06T09:24:40Z

Any update on this?

ruymon · 2024-03-06T11:18:32Z

Any update on this?

Hey, @sudarshan-mane
It was moved over to #1561

sohamnandi77 · 2024-03-28T20:47:26Z

@XavierGeerinck Storybook controls are not being auto generated in this PR, can you please look into it ?

simon-v-swyftx · 2024-04-08T01:26:16Z

@sohamnandi77 look at #1561 instead

Changes made - update main and sidebar layouts - solve overflow issues in mobile sidebar menu - extract repetitive codes into a reusable component - hide unnecessary overflow

Storybook support

c9231b6

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

vercel bot had a problem deploying to Preview January 27, 2023 15:41 Failure

shadcn added enhancement New feature or request area: www labels Jan 27, 2023

Merge branch 'main' into main

0dbdb2d

vercel bot had a problem deploying to Preview – next-template February 3, 2023 09:51 Failure

vercel bot had a problem deploying to Preview – ui February 3, 2023 13:42 Failure

Merge branch 'main' into main

3b57205

vercel bot had a problem deploying to Preview – next-template February 7, 2023 07:49 Failure

vercel bot had a problem deploying to Preview – ui February 15, 2023 07:31 Failure

jlorezz reviewed Apr 14, 2023

View reviewed changes

nilaq mentioned this pull request May 16, 2023

Adding a reusable typography component #363

Open

XavierGeerinck added 2 commits July 18, 2023 09:03

Merge pull request #5 from lloydrichards/feat/storybook-cli

3917370

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

Merge pull request #4 from lloydrichards/doc/fix_docs

94ee191

docs: fix readme

Lythenas reviewed Aug 1, 2023

View reviewed changes

lloydrichards mentioned this pull request Sep 19, 2023

feat: ✨ add storybook to cli #1561

Open

1 task

ruymon reviewed Oct 23, 2023

View reviewed changes

bunsyy reviewed Nov 30, 2023

View reviewed changes

ivasilov mentioned this pull request Dec 26, 2023

fix: Remove datatable story supabase/supabase#20019

Merged

Bastiendsp approved these changes Nov 1, 2024

View reviewed changes

	stories: ["../stories/*/.mdx", "../stories/*/.stories.@(js\|jsx\|ts\|tsx)"],
	stories: ["../stories/*/.mdx", "../stories/*/.stories.@(js\|jsx\|ts\|tsx)", "../registry/stories/*/.stories.@(js\|jsx\|ts\|tsx)"],

feat: Add Storybook support and Typography #11

Are you sure you want to change the base?

feat: Add Storybook support and Typography #11

Conversation

XavierGeerinck commented Jan 25, 2023

Overview

Storybook Support

Introduction

Why Storybook

Preview

Typography Abstraction

Note

Checklist

GitHub

vercel bot commented Jan 25, 2023

vercel bot commented Jan 27, 2023 • edited Loading

XavierGeerinck commented Feb 3, 2023

shadcn commented Feb 3, 2023

XavierGeerinck commented Feb 3, 2023 • edited Loading

pedroapfilho commented Feb 13, 2023

its-monotype commented Feb 13, 2023

pedroapfilho commented Feb 14, 2023

shadcn commented Feb 15, 2023

pedroapfilho commented Feb 15, 2023

svict4 commented Mar 23, 2023

JiajiaHuang commented Mar 23, 2023

jlorezz commented Apr 14, 2023

jlorezz Apr 14, 2023 • edited Loading

Choose a reason for hiding this comment

DarlonHenrique commented Jun 12, 2023

JSON-FS commented Jun 13, 2023

MildTomato commented Jun 23, 2023

winkerVSbecks commented Jun 28, 2023

winkerVSbecks commented Jun 28, 2023

lloydrichards commented Jul 16, 2023 • edited Loading

Lythenas Aug 1, 2023

Choose a reason for hiding this comment

leah-potato commented Aug 3, 2023

ShaunEvening commented Aug 29, 2023

pedroapfilho commented Aug 29, 2023

lloydrichards commented Aug 29, 2023

ShaunEvening commented Sep 7, 2023

csartor commented Sep 8, 2023

alemesa commented Sep 12, 2023 • edited Loading

Jared-Dahlke commented Sep 18, 2023

lloydrichards commented Sep 19, 2023

csartor commented Sep 20, 2023

d-ivashchuk commented Oct 19, 2023 • edited Loading

ruymon Oct 23, 2023

Choose a reason for hiding this comment

lloydrichards Nov 29, 2023

Choose a reason for hiding this comment

aleczratiu commented Oct 23, 2023

lloydrichards commented Oct 23, 2023

bunsyy Nov 30, 2023

Choose a reason for hiding this comment

lloydrichards Nov 30, 2023 • edited Loading

Choose a reason for hiding this comment

zeahoo commented Dec 5, 2023

0xRapid commented Dec 30, 2023

ShaunEvening commented Jan 2, 2024

sudarshan-mane commented Mar 6, 2024

ruymon commented Mar 6, 2024 • edited Loading

sohamnandi77 commented Mar 28, 2024

simon-v-swyftx commented Apr 8, 2024

vercel bot commented Jan 27, 2023 •

edited

Loading

XavierGeerinck commented Feb 3, 2023 •

edited

Loading

jlorezz Apr 14, 2023 •

edited

Loading

lloydrichards commented Jul 16, 2023 •

edited

Loading

alemesa commented Sep 12, 2023 •

edited

Loading

d-ivashchuk commented Oct 19, 2023 •

edited

Loading

lloydrichards Nov 30, 2023 •

edited

Loading

ruymon commented Mar 6, 2024 •

edited

Loading