PROJECT "WANT HALAL" | UI-Kit | React components library

Установка и запуск приложения

$ npm install

# lint
$ npm run lint

# doc
$ npm run storybook

# build lib
$ npm run build

# build doc
$ npm run storybook:build

# local lib sharing
$ npm link

Структура проекта и особенности работы со стилями

1. Особенности работы со стилями

Типы стилей

• [GLOBAL] — Глобальные стили. Необходимо импортировать в корневой CSS файл через styles.scss.

@import "ui-kit-xhalal/dist/assets/styles.css"

• [LOCAL] — Локальные стили. Импортируются напрямую в файл со стилями.

@use 'ui-kit-xhalal/dist/assets/[filename].scss' as *;

• [ENCAPSULATED] — Служебные стили. Не подлежат импорту из библиотеки.

Структура файлов стилей

| Файл | Назначение | Тип | | ----------------------- | ------------------------------------------------ | ------------------ | | styles/ui.scss | Переменные для паддингов, гэпов и марджинов. | [GLOBAL] | | styles/colors.scss | Переменные цветов. | [GLOBAL] | | styles/input.scss | Переменные цветов и стили для инпутов. | [GLOBAL] | | styles/font.scss | Шрифты, оформленные в классах. | [GLOBAL] | | styles/config.scss | Переменные порядка наложения, единицы измерения. | [GLOBAL] | | styles/mixins.scss | Вспомогательные миксины. | [LOCAL] | | styles/variables.scss | Брэйкпоинты. | [LOCAL] | | styles/field.scss | Вспомогательные стили для инпутов. | [ENCAPSULATED] | | styles/functions.scss | Вспомогательные функции для переменных. | [ENCAPSULATED] | | styles/storybook.scss | Глобальные стили для сторибука. | [ENCAPSULATED] | | styles/stories.scss | Вспомогательные стили для сторей. | [ENCAPSULATED] |

2. Использование компонентов

• [Some]Input

Для подключения инпута и дальнейшего его использования на любом уровне вложенности вместе с react-hook-form необходимо в src/ui создать компонент-обертку ConnectForm.

interface ConnectFormProps<T extends FieldValues> {
  children: (methods: UseFormReturn<T>) => React.ReactNode;
}

export const ConnectForm = <T extends FieldValues>({
  children,
}: ConnectFormProps<T>) => {
  const methods = useFormContext<T>();

  return <>{children(methods)}</>;
};

Далее, в одноименном файле-обертке, обернуть нужный инпут в ConnectForm и через renderProps передать methods. Пример реализации продемонстирован ниже.

import { TextInput as RawTextInput } from 'ui-kit-xhalal';

export const TextInput = (
  props: Omit<ComponentProps<typeof RawTextInput>, 'methods'>,
) => (
  <ConnectForm>
    {methods => <RawTextInput methods={methods} {...props} />}
  </ConnectForm>
);

• Portal

Для Next.js необходима обертка, отключающая пререндеринг на сервере. Используется нативная функция lazy из Next.js.

• Modal

Создайте обертки StatefulModal или SearchParamsModal, которые взаимодействуют с функционалом вашего фреймворка.

• Link

Реализуйте компонент на основе PureLink. В качестве пропса "as" передавайте нативный Link проекта.

• Result

Для кнопки перенаправления на главную:

1. Создайте обертку.
2. Передайте кастомный Link (описанный выше) в параметр redirectOnHomePageLink.

• Animation (BETA)

Способствует упрощенному созданию анимации.

Принимает FramerMotion Variants объект, где свойства-состояния соответствуют определенным motion свойствам. Пример ниже, motion свойства в комментариях:

const variants: Variants = {
  hidden: {}, //initial
  visible: {}, //animate
  exit: {}, //exit
};

3. Зависимости проекта

Для интеграции UI-kit в ваш проект необходимо иметь следующие зависимости:

{
  "@hookform/error-message": "^2.0.1",
  "framer-motion": "11.0.3",
  "react": "^18.2.0",
  "react-datepicker": "^8.2.1",
  "react-dom": "^18.2.0",
  "react-hook-form": "^7.49.3"
}

Помимо вышеперечисленных UI-Kit использует следующие зависимости для работы компонентов

{
  "clsx": "^2.1.0",
  "framer-motion": "11.0.3",
  "react-datepicker": "^8.2.1",
  "react-tooltip": "^5.28.0",
  "react-imask": "7.3.0",
  "react-select": "5.8.0",
  "react-select-async-paginate": "0.7.5"
}