@relabs_test/relabs-test-uikit v0.0.11

ReLabs React UI KIT (test)

Ui Kit построен на базе Ant Design

🙌 Как использовать

import React from 'react';
import { Provider, Button, DatePicker } from '@relabs_test/relabs-test-uikit';

const App = () => (
  <Provider>
    <Button type='primary'>PRESS ME</Button>
    <DatePicker placeholder='select date' />
  </Provider>
);

export default App;

Изначально есть компонент <Provider /> Он нужен для смены темы и оборачивает все остальные компоненты

Есть хук useToggleTheme() для смены темы

import { useToggleTheme } from 'src/lib/theme/utils/ThemeContext';

const App = () => {
  const toggleTheme = useToggleTheme();

  return (
    <Provider>
      <button onClick={toggleTheme}> Change Theme</button>

      {/* остальной код */}
    </Provider>
  );
};

// и все остальные компоненты

В папке theme/constants лежат переменные цветов(по крайней мере то, что я туда положил 🤣)

🔨 Разработка

1. Клонируете репозиторий
2. Устанавливаете зависимости
3. Разрабатываете 😁

⚙️ Как собирать

Основная точка входа для пакета - src/components/index.ts. Из этого файла импортируется то, что будет в итоговом npm пакете, точнее что можно будет использовать. Если вы написали компонент и не экспортировали его, он будет недоступен. Тоже самое касается хуков и функций.

// `src/components/index.ts`

export * from './provider/Provider';
export * from './slider/Slider';
export * from './table/table';

// и все остальные компоненты

Порядок действий для публикации npm-package

1. Обновите версию в package.json (можно увеличить последнюю цифру: было 0.0.1, стало 0.0.2)

{
  "name": "@relabs_test/test-ui-kit",
  "version": "0.0.1",
  "type": "module",
  "license": "MIT",
  "publishConfig": {
    "access": "public"
  }
}

2. Вызовите команду yarn build или npm run build
3. Вызовите команту npm login

4. В терминале в ide будет предложено ввести Username, Password и Email

   терминал Username: relabs_test

   Password: relabs123456789

   Email: test.relabs.library@gmail.com

5. На указанную почту придет одноразовый пароль, который вас попросят ввести в терминал

6. Заходим на почту test.relabs.library@gmail.com (password: relabs123456789)
7. Вводим одноразовый пароль
8. Запускаем команду npm publish
9. Хваставемся друзьям! 😁

TypeScript

ReLabs React UI KIT написан на typescript и расширяет стандартные типы компонентов antd.