Skip to content

Commit b081403

Browse files
CahllagerfeldCahllagerfeld
authored
feat: add alert dialog (#76)
1 parent 9f92392 commit b081403

File tree

8 files changed

+191
-2
lines changed

8 files changed

+191
-2
lines changed

‎.changeset/light-items-explain.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@zenml-io/react-component-library": minor
3+
---
4+
5+
add alert dialog

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
]
8585
},
8686
"dependencies": {
87+
"@radix-ui/react-alert-dialog": "^1.0.5",
8788
"@radix-ui/react-avatar": "^1.0.4",
8889
"@radix-ui/react-checkbox": "^1.0.4",
8990
"@radix-ui/react-collapsible": "^1.0.3",

‎pnpm-lock.yaml‎

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/AlertDialog/AlertDialog.stories.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Meta } from "@storybook/react";
2+
import React from "react";
3+
import {
4+
AlertDialog,
5+
AlertDialogContent,
6+
AlertDialogTrigger,
7+
AlertDialogHeader,
8+
AlertDialogTitle,
9+
AlertDialogDescription,
10+
AlertDialogFooter,
11+
AlertDialogCancel
12+
} from "./index";
13+
import { Button } from "../Button";
14+
import { StoryObj } from "@storybook/react";
15+
16+
const meta = {
17+
title: "Elements/Alert Dialog",
18+
component: AlertDialog,
19+
argTypes: {},
20+
parameters: {
21+
layout: "centered"
22+
},
23+
24+
tags: ["autodocs"]
25+
} satisfies Meta<typeof AlertDialog>;
26+
27+
export default meta;
28+
29+
type Story = StoryObj<typeof meta>;
30+
31+
export const DefaultVariant: Story = {
32+
name: "Default",
33+
render: () => (
34+
<AlertDialog>
35+
<AlertDialogTrigger asChild>
36+
<Button>Open Dialog</Button>
37+
</AlertDialogTrigger>
38+
<AlertDialogContent>
39+
<AlertDialogHeader>
40+
<AlertDialogTitle>Dialog Title</AlertDialogTitle>
41+
</AlertDialogHeader>
42+
<AlertDialogDescription>Dialog Description</AlertDialogDescription>
43+
<AlertDialogFooter>
44+
<AlertDialogCancel asChild>
45+
<Button>Cancel</Button>
46+
</AlertDialogCancel>
47+
</AlertDialogFooter>
48+
</AlertDialogContent>
49+
</AlertDialog>
50+
)
51+
};

‎src/components/AlertDialog/AlertDialog.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import * as React from "react";
2+
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
3+
import { cn } from "../../utilities";
4+
5+
const AlertDialog = AlertDialogPrimitive.Root;
6+
7+
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
8+
9+
const AlertDialogPortal = AlertDialogPrimitive.Portal;
10+
11+
const AlertDialogAction = AlertDialogPrimitive.Action;
12+
13+
const AlertDialogCancel = AlertDialogPrimitive.Cancel;
14+
15+
const AlertDialogOverlay = React.forwardRef<
16+
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
17+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
18+
>(({ className, ...props }, ref) => (
19+
<AlertDialogPrimitive.Overlay
20+
className={cn(
21+
"bg-background/80 fixed inset-0 z-50 bg-black opacity-20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
22+
className
23+
)}
24+
{...props}
25+
ref={ref}
26+
/>
27+
));
28+
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
29+
30+
const AlertDialogContent = React.forwardRef<
31+
React.ElementRef<typeof AlertDialogPrimitive.Content>,
32+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
33+
>(({ className, ...props }, ref) => (
34+
<AlertDialogPortal>
35+
<AlertDialogOverlay />
36+
<AlertDialogPrimitive.Content
37+
ref={ref}
38+
className={cn(
39+
"sm:rounded-lg fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] rounded-md bg-theme-surface-primary shadow-md duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] md:w-full",
40+
className
41+
)}
42+
{...props}
43+
/>
44+
</AlertDialogPortal>
45+
));
46+
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
47+
48+
const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
49+
<div
50+
className={cn(
51+
"flex items-center justify-between border-b border-theme-border-moderate py-2 pl-5 pr-3",
52+
className
53+
)}
54+
{...props}
55+
/>
56+
);
57+
AlertDialogHeader.displayName = "AlertDialogHeader";
58+
59+
const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
60+
<div
61+
className={cn("flex justify-end border-t border-theme-border-moderate px-5 py-3", className)}
62+
{...props}
63+
/>
64+
);
65+
AlertDialogFooter.displayName = "AlertDialogFooter";
66+
67+
const AlertDialogTitle = React.forwardRef<
68+
React.ElementRef<typeof AlertDialogPrimitive.Title>,
69+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
70+
>(({ className, ...props }, ref) => (
71+
<AlertDialogPrimitive.Title
72+
ref={ref}
73+
className={cn("text-text-lg font-semibold", className)}
74+
{...props}
75+
/>
76+
));
77+
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
78+
79+
const AlertDialogDescription = React.forwardRef<
80+
React.ElementRef<typeof AlertDialogPrimitive.Description>,
81+
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
82+
>(({ className, ...props }, ref) => (
83+
<AlertDialogPrimitive.Description
84+
ref={ref}
85+
className={cn("text-sm text-muted-foreground", className)}
86+
{...props}
87+
/>
88+
));
89+
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
90+
91+
export {
92+
AlertDialog,
93+
AlertDialogPortal,
94+
AlertDialogOverlay,
95+
AlertDialogTrigger,
96+
AlertDialogContent,
97+
AlertDialogHeader,
98+
AlertDialogFooter,
99+
AlertDialogTitle,
100+
AlertDialogDescription,
101+
AlertDialogAction,
102+
AlertDialogCancel
103+
};

‎src/components/AlertDialog/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./AlertDialog";

‎src/components/Dialog/Dialog.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const DefaultVariant: Story = {
3939
<DialogHeader>
4040
<DialogTitle>Dialog Title</DialogTitle>
4141
</DialogHeader>
42-
<DialogDescription align="center">Dialog Description</DialogDescription>
42+
<DialogDescription>Dialog Description</DialogDescription>
4343
<DialogFooter>
4444
<DialogClose asChild>
4545
<Button>Cancel</Button>

‎src/components/Dialog/Dialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
5050
const DialogHeader = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
5151
<div
5252
className={cn(
53-
" flex items-center justify-between border-b border-theme-border-moderate py-2 pl-5 pr-3",
53+
"flex items-center justify-between border-b border-theme-border-moderate py-2 pl-5 pr-3",
5454
className
5555
)}
5656
{...props}

0 commit comments

Comments
 (0)