prime-ui-kit 0.9.3 → 0.11.0

package/dist/skill/patterns/form-drawer.tsx

@@ -0,0 +1,240 @@
+/** A create form in a Drawer: grouped fields, errors on submit with focus on the first invalid field, a loading submit, a toast and the new row in the list. */
+import {
+  Badge,
+  Button,
+  Checkbox,
+  DataTable,
+  type DataTableColumn,
+  Drawer,
+  Fieldset,
+  Icon,
+  Input,
+  PageContent,
+  Radio,
+  Select,
+  Textarea,
+  useNotifications,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./form-drawer.module.css";
+
+type Client = { id: string; name: string; kind: "company" | "person"; manager: string };
+type Errors = Partial<Record<"name" | "inn" | "email", string>>;
+
+const MANAGERS = ["Анна Климова", "Илья Петров", "Марат Хасанов"];
+
+const CLIENTS: Client[] = [
+  { id: "c1", name: "ООО «Северный ветер»", kind: "company", manager: "Анна Климова" },
+  { id: "c2", name: "АО «Техностиль»", kind: "company", manager: "Илья Петров" },
+  { id: "c3", name: "ИП Соколова М. А.", kind: "person", manager: "Анна Климова" },
+];
+
+const COLUMNS: DataTableColumn<Client>[] = [
+  { id: "name", header: "Клиент", accessor: "name" },
+  {
+    id: "kind",
+    header: "Тип",
+    cell: (row) =>
+      row.kind === "company" ? (
+        <Badge.Root color="blue">Компания</Badge.Root>
+      ) : (
+        <Badge.Root color="purple">ИП</Badge.Root>
+      ),
+  },
+  { id: "manager", header: "Менеджер", accessor: "manager" },
+];
+
+function validate(data: FormData): Errors {
+  const errors: Errors = {};
+  const name = String(data.get("name") ?? "").trim();
+  const inn = String(data.get("inn") ?? "").replace(/\s/g, "");
+  const email = String(data.get("email") ?? "").trim();
+  if (!name) errors.name = "Введите название клиента";
+  if (!/^\d{10}(\d{2})?$/.test(inn)) errors.inn = "ИНН — 10 цифр для компании или 12 для ИП";
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
+    errors.email = "Введите почту в формате name@company.ru";
+  return errors;
+}
+
+export default function FormDrawerPattern() {
+  const { notify } = useNotifications();
+  const formId = React.useId();
+  const [clients, setClients] = React.useState(CLIENTS);
+  const [open, setOpen] = React.useState(false);
+  const [errors, setErrors] = React.useState<Errors>({});
+  const [saving, setSaving] = React.useState(false);
+  const [dirty, setDirty] = React.useState(false);
+  const [manager, setManager] = React.useState(MANAGERS[0]);
+
+  // Drawer.Guard holds every way out while saving and asks before an edited form is discarded.
+  const changeOpen = (next: boolean) => {
+    setOpen(next);
+    if (!next) {
+      setErrors({});
+      setDirty(false);
+    }
+  };
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const data = new FormData(form);
+    const found = validate(data);
+    setErrors(found);
+    const firstInvalid = (["name", "inn", "email"] as const).find((key) => found[key]);
+    if (firstInvalid) {
+      form.querySelector<HTMLInputElement>(`[name="${firstInvalid}"]`)?.focus();
+      return;
+    }
+    setSaving(true);
+    window.setTimeout(() => {
+      const name = String(data.get("name")).trim();
+      setClients((list) => [
+        {
+          id: `c${list.length + 1}`,
+          name,
+          kind: data.get("kind") === "person" ? "person" : "company",
+          manager,
+        },
+        ...list,
+      ]);
+      setSaving(false);
+      setDirty(false);
+      setOpen(false);
+      notify({ tone: "success", title: "Клиент добавлен", description: name });
+    }, 900);
+  };
+
+  return (
+    <PageContent.Section aria-labelledby="clients-title">
+      <PageContent.Header>
+        <PageContent.Title id="clients-title">Клиенты</PageContent.Title>
+        <PageContent.Description>
+          Компании и ИП, которым вы выставляете счета.
+        </PageContent.Description>
+        <PageContent.Actions>
+          <Drawer.Root open={open} onOpenChange={changeOpen}>
+            <Drawer.Trigger>
+              <Button.Root>
+                <Button.Icon>
+                  <Icon name="action.add" />
+                </Button.Icon>
+                Новый клиент
+              </Button.Root>
+            </Drawer.Trigger>
+            <Drawer.Content>
+              <Drawer.Header>
+                <Drawer.Title>Новый клиент</Drawer.Title>
+                <Drawer.Description>
+                  Появится в списке и в выборе клиента при выставлении счёта.
+                </Drawer.Description>
+              </Drawer.Header>
+              <Drawer.Body>
+                <Drawer.Guard busy={saving} dirty={dirty} />
+                <form
+                  id={formId}
+                  className={styles.form}
+                  noValidate
+                  onSubmit={submit}
+                  onChange={() => setDirty(true)}
+                >
+                  <Fieldset label="Реквизиты" disabled={saving}>
+                    <Radio.Group
+                      name="kind"
+                      label="Тип клиента"
+                      defaultValue="company"
+                      orientation="horizontal"
+                    >
+                      <Radio.Root value="company">
+                        <Radio.Label>Компания</Radio.Label>
+                      </Radio.Root>
+                      <Radio.Root value="person">
+                        <Radio.Label>ИП</Radio.Label>
+                      </Radio.Root>
+                    </Radio.Group>
+                    <Input.Root label="Название" error={errors.name}>
+                      <Input.Wrapper>
+                        <Input.Field
+                          name="name"
+                          placeholder="ООО «Ромашка»"
+                          autoComplete="organization"
+                        />
+                      </Input.Wrapper>
+                    </Input.Root>
+                    <div className={styles.pair}>
+                      <Input.Root label="ИНН" error={errors.inn} reserveSupportRow>
+                        <Input.Wrapper>
+                          <Input.Field name="inn" inputMode="numeric" placeholder="7704512908" />
+                        </Input.Wrapper>
+                      </Input.Root>
+                      <Input.Root label="КПП" optional reserveSupportRow>
+                        <Input.Wrapper>
+                          <Input.Field name="kpp" inputMode="numeric" placeholder="770401001" />
+                        </Input.Wrapper>
+                      </Input.Root>
+                    </div>
+                  </Fieldset>
+                  <Fieldset label="Контакты" disabled={saving}>
+                    <Input.Root
+                      label="Почта для счетов"
+                      error={errors.email}
+                      hint="На неё уйдут счета и акты"
+                    >
+                      <Input.Wrapper>
+                        <Input.Icon side="start">
+                          <Icon name="field.email" />
+                        </Input.Icon>
+                        <Input.Field name="email" type="email" placeholder="billing@company.ru" />
+                      </Input.Wrapper>
+                    </Input.Root>
+                    <Select.Root
+                      label="Менеджер"
+                      value={manager}
+                      onValueChange={(next) => {
+                        setManager(next);
+                        setDirty(true);
+                      }}
+                    >
+                      <Select.Trigger>
+                        <Select.Value />
+                      </Select.Trigger>
+                      <Select.Content>
+                        {MANAGERS.map((name) => (
+                          <Select.Item key={name} value={name}>
+                            {name}
+                          </Select.Item>
+                        ))}
+                      </Select.Content>
+                    </Select.Root>
+                    <Textarea.Root name="note" label="Комментарий" optional rows={2} />
+                    <Checkbox.Root
+                      name="invite"
+                      defaultChecked
+                      hint="Клиент увидит свои счета и акты онлайн"
+                    >
+                      <Checkbox.Label>Пригласить в личный кабинет</Checkbox.Label>
+                    </Checkbox.Root>
+                  </Fieldset>
+                </form>
+              </Drawer.Body>
+              <Drawer.Footer>
+                <Drawer.Close>
+                  <Button.Root variant="outline" tone="neutral">
+                    Отмена
+                  </Button.Root>
+                </Drawer.Close>
+                <Button.Root type="submit" form={formId} loading={saving}>
+                  Добавить клиента
+                </Button.Root>
+              </Drawer.Footer>
+            </Drawer.Content>
+          </Drawer.Root>
+        </PageContent.Actions>
+      </PageContent.Header>
+      <PageContent.Body>
+        <DataTable columns={COLUMNS} rows={clients} getRowKey={(row) => row.id} paging="none" />
+      </PageContent.Body>
+    </PageContent.Section>
+  );
+}

package/dist/skill/patterns/list-page.module.css

@@ -0,0 +1,19 @@
+/* List page: layout inside table cells and the toolbar only; the page rhythm comes from PageContent. */
+
+/* The filter takes the whole toolbar row, so its search stretches. */
+.filter {
+  width: 100%;
+  min-width: 0;
+}
+
+/* Client cell: avatar, then the name over the tax id. On a phone the table scrolls sideways. */
+.client {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-space-3);
+  white-space: nowrap;
+}
+
+.clientText {
+  display: grid;
+}

package/dist/skill/patterns/list-page.tsx

@@ -0,0 +1,334 @@
+/** A list page: header with one primary action, SmartFilter in the table toolbar, DataTable with statuses, row actions, pages and a filtered empty state. */
+import {
+  Avatar,
+  Badge,
+  Button,
+  DataTable,
+  type DataTableColumn,
+  Dropdown,
+  EmptyPage,
+  Icon,
+  matchesSmartFilter,
+  PageContent,
+  type PaletteColor,
+  SmartFilter,
+  type SmartFilterField,
+  type SmartFilterValue,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./list-page.module.css";
+
+type Status = "draft" | "sent" | "paid" | "overdue";
+
+type Invoice = {
+  id: string;
+  client: string;
+  inn: string;
+  manager: string;
+  due: string;
+  amount: number;
+  status: Status;
+};
+
+/** One hue per status across the product: the text carries the meaning, the color repeats it. */
+const STATUS: Record<Status, { label: string; color: PaletteColor }> = {
+  draft: { label: "Черновик", color: "gray" },
+  sent: { label: "Отправлен", color: "blue" },
+  paid: { label: "Оплачен", color: "green" },
+  overdue: { label: "Просрочен", color: "red" },
+};
+
+const INVOICES: Invoice[] = [
+  {
+    id: "2026-0418",
+    client: "ООО «Северный ветер»",
+    inn: "7704 512 908",
+    manager: "Анна Климова",
+    due: "2026-10-14",
+    amount: 486_000,
+    status: "sent",
+  },
+  {
+    id: "2026-0417",
+    client: "АО «Техностиль»",
+    inn: "7816 330 147",
+    manager: "Илья Петров",
+    due: "2026-10-02",
+    amount: 1_240_500,
+    status: "overdue",
+  },
+  {
+    id: "2026-0416",
+    client: "ИП Соколова М. А.",
+    inn: "5024 118 773",
+    manager: "Анна Климова",
+    due: "2026-10-20",
+    amount: 58_900,
+    status: "draft",
+  },
+  {
+    id: "2026-0415",
+    client: "ООО «Логистик Плюс»",
+    inn: "6658 402 215",
+    manager: "Марат Хасанов",
+    due: "2026-09-30",
+    amount: 312_000,
+    status: "paid",
+  },
+  {
+    id: "2026-0414",
+    client: "ООО «Гранит»",
+    inn: "5407 221 690",
+    manager: "Илья Петров",
+    due: "2026-09-28",
+    amount: 94_750,
+    status: "paid",
+  },
+  {
+    id: "2026-0413",
+    client: "ЗАО «Альфа Медиа»",
+    inn: "7702 845 336",
+    manager: "Марат Хасанов",
+    due: "2026-09-25",
+    amount: 760_000,
+    status: "overdue",
+  },
+  {
+    id: "2026-0412",
+    client: "ООО «Зелёный квартал»",
+    inn: "2310 194 552",
+    manager: "Анна Климова",
+    due: "2026-10-18",
+    amount: 205_300,
+    status: "sent",
+  },
+  {
+    id: "2026-0411",
+    client: "ООО «Мостострой»",
+    inn: "7728 609 481",
+    manager: "Илья Петров",
+    due: "2026-09-21",
+    amount: 2_480_000,
+    status: "paid",
+  },
+  {
+    id: "2026-0410",
+    client: "ООО «Пекарня №1»",
+    inn: "7811 077 264",
+    manager: "Марат Хасанов",
+    due: "2026-10-25",
+    amount: 37_200,
+    status: "draft",
+  },
+  {
+    id: "2026-0409",
+    client: "АО «Волга-Энерго»",
+    inn: "6316 255 018",
+    manager: "Анна Климова",
+    due: "2026-09-18",
+    amount: 1_095_000,
+    status: "paid",
+  },
+];
+
+const MONEY = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+const DAY = new Intl.DateTimeFormat("ru-RU", { day: "numeric", month: "short" });
+
+const asOptions = (values: string[]) => values.map((value) => ({ value, label: value }));
+
+const FIELDS: SmartFilterField[] = [
+  {
+    key: "status",
+    label: "Статус",
+    options: (Object.keys(STATUS) as Status[]).map((value) => ({
+      value,
+      label: STATUS[value].label,
+    })),
+  },
+  {
+    key: "manager",
+    label: "Менеджер",
+    finite: false,
+    options: asOptions(["Анна Климова", "Илья Петров", "Марат Хасанов"]),
+  },
+];
+
+const initials = (name: string) =>
+  name
+    .replace(/^(ООО|АО|ЗАО|ИП)\s+/, "")
+    .replace(/[^\p{L}\s]/gu, "")
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase();
+
+const COLUMNS: DataTableColumn<Invoice>[] = [
+  { id: "id", header: "Счёт", accessor: "id", sortable: true, numeric: true, align: "start" },
+  {
+    id: "client",
+    header: "Клиент",
+    accessor: "client",
+    sortable: true,
+    cell: (row) => (
+      <span className={styles.client}>
+        <Avatar.Root size="s" color="gray">
+          <Avatar.Fallback>{initials(row.client)}</Avatar.Fallback>
+        </Avatar.Root>
+        <span className={styles.clientText}>
+          <Typography as="span" variant="body-m">
+            {row.client}
+          </Typography>
+          <Typography as="span" variant="caption" tone="muted">
+            ИНН {row.inn}
+          </Typography>
+        </span>
+      </span>
+    ),
+  },
+  {
+    id: "status",
+    header: "Статус",
+    accessor: "status",
+    cell: (row) => (
+      <Badge.Root color={STATUS[row.status].color}>{STATUS[row.status].label}</Badge.Root>
+    ),
+  },
+  {
+    id: "due",
+    header: "Оплатить до",
+    accessor: "due",
+    sortable: true,
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => DAY.format(new Date(row.due)),
+  },
+  {
+    id: "amount",
+    header: "Сумма",
+    accessor: "amount",
+    sortable: true,
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => MONEY.format(row.amount),
+  },
+  {
+    id: "actions",
+    header: "",
+    width: "3.5rem",
+    align: "end",
+    cell: (row) => (
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root
+            size="s"
+            variant="ghost"
+            tone="neutral"
+            aria-label={`Действия со счётом ${row.id}`}
+          >
+            <Button.Icon>
+              <Icon name="action.more" />
+            </Button.Icon>
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Открыть</Dropdown.Item>
+          <Dropdown.Item>Скачать PDF</Dropdown.Item>
+          <Dropdown.Item>Отправить повторно</Dropdown.Item>
+          <Dropdown.Separator />
+          <Dropdown.Item tone="danger">Удалить</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+    ),
+  },
+];
+
+export default function ListPagePattern() {
+  const [filter, setFilter] = React.useState<SmartFilterValue>({});
+  const [search, setSearch] = React.useState("");
+
+  const query = search.trim().toLowerCase();
+  const rows = INVOICES.filter(
+    (row) =>
+      matchesSmartFilter(filter.status, row.status) &&
+      matchesSmartFilter(filter.manager, row.manager) &&
+      (row.id.includes(query) || row.client.toLowerCase().includes(query)),
+  );
+
+  const resetFilters = () => {
+    setFilter({});
+    setSearch("");
+  };
+
+  return (
+    <PageContent.Section aria-labelledby="invoices-title">
+      <PageContent.Header>
+        <PageContent.Title id="invoices-title">Счета</PageContent.Title>
+        <PageContent.Description>
+          Выставленные клиентам счета и статус их оплаты.
+        </PageContent.Description>
+        <PageContent.Actions>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.download" />
+            </Button.Icon>
+            Экспорт
+          </Button.Root>
+          <Button.Root>
+            <Button.Icon>
+              <Icon name="action.add" />
+            </Button.Icon>
+            Новый счёт
+          </Button.Root>
+        </PageContent.Actions>
+      </PageContent.Header>
+      <PageContent.Body>
+        <DataTable
+          columns={COLUMNS}
+          rows={rows}
+          getRowKey={(row) => row.id}
+          getRowLabel={(row) => `Счёт ${row.id}`}
+          pageSize={6}
+          stickyFirstColumn
+          defaultSort={{ columnId: "due", order: "desc" }}
+          toolbar={
+            <SmartFilter.Root
+              fields={FIELDS}
+              value={filter}
+              onValueChange={setFilter}
+              search={search}
+              onSearchChange={setSearch}
+              className={styles.filter}
+            >
+              <SmartFilter.Toolbar />
+              <SmartFilter.Chips />
+            </SmartFilter.Root>
+          }
+          empty={
+            <EmptyPage.Root size="s" role="status" aria-labelledby="invoices-empty">
+              <EmptyPage.Icon>
+                <Icon name="action.search" />
+              </EmptyPage.Icon>
+              <EmptyPage.Title as="p" id="invoices-empty">
+                Счетов не найдено
+              </EmptyPage.Title>
+              <EmptyPage.Description>Измените запрос или сбросьте фильтры.</EmptyPage.Description>
+              <EmptyPage.Actions>
+                <Button.Root variant="soft" tone="neutral" onClick={resetFilters}>
+                  Сбросить фильтры
+                </Button.Root>
+              </EmptyPage.Actions>
+            </EmptyPage.Root>
+          }
+        />
+      </PageContent.Body>
+    </PageContent.Section>
+  );
+}

package/dist/skill/patterns/screen-states.module.css

@@ -0,0 +1,54 @@
+/* Screen states: the layout keeps its shape in every state, only the content of a region changes. */
+
+/* The banner and the panels as one block with no gap of its own: the 40 under the banner lives in its
+   slot inside the Crossfade, so it arrives and leaves with the banner. */
+.lead {
+  display: grid;
+  min-width: 0;
+}
+
+.bannerSlot {
+  padding-block-end: var(--prime-space-10);
+}
+
+.panels {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-20) * 4)), 1fr));
+  align-items: stretch;
+  gap: var(--prime-space-4);
+}
+
+/* Skeleton rows mirror the account rows, so the card keeps its height when data arrives. */
+.nameBar {
+  width: 50%;
+}
+
+.balanceBar {
+  width: 35%;
+}
+
+/* The card stretches to its neighbour's height: rows stay at the top. */
+.accounts {
+  display: grid;
+  align-content: start;
+  gap: var(--prime-space-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.account {
+  display: grid;
+  gap: var(--prime-space-1);
+}
+
+.amount {
+  font-variant-numeric: tabular-nums;
+}
+
+/* A section without a card: heading 16 above the table. */
+.region {
+  display: grid;
+  gap: var(--prime-space-4);
+  min-width: 0;
+}