livedune-design-sys-2 v0.0.65

livedune-design-sys-2

В данном проекте хранятся общие константы, утилиты и только ui компоненты, без логики, без запросов куда-либо.

Подключение дизайн системы

Для подключения дизайн системы нужно:

1. В файле package.json вашего проекта добавить:

"dependencies": {
    "@livedune/livedune-design-sys-2": "0.0.57",
    ...
}

2. В файл webpack.config вашего проекта исправить:

Для jsxRule, cssRule и sassRule меняем

exclude: '/node_modules/' на

exclude: {
    and: [/node_modules/],
    not: [/@livedune/]
}

Это нужно чтоб дизайн система запускалась через webpack вашего проекта

Добавляем настройки для sassRule

У css-loader после строчки

localIdentName: "[name]__[local]___[hash:base64:5]"

добавляем localIdentHashSalt: 'livedune-topmenu' - указываем название проекта

чтобы в каждом проекте были уникальные хэши для стилей и не было конфликтов стилей.

3. Чтобы импортировать компоненты из дизайн системы по короткому пути, добавляем алиасы:

resolve: {
  alias: {
      ...
      'livedune-design-sys-2': path.resolve(
         __dirname,
         'node_modules/@livedune/livedune-design-sys-2'
      )
  }
}

4. В корень проекта положить файл .npmrc.

Если он уже есть, то добавить туда срочку //registry.npmjs.org/:_authToken=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

5. Чтобы использовать стили типографики из дизайн системы в проекте, в файле webpack.config добавляем алиасы:

resolve: {
  alias: {
      ...
      '@styles': path.resolve(
         __dirname,
         'node_modules/@livedune/livedune-design-sys-2/src/styles/'
      )
  }
}

Далее в вашем файле стилей подключаем миксины для типографики

@use '@styles/typography.scss';

.root {
    @include typography.text-sm;
    @include typography.semibold;
}

После выполняем npm i и радуемся, но не долго. Пока не надо будет изменить что-то в дизайн системе.

Как вносить изменения в дизайн систему

По умолчанию дизайн система тянется из npm. Все изменения которые вы вносите не будут подхватываться. Чтоб изменения заработали, требуется подключить дизайн систему через npm link

В дизайн системе в терминал пишем npm link В вашем проекте в терминале пишем npm link @livedune/livedune-design-sys-2 После этого вся дизайн система залетит в node_modules Останавилваем и запускаем заново проект npm run start и все что вы поменяете будет отображаться