@atme-lab/ui-kit 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +26 -0
- package/README.md +189 -0
- package/package.json +117 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) Pavel Gordeev
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
ATTRIBUTION REQUIREMENT:
|
|
16
|
+
When using this library, you must include attribution to the original author
|
|
17
|
+
in your application's credits, about page, or documentation.
|
|
18
|
+
|
|
19
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
20
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
21
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
22
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
23
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
24
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
25
|
+
SOFTWARE.
|
|
26
|
+
|
package/README.md
ADDED
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
# @atme-lab/ui-kit
|
|
2
|
+
|
|
3
|
+
Библиотека компонентов для личных проектов
|
|
4
|
+
|
|
5
|
+
## Установка
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @atme-lab/ui-kit
|
|
9
|
+
# или
|
|
10
|
+
npm install @atme-lab/ui-kit
|
|
11
|
+
# или
|
|
12
|
+
yarn add @atme-lab/ui-kit
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Быстрый старт
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { ThemeProvider, lightTheme, Button, Typography } from "@atme-lab/ui-kit";
|
|
19
|
+
// Импортируйте глобальные стили в корне вашего приложения
|
|
20
|
+
import "@atme-lab/ui-kit/global";
|
|
21
|
+
|
|
22
|
+
function App() {
|
|
23
|
+
return (
|
|
24
|
+
<ThemeProvider theme={lightTheme}>
|
|
25
|
+
<Typography variant="h1">Hello World</Typography>
|
|
26
|
+
<Button variant="primary">Click me</Button>
|
|
27
|
+
</ThemeProvider>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
**Важно**: Глобальные стили (`@atme-lab/ui-kit/global`) нужно импортировать один раз в корне вашего приложения (например, в `main.tsx` или `App.tsx`). Они содержат CSS reset и базовые стили для элементов.
|
|
33
|
+
|
|
34
|
+
## Документация компонентов
|
|
35
|
+
|
|
36
|
+
Детальная документация по всем компонентам, их пропсам и примерам использования доступна в **Storybook**.
|
|
37
|
+
|
|
38
|
+
Для локального просмотра документации:
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
pnpm storybook
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Или используйте онлайн-документацию (если доступна).
|
|
45
|
+
|
|
46
|
+
## Использование тем
|
|
47
|
+
|
|
48
|
+
Библиотека предоставляет две готовые темы: `lightTheme` и `darkTheme`. Вы можете использовать любую из них или создать свою кастомную тему.
|
|
49
|
+
|
|
50
|
+
### Светлая тема
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
import { ThemeProvider, lightTheme } from "@atme-lab/ui-kit";
|
|
54
|
+
|
|
55
|
+
<ThemeProvider theme={lightTheme}>{/* Ваши компоненты */}</ThemeProvider>;
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Темная тема
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
import { ThemeProvider, darkTheme } from "@atme-lab/ui-kit";
|
|
62
|
+
|
|
63
|
+
<ThemeProvider theme={darkTheme}>{/* Ваши компоненты */}</ThemeProvider>;
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Кастомная тема
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import { ThemeProvider, lightTheme, mergeTheme } from "@atme-lab/ui-kit";
|
|
70
|
+
|
|
71
|
+
const customTheme = mergeTheme(lightTheme, {
|
|
72
|
+
palette: {
|
|
73
|
+
primary: {
|
|
74
|
+
main: "#ff0000",
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
<ThemeProvider theme={customTheme}>{/* Ваши компоненты */}</ThemeProvider>;
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Доступные компоненты
|
|
83
|
+
|
|
84
|
+
Библиотека включает следующие категории компонентов:
|
|
85
|
+
|
|
86
|
+
- **Primitives**: Button, Typography, Tag и другие базовые компоненты
|
|
87
|
+
- **Form**: Input, Select, Checkbox, Radio и другие компоненты форм
|
|
88
|
+
- **Feedback**: Alert, Toast, Modal, Tooltip и другие компоненты обратной связи
|
|
89
|
+
- **Layout**: Card, Container, Stack, Grid и другие компоненты раскладки
|
|
90
|
+
- **Navigation**: Tabs, Menu, Breadcrumb и другие навигационные компоненты
|
|
91
|
+
|
|
92
|
+
Полный список компонентов и примеры использования смотрите в Storybook документации.
|
|
93
|
+
|
|
94
|
+
## Разработка
|
|
95
|
+
|
|
96
|
+
```bash
|
|
97
|
+
# Установка зависимостей
|
|
98
|
+
pnpm install
|
|
99
|
+
|
|
100
|
+
# Запуск Storybook
|
|
101
|
+
pnpm storybook
|
|
102
|
+
|
|
103
|
+
# Запуск тестов
|
|
104
|
+
pnpm test
|
|
105
|
+
|
|
106
|
+
# Сборка
|
|
107
|
+
pnpm build
|
|
108
|
+
|
|
109
|
+
# Линтинг
|
|
110
|
+
pnpm lint
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## Версионирование
|
|
114
|
+
|
|
115
|
+
Проект использует [Conventional Commits](https://www.conventionalcommits.org/) для автоматического версионирования и генерации CHANGELOG.
|
|
116
|
+
|
|
117
|
+
### Формат коммитов
|
|
118
|
+
|
|
119
|
+
Все коммиты должны следовать формату Conventional Commits:
|
|
120
|
+
|
|
121
|
+
```
|
|
122
|
+
<type>: <subject>
|
|
123
|
+
|
|
124
|
+
[optional body]
|
|
125
|
+
|
|
126
|
+
[optional footer]
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
**Breaking changes:**
|
|
130
|
+
Для major версии добавьте `BREAKING CHANGE:` в footer коммита или используйте `!` после типа: `feat!: breaking change`
|
|
131
|
+
|
|
132
|
+
### Создание коммитов
|
|
133
|
+
|
|
134
|
+
**Рекомендуемый способ** (интерактивный):
|
|
135
|
+
|
|
136
|
+
```bash
|
|
137
|
+
pnpm commit
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Или используйте обычный git commit с правильным форматом:
|
|
141
|
+
|
|
142
|
+
```bash
|
|
143
|
+
git commit -m "feat: добавил компонент Button"
|
|
144
|
+
git commit -m "fix: исправил стили в Input"
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### Создание релиза
|
|
148
|
+
|
|
149
|
+
Для создания релиза используйте:
|
|
150
|
+
|
|
151
|
+
```bash
|
|
152
|
+
# Автоматическое определение версии на основе коммитов
|
|
153
|
+
pnpm release
|
|
154
|
+
|
|
155
|
+
# Принудительный minor релиз
|
|
156
|
+
pnpm release:minor
|
|
157
|
+
|
|
158
|
+
# Принудительный major релиз
|
|
159
|
+
pnpm release:major
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
Команда `pnpm release` автоматически:
|
|
163
|
+
|
|
164
|
+
1. Анализирует коммиты с момента последнего релиза
|
|
165
|
+
2. Определяет версию (patch/minor/major) на основе типов коммитов
|
|
166
|
+
3. Обновляет `package.json` с новой версией
|
|
167
|
+
4. Генерирует/обновляет `CHANGELOG.md`
|
|
168
|
+
5. Создает git tag (например, `v1.1.0`)
|
|
169
|
+
6. Создает коммит с изменениями
|
|
170
|
+
|
|
171
|
+
После создания релиза:
|
|
172
|
+
|
|
173
|
+
```bash
|
|
174
|
+
# Отправка изменений и тегов
|
|
175
|
+
git push --follow-tags
|
|
176
|
+
|
|
177
|
+
# Публикация в npm (если нужно)
|
|
178
|
+
npm publish
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
### Workflow
|
|
182
|
+
|
|
183
|
+
1. **Разработка**: Создавайте коммиты с правильным форматом (используйте `pnpm commit` для упрощения)
|
|
184
|
+
2. **Релиз**: Запустите `pnpm release` когда готовы создать релиз
|
|
185
|
+
3. **Публикация**: Отправьте изменения и теги, затем опубликуйте в npm (если нужно)
|
|
186
|
+
|
|
187
|
+
## Лицензия
|
|
188
|
+
|
|
189
|
+
MIT
|
package/package.json
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@atme-lab/ui-kit",
|
|
3
|
+
"version": "0.1.2",
|
|
4
|
+
"description": "Modern, scalable React UI library with TypeScript",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.esm.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.esm.js",
|
|
13
|
+
"require": "./dist/index.js"
|
|
14
|
+
},
|
|
15
|
+
"./global": {
|
|
16
|
+
"types": "./dist/global.d.ts",
|
|
17
|
+
"import": "./dist/global.esm.js",
|
|
18
|
+
"require": "./dist/global.js"
|
|
19
|
+
},
|
|
20
|
+
"./tokens": {
|
|
21
|
+
"types": "./dist/tokens/index.d.ts",
|
|
22
|
+
"import": "./dist/tokens/index.js"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"files": [
|
|
26
|
+
"dist"
|
|
27
|
+
],
|
|
28
|
+
"scripts": {
|
|
29
|
+
"prepare": "husky",
|
|
30
|
+
"dev": "vite --config .configs/vite.config.ts",
|
|
31
|
+
"build": "tsc && vite build --config .configs/vite.config.ts",
|
|
32
|
+
"type-check": "tsc --noEmit",
|
|
33
|
+
"test": "vitest --config .configs/vitest.config.ts",
|
|
34
|
+
"test:ui": "vitest --config .configs/vitest.config.ts --ui",
|
|
35
|
+
"test:coverage": "vitest --config .configs/vitest.config.ts --coverage",
|
|
36
|
+
"storybook": "storybook dev -p 6006",
|
|
37
|
+
"build-storybook": "storybook build",
|
|
38
|
+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --config .configs/eslintrc.cjs",
|
|
39
|
+
"lint:fix": "eslint . --ext ts,tsx --fix --config .configs/eslintrc.cjs",
|
|
40
|
+
"format": "prettier --write --config .configs/prettierrc \"**/*.{ts,tsx,js,jsx,json,css,md}\" --ignore-path .prettierignore",
|
|
41
|
+
"format:check": "prettier --check --config .configs/prettierrc \"**/*.{ts,tsx,js,jsx,json,css,md}\" --ignore-path .prettierignore",
|
|
42
|
+
"stylelint": "stylelint --config .configs/stylelintrc.json \"**/*.{css,pcss}\"",
|
|
43
|
+
"stylelint:fix": "stylelint --config .configs/stylelintrc.json \"**/*.{css,pcss}\" --fix",
|
|
44
|
+
"commit": "cz",
|
|
45
|
+
"release": "standard-version",
|
|
46
|
+
"release:minor": "standard-version --release-as minor",
|
|
47
|
+
"release:major": "standard-version --release-as major"
|
|
48
|
+
},
|
|
49
|
+
"keywords": [
|
|
50
|
+
"react",
|
|
51
|
+
"ui",
|
|
52
|
+
"components",
|
|
53
|
+
"typescript",
|
|
54
|
+
"design-system"
|
|
55
|
+
],
|
|
56
|
+
"author": "Pavel Gordeev <pavelgq@yandex.ru>",
|
|
57
|
+
"license": "MIT",
|
|
58
|
+
"publishConfig": {
|
|
59
|
+
"access": "public"
|
|
60
|
+
},
|
|
61
|
+
"config": {
|
|
62
|
+
"commitizen": {
|
|
63
|
+
"path": "./node_modules/cz-conventional-changelog"
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
"peerDependencies": {
|
|
67
|
+
"react": "^18.0.0",
|
|
68
|
+
"react-dom": "^18.0.0"
|
|
69
|
+
},
|
|
70
|
+
"devDependencies": {
|
|
71
|
+
"@commitlint/cli": "^19.6.0",
|
|
72
|
+
"@commitlint/config-conventional": "^19.6.0",
|
|
73
|
+
"@storybook/addon-a11y": "^8.3.0",
|
|
74
|
+
"@storybook/addon-essentials": "^8.3.0",
|
|
75
|
+
"@storybook/addon-interactions": "^8.3.0",
|
|
76
|
+
"@storybook/addon-links": "^8.3.0",
|
|
77
|
+
"@storybook/blocks": "^8.3.0",
|
|
78
|
+
"@storybook/react": "^8.3.0",
|
|
79
|
+
"@storybook/react-vite": "^8.3.0",
|
|
80
|
+
"@storybook/test": "^8.3.0",
|
|
81
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
82
|
+
"@testing-library/react": "^16.1.0",
|
|
83
|
+
"@testing-library/user-event": "^14.5.2",
|
|
84
|
+
"@types/node": "^25.0.3",
|
|
85
|
+
"@types/react": "^18.3.27",
|
|
86
|
+
"@types/react-dom": "^18.3.5",
|
|
87
|
+
"@typescript-eslint/eslint-plugin": "^8.18.2",
|
|
88
|
+
"@typescript-eslint/parser": "^8.18.2",
|
|
89
|
+
"@vitejs/plugin-react": "^4.3.4",
|
|
90
|
+
"autoprefixer": "^10.4.23",
|
|
91
|
+
"commitizen": "^4.3.1",
|
|
92
|
+
"cz-conventional-changelog": "^3.3.0",
|
|
93
|
+
"eslint": "^9.17.0",
|
|
94
|
+
"eslint-plugin-react-hooks": "^5.1.0",
|
|
95
|
+
"eslint-plugin-react-refresh": "^0.4.16",
|
|
96
|
+
"eslint-plugin-storybook": "^0.11.1",
|
|
97
|
+
"globals": "^15.14.0",
|
|
98
|
+
"husky": "^9.1.7",
|
|
99
|
+
"postcss": "^8.5.6",
|
|
100
|
+
"postcss-functions": "^4.0.2",
|
|
101
|
+
"postcss-mixins": "^12.1.2",
|
|
102
|
+
"postcss-nested": "^7.0.2",
|
|
103
|
+
"prettier": "^3.4.2",
|
|
104
|
+
"react": "^18.3.1",
|
|
105
|
+
"react-dom": "^18.3.1",
|
|
106
|
+
"standard-version": "^9.5.0",
|
|
107
|
+
"stylelint": "^16.11.0",
|
|
108
|
+
"stylelint-config-standard": "^36.0.1",
|
|
109
|
+
"tsx": "^4.21.0",
|
|
110
|
+
"typescript": "^5.7.2",
|
|
111
|
+
"vite": "^6.0.5",
|
|
112
|
+
"vitest": "^4.0.16"
|
|
113
|
+
},
|
|
114
|
+
"dependencies": {
|
|
115
|
+
"classnames": "^2.5.1"
|
|
116
|
+
}
|
|
117
|
+
}
|