Skip to content

Commit e9d3ec4

Browse files
Noah-HypernovaNoah-Hypernova
authored
enhance(ui): registering shadcn accordion comp for plasmic use (#5491)
* enhance(ui): registering shadcn accordion comp for plasmic use * fix(ui): changing usage of default value to default value hint
1 parent 5b1b0f9 commit e9d3ec4

File tree

4 files changed

+198
-1
lines changed

4 files changed

+198
-1
lines changed

‎apps/frontend/components/ui/accordion.tsx‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
5+
import { ChevronDown } from "lucide-react";
6+
import { CodeComponentMeta } from "@plasmicapp/loader-nextjs";
7+
8+
import { cn } from "@/lib/utils";
9+
10+
const Accordion = AccordionPrimitive.Root;
11+
12+
const AccordionItem = React.forwardRef<
13+
React.ElementRef<typeof AccordionPrimitive.Item>,
14+
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
15+
>(({ className, ...props }, ref) => (
16+
<AccordionPrimitive.Item
17+
ref={ref}
18+
className={cn("border-b", className)}
19+
{...props}
20+
/>
21+
));
22+
AccordionItem.displayName = "AccordionItem";
23+
24+
const AccordionTrigger = React.forwardRef<
25+
React.ElementRef<typeof AccordionPrimitive.Trigger>,
26+
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
27+
>(({ className, children, ...props }, ref) => (
28+
<AccordionPrimitive.Header className="flex">
29+
<AccordionPrimitive.Trigger
30+
ref={ref}
31+
className={cn(
32+
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
33+
className,
34+
)}
35+
{...props}
36+
>
37+
{children}
38+
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
39+
</AccordionPrimitive.Trigger>
40+
</AccordionPrimitive.Header>
41+
));
42+
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
43+
44+
const AccordionContent = React.forwardRef<
45+
React.ElementRef<typeof AccordionPrimitive.Content>,
46+
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
47+
>(({ className, children, ...props }, ref) => (
48+
<AccordionPrimitive.Content
49+
ref={ref}
50+
className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
51+
{...props}
52+
>
53+
<div className={cn("pb-4 pt-0", className)}>{children}</div>
54+
</AccordionPrimitive.Content>
55+
));
56+
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
57+
58+
type AccordionProps = React.ComponentProps<typeof Accordion>;
59+
export const AccordionMeta: CodeComponentMeta<AccordionProps> = {
60+
name: "Accordion",
61+
description: "shadcn/ui Accordion component for collapsible sections",
62+
props: {
63+
children: "slot",
64+
type: {
65+
type: "choice",
66+
options: ["single", "multiple"],
67+
defaultValueHint: "single",
68+
helpText: "Whether the accordion should be single or multiple",
69+
},
70+
collapsible: {
71+
type: "boolean",
72+
defaultValueHint: false,
73+
helpText: "Whether the accordion should be collapsible",
74+
},
75+
defaultValue: "string",
76+
value: "string",
77+
onValueChange: {
78+
type: "eventHandler",
79+
argTypes: [{ name: "value", type: "string" }],
80+
},
81+
disabled: {
82+
type: "boolean",
83+
defaultValueHint: false,
84+
helpText: "Whether the accordion should be disabled",
85+
},
86+
orientation: {
87+
type: "choice",
88+
options: ["horizontal", "vertical"],
89+
defaultValueHint: "vertical",
90+
helpText: "The orientation of the accordion",
91+
},
92+
dir: {
93+
type: "choice",
94+
options: ["ltr", "rtl"],
95+
defaultValueHint: "ltr",
96+
helpText: "The direction that the accordion should read",
97+
},
98+
},
99+
};
100+
101+
type AccordionItemProps = React.ComponentPropsWithoutRef<
102+
typeof AccordionPrimitive.Item
103+
>;
104+
export const AccordionItemMeta: CodeComponentMeta<AccordionItemProps> = {
105+
name: "AccordionItem",
106+
description: "Individual item in an Accordion",
107+
props: {
108+
children: "slot",
109+
value: {
110+
type: "string",
111+
description: "Unique value for this accordion item",
112+
},
113+
disabled: "boolean",
114+
},
115+
};
116+
117+
type AccordionTriggerProps = React.ComponentPropsWithoutRef<
118+
typeof AccordionPrimitive.Trigger
119+
>;
120+
export const AccordionTriggerMeta: CodeComponentMeta<AccordionTriggerProps> = {
121+
name: "AccordionTrigger",
122+
description: "Trigger button for an accordion item",
123+
props: {
124+
children: "slot",
125+
},
126+
};
127+
128+
type AccordionContentProps = React.ComponentPropsWithoutRef<
129+
typeof AccordionPrimitive.Content
130+
>;
131+
export const AccordionContentMeta: CodeComponentMeta<AccordionContentProps> = {
132+
name: "AccordionContent",
133+
description: "Content area for an accordion item",
134+
props: {
135+
children: "slot",
136+
},
137+
};
138+
139+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

‎apps/frontend/components/ui/index.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
import { NextJsPlasmicComponentLoader } from "@plasmicapp/loader-nextjs";
22
import { Skeleton, SkeletonMeta } from "@/components/ui/skeleton";
33
import { Button, ButtonMeta } from "@/components/ui/button";
4+
import {
5+
Accordion,
6+
AccordionItem,
7+
AccordionTrigger,
8+
AccordionContent,
9+
AccordionMeta,
10+
AccordionItemMeta,
11+
AccordionTriggerMeta,
12+
AccordionContentMeta,
13+
} from "@/components/ui/accordion";
414
import {
515
Breadcrumb,
616
BreadcrumbList,
@@ -262,6 +272,10 @@ export function registerAllUi(PLASMIC: NextJsPlasmicComponentLoader) {
262272
// shadcn/ui
263273
PLASMIC.registerComponent(Skeleton, SkeletonMeta);
264274
PLASMIC.registerComponent(Button, ButtonMeta);
275+
PLASMIC.registerComponent(Accordion, AccordionMeta);
276+
PLASMIC.registerComponent(AccordionItem, AccordionItemMeta);
277+
PLASMIC.registerComponent(AccordionTrigger, AccordionTriggerMeta);
278+
PLASMIC.registerComponent(AccordionContent, AccordionContentMeta);
265279
PLASMIC.registerComponent(Breadcrumb, BreadcrumbMeta);
266280
PLASMIC.registerComponent(BreadcrumbList, BreadcrumbListMeta);
267281
PLASMIC.registerComponent(BreadcrumbItem, BreadcrumbItemMeta);

‎apps/frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"@opensource-observer/utils": "workspace:*",
5050
"@plasmicapp/loader-nextjs": "^1.0.435",
5151
"@posthog/nextjs-config": "^1.2.0",
52+
"@radix-ui/react-accordion": "^1.2.12",
5253
"@radix-ui/react-collapsible": "^1.1.12",
5354
"@radix-ui/react-context-menu": "^2.2.16",
5455
"@radix-ui/react-dialog": "^1.1.15",

‎pnpm-lock.yaml‎

Lines changed: 44 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)