@alevar/tgtrack

Библиотека компонентов и сервисов для TGTrack.

Установка

npm install @alevar/tgtrack

Настройка Tailwind CSS

Добавить путь к компонентам библиотеки в конфигурацию Tailwind (tailwind.config.js):

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ... ваши пути
    "./node_modules/@alevar/tgtrack/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // ... ваши расширения темы
    },
  },
};

Настройка tsconfig

Важнод добавить путь в path:

{
  "compilerOptions": {
    ...

    "paths": {
      "@/*": ["./src/*"],
      "@alevar/tgtrack/*": ["./node_modules/@alevar/tgtrack/*"]
    },

    ...

},
  ...
}

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

Импорт компонентов

import {
  type QuickSearchItem,
  QuickSearchModal,
} from "@alevar/tgtrack/components/modals/fullscreen-modals/quick-search-modal";

// Импорт сервисов
import { apiService } from "@alevar/tgtrack/services";

// Импорт хуков
import { useMediaQuery } from "@alevar/tgtrack/hooks";

// Импорт типов
import type {
  ManyButtonModalProps,
  TwoButtonModalProps,
  OneButtonModalProps,
  MessageModalProps,
  EditModalProps,
  EditModalFormProps,
  EditModalSubmitDataType,
  FormRelatedProps,
  ModalWithCloseButtonProps,
  ModalColor,
  QuickSearchItem,
  QuickSearchModalProps,
  FullscreenModalWithHeaderProps,
  FullscreenModalProps,
} from "@alevar/tgtrack/components";

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

import { apiService } from "@alevar/tgtrack/services";

// Инициализация сервиса
apiService.init({
  baseURL: "https://api.example.com",
  apiRoutes: {
    auth: "/auth",
    users: "/users",
    // другие API маршруты
  },
  appRoutes: {
    home: "/",
    settings: "/settings",
    error: "/error",
    // другие маршруты приложения
  },
});

// Использование сервиса
const response = await apiService.post("users", { name: "John" });

Структура библиотеки

Библиотека разделена на следующие категории:

• components - Все компоненты
  • buttons - Кнопки и связанные компоненты
  • modals - Модальные окна
    • message-modals - Модальные окна с сообщениями
    • fullscreen-modals - Полноэкранные модальные окна
  • sliders - Слайдеры
  • switches - Переключатели
  • layout - Компоненты макета
  • common - Общие компоненты
  • text-with-button - Компоненты с текстом и кнопкой
  • popover - Компоненты всплывающих окон
  • inputs - Компоненты ввода
  • accordions - Аккордеоны
• services - Сервисы
• hooks - React хуки

Лицензия

MIT