@bpa-dev/shiny-ui

Библиотека UI-компонентов на React (HeroUI, Typography, FileDownload и др.).

Установка

npm install @bpa-dev/shiny-ui react react-dom @heroui/react framer-motion

Подключение в приложении

1. Оберните приложение в провайдер и импортируйте пакет

Достаточно один раз импортировать что-нибудь из пакета (например, провайдер) и обернуть корень приложения в ShinyUIProvider. Стили подтянутся автоматически (в сборку библиотеки встроен импорт shiny-ui.css).

// main.tsx или App.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { ShinyUIProvider } from '@bpa-dev/shiny-ui'
import App from './App'

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

Если стили по какой-то причине не подтянулись (например, импортируете только тип), подключите их вручную один раз:

import '@bpa-dev/shiny-ui/dist/shiny-ui.css'

2. Используйте компоненты

import { FileDownload, Typography } from '@bpa-dev/shiny-ui'

function MyPage() {
  return (
    <div>
      <Typography type='label-md' text='Загрузка файла' />
      <FileDownload
        fileName='Отчёт.xlsx'
        fileType='XLSX'
        fileSize='12.8 KB'
        onDownload={() => window.open('/api/download/123')}
      />
    </div>
  )
}

Важно

• Провайдер обязателен — без ShinyUIProvider компоненты HeroUI (например, кнопки в FileDownload) могут работать некорректно.
• Peer-зависимости — в приложении должны быть установлены react, react-dom, @heroui/react, framer-motion в совместимых версиях (см. package.json библиотеки).
• Vite — библиотека собирается в ESM без require('react'). Если в приложении на Vite появится ошибка «Dynamic require of "react" is not supported», обновите @bpa-dev/shiny-ui до актуальной версии и пересоберите пакет (npm run build в репозитории библиотеки).

Компоненты

• Typography — типографика с предзаданными стилями.
• FileDownload — блок для скачивания файла (название, тип, размер, кнопка, состояния загрузки/ошибки).
• HeroUI — реэкспортируются все компоненты из @heroui/react (Button, Input, Modal и т.д.).

Разработка

• npm run storybook — запуск Storybook.
• npm run build — сборка библиотеки в dist/.