@dowel-ui/react 0.5.0 → 0.7.0

package/src/blocks/dashboard/dashboard.tsx

@@ -1,192 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-
-import {
-  ActivityContent,
-  ActivityDescription,
-  ActivityFeed,
-  ActivityIndicator,
-  ActivityItem,
-  ActivityTime,
-  ActivityTitle,
-} from "@/components/activity-feed";
-import { Badge } from "@/components/badge";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/card";
-import { Skeleton } from "@/components/skeleton";
-import { cn } from "@/lib/utils";
-
-/**
- * An overview page: headline numbers and what happened recently.
- *
- * The trend on a stat is stated in words as well as by direction and colour —
- * "up 12.4%" rather than a green triangle — because a triangle is unreadable to
- * a screen reader and ambiguous to anyone who cannot tell the colours apart.
- */
-
-export interface DashboardStat {
-  id: string;
-  label: string;
-  value: string;
-  /** Signed change, e.g. 12.4 or -3.1. Omit when there is nothing to compare to. */
-  change?: number;
-  /** What the change is measured against. */
-  comparison?: string;
-  /** Whether a rise is good. Churn going up is not. */
-  higherIsBetter?: boolean;
-}
-
-export interface DashboardEvent {
-  id: string;
-  title: string;
-  detail?: string;
-  /** Machine-readable timestamp. */
-  at: string;
-  /** Human label, e.g. "12 minutes ago". */
-  label: string;
-  tone?: "default" | "success" | "warning" | "destructive";
-}
-
-export interface DashboardBlockProps {
-  title?: string;
-  description?: string;
-  stats: DashboardStat[];
-  events?: DashboardEvent[];
-  /** Renders placeholders instead of content. */
-  loading?: boolean;
-  /** Anything to put beside the heading — a date range picker, an action. */
-  actions?: ReactNode;
-  className?: string;
-}
-
-function formatChange(change: number): string {
-  const rounded = Math.abs(change).toFixed(1);
-  return `${change >= 0 ? "up" : "down"} ${rounded}%`;
-}
-
-export function DashboardBlock({
-  title = "Overview",
-  description = "How things are going.",
-  stats,
-  events = [],
-  loading = false,
-  actions,
-  className,
-}: DashboardBlockProps) {
-  return (
-    <div className={cn("flex flex-col gap-6", className)}>
-      <div className="flex flex-wrap items-end justify-between gap-3">
-        <div>
-          <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
-          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
-        </div>
-        {actions}
-      </div>
-
-      <section aria-label="Key metrics" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {stats.map((stat) => {
-          const good =
-            stat.change === undefined
-              ? undefined
-              : (stat.higherIsBetter ?? true)
-                ? stat.change >= 0
-                : stat.change < 0;
-
-          return (
-            <Card key={stat.id}>
-              <CardHeader className="pb-2">
-                <CardDescription>{stat.label}</CardDescription>
-                {/* Not a heading: a number is data, and making it one both
-                    breaks the heading order and litters the outline. */}
-                <p className="text-2xl leading-tight font-semibold tracking-tight tabular-nums">
-                  {loading ? <Skeleton className="h-7 w-24" /> : stat.value}
-                </p>
-              </CardHeader>
-              <CardContent>
-                {loading ? (
-                  <Skeleton className="h-4 w-32" />
-                ) : stat.change === undefined ? null : (
-                  <p className={cn("text-xs", good ? "text-success" : "text-destructive")}>
-                    {/* In words: direction and magnitude, not a coloured arrow. */}
-                    {formatChange(stat.change)}
-                    {stat.comparison ? (
-                      <span className="text-muted-foreground"> {stat.comparison}</span>
-                    ) : null}
-                  </p>
-                )}
-              </CardContent>
-            </Card>
-          );
-        })}
-      </section>
-
-      {events.length > 0 || loading ? (
-        <Card>
-          <CardHeader>
-            <CardTitle asChild>
-              <h2>Recent activity</h2>
-            </CardTitle>
-            <CardDescription>The last few things that happened.</CardDescription>
-          </CardHeader>
-          <CardContent>
-            {loading ? (
-              <div className="flex flex-col gap-4">
-                {[0, 1, 2].map((index) => (
-                  <div key={index} className="flex gap-3">
-                    <Skeleton className="size-6 rounded-full" />
-                    <div className="flex-1 space-y-2">
-                      <Skeleton className="h-4 w-48" />
-                      <Skeleton className="h-3 w-24" />
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <ActivityFeed>
-                {events.map((event, index) => (
-                  <ActivityItem key={event.id} last={index === events.length - 1}>
-                    <ActivityIndicator
-                      className={cn(
-                        event.tone === "success" && "border-success/40 text-success",
-                        event.tone === "warning" && "border-warning/40 text-warning",
-                        event.tone === "destructive" &&
-                          "border-destructive/40 text-destructive",
-                      )}
-                    />
-                    <ActivityContent>
-                      <ActivityTitle className="flex flex-wrap items-center gap-2">
-                        {event.title}
-                        {event.tone && event.tone !== "default" ? (
-                          <Badge
-                            size="sm"
-                            variant={
-                              event.tone === "success"
-                                ? "success"
-                                : event.tone === "warning"
-                                  ? "warning"
-                                  : "destructive"
-                            }
-                          >
-                            {event.tone === "success"
-                              ? "Succeeded"
-                              : event.tone === "warning"
-                                ? "Warning"
-                                : "Failed"}
-                          </Badge>
-                        ) : null}
-                      </ActivityTitle>
-                      {event.detail ? (
-                        <ActivityDescription>{event.detail}</ActivityDescription>
-                      ) : null}
-                      <ActivityTime dateTime={event.at}>{event.label}</ActivityTime>
-                    </ActivityContent>
-                  </ActivityItem>
-                ))}
-              </ActivityFeed>
-            )}
-          </CardContent>
-        </Card>
-      ) : null}
-    </div>
-  );
-}

package/src/blocks/dashboard/index.ts

@@ -1,6 +0,0 @@
-export {
-  DashboardBlock,
-  type DashboardBlockProps,
-  type DashboardEvent,
-  type DashboardStat,
-} from "./dashboard";

package/src/blocks/dashboard/meta.ts

@@ -1,18 +0,0 @@
-import { defineMeta } from "@/registry/schema";
-
-export const meta = defineMeta({
-  name: "dashboard",
-  kind: "block",
-  title: "Dashboard",
-  description: "An overview page with headline metrics and a recent activity feed.",
-  category: "data",
-  status: "stable",
-  dependencies: [],
-  registryDependencies: ["activity-feed", "badge", "card", "skeleton"],
-  files: ["dashboard.tsx"],
-  a11y:
-    'Each metric states its change in words — "up 12.4%" — rather than by a coloured arrow, ' +
-    "which is unreadable to a screen reader and ambiguous to anyone who cannot distinguish the " +
-    "colours. Whether a rise is good is configurable, since churn going up is not. The metrics " +
-    "sit in a named region so they can be jumped to.",
-});

package/src/blocks/forgot-password/forgot-password.tsx

@@ -1,158 +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 {
-  EmptyState,
-  EmptyStateDescription,
-  EmptyStateIcon,
-  EmptyStateTitle,
-} from "@/components/empty-state";
-import { Form, FormControl, FormField, FormLabel, FormMessage } from "@/components/form";
-import { Input } from "@/components/input";
-import { cn } from "@/lib/utils";
-
-/**
- * A password reset request.
- *
- * The confirmation deliberately does not say whether the address was found.
- * Telling an anonymous visitor which emails have accounts turns this form into
- * an account enumeration oracle, and the same neutral message covers both cases
- * without being a lie.
- */
-
-export interface ForgotPasswordBlockProps {
-  onSubmit?: (values: { email: string }) => void;
-  /** Switches to the confirmation view. */
-  sent?: boolean;
-  error?: string;
-  pending?: boolean;
-  loginHref?: string;
-  className?: string;
-}
-
-export function ForgotPasswordBlock({
-  onSubmit,
-  sent = false,
-  error,
-  pending = false,
-  loginHref = "/login",
-  className,
-}: ForgotPasswordBlockProps) {
-  const [email, setEmail] = useState("");
-  const [touched, setTouched] = useState(false);
-
-  const emailError =
-    touched && !email.includes("@") ? "Enter a valid email address." : undefined;
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    setTouched(true);
-    if (!email.includes("@")) return;
-    onSubmit?.({ email });
-  }
-
-  if (sent) {
-    return (
-      <Card className={cn("w-full max-w-sm", className)}>
-        <CardContent className="pt-6">
-          {/* Announced, because it replaces the form the user just submitted. */}
-          <EmptyState role="status" aria-live="polite">
-            <EmptyStateIcon>
-              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
-                <rect
-                  x="3"
-                  y="5"
-                  width="18"
-                  height="14"
-                  rx="2"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                />
-                <path
-                  d="m3 7 9 6 9-6"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                />
-              </svg>
-            </EmptyStateIcon>
-            <EmptyStateTitle>Check your inbox</EmptyStateTitle>
-            <EmptyStateDescription>
-              If an account exists for {email}, a reset link is on its way. It expires in an
-              hour.
-            </EmptyStateDescription>
-          </EmptyState>
-        </CardContent>
-        <CardFooter className="justify-center">
-          <a
-            href={loginHref}
-            className="text-sm font-medium text-primary underline underline-offset-4"
-          >
-            Back to sign in
-          </a>
-        </CardFooter>
-      </Card>
-    );
-  }
-
-  return (
-    <Card className={cn("w-full max-w-sm", className)}>
-      <CardHeader>
-        <CardTitle>Reset your password</CardTitle>
-        <CardDescription>
-          Enter the address you signed up with and we will send you a link.
-        </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="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>
-
-          <Button type="submit" loading={pending} className="w-full">
-            Send reset link
-          </Button>
-        </Form>
-      </CardContent>
-
-      <CardFooter className="justify-center">
-        <a
-          href={loginHref}
-          className="text-sm text-muted-foreground underline underline-offset-4"
-        >
-          Back to sign in
-        </a>
-      </CardFooter>
-    </Card>
-  );
-}

package/src/blocks/forgot-password/index.ts

@@ -1 +0,0 @@
-export { ForgotPasswordBlock, type ForgotPasswordBlockProps } from "./forgot-password";

package/src/blocks/forgot-password/meta.ts

@@ -1,18 +0,0 @@
-import { defineMeta } from "@/registry/schema";
-
-export const meta = defineMeta({
-  name: "forgot-password",
-  kind: "block",
-  title: "Forgot password",
-  description:
-    "A password reset request, with a confirmation that does not leak account existence.",
-  category: "form",
-  status: "stable",
-  dependencies: [],
-  registryDependencies: ["button", "card", "empty-state", "form", "input"],
-  files: ["forgot-password.tsx"],
-  a11y:
-    "The confirmation replaces the form, so it is a polite live region — otherwise a screen " +
-    "reader user submits and hears nothing. The wording is deliberately neutral about whether " +
-    "the address exists: confirming it would turn this form into an account enumeration oracle.",
-});

package/src/blocks/login/index.ts

@@ -1 +0,0 @@
-export { LoginBlock, type LoginBlockProps } from "./login";

package/src/blocks/login/login.tsx

@@ -1,178 +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, FormField, FormLabel, FormMessage } from "@/components/form";
-import { Input } from "@/components/input";
-import { Label } from "@/components/label";
-import { Separator } from "@/components/separator";
-import { cn } from "@/lib/utils";
-
-/**
- * A sign-in form.
- *
- * Wired for the parts that are easy to get wrong rather than left as markup:
- * the email field is typed and autocompleted correctly, errors are announced,
- * and the submit button reports its own busy state instead of leaving people
- * wondering whether the click registered.
- *
- * Validation here is the minimum that makes the form usable offline. Real
- * validation belongs to whatever the form is submitted to — pass `error` for a
- * server response.
- */
-
-export interface LoginBlockProps {
-  /** Called with the submitted credentials. */
-  onSubmit?: (values: { email: string; password: string; remember: boolean }) => void;
-  /** A server-side error, shown above the fields. */
-  error?: string;
-  /** Disables the form and shows the submit button as busy. */
-  pending?: boolean;
-  /** Where "Forgot password?" goes. */
-  forgotHref?: string;
-  /** Where "Create an account" goes. */
-  signupHref?: string;
-  className?: string;
-}
-
-export function LoginBlock({
-  onSubmit,
-  error,
-  pending = false,
-  forgotHref = "/forgot-password",
-  signupHref = "/signup",
-  className,
-}: LoginBlockProps) {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [remember, setRemember] = useState(false);
-  const [touched, setTouched] = useState(false);
-
-  const emailError =
-    touched && !email.includes("@") ? "Enter a valid email address." : undefined;
-  const passwordError = touched && password.length === 0 ? "Enter your password." : undefined;
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    setTouched(true);
-    if (!email.includes("@") || password.length === 0) return;
-    onSubmit?.({ email, password, remember });
-  }
-
-  return (
-    <Card className={cn("w-full max-w-sm", className)}>
-      <CardHeader>
-        <CardTitle>Sign in</CardTitle>
-        <CardDescription>Welcome back. Enter your details to continue.</CardDescription>
-      </CardHeader>
-
-      <CardContent>
-        <Form onSubmit={handleSubmit} className="gap-4">
-          {/* A server error is assertive: it arrived after the user acted, and
-              it is the reason nothing happened. */}
-          {error ? (
-            <p role="alert" className="text-sm font-medium text-destructive">
-              {error}
-            </p>
-          ) : null}
-
-          <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}>
-            <div className="flex items-center justify-between">
-              <FormLabel>Password</FormLabel>
-              <a
-                href={forgotHref}
-                className="text-xs font-medium text-muted-foreground underline underline-offset-4 hover:text-foreground"
-              >
-                Forgot password?
-              </a>
-            </div>
-            <FormControl>
-              <Input
-                type="password"
-                autoComplete="current-password"
-                value={password}
-                disabled={pending}
-                onChange={(event) => {
-                  setPassword(event.target.value);
-                }}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormField>
-
-          <div className="flex items-center gap-2">
-            <Checkbox
-              id="remember-me"
-              checked={remember}
-              disabled={pending}
-              onCheckedChange={(checked) => {
-                setRemember(checked === true);
-              }}
-            />
-            <Label htmlFor="remember-me" className="text-sm font-normal">
-              Keep me signed in
-            </Label>
-          </div>
-
-          <Button type="submit" loading={pending} className="w-full">
-            Sign in
-          </Button>
-        </Form>
-
-        <div className="my-5 flex items-center gap-3">
-          <Separator className="flex-1" />
-          <span className="text-2xs text-muted-foreground uppercase">or</span>
-          <Separator className="flex-1" />
-        </div>
-
-        <div className="grid gap-2">
-          <Button variant="outline" className="w-full" disabled={pending}>
-            Continue with GitHub
-          </Button>
-          <Button variant="outline" className="w-full" disabled={pending}>
-            Continue with Google
-          </Button>
-        </div>
-      </CardContent>
-
-      <CardFooter className="justify-center">
-        <p className="text-sm text-muted-foreground">
-          Don&rsquo;t have an account?{" "}
-          <a
-            href={signupHref}
-            className="font-medium text-primary underline underline-offset-4"
-          >
-            Create one
-          </a>
-        </p>
-      </CardFooter>
-    </Card>
-  );
-}

package/src/blocks/login/meta.ts

@@ -1,18 +0,0 @@
-import { defineMeta } from "@/registry/schema";
-
-export const meta = defineMeta({
-  name: "login",
-  kind: "block",
-  title: "Login",
-  description: "A sign-in form with validation, social providers and a busy state.",
-  category: "form",
-  status: "stable",
-  dependencies: [],
-  registryDependencies: ["button", "card", "checkbox", "form", "input", "label", "separator"],
-  files: ["login.tsx"],
-  a11y:
-    "Email and password fields carry the right type and autocomplete, so password managers and " +
-    "mobile keyboards behave. Field errors are tied to their inputs through the Form wiring; a " +
-    "server error is an assertive alert, because it arrived after the user acted and explains why " +
-    "nothing happened. The submit button reports its own busy state rather than going quiet.",
-});

package/src/blocks/pricing/index.ts

@@ -1 +0,0 @@
-export { PricingBlock, type PricingBlockProps, type PricingPlan } from "./pricing";

package/src/blocks/pricing/meta.ts

@@ -1,18 +0,0 @@
-import { defineMeta } from "@/registry/schema";
-
-export const meta = defineMeta({
-  name: "pricing",
-  kind: "block",
-  title: "Pricing",
-  description: "A pricing section with plan cards and a monthly/yearly toggle.",
-  category: "layout",
-  status: "stable",
-  dependencies: [],
-  registryDependencies: ["badge", "button", "card", "label", "switch"],
-  files: ["pricing.tsx"],
-  a11y:
-    "Switching the billing period rewrites every price on the page, so the change is announced " +
-    "politely rather than happening silently. Each plan's call to action names the plan — three " +
-    'buttons all reading "Choose" are indistinguishable out of context. Feature ticks are ' +
-    "decorative; the feature text carries the meaning.",
-});