ruler-components 0.1.1 → 0.1.3

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

@@ -1,316 +0,0 @@
-"use client";
-
-import React from "react";
-import { Check, Copy, FileText, MoreHorizontal } from "lucide-react";
-import { Pagination, type PaginationProps } from "@/components/ui/pagination";
-import { Card } from "@/components/ui/card";
-import { Tooltip } from "@/components/ui/tooltip";
-import {
-  DocsAccessibility,
-  DocsApiSection,
-  DocsApiTable,
-  DocsDemoPanel,
-  DocsPage,
-  DocsPageHeader,
-  DocsSection,
-  DocsSectionGrid,
-  DocsSubsection,
-} from "@/components/docs/docs-page";
-import { cn } from "@/lib/cn";
-
-const API_ROWS = [
-  { prop: "page", type: "number", default: "—", description: "The current active page (1-indexed)" },
-  { prop: "totalPages", type: "number", default: "—", description: "The total number of pages" },
-  { prop: "onPageChange", type: "(page: number) => void", default: "—", description: "Called when the user selects a page" },
-  { prop: "siblingCount", type: "number", default: "1", description: "Page buttons shown on either side of the current page" },
-  { prop: "variant", type: '"default" | "simple"', default: '"default"', description: "Numbered page buttons, or a minimal previous/next control" },
-  { prop: "size", type: '"small" | "half" | "full"', default: '"small"', description: "How much horizontal space the control takes up — content width, half, or full width of its container" },
-  { prop: "className", type: "string", default: "—", description: "Additional CSS classes" },
-];
-
-const ACCESSIBILITY_ITEMS = [
-  "The root <nav> carries aria-label=\"Pagination\" so assistive tech can identify the control.",
-  "The active page button is marked with aria-current=\"page\".",
-  "Previous and Next disable at the first and last page instead of wrapping around.",
-  "Ellipsis markers are decorative and hidden from screen readers.",
-  "Prefer the simple variant on narrow viewports where numbered buttons would wrap awkwardly.",
-];
-
-type PlaygroundVariant = NonNullable<PaginationProps["variant"]>;
-type PlaygroundSize = NonNullable<PaginationProps["size"]>;
-
-const PLAYGROUND_VARIANTS: { value: PlaygroundVariant; label: string }[] = [
-  { value: "default", label: "Default" },
-  { value: "simple", label: "Simple" },
-];
-
-const PLAYGROUND_SIZES: PlaygroundSize[] = ["small", "half", "full"];
-
-const PLAYGROUND_TOTAL_PAGES = [5, 10, 20, 50];
-
-function codeFor(page: number, totalPages: number, variant: PlaygroundVariant, size: PlaygroundSize) {
-  const props = [
-    `page={${page}}`,
-    `totalPages={${totalPages}}`,
-    "onPageChange={setPage}",
-    variant !== "default" && `variant="${variant}"`,
-    size !== "small" && `size="${size}"`,
-  ].filter(Boolean);
-  return `<Pagination\n  ${props.join("\n  ")}\n/>`;
-}
-
-const SEARCH_RESULTS = [
-  "Getting started with ruler.ui",
-  "Installing the CLI",
-  "Theming your design tokens",
-  "Building accessible forms",
-  "Customizing the Button component",
-  "Dark mode best practices",
-  "Data Table search and filters",
-  "Writing your first component",
-  "Migrating from v1 to v2",
-  "Understanding the Card variants",
-  "Icon usage guidelines",
-  "Typography scale reference",
-  "Spacing and layout primitives",
-  "Building a settings page",
-  "Handling async loading states",
-  "Composing Dropdown menus",
-  "Keyboard navigation patterns",
-  "Testing your components",
-  "Publishing to npm",
-  "Contributing guidelines",
-];
-const RESULTS_PAGE_SIZE = 5;
-
-export function PaginationDocPage() {
-  const [playgroundPage, setPlaygroundPage] = React.useState(4);
-  const [playgroundTotalPages, setPlaygroundTotalPages] = React.useState(10);
-  const [playgroundVariant, setPlaygroundVariant] = React.useState<PlaygroundVariant>("default");
-  const [playgroundSize, setPlaygroundSize] = React.useState<PlaygroundSize>("small");
-  const [copied, setCopied] = React.useState(false);
-
-  const playgroundSnippet = codeFor(playgroundPage, playgroundTotalPages, playgroundVariant, playgroundSize);
-
-  function copySnippet() {
-    navigator.clipboard.writeText(playgroundSnippet).catch(() => {});
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }
-
-  function setPlaygroundTotal(total: number) {
-    setPlaygroundTotalPages(total);
-    setPlaygroundPage((p) => Math.min(p, total));
-  }
-
-  const [defaultPage, setDefaultPage] = React.useState(4);
-  const [simplePage, setSimplePage] = React.useState(2);
-  const [siblingPageA, setSiblingPageA] = React.useState(6);
-  const [siblingPageB, setSiblingPageB] = React.useState(6);
-  const [resultsPage, setResultsPage] = React.useState(1);
-  const [smallSizePage, setSmallSizePage] = React.useState(3);
-  const [halfSizePage, setHalfSizePage] = React.useState(3);
-  const [fullSizePage, setFullSizePage] = React.useState(3);
-
-  const resultsTotalPages = Math.ceil(SEARCH_RESULTS.length / RESULTS_PAGE_SIZE);
-  const pagedResults = SEARCH_RESULTS.slice(
-    (resultsPage - 1) * RESULTS_PAGE_SIZE,
-    resultsPage * RESULTS_PAGE_SIZE,
-  );
-
-  return (
-    <DocsPage>
-      <DocsPageHeader
-        icon={MoreHorizontal}
-        title="Pagination"
-        description="Lets people move through paged content — numbered pages, or a minimal previous/next control."
-      />
-
-      <DocsSection
-        first
-        title="Playground"
-        description="Build a pagination control 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 p-6 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 w-full max-w-md">
-              <Pagination
-                page={playgroundPage}
-                totalPages={playgroundTotalPages}
-                onPageChange={setPlaygroundPage}
-                variant={playgroundVariant}
-                size={playgroundSize}
-              />
-            </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 items-center gap-1 rounded-lg border border-zinc-200 bg-zinc-50 p-1 dark:border-zinc-800 dark:bg-zinc-900/60">
-                  {PLAYGROUND_VARIANTS.map((v) => (
-                    <button
-                      key={v.value}
-                      type="button"
-                      onClick={() => setPlaygroundVariant(v.value)}
-                      className={cn(
-                        "rounded-md px-3 py-1.5 text-xs font-medium uppercase tracking-wide transition-colors",
-                        playgroundVariant === v.value
-                          ? "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"
-                      )}
-                    >
-                      {v.label}
-                    </button>
-                  ))}
-                </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">
-                  {PLAYGROUND_SIZES.map((s) => (
-                    <button
-                      key={s}
-                      type="button"
-                      onClick={() => setPlaygroundSize(s)}
-                      className={cn(
-                        "rounded-md px-3 py-1.5 text-xs font-medium uppercase tracking-wide transition-colors",
-                        playgroundSize === 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">
-                  Total pages
-                </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">
-                  {PLAYGROUND_TOTAL_PAGES.map((total) => (
-                    <button
-                      key={total}
-                      type="button"
-                      onClick={() => setPlaygroundTotal(total)}
-                      className={cn(
-                        "rounded-md px-3 py-1.5 text-xs font-medium tabular-nums transition-colors",
-                        playgroundTotalPages === total
-                          ? "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"
-                      )}
-                    >
-                      {total}
-                    </button>
-                  ))}
-                </div>
-              </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>{playgroundSnippet}</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="Default"
-        description="Numbered page buttons with automatic ellipses for long ranges."
-      >
-        <DocsDemoPanel>
-          <Pagination page={defaultPage} totalPages={12} onPageChange={setDefaultPage} />
-        </DocsDemoPanel>
-      </DocsSection>
-
-      <DocsSection
-        title="Sizes"
-        description="Control how much horizontal space the control takes up — content width, half, or full width of its container."
-        contentClassName="flex flex-col gap-6"
-      >
-        <DocsSubsection title="Small" description="Shrinks to fit its content — the default, ideal for inline placement.">
-          <Pagination size="small" page={smallSizePage} totalPages={8} onPageChange={setSmallSizePage} />
-        </DocsSubsection>
-        <DocsSubsection title="Half" description="Fills half of its container width.">
-          <Pagination size="half" page={halfSizePage} totalPages={8} onPageChange={setHalfSizePage} />
-        </DocsSubsection>
-        <DocsSubsection title="Full" description="Stretches to fill its container — great for table and card footers.">
-          <Pagination size="full" page={fullSizePage} totalPages={8} onPageChange={setFullSizePage} />
-        </DocsSubsection>
-      </DocsSection>
-
-      <DocsSection title="Simple" description="A compact previous/next control with a page indicator — ideal for tight spaces.">
-        <DocsDemoPanel>
-          <Pagination variant="simple" page={simplePage} totalPages={5} onPageChange={setSimplePage} className="w-full max-w-sm" />
-        </DocsDemoPanel>
-      </DocsSection>
-
-      <DocsSection title="Sibling Count" description="Control how many page buttons show on either side of the current page.">
-        <DocsSectionGrid>
-          <DocsSubsection title="siblingCount={0}" description="Only the current page, first, last, and ellipses.">
-            <Pagination page={siblingPageA} totalPages={20} onPageChange={setSiblingPageA} siblingCount={0} />
-          </DocsSubsection>
-          <DocsSubsection title="siblingCount={2}" description="Two pages on either side of the current page.">
-            <Pagination page={siblingPageB} totalPages={20} onPageChange={setSiblingPageB} siblingCount={2} />
-          </DocsSubsection>
-        </DocsSectionGrid>
-      </DocsSection>
-
-      <DocsSection title="In Context" description="Pagination works with any list, not just tables.">
-        <Card className="max-w-lg p-2">
-          <ul className="flex flex-col">
-            {pagedResults.map((result) => (
-              <li
-                key={result}
-                className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-zinc-700 hover:bg-zinc-50 dark:text-zinc-300 dark:hover:bg-zinc-800/60"
-              >
-                <FileText className="h-4 w-4 shrink-0 text-zinc-400" />
-                {result}
-              </li>
-            ))}
-          </ul>
-          <div className="flex items-center justify-between gap-3 border-t border-zinc-100 px-3 pt-3 dark:border-zinc-800">
-            <p className="text-xs text-zinc-500 dark:text-zinc-400">
-              {SEARCH_RESULTS.length} results
-            </p>
-            <Pagination page={resultsPage} totalPages={resultsTotalPages} onPageChange={setResultsPage} siblingCount={0} />
-          </div>
-        </Card>
-      </DocsSection>
-
-      <DocsApiSection>
-        <DocsApiTable title="API Reference" rows={API_ROWS} />
-        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
-      </DocsApiSection>
-    </DocsPage>
-  );
-}