npm package: @shipyard-dev/shipyard-commons
Description: Common Shipyard components for all services
Latest version: 1.0.1

# Shipyard Commons

### Зачем нужна библиотека Shipyard Commons, когда есть UI Commons?

Идейно UI Commons - максимально стабильные и гранулярные компоненты, которые описаны во вкладке
Design KIT в Figma (+ иконки). Содержимое этой библиотеки по уровню иерархии чуть выше и предполагается,
что здесь будут более крупные компоненты по типу карточки пользователя, контейнера, возможно, целой страницы,
если подразумевается, что она идентична для нескольких проектов.
Также важное замечание - данный компонент также использует библиотеку ui-commons.

### Инструкция по установке

Для начала необходимо установить данный пакет в ваш проект при помощи npm:

```bash
npm i @shipyard-dev/shipyard-commons
```

Если возникли проблемы с установкой, проверьте npm config get registry.
Важно, чтобы npm registry был установлен как [https://registry.npmjs.org](https://registry.npmjs.org).

В случае, если не используется дизайн система (ui-commons), рекомендуется сделать импорт глобальных стилей в вашем проекте.

```ts
import "@shipyard-dev/shipyard-commons/src/styles/global.css";

const App = function () {};
```

Теперь можно использовать библиотеку в вашем коде.

### Инструкция по использованию

Важно понимать, что код, находящийся в директории packages, является собираемым npm пакетом и
он ни в коем случае не должен использоваться в других модулях при помощи импортов вида:

```ts
import xxx from "../../../packages/shipyard-commons/xxx";
```

Компоненты, которые доступы для использования, экспортируются из корня модуля и могут быть использованы
только при помощи следующей конструкции из пользовательского приложения:

```ts
import { useWindowSize } from "@shipyard-dev/shipyard-commons";
```

### Инструкция по дополнению и редактированию общей библиотеки компонентов

Прежде всего необходимо получить доступ к пакету в npm registry. Для этого можно:

- написать мне в телеграмм (@uvuv643), и я руками добавлю вас в контрибуторы пакета
- создать свой npm пакет и заменить все конструкции @shipyard-dev/shipyard-commons на свой пакет (можно сделать глобальным поиском по проекту), и немного поправить package.json этого модуля

Технически, к сожалению, нет возможности реализовать какую-либо возможность добавления пользователей в контрибуторы
автоматически, поэтому если что-то нужно будет заменить, придется немного помучаться, но только один раз.

После того, как получили доступ можем добавлять / редактировать компоненты внутри библиотеки.
Важные пункты для того, чтобы все работало корректно:

- не забываем создавать index.ts, содержащий export, в директории компонента / хук
- не забываем добавлять в src/components/index.ts и src/hooks/index.ts новосозданный компонент / хук
- не используем импорты вида 'src/components/...' внутри самих компонентов, а используем '../../components/...' - связанно это с тем, как резолвятся зависимости при импорте библиотеки извне и при локальном запуске
- очень хороший тон - указывать в типе props всё, что функционально значимо в компоненте, чтобы из вызывающего компонента можно было подглядеть, что возможно поменять в компоненте и для чего он предназначен

После изменений в коде:

1. меняем версию в packages/shipyard-commons/package.json
2. npm run publish:lib из packages/shipyard-commons
3. npm i @shipyard-dev/shipyard-commons из services/xxx