Components

"use client";

import { useState } from "react";
import { PretableSurface, type PretableColumn } from "@pretable/react";

import { AppIconButton, AppTextarea, AppTextInput } from "./EditorControls";
import "./editor-controls.css";

interface Item {
  id: string;
  name: string;
  quantity: number | null;
  notes: string;
}

const initialRows: Item[] = [
  {
    id: "notebook",
    name: "Notebook",
    quantity: 4,
    notes: "Dot grid\nRecycled paper",
  },
  { id: "pencil", name: "Pencil", quantity: 12, notes: "Pack of twelve" },
  { id: "folder", name: "Folder", quantity: 6, notes: "For project notes" },
];

const columns: PretableColumn<Item>[] = [
  { id: "name", header: "Name", editable: true, widthPx: 170 },
  {
    id: "quantity",
    header: "Quantity",
    type: "number",
    editable: true,
    widthPx: 150,
  },
  { id: "notes", header: "Notes", editable: true, wrap: true, widthPx: 270 },
];

export function EditorControlsGrid() {
  const [rows, setRows] = useState(initialRows);
  const [status, setStatus] = useState(
    "Ready to edit. Saves take about 800ms.",
  );

  return (
    <div>
      <p style={{ margin: "0 0 12px", fontSize: 13 }}>
        Double-click a cell or select it and press <kbd>F2</kbd>. Try the
        Quantity stepper, then enter <strong>-1</strong> and press{" "}
        <kbd>Enter</kbd> to see a rejected save. Correct the value and press{" "}
        <kbd>Enter</kbd> again. In Notes, <kbd>Enter</kbd> adds a line;{" "}
        <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>Enter</kbd> saves.{" "}
        <kbd>Escape</kbd> cancels.
      </p>
      <PretableSurface
        ariaLabel="Inventory with custom editors"
        rows={rows}
        columns={columns}
        getRowId={(row) => row.id}
        viewportHeight={230}
        components={{
          TextInput: AppTextInput,
          Textarea: AppTextarea,
          IconButton: AppIconButton,
        }}
        onRowChange={async ({ rowId, columnId, value, row }) => {
          setStatus(`Saving ${columnId}…`);
          await new Promise<void>((resolve) => setTimeout(resolve, 800));
          if (
            columnId === "quantity" &&
            typeof value === "number" &&
            value < 0
          ) {
            setStatus(
              "Quantity rejected. Correct it and press Enter to retry.",
            );
            throw new Error("Quantity must be zero or greater");
          }
          setRows((current) =>
            current.map((item) => (item.id === rowId ? row : item)),
          );
          setStatus(`Saved ${columnId}.`);
        }}
      />
      <p role="status" style={{ margin: "8px 0 0", fontSize: 13 }}>
        {status}
      </p>
    </div>
  );
}

"use client";

import { PretableSurface } from "@pretable/react";

import "./brand-button.css";

import { BrandButton } from "./BrandButton";
import { columns } from "./columns";
import { trades, type Trade } from "./data";

const VIEWPORT_HEIGHT = 260;

export function ComponentsGrid() {
  return (
    <div>
      <p style={{ margin: "0 0 8px", fontSize: 13 }}>
        The kit’s labelled actions below use <code>BrandButton</code>; the icon
        buttons — the funnels, the ⋮ menus — are still pretable&apos;s, because
        this demo replaces only <code>Button</code>. Reset columns is the
        app&apos;s danger button (it branches on <code>site</code>); the Filters
        section&apos;s <code>+ filter</code> / <code>+ group</code> are its
        ghost buttons; a column funnel&apos;s dialog has its link-styled{" "}
        <code>Clear</code>.
      </p>
      <PretableSurface<Trade>
        ariaLabel="Trades"
        columns={columns}
        components={{ Button: BrandButton }}
        getRowId={(row) => row.id}
        rows={trades}
        toolPanel={{ defaultActiveSection: "columns" }}
        viewportHeight={VIEWPORT_HEIGHT}
      />
    </div>
  );
}

"use client";

import { PretableButton } from "@pretable/react";
import { useState } from "react";

export function SavedViewActions() {
  const [applied, setApplied] = useState(false);

  return (
    <div style={{ padding: 20, fontSize: 13 }}>
      <p style={{ margin: "0 0 16px" }}>
        Apply the saved “Open orders” view, then reset to all orders.
      </p>
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        <PretableButton
          variant="ghost"
          site="saved-view-apply"
          disabled={applied}
          onClick={() => setApplied(true)}
        >
          Apply saved view
        </PretableButton>
        <PretableButton
          variant="link"
          site="saved-view-reset"
          disabled={!applied}
          onClick={() => setApplied(false)}
        >
          Reset view
        </PretableButton>
      </div>
      <p role="status" style={{ margin: "16px 0 0" }}>
        Current view: {applied ? "Open orders" : "All orders"}
      </p>
    </div>
  );
}

"use client";

import { PretableIconButton } from "@pretable/react";
import { useState } from "react";

export function PinViewButton() {
  const [pinned, setPinned] = useState(false);

  return (
    <div style={{ padding: 20, fontSize: 13 }}>
      <p style={{ margin: "0 0 16px" }}>
        Pin “Open orders” for quick access. Use Enter or Space on the button.
      </p>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <PretableIconButton
          aria-label="Pin view"
          aria-pressed={pinned}
          site="saved-view-pin"
          onClick={() => setPinned((value) => !value)}
        >
          <svg
            aria-hidden="true"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill={pinned ? "currentColor" : "none"}
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M8 3h8l-1 6 4 4v2H5v-2l4-4-1-6Z" />
            <path d="M12 15v6" />
          </svg>
        </PretableIconButton>
        <span>Open orders</span>
      </div>
      <p role="status" style={{ margin: "16px 0 0" }}>
        {pinned ? "View pinned to quick access." : "View is not pinned."}
      </p>
    </div>
  );
}

"use client";

import { PretableSelect, type PretableSelectOption } from "@pretable/react";
import { useId, useState } from "react";

const projects = [
  { name: "Atlas", updated: 1 },
  { name: "Beacon", updated: 3 },
  { name: "Cedar", updated: 2 },
];

const options: readonly PretableSelectOption[] = [
  { value: "ascending", label: "Name: A–Z" },
  { value: "manual", label: "Manual order (unavailable)", disabled: true },
  { value: "descending", label: "Name: Z–A" },
  {
    value: "recent",
    label: (
      <span>
        Recently updated <small>(newest first)</small>
      </span>
    ),
    // Rich labels need plain text for keyboard typeahead.
    textValue: "Recently updated",
  },
];

export function SelectSortExample() {
  const selectId = useId();
  const [sort, setSort] = useState("ascending");
  const sortedProjects = [...projects].sort((a, b) =>
    sort === "recent"
      ? b.updated - a.updated
      : sort === "descending"
        ? b.name.localeCompare(a.name)
        : a.name.localeCompare(b.name),
  );

  return (
    <div style={{ padding: 20, maxWidth: 360, fontSize: 13 }}>
      <label htmlFor={selectId} style={{ display: "block", marginBottom: 8 }}>
        Sort projects
      </label>
      <PretableSelect
        id={selectId}
        aria-label="Sort projects"
        options={options}
        value={sort}
        onChange={setSort}
      />
      <ol
        aria-label="Projects"
        style={{ margin: "16px 0 0", paddingLeft: 24, display: "grid", gap: 6 }}
      >
        {sortedProjects.map((project) => (
          <li key={project.name}>{project.name}</li>
        ))}
      </ol>
    </div>
  );
}

"use client";

import { useId, useState } from "react";
import { PretableTextInput } from "@pretable/react";

const people = ["Ada Lovelace", "Grace Hopper", "Katherine Johnson"];

export function SearchPeople() {
  const fieldId = useId();
  const resultsId = useId();
  const [query, setQuery] = useState("");
  const matches = people.filter((name) =>
    name.toLowerCase().includes(query.trim().toLowerCase()),
  );

  return (
    <div style={{ maxWidth: 360 }}>
      <label htmlFor={fieldId} style={{ display: "block", marginBottom: 8 }}>
        Find a teammate
      </label>
      <PretableTextInput
        id={fieldId}
        type="search"
        placeholder="Try Grace"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        aria-controls={resultsId}
        style={{ width: "100%" }}
      />
      <p role="status" style={{ margin: "8px 0", fontSize: 13 }}>
        {matches.length} {matches.length === 1 ? "person" : "people"} found
      </p>
      <ul id={resultsId} aria-label="Matching teammates" style={{ margin: 0 }}>
        {matches.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

"use client";

import { useId, useState } from "react";
import { PretableButton, PretableTextarea } from "@pretable/react";

export function EditNote() {
  const fieldId = useId();
  const hintId = useId();
  const [draft, setDraft] = useState("");
  const [saved, setSaved] = useState("");

  return (
    <div style={{ maxWidth: 420 }}>
      <label htmlFor={fieldId} style={{ display: "block", marginBottom: 8 }}>
        Handoff note
      </label>
      <PretableTextarea
        id={fieldId}
        rows={3}
        maxLength={160}
        value={draft}
        onChange={(event) => setDraft(event.target.value)}
        aria-describedby={hintId}
        placeholder="What should the next teammate know?"
        style={{ width: "100%", resize: "vertical" }}
      />
      <p id={hintId} style={{ margin: "8px 0", fontSize: 13 }}>
        Up to 160 characters. Enter adds a new line.
      </p>
      <PretableButton
        disabled={!draft.trim() || draft === saved}
        onClick={() => setSaved(draft)}
      >
        Save note
      </PretableButton>
      <p role="status" style={{ whiteSpace: "pre-wrap", margin: "8px 0" }}>
        {saved ? `Saved note:\n${saved}` : "No note saved yet."}
      </p>
    </div>
  );
}

"use client";

import { PretableCheckbox } from "@pretable/react";
import { useState } from "react";

const projects = ["Atlas", "Beacon", "Cedar"];

export function CheckboxSelectionExample() {
  const [selected, setSelected] = useState<string[]>(["Atlas"]);
  const allChecked =
    selected.length === projects.length
      ? true
      : selected.length === 0
        ? false
        : "mixed";

  return (
    <div style={{ padding: 20, maxWidth: 360, fontSize: 13 }}>
      <label
        style={{
          display: "flex",
          alignItems: "center",
          gap: 8,
          marginBottom: 12,
        }}
      >
        <PretableCheckbox
          checked={allChecked}
          onCheckedChange={(checked) =>
            setSelected(checked ? [...projects] : [])
          }
        />
        Select all projects
      </label>
      <div style={{ display: "grid", gap: 10 }}>
        {projects.map((project) => (
          <label
            key={project}
            style={{ display: "flex", alignItems: "center", gap: 8 }}
          >
            <PretableCheckbox
              checked={selected.includes(project)}
              onCheckedChange={(checked) =>
                setSelected((current) =>
                  checked
                    ? [...current, project]
                    : current.filter((name) => name !== project),
                )
              }
            />
            {project}
          </label>
        ))}
      </div>
      <p role="status" style={{ margin: "12px 0 0" }}>
        {selected.length} of {projects.length} selected
      </p>
    </div>
  );
}