Установка

Создайте файл .npmrc в корне проекта который должен использовать библиотеку. Добавте в него ключ со значением которое вам укажет администратор:

@rir:registry=[здесь правильный ключ]

Установите пакет:

npm install @rir/ds-library

После этого скопируйте папку node_modules/@rir/ds-library/dist/fonts в папку из которой обслуживаются статичные ресурсы в вашем проекте. Для проектов с Vite, например, по умолчанию, это папка public.

Инициализация

import DS from '@rir/ds-library';

new DS({ isWC: true, isNormalize: true });

При инициализации ДС, вы можете передать необходимые настройки экземпляра. Например, если вы используете библиотеку для оформления нового проекта, удобно будет установить опцию isNormalize в true, для того чтобы нормализавать глобальные стили в браузере. Если же вы подключаете ДС для рефакторинга большого обьема "старого" кода, очевидно, что делать этого не следует.

// Настройки Дизайн-Системы
type TSettings = {
  isWC?: boolean; // Инициализировать ли нативные элементы?
  isNormalize?: boolean; // Нормализовать CSS?
};

TS

Если вы используете Typescript, вам нужно добавить в файл объявлений интерфейсов *.d.ts:

declare module "@rir/ds-library";

Если вы хотите использовать "нативный синтаксис" ('' а не '')при разметке с React, вам необхомо еще установить и добавить в такой файл:

npm i -D react/jsx-runtime

declare module 'react/jsx-runtime' {
  namespace JSX {
    interface IntrinsicElements {
      div: JSX.IntrinsicElements<>;
      nav: JSX.IntrinsicElements<>;
      // Все стандартные теги которые используются на ваших шаблонах ...
      // ...
      'ds-text': JSX.IntrinsicElements<CustomElement>;
      'ds-icon': JSX.IntrinsicElements<CustomElement>;
      // Все пользовательские элементы которые используются на ваших шаблонах ...
      // ...
    }
  }
}

Pure

Если вы хотите использовать нативные Веб-компоненты библиотеки (например, в проектах на Pure JS, Vue3 или Angular) - передайте настройку isWC при ее инициализации.

Далее необходимо импортировать и инициализировать Дизайн-Систему в точке входа вашего приложения:

React

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import DS from '@rir/ds-library';
import App from './App.tsx';

new DS();

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

WARNING

Внимание! Если вы используете Angular или Vue, выполните:

npm install -D react

Angular

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

// @ts-ignore
import DS from '@rir/ds-library';

new DS({ isWC: true });

bootstrapApplication(AppComponent, appConfig).catch((err) =>
  console.error(err),
);

Указывайте CUSTOM_ELEMENTS_SCHEMA при использовании компонент ДС в связанном шаблоне:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  ...
  templateUrl: './app.component.html',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SomeComponent {}

Vue3

import DS from '@rir/ds-library';

new DS({ isWC: true });

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Для того чтобы работал атрибут slot необходимо добавить следующее правило в настройки eslint (пример для Vue3 c Vite и TS):

import { defineConfigWithVueTs } from '@vue/eslint-config-typescript';

export default defineConfigWithVueTs({
  rules: {
    'vue/no-deprecated-slot-attribute': [
      'error',
      {
        // TODO - здесь должны быть перечислены все элементы ДC, которые могут быть в слотах!!!
        ignore: ['ds-icon', 'ds-text', 'ds-spinner', 'ds-grid'],
      },
    ],
  },
});

Примеры проектов

React

Angular

Vue