feat: re-write dialog without stackflow

daangn · Jan 16, 2025 · 2492a41 · 2492a41
1 parent 8c8a112
commit 2492a41
Show file tree

Hide file tree

Showing 49 changed files with 1,414 additions and 460 deletions.
diff --git a/.yarn/cache/@radix-ui-primitive-npm-1.1.1-758e8c9172-d7e8191775.zip b/.yarn/cache/@radix-ui-primitive-npm-1.1.1-758e8c9172-d7e8191775.zip
diff --git a/.yarn/cache/@radix-ui-react-dismissable-layer-npm-1.1.3-2114a37d20-9905ff3d8d.zip b/.yarn/cache/@radix-ui-react-dismissable-layer-npm-1.1.3-2114a37d20-9905ff3d8d.zip
diff --git a/.yarn/cache/@radix-ui-react-focus-scope-npm-1.1.1-eaf894ac65-128508e7e3.zip b/.yarn/cache/@radix-ui-react-focus-scope-npm-1.1.1-eaf894ac65-128508e7e3.zip
diff --git a/.yarn/cache/@radix-ui-react-primitive-npm-2.0.1-a63c88e534-ed6829b8ff.zip b/.yarn/cache/@radix-ui-react-primitive-npm-2.0.1-a63c88e534-ed6829b8ff.zip
diff --git a/.yarn/cache/@stackflow-compat-await-push-npm-1.1.13-5582c8a4fe-ca498d6553.zip b/.yarn/cache/@stackflow-compat-await-push-npm-1.1.13-5582c8a4fe-ca498d6553.zip
diff --git a/docs/components/example/alert-dialog-danger.tsx b/docs/components/example/alert-dialog-danger.tsx
@@ -1,19 +1,47 @@
 "use client";
 
 import { ActionButton } from "seed-design/ui/action-button";
-import { AlertDialog, AlertDialogAction } from "seed-design/ui/alert-dialog";
+import {
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "seed-design/ui/alert-dialog";
+import { Column, Columns } from "@seed-design/react";
 
-const AlertDialogDangerActivity = () => {
+const AlertDialogDanger = () => {
   return (
-    <AlertDialog title="제목" description="파괴적, 비가역적 작업을 경고">
-      <AlertDialogAction asChild>
-        <ActionButton variant="neutralWeak">취소</ActionButton>
-      </AlertDialogAction>
-      <AlertDialogAction asChild>
-        <ActionButton variant="dangerSolid">확인</ActionButton>
-      </AlertDialogAction>
-    </AlertDialog>
+    // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
+    <AlertDialogRoot>
+      <AlertDialogTrigger asChild>
+        <ActionButton>열기</ActionButton>
+      </AlertDialogTrigger>
+      <AlertDialogContent layerIndex={50}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>제목</AlertDialogTitle>
+          <AlertDialogDescription>파괴적, 비가역적 작업을 경고합니다.</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <Columns gap="s2">
+            <Column>
+              <AlertDialogAction asChild>
+                <ActionButton variant="neutralSolid">취소</ActionButton>
+              </AlertDialogAction>
+            </Column>
+            <Column>
+              <AlertDialogAction asChild>
+                <ActionButton variant="dangerSolid">확인</ActionButton>
+              </AlertDialogAction>
+            </Column>
+          </Columns>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialogRoot>
   );
 };
 
-export default AlertDialogDangerActivity;
+export default AlertDialogDanger;
diff --git a/docs/components/example/alert-dialog-default-activity.tsx b/docs/components/example/alert-dialog-default-activity.tsx
diff --git a/docs/components/example/alert-dialog-neutral.tsx b/docs/components/example/alert-dialog-neutral.tsx
@@ -1,19 +1,47 @@
 "use client";
 
 import { ActionButton } from "seed-design/ui/action-button";
-import { AlertDialog, AlertDialogAction } from "seed-design/ui/alert-dialog";
+import {
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "seed-design/ui/alert-dialog";
+import { Column, Columns } from "@seed-design/react";
 
-const AlertDialogNeutralActivity = () => {
+const AlertDialogNeutral = () => {
   return (
-    <AlertDialog title="제목" description="중립적인 선택지를 제공">
-      <AlertDialogAction asChild>
-        <ActionButton variant="neutralWeak">취소</ActionButton>
-      </AlertDialogAction>
-      <AlertDialogAction asChild>
-        <ActionButton variant="neutralSolid">확인</ActionButton>
-      </AlertDialogAction>
-    </AlertDialog>
+    // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
+    <AlertDialogRoot>
+      <AlertDialogTrigger asChild>
+        <ActionButton>열기</ActionButton>
+      </AlertDialogTrigger>
+      <AlertDialogContent layerIndex={50}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>제목</AlertDialogTitle>
+          <AlertDialogDescription>중립적인 선택지를 제공합니다.</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <Columns gap="s2">
+            <Column>
+              <AlertDialogAction asChild>
+                <ActionButton variant="neutralSolid">취소</ActionButton>
+              </AlertDialogAction>
+            </Column>
+            <Column>
+              <AlertDialogAction asChild>
+                <ActionButton variant="neutralWeak">확인</ActionButton>
+              </AlertDialogAction>
+            </Column>
+          </Columns>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialogRoot>
   );
 };
 
-export default AlertDialogNeutralActivity;
+export default AlertDialogNeutral;
diff --git a/docs/components/example/alert-dialog-nonpreferred.tsx b/docs/components/example/alert-dialog-nonpreferred.tsx
diff --git a/docs/components/example/alert-dialog-preview.tsx b/docs/components/example/alert-dialog-preview.tsx
@@ -1,19 +1,47 @@
 "use client";
 
+import { Column, Columns } from "@seed-design/react";
 import { ActionButton } from "seed-design/ui/action-button";
-import { AlertDialog, AlertDialogAction } from "seed-design/ui/alert-dialog";
+import {
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "seed-design/ui/alert-dialog";
 
-const AlertDialogPreviewActivity = () => {
+const AlertDialogSingle = () => {
   return (
-    <AlertDialog title="주의" description="이 작업은 되돌릴 수 없습니다.">
-      <AlertDialogAction asChild>
-        <ActionButton variant="neutralWeak">취소</ActionButton>
-      </AlertDialogAction>
-      <AlertDialogAction asChild>
-        <ActionButton variant="dangerSolid">확인</ActionButton>
-      </AlertDialogAction>
-    </AlertDialog>
+    // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
+    <AlertDialogRoot>
+      <AlertDialogTrigger asChild>
+        <ActionButton>열기</ActionButton>
+      </AlertDialogTrigger>
+      <AlertDialogContent layerIndex={50}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>주의</AlertDialogTitle>
+          <AlertDialogDescription>이 작업은 되돌릴 수 없습니다.</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <Columns gap="s2">
+            <Column>
+              <AlertDialogAction asChild>
+                <ActionButton variant="neutralSolid">취소</ActionButton>
+              </AlertDialogAction>
+            </Column>
+            <Column>
+              <AlertDialogAction asChild>
+                <ActionButton variant="neutralWeak">확인</ActionButton>
+              </AlertDialogAction>
+            </Column>
+          </Columns>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialogRoot>
   );
 };
 
-export default AlertDialogPreviewActivity;
+export default AlertDialogSingle;
diff --git a/docs/components/example/alert-dialog-single.tsx b/docs/components/example/alert-dialog-single.tsx
@@ -1,17 +1,37 @@
 "use client";
 
-import { Flex } from "seed-design/ui/layout";
 import { ActionButton } from "seed-design/ui/action-button";
-import { AlertDialog } from "seed-design/ui/alert-dialog";
+import {
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "seed-design/ui/alert-dialog";
 
-const AlertDialogSingleActivity = () => {
+const AlertDialogSingle = () => {
+  // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
   return (
-    <AlertDialog title="제목" description="단일 선택지를 제공">
-      <Flex flexGrow={1} direction="column">
-        <ActionButton variant="neutralSolid">확인</ActionButton>
-      </Flex>
-    </AlertDialog>
+    <AlertDialogRoot>
+      <AlertDialogTrigger asChild>
+        <ActionButton>열기</ActionButton>
+      </AlertDialogTrigger>
+      <AlertDialogContent layerIndex={50}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>제목</AlertDialogTitle>
+          <AlertDialogDescription>단일 선택지를 제공합니다.</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogAction asChild>
+            <ActionButton variant="neutralSolid">확인</ActionButton>
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialogRoot>
   );
 };
 
-export default AlertDialogSingleActivity;
+export default AlertDialogSingle;