prime-ui-kit 0.15.0 → 0.17.0

package/src/layout/page/examples/list-detail.tsx

@@ -0,0 +1,112 @@
+/** A ticket queue as list + detail on a full-height page: side by side on a wide panel, one pane at a time with a back button on a narrow one; the chosen ticket cross-fades in — `Page.Split`, `Page.List`, `Page.Detail`, `Page.BackButton`, `fill`. */
+import { Card, Crossfade, List, Page, ScrollContainer, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Ticket = { id: string; subject: string; client: string; open: number; notes: string[] };
+
+const TICKETS: Ticket[] = [
+  {
+    id: "T-4821",
+    subject: "Счёт без НДС",
+    client: "ООО «Гранит»",
+    open: 2,
+    notes: [
+      "Счёт № 4821 пришёл без НДС.",
+      "Проверили реквизиты: ставка не подставилась из договора.",
+      "Нужно провести до пятницы.",
+      "Исправили ставку, новый счёт № 4830 отправлен на почту.",
+    ],
+  },
+  {
+    id: "T-4817",
+    subject: "Перенос доставки",
+    client: "ООО «Лето»",
+    open: 0,
+    notes: ["Просят перенести доставку на среду.", "Перенесли на 15 октября, склад предупреждён."],
+  },
+  {
+    id: "T-4809",
+    subject: "Подключение ЭДО",
+    client: "ИП Козлов",
+    open: 1,
+    notes: ["Нужно подключить ЭДО.", "Запросили идентификатор в Диадоке."],
+  },
+];
+
+export default function PageListDetailExample() {
+  const [ticketId, setTicketId] = React.useState<string | null>(null);
+  // The last opened ticket stays in the detail while the narrow split goes back to the list.
+  const [shown, setShown] = React.useState<Ticket | null>(null);
+
+  const open = (ticket: Ticket) => {
+    setTicketId(ticket.id);
+    setShown(ticket);
+  };
+
+  return (
+    <div className={styles.fillMain}>
+      <Page.Root fill>
+        <Page.Body>
+          <Page.Split
+            open={ticketId !== null}
+            onOpenChange={(next) => {
+              if (!next) setTicketId(null);
+            }}
+          >
+            <Page.List aria-label="Обращения">
+              <Card.Root className={styles.paneCard}>
+                <ScrollContainer className={styles.pane}>
+                  <List.Root className={styles.tickets}>
+                    {TICKETS.map((ticket) => (
+                      <List.Item
+                        key={ticket.id}
+                        current={ticket.id === ticketId}
+                        onClick={() => open(ticket)}
+                      >
+                        <List.ItemText>{ticket.subject}</List.ItemText>
+                        <List.ItemDescription>{ticket.client}</List.ItemDescription>
+                        {ticket.open > 0 ? (
+                          <List.ItemCount color="blue">{ticket.open}</List.ItemCount>
+                        ) : null}
+                      </List.Item>
+                    ))}
+                  </List.Root>
+                </ScrollContainer>
+              </Card.Root>
+            </Page.List>
+
+            <Page.Detail aria-label="Обращение">
+              <Card.Root className={styles.paneCard}>
+                <div className={styles.threadHeader}>
+                  <Page.BackButton />
+                  <Typography as="h2" variant="title-s">
+                    {shown ? `${shown.id} · ${shown.subject}` : "Выберите обращение"}
+                  </Typography>
+                </div>
+                <ScrollContainer anchor="end" className={styles.pane}>
+                  <Crossfade state={shown?.id ?? "none"}>
+                    {shown ? (
+                      <div className={styles.notes}>
+                        {shown.notes.map((text) => (
+                          <Typography key={text} variant="body-m">
+                            {text}
+                          </Typography>
+                        ))}
+                      </div>
+                    ) : (
+                      <Typography variant="body-m" tone="muted" className={styles.hint}>
+                        История обращения откроется здесь.
+                      </Typography>
+                    )}
+                  </Crossfade>
+                </ScrollContainer>
+              </Card.Root>
+            </Page.Detail>
+          </Page.Split>
+        </Page.Body>
+      </Page.Root>
+    </div>
+  );
+}

package/src/layout/page/examples/narrow.tsx

@@ -0,0 +1,75 @@
+/** On a phone the top bar leads with the menu button that opens the navigation by itself, the primary button gives way to its icon and the secondary ones fold into «⋯» — `offCanvas`, `Page.Actions`. */
+import { AppShell, Button, Icon, Page, Sidebar, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const ORDERS = [
+  "№ 4821 · ООО «Север» · 84 000 ₽",
+  "№ 4820 · ИП Котов · 12 500 ₽",
+  "№ 4819 · ООО «Вектор» · 230 000 ₽",
+];
+
+export default function PageNarrowExample() {
+  return (
+    <div className={`${styles.window} ${styles.phone}`}>
+      <AppShell.Root fillViewport className={styles.shell}>
+        <AppShell.Nav>
+          {/* `always`: this window is phone-wide on any screen; in an app keep the default `auto`. */}
+          <Sidebar.Root offCanvas="always">
+            <Sidebar.Content>
+              <Sidebar.Item href="#overview">
+                <Sidebar.ItemIcon>
+                  <Icon name="nav.home" />
+                </Sidebar.ItemIcon>
+                Обзор
+              </Sidebar.Item>
+              <Sidebar.Item href="#orders" current>
+                <Sidebar.ItemIcon>
+                  <Icon name="object.package" />
+                </Sidebar.ItemIcon>
+                Заказы
+              </Sidebar.Item>
+            </Sidebar.Content>
+          </Sidebar.Root>
+        </AppShell.Nav>
+        <AppShell.Main>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Заказы покупателей</Page.Title>
+                <Page.Description>128 в работе · 6 ждут оплаты · 2 возврата</Page.Description>
+              </Page.Heading>
+              <Page.Actions>
+                <Button.Root variant="soft" tone="neutral">
+                  <Button.Icon>
+                    <Icon name="action.download" />
+                  </Button.Icon>
+                  Экспорт
+                </Button.Root>
+                <Button.Root variant="soft" tone="neutral">
+                  <Button.Icon>
+                    <Icon name="action.refresh" />
+                  </Button.Icon>
+                  Обновить
+                </Button.Root>
+                <Button.Root>
+                  <Button.Icon>
+                    <Icon name="action.add" />
+                  </Button.Icon>
+                  Новый заказ
+                </Button.Root>
+              </Page.Actions>
+            </Page.TopBar>
+            <Page.Body>
+              {ORDERS.map((order) => (
+                <Typography key={order} variant="body-m">
+                  {order}
+                </Typography>
+              ))}
+            </Page.Body>
+          </Page.Root>
+        </AppShell.Main>
+      </AppShell.Root>
+    </div>
+  );
+}

package/src/layout/page/examples/overview.tsx

@@ -0,0 +1,57 @@
+/** A work page in an app window: the top bar with the title, its line of data and the page's buttons, the body under it — `Page.TopBar`, `Page.Heading`, `Page.Actions`. */
+import { AppShell, Button, Card, Icon, Page, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const ORDERS = [
+  { id: "№ 4821", client: "ООО «Север»", sum: "84 000 ₽" },
+  { id: "№ 4820", client: "ИП Котов", sum: "12 500 ₽" },
+  { id: "№ 4819", client: "ООО «Вектор»", sum: "230 000 ₽" },
+  { id: "№ 4818", client: "АО «Техностиль»", sum: "47 900 ₽" },
+];
+
+export default function PageOverviewExample() {
+  return (
+    <div className={styles.window}>
+      <AppShell.Root fillViewport className={styles.shell}>
+        <AppShell.Main>
+          <Page.Root>
+            <Page.TopBar>
+              <Page.Heading>
+                <Page.Title>Заказы</Page.Title>
+                <Page.Description>128 в работе · 6 ждут оплаты</Page.Description>
+              </Page.Heading>
+              <Page.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>
+              </Page.Actions>
+            </Page.TopBar>
+            <Page.Body>
+              <Card.Root variant="list">
+                <Card.List>
+                  {ORDERS.map((order) => (
+                    <Card.ListItem key={order.id}>
+                      <Typography as="span" variant="body-m">
+                        {order.id} · {order.client} · {order.sum}
+                      </Typography>
+                    </Card.ListItem>
+                  ))}
+                </Card.List>
+              </Card.Root>
+            </Page.Body>
+          </Page.Root>
+        </AppShell.Main>
+      </AppShell.Root>
+    </div>
+  );
+}

package/{dist/skill/reference/components/page-content → src/layout/page}/examples/screen.module.css

@@ -1,4 +1,4 @@
-/* Settings page: each section is a PageContent.Section layout="aside"; here only the panels' insides. */
+/* Settings page: each section is a Page.Section layout="aside"; here only the panels' insides. */
 
 /* Field → field 20. */
 

package/{dist/skill/reference/components/page-content → src/layout/page}/examples/screen.tsx

@@ -1,11 +1,12 @@
-/** A settings page: sections with a heading column and a panel, a form saved by its own button, switches that apply at once and a danger zone with a confirm — `layout`, `maxWidth`. */
+/** A settings page as a document: the path in the top bar that repeats the title once it scrolls away, the large title in the flow, sections with a heading column and a panel, a form saved by its own button, switches that apply at once and a danger zone with a confirm — `collapse`, `layout`, `maxWidth`. */
 import {
+  Breadcrumb,
   Button,
   Card,
   ConfirmDialog,
   Fieldset,
   Input,
-  PageContent,
+  Page,
   Select,
   Switch,
   Textarea,
@@ -45,7 +46,7 @@ const ALERTS = [
   },
 ];
 
-export default function PageContentScreenExample() {
+export default function PageScreenExample() {
   const [innError, setInnError] = React.useState<string>();
   const [saving, setSaving] = React.useState(false);
   const [saved, setSaved] = React.useState(false);
@@ -70,15 +71,24 @@ export default function PageContentScreenExample() {
   const removeWorkspace = () => new Promise<void>((resolve) => window.setTimeout(resolve, 1200));
 
   return (
-    <PageContent.Root maxWidth="wide" aria-labelledby="settings-title">
-      <PageContent.Header>
-        <PageContent.Title id="settings-title">Настройки</PageContent.Title>
-        <PageContent.Description>
-          Реквизиты компании, уведомления и управление рабочим пространством.
-        </PageContent.Description>
-      </PageContent.Header>
-      <PageContent.Body>
-        <PageContent.Section
+    <Page.Root maxWidth="wide">
+      <Page.TopBar collapse>
+        <Page.Heading>
+          <Breadcrumb.Root>
+            <Breadcrumb.Item href="#workspace">Прайм Софт</Breadcrumb.Item>
+          </Breadcrumb.Root>
+        </Page.Heading>
+      </Page.TopBar>
+      <Page.Header>
+        <Page.Heading>
+          <Page.Title>Настройки</Page.Title>
+          <Page.Description>
+            Реквизиты компании, уведомления и управление рабочим пространством.
+          </Page.Description>
+        </Page.Heading>
+      </Page.Header>
+      <Page.Body>
+        <Page.Section
           layout="aside"
           label="Компания"
           description="Попадают в счета, акты и письма клиентам."
@@ -135,9 +145,9 @@ export default function PageContentScreenExample() {
               </Card.Footer>
             </Card.Root>
           </form>
-        </PageContent.Section>
+        </Page.Section>
 
-        <PageContent.Section
+        <Page.Section
           layout="aside"
           label="Уведомления"
           description="Включаются сразу, без сохранения."
@@ -158,9 +168,9 @@ export default function PageContentScreenExample() {
               </Fieldset>
             </Card.Body>
           </Card.Root>
-        </PageContent.Section>
+        </Page.Section>
 
-        <PageContent.Section
+        <Page.Section
           layout="aside"
           label="Рабочее пространство"
           description="Действия, которые нельзя отменить."
@@ -189,8 +199,8 @@ export default function PageContentScreenExample() {
               </div>
             </Card.Body>
           </Card.Root>
-        </PageContent.Section>
-      </PageContent.Body>
-    </PageContent.Root>
+        </Page.Section>
+      </Page.Body>
+    </Page.Root>
   );
 }

package/{dist/skill/reference/components/page-content → src/layout/page}/examples/sections.tsx

@@ -1,12 +1,5 @@
-/** A page with titled sections: tiles of one screen close together, a new topic set off by air, a link at the end of the heading, a heading column beside a panel — `PageContent.Section`, `label`, `description`, `PageContent.Actions`, `layout`. */
-import {
-  Card,
-  DataTable,
-  type DataTableColumn,
-  LinkButton,
-  PageContent,
-  Typography,
-} from "prime-ui-kit";
+/** A page with titled sections: tiles of one screen close together, a new topic set off by air, a link at the end of the heading, a heading column beside a panel — `Page.Section`, `label`, `description`, `Page.Actions`, `layout`. */
+import { Card, DataTable, type DataTableColumn, LinkButton, Page, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -36,33 +29,33 @@ const COLUMNS: DataTableColumn<Invoice>[] = [
   },
 ];
 
-export default function PageContentSectionsExample() {
+export default function PageSectionsExample() {
   return (
     <div className={styles.main}>
-      <PageContent.Body>
-        <PageContent.Grid>
-          <PageContent.Cell span={6}>
+      <Page.Body>
+        <Page.Grid>
+          <Page.Cell span={6}>
             <Card.Root variant="stat-trend">
               <Card.Label>Выставлено</Card.Label>
               <Card.Value>2,4 млн ₽</Card.Value>
               <Card.Delta tone="success">+9% к сентябрю</Card.Delta>
             </Card.Root>
-          </PageContent.Cell>
-          <PageContent.Cell span={6}>
+          </Page.Cell>
+          <Page.Cell span={6}>
             <Card.Root variant="stat-trend">
               <Card.Label>Оплачено</Card.Label>
               <Card.Value>1,9 млн ₽</Card.Value>
               <Card.Delta tone="neutral">79% выставленного</Card.Delta>
             </Card.Root>
-          </PageContent.Cell>
-        </PageContent.Grid>
-        <PageContent.Section label="Последние счета" description="Три последних за октябрь">
-          <PageContent.Actions>
+          </Page.Cell>
+        </Page.Grid>
+        <Page.Section label="Последние счета" description="Три последних за октябрь">
+          <Page.Actions>
             <LinkButton href="#invoices">Все счета</LinkButton>
-          </PageContent.Actions>
+          </Page.Actions>
           <DataTable columns={COLUMNS} rows={INVOICES} getRowKey={(row) => row.id} paging="none" />
-        </PageContent.Section>
-        <PageContent.Section
+        </Page.Section>
+        <Page.Section
           layout="aside"
           label="Реквизиты в счетах"
           description="Попадают в каждый новый счёт."
@@ -74,8 +67,8 @@ export default function PageContentSectionsExample() {
               </Typography>
             </Card.Body>
           </Card.Root>
-        </PageContent.Section>
-      </PageContent.Body>
+        </Page.Section>
+      </Page.Body>
     </div>
   );
 }

package/src/layout/page/examples/structure.tsx

@@ -0,0 +1,41 @@
+/** A document page in the flow: the path over the large title, its line of data and the page's buttons beside them, then the body with a section — `Page.Header`, `Page.Heading`, `Page.Description`, `Page.Section`. */
+import { Breadcrumb, Button, Card, Page, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function PageStructureExample() {
+  return (
+    <div className={styles.main}>
+      <Page.Root>
+        <Page.Header>
+          <Page.Heading>
+            <Breadcrumb.Root>
+              <Breadcrumb.Item href="#settings">Настройки</Breadcrumb.Item>
+            </Breadcrumb.Root>
+            <Page.Title>Уведомления</Page.Title>
+            <Page.Description>
+              Письма и сообщения, которые получает команда продаж.
+            </Page.Description>
+          </Page.Heading>
+          <Page.Actions>
+            <Button.Root variant="soft" tone="neutral">
+              Сбросить
+            </Button.Root>
+            <Button.Root>Сохранить</Button.Root>
+          </Page.Actions>
+        </Page.Header>
+        <Page.Body>
+          <Page.Section label="Новые заказы" description="Сразу после оформления.">
+            <Card.Root variant="panel">
+              <Card.Body>
+                <Typography variant="body-m" tone="secondary">
+                  Письмо ответственному менеджеру и сводка в канал отдела продаж.
+                </Typography>
+              </Card.Body>
+            </Card.Root>
+          </Page.Section>
+        </Page.Body>
+      </Page.Root>
+    </div>
+  );
+}

package/src/{components/page-toolbar/examples/narrow.tsx → layout/page/examples/tools.tsx}

@@ -1,8 +1,8 @@
-/** A phone-width column: search and filter on top, the primary action on its own row under them, then the active filters, the sections and the period, every row 12 apart — `PageToolbar.Root`. */
+/** The orders page's tools in its top bar: sections with counts, search and filter, the period, in the order written; the active filters on a line under everything — `Page.Tools`, `Page.Chips`. */
 import {
   Button,
   Icon,
-  PageToolbar,
+  Page,
   SegmentedControl,
   Select,
   SmartFilter,
@@ -11,17 +11,17 @@ import {
 } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 const SECTIONS = [
   { value: "all", label: "Все", count: 128 },
   { value: "active", label: "В работе", count: 12 },
   { value: "done", label: "Доставлены", count: 96 },
+  { value: "cancelled", label: "Отменены", count: 20 },
 ];
 
 const PERIODS = [
   { value: "7d", label: "7 дней" },
   { value: "30d", label: "30 дней" },
+  { value: "quarter", label: "Квартал" },
 ];
 
 const FIELDS: SmartFilterField[] = [
@@ -31,38 +31,42 @@ const FIELDS: SmartFilterField[] = [
     options: [
       { value: "msk", label: "Москва" },
       { value: "spb", label: "Санкт-Петербург" },
+      { value: "kzn", label: "Казань" },
+    ],
+  },
+  {
+    key: "payment",
+    label: "Оплата",
+    options: [
+      { value: "card", label: "Картой" },
+      { value: "invoice", label: "По счёту" },
     ],
   },
 ];
 
-export default function PageToolbarNarrowExample() {
+export default function PageToolsExample() {
   const [section, setSection] = React.useState("all");
-  const [period, setPeriod] = React.useState("7d");
+  const [period, setPeriod] = React.useState("30d");
   const [filter, setFilter] = React.useState<SmartFilterValue>({
     city: { include: ["msk"], exclude: [] },
   });
   const [search, setSearch] = React.useState("");
 
   return (
-    <div className={styles.phone}>
-      <SmartFilter.Root
-        fields={FIELDS}
-        value={filter}
-        onValueChange={setFilter}
-        search={search}
-        onSearchChange={setSearch}
-      >
-        <PageToolbar.Root aria-label="Заказы">
-          <PageToolbar.Tools>
-            <SmartFilter.Toolbar />
-          </PageToolbar.Tools>
-          <PageToolbar.Sections>
-            <SegmentedControl.Root
-              fullWidth
-              value={section}
-              onValueChange={setSection}
-              aria-label="Раздел"
-            >
+    <SmartFilter.Root
+      fields={FIELDS}
+      value={filter}
+      onValueChange={setFilter}
+      search={search}
+      onSearchChange={setSearch}
+    >
+      <Page.Root>
+        <Page.TopBar sticky={false}>
+          <Page.Heading>
+            <Page.Title>Заказы</Page.Title>
+          </Page.Heading>
+          <Page.Tools aria-label="Заказы">
+            <SegmentedControl.Root value={section} onValueChange={setSection} aria-label="Раздел">
               {SECTIONS.map((item) => (
                 <SegmentedControl.Item key={item.value} value={item.value}>
                   {item.label}
@@ -70,8 +74,7 @@ export default function PageToolbarNarrowExample() {
                 </SegmentedControl.Item>
               ))}
             </SegmentedControl.Root>
-          </PageToolbar.Sections>
-          <PageToolbar.View>
+            <SmartFilter.Toolbar />
             <Select.Root value={period} onValueChange={setPeriod}>
               <Select.Trigger aria-label="Период">
                 <Select.TriggerIcon>
@@ -87,20 +90,20 @@ export default function PageToolbarNarrowExample() {
                 ))}
               </Select.Content>
             </Select.Root>
-          </PageToolbar.View>
-          <PageToolbar.Actions>
+          </Page.Tools>
+          <Page.Actions>
             <Button.Root>
               <Button.Icon>
                 <Icon name="action.add" />
               </Button.Icon>
               Новый заказ
             </Button.Root>
-          </PageToolbar.Actions>
-          <PageToolbar.Chips>
+          </Page.Actions>
+          <Page.Chips>
             <SmartFilter.Chips />
-          </PageToolbar.Chips>
-        </PageToolbar.Root>
-      </SmartFilter.Root>
-    </div>
+          </Page.Chips>
+        </Page.TopBar>
+      </Page.Root>
+    </SmartFilter.Root>
   );
 }