fsk-design-system 1.13.0 → 1.13.2

package/README.md

@@ -2,160 +2,123 @@
 
 [![npm version](https://img.shields.io/npm/v/fsk-design-system.svg?style=flat-square&color=blue)](https://www.npmjs.com/package/fsk-design-system)
 
-Универсальная **дизайн-система** с поддержкой тем, типизацией и кастомных UI-компонентов на базе **Ant Design** и **Emotion**
+Дизайн-система ФСК: библиотека React-компонентов на базе **Ant Design 5** и **Emotion** — фирменные стили и типографика, светлая и тёмная темы, русская локаль, полная типизация.
 
----
+📚 [Storybook — живая документация](https://design-system.k8s-test.fsk.ru) · 📝 [Changelog](./CHANGELOG.md) · 🤝 [Contributing](./CONTRIBUTING.md)
 
-## 📦 Требования и установка
-
-### 1. Основной пакет
+## Установка
 
 ```bash
 npm install fsk-design-system
 ```
 
-### 2. Обязательные зависимости
-
-> 💡 Если в вашем проекте они уже установлены — этот шаг можно пропустить.
-
-```json
-"dependencies": {
-  "antd": ">=5.27.4 <6.0.0",
-  "react": ">=18.3.1 <19.0.0",
-  "react-dom": ">=18.3.1 <19.0.0"
-}
-```
-
-#### npm
+Peer-зависимости (если их ещё нет в проекте):
 
 ```bash
-npm install antd@5.27.4 react@18.3.1 react-dom@18.3.1
+npm install antd@^5.27.4 react@^18.3.1 react-dom@^18.3.1
 ```
 
-#### yarn
-
-```bash
-yarn add antd@5.27.4 react@18.3.1 react-dom@18.3.1
-```
-
-#### pnpm
-
-```bash
-pnpm add antd@5.27.4 react@18.3.1 react-dom@18.3.1
-```
-
-## ⚡ Быстрый старт
-
-#### 1️⃣ Импортируйте стили
-
-```ts
-import 'fsk-design-system/styles.css';
-```
+## Быстрый старт
 
-#### 2️⃣ Оберните приложение в `ThemeProvider`
+Подключите стили и оберните приложение в `ThemeProvider`. Для тостов и уведомлений добавьте `MessageProvider` и `NotificationProvider`:
 
 ```tsx
-import 'fsk-design-system/styles.css';
+import "fsk-design-system/styles.css"
 
-import { ThemeProvider } from 'fsk-design-system';
+import { MessageProvider, NotificationProvider, ThemeProvider } from "fsk-design-system"
 
-const App = () => (
+export const App = () => (
   <ThemeProvider>
-    {/* Ваш код */}
+    <NotificationProvider>
+      <MessageProvider>{/* ваше приложение */}</MessageProvider>
+    </NotificationProvider>
   </ThemeProvider>
-);
+)
 ```
 
-#### 3️⃣ Подключите `NotificationProvider`
+Дальше — просто импортируйте компоненты:
 
 ```tsx
-import { ThemeProvider, NotificationProvider, useNotification, Button } from 'fsk-design-system';
+import { Button, Input, useNotification } from "fsk-design-system"
 
-const App = () => (
-  <ThemeProvider>
-    <NotificationProvider>
-      <Component />
-    </NotificationProvider>
-  </ThemeProvider>
-);
-
-const Component = () => {
+const Form = () => {
   const notify = useNotification()
 
   return (
-    <Button onClick={() => notify.success({ message: "Данные успешно обновлены" })}>
-      Сохранить
-    </Button>
+    <>
+      <Input label="Email" placeholder="example@mail.com" />
+      <Button size="l" type="main-primary" onClick={() => notify.success({ message: "Сохранено" })}>
+        Сохранить
+      </Button>
+    </>
   )
-};
+}
 ```
 
-## 🧩 Примеры компонентов
+## Точки входа пакета
 
-📚 Полный список компонентов доступен в [Storybook](https://design-system.k8s-dev.fsk.ru/)
+| Импорт                          | Содержимое                                        |
+| ------------------------------- | ------------------------------------------------- |
+| `fsk-design-system`             | Компоненты, провайдеры, хуки, темы                |
+| `fsk-design-system/components`  | Только компоненты (без импорта глобальных стилей) |
+| `fsk-design-system/icons`       | Иконки (Solar + кастомные)                        |
+| `fsk-design-system/styles.css`  | Глобальные стили, CSS-токены и шрифт Golos Text   |
 
-```tsx
-import { Button, Input } from 'fsk-design-system';
+Сборка ESM с сохранением модулей — импортируется только то, что используете.
 
-<Button size="l" type="main-primary">Click me</Button>
-<Input label="Email" placeholder="example@mail.com" />
-```
+## Темы
 
-## 🌗 Управление темой
+Доступны `light` (по умолчанию) и `dark`. Переключение — через хук `useTheme`:
 
 ```tsx
-import { useTheme } from 'fsk-design-system';
+import { useTheme } from "fsk-design-system"
 
 const ThemeSwitcher = () => {
-  const { changeTheme } = useTheme();
+  const { theme, changeTheme } = useTheme()
 
-  return (
-    <button onClick={() => changeTheme('dark')}>
-      Переключить на тёмную тему
-    </button>
-  );
-};
+  return <button onClick={() => changeTheme(theme === "dark" ? "light" : "dark")}>Сменить тему</button>
+}
 ```
 
-### 🎨 Доступные темы
+Вместе со стилями подключаются CSS-токены — цвета, отступы, типографика, тени и скругления. Используйте их в своих стилях, чтобы автоматически поддерживать обе темы:
 
-| Тема          | Описание       |
-|---------------|----------------|
-| `light`       | Светлая тема (по умолчанию) |
-| `dark`        | Тёмная тема    |
+```css
+.card {
+  padding: var(--gap-xs);
+  font: var(--font-body-medium-m);
+  color: var(--color-text-primary);
+  background: var(--color-surface-primary);
+  border-radius: var(--radius-xs);
+}
+```
 
-## 🪶 Иконки
+Полный справочник токенов — в разделе [«Дизайн-токены»](https://design-system.k8s-test.fsk.ru) Storybook.
 
-Иконки взяты из библиотеки [solar-icons](https://solar-icons.vercel.app/icons)
+## Иконки
 
-Пример:
+Набор повторяет [Solar Icons](https://solar-icons.vercel.app/icons) (~1400 иконок, 6 начертаний) и дополнен кастомными. Галерея с поиском и копированием импорта — в разделе [«Иконки»](https://design-system.k8s-test.fsk.ru) Storybook.
 
 ```tsx
-import { InfoCircle } from 'fsk-design-system/icons';
+import { InfoCircle } from "fsk-design-system/icons"
 
-<Button icon={<InfoCircle weight="Outline" />}>Button</Button>
+const icon = <InfoCircle size={20} weight="Outline" />
 ```
 
-Лучше использовать всегда одну и ту же иконку для разных направлений
-
-Пример:
+Для стрелок и других направленных иконок используйте одну иконку с поворотом — так набор остаётся визуально согласованным:
 
 ```tsx
-// Вместо:
-import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from 'fsk-design-system/icons';
+import { ArrowDown } from "fsk-design-system/icons"
 
-<ArrowDown />
-<ArrowLeft />
-<ArrowUp />
-<ArrowRight />
+const arrowLeft = <ArrowDown style={{ transform: "rotate(90deg)" }} />
+```
 
-// Лучше так:
-import { ArrowDown } from 'fsk-design-system/icons';
+## Разработка
 
-<ArrowDown /> // стрелка вниз
-<ArrowDown style={{ transform: "rotate(90deg)" }}  /> // стрелка влево
-<ArrowDown style={{ transform: "rotate(180deg)" }}  /> // стрелка вверх
-<ArrowDown style={{ transform: "rotate(-90deg)" }}  /> // стрелка вправо
+```bash
+npm run dev        # Storybook на localhost:6006
+npm run test       # vitest в watch-режиме
+npm run lint       # eslint + tsc
+npm run build      # сборка библиотеки
 ```
 
----
+Коммиты — по [Conventional Commits](https://www.conventionalcommits.org/ru/): от них зависят версионирование и генерация ченжлога. Правила оформления кода и документации — в [CONTRIBUTING.md](./CONTRIBUTING.md).

package/dist/_virtual/index3.js

@@ -1,2 +1,5 @@
 import { __require as r } from "../node_modules/rc-util/node_modules/react-is/index.js";
-r();
+var a = r();
+export {
+  a as r
+};

package/dist/components/ActionMenu/ActionMenu.types.d.ts

@@ -1,10 +1,15 @@
 import { BadgeProps } from '../Badge';
 import { ButtonProps } from '../Button';
 export type ActionMenuProps = {
+    /** Заголовок меню действий */
     title: string;
+    /** Значение счётчика, отображаемого рядом с заголовком */
     count?: BadgeProps["count"];
+    /** Список кнопок действий, отображаемых в меню */
     actions: Action[];
+    /** Признак видимости меню */
     visible: boolean;
+    /** Вызывается после завершения анимации закрытия меню */
     onClose?: () => void;
 };
 export type Action = ButtonProps;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,7 +1,7 @@
 import { jsx as r } from "@emotion/react/jsx-runtime";
-import { StyledBreadcrumb as o } from "./Breadcrumb.styles.js";
-import { AltArrowRight as e } from "@solar-icons/react";
-const a = (t) => /* @__PURE__ */ r(o, { separator: /* @__PURE__ */ r(e, { weight: "Outline" }), ...t });
+import { AltArrowRight as o } from "@solar-icons/react";
+import { StyledBreadcrumb as e } from "./Breadcrumb.styles.js";
+const a = (t) => /* @__PURE__ */ r(e, { separator: /* @__PURE__ */ r(o, { weight: "Outline" }), ...t });
 export {
   a as Breadcrumb
 };

package/dist/components/Button/Button.types.d.ts

@@ -1,6 +1,8 @@
 import { Button, ButtonProps as AntButtonProps } from 'antd';
 export type ButtonProps = Omit<AntButtonProps, "size" | "type" | "shape"> & {
+    /** Размер кнопки @default "m" */
     size?: "xs" | "s" | "m" | "l";
+    /** Визуальный стиль кнопки @default "main-primary" */
     type?: "main-primary" | "main-outline" | "link-primary" | "link-secondary" | "extra-primary" | "extra-outline" | "primary-gradient";
 };
 export type ButtonRef = React.ComponentRef<typeof Button>;

package/dist/components/Card/Card.types.d.ts

@@ -1,11 +1,19 @@
 import { TagProps } from '../Tag';
 export type CardProps = {
+    /** Изображение или контент обложки карточки */
     cover?: React.ReactNode;
+    /** Список тегов, отображаемых над заголовком */
     tags?: TagProps[];
+    /** Дата, отображаемая над заголовком */
     date?: string;
+    /** Заголовок карточки */
     title?: React.ReactNode;
+    /** Основной текст карточки */
     text?: React.ReactNode;
+    /** Содержимое подвала карточки */
     footer?: React.ReactNode;
+    /** Размер карточки @default "m" */
     size?: "m" | "l";
+    /** Дополнительный класс корневого элемента */
     className?: string;
 };

package/dist/components/Card/LinkCard/LinkCard.types.d.ts

@@ -1,11 +1,19 @@
 import { TagProps } from '../../Tag';
 export type LinkCardProps = {
+    /** Заголовок карточки */
     title?: React.ReactNode;
+    /** Значение счётчика, отображается бейджем рядом с заголовком */
     count?: string | number;
+    /** Список тегов, отображаемых под заголовком */
     tags?: TagProps[];
+    /** Основной текст карточки */
     text?: React.ReactNode;
+    /** Дополнительный контент под текстом */
     extraContent?: React.ReactNode;
+    /** Ссылка внизу карточки; строка рендерится как ссылка-адрес, иначе выводится как есть */
     link?: React.ReactNode;
+    /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Обработчик клика по карточке */
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 };

package/dist/components/Cascader/Cascader.types.d.ts

@@ -1,5 +1,6 @@
 import { CascaderProps as AntCascaderProps, DefaultOptionType } from 'antd/es/cascader';
 import { ControlWrapperProps } from '../ControlWrapper';
 export type CascaderProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean = boolean> = React.PropsWithChildren<Omit<AntCascaderProps<OptionType, ValueField, Multiple>, "status" | "children" | "size"> & ControlWrapperProps & {
+    /** Статус валидации поля */
     status?: "success" | "error";
 }>;

package/dist/components/Checkbox/Checkbox.types.d.ts

@@ -1,9 +1,14 @@
 import { CheckboxProps as AntCheckboxProps } from 'antd';
 import { default as React } from 'react';
 export type CheckboxProps = React.PropsWithChildren<AntCheckboxProps> & {
+    /** Размер чекбокса @default "m" */
     size?: "s" | "m";
+    /** Дополнительный контент, отображаемый рядом с чекбоксом */
     extraContent?: React.ReactNode;
+    /** Подпись под чекбоксом */
     caption?: React.ReactNode;
+    /** Статус валидации, влияющий на оформление */
     status?: "success" | "error";
+    /** Текст ошибки, показывается вместо подписи */
     error?: string;
 };

package/dist/components/Comment/Comment.types.d.ts

@@ -1,15 +1,24 @@
 import { AvatarProps } from 'antd';
 type Comment = {
+    /** Пропсы аватара автора комментария */
     avatar?: AvatarProps;
+    /** Имя автора комментария */
     name?: React.ReactNode;
+    /** Дата комментария, отображается в относительном формате (например, "3 часа назад") */
     date?: string;
+    /** Текст комментария */
     text?: string;
+    /** Уровень вложенности комментария (0 — корневой) @default 0 */
     depthLevel?: number;
+    /** Разрешает ли комментарий ответы (показывает кнопку "Ответить") @default true */
     canBeReplied?: boolean;
+    /** Вызывается при клике на кнопку "Ответить" */
     onReply?: () => void;
+    /** Дополнительный контент, отображаемый справа от комментария */
     extraContent?: React.ReactNode;
 };
 export type CommentProps = Comment & {
+    /** Список ответов на комментарий @default [] */
     replys?: Comment[];
 };
 export {};

package/dist/components/Comment/Form/Form.types.d.ts

@@ -1,7 +1,11 @@
 import { AvatarProps, FormProps } from 'antd';
 export type CommentFormProps = {
+    /** Пропсы аватара автора комментария */
     avatar?: AvatarProps;
+    /** Пропсы вложенной формы antd */
     form?: FormProps;
+    /** Текст кнопки отправки комментария @default "Отправить" */
     buttonText?: string;
+    /** Дополнительный класс корневого элемента формы */
     className?: string;
 };

package/dist/components/ControlWrapper/ControlWrapper.types.d.ts

@@ -1,11 +1,19 @@
 import { FormItemProps } from 'antd';
 export type ControlWrapperProps = React.PropsWithChildren<{
+    /** Отмечает поле как обязательное, добавляя звёздочку рядом с label */
     isRequired?: boolean;
+    /** Текст ошибки, отображается вместо caption и подсвечивается красным */
     error?: string;
+    /** Подпись (заголовок) над или рядом с контролом */
     label?: React.ReactNode;
+    /** Подсказка под контролом, скрывается при наличии error */
     caption?: React.ReactNode;
+    /** Расположение label относительно контрола @default "vertical" */
     view?: "vertical" | "horizontal";
+    /** Размер обёртки: влияет на шрифты label/caption и отступы @default "m" */
     size?: "s" | "m" | "l";
+    /** Статус поля формы, определяет цвет caption (success/error) */
     formControlStatus?: FormItemProps["status"];
+    /** CSS-класс обёртки */
     className?: string;
 }>;