prime-ui-kit 0.13.1 → 0.14.0

package/dist/skill/patterns/record-editor.tsx

@@ -0,0 +1,356 @@
+/** A record editor: a plan's name, its specs, selling points and prices in one form — repeating records as FieldList rows with the headings once, a base price pinned above its changes, one value in three currencies in one row. */
+import {
+  Button,
+  Card,
+  ColorPresets,
+  FieldList,
+  type FieldListColumn,
+  Fieldset,
+  Icon,
+  type IconName,
+  Input,
+  PageContent,
+  Select,
+  Textarea,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./record-editor.module.css";
+
+type Spec = {
+  id: string;
+  icon: IconName;
+  name: string;
+  value: string;
+  color: string;
+  pinned?: boolean;
+};
+type Point = { id: string; text: string };
+type Period = { id: string; from: string; price: string; base?: boolean };
+
+const SPEC_COLUMNS: FieldListColumn[] = [
+  { label: "Иконка", width: "compact" },
+  { label: "Параметр" },
+  { label: "Значение" },
+  { label: "Цвет", width: "compact" },
+];
+
+const SPEC_ICONS: { name: IconName; label: string }[] = [
+  { name: "object.users", label: "Сотрудники" },
+  { name: "object.storage", label: "Хранилище" },
+  { name: "object.headset", label: "Поддержка" },
+  { name: "object.chart", label: "Отчёты" },
+  { name: "object.key", label: "Доступ" },
+  { name: "object.globe", label: "Интеграции" },
+];
+
+const SPECS: Spec[] = [
+  {
+    id: "seats",
+    icon: "object.users",
+    name: "Сотрудники",
+    value: "до 50",
+    color: "#5068f5",
+    pinned: true,
+  },
+  {
+    id: "storage",
+    icon: "object.storage",
+    name: "Хранилище",
+    value: "200 ГБ",
+    color: "#22c55e",
+    pinned: true,
+  },
+  {
+    id: "support",
+    icon: "object.headset",
+    name: "Поддержка",
+    value: "8/5, ответ за 2 часа",
+    color: "#f97316",
+    pinned: true,
+  },
+  { id: "reports", icon: "object.chart", name: "Отчёты", value: "12 шаблонов", color: "#a855f7" },
+  { id: "sso", icon: "object.key", name: "Вход через SSO", value: "SAML, OIDC", color: "#14b8a6" },
+];
+
+const POINT_COLUMNS: FieldListColumn[] = [{ label: "Преимущество" }];
+
+const POINTS: Point[] = [
+  { id: "space", text: "Вся команда в одном пространстве" },
+  { id: "files", text: "Документы и вложения без ограничений по типу" },
+  { id: "api", text: "API и вебхуки для своих интеграций" },
+];
+
+const PRICE_COLUMNS: FieldListColumn[] = [{ label: "Действует" }, { label: "Цена", width: "m" }];
+
+const MONTHS = [
+  { value: "01", label: "С 1 января" },
+  { value: "04", label: "С 1 апреля" },
+  { value: "07", label: "С 1 июля" },
+  { value: "10", label: "С 1 октября" },
+];
+
+const PERIODS: Period[] = [
+  { id: "base", from: "", price: "4 900", base: true },
+  { id: "autumn", from: "10", price: "5 400" },
+];
+
+const SETUP_FEE = [
+  { currency: "₽", name: "setupRub", label: "Подключение в рублях", value: "15 000" },
+  { currency: "$", name: "setupUsd", label: "Подключение в долларах", value: "170" },
+  { currency: "€", name: "setupEur", label: "Подключение в евро", value: "" },
+];
+
+const SAVE_MS = 900;
+const SAVED_MS = 2000;
+
+export default function RecordEditorPattern() {
+  const formId = React.useId();
+  const [specs, setSpecs] = React.useState(SPECS);
+  const [points, setPoints] = React.useState(POINTS);
+  const [periods, setPeriods] = React.useState(PERIODS);
+  const [nameError, setNameError] = React.useState<string>();
+  const [saving, setSaving] = React.useState(false);
+  const [saved, setSaved] = React.useState(false);
+
+  const save = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const name = String(new FormData(event.currentTarget).get("name") ?? "").trim();
+    if (name === "") {
+      setNameError("Назовите тариф: так его увидят клиенты");
+      event.currentTarget.querySelector<HTMLInputElement>("[name='name']")?.focus();
+      return;
+    }
+    setNameError(undefined);
+    setSaving(true);
+    window.setTimeout(() => {
+      setSaving(false);
+      setSaved(true);
+      window.setTimeout(() => setSaved(false), SAVED_MS);
+    }, SAVE_MS);
+  };
+
+  return (
+    <PageContent.Root maxWidth="wide" aria-labelledby="plan-title">
+      <PageContent.Header>
+        <PageContent.Title id="plan-title">Тариф «Команда»</PageContent.Title>
+        <PageContent.Description>
+          Так тариф выглядит на странице цен и в счетах.
+        </PageContent.Description>
+        <PageContent.Actions>
+          <Button.Root type="submit" form={formId} loading={saving}>
+            {saved ? "Сохранено" : "Сохранить тариф"}
+          </Button.Root>
+        </PageContent.Actions>
+      </PageContent.Header>
+      <PageContent.Body>
+        <PageContent.Section layout="aside" label="Основное">
+          <form id={formId} noValidate onSubmit={save}>
+            <Card.Root variant="panel">
+              <Card.Body>
+                <Fieldset disabled={saving} aria-label="Основное">
+                  <Input.Root label="Название" error={nameError}>
+                    <Input.Wrapper>
+                      <Input.Field name="name" defaultValue="Команда" />
+                    </Input.Wrapper>
+                  </Input.Root>
+                  <Textarea.Root
+                    name="summary"
+                    label="Описание"
+                    optional
+                    rows={2}
+                    defaultValue="Для отделов до 50 человек: задачи, документы и отчёты в одном месте."
+                  />
+                </Fieldset>
+              </Card.Body>
+            </Card.Root>
+          </form>
+        </PageContent.Section>
+
+        <PageContent.Section layout="aside" label="Характеристики">
+          <Card.Root variant="panel">
+            <Card.Body>
+              <FieldList
+                aria-label="Характеристики"
+                disabled={saving}
+                columns={SPEC_COLUMNS}
+                reorderable
+                value={specs}
+                onValueChange={setSpecs}
+                getId={(spec) => spec.id}
+                getLabel={(spec) => spec.name}
+                getLocked={(spec) => spec.pinned ?? false}
+                createItem={(): Spec => ({
+                  id: crypto.randomUUID(),
+                  icon: "object.globe",
+                  name: "",
+                  value: "",
+                  color: "#14b8a6",
+                })}
+                addLabel="Добавить характеристику"
+                renderItem={(spec, row) => (
+                  <>
+                    <Select.Root
+                      value={spec.icon}
+                      onValueChange={(icon) => row.update({ icon: icon as IconName })}
+                    >
+                      <Select.Trigger>
+                        <Select.TriggerIcon>
+                          <Icon name={spec.icon} />
+                        </Select.TriggerIcon>
+                      </Select.Trigger>
+                      <Select.Content>
+                        {SPEC_ICONS.map((icon) => (
+                          <Select.Item key={icon.name} value={icon.name}>
+                            <Select.ItemIcon>
+                              <Icon name={icon.name} />
+                            </Select.ItemIcon>
+                            {icon.label}
+                          </Select.Item>
+                        ))}
+                      </Select.Content>
+                    </Select.Root>
+                    <Input.Root>
+                      <Input.Wrapper>
+                        <Input.Field
+                          value={spec.name}
+                          onChange={(event) => row.update({ name: event.target.value })}
+                        />
+                      </Input.Wrapper>
+                    </Input.Root>
+                    <Input.Root>
+                      <Input.Wrapper>
+                        <Input.Field
+                          value={spec.value}
+                          onChange={(event) => row.update({ value: event.target.value })}
+                        />
+                      </Input.Wrapper>
+                    </Input.Root>
+                    <ColorPresets.Root
+                      value={spec.color}
+                      onValueChange={(color) => row.update({ color: color ?? spec.color })}
+                    >
+                      <ColorPresets.Trigger>
+                        <ColorPresets.SwatchButton />
+                      </ColorPresets.Trigger>
+                      <ColorPresets.Content />
+                    </ColorPresets.Root>
+                  </>
+                )}
+              />
+            </Card.Body>
+          </Card.Root>
+        </PageContent.Section>
+
+        <PageContent.Section layout="aside" label="Преимущества">
+          <Card.Root variant="panel">
+            <Card.Body>
+              <FieldList
+                aria-label="Преимущества"
+                disabled={saving}
+                columns={POINT_COLUMNS}
+                reorderable
+                max={6}
+                value={points}
+                onValueChange={setPoints}
+                getId={(point) => point.id}
+                getLabel={(point) => point.text}
+                createItem={() => ({ id: crypto.randomUUID(), text: "" })}
+                addLabel="Добавить преимущество"
+                renderItem={(point, row) => (
+                  <Input.Root>
+                    <Input.Wrapper>
+                      <Input.Field
+                        value={point.text}
+                        onChange={(event) => row.update({ text: event.target.value })}
+                      />
+                    </Input.Wrapper>
+                  </Input.Root>
+                )}
+              />
+            </Card.Body>
+          </Card.Root>
+        </PageContent.Section>
+
+        <PageContent.Section layout="aside" label="Стоимость">
+          <Card.Root variant="panel">
+            <Card.Body className={styles.groups}>
+              <Fieldset label="За месяц" disabled={saving}>
+                <FieldList
+                  columns={PRICE_COLUMNS}
+                  value={periods}
+                  onValueChange={setPeriods}
+                  getId={(period) => period.id}
+                  getLocked={(period) => period.base ?? false}
+                  createItem={() => ({ id: crypto.randomUUID(), from: "", price: "" })}
+                  addLabel="Добавить изменение цены"
+                  renderItem={(period, row) => (
+                    <>
+                      {period.base ? (
+                        <Input.Root>
+                          <Input.Wrapper>
+                            <Input.Field value="Всегда, если нет изменений" readOnly />
+                          </Input.Wrapper>
+                        </Input.Root>
+                      ) : (
+                        <Select.Root
+                          value={period.from}
+                          onValueChange={(from) => row.update({ from })}
+                          placeholder="Выберите месяц"
+                        >
+                          <Select.Trigger>
+                            <Select.Value />
+                          </Select.Trigger>
+                          <Select.Content>
+                            {MONTHS.map((month) => (
+                              <Select.Item key={month.value} value={month.value}>
+                                {month.label}
+                              </Select.Item>
+                            ))}
+                          </Select.Content>
+                        </Select.Root>
+                      )}
+                      <Input.Root>
+                        <Input.Wrapper>
+                          <Input.Field
+                            value={period.price}
+                            inputMode="decimal"
+                            placeholder="0"
+                            onChange={(event) => row.update({ price: event.target.value })}
+                          />
+                          <Input.InlineAffix side="end">₽</Input.InlineAffix>
+                        </Input.Wrapper>
+                      </Input.Root>
+                    </>
+                  )}
+                />
+              </Fieldset>
+              <Fieldset
+                label="Подключение"
+                description="Разовый платёж; пустая валюта не выставляется."
+                disabled={saving}
+              >
+                <div className={styles.currencies}>
+                  {SETUP_FEE.map((fee) => (
+                    <Input.Root key={fee.name}>
+                      <Input.Wrapper>
+                        <Input.Field
+                          name={fee.name}
+                          aria-label={fee.label}
+                          inputMode="decimal"
+                          placeholder="0"
+                          defaultValue={fee.value}
+                        />
+                        <Input.InlineAffix side="end">{fee.currency}</Input.InlineAffix>
+                      </Input.Wrapper>
+                    </Input.Root>
+                  ))}
+                </div>
+              </Fieldset>
+            </Card.Body>
+          </Card.Root>
+        </PageContent.Section>
+      </PageContent.Body>
+    </PageContent.Root>
+  );
+}

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

@@ -1,21 +1,14 @@
 /* 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. */
+/* The banner and the panels as one block with no gap of its own: the 24 under the banner (the body's
+   block gap) 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);
+  padding-block-end: var(--prime-space-6);
 }
 
 /* Skeleton rows mirror the account rows, so the card keeps its height when data arrives. */
@@ -45,10 +38,3 @@
 .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;
-}

package/dist/skill/patterns/screen-states.tsx

@@ -66,7 +66,7 @@ export default function ScreenStatesPattern() {
   };
 
   return (
-    <PageContent.Section aria-labelledby="reconcile-title">
+    <PageContent.Page aria-labelledby="reconcile-title">
       <PageContent.Header>
         <PageContent.Title id="reconcile-title">Сверка с банком</PageContent.Title>
         <PageContent.Description>
@@ -100,75 +100,76 @@ export default function ScreenStatesPattern() {
             ) : null}
           </Crossfade>
 
-          <div className={styles.panels}>
-            <Card.Root variant="panel" aria-busy={status === "loading"}>
-              <Card.Header>
-                <Card.Title as="h2">Остатки</Card.Title>
-                <Typography as="span" variant="caption" tone="muted">
-                  {status === "ready" ? "на 7 октября" : "на 6 октября"}
-                </Typography>
-              </Card.Header>
-              <Card.Body>
-                {/* Loading ↔ data cross-fade in place; the table below swaps its body the same way. */}
-                <Crossfade state={status === "loading" ? "loading" : "ready"}>
-                  {status === "loading" ? (
-                    <ul className={styles.accounts}>
-                      {ACCOUNTS.map((account) => (
-                        <li key={account.name} className={styles.account}>
-                          <Skeleton className={styles.nameBar} />
-                          {/* title-m is the l text tier: 16 / 24. */}
-                          <Skeleton size="l" className={styles.balanceBar} />
-                        </li>
-                      ))}
-                    </ul>
-                  ) : (
-                    <ul className={styles.accounts}>
-                      {ACCOUNTS.map((account) => (
-                        <li key={account.name} className={styles.account}>
-                          <Typography as="span" variant="body-m" tone="secondary">
-                            {account.name}
-                          </Typography>
-                          <Typography as="span" variant="title-m" className={styles.amount}>
-                            {account.balance}
-                          </Typography>
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </Crossfade>
-              </Card.Body>
-            </Card.Root>
+          <PageContent.Grid>
+            <PageContent.Cell span={6}>
+              <Card.Root variant="panel" aria-busy={status === "loading"}>
+                <Card.Header>
+                  <Card.Title as="h2">Остатки</Card.Title>
+                  <Typography as="span" variant="caption" tone="muted">
+                    {status === "ready" ? "на 7 октября" : "на 6 октября"}
+                  </Typography>
+                </Card.Header>
+                <Card.Body>
+                  {/* Loading ↔ data cross-fade in place; the table below swaps its body the same way. */}
+                  <Crossfade state={status === "loading" ? "loading" : "ready"}>
+                    {status === "loading" ? (
+                      <ul className={styles.accounts}>
+                        {ACCOUNTS.map((account) => (
+                          <li key={account.name} className={styles.account}>
+                            <Skeleton className={styles.nameBar} />
+                            {/* title-m is the l text tier: 16 / 24. */}
+                            <Skeleton size="l" className={styles.balanceBar} />
+                          </li>
+                        ))}
+                      </ul>
+                    ) : (
+                      <ul className={styles.accounts}>
+                        {ACCOUNTS.map((account) => (
+                          <li key={account.name} className={styles.account}>
+                            <Typography as="span" variant="body-m" tone="secondary">
+                              {account.name}
+                            </Typography>
+                            <Typography as="span" variant="title-m" className={styles.amount}>
+                              {account.balance}
+                            </Typography>
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </Crossfade>
+                </Card.Body>
+              </Card.Root>
+            </PageContent.Cell>
 
-            <Card.Root variant="panel">
-              <Card.Header>
-                <Card.Title as="h2">Правила разнесения</Card.Title>
-              </Card.Header>
-              <Card.Body>
-                <EmptyPage.Root size="s" aria-labelledby="rules-empty">
-                  <EmptyPage.Icon tone="accent">
-                    <Icon name="action.filter" />
-                  </EmptyPage.Icon>
-                  <EmptyPage.Title as="h3" id="rules-empty">
-                    Правил пока нет
-                  </EmptyPage.Title>
-                  <EmptyPage.Description>
-                    Правило свяжет платёж со счётом по ИНН или назначению.
-                  </EmptyPage.Description>
-                  <EmptyPage.Actions>
-                    <Button.Root variant="soft" tone="neutral">
-                      Создать правило
-                    </Button.Root>
-                  </EmptyPage.Actions>
-                </EmptyPage.Root>
-              </Card.Body>
-            </Card.Root>
-          </div>
+            <PageContent.Cell span={6}>
+              <Card.Root variant="panel">
+                <Card.Header>
+                  <Card.Title as="h2">Правила разнесения</Card.Title>
+                </Card.Header>
+                <Card.Body>
+                  <EmptyPage.Root size="s" aria-labelledby="rules-empty">
+                    <EmptyPage.Icon tone="accent">
+                      <Icon name="action.filter" />
+                    </EmptyPage.Icon>
+                    <EmptyPage.Title as="h3" id="rules-empty">
+                      Правил пока нет
+                    </EmptyPage.Title>
+                    <EmptyPage.Description>
+                      Правило свяжет платёж со счётом по ИНН или назначению.
+                    </EmptyPage.Description>
+                    <EmptyPage.Actions>
+                      <Button.Root variant="soft" tone="neutral">
+                        Создать правило
+                      </Button.Root>
+                    </EmptyPage.Actions>
+                  </EmptyPage.Root>
+                </Card.Body>
+              </Card.Root>
+            </PageContent.Cell>
+          </PageContent.Grid>
         </div>
 
-        <section className={styles.region} aria-labelledby="unmatched-title">
-          <Typography as="h2" variant="title-m" id="unmatched-title">
-            Неразнесённые платежи
-          </Typography>
+        <PageContent.Section label="Неразнесённые платежи">
           <DataTable
             columns={COLUMNS}
             rows={status === "ready" ? PAYMENTS : []}
@@ -179,8 +180,8 @@ export default function ScreenStatesPattern() {
             error={status === "error" ? "Платежи появятся после загрузки выписки" : undefined}
             empty="Все платежи разнесены"
           />
-        </section>
+        </PageContent.Section>
       </PageContent.Body>
-    </PageContent.Section>
+    </PageContent.Page>
   );
 }

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

@@ -1,24 +1,4 @@
-/* Settings page: heading column + panel per section; wraps into one column without breakpoints. */
-
-.section {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: var(--prime-space-4) var(--prime-space-10);
-}
-
-/* ~16rem of heading and lead text; drops above the panel once the panel would get < 30rem. */
-.lead {
-  display: grid;
-  flex: 1 1 calc(var(--prime-space-16) * 4);
-  gap: var(--prime-space-1);
-  min-width: 0;
-}
-
-.panel {
-  flex: 999 1 calc(var(--prime-space-24) * 5);
-  min-width: 0;
-}
+/* Settings page: each section is a PageContent.Section layout="aside"; here only the panels' insides. */
 
 /* Field → field 20. */