prime-ui-kit 0.13.1 → 0.15.0

package/src/components/field-list/examples/locked.tsx

@@ -0,0 +1,139 @@
+/** Specs of a plan on one line each: an icon picker and a color swatch take compact columns, the first three specs are pinned with a lock and the rest reorder below them — `getLocked`, `width`, `reorderable`. */
+import {
+  ColorPresets,
+  FieldList,
+  type FieldListColumn,
+  Icon,
+  type IconName,
+  Input,
+  Select,
+} from "prime-ui-kit";
+import * as React from "react";
+
+type Spec = {
+  id: string;
+  icon: IconName;
+  name: string;
+  value: string;
+  color: string;
+  pinned?: boolean;
+};
+
+const COLUMNS: FieldListColumn[] = [
+  { label: "Иконка", width: "compact" },
+  { label: "Параметр" },
+  { label: "Значение" },
+  { label: "Цвет", width: "compact" },
+];
+
+const 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",
+    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" },
+];
+
+export default function FieldListLockedExample() {
+  const [specs, setSpecs] = React.useState(SPECS);
+
+  return (
+    <FieldList
+      label="Характеристики тарифа"
+      columns={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>
+              {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>
+        </>
+      )}
+    />
+  );
+}

package/src/components/field-list/examples/narrow.tsx

@@ -0,0 +1,68 @@
+/** The invoice lines in a 320 px column: the headings give way, each row stacks its fields with their own labels and rows stand a group apart — `columns`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Line = { id: string; service: string; quantity: string; price: string };
+
+const COLUMNS: FieldListColumn[] = [
+  { label: "Услуга" },
+  { label: "Кол-во", width: "s" },
+  { label: "Цена", width: "m" },
+];
+
+const LINES: Line[] = [
+  { id: "setup", service: "Внедрение CRM", quantity: "1", price: "180 000" },
+  { id: "training", service: "Обучение менеджеров", quantity: "3", price: "15 000" },
+];
+
+export default function FieldListNarrowExample() {
+  const [lines, setLines] = React.useState(LINES);
+
+  return (
+    <div className={styles.narrow}>
+      <FieldList
+        label="Позиции счёта"
+        columns={COLUMNS}
+        value={lines}
+        onValueChange={setLines}
+        getId={(line) => line.id}
+        getLabel={(line) => line.service}
+        createItem={() => ({ id: crypto.randomUUID(), service: "", quantity: "1", price: "" })}
+        addLabel="Добавить позицию"
+        renderItem={(line, row) => (
+          <>
+            <Input.Root>
+              <Input.Wrapper>
+                <Input.Field
+                  value={line.service}
+                  onChange={(event) => row.update({ service: event.target.value })}
+                />
+              </Input.Wrapper>
+            </Input.Root>
+            <Input.Root>
+              <Input.Wrapper>
+                <Input.Field
+                  value={line.quantity}
+                  inputMode="numeric"
+                  onChange={(event) => row.update({ quantity: event.target.value })}
+                />
+              </Input.Wrapper>
+            </Input.Root>
+            <Input.Root>
+              <Input.Wrapper>
+                <Input.Field
+                  value={line.price}
+                  inputMode="decimal"
+                  onChange={(event) => row.update({ price: event.target.value })}
+                />
+                <Input.InlineAffix side="end">₽</Input.InlineAffix>
+              </Input.Wrapper>
+            </Input.Root>
+          </>
+        )}
+      />
+    </div>
+  );
+}

package/src/components/field-list/examples/overview.tsx

@@ -0,0 +1,66 @@
+/** Lines of an invoice: the column headings stand once above the rows, each row has a remove button and the add button sits under them — `columns`, `renderItem`, `createItem`, `addLabel`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import * as React from "react";
+
+type Line = { id: string; service: string; quantity: string; price: string };
+
+const COLUMNS: FieldListColumn[] = [
+  { label: "Услуга" },
+  { label: "Кол-во", width: "s" },
+  { label: "Цена", width: "m" },
+];
+
+const LINES: Line[] = [
+  { id: "setup", service: "Внедрение CRM", quantity: "1", price: "180 000" },
+  { id: "training", service: "Обучение менеджеров", quantity: "3", price: "15 000" },
+];
+
+export default function FieldListOverviewExample() {
+  const [lines, setLines] = React.useState(LINES);
+
+  return (
+    <FieldList
+      label="Позиции счёта"
+      columns={COLUMNS}
+      value={lines}
+      onValueChange={setLines}
+      getId={(line) => line.id}
+      getLabel={(line) => line.service}
+      createItem={() => ({ id: crypto.randomUUID(), service: "", quantity: "1", price: "" })}
+      addLabel="Добавить позицию"
+      renderItem={(line, row) => (
+        <>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={line.service}
+                placeholder="Поддержка, 1 месяц"
+                onChange={(event) => row.update({ service: event.target.value })}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={line.quantity}
+                inputMode="numeric"
+                onChange={(event) => row.update({ quantity: event.target.value })}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={line.price}
+                inputMode="decimal"
+                placeholder="0"
+                onChange={(event) => row.update({ price: event.target.value })}
+              />
+              <Input.InlineAffix side="end">₽</Input.InlineAffix>
+            </Input.Wrapper>
+          </Input.Root>
+        </>
+      )}
+    />
+  );
+}

package/src/components/field-list/examples/reorder.tsx

@@ -0,0 +1,42 @@
+/** Selling points of a plan in the order of the pricing page: a one-column list has no headings and no numbers, a point moves by its handle or Alt+arrows — `reorderable`, `getLabel`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import * as React from "react";
+
+type Point = { id: string; text: string };
+
+const COLUMNS: FieldListColumn[] = [{ label: "Преимущество" }];
+
+const POINTS: Point[] = [
+  { id: "users", text: "До 50 сотрудников в одном пространстве" },
+  { id: "storage", text: "200 ГБ для документов и вложений" },
+  { id: "support", text: "Поддержка в рабочие часы, ответ за 2 часа" },
+  { id: "api", text: "Доступ к API и вебхукам" },
+];
+
+export default function FieldListReorderExample() {
+  const [points, setPoints] = React.useState(POINTS);
+
+  return (
+    <FieldList
+      label="Преимущества тарифа"
+      columns={COLUMNS}
+      reorderable
+      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>
+      )}
+    />
+  );
+}

package/src/components/field-list/examples/screen.module.css

@@ -0,0 +1,18 @@
+/* Record editor: the sections are PageContent.Section layout="aside"; here only the panels' insides. */
+
+/* Two groups in one panel, a group apart. */
+.groups {
+  display: grid;
+  gap: var(--prime-space-8);
+}
+
+/* One value in three currencies: one row while there is room, the unit inside each field. */
+.currencies {
+  display: grid;
+  grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, calc(var(--prime-space-24) + var(--prime-space-8))), 1fr)
+    );
+  align-items: start;
+  gap: var(--prime-space-3);
+}

package/src/components/field-list/examples/screen.tsx

@@ -0,0 +1,316 @@
+/** A record editor as a document page, a long form whose title, description and save stand in the content header: a plan's name, its specs 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 — `getLocked`, `compact`. */
+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 "./screen.module.css";
+
+type Spec = {
+  id: string;
+  icon: IconName;
+  name: string;
+  value: string;
+  color: string;
+  pinned?: boolean;
+};
+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 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 FieldListScreenExample() {
+  const formId = React.useId();
+  const [specs, setSpecs] = React.useState(SPECS);
+  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 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>
+  );
+}