Skip to content

Commit ea30076

Browse files
atzin-escandiaatzin-escandia
authored
feature/add-dialog (#67)
* feature/add-dialog * (feature/add-dialog): add icon close * (feature/add-dialog): add icon close - rmv yarn
1 parent 1f384aa commit ea30076

File tree

4 files changed

+171
-0
lines changed

4 files changed

+171
-0
lines changed

‎src/components/Dialog/Dialog.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+
Dialog,
5+
DialogTrigger,
6+
DialogContent,
7+
DialogHeader,
8+
DialogTitle,
9+
DialogFooter,
10+
DialogClose,
11+
DialogDescription
12+
} from "./index";
13+
import { Button } from "../Button";
14+
import { StoryObj } from "@storybook/react";
15+
16+
const meta = {
17+
title: "Elements/Dialog",
18+
component: Dialog,
19+
argTypes: {},
20+
parameters: {
21+
layout: "centered"
22+
},
23+
24+
tags: ["autodocs"]
25+
} satisfies Meta<typeof Dialog>;
26+
27+
export default meta;
28+
29+
type Story = StoryObj<typeof meta>;
30+
31+
export const DefaultVariant: Story = {
32+
name: "Default",
33+
render: () => (
34+
<Dialog>
35+
<DialogTrigger asChild>
36+
<Button>Open Dialog</Button>
37+
</DialogTrigger>
38+
<DialogContent>
39+
<DialogHeader>
40+
<DialogTitle>Dialog Title</DialogTitle>
41+
</DialogHeader>
42+
<DialogDescription align="center">Dialog Description</DialogDescription>
43+
<DialogFooter>
44+
<DialogClose asChild>
45+
<Button>Cancel</Button>
46+
</DialogClose>
47+
</DialogFooter>
48+
</DialogContent>
49+
</Dialog>
50+
)
51+
};

‎src/components/Dialog/Dialog.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import * as DialogPrimitive from "@radix-ui/react-dialog";
5+
import { cn } from "../../utilities";
6+
7+
const Dialog = DialogPrimitive.Root;
8+
9+
const DialogTrigger = DialogPrimitive.Trigger;
10+
11+
const DialogPortal = DialogPrimitive.Portal;
12+
13+
const DialogClose = DialogPrimitive.Close;
14+
15+
const DialogOverlay = React.forwardRef<
16+
React.ElementRef<typeof DialogPrimitive.Overlay>,
17+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
18+
>(({ className, ...props }, ref) => (
19+
<DialogPrimitive.Overlay
20+
ref={ref}
21+
className={cn(
22+
"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",
23+
className
24+
)}
25+
{...props}
26+
/>
27+
));
28+
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
29+
30+
const DialogContent = React.forwardRef<
31+
React.ElementRef<typeof DialogPrimitive.Content>,
32+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
33+
>(({ className, children, ...props }, ref) => (
34+
<DialogPortal>
35+
<DialogOverlay />
36+
<DialogPrimitive.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+
{children}
45+
</DialogPrimitive.Content>
46+
</DialogPortal>
47+
));
48+
DialogContent.displayName = DialogPrimitive.Content.displayName;
49+
50+
const DialogHeader = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
51+
<div
52+
className={cn(
53+
" flex items-center justify-between border-b border-theme-border-moderate py-2 pl-5 pr-3",
54+
className
55+
)}
56+
{...props}
57+
>
58+
{children}
59+
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
60+
<svg
61+
width="24px"
62+
height="24px"
63+
viewBox="0 0 24 24"
64+
fill="#6B7280"
65+
xmlns="http://www.w3.org/2000/svg"
66+
>
67+
<path
68+
fillRule="evenodd"
69+
clipRule="evenodd"
70+
d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"
71+
/>
72+
</svg>
73+
74+
<span className="sr-only">Close</span>
75+
</DialogPrimitive.Close>
76+
</div>
77+
);
78+
DialogHeader.displayName = "DialogHeader";
79+
80+
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
81+
<div
82+
className={cn("flex justify-end border-t border-theme-border-moderate px-5 py-3", className)}
83+
{...props}
84+
/>
85+
);
86+
DialogFooter.displayName = "DialogFooter";
87+
88+
const DialogTitle = React.forwardRef<
89+
React.ElementRef<typeof DialogPrimitive.Title>,
90+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
91+
>(({ className, ...props }, ref) => (
92+
<DialogPrimitive.Title
93+
ref={ref}
94+
className={cn("text-text-lg font-semibold", className)}
95+
{...props}
96+
/>
97+
));
98+
DialogTitle.displayName = DialogPrimitive.Title.displayName;
99+
100+
const DialogDescription = React.forwardRef<
101+
React.ElementRef<typeof DialogPrimitive.Description>,
102+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
103+
>(({ className, ...props }, ref) => (
104+
<DialogPrimitive.Description ref={ref} className={cn("", className)} {...props} />
105+
));
106+
DialogDescription.displayName = DialogPrimitive.Description.displayName;
107+
108+
export {
109+
Dialog,
110+
DialogTrigger,
111+
DialogContent,
112+
DialogOverlay,
113+
DialogHeader,
114+
DialogFooter,
115+
DialogTitle,
116+
DialogDescription,
117+
DialogClose
118+
};

‎src/components/Dialog/index.tsx‎

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

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,4 @@ export * from "./Collapsible";
1515
export * from "./Tooltip";
1616
export * from "./Checkbox";
1717
export * from "./Toast";
18+
export * from "./Dialog";

0 commit comments

Comments
 (0)