feat: add collapsible (#57)

Author: Cahllagerfeld

.changeset/mighty-bees-rush.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add collapsible component

package.json

@@ -85,6 +85,7 @@
 	},
 	"dependencies": {
 		"@radix-ui/react-avatar": "^1.0.4",
+		"@radix-ui/react-collapsible": "^1.0.3",
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
 		"@radix-ui/react-slot": "^1.0.2",
 		"@tanstack/react-table": "^8.15.3",

pnpm-lock.yaml

@@ -0,0 +1,42 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+import {
+	Collapsible,
+	CollapsibleHeader,
+	CollapsibleContent,
+	CollapsibleTrigger,
+	CollapsiblePanel
+} from "./index";
+import { StoryObj } from "@storybook/react";
+
+const meta = {
+	title: "Elements/Collapsible",
+	component: Collapsible,
+	argTypes: {},
+	parameters: {
+		layout: "centered"
+	},
+
+	tags: ["autodocs"]
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	render: () => (
+		<CollapsiblePanel>
+			<CollapsibleHeader>
+				<CollapsibleTrigger>Click me to toggle</CollapsibleTrigger>
+			</CollapsibleHeader>
+			<CollapsibleContent className="border-t border-theme-border-moderate px-5 py-3">
+				<ul>
+					<li>Item 1</li>
+					<li>Item 2</li>
+				</ul>
+			</CollapsibleContent>
+		</CollapsiblePanel>
+	)
+};

src/components/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,53 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { VariantProps, cva } from "class-variance-authority";
+import React, { ComponentPropsWithoutRef, ElementRef, HTMLAttributes, forwardRef } from "react";
+import { cn } from "../../utilities";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+const CollapsiblePanel = forwardRef<
+	ElementRef<typeof Collapsible>,
+	ComponentPropsWithoutRef<typeof Collapsible>
+>(({ className, ...props }, forwardedRef) => (
+	<Collapsible
+		className={cn("overflow-hidden rounded-md border border-theme-border-moderate", className)}
+		ref={forwardedRef}
+		{...props}
+	/>
+));
+
+CollapsiblePanel.displayName = "Collapsible Panel";
+
+const headerVairants = cva("px-5 py-3", {
+	variants: {
+		intent: {
+			primary: "bg-theme-surface-primary",
+			secondary: "bg-theme-surface-secondary"
+		}
+	},
+	defaultVariants: {
+		intent: "primary"
+	}
+});
+
+export interface CollapsibleHeaderProps
+	extends HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof headerVairants> {}
+
+const CollapsibleHeader = forwardRef<HTMLDivElement, CollapsibleHeaderProps>(
+	({ className, children, intent, ...props }, ref) => {
+		return (
+			<div ref={ref} className={cn(headerVairants({ intent }), className)} {...props}>
+				{children}
+			</div>
+		);
+	}
+);
+
+CollapsibleHeader.displayName = "Collapsible Header";
+
+export { Collapsible, CollapsibleContent, CollapsibleHeader, CollapsiblePanel, CollapsibleTrigger };

src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1 @@
+export * from "./Collapsible";

src/components/Collapsible/index.tsx

@@ -9,3 +9,4 @@ export * from "./Table";
 export * from "./Tag";
 export * from "./Badge";
 export * from "./Spinner";
+export * from "./Collapsible";