Miniapp UI Kit

UI Kit компоненты для мини-приложений с поддержкой кастомизации тем.

Установка

npm install miniapp-ui-kit

Использование

Импорт стилей

Для использования компонентов библиотеки необходимо импортировать стили. Доступны следующие способы:

Рекомендуемый способ:

import "miniapp-ui-kit/styles";

Альтернативные способы:

import "miniapp-ui-kit/style.css"; // эквивалентно предыдущему
import "miniapp-ui-kit/dist/style.css"; // прямой путь (тоже работает)

Базовое использование

import { Button } from "miniapp-ui-kit";
import "miniapp-ui-kit/styles"; // или "miniapp-ui-kit/style.css"

function App() {
  return (
    <div>
      <Button variant="primary">Primary Button</Button>
      <Button variant="secondary">Secondary Button</Button>
      <Button variant="outline">Outline Button</Button>
    </div>
  );
}

Кастомизация темы

Библиотека использует CSS переменные для темизации, что позволяет легко переопределять цвета для разных проектов.

Переопределение цветов в проекте

Проект A (например, синяя тема)

Создайте файл theme.css в вашем проекте:

/* project-a/src/theme.css */
:root {
  --miniapp-color-primary: #2563eb;
  --miniapp-color-primary-hover: #1d4ed8;
  --miniapp-color-primary-text: #ffffff;

  --miniapp-color-secondary: #64748b;
  --miniapp-color-secondary-hover: #475569;
  --miniapp-color-secondary-text: #ffffff;

  --miniapp-color-outline-border: #2563eb;
  --miniapp-color-outline-text: #2563eb;
  --miniapp-color-outline-hover-bg: #2563eb;
  --miniapp-color-outline-hover-text: #ffffff;
}

Затем импортируйте его в вашем приложении после импорта стилей библиотеки:

import { Button } from "miniapp-ui-kit";
import "miniapp-ui-kit/styles"; // или "miniapp-ui-kit/style.css"
import "./theme.css"; // Ваша кастомная тема

function App() {
  return <Button variant="primary">Button</Button>;
}

Проект B (например, зеленая тема)

/* project-b/src/theme.css */
:root {
  --miniapp-color-primary: #10b981;
  --miniapp-color-primary-hover: #059669;
  --miniapp-color-primary-text: #ffffff;

  --miniapp-color-secondary: #6b7280;
  --miniapp-color-secondary-hover: #4b5563;
  --miniapp-color-secondary-text: #ffffff;

  --miniapp-color-outline-border: #10b981;
  --miniapp-color-outline-text: #10b981;
  --miniapp-color-outline-hover-bg: #10b981;
  --miniapp-color-outline-hover-text: #ffffff;
}

Доступные CSS переменные

Все переменные имеют префикс --miniapp-:

Primary Colors

• --miniapp-color-primary - основной цвет кнопки
• --miniapp-color-primary-hover - цвет при наведении
• --miniapp-color-primary-text - цвет текста

Secondary Colors

• --miniapp-color-secondary - вторичный цвет
• --miniapp-color-secondary-hover - вторичный цвет при наведении
• --miniapp-color-secondary-text - цвет текста

Outline Colors

• --miniapp-color-outline-border - цвет границы
• --miniapp-color-outline-text - цвет текста
• --miniapp-color-outline-hover-bg - фон при наведении
• --miniapp-color-outline-hover-text - цвет текста при наведении

Common

• --miniapp-color-disabled-opacity - прозрачность для disabled состояния (по умолчанию: 0.6)
• --miniapp-border-radius - радиус скругления (по умолчанию: 8px)
• --miniapp-transition - переходы (по умолчанию: all 0.2s ease)

Пример с React

// App.tsx
import { Button } from "miniapp-ui-kit";
import "miniapp-ui-kit/styles"; // или "miniapp-ui-kit/style.css"
import "./theme.css";

function App() {
  return (
    <div>
      <Button variant="primary" size="large">
        Большая кнопка
      </Button>
      <Button variant="secondary" size="medium">
        Средняя кнопка
      </Button>
      <Button variant="outline" size="small">
        Маленькая кнопка
      </Button>
    </div>
  );
}

Компоненты

Button

import { Button } from "miniapp-ui-kit";

<Button variant="primary" size="medium">
  Click me
</Button>;

Props:

• variant: "primary" | "secondary" | "outline" (по умолчанию: "primary")
• size: "small" | "medium" | "large" (по умолчанию: "medium")
• Все стандартные props для <button>

Разработка

npm install
npm run build
npm run type-check

Лицензия

MIT