Add stories for Dialog and Toaster

Cover the new v2 kit primitives in Storybook: the Dialog (uncontrolled trigger, controlled open state, and skeleton) and the Toaster (title-only toasts as the common case, plus a title+description variant). Signed-off-by: Émile Ré <emile@probo.com>
2026-07-15 13:26:44 +02:00
parent 2a10b29859
commit a5f184d8e3
1 changed files with 106 additions and 0 deletions
--- a/packages/ui/src/v2/Dialog/Dialog.stories.tsx
+++ b/packages/ui/src/v2/Dialog/Dialog.stories.tsx
@@ -0,0 +1,106 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { useState } from "react";
+
+import { Button } from "../Button/Button";
+import { Text } from "../typography/Text";
+
+import { Dialog } from "./Dialog";
+import { DialogBody } from "./DialogBody";
+import { DialogClose } from "./DialogClose";
+import { DialogDescription } from "./DialogDescription";
+import { DialogFooter } from "./DialogFooter";
+import { DialogHeader } from "./DialogHeader";
+import { DialogPopup } from "./DialogPopup";
+import { DialogSkeleton } from "./DialogSkeleton";
+import { DialogTitle } from "./DialogTitle";
+import { DialogTrigger } from "./DialogTrigger";
+
+export default {
+  title: "v2/Dialog",
+  component: Dialog,
+};
+
+export function Default() {
+  return (
+    <Dialog>
+      <DialogTrigger render={<Button variant="solid" color="neutral" highContrast>Open dialog</Button>} />
+      <DialogPopup className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Sign in to continue</DialogTitle>
+          <DialogDescription>
+            Access protected resources or submit a request.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogBody>
+          <Text size={2} color="neutral">
+            Dialog body content lives here — a form, a message, or any other
+            slot the surrounding page composes.
+          </Text>
+        </DialogBody>
+        <DialogFooter>
+          <DialogClose render={<Button variant="soft" color="neutral" highContrast>Cancel</Button>} />
+          <DialogClose render={<Button variant="solid" color="neutral" highContrast>Confirm</Button>} />
+        </DialogFooter>
+      </DialogPopup>
+    </Dialog>
+  );
+}
+
+export function Controlled() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex flex-col items-start gap-3">
+      <Button variant="soft" color="neutral" highContrast onClick={() => setOpen(true)}>
+        Open controlled dialog
+      </Button>
+      <Text size={1} color="faint">{open ? "open" : "closed"}</Text>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogPopup className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Delete third party</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="soft" color="neutral" highContrast onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button variant="solid" color="red" highContrast onClick={() => setOpen(false)}>
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogPopup>
+      </Dialog>
+    </div>
+  );
+}
+
+export function Skeleton() {
+  return (
+    <div className="flex justify-center">
+      <DialogSkeleton />
+    </div>
+  );
+}