create-nexst-monorepo 0.1.0

package/template/apps/web/src/components/responsive-dialog/responsive-dialog.stories.tsx

@@ -0,0 +1,307 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { AlertCircle, FileText, Mail, Share2, Trash2, Upload } from "lucide-react";
+import { useState } from "react";
+import { expect, fn, userEvent, within } from "storybook/test";
+import { Button } from "../button/button";
+import { ResponsiveDialog } from "./responsive-dialog";
+
+const meta = {
+  argTypes: {
+    open: {
+      control: "boolean",
+    },
+  },
+  component: ResponsiveDialog,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ResponsiveDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    open: false,
+    setOpen: () => {},
+    title: "",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button", { name: /open dialog/i });
+
+    await expect(trigger).toBeInTheDocument();
+
+    await userEvent.click(trigger);
+  },
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+        <ResponsiveDialog
+          description="This dialog adapts to screen size - it's a dialog on desktop and a drawer on mobile."
+          open={open}
+          setOpen={setOpen}
+          title="Responsive Dialog"
+        >
+          <div className="space-y-4 py-4">
+            <p className="text-sm">
+              Try resizing your browser window or viewing this on different devices to see how it
+              adapts.
+            </p>
+            <p className="text-muted-foreground text-sm">
+              The component automatically switches between a centered dialog and a bottom drawer
+              based on the viewport width.
+            </p>
+          </div>
+        </ResponsiveDialog>
+      </>
+    );
+  },
+};
+
+export const WithForm: Story = {
+  args: {
+    open: false,
+    setOpen: () => {},
+    title: "",
+  },
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [email, setEmail] = useState("");
+
+    const handleSubmit = () => {
+      fn()(email);
+      setOpen(false);
+      setEmail("");
+    };
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>
+          <Mail size={16} />
+          Share Document
+        </Button>
+        <ResponsiveDialog
+          description="Enter the email address of the person you want to share this document with."
+          open={open}
+          setOpen={setOpen}
+          title="Share Document"
+        >
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="email">
+                Email Address
+              </label>
+              <input
+                aria-label="Email Address"
+                className="border-input bg-background ring-offset-background focus-visible:ring-ring w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none"
+                id="email"
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="colleague@example.com"
+                type="email"
+                value={email}
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="message">
+                Message (Optional)
+              </label>
+              <textarea
+                aria-label="Message (Optional)"
+                className="border-input bg-background ring-offset-background focus-visible:ring-ring w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none"
+                id="message"
+                placeholder="Add a personal message..."
+                rows={3}
+              />
+            </div>
+            <div className="flex gap-2">
+              <Button className="flex-1" disabled={!email} onClick={handleSubmit}>
+                <Share2 size={16} />
+                Send Invitation
+              </Button>
+            </div>
+          </div>
+        </ResponsiveDialog>
+      </>
+    );
+  },
+};
+
+export const UploadFile: Story = {
+  args: {
+    open: false,
+    setOpen: () => {},
+    title: "",
+  },
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>
+          <Upload size={16} />
+          Upload File
+        </Button>
+        <ResponsiveDialog
+          description="Select a file to upload to your document library."
+          open={open}
+          setOpen={setOpen}
+          title="Upload Document"
+        >
+          <div className="space-y-4 py-4">
+            <div className="border-border bg-accent/50 rounded-lg border-2 border-dashed p-8 text-center">
+              <Upload className="text-muted-foreground mx-auto h-12 w-12" />
+              <p className="mt-2 text-sm font-medium">Drop files here or click to browse</p>
+              <p className="text-muted-foreground mt-1 text-xs">
+                Supports: PDF, DOCX, XLSX (Max 10MB)
+              </p>
+              <Button className="mt-4" size="sm" variant="outline">
+                Browse Files
+              </Button>
+            </div>
+            <div className="flex gap-2">
+              <Button className="flex-1" onClick={() => setOpen(false)}>
+                Start Upload
+              </Button>
+            </div>
+          </div>
+        </ResponsiveDialog>
+      </>
+    );
+  },
+};
+
+export const DeleteConfirmation: Story = {
+  args: {
+    open: false,
+    setOpen: () => {},
+    title: "",
+  },
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    const handleDelete = () => {
+      fn()();
+      setOpen(false);
+    };
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)} variant="destructive">
+          <Trash2 size={16} />
+          Delete Document
+        </Button>
+        <ResponsiveDialog
+          description="This action cannot be undone. This will permanently delete the document and remove all associated data."
+          open={open}
+          setOpen={setOpen}
+          title="Delete Document"
+        >
+          <div className="space-y-4 py-4">
+            <div className="border-destructive/50 bg-destructive/5 flex items-start gap-3 rounded-lg border p-4">
+              <AlertCircle className="text-destructive h-5 w-5 shrink-0" />
+              <div className="space-y-1">
+                <p className="text-sm font-medium">Warning</p>
+                <p className="text-muted-foreground text-sm">
+                  Are you absolutely sure you want to delete this document? This action is
+                  irreversible.
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <Button className="flex-1" onClick={handleDelete} variant="destructive">
+                <Trash2 size={16} />
+                Delete Permanently
+              </Button>
+            </div>
+          </div>
+        </ResponsiveDialog>
+      </>
+    );
+  },
+};
+
+export const DocumentPreview: Story = {
+  args: {
+    open: false,
+    setOpen: () => {},
+    title: "",
+  },
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)} variant="outline">
+          <FileText size={16} />
+          View Details
+        </Button>
+        <ResponsiveDialog
+          description="View information about this document."
+          open={open}
+          setOpen={setOpen}
+          title="Document Details"
+        >
+          <div className="space-y-4 py-4">
+            <div className="space-y-3">
+              <div className="border-border bg-accent/50 flex justify-between rounded-lg border p-3">
+                <span className="text-sm font-medium">File Name</span>
+                <span className="text-muted-foreground text-sm">Annual_Report_2024.pdf</span>
+              </div>
+              <div className="border-border bg-accent/50 flex justify-between rounded-lg border p-3">
+                <span className="text-sm font-medium">Size</span>
+                <span className="text-muted-foreground text-sm">2.4 MB</span>
+              </div>
+              <div className="border-border bg-accent/50 flex justify-between rounded-lg border p-3">
+                <span className="text-sm font-medium">Last Modified</span>
+                <span className="text-muted-foreground text-sm">Dec 15, 2024</span>
+              </div>
+              <div className="border-border bg-accent/50 flex justify-between rounded-lg border p-3">
+                <span className="text-sm font-medium">Created By</span>
+                <span className="text-muted-foreground text-sm">John Doe</span>
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <Button className="flex-1" onClick={() => setOpen(false)} variant="outline">
+                Download
+              </Button>
+              <Button className="flex-1" onClick={() => setOpen(false)}>
+                Open
+              </Button>
+            </div>
+          </div>
+        </ResponsiveDialog>
+      </>
+    );
+  },
+};
+
+export const NoDescription: Story = {
+  args: {
+    open: false,
+    setOpen: () => {},
+    title: "",
+  },
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)} variant="outline">
+          Open Simple Dialog
+        </Button>
+        <ResponsiveDialog open={open} setOpen={setOpen} title="Simple Dialog">
+          <div className="py-4">
+            <p className="text-sm">
+              This responsive dialog doesn't have a description, just a title and content.
+            </p>
+          </div>
+        </ResponsiveDialog>
+      </>
+    );
+  },
+};

package/template/apps/web/src/components/responsive-dialog/responsive-dialog.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import type { Dispatch, PropsWithChildren, SetStateAction } from "react";
+import { useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/dialog/dialog";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/drawer/drawer";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { cn } from "@/lib/utils";
+import { Button } from "../button/button";
+
+type Props = PropsWithChildren & {
+  /** Extra classes for the desktop dialog panel (e.g. `sm:max-w-md`). */
+  className?: string;
+  description?: string;
+  /** Reset on open, e.g. a react-hook-form `useForm()` result. */
+  form?: { reset: () => void };
+  isPending?: boolean;
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  title?: string;
+};
+
+export function ResponsiveDialog({
+  children,
+  className,
+  description,
+  form,
+  isPending = false,
+  open,
+  setOpen,
+  title,
+}: Props) {
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const t = useTranslations("Common");
+
+  useEffect(() => {
+    if (open && form) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!newOpen && isPending) {
+      return;
+    }
+    setOpen(newOpen);
+  };
+
+  if (isDesktop) {
+    return (
+      <Dialog onOpenChange={handleOpenChange} open={open}>
+        <DialogContent aria-describedby={description ?? undefined} className={className}>
+          <DialogHeader>
+            <DialogTitle className={cn(!title && "sr-only")}>{title}</DialogTitle>
+            {description && <DialogDescription>{description}</DialogDescription>}
+          </DialogHeader>
+          {children}
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Drawer onOpenChange={handleOpenChange} open={open}>
+      <DrawerContent aria-describedby={description ?? undefined}>
+        <DrawerHeader className="text-left">
+          <DrawerTitle className={cn(!title && "sr-only")}>{title}</DrawerTitle>
+          {description && <DrawerDescription>{description}</DrawerDescription>}
+        </DrawerHeader>
+        <div className="px-5">{children}</div>
+        <DrawerFooter className="mx-1 pt-0.5">
+          <DrawerClose asChild>
+            <Button disabled={isPending} variant="secondary">
+              {t("cancel")}
+            </Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}

package/template/apps/web/src/components/searchbar/searchbar.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { Searchbar } from "./searchbar";
+
+const meta = {
+  argTypes: {
+    disabled: {
+      control: "boolean",
+      description: "Disables the searchbar",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text",
+    },
+  },
+  component: Searchbar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Searchbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    className: "w-96",
+    placeholder: "Suche nach Dokumenten, Karteikarten...",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const field = canvas.getByRole("textbox");
+
+    await expect(canvas.queryByRole("button", { name: /clear/i })).not.toBeInTheDocument();
+
+    await userEvent.type(field, "thermodynamics");
+    await expect(field).toHaveValue("thermodynamics");
+
+    await userEvent.click(await canvas.findByRole("button", { name: /clear/i }));
+    await expect(field).toHaveValue("");
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    className: "w-96",
+    label: "Suche",
+    placeholder: "Suche nach Dokumenten, Karteikarten...",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    className: "w-96",
+    disabled: true,
+    placeholder: "Suche nach Dokumenten, Karteikarten...",
+  },
+};

package/template/apps/web/src/components/searchbar/searchbar.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Search, X } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { type ComponentProps, useState } from "react";
+import { Input } from "@/components/input/input";
+
+export type SearchbarProps = Omit<
+  ComponentProps<typeof Input>,
+  "leadingIcon" | "trailingIcon" | "type"
+> & {
+  onClear?: () => void;
+};
+
+export function Searchbar({ onChange, onClear, value, ...props }: SearchbarProps) {
+  const t = useTranslations("Common.a11y");
+  const [internalValue, setInternalValue] = useState("");
+  const currentValue = value ?? internalValue;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      onChange(e);
+    } else {
+      setInternalValue(e.target.value);
+    }
+  };
+
+  const handleClear = () => {
+    if (onChange) {
+      const event = {
+        currentTarget: { value: "" },
+        target: { value: "" },
+      } as React.ChangeEvent<HTMLInputElement>;
+      onChange(event);
+    } else {
+      setInternalValue("");
+    }
+    onClear?.();
+  };
+
+  return (
+    <Input
+      {...props}
+      leadingIcon={<Search className="h-5 w-5" />}
+      onChange={handleChange}
+      trailingIcon={
+        currentValue ? (
+          <button
+            aria-label={t("clearSearch")}
+            className="hover:text-foreground flex cursor-pointer items-center justify-center transition-colors"
+            onClick={handleClear}
+            title={t("clearSearch")}
+            type="button"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        ) : undefined
+      }
+      value={currentValue}
+    />
+  );
+}
+
+Searchbar.displayName = "Searchbar";