From 6316cd3e785660a8e2819982fbc86b74074e2a56 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:22:05 +0000 Subject: [PATCH 1/3] feat: add alert dialog --- package.json | 1 + pnpm-lock.yaml | 28 +++++ .../AlertDialog/AlertDialog.stories.tsx | 51 +++++++++ src/components/AlertDialog/AlertDialog.tsx | 103 ++++++++++++++++++ src/components/AlertDialog/index.tsx | 1 + src/components/Dialog/Dialog.stories.tsx | 2 +- src/components/Dialog/Dialog.tsx | 8 +- 7 files changed, 191 insertions(+), 3 deletions(-) create mode 100644 src/components/AlertDialog/AlertDialog.stories.tsx create mode 100644 src/components/AlertDialog/AlertDialog.tsx create mode 100644 src/components/AlertDialog/index.tsx diff --git a/package.json b/package.json index be7529e..4b3dd4c 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,7 @@ ] }, "dependencies": { + "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-collapsible": "^1.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 893f993..35d3c7b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@radix-ui/react-alert-dialog': + specifier: ^1.0.5 + version: 1.0.5(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-avatar': specifier: ^1.0.4 version: 1.0.4(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) @@ -2214,6 +2217,31 @@ packages: '@babel/runtime': 7.24.0 dev: false + /@radix-ui/react-alert-dialog@1.0.5(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-dialog': 1.0.5(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-slot': 1.0.2(@types/react@18.2.28)(react@18.2.0) + '@types/react': 18.2.28 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-arrow@1.0.3(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==} peerDependencies: diff --git a/src/components/AlertDialog/AlertDialog.stories.tsx b/src/components/AlertDialog/AlertDialog.stories.tsx new file mode 100644 index 0000000..021a881 --- /dev/null +++ b/src/components/AlertDialog/AlertDialog.stories.tsx @@ -0,0 +1,51 @@ +import { Meta } from "@storybook/react"; +import React from "react"; +import { + AlertDialog, + AlertDialogContent, + AlertDialogTrigger, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogCancel +} from "./index"; +import { Button } from "../Button"; +import { StoryObj } from "@storybook/react"; + +const meta = { + title: "Elements/Alert Dialog", + component: AlertDialog, + argTypes: {}, + parameters: { + layout: "centered" + }, + + tags: ["autodocs"] +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const DefaultVariant: Story = { + name: "Default", + render: () => ( + + + + + + + Dialog Title + + Dialog Description + + + + + + + + ) +}; diff --git a/src/components/AlertDialog/AlertDialog.tsx b/src/components/AlertDialog/AlertDialog.tsx new file mode 100644 index 0000000..a033329 --- /dev/null +++ b/src/components/AlertDialog/AlertDialog.tsx @@ -0,0 +1,103 @@ +import * as React from "react"; +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"; +import { cn } from "../../utilities"; + +const AlertDialog = AlertDialogPrimitive.Root; + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger; + +const AlertDialogPortal = AlertDialogPrimitive.Portal; + +const AlertDialogAction = AlertDialogPrimitive.Action; + +const AlertDialogCancel = AlertDialogPrimitive.Cancel; + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName; + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)); +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName; + +const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes) => ( +
+); +AlertDialogHeader.displayName = "AlertDialogHeader"; + +const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes) => ( +
+); +AlertDialogFooter.displayName = "AlertDialogFooter"; + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName; + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName; + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel +}; diff --git a/src/components/AlertDialog/index.tsx b/src/components/AlertDialog/index.tsx new file mode 100644 index 0000000..ba87679 --- /dev/null +++ b/src/components/AlertDialog/index.tsx @@ -0,0 +1 @@ +export * from "./AlertDialog"; diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx index bfed32a..c59a421 100644 --- a/src/components/Dialog/Dialog.stories.tsx +++ b/src/components/Dialog/Dialog.stories.tsx @@ -39,7 +39,7 @@ export const DefaultVariant: Story = { Dialog Title - Dialog Description + Dialog Description diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index d3b8860..ba10fab 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -50,7 +50,7 @@ DialogContent.displayName = DialogPrimitive.Content.displayName; const DialogHeader = ({ className, children, ...props }: React.HTMLAttributes) => (
, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - + )); DialogDescription.displayName = DialogPrimitive.Description.displayName; From 8e7a6072affdc4503694f91dc65ec32be5804181 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:23:30 +0000 Subject: [PATCH 2/3] feat: changeset --- .changeset/light-items-explain.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/light-items-explain.md diff --git a/.changeset/light-items-explain.md b/.changeset/light-items-explain.md new file mode 100644 index 0000000..1cc2c75 --- /dev/null +++ b/.changeset/light-items-explain.md @@ -0,0 +1,5 @@ +--- +"@zenml-io/react-component-library": minor +--- + +add alert dialog From edc0f893baf9655c50d1d2f7802eb78bca8eb41d Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:26:27 +0000 Subject: [PATCH 3/3] revert: dialog --- src/components/Dialog/Dialog.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index ba10fab..292952b 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -101,11 +101,7 @@ const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - + )); DialogDescription.displayName = DialogPrimitive.Description.displayName;