UI Kit Foundation (Ant Design 5.11.0)

Базовая заготовка для кастомизированного UI-кита на основе Ant Design.
Все компоненты автоматически оборачиваются в ConfigProvider с дефолтной темой.

npm install ui-kit-custom-antd-v2

🏗️ Архитектура

1. Реэкспорт + Theme Injection Каждый компонент Ant Design реэкспортируется с применением темы:

// Реализация в вашей библиотеке:
import React from "react";
import { Button } from 'antd';
export default withTheme(Button); // Автоматическая обертка в ConfigProvider

2. Система тем defaultTheme — базовая тема (изначально пустая, только для модификации)

Все изменения только через правку defaultTheme

🎨 Кастомизация (для разработчиков UIKIT)

Шаг 1. Изменение defaultTheme

Отредактируйте базовые токены в теме:

// src/theme/defaultTheme.ts
import { ThemeConfig } from 'antd';

export const defaultTheme: ThemeConfig = {
  token: {
    colorPrimary: '#FF5722',      // Основной цвет
    borderRadius: 4,             // Глобальный радиус
    fontFamily: 'Inter, sans-serif', // Шрифт
  },
  components: {
    Button: {
      colorPrimary: '#4CAF50',   // Компонентный переопределение
    }
  }
};

Шаг 2. Глубокая стилизация Если токенов Ant Design недостаточно, используйте styled-components:

Вариант 1: Стилизация через styled()

// Пример для кастомного Button
import React from "react";
import { Button as AntdButton } from 'antd';
import styled from 'styled-components';

export const Button = styled(AntdButton)`
  && {
    font-weight: 600;
    transition: transform 0.2s;
    
    &:hover {
      transform: translateY(-2px);
    }
    
    &.ant-btn-primary {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
  }
`;

Вариант 2: Глобальные стили (если необходимо)

// styles/antd-overrides.scss
:where(.ant-btn) {
  &-custom {
    border: 2px dashed currentColor;
  }
}

📦 Доступные компоненты

Полный список компонентов Ant Design 5.11.0:

Формы: Button, Input, Select, Checkbox, Radio, Switch

Навигация: Menu, Dropdown, Steps

Данные: Table, Tag, Tooltip, Modal

и другие (см. документацию Ant Design)

⚠️ Важные ограничения

Для совместимости обязательно к каждому компоненту и истории добавлять

import React from "react";

Не создавайте новые темы — только модификация defaultTheme

Для сложных случаев — оборачивайте компоненты в styled()

▶️ Пример использования

import { Button, Input } from 'ui-kit-custom-antd-v2';

function App() {
  return (
    <>
      <Button type="primary">Кнопка с темой</Button>
      <Input placeholder="Кастомизированный инпут" />
    </>
  );
}

🤝 Разработка

Установите зависимости:

npm install

Запустите Storybook:

npm run storybook