chore: add Collapsible component (#15961)

BrunoQuaresma · web-flow · commit 865969400b03 · 2024-12-26T16:03:28.000-03:00
This component is needed to complete the mobile menu for the [navbar refactoring task](#15617). You can check out the Figma design [here](https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=656-2354&t=jm6tERwCzB1TBeds-0).
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",
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 { Button } from "components/Button/Button";
+import { ChevronsUpDown } from "lucide-react";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "./Collapsible";
+
+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,14 @@
+/**
+ * Copied from shadc/ui on 12/26/2024
+ * @see {@link https://ui.shadcn.com/docs/components/collapsible}
+ */
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
