Dialog

import { useState, type FormEvent } from "react";
import {
  Button,
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  Input,
  toast,
} from "cennge-ui";

export default function RenameRepository() {
  const [isOpen, setOpen] = useState(false);
  const [name, setName] = useState("payload-cache");

  function rename(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const next = String(new FormData(event.currentTarget).get("name")).trim();
    if (!next) return;
    setName(next);
    setOpen(false);
    toast.success("Repository renamed", { description: `Cennge/${next}` });
  }

  return (
    <Dialog isOpen={isOpen} onOpenChange={setOpen}>
      <DialogTrigger>
        <Button variant="flat">Rename</Button>
      </DialogTrigger>
      <DialogContent size="sm">
        {/* "contents" keeps header, body and footer in the dialog's own layout. */}
        <form onSubmit={rename} className="contents">
          <DialogHeader>
            <DialogTitle>Rename repository</DialogTitle>
            <DialogDescription>Links to the old name keep working.</DialogDescription>
          </DialogHeader>
          <DialogBody>
            <Input label="Name" name="name" defaultValue={name} isRequired />
          </DialogBody>
          <DialogFooter>
            <DialogClose>
              <Button variant="flat">Cancel</Button>
            </DialogClose>
            <Button type="submit" color="primary">
              Rename
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}

import {
  Button,
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "cennge-ui";

const releases = [
  { version: "0.3.1", date: "1 November 2026", changes: ["The README's map examples are set in New York."] },
  {
    version: "0.3.0",
    date: "31 October 2026",
    changes: [
      "Charts, in a new entry cennge-ui/charts, drawn in SVG with no chart library underneath: BarChart, LineChart, AreaChart, DonutChart and Sparkline.",
      "Series take an eight-colour palette checked for colour blindness in both themes, whose first colour is the accent.",
      "Theme switching without a flash and without a hydration error: ThemeScript, useTheme and ThemeSwitch.",
      "Button shows the pointer cursor, and a loading one the wait cursor, without hover or press effects while it loads.",
      "NavigationMenu triggers and Carousel dots show the pointer cursor.",
      "A popup in a portal opened from a Dialog, Drawer, AlertDialog or CommandDialog scrolls again, also when it is another library's.",
      "Kbd draws its key symbols at the size of the key cap, the same in every font.",
      "A Select inside an open Dialog, Popover or Accordion item no longer shows its chevron turned up while its list is closed.",
    ],
  },
  {
    version: "0.2.0",
    date: "21 October 2026",
    changes: [
      "New entry cennge-ui/map, on MapLibre GL, fetched only when a map mounts.",
      "Map, with a base map in the theme's colours, light and dark with the page.",
      "MapMarker and MapPopup: accessible buttons and dialogs in the library's style.",
      "MapControls: zoom, north, the user's location, full screen.",
      "MapRoute and MapArc: lines and curves in a token's colour, under the place names.",
      "MapGeoJSON and MapLegend: areas, lines and points, or a choropleth along a colour's scale.",
      "MapClusterLayer: thousands of points, grouped; groups and points are buttons.",
    ],
  },
  {
    version: "0.1.1",
    date: "20 October 2026",
    changes: ["minValue and maxValue of Calendar, RangeCalendar, DatePicker and DateRangePicker accept null, meaning no limit."],
  },
  {
    version: "0.1.0",
    date: "19 October 2026",
    changes: ["First release: React components on Radix and Tailwind CSS v4, dark-first with a swappable accent."],
  },
];

export default function ChangelogDialog() {
  return (
    <Dialog>
      <DialogTrigger>
        <Button variant="flat">Changelog</Button>
      </DialogTrigger>
      <DialogContent size="lg">
        <DialogHeader>
          <DialogTitle>Changelog</DialogTitle>
          <DialogDescription>Every release of cennge-ui, newest first.</DialogDescription>
        </DialogHeader>
        {/* Nothing inside takes focus: tabIndex lets the keyboard scroll the body. */}
        <DialogBody
          tabIndex={0}
          className="flex flex-col gap-5 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid focus-visible:outline-ring"
        >
          {releases.map((release) => (
            <section key={release.version}>
              <h3 className="font-semibold">
                {release.version} <span className="font-normal text-muted">· {release.date}</span>
              </h3>
              <ul className="mt-1.5 flex list-disc flex-col gap-1.5 pl-5">
                {release.changes.map((change) => (
                  <li key={change}>{change}</li>
                ))}
              </ul>
            </section>
          ))}
        </DialogBody>
        <DialogFooter>
          <DialogClose>
            <Button variant="flat">Close</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

import { useRef, useState } from "react";
import {
  Button,
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownTrigger,
  Textarea,
  toast,
} from "cennge-ui";

function MoreIcon() {
  return (
    <svg viewBox="0 0 24 24" className="size-4" fill="currentColor" aria-hidden="true">
      <circle cx="5" cy="12" r="1.75" />
      <circle cx="12" cy="12" r="1.75" />
      <circle cx="19" cy="12" r="1.75" />
    </svg>
  );
}

export default function RepositoryMenu() {
  const [isEditOpen, setEditOpen] = useState(false);
  const menuButton = useRef<HTMLButtonElement>(null);

  return (
    <div className="flex w-full max-w-sm items-center justify-between gap-3 rounded-large bg-surface-3 py-2 pr-2 pl-4">
      <span className="font-medium">ai-niche-scout</span>
      <Dropdown>
        <DropdownTrigger ref={menuButton}>
          <Button isIconOnly variant="light" aria-label="ai-niche-scout actions">
            <MoreIcon />
          </Button>
        </DropdownTrigger>
        <DropdownContent align="end">
          <DropdownItem onAction={() => toast("Starred ai-niche-scout")}>Star</DropdownItem>
          <DropdownItem onAction={() => setEditOpen(true)}>Edit description…</DropdownItem>
        </DropdownContent>
      </Dropdown>

      <Dialog isOpen={isEditOpen} onOpenChange={setEditOpen}>
        <DialogContent
          size="sm"
          // The menu item that opened the dialog is gone by now: go back to the menu's button.
          onCloseAutoFocus={(event) => {
            event.preventDefault();
            menuButton.current?.focus();
          }}
        >
          <DialogHeader>
            <DialogTitle>Edit description</DialogTitle>
            <DialogDescription>Shown under the name of ai-niche-scout.</DialogDescription>
          </DialogHeader>
          <DialogBody>
            <Textarea
              label="Description"
              minRows={2}
              defaultValue="Validate an AI startup idea: competitors and 54 AI niches"
            />
          </DialogBody>
          <DialogFooter>
            <DialogClose>
              <Button variant="flat">Cancel</Button>
            </DialogClose>
            <DialogClose>
              <Button color="primary" onClick={() => toast.success("Description saved")}>
                Save
              </Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

import { useState } from "react";
import {
  Button,
  Combobox,
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  Select,
  SelectItem,
  toast,
} from "cennge-ui";

const branches = [
  "main",
  "feat/charts",
  "feat/sparkline",
  "feat/theme-switch",
  "feat/map",
  "feat/map-clusters",
  "fix/dialog-backdrop",
  "fix/dialog-popup-scroll",
  "fix/select-chevron",
  "fix/button-cursor",
  "fix/kbd-symbols",
  "fix/carousel-controls",
  "test/next-time-zones",
  "ci/firefox-xvfb",
].map((branch) => ({ value: branch, label: branch }));

const runners = ["ubuntu-24.04", "windows-2025", "macos-15"];

export default function RunWorkflow() {
  const [branch, setBranch] = useState<string | null>("main");
  const [runner, setRunner] = useState<string | null>("ubuntu-24.04");

  return (
    <Dialog>
      <DialogTrigger>
        <Button color="primary">Run workflow</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Run workflow</DialogTitle>
          <DialogDescription>ci.yml in Cennge/cennge-ui</DialogDescription>
        </DialogHeader>
        <DialogBody className="flex flex-col gap-4">
          <Combobox label="Branch" items={branches} value={branch} onValueChange={setBranch} />
          <Select label="Runner" value={runner} onValueChange={setRunner}>
            {runners.map((name) => (
              <SelectItem key={name} value={name}>
                {name}
              </SelectItem>
            ))}
          </Select>
        </DialogBody>
        <DialogFooter>
          <DialogClose>
            <Button variant="flat">Cancel</Button>
          </DialogClose>
          <DialogClose>
            <Button
              color="primary"
              isDisabled={!branch || !runner}
              onClick={() => toast.success("Run queued", { description: `${branch} on ${runner}` })}
            >
              Run
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}