create-nexst-monorepo 0.1.0

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
+import { Button } from "./button";
+
+const meta = {
+  args: { children: "Save changes", onClick: fn() },
+  component: Button,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  play: async ({ args, canvasElement }) => {
+    await userEvent.click(within(canvasElement).getByRole("button", { name: "Save changes" }));
+    await expect(args.onClick).toHaveBeenCalledOnce();
+  },
+};
+
+export const Secondary: Story = { args: { variant: "secondary" } };
+
+export const Outline: Story = { args: { variant: "outline" } };
+
+export const Destructive: Story = { args: { children: "Delete", variant: "destructive" } };
+
+export const Loading: Story = {
+  args: { isLoading: true },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole("button")).toBeDisabled();
+  },
+};

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

@@ -0,0 +1,32 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef } from "react";
+import { Spinner } from "@/components/spinner/spinner";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "./button-variants";
+
+export type ButtonProps = ComponentPropsWithRef<"button"> &
+  VariantProps<typeof buttonVariants> & { isLoading?: boolean };
+
+export function Button({
+  children,
+  className,
+  disabled,
+  isLoading = false,
+  size,
+  type = "button",
+  variant,
+  ...rest
+}: ButtonProps) {
+  return (
+    <button
+      aria-busy={isLoading || undefined}
+      className={cn(buttonVariants({ size, variant }), className)}
+      disabled={disabled || isLoading}
+      type={type}
+      {...rest}
+    >
+      {isLoading ? <Spinner aria-hidden className="shrink-0" size={18} /> : null}
+      {children}
+    </button>
+  );
+}

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

@@ -0,0 +1,312 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import Link from "next/link";
+import { useState } from "react";
+import { expect, fn, userEvent, within } from "storybook/test";
+import { Checkbox } from "./checkbox";
+
+const meta: Meta<typeof Checkbox> = {
+  args: {
+    "aria-label": "Accept terms and conditions",
+  },
+  component: Checkbox,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    onCheckedChange: fn(),
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+
+    await expect(checkbox).toBeInTheDocument();
+    await expect(checkbox).not.toBeChecked();
+    await expect(checkbox).not.toBeDisabled();
+
+    await userEvent.click(checkbox);
+
+    await expect(checkbox).toBeChecked();
+    await expect(args.onCheckedChange).toHaveBeenCalledWith(true);
+
+    await userEvent.click(checkbox);
+
+    await expect(checkbox).not.toBeChecked();
+    await expect(args.onCheckedChange).toHaveBeenCalledWith(false);
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    defaultChecked: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+
+    await expect(checkbox).toBeInTheDocument();
+    await expect(checkbox).toBeChecked();
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    onCheckedChange: fn(),
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+
+    await expect(checkbox).toBeInTheDocument();
+    await expect(checkbox).toBeDisabled();
+    await expect(checkbox).not.toBeChecked();
+
+    await userEvent.click(checkbox);
+
+    await expect(checkbox).not.toBeChecked();
+    await expect(args.onCheckedChange).not.toHaveBeenCalled();
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    defaultChecked: true,
+    disabled: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+
+    await expect(checkbox).toBeInTheDocument();
+    await expect(checkbox).toBeDisabled();
+    await expect(checkbox).toBeChecked();
+
+    await userEvent.click(checkbox);
+
+    await expect(checkbox).toBeChecked();
+  },
+};
+
+export const WithLabel: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+    const label = canvas.getByText("Accept terms and conditions");
+
+    await expect(checkbox).toBeInTheDocument();
+    await expect(label).toBeInTheDocument();
+    await expect(checkbox).not.toBeChecked();
+
+    await userEvent.click(label);
+
+    await expect(checkbox).toBeChecked();
+
+    await userEvent.click(checkbox);
+
+    await expect(checkbox).not.toBeChecked();
+  },
+  render: () => {
+    const [checked, setChecked] = useState(false);
+
+    return (
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          checked={checked}
+          id="terms"
+          onCheckedChange={(value) => setChecked(value as boolean)}
+        />
+        <label
+          className="cursor-pointer text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          htmlFor="terms"
+        >
+          Accept terms and conditions
+        </label>
+      </div>
+    );
+  },
+};
+
+export const WithLongLabel: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+    const label = canvas.getByText(/I agree to the terms/i);
+
+    await expect(checkbox).toBeInTheDocument();
+    await expect(label).toBeInTheDocument();
+    await expect(checkbox).not.toBeChecked();
+
+    await userEvent.click(label);
+
+    await expect(checkbox).toBeChecked();
+  },
+  render: () => {
+    const [checked, setChecked] = useState(false);
+
+    return (
+      <div className="flex max-w-md items-start space-x-2">
+        <Checkbox
+          checked={checked}
+          className="mt-1"
+          id="terms-long"
+          onCheckedChange={(value) => setChecked(value as boolean)}
+        />
+        <label
+          className="cursor-pointer text-sm leading-relaxed font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          htmlFor="terms-long"
+        >
+          I agree to the terms and conditions, privacy policy, and understand that my data will be
+          processed according to the GDPR regulations.
+        </label>
+      </div>
+    );
+  },
+};
+
+export const FormExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+    const submitButton = canvas.getByRole("button", { name: /sign up/i });
+
+    await expect(checkbox).toBeInTheDocument();
+    await expect(checkbox).not.toBeChecked();
+    await expect(submitButton).toBeDisabled();
+
+    await userEvent.click(checkbox);
+
+    await expect(checkbox).toBeChecked();
+    await expect(submitButton).toBeEnabled();
+
+    await userEvent.click(checkbox);
+
+    await expect(checkbox).not.toBeChecked();
+    await expect(submitButton).toBeDisabled();
+  },
+  render: () => {
+    const [checked, setChecked] = useState(false);
+
+    return (
+      <form className="max-w-md space-y-4 rounded-lg border p-6">
+        <h3 className="text-lg font-semibold">Sign Up</h3>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium" htmlFor="signup-email">
+            Email
+          </label>
+          <input
+            aria-label="Email"
+            className="w-full rounded-md border px-3 py-2"
+            id="signup-email"
+            placeholder="email@example.com"
+            type="email"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium" htmlFor="signup-password">
+            Password
+          </label>
+          <input
+            aria-label="Password"
+            className="w-full rounded-md border px-3 py-2"
+            id="signup-password"
+            placeholder="********"
+            type="password"
+          />
+        </div>
+
+        <div className="flex items-start space-x-2">
+          <Checkbox
+            checked={checked}
+            className="mt-1"
+            id="signup-terms"
+            onCheckedChange={(value) => setChecked(value as boolean)}
+          />
+          <label className="cursor-pointer text-sm leading-relaxed" htmlFor="signup-terms">
+            By signing up, you agree to our{" "}
+            <Link className="text-brand-600 underline" href="#">
+              Terms of Service
+            </Link>{" "}
+            and{" "}
+            <Link className="text-brand-600 underline" href="#">
+              Privacy Policy
+            </Link>
+          </label>
+        </div>
+
+        <button
+          className="bg-brand-600 hover:bg-brand-700 w-full rounded-md px-4 py-2 text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+          disabled={!checked}
+          type="submit"
+        >
+          Sign Up
+        </button>
+      </form>
+    );
+  },
+};
+
+export const MultipleCheckboxes: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkboxes = canvas.getAllByRole("checkbox");
+
+    await expect(checkboxes).toHaveLength(4);
+
+    await expect(checkboxes[0]).toBeChecked();
+    await expect(checkboxes[1]).not.toBeChecked();
+    await expect(checkboxes[2]).toBeChecked();
+    await expect(checkboxes[3]).not.toBeChecked();
+
+    await userEvent.click(checkboxes[1]);
+
+    await expect(checkboxes[1]).toBeChecked();
+
+    await userEvent.click(checkboxes[0]);
+
+    await expect(checkboxes[0]).not.toBeChecked();
+
+    const smsLabel = canvas.getByText("Receive SMS notifications");
+    await userEvent.click(smsLabel);
+
+    await expect(checkboxes[1]).not.toBeChecked();
+  },
+  render: () => {
+    const [items, setItems] = useState([
+      { checked: true, id: "1", label: "Receive email notifications" },
+      { checked: false, id: "2", label: "Receive SMS notifications" },
+      { checked: true, id: "3", label: "Receive push notifications" },
+      { checked: false, id: "4", label: "Marketing emails" },
+    ]);
+
+    const handleToggle = (id: string) => {
+      setItems(items.map((item) => (item.id === id ? { ...item, checked: !item.checked } : item)));
+    };
+
+    return (
+      <div className="max-w-md space-y-3 rounded-lg border p-6">
+        <h3 className="mb-4 text-lg font-semibold">Notification Preferences</h3>
+        {items.map((item) => (
+          <div className="flex items-center space-x-2" key={item.id}>
+            <Checkbox
+              checked={item.checked}
+              id={item.id}
+              onCheckedChange={() => handleToggle(item.id)}
+            />
+            <label className="cursor-pointer text-sm font-medium" htmlFor={item.id}>
+              {item.label}
+            </label>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,38 @@
+"use client";
+
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import type { ComponentPropsWithoutRef, ComponentRef, RefObject } from "react";
+import { cn } from "@/lib/utils";
+
+function Checkbox({
+  className,
+  ref,
+  ...props
+}: ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+  ref?: RefObject<ComponentRef<typeof CheckboxPrimitive.Root> | null>;
+}) {
+  return (
+    <CheckboxPrimitive.Root
+      className={cn(
+        "peer border-input bg-background flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-[6px] border shadow-xs outline-none",
+        "transition-[border-color,background-color,box-shadow] duration-150",
+        "dark:bg-input/20",
+        "hover:border-ring/60",
+        "focus-visible:border-ring focus-visible:ring-ring/25 focus-visible:ring-2",
+        "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        "disabled:bg-muted/50 dark:disabled:bg-muted/30 disabled:cursor-not-allowed disabled:opacity-70 disabled:shadow-none",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+        <Check className="size-3.5" strokeWidth={3} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, within } from "storybook/test";
+import { DangerPanel } from "./danger-panel";
+
+const meta = {
+  args: {
+    message:
+      "This permanently removes the item and everything attached to it. This cannot be undone.",
+    title: "This action is irreversible",
+  },
+  component: DangerPanel,
+  decorators: [
+    (Story) => (
+      <div className="w-[26rem]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DangerPanel>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const alert = within(canvasElement).getByRole("alert");
+
+    await expect(alert).toHaveTextContent("This action is irreversible");
+  },
+};
+
+export const DeleteAccount: Story = {
+  args: {
+    message:
+      "Your profile, uploads, comments and karma will be deleted. Study materials you chose to keep stay available anonymously.",
+    title: "Deleting your account is permanent",
+  },
+};

package/template/apps/web/src/components/dialog/danger-panel.tsx

@@ -0,0 +1,32 @@
+import { AlertTriangle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type DangerPanelProps = {
+  className?: string;
+  message: string;
+  title: string;
+};
+
+/**
+ * Destructive warning callout inside a confirmation dialog. Shared by
+ * `DeleteConfirmDialog` and `DeleteAccountDialog`, which each carried their own
+ * copy of this markup.
+ */
+export function DangerPanel({ className, message, title }: DangerPanelProps) {
+  return (
+    <div
+      className={cn("border-destructive/20 bg-destructive/5 rounded-lg border p-4", className)}
+      role="alert"
+    >
+      <div className="flex gap-3">
+        <div className="bg-destructive/10 ring-destructive/20 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg ring-1">
+          <AlertTriangle aria-hidden className="text-destructive h-5 w-5" />
+        </div>
+        <div className="flex-1 space-y-1">
+          <p className="text-foreground text-sm font-semibold">{title}</p>
+          <p className="text-muted-foreground text-xs leading-relaxed">{message}</p>
+        </div>
+      </div>
+    </div>
+  );
+}