Added Accordion component (with styles)

Author: matt-aitken

apps/webapp/app/components/primitives/Accordion.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "~/utils/cn";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("group rounded border border-grid-bright  transition-colors", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between px-3 py-2 text-sm text-text-bright transition-all group-hover:bg-grid-bright [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden border-t border-grid-bright px-3 text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("py-3", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

apps/webapp/package.json

@@ -52,6 +52,7 @@
     "@heroicons/react": "^2.0.12",
     "@internal/redis": "workspace:*",
     "@internal/run-engine": "workspace:*",
+    "@internal/tracing": "workspace:*",
     "@internal/zod-worker": "workspace:*",
     "@internationalized/date": "^3.5.1",
     "@lezer/highlight": "^1.1.6",
@@ -71,6 +72,7 @@
     "@opentelemetry/semantic-conventions": "1.25.1",
     "@popperjs/core": "^2.11.8",
     "@prisma/instrumentation": "^5.11.0",
+    "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-label": "^2.0.1",
@@ -105,7 +107,6 @@
     "@trigger.dev/platform": "1.0.15",
     "@trigger.dev/redis-worker": "workspace:*",
     "@trigger.dev/sdk": "workspace:*",
-    "@internal/tracing": "workspace:*",
     "@types/pg": "8.6.6",
     "@uiw/react-codemirror": "^4.19.5",
     "@unkey/cache": "^1.5.0",
@@ -146,8 +147,8 @@
     "non.geist": "^1.0.2",
     "ohash": "^1.1.3",
     "openai": "^4.33.1",
-    "parse-duration": "^2.1.0",
     "p-limit": "^6.2.0",
+    "parse-duration": "^2.1.0",
     "posthog-js": "^1.93.3",
     "posthog-node": "4.17.1",
     "prism-react-renderer": "^2.3.1",
@@ -194,9 +195,9 @@
     "zod-validation-error": "^1.5.0"
   },
   "devDependencies": {
-    "@internal/testcontainers": "workspace:*",
-    "@internal/replication": "workspace:*",
     "@internal/clickhouse": "workspace:*",
+    "@internal/replication": "workspace:*",
+    "@internal/testcontainers": "workspace:*",
     "@remix-run/dev": "2.1.0",
     "@remix-run/eslint-config": "2.1.0",
     "@remix-run/testing": "^2.1.0",