NNTC UI Kit

React компонентная библиотека для создания пользовательских интерфейсов.

Установка

npm install nntc-ui

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

1. Подключите в приложении только стили компонентных CSS-модулей (один файл):

import 'nntc-ui/index.css';

2. Оберните дерево в ThemeProvider — в рантайме подставятся global.css (токены, сбросы) и палитра активной темы (dark / light / darkBlue); отдельно импортировать styles/themes/*.css не нужно.

   Для MFE в Shadow DOM передайте styleContainer={shadowRoot} — стили попадут в теневое дерево (рядом с index.css), а :root заменится на :host:

<ThemeProvider styleContainer={shadowRoot}>{children}</ThemeProvider>

Поповеры (Select, MultiSelect, DateTime и др.), тултипы и модалки по умолчанию рендерятся в document.body, то есть вне теневого дерева, и остаются без стилей. Передайте portalContainer — элемент внутри теневого дерева; он используется, когда компоненту явно не передан root:

<ThemeProvider styleContainer={shadowRoot} portalContainer={shadowRootElement}>
  {children}
</ThemeProvider>

import 'nntc-ui/index.css';
import { ThemeProvider, Button } from 'nntc-ui';
import { InfoIcon } from 'nntc-ui';

function App() {
  return (
    <ThemeProvider>
      <Button variant="primary" icon={<InfoIcon />} onClick={() => console.log('clicked')}>
        Нажми меня
      </Button>
    </ThemeProvider>
  );
}

Переключение темы через хук:

import { useThemeWithFallback } from 'nntc-ui';

function ThemeToggleButton() {
  const { theme, toggleTheme } = useThemeWithFallback();
  return (
    <button type="button" onClick={toggleTheme}>
      {theme === 'light' ? 'Dark' : 'Light'}
    </button>
  );
}

Разработка

yarn install
yarn dev

Сборка пакета (dist/)

yarn build

Публикуйте содержимое каталога dist (там подставляются name / version из корневого package.json).

Лицензия

MIT