Components library

Разработка:

1. Установка зависимостей:

npm i

или

yarn install

2. Запуск StoryBook:

npm run storybook

3. Публикация в npm:

npm pub

Storybook

• Чтобы использовать storybook, просто запустите yarn storybook и наслаждайтесь:)

Как разрабатывать локально с yalc

• Во-первых, нужно установить глобально yalc : npm i -g yalc
• В директории библиотеки выполнить: yalc publish --no-sig чтобы сделать publish локально (вы можете найти результат в $HOME/.yalc/packages folder) => на выходе получается что-то вроде @invitro_it/[email protected] published in store. (где X.X.X это актуальная версия библиотеки)
• Теперь нужно перейти в директорию проекта, в котором необходимо использовать библиотеку и связать их между собой командой yalc link @invitro_it/[email protected] и запустить проект: yarn dev / yarn start / npm run start
• Для автоматической пересборки изменений в библиотеке и отправки их в локальный репозиторий проекта для того, чтобы он подхватил изменения нужно выполнить yarn local-watch.

Ссылка на документацию yalc: https://github.com/wclr/yalc  

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

Установка:

npm install @invitro_it/invitro-ui-kit

или

yarn add @invitro_it/invitro-ui-kit

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

import React, { FormEvent, memo, useState } from "react";
import { Button, Input } from "@invitro_it/invitro-ui-kit";

export const Example = memo((): JSX.Element => {
	const [inputValue, setInputValue] = useState("");

	const onButtonClick = () => alert(inputValue);
	const onInputChange = (e: FormEvent<HTMLInputElement>) => setInputValue(e.currentTarget.value);
	return (
		<>
			<Input value={inputValue} onInput={onInputChange} placeholder="введите значение" />
			<Button type="primary" onClick={onButtonClick}>
				Найти
			</Button>
		</>
	);
});

Результат: