Shipyard Commons

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

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

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

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

npm i @shipyard-dev/shipyard-commons

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

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

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

const App = function () {};

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

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

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

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

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

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