Skip to content

Commit 18a7778

Browse files
ryschengryscheng
committed
feat: add avatar and breadcrumbs to plasmic
1 parent 6410f45 commit 18a7778

File tree

5 files changed

+435
-53
lines changed

5 files changed

+435
-53
lines changed

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

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import * as AvatarPrimitive from "@radix-ui/react-avatar";
5+
import { CodeComponentMeta } from "@plasmicapp/loader-nextjs";
6+
7+
import { cn } from "@/lib/utils";
8+
9+
type AvatarProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>;
10+
11+
const Avatar = React.forwardRef<
12+
React.ElementRef<typeof AvatarPrimitive.Root>,
13+
AvatarProps
14+
>(({ className, ...props }, ref) => (
15+
<AvatarPrimitive.Root
16+
ref={ref}
17+
className={cn(
18+
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
19+
className,
20+
)}
21+
{...props}
22+
/>
23+
));
24+
Avatar.displayName = AvatarPrimitive.Root.displayName;
25+
26+
const AvatarMeta: CodeComponentMeta<AvatarProps> = {
27+
name: "Avatar",
28+
description: "shadcn/ui Avatar component",
29+
props: {
30+
children: "slot",
31+
},
32+
};
33+
34+
type AvatarImageProps = React.ComponentPropsWithoutRef<
35+
typeof AvatarPrimitive.Image
36+
>;
37+
38+
const AvatarImage = React.forwardRef<
39+
React.ElementRef<typeof AvatarPrimitive.Image>,
40+
AvatarImageProps
41+
>(({ className, ...props }, ref) => (
42+
<AvatarPrimitive.Image
43+
ref={ref}
44+
className={cn("aspect-square h-full w-full", className)}
45+
{...props}
46+
/>
47+
));
48+
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
49+
50+
const AvatarImageMeta: CodeComponentMeta<AvatarImageProps> = {
51+
name: "AvatarImage",
52+
description: "shadcn/ui AvatarImage component",
53+
props: {
54+
src: "string",
55+
alt: "string",
56+
},
57+
};
58+
59+
type AvatarFallbackProps = React.ComponentPropsWithoutRef<
60+
typeof AvatarPrimitive.Fallback
61+
>;
62+
63+
const AvatarFallback = React.forwardRef<
64+
React.ElementRef<typeof AvatarPrimitive.Fallback>,
65+
AvatarFallbackProps
66+
>(({ className, ...props }, ref) => (
67+
<AvatarPrimitive.Fallback
68+
ref={ref}
69+
className={cn(
70+
"flex h-full w-full items-center justify-center rounded-full bg-muted",
71+
className,
72+
)}
73+
{...props}
74+
/>
75+
));
76+
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
77+
78+
const AvatarFallbackMeta: CodeComponentMeta<AvatarFallbackProps> = {
79+
name: "AvatarFallback",
80+
description: "shadcn/ui AvatarFallback component",
81+
props: {
82+
children: "slot",
83+
},
84+
};
85+
86+
export {
87+
Avatar,
88+
AvatarImage,
89+
AvatarFallback,
90+
// Meta
91+
AvatarMeta,
92+
AvatarImageMeta,
93+
AvatarFallbackMeta,
94+
};

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

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
import * as React from "react";
2+
import { Slot } from "@radix-ui/react-slot";
3+
import { ChevronRight, MoreHorizontal } from "lucide-react";
4+
import { CodeComponentMeta } from "@plasmicapp/loader-nextjs";
5+
6+
import { cn } from "@/lib/utils";
7+
8+
type BreadcrumbProps = React.ComponentPropsWithoutRef<"nav"> & {
9+
separator?: React.ReactNode;
10+
};
11+
12+
const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
13+
({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />,
14+
);
15+
Breadcrumb.displayName = "Breadcrumb";
16+
17+
const BreadcrumbMeta: CodeComponentMeta<BreadcrumbProps> = {
18+
name: "Breadcrumb",
19+
description: "shadcn/ui Breadcrumb component",
20+
props: {
21+
children: "slot",
22+
separator: "slot",
23+
},
24+
};
25+
26+
type BreadcrumbListProps = React.ComponentPropsWithoutRef<"ol">;
27+
28+
const BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(
29+
({ className, ...props }, ref) => (
30+
<ol
31+
ref={ref}
32+
className={cn(
33+
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
34+
className,
35+
)}
36+
{...props}
37+
/>
38+
),
39+
);
40+
BreadcrumbList.displayName = "BreadcrumbList";
41+
42+
const BreadcrumbListMeta: CodeComponentMeta<BreadcrumbListProps> = {
43+
name: "BreadcrumbList",
44+
description: "shadcn/ui BreadcrumbList component",
45+
props: {
46+
children: "slot",
47+
},
48+
};
49+
50+
type BreadcrumbItemProps = React.ComponentPropsWithoutRef<"li">;
51+
52+
const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(
53+
({ className, ...props }, ref) => (
54+
<li
55+
ref={ref}
56+
className={cn("inline-flex items-center gap-1.5", className)}
57+
{...props}
58+
/>
59+
),
60+
);
61+
BreadcrumbItem.displayName = "BreadcrumbItem";
62+
63+
const BreadcrumbItemMeta: CodeComponentMeta<BreadcrumbItemProps> = {
64+
name: "BreadcrumbItem",
65+
description: "shadcn/ui BreadcrumbItem component",
66+
props: {
67+
children: "slot",
68+
},
69+
};
70+
71+
type BreadcrumbLinkProps = React.ComponentPropsWithoutRef<"a"> & {
72+
asChild?: boolean;
73+
};
74+
75+
const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
76+
({ asChild, className, ...props }, ref) => {
77+
const Comp = asChild ? Slot : "a";
78+
79+
return (
80+
<Comp
81+
ref={ref}
82+
className={cn("transition-colors hover:text-foreground", className)}
83+
{...props}
84+
/>
85+
);
86+
},
87+
);
88+
BreadcrumbLink.displayName = "BreadcrumbLink";
89+
90+
const BreadcrumbLinkMeta: CodeComponentMeta<BreadcrumbLinkProps> = {
91+
name: "BreadcrumbLink",
92+
description: "shadcn/ui BreadcrumbLink component",
93+
props: {
94+
children: "slot",
95+
href: "string",
96+
asChild: "boolean",
97+
},
98+
};
99+
100+
type BreadcrumbPageProps = React.ComponentPropsWithoutRef<"span">;
101+
102+
const BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(
103+
({ className, ...props }, ref) => (
104+
<span
105+
ref={ref}
106+
role="link"
107+
aria-disabled="true"
108+
aria-current="page"
109+
className={cn("font-normal text-foreground", className)}
110+
{...props}
111+
/>
112+
),
113+
);
114+
BreadcrumbPage.displayName = "BreadcrumbPage";
115+
116+
const BreadcrumbPageMeta: CodeComponentMeta<BreadcrumbPageProps> = {
117+
name: "BreadcrumbPage",
118+
description: "shadcn/ui BreadcrumbPage component",
119+
props: {
120+
children: "slot",
121+
},
122+
};
123+
124+
type BreadcrumbSeparatorProps = React.ComponentProps<"li">;
125+
126+
const BreadcrumbSeparator = ({
127+
children,
128+
className,
129+
...props
130+
}: BreadcrumbSeparatorProps) => (
131+
<li
132+
role="presentation"
133+
aria-hidden="true"
134+
className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
135+
{...props}
136+
>
137+
{children ?? <ChevronRight />}
138+
</li>
139+
);
140+
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
141+
142+
const BreadcrumbSeparatorMeta: CodeComponentMeta<BreadcrumbSeparatorProps> = {
143+
name: "BreadcrumbSeparator",
144+
description: "shadcn/ui BreadcrumbSeparator component",
145+
props: {
146+
children: "slot",
147+
},
148+
};
149+
150+
type BreadcrumbEllipsisProps = React.ComponentProps<"span">;
151+
152+
const BreadcrumbEllipsis = ({
153+
className,
154+
...props
155+
}: BreadcrumbEllipsisProps) => (
156+
<span
157+
role="presentation"
158+
aria-hidden="true"
159+
className={cn("flex h-9 w-9 items-center justify-center", className)}
160+
{...props}
161+
>
162+
<MoreHorizontal className="h-4 w-4" />
163+
<span className="sr-only">More</span>
164+
</span>
165+
);
166+
BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
167+
168+
const BreadcrumbEllipsisMeta: CodeComponentMeta<BreadcrumbEllipsisProps> = {
169+
name: "BreadcrumbEllipsis",
170+
description: "shadcn/ui BreadcrumbEllipsis component",
171+
props: {},
172+
};
173+
174+
export {
175+
Breadcrumb,
176+
BreadcrumbList,
177+
BreadcrumbItem,
178+
BreadcrumbLink,
179+
BreadcrumbPage,
180+
BreadcrumbSeparator,
181+
BreadcrumbEllipsis,
182+
// Meta
183+
BreadcrumbMeta,
184+
BreadcrumbListMeta,
185+
BreadcrumbItemMeta,
186+
BreadcrumbLinkMeta,
187+
BreadcrumbPageMeta,
188+
BreadcrumbSeparatorMeta,
189+
BreadcrumbEllipsisMeta,
190+
};

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,9 +199,43 @@ import {
199199
CardDescriptionMeta,
200200
CardContentMeta,
201201
} from "@/components/ui/card";
202+
import {
203+
Avatar,
204+
AvatarFallback,
205+
AvatarFallbackMeta,
206+
AvatarImage,
207+
AvatarImageMeta,
208+
AvatarMeta,
209+
} from "@/components/ui/avatar";
210+
import {
211+
Breadcrumb,
212+
BreadcrumbEllipsis,
213+
BreadcrumbEllipsisMeta,
214+
BreadcrumbItem,
215+
BreadcrumbItemMeta,
216+
BreadcrumbLink,
217+
BreadcrumbLinkMeta,
218+
BreadcrumbList,
219+
BreadcrumbListMeta,
220+
BreadcrumbMeta,
221+
BreadcrumbPage,
222+
BreadcrumbPageMeta,
223+
BreadcrumbSeparator,
224+
BreadcrumbSeparatorMeta,
225+
} from "@/components/ui/breadcrumb";
202226

203227
export function registerAllUi(PLASMIC: NextJsPlasmicComponentLoader) {
204228
// shadcn/ui
229+
PLASMIC.registerComponent(Breadcrumb, BreadcrumbMeta);
230+
PLASMIC.registerComponent(BreadcrumbList, BreadcrumbListMeta);
231+
PLASMIC.registerComponent(BreadcrumbItem, BreadcrumbItemMeta);
232+
PLASMIC.registerComponent(BreadcrumbLink, BreadcrumbLinkMeta);
233+
PLASMIC.registerComponent(BreadcrumbPage, BreadcrumbPageMeta);
234+
PLASMIC.registerComponent(BreadcrumbSeparator, BreadcrumbSeparatorMeta);
235+
PLASMIC.registerComponent(BreadcrumbEllipsis, BreadcrumbEllipsisMeta);
236+
PLASMIC.registerComponent(Avatar, AvatarMeta);
237+
PLASMIC.registerComponent(AvatarImage, AvatarImageMeta);
238+
PLASMIC.registerComponent(AvatarFallback, AvatarFallbackMeta);
205239
PLASMIC.registerComponent(Skeleton, SkeletonMeta);
206240
PLASMIC.registerComponent(ToolTip, ToolTipMeta);
207241
PLASMIC.registerComponent(Sidebar, SidebarMeta);

‎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-avatar": "^1.1.10",
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",

0 commit comments

Comments
 (0)