ruler-components 0.1.0 → 0.1.2

package/components/docs/badge-doc-page.tsx

@@ -1,363 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import {
-  BadgeCheck,
-  Bell,
-  Check,
-  CheckCircle2,
-  Clock,
-  Copy,
-  Rocket,
-  ShieldAlert,
-  Star,
-  XCircle,
-} from "lucide-react";
-import { Badge, type BadgeProps } from "@/components/ui/badge";
-import { Tooltip } from "@/components/ui/tooltip";
-import {
-  DocsAccessibility,
-  DocsApiSection,
-  DocsApiTable,
-  DocsPage,
-  DocsPageHeader,
-  DocsSection,
-  DocsSectionGrid,
-} from "@/components/docs/docs-page";
-import { cn } from "@/lib/cn";
-
-const API_ROWS = [
-  { prop: "variant", type: '"default" | "info" | "success" | "warning" | "error" | "outline"', default: '"default"', description: "The visual style variant" },
-  { prop: "size", type: '"sm" | "md" | "lg"', default: '"md"', description: "The size of the badge" },
-  { prop: "children", type: "ReactNode", default: "—", description: "The badge label content" },
-  { prop: "className", type: "string", default: "—", description: "Additional CSS classes" },
-];
-
-const ACCESSIBILITY_ITEMS = [
-  "Use badges to supplement text, not replace it.",
-  "Don't rely on color alone to communicate status.",
-  "Keep badge labels short and descriptive.",
-  "Ensure sufficient color contrast for readability.",
-  "Avoid using badges for critical information that requires immediate action.",
-];
-
-type Variant = NonNullable<BadgeProps["variant"]>;
-type Size = NonNullable<BadgeProps["size"]>;
-
-const VARIANTS: { value: Variant; label: string; swatch: string }[] = [
-  { value: "default", label: "Default", swatch: "bg-zinc-400" },
-  { value: "info", label: "Info", swatch: "bg-[#0070BA]" },
-  { value: "success", label: "Success", swatch: "bg-[#28A745]" },
-  { value: "warning", label: "Warning", swatch: "bg-[#E58E00]" },
-  { value: "error", label: "Error", swatch: "bg-[#D93025]" },
-  { value: "outline", label: "Outline", swatch: "bg-transparent ring-1 ring-inset ring-zinc-400" },
-];
-
-const SIZES: Size[] = ["sm", "md", "lg"];
-
-const MEANINGS: {
-  variant: Variant;
-  accent: string;
-  title: string;
-  guidance: string;
-  example: string;
-}[] = [
-  {
-    variant: "default",
-    accent: "bg-zinc-400",
-    title: "Default",
-    guidance: "Neutral metadata — a count, a category, anything without a status.",
-    example: "12 items",
-  },
-  {
-    variant: "info",
-    accent: "bg-[#0070BA]",
-    title: "Info",
-    guidance: "Something is active or in motion, but no action is required yet.",
-    example: "In review",
-  },
-  {
-    variant: "success",
-    accent: "bg-[#28A745]",
-    title: "Success",
-    guidance: "A completed, verified, or healthy state.",
-    example: "Verified",
-  },
-  {
-    variant: "warning",
-    accent: "bg-[#E58E00]",
-    title: "Warning",
-    guidance: "Needs attention soon, but isn't broken yet.",
-    example: "Expiring soon",
-  },
-  {
-    variant: "error",
-    accent: "bg-[#D93025]",
-    title: "Error",
-    guidance: "Something failed or is blocking progress — the loudest signal in the set.",
-    example: "Failed",
-  },
-  {
-    variant: "outline",
-    accent: "bg-transparent ring-1 ring-inset ring-zinc-400",
-    title: "Outline",
-    guidance: "Quiet, low-emphasis tags — categories, filters, anything decorative.",
-    example: "Design",
-  },
-];
-
-const DEPLOYS = [
-  { name: "marketing-site", branch: "main", status: "success" as const, label: "Deployed", time: "2m ago" },
-  { name: "api-gateway", branch: "feat/rate-limit", status: "info" as const, label: "Building", time: "just now" },
-  { name: "docs-portal", branch: "main", status: "success" as const, label: "Deployed", time: "18m ago" },
-  { name: "admin-dashboard", branch: "fix/auth-redirect", status: "error" as const, label: "Failed", time: "1h ago" },
-  { name: "billing-worker", branch: "main", status: "warning" as const, label: "Degraded", time: "3h ago" },
-];
-
-function codeFor(variant: Variant, size: Size, withIcon: boolean) {
-  const props = [size !== "md" && `size="${size}"`, variant !== "default" && `variant="${variant}"`]
-    .filter(Boolean)
-    .join(" ");
-  const open = props ? `<Badge ${props}>` : "<Badge>";
-  const children = withIcon ? "<CheckCircle2 />\n  Verified" : "Badge";
-  return `${open}\n  ${children}\n</Badge>`;
-}
-
-export function BadgeDocPage() {
-  const [variant, setVariant] = useState<Variant>("success");
-  const [size, setSize] = useState<Size>("md");
-  const [withIcon, setWithIcon] = useState(true);
-  const [copied, setCopied] = useState(false);
-
-  const snippet = codeFor(variant, size, withIcon);
-
-  function copySnippet() {
-    navigator.clipboard.writeText(snippet).catch(() => {});
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={BadgeCheck}
-        title="Badge"
-        description="Displays a compact label for highlighting status, categories, or metadata at a glance."
-      />
-
-      <DocsSection
-        first
-        title="Playground"
-        description="Build a badge and copy the exact markup — every combination, live."
-      >
-        <div className="overflow-hidden rounded-2xl border border-zinc-200 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:border-zinc-800 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)]">
-          <div className="relative flex min-h-[11rem] items-center justify-center overflow-hidden bg-zinc-50 dark:bg-zinc-900/40">
-            <div
-              aria-hidden
-              className="pointer-events-none absolute inset-0 opacity-[0.4] dark:opacity-[0.15]"
-              style={{
-                backgroundImage:
-                  "linear-gradient(to right, rgb(161 161 170 / 0.35) 1px, transparent 1px), linear-gradient(to bottom, rgb(161 161 170 / 0.35) 1px, transparent 1px)",
-                backgroundSize: "24px 24px",
-              }}
-            />
-            <div className="relative scale-[1.8]">
-              <Badge
-                key={`${variant}-${size}-${withIcon}`}
-                variant={variant}
-                size={size}
-                className="animate-[pagination-pop_0.25s_ease-out]"
-              >
-                {withIcon && <CheckCircle2 className={size === "sm" ? "h-2.5 w-2.5" : "h-3 w-3"} />}
-                {withIcon ? "Verified" : "Badge"}
-              </Badge>
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-5 border-t border-zinc-200 p-5 dark:border-zinc-800">
-            <div className="flex flex-wrap items-start justify-between gap-6">
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Variant
-                </p>
-                <div className="flex flex-wrap gap-1.5">
-                  {VARIANTS.map((v) => (
-                    <Tooltip key={v.value} content={v.label}>
-                      <button
-                        type="button"
-                        onClick={() => setVariant(v.value)}
-                        aria-label={v.label}
-                        className={cn(
-                          "flex h-8 w-8 items-center justify-center rounded-lg border transition-all",
-                          variant === v.value
-                            ? "border-zinc-900 ring-2 ring-zinc-900 ring-offset-2 ring-offset-zinc-50 dark:border-white dark:ring-white dark:ring-offset-zinc-900"
-                            : "border-zinc-200 hover:border-zinc-300 dark:border-zinc-700 dark:hover:border-zinc-600"
-                        )}
-                      >
-                        <span className={cn("h-3.5 w-3.5 rounded-full", v.swatch)} />
-                      </button>
-                    </Tooltip>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Size
-                </p>
-                <div className="flex flex-wrap items-center gap-1 rounded-lg border border-zinc-200 bg-zinc-50 p-1 dark:border-zinc-800 dark:bg-zinc-900/60">
-                  {SIZES.map((s) => (
-                    <button
-                      key={s}
-                      type="button"
-                      onClick={() => setSize(s)}
-                      className={cn(
-                        "rounded-md px-3 py-1.5 text-xs font-medium uppercase tracking-wide transition-colors",
-                        size === s
-                          ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
-                          : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
-                      )}
-                    >
-                      {s}
-                    </button>
-                  ))}
-                </div>
-              </div>
-
-              <div>
-                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
-                  Icon
-                </p>
-                <button
-                  type="button"
-                  onClick={() => setWithIcon((v) => !v)}
-                  className={cn(
-                    "flex h-[2.125rem] items-center gap-2 rounded-lg border px-3 text-xs font-medium transition-colors",
-                    withIcon
-                      ? "border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900"
-                      : "border-zinc-200 text-zinc-500 hover:border-zinc-300 dark:border-zinc-700 dark:text-zinc-400"
-                  )}
-                >
-                  <CheckCircle2 className="h-3.5 w-3.5" />
-                  {withIcon ? "Icon on" : "Icon off"}
-                </button>
-              </div>
-            </div>
-
-            <div className="flex items-center justify-between gap-3 rounded-xl bg-zinc-900 px-4 py-3 dark:bg-black">
-              <pre className="overflow-x-auto font-mono text-[13px] leading-relaxed text-zinc-100">
-                <code>{snippet}</code>
-              </pre>
-              <Tooltip content={copied ? "Copied!" : "Copy code"}>
-                <button
-                  type="button"
-                  onClick={copySnippet}
-                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-white/10 hover:text-white"
-                >
-                  {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
-                </button>
-              </Tooltip>
-            </div>
-          </div>
-        </div>
-      </DocsSection>
-
-      <DocsSection
-        title="What each variant means"
-        description="A shared vocabulary — pick the variant that matches the state, not the one that looks nicest."
-      >
-        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-          {MEANINGS.map((m) => (
-            <div
-              key={m.variant}
-              className="relative overflow-hidden rounded-xl border border-zinc-200 bg-white p-4 pl-5 shadow-[0_1px_2px_rgba(0,0,0,0.03)] dark:border-zinc-800 dark:bg-zinc-950"
-            >
-              <span className={cn("absolute left-0 top-0 h-full w-1", m.accent)} aria-hidden />
-              <div className="flex items-center justify-between gap-2">
-                <p className="text-sm font-semibold text-zinc-900 dark:text-white">{m.title}</p>
-                <Badge variant={m.variant}>{m.example}</Badge>
-              </div>
-              <p className="mt-2 text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">{m.guidance}</p>
-            </div>
-          ))}
-        </div>
-      </DocsSection>
-
-      <DocsSection title="In context" description="Badges rarely stand alone — here's how they read inside real UI.">
-        <DocsSectionGrid className="lg:grid-cols-[1.3fr_1fr]">
-          <div className="overflow-hidden rounded-2xl border border-zinc-200 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:border-zinc-800 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)]">
-            <div className="flex items-center justify-between border-b border-zinc-200 bg-zinc-50/70 px-4 py-2.5 dark:border-zinc-800 dark:bg-zinc-900/40">
-              <p className="text-sm font-semibold text-zinc-900 dark:text-white">Deployments</p>
-              <Badge variant="outline">{DEPLOYS.length} services</Badge>
-            </div>
-            <div className="divide-y divide-zinc-100 dark:divide-zinc-900">
-              {DEPLOYS.map((d) => (
-                <div key={d.name} className="flex items-center justify-between gap-3 px-4 py-3">
-                  <div className="min-w-0">
-                    <p className="truncate text-sm font-medium text-zinc-900 dark:text-white">{d.name}</p>
-                    <p className="truncate font-mono text-xs text-zinc-400 dark:text-zinc-500">{d.branch}</p>
-                  </div>
-                  <div className="flex shrink-0 items-center gap-3">
-                    <span className="text-xs text-zinc-400 dark:text-zinc-500">{d.time}</span>
-                    <Badge variant={d.status}>{d.label}</Badge>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-4">
-            <div className="rounded-2xl border border-zinc-200 bg-white p-5 shadow-[0_1px_2px_rgba(0,0,0,0.03)] dark:border-zinc-800 dark:bg-zinc-950">
-              <div className="flex items-center gap-2">
-                <p className="text-sm font-semibold text-zinc-900 dark:text-white">Growth plan</p>
-                <Badge variant="success">
-                  <Star className="h-3 w-3" />
-                  Pro
-                </Badge>
-              </div>
-              <p className="mt-1.5 text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">
-                Unlimited projects, priority support, and advanced analytics.
-              </p>
-            </div>
-
-            <div className="flex items-center justify-between rounded-2xl border border-zinc-200 bg-white p-5 shadow-[0_1px_2px_rgba(0,0,0,0.03)] dark:border-zinc-800 dark:bg-zinc-950">
-              <div className="flex items-center gap-3">
-                <span className="relative flex h-9 w-9 items-center justify-center rounded-full bg-zinc-100 text-zinc-500 dark:bg-zinc-900 dark:text-zinc-400">
-                  <Bell className="h-4 w-4" />
-                  <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-[#D93025] text-[9px] font-semibold text-white ring-2 ring-white dark:ring-zinc-950">
-                    3
-                  </span>
-                </span>
-                <p className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Notifications</p>
-              </div>
-              <Badge variant="error">
-                <ShieldAlert className="h-3 w-3" />
-                Action needed
-              </Badge>
-            </div>
-
-            <div className="flex flex-wrap gap-2 rounded-2xl border border-zinc-200 bg-white p-5 shadow-[0_1px_2px_rgba(0,0,0,0.03)] dark:border-zinc-800 dark:bg-zinc-950">
-              <p className="w-full text-sm font-semibold text-zinc-900 dark:text-white">Filter by tag</p>
-              <Badge variant="outline">Design</Badge>
-              <Badge variant="outline">Engineering</Badge>
-              <Badge variant="outline">Marketing</Badge>
-              <Badge variant="outline">
-                <Clock className="h-3 w-3" />
-                Overdue
-              </Badge>
-              <Badge variant="outline">
-                <Rocket className="h-3 w-3" />
-                Launched
-              </Badge>
-            </div>
-          </div>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsApiSection>
-        <DocsApiTable title="API Reference" rows={API_ROWS} />
-        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
-      </DocsApiSection>
-    </DocsPage>
-  );
-}