💠 FSK Design System

Универсальная дизайн-система с поддержкой тем, типизацией и кастомных UI-компонентов на базе Ant Design и Emotion

📦 Требования и установка

1. Основной пакет

npm install fsk-design-system

2. Обязательные зависимости

💡 Если в вашем проекте они уже установлены — этот шаг можно пропустить.

"dependencies": {
  "antd": ">=5.27.4 <6.0.0",
  "react": ">=18.3.1 <19.0.0",
  "react-dom": ">=18.3.1 <19.0.0"
}

npm

npm install [email protected] [email protected] [email protected]

yarn

yarn add [email protected] [email protected] [email protected]

pnpm

pnpm add [email protected] [email protected] [email protected]

⚡ Быстрый старт

1️⃣ Импортируйте стили

import 'fsk-design-system/styles.css';

2️⃣ Оберните приложение в ThemeProvider

import 'fsk-design-system/styles.css';

import { ThemeProvider } from 'fsk-design-system';

const App = () => (
  <ThemeProvider>
    {/* Ваш код */}
  </ThemeProvider>
);

3️⃣ Подключите NotificationProvider

import { ThemeProvider, NotificationProvider, useNotification, Button } from 'fsk-design-system';

const App = () => (
  <ThemeProvider>
    <NotificationProvider>
      <Component />
    </NotificationProvider>
  </ThemeProvider>
);

const Component = () => {
  const notify = useNotification()

  return (
    <Button onClick={() => notify.success({ message: "Данные успешно обновлены" })}>
      Сохранить
    </Button>
  )
};

🧩 Примеры компонентов

📚 Полный список компонентов доступен в Storybook

import { Button, Input } from 'fsk-design-system';

<Button size="l" type="main-primary">Click me</Button>
<Input label="Email" placeholder="[email protected]" />

🌗 Управление темой

import { useTheme } from 'fsk-design-system';

const ThemeSwitcher = () => {
  const { changeTheme } = useTheme();

  return (
    <button onClick={() => changeTheme('dark')}>
      Переключить на тёмную тему
    </button>
  );
};

🎨 Доступные темы

| Тема | Описание | |---------------|----------------| | light | Светлая тема (по умолчанию) | | dark | Тёмная тема |

🪶 Иконки

Иконки взяты из библиотеки solar-icons

Пример:

import { InfoCircle } from 'fsk-design-system/icons';

<Button icon={<InfoCircle weight="Outline" />}>Button</Button>

Лучше использовать всегда одну и ту же иконку для разных направлений

Пример:

// Вместо:
import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from 'fsk-design-system/icons';

<ArrowDown />
<ArrowLeft />
<ArrowUp />
<ArrowRight />

// Лучше так:
import { ArrowDown } from 'fsk-design-system/icons';

<ArrowDown /> // стрелка вниз
<ArrowDown style={{ transform: "rotate(90deg)" }}  /> // стрелка влево
<ArrowDown style={{ transform: "rotate(180deg)" }}  /> // стрелка вверх
<ArrowDown style={{ transform: "rotate(-90deg)" }}  /> // стрелка вправо