feat: Add Storybook support and Typography

README.md

@@ -16,7 +16,21 @@ Beautifully designed components built with Radix UI and Tailwind CSS.
 - [x] ~Navigation Menu~
 - [x] ~Figma~
 
-## Get Started
+## Storybook
+
+Storybook is supported so that you can easily select the correct component and view its properties
+
+![Storybook Preview](apps/www/public/demo/storybook.png)
+
+To open Storybook, run the following:
+
+```bash
+cd apps/www
+npm i
+npm run storybook
+```
+
+## Use in your own project
 
 Starting a new project? Check out the Next.js template.
 
@@ -32,6 +46,7 @@ npx create-next-app -e https://github.com/shadcn/next-template
 - Icons from [Lucide](https://lucide.dev)
 - Dark mode with `next-themes`
 - Automatic import sorting with `@ianvs/prettier-plugin-sort-imports`
+- Storybook support (Thanks [@XavierGeerinck](https://twitter.com/XavierGeerinck))
 
 ### Tailwind CSS Features
 

apps/www/.storybook/main.js

@@ -0,0 +1,45 @@
+const path = require("path")
+const { mergeConfig } = require("vite")
+module.exports = {
+  features: {
+    storyStoreV7: true,
+  },
+  stories: ["../components/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    /**
+     * Enable TailwindCSS JIT mode
+     * NOTE: fix Storybook issue with PostCSS@8
+     * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
+     */
+    {
+      name: "@storybook/addon-postcss",
+      options: {
+        // Note: Settings are picked up from postcss.config.cjs
+        postcssLoaderOptions: {
+          implementation: require("postcss"),
+        },
+      },
+    },
+  ],
+
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  viteFinal: async (config, { configType }) => {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          "@": path.resolve(__dirname, "../"),
+          "next/image": path.resolve(__dirname, "./stubs/NextImage.tsx"),
+        },
+      },
+    })
+  },
+  docs: {
+    autodocs: true,
+  },
+}

apps/www/.storybook/preview-head.html

@@ -0,0 +1,14 @@
+<script>
+  window.global = window;
+</script>
+
+<style>
+  @font-face {
+    font-family: 'Inter';
+    src: url('./.storybook/fonts/Inter.ttf') format('truetype');
+  }
+
+  * {
+    font-family: "Inter", sans-serif !important;
+  }
+</style>

apps/www/.storybook/preview.tsx

@@ -0,0 +1,13 @@
+// import "tailwindcss/tailwind.css";
+import "../styles/mdx.css"
+import "../styles/globals.css"
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

apps/www/.storybook/stubs/NextImage.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+// import Image from "next/image";
+// const NextImage = (props) => <Image unoptimized {...props} />;
+const NextImage = (props) => <img {...props} />;
+export default NextImage;

apps/www/components/ui/accordion.stories.mdx

@@ -0,0 +1,34 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+<Meta title="Accordion" component={Accordion} />
+
+# Accordion
+
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It adheres to the WAI-ARIA design pattern.
+    </AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>Is it styled?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It comes with default styles that matches the other components'
+      aesthetic.
+    </AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-3">
+    <AccordionTrigger>Is it animated?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It's animated by default, but you can disable it if you prefer.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>

apps/www/components/ui/alert-dialog.stories.mdx

@@ -0,0 +1,38 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+import { Button } from "@/components/ui/button";
+
+<Meta title="Alert Dialog" component={AlertDialog} />
+
+# Alert Dialog
+
+<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Button variant="outline">Open</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Are you sure absolutely sure?</AlertDialogTitle>
+      <AlertDialogDescription>
+        This action cannot be undone. This will permanently delete your account
+        and remove your data from our servers.
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Continue</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>

apps/www/components/ui/aspect-ratio.stories.mdx

@@ -0,0 +1,18 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import Image from "next/image";
+
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+
+<Meta title="Aspect Ratio" component={AspectRatio} />
+
+# Aspect Ratio
+
+<AspectRatio ratio={16 / 9} className="bg-slate-50 dark:bg-slate-800">
+  <Image
+    src="https://images.unsplash.com/photo-1576075796033-848c2a5f3696?w=800&dpr=2&q=80"
+    alt="Photo by Alvaro Pinot"
+    fill
+    className="rounded-md object-cover"
+  />
+</AspectRatio>

apps/www/components/ui/avatar.stories.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+<Meta title="Avatar" component={Avatar} />
+
+# Avatar
+
+<Avatar>
+  <AvatarImage src="https://github.com/shadcn.png" />
+  <AvatarFallback>CN</AvatarFallback>
+</Avatar>

apps/www/components/ui/button.stories.mdx

@@ -0,0 +1,41 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import { Button } from "@/components/ui/button";
+import { Mail, Loader2 } from "lucide-react";
+
+<Meta title="Button" component={Button} />
+
+# Button
+
+<Story name="Default">
+  <Button>Button</Button>
+</Story>
+
+<Story name="Outline">
+  <Button variant="outline">Outline</Button>
+</Story>
+
+<Story name="Subtle">
+  <Button variant="subtle">Subtle</Button>
+</Story>
+
+<Story name="Ghost">
+  <Button variant="ghost">Ghost</Button>
+</Story>
+
+<Story name="Link">
+  <Button variant="link">Link</Button>
+</Story>
+
+<Story name="With Icon">
+  <Button>
+    <Mail className="mr-2 h-4 w-4" /> Login with Email
+  </Button>
+</Story>
+
+<Story name="Loading">
+  <Button disabled>
+    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+    Please wait
+  </Button>
+</Story>

apps/www/components/ui/checkbox.stories.mdx

@@ -0,0 +1,36 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import { Checkbox } from "@/components/ui/checkbox";
+
+<Meta title="Checkbox" component={Checkbox} />
+
+# Checkbox
+
+<Story name="With text">
+  <div className="items-top flex space-x-2">
+    <Checkbox id="terms1" />
+    <div className="grid gap-1.5 leading-none">
+      <label
+        htmlFor="terms1"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+      <p className="text-sm text-slate-500 dark:text-slate-400">
+        You agree to our Terms of Service and Privacy Policy.
+      </p>
+    </div>
+  </div>
+</Story>
+
+<Story name="Disabled">
+  <div className="flex items-center space-x-2">
+    <Checkbox id="terms2" disabled />
+    <label
+      htmlFor="terms2"
+      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    >
+      Accept terms and conditions
+    </label>
+  </div>
+</Story>

apps/www/components/ui/collapsible.stories.mdx

@@ -0,0 +1,75 @@
+import { Meta, Story } from "@storybook/addon-docs"
+import { ChevronsUpDown, Plus, X } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+
+<Meta title="Collapsible" component={Collapsible} />
+
+# Collapsible
+
+<Story name="Closed">
+  <Collapsible
+    open={false}
+    onOpenChange={() => {}}
+    className="w-[350px] space-y-2"
+  >
+    <div className="flex items-center justify-between space-x-4 px-4">
+      <h4 className="text-sm font-semibold">
+        @peduarte starred 3 repositories
+      </h4>
+      <CollapsibleTrigger asChild>
+        <Button variant="ghost" size="sm" className="w-9 p-0">
+          <ChevronsUpDown className="h-4 w-4" />
+          <span className="sr-only">Toggle</span>
+        </Button>
+      </CollapsibleTrigger>
+    </div>
+    <div className="rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700">
+      @radix-ui/primitives
+    </div>
+    <CollapsibleContent className="space-y-2">
+      <div className="rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700">
+        @radix-ui/colors
+      </div>
+      <div className="rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700">
+        @stitches/react
+      </div>
+    </CollapsibleContent>
+  </Collapsible>
+</Story>
+
+<Story name="Opened">
+  <Collapsible
+    open={true}
+    onOpenChange={() => {}}
+    className="w-[350px] space-y-2"
+  >
+    <div className="flex items-center justify-between space-x-4 px-4">
+      <h4 className="text-sm font-semibold">
+        @peduarte starred 3 repositories
+      </h4>
+      <CollapsibleTrigger asChild>
+        <Button variant="ghost" size="sm" className="w-9 p-0">
+          <ChevronsUpDown className="h-4 w-4" />
+          <span className="sr-only">Toggle</span>
+        </Button>
+      </CollapsibleTrigger>
+    </div>
+    <div className="rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700">
+      @radix-ui/primitives
+    </div>
+    <CollapsibleContent className="space-y-2">
+      <div className="rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700">
+        @radix-ui/colors
+      </div>
+      <div className="rounded-md border border-slate-200 px-4 py-3 font-mono text-sm dark:border-slate-700">
+        @stitches/react
+      </div>
+    </CollapsibleContent>
+  </Collapsible>
+</Story>