chore: add Collapsible component

BrunoQuaresma · BrunoQuaresma · commit f1e3ba3095be · 2024-12-26T17:52:03.000Z
diff --git a/site/package.json b/site/package.json
@@ -51,6 +51,7 @@
 		"@mui/utils": "5.16.6",
 		"@mui/x-tree-view": "7.18.0",
 		"@radix-ui/react-avatar": "1.1.2",
+		"@radix-ui/react-collapsible": "1.1.2",
 		"@radix-ui/react-dialog": "1.1.2",
 		"@radix-ui/react-dropdown-menu": "2.1.4",
 		"@radix-ui/react-label": "2.1.0",
@@ -185,7 +186,11 @@
 		"vite-plugin-checker": "0.8.0",
 		"vite-plugin-turbosnap": "1.0.3"
 	},
-	"browserslist": ["chrome 110", "firefox 111", "safari 16.0"],
+	"browserslist": [
+		"chrome 110",
+		"firefox 111",
+		"safari 16.0"
+	],
 	"resolutions": {
 		"optionator": "0.9.3",
 		"semver": "7.6.2"
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/components/Collapsible/Collapsible.stories.tsx b/site/src/components/Collapsible/Collapsible.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "./Collapsible";
+import { ChevronsUpDown } from "lucide-react";
+import { Button } from "components/Button/Button";
+
+const meta: Meta<typeof Collapsible> = {
+	title: "components/Collapsible",
+	component: Collapsible,
+	args: {
+		className: "w-[350px] space-y-2",
+		children: (
+			<>
+				<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 size="sm">
+							<ChevronsUpDown className="h-4 w-4" />
+							<span className="sr-only">Toggle</span>
+						</Button>
+					</CollapsibleTrigger>
+				</div>
+				<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+					@radix-ui/primitives
+				</div>
+				<CollapsibleContent className="space-y-2">
+					<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+						@radix-ui/colors
+					</div>
+					<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+						@stitches/react
+					</div>
+				</CollapsibleContent>
+			</>
+		),
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof Collapsible>;
+
+export const Close: Story = {};
+
+export const Open: Story = {
+	args: {
+		open: true,
+	},
+};
diff --git a/site/src/components/Collapsible/Collapsible.tsx b/site/src/components/Collapsible/Collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
