feat(ui): add storybook | tg / rd | #28

.gitignore

@@ -11,3 +11,5 @@ dist
 .velite
 apps/docs/tsconfig.tsbuildinfo
 apps/docs/tsconfig.tsbuildinfo
+
+*storybook.log

packages/ui/.storybook/main.ts

@@ -0,0 +1,29 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

packages/ui/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/ui/package.json

@@ -11,9 +11,13 @@
     "generate:component": "turbo gen react-component",
     "build": "bunchee --tsconfig tsconfig.build.json",
     "gen:props": "bunx @react-docgen/cli --pretty --resolver find-all-exported-components -i **/*.stories.tsx  -o ../../apps/docs/src/lib/props.json src/components/ui/**/*.tsx",
-    "dev": "bunchee --watch --no-clean"
+    "dev": "bunchee --watch --no-clean",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@pixelshades/styles": "workspace:*",
+    "@pixelshades/utils": "workspace:*",
     "@radix-ui/react-slot": "^1.0.2",
     "lucide-react": "^0.376.0",
     "react-aria": "^3.32.1",
@@ -22,25 +26,33 @@
     "tailwind-merge": "2.3.0",
     "tailwind-variants": "0.2.1",
     "tailwindcss": "^3.4.3",
-    "tailwindcss-animate": "^1.0.7",
-    "@pixelshades/styles": "workspace:*",
-    "@pixelshades/utils": "workspace:*"
+    "tailwindcss-animate": "^1.0.7"
   },
   "peerDependencies": {
     "react": ">18.0.0",
     "react-dom": ">18.0.0"
   },
   "devDependencies": {
-    "react-docgen": "^7.0.3",
+    "@chromatic-com/storybook": "^1.3.3",
     "@pixelshades/typescript-config": "workspace:*",
+    "@storybook/addon-essentials": "^8.0.9",
+    "@storybook/addon-interactions": "^8.0.9",
+    "@storybook/addon-links": "^8.0.9",
+    "@storybook/addon-onboarding": "^8.0.9",
+    "@storybook/blocks": "^8.0.9",
+    "@storybook/react": "^8.0.9",
+    "@storybook/react-vite": "^8.0.9",
+    "@storybook/test": "^8.0.9",
     "@tailwindcss/typography": "^0.5.12",
     "@turbo/gen": "^1.13.2",
     "@types/node": "^20.12.7",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "bunchee": "^5.1.2",
     "react": "^18.3.1",
+    "react-docgen": "^7.0.3",
     "react-dom": "^18.3.1",
+    "storybook": "^8.0.9",
     "tailwindcss-react-aria-components": "1.1.1",
     "typescript": "^5.4.5"
   },
@@ -77,4 +89,4 @@
       }
     }
   }
-}
+}

packages/ui/src/components/ui/badge/badge.stories.tsx

@@ -3,22 +3,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Meta, StoryObj } from "@storybook/react"
-import { Inter } from "next/font/google"
-import Badge from "./badge"
-
-const inter = Inter({ subsets: ["latin"], variable: "--font-inter" })
+import { Badge } from "./badge"
 
 const meta: Meta<typeof Badge> = {
 	component: Badge,
 	title: "Components/UI/Badge",
 	tags: ["autodocs"],
 	decorators: (Story) => (
-		<div
-			className={`${
-				inter.variable
-				// biome-ignore lint/nursery/useSortedClasses: <explanation>
-			} font-sans relative w-full h-full dark`}
-		>
+		<div className={"dark relative h-full w-full font-sans"}>
 			<Story />
 		</div>
 	),

packages/ui/src/components/ui/button/button.stories.tsx

@@ -4,18 +4,15 @@
 
 import { cn } from "@pixelshades/utils/styles"
 import type { Meta, StoryObj } from "@storybook/react"
-import { Inter } from "next/font/google"
 import { FileTrigger } from "../file-trigger"
 import { Button } from "./button"
 
-const inter = Inter({ subsets: ["latin"], variable: "--font-inter" })
-
 const meta: Meta<typeof Button> = {
 	component: Button,
 	title: "Components/UI/Button",
 	tags: ["autodocs"],
 	decorators: (Story) => (
-		<div className={cn(inter.variable, "dark relative h-full w-full font-sans")}>
+		<div className={cn("dark relative h-full w-full font-sans")}>
 			<Story />
 		</div>
 	),

packages/ui/src/components/ui/calendar/calendar.stories.tsx

@@ -4,17 +4,14 @@
 
 import { cn } from "@pixelshades/utils/styles"
 import type { Meta, StoryObj } from "@storybook/react"
-import { Inter } from "next/font/google"
 import { Calendar } from "./calendar"
 
-const inter = Inter({ subsets: ["latin"], variable: "--font-inter" })
-
 const meta: Meta<typeof Calendar> = {
 	component: Calendar,
 	title: "Components/UI/Calendar",
 	tags: ["autodocs"],
 	decorators: (Story) => (
-		<div className={cn(inter.variable, "dark relative h-full w-full font-sans")}>
+		<div className={cn("dark relative h-full w-full font-sans")}>
 			<Story />
 		</div>
 	),

packages/ui/src/components/ui/heading/heading.stories.tsx

@@ -3,22 +3,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Meta, StoryObj } from "@storybook/react"
-import { Inter } from "next/font/google"
 import { Heading, HeadingLevel } from "./heading"
 
-const inter = Inter({ subsets: ["latin"], variable: "--font-inter" })
-
 const meta: Meta<typeof Heading> = {
 	component: Heading,
 	title: "Components/UI/Heading",
 	tags: ["autodocs"],
 	decorators: (Story) => (
-		<div
-			className={`${
-				inter.variable
-				// biome-ignore lint/nursery/useSortedClasses: <explanation>
-			} font-sans relative w-full h-full dark`}
-		>
+		<div className={"dark relative h-full w-full font-sans"}>
 			<HeadingLevel>
 				<Story />
 			</HeadingLevel>

packages/ui/src/components/ui/tooltip/tooltip.stories.tsx

@@ -2,20 +2,18 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { Button, Tooltip, TooltipContent, TooltipRoot } from "@pixelshades/ui/components"
 import { cn } from "@pixelshades/utils/styles"
 import type { Meta, StoryObj } from "@storybook/react"
 import { SaveIcon } from "lucide-react"
-import { Inter } from "next/font/google"
-
-const inter = Inter({ subsets: ["latin"], variable: "--font-inter" })
+import { Button } from "../button"
+import { Tooltip } from "./tooltip"
 
 const meta: Meta<typeof Tooltip> = {
 	component: Tooltip,
 	title: "Components/UI/Tooltip",
 	tags: ["autodocs"],
 	decorators: (Story) => (
-		<div className={cn(inter.variable, "dark relative h-full w-full font-sans")}>
+		<div className={cn("dark relative h-full w-full font-sans")}>
 			<Story />
 		</div>
 	),
@@ -29,12 +27,12 @@ export const Default: Story = {
 	args: {},
 	render: () => {
 		return (
-			<TooltipRoot>
+			<Tooltip.Root>
 				<Button variant="solid">
 					<SaveIcon />
 				</Button>
-				<TooltipContent>Save</TooltipContent>
-			</TooltipRoot>
+				<Tooltip.Content>Save</Tooltip.Content>
+			</Tooltip.Root>
 		)
 	},
 }
@@ -43,12 +41,12 @@ export const Custom: Story = {
 	args: {},
 	render: () => {
 		return (
-			<TooltipRoot>
+			<Tooltip.Root>
 				<Button variant="solid">
 					<SaveIcon />
 				</Button>
-				<TooltipContent>Save</TooltipContent>
-			</TooltipRoot>
+				<Tooltip.Content>Save</Tooltip.Content>
+			</Tooltip.Root>
 		)
 	},
 }
@@ -57,12 +55,12 @@ export const NoDelay: Story = {
 	args: {},
 	render: () => {
 		return (
-			<TooltipRoot delay={0}>
+			<Tooltip.Root delay={0}>
 				<Button variant="solid">
 					<SaveIcon />
 				</Button>
-				<TooltipContent>Save</TooltipContent>
-			</TooltipRoot>
+				<Tooltip.Content>Save</Tooltip.Content>
+			</Tooltip.Root>
 		)
 	},
 }