@dowel-ui/react 0.5.0 → 0.8.0

package/src/blocks/settings/settings.tsx

@@ -1,317 +0,0 @@
-"use client";
-
-import { useState, type FormEvent, type ReactNode } from "react";
-
-import { Avatar, AvatarFallback } from "@/components/avatar";
-import { Button } from "@/components/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/card";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/dialog";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormLabel,
-  FormMessage,
-} from "@/components/form";
-import { Input } from "@/components/input";
-import { Label } from "@/components/label";
-import { Separator } from "@/components/separator";
-import { Switch } from "@/components/switch";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/tabs";
-import { cn } from "@/lib/utils";
-
-/**
- * A settings page: profile, notifications and a danger zone.
- *
- * Two things are deliberate. Switches apply immediately and have no Save button
- * — a switch that needs saving is a broken promise, so anything staged belongs
- * in a form instead. And the destructive action asks for confirmation naming
- * exactly what will be destroyed, rather than a generic "Are you sure?".
- */
-
-export interface SettingsProfile {
-  name: string;
-  email: string;
-  bio?: string;
-}
-
-export interface SettingsNotification {
-  id: string;
-  label: string;
-  description: string;
-  enabled: boolean;
-}
-
-export interface SettingsBlockProps {
-  profile: SettingsProfile;
-  notifications: SettingsNotification[];
-  /** Staged: the profile form has a Save button. */
-  onSaveProfile?: (profile: SettingsProfile) => void;
-  /** Immediate: a switch applies as soon as it is flipped. */
-  onToggleNotification?: (id: string, enabled: boolean) => void;
-  onDeleteAccount?: () => void;
-  pending?: boolean;
-  /** Extra tabs, if the product needs them. */
-  extraTabs?: { value: string; label: string; content: ReactNode }[];
-  className?: string;
-}
-
-export function SettingsBlock({
-  profile,
-  notifications,
-  onSaveProfile,
-  onToggleNotification,
-  onDeleteAccount,
-  pending = false,
-  extraTabs = [],
-  className,
-}: SettingsBlockProps) {
-  const [name, setName] = useState(profile.name);
-  const [email, setEmail] = useState(profile.email);
-  const [bio, setBio] = useState(profile.bio ?? "");
-  const [touched, setTouched] = useState(false);
-  const [confirmation, setConfirmation] = useState("");
-
-  const emailError =
-    touched && !email.includes("@") ? "Enter a valid email address." : undefined;
-  const nameError = touched && name.trim().length === 0 ? "Enter your name." : undefined;
-
-  function handleSave(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    setTouched(true);
-    if (!email.includes("@") || name.trim().length === 0) return;
-    onSaveProfile?.({ name, email, bio });
-  }
-
-  return (
-    <div className={cn("flex flex-col gap-6", className)}>
-      <div>
-        <h1 className="text-xl font-semibold tracking-tight">Settings</h1>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Manage your profile and how you are notified.
-        </p>
-      </div>
-
-      <Tabs defaultValue="profile">
-        <TabsList variant="underline">
-          <TabsTrigger value="profile" variant="underline">
-            Profile
-          </TabsTrigger>
-          <TabsTrigger value="notifications" variant="underline">
-            Notifications
-          </TabsTrigger>
-          {extraTabs.map((tab) => (
-            <TabsTrigger key={tab.value} value={tab.value} variant="underline">
-              {tab.label}
-            </TabsTrigger>
-          ))}
-          <TabsTrigger value="danger" variant="underline">
-            Danger zone
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="profile">
-          <Card>
-            <CardHeader>
-              <CardTitle asChild>
-                <h2>Profile</h2>
-              </CardTitle>
-              <CardDescription>This is how you appear to your team.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Form onSubmit={handleSave} className="gap-4">
-                <div className="flex items-center gap-4">
-                  <Avatar size="lg">
-                    <AvatarFallback>
-                      {name
-                        .split(" ")
-                        .map((part) => part[0] ?? "")
-                        .slice(0, 2)
-                        .join("")
-                        .toUpperCase()}
-                    </AvatarFallback>
-                  </Avatar>
-                  <Button type="button" variant="outline" size="sm" disabled={pending}>
-                    Change photo
-                  </Button>
-                </div>
-
-                <FormField name="name" error={nameError}>
-                  <FormLabel>Name</FormLabel>
-                  <FormControl>
-                    <Input
-                      autoComplete="name"
-                      value={name}
-                      disabled={pending}
-                      onChange={(event) => {
-                        setName(event.target.value);
-                      }}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormField>
-
-                <FormField name="email" error={emailError}>
-                  <FormLabel>Email</FormLabel>
-                  <FormControl>
-                    <Input
-                      type="email"
-                      autoComplete="email"
-                      value={email}
-                      disabled={pending}
-                      onChange={(event) => {
-                        setEmail(event.target.value);
-                      }}
-                    />
-                  </FormControl>
-                  <FormDescription>Used for sign-in and notifications.</FormDescription>
-                  <FormMessage />
-                </FormField>
-
-                <FormField name="bio">
-                  <FormLabel>Bio</FormLabel>
-                  <FormControl>
-                    <Input
-                      value={bio}
-                      disabled={pending}
-                      placeholder="A sentence about you"
-                      onChange={(event) => {
-                        setBio(event.target.value);
-                      }}
-                    />
-                  </FormControl>
-                </FormField>
-
-                <div className="flex justify-end">
-                  <Button type="submit" loading={pending}>
-                    Save changes
-                  </Button>
-                </div>
-              </Form>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="notifications">
-          <Card>
-            <CardHeader>
-              <CardTitle asChild>
-                <h2>Notifications</h2>
-              </CardTitle>
-              <CardDescription>
-                These apply straight away — there is nothing to save.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="divide-y divide-border p-0">
-              {notifications.map((notification) => (
-                <div
-                  key={notification.id}
-                  className="flex items-start justify-between gap-4 px-6 py-4"
-                >
-                  <div className="grid gap-1">
-                    <Label htmlFor={notification.id}>{notification.label}</Label>
-                    <p className="text-xs text-muted-foreground">{notification.description}</p>
-                  </div>
-                  <Switch
-                    id={notification.id}
-                    checked={notification.enabled}
-                    onCheckedChange={(checked) => {
-                      onToggleNotification?.(notification.id, checked);
-                    }}
-                  />
-                </div>
-              ))}
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        {extraTabs.map((tab) => (
-          <TabsContent key={tab.value} value={tab.value}>
-            {tab.content}
-          </TabsContent>
-        ))}
-
-        <TabsContent value="danger">
-          <Card className="border-destructive/30">
-            <CardHeader>
-              <CardTitle asChild>
-                <h2>Delete this account</h2>
-              </CardTitle>
-              <CardDescription>
-                Everything in the workspace is removed permanently. This cannot be undone.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Separator className="mb-4" />
-              <p className="text-sm text-muted-foreground">
-                Your projects, deployments and audit history are deleted along with the account.
-              </p>
-            </CardContent>
-            <CardFooter className="justify-end">
-              <Dialog>
-                <DialogTrigger asChild>
-                  <Button variant="destructive">Delete account</Button>
-                </DialogTrigger>
-                <DialogContent className="max-w-md">
-                  <DialogHeader>
-                    <DialogTitle>Delete {profile.name}&rsquo;s account?</DialogTitle>
-                    {/* Names what is destroyed. "Are you sure?" tells nobody
-                        anything they did not already know. */}
-                    <DialogDescription>
-                      This permanently deletes the account, its projects and all deployment
-                      history. It cannot be undone.
-                    </DialogDescription>
-                  </DialogHeader>
-
-                  <div className="grid gap-2">
-                    <Label htmlFor="confirm-delete">
-                      Type <span className="font-mono">{profile.email}</span> to confirm
-                    </Label>
-                    <Input
-                      id="confirm-delete"
-                      value={confirmation}
-                      autoComplete="off"
-                      onChange={(event) => {
-                        setConfirmation(event.target.value);
-                      }}
-                    />
-                  </div>
-
-                  <DialogFooter>
-                    <DialogClose asChild>
-                      <Button variant="outline">Cancel</Button>
-                    </DialogClose>
-                    <Button
-                      variant="destructive"
-                      disabled={confirmation !== profile.email}
-                      onClick={onDeleteAccount}
-                    >
-                      Delete account
-                    </Button>
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}

package/src/blocks/signup/index.ts

@@ -1 +0,0 @@
-export { SignupBlock, estimatePasswordStrength, type SignupBlockProps } from "./signup";

package/src/blocks/signup/meta.ts

@@ -1,18 +0,0 @@
-import { defineMeta } from "@/registry/schema";
-
-export const meta = defineMeta({
-  name: "signup",
-  kind: "block",
-  title: "Sign up",
-  description: "An account creation form with a password strength hint and terms acceptance.",
-  category: "form",
-  status: "stable",
-  dependencies: [],
-  registryDependencies: ["button", "card", "checkbox", "form", "input", "progress"],
-  files: ["signup.tsx"],
-  a11y:
-    "The strength label is text and the bar beside it is aria-hidden, so the estimate is not " +
-    'announced twice. autoComplete="new-password" tells password managers to offer a generated ' +
-    "password rather than an existing one. Strength is a hint, never a gate: the form is validated " +
-    "on length alone.",
-});

package/src/blocks/signup/signup.tsx

@@ -1,240 +0,0 @@
-"use client";
-
-import { useState, type FormEvent } from "react";
-
-import { Button } from "@/components/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/card";
-import { Checkbox } from "@/components/checkbox";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormLabel,
-  FormMessage,
-} from "@/components/form";
-import { Input } from "@/components/input";
-import { Progress } from "@/components/progress";
-import { cn } from "@/lib/utils";
-
-/**
- * An account creation form.
- *
- * The password strength meter is the interesting part. It is a hint, not a
- * gate: the requirement is a length minimum, and the meter tells people how
- * they are doing without inventing rules about symbols that push everyone
- * towards the same predictable substitutions.
- */
-
-export interface SignupBlockProps {
-  onSubmit?: (values: { name: string; email: string; password: string }) => void;
-  error?: string;
-  pending?: boolean;
-  loginHref?: string;
-  /** Minimum password length. Length is the requirement that actually helps. */
-  minPasswordLength?: number;
-  className?: string;
-}
-
-interface Strength {
-  score: number;
-  label: string;
-  tone: "destructive" | "warning" | "success";
-}
-
-/**
- * A rough strength estimate.
- *
- * Deliberately crude, and deliberately not a validation rule. Its only job is
- * to nudge; the form is gated on length alone.
- */
-export function estimatePasswordStrength(password: string, minLength: number): Strength {
-  if (password.length === 0)
-    return { score: 0, label: "Enter a password", tone: "destructive" };
-
-  let score = Math.min(60, (password.length / (minLength * 2)) * 60);
-  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score += 15;
-  if (/\d/.test(password)) score += 10;
-  if (/[^\w\s]/.test(password)) score += 15;
-
-  const rounded = Math.min(100, Math.round(score));
-  if (password.length < minLength)
-    return { score: rounded, label: "Too short", tone: "destructive" };
-  if (rounded < 60) return { score: rounded, label: "Weak", tone: "warning" };
-  if (rounded < 85) return { score: rounded, label: "Good", tone: "success" };
-  return { score: rounded, label: "Strong", tone: "success" };
-}
-
-export function SignupBlock({
-  onSubmit,
-  error,
-  pending = false,
-  loginHref = "/login",
-  minPasswordLength = 12,
-  className,
-}: SignupBlockProps) {
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [accepted, setAccepted] = useState(false);
-  const [touched, setTouched] = useState(false);
-
-  const strength = estimatePasswordStrength(password, minPasswordLength);
-  const emailError =
-    touched && !email.includes("@") ? "Enter a valid email address." : undefined;
-  const passwordError =
-    touched && password.length < minPasswordLength
-      ? `Use at least ${String(minPasswordLength)} characters.`
-      : undefined;
-  const termsError = touched && !accepted ? "Accept the terms to continue." : undefined;
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    setTouched(true);
-    if (!email.includes("@") || password.length < minPasswordLength || !accepted) return;
-    onSubmit?.({ name, email, password });
-  }
-
-  return (
-    <Card className={cn("w-full max-w-sm", className)}>
-      <CardHeader>
-        <CardTitle>Create an account</CardTitle>
-        <CardDescription>Start building in a couple of minutes.</CardDescription>
-      </CardHeader>
-
-      <CardContent>
-        <Form onSubmit={handleSubmit} className="gap-4">
-          {error ? (
-            <p role="alert" className="text-sm font-medium text-destructive">
-              {error}
-            </p>
-          ) : null}
-
-          <FormField name="name">
-            <FormLabel>Name</FormLabel>
-            <FormControl>
-              <Input
-                autoComplete="name"
-                placeholder="Ada Lovelace"
-                value={name}
-                disabled={pending}
-                onChange={(event) => {
-                  setName(event.target.value);
-                }}
-              />
-            </FormControl>
-          </FormField>
-
-          <FormField name="email" error={emailError}>
-            <FormLabel>Email</FormLabel>
-            <FormControl>
-              <Input
-                type="email"
-                autoComplete="email"
-                placeholder="you@example.com"
-                value={email}
-                disabled={pending}
-                onChange={(event) => {
-                  setEmail(event.target.value);
-                }}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormField>
-
-          <FormField name="password" error={passwordError}>
-            <FormLabel>Password</FormLabel>
-            <FormControl>
-              <Input
-                type="password"
-                autoComplete="new-password"
-                value={password}
-                disabled={pending}
-                onChange={(event) => {
-                  setPassword(event.target.value);
-                }}
-              />
-            </FormControl>
-            <FormDescription>At least {minPasswordLength} characters.</FormDescription>
-            <FormMessage />
-          </FormField>
-
-          {password.length > 0 ? (
-            <div className="grid gap-1.5">
-              <div className="flex items-center justify-between text-xs">
-                <span className="text-muted-foreground">Password strength</span>
-                <span
-                  className={cn(
-                    strength.tone === "success"
-                      ? "text-success"
-                      : strength.tone === "warning"
-                        ? "text-warning"
-                        : "text-destructive",
-                  )}
-                >
-                  {strength.label}
-                </span>
-              </div>
-              {/* The label above already says the strength, so the bar is a
-                  summary rather than a second thing to read. */}
-              <Progress
-                value={strength.score}
-                size="sm"
-                tone={
-                  strength.tone === "success"
-                    ? "success"
-                    : strength.tone === "warning"
-                      ? "warning"
-                      : "destructive"
-                }
-                aria-hidden="true"
-              />
-            </div>
-          ) : null}
-
-          <FormField name="terms" error={termsError}>
-            <div className="flex items-start gap-2">
-              <FormControl>
-                <Checkbox
-                  className="mt-0.5"
-                  checked={accepted}
-                  disabled={pending}
-                  onCheckedChange={(checked) => {
-                    setAccepted(checked === true);
-                  }}
-                />
-              </FormControl>
-              {/* FormLabel, not a Label with a guessed htmlFor: the field
-                  generates the control's id, so anything hard-coded points at
-                  nothing and leaves the checkbox unnamed. */}
-              <FormLabel className="text-sm leading-snug font-normal">
-                I agree to the terms of service and privacy policy.
-              </FormLabel>
-            </div>
-            <FormMessage />
-          </FormField>
-
-          <Button type="submit" loading={pending} className="w-full">
-            Create account
-          </Button>
-        </Form>
-      </CardContent>
-
-      <CardFooter className="justify-center">
-        <p className="text-sm text-muted-foreground">
-          Already have an account?{" "}
-          <a href={loginHref} className="font-medium text-primary underline underline-offset-4">
-            Sign in
-          </a>
-        </p>
-      </CardFooter>
-    </Card>
-  );
-}