Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sima-land/ui-nucleons
UI-компоненты, реализующие правила дизайн-системы
https://github.com/sima-land/ui-nucleons
react reactjs storybook typescript ui
Last synced: 3 months ago
JSON representation
UI-компоненты, реализующие правила дизайн-системы
- Host: GitHub
- URL: https://github.com/sima-land/ui-nucleons
- Owner: sima-land
- License: apache-2.0
- Created: 2021-07-13T05:05:50.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-10-03T08:09:35.000Z (4 months ago)
- Last Synced: 2024-10-17T07:38:31.219Z (4 months ago)
- Topics: react, reactjs, storybook, typescript, ui
- Language: TypeScript
- Homepage: https://sima-land.github.io/ui-nucleons/
- Size: 62.3 MB
- Stars: 5
- Watchers: 18
- Forks: 3
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# UI-nucleons
В этом проекте собраны UI-компоненты, реализующие правила дизайн-системы, а также компоненты и утилиты, которые помогают решать распространенные задачи разработки UI.
## Использование
### Установка
```sh
# с помощью npm
npm i -S @sima-land/ui-nucleons
# или с помощью yarn
yarn add @sima-land/ui-nucleons
```
### Настройка среды
В библиотеке используются:
- импорты изображений (jpg, png...) как url/base64
- импорты стилей
- импорты стилей как css-модулей (каждый такой файл промаркирован в виде `%filename%.m.scss`)
#### Для работы с Webpack
Необходимо сконфигурировать сборку подобным образом:
```js
// webpack.config.js
module.exports = {
module: {
rules: [
// стили
{
test: /\.(css|scss)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
auto: /\.(module|m)\.(css|scss)$/,
localIdentName: '[name]__[local]--[hash:hex:3]',
},
},
},
'sass-loader',
],
},
// картинки
{
test: /\.(apng|avif|gif|jpg|jpeg|png|webp)$/,
type: 'asset/resource',
},
],
},
};
```
#### Для работы с Jest
Необходимо сконфигурировать среду Jest подобно тому как это сделано в данном репозитории:
```js
export default {
// ...прочее
transform: {
// css-модули
'\\.(module|m)\\.(css|scss)$': 'jest-css-modules-transform',
// обычные стили
'(?/.jest/transforms/empty.js',
// asset'ы
'\\.(apng|avif|gif|jpg|jpeg|png|webp)$': '/.jest/transforms/asset.js',
},
transformIgnorePatterns: [
// из некоторых пакетов мы берем стили так что игнорируем только скрипты
'/node_modules/.+js$',
],
};
```
#### Декларации типов для TypeScript
в `src/custom.d.ts` необходимо указать:
```ts
// css-модули
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
declare module '*.m.css' {
const classes: { [key: string]: string };
export default classes;
}
// css-модули с синтаксисом SCSS
declare module '*.module.scss' {
const classes: { [key: string]: string };
export default classes;
}
declare module '*.m.scss' {
const classes: { [key: string]: string };
export default classes;
}
```
## Разработка и поддержка
### Принципы библиотеки
- в библиотеке не должно быть HOC (компонентов высшего порядка - функций, возвращающих компонент)
- компонент интерфейса не должен иметь внешних отступов по умолчанию
### Структура библиотеки
```bash
src
├── something # директория с компонентом
│ ├── index.ts # точка входа с публичными экспортами
│ ├── something.tsx # исходный код компонента
│ ├── something.m.scss # стили компонента (при наличии)
│ ├── something-util.scss # scss-утилиты для кастомизации (при наличии)
│ ├── types.ts # типы (при наличии)
│ ├── __test__
│ │ └── something.test.tsx
│ └── __stories__
│ └── something.stories.tsx
├── helpers # общие утилиты (для использования вне библиотеки)
├── hooks # общие react-хуки (для использования вне библиотеки)
├── test-utils # утилиты для упрощения unit-тестирования составляющих данной библиотеки
└── _internal # внутренние скрипты для использования только в рамках данной библиотеки
```