@atme-lab/ui-kit 0.1.2 → 0.1.3
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/README.md +70 -63
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,22 +1,29 @@
|
|
|
1
1
|
# @atme-lab/ui-kit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Component library for personal projects
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
> [Read in Russian](docs/README.ru.md)
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
6
8
|
|
|
7
9
|
```bash
|
|
8
10
|
pnpm add @atme-lab/ui-kit
|
|
9
|
-
#
|
|
11
|
+
# or
|
|
10
12
|
npm install @atme-lab/ui-kit
|
|
11
|
-
#
|
|
13
|
+
# or
|
|
12
14
|
yarn add @atme-lab/ui-kit
|
|
13
15
|
```
|
|
14
16
|
|
|
15
|
-
##
|
|
17
|
+
## Quick Start
|
|
16
18
|
|
|
17
19
|
```tsx
|
|
18
|
-
import {
|
|
19
|
-
|
|
20
|
+
import {
|
|
21
|
+
ThemeProvider,
|
|
22
|
+
lightTheme,
|
|
23
|
+
Button,
|
|
24
|
+
Typography,
|
|
25
|
+
} from "@atme-lab/ui-kit";
|
|
26
|
+
// Import global styles at the root of your application
|
|
20
27
|
import "@atme-lab/ui-kit/global";
|
|
21
28
|
|
|
22
29
|
function App() {
|
|
@@ -29,41 +36,41 @@ function App() {
|
|
|
29
36
|
}
|
|
30
37
|
```
|
|
31
38
|
|
|
32
|
-
|
|
39
|
+
**Important**: Global styles (`@atme-lab/ui-kit/global`) should be imported once at the root of your application (e.g., in `main.tsx` or `App.tsx`). They contain CSS reset and base styles for elements.
|
|
33
40
|
|
|
34
|
-
##
|
|
41
|
+
## Component Documentation
|
|
35
42
|
|
|
36
|
-
|
|
43
|
+
Detailed documentation for all components, their props, and usage examples is available in **Storybook**.
|
|
37
44
|
|
|
38
|
-
|
|
45
|
+
To view documentation locally:
|
|
39
46
|
|
|
40
47
|
```bash
|
|
41
48
|
pnpm storybook
|
|
42
49
|
```
|
|
43
50
|
|
|
44
|
-
|
|
51
|
+
Or use the online documentation (if available).
|
|
45
52
|
|
|
46
|
-
##
|
|
53
|
+
## Using Themes
|
|
47
54
|
|
|
48
|
-
|
|
55
|
+
The library provides two ready-made themes: `lightTheme` and `darkTheme`. You can use either of them or create your own custom theme.
|
|
49
56
|
|
|
50
|
-
###
|
|
57
|
+
### Light Theme
|
|
51
58
|
|
|
52
59
|
```tsx
|
|
53
60
|
import { ThemeProvider, lightTheme } from "@atme-lab/ui-kit";
|
|
54
61
|
|
|
55
|
-
<ThemeProvider theme={lightTheme}>{/*
|
|
62
|
+
<ThemeProvider theme={lightTheme}>{/* Your components */}</ThemeProvider>;
|
|
56
63
|
```
|
|
57
64
|
|
|
58
|
-
###
|
|
65
|
+
### Dark Theme
|
|
59
66
|
|
|
60
67
|
```tsx
|
|
61
68
|
import { ThemeProvider, darkTheme } from "@atme-lab/ui-kit";
|
|
62
69
|
|
|
63
|
-
<ThemeProvider theme={darkTheme}>{/*
|
|
70
|
+
<ThemeProvider theme={darkTheme}>{/* Your components */}</ThemeProvider>;
|
|
64
71
|
```
|
|
65
72
|
|
|
66
|
-
###
|
|
73
|
+
### Custom Theme
|
|
67
74
|
|
|
68
75
|
```tsx
|
|
69
76
|
import { ThemeProvider, lightTheme, mergeTheme } from "@atme-lab/ui-kit";
|
|
@@ -76,47 +83,47 @@ const customTheme = mergeTheme(lightTheme, {
|
|
|
76
83
|
},
|
|
77
84
|
});
|
|
78
85
|
|
|
79
|
-
<ThemeProvider theme={customTheme}>{/*
|
|
86
|
+
<ThemeProvider theme={customTheme}>{/* Your components */}</ThemeProvider>;
|
|
80
87
|
```
|
|
81
88
|
|
|
82
|
-
##
|
|
89
|
+
## Available Components
|
|
83
90
|
|
|
84
|
-
|
|
91
|
+
The library includes the following component categories:
|
|
85
92
|
|
|
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
|
|
93
|
+
- **Primitives**: Button, Typography, Tag, and other base components
|
|
94
|
+
- **Form**: Input, Select, Checkbox, Radio, and other form components
|
|
95
|
+
- **Feedback**: Alert, Toast, Modal, Tooltip, and other feedback components
|
|
96
|
+
- **Layout**: Card, Container, Stack, Grid, and other layout components
|
|
97
|
+
- **Navigation**: Tabs, Menu, Breadcrumb, and other navigation components
|
|
91
98
|
|
|
92
|
-
|
|
99
|
+
See the Storybook documentation for a complete list of components and usage examples.
|
|
93
100
|
|
|
94
|
-
##
|
|
101
|
+
## Development
|
|
95
102
|
|
|
96
103
|
```bash
|
|
97
|
-
#
|
|
104
|
+
# Install dependencies
|
|
98
105
|
pnpm install
|
|
99
106
|
|
|
100
|
-
#
|
|
107
|
+
# Run Storybook
|
|
101
108
|
pnpm storybook
|
|
102
109
|
|
|
103
|
-
#
|
|
110
|
+
# Run tests
|
|
104
111
|
pnpm test
|
|
105
112
|
|
|
106
|
-
#
|
|
113
|
+
# Build
|
|
107
114
|
pnpm build
|
|
108
115
|
|
|
109
|
-
#
|
|
116
|
+
# Linting
|
|
110
117
|
pnpm lint
|
|
111
118
|
```
|
|
112
119
|
|
|
113
|
-
##
|
|
120
|
+
## Versioning
|
|
114
121
|
|
|
115
|
-
|
|
122
|
+
The project uses [Conventional Commits](https://www.conventionalcommits.org/) for automatic versioning and CHANGELOG generation.
|
|
116
123
|
|
|
117
|
-
###
|
|
124
|
+
### Commit Format
|
|
118
125
|
|
|
119
|
-
|
|
126
|
+
All commits should follow the Conventional Commits format:
|
|
120
127
|
|
|
121
128
|
```
|
|
122
129
|
<type>: <subject>
|
|
@@ -127,63 +134,63 @@ pnpm lint
|
|
|
127
134
|
```
|
|
128
135
|
|
|
129
136
|
**Breaking changes:**
|
|
130
|
-
|
|
137
|
+
For major version, add `BREAKING CHANGE:` in the commit footer or use `!` after the type: `feat!: breaking change`
|
|
131
138
|
|
|
132
|
-
###
|
|
139
|
+
### Creating Commits
|
|
133
140
|
|
|
134
|
-
|
|
141
|
+
**Recommended way** (interactive):
|
|
135
142
|
|
|
136
143
|
```bash
|
|
137
144
|
pnpm commit
|
|
138
145
|
```
|
|
139
146
|
|
|
140
|
-
|
|
147
|
+
Or use regular git commit with the correct format:
|
|
141
148
|
|
|
142
149
|
```bash
|
|
143
|
-
git commit -m "feat:
|
|
144
|
-
git commit -m "fix:
|
|
150
|
+
git commit -m "feat: add Button component"
|
|
151
|
+
git commit -m "fix: correct Input styles"
|
|
145
152
|
```
|
|
146
153
|
|
|
147
|
-
###
|
|
154
|
+
### Creating a Release
|
|
148
155
|
|
|
149
|
-
|
|
156
|
+
To create a release, use:
|
|
150
157
|
|
|
151
158
|
```bash
|
|
152
|
-
#
|
|
159
|
+
# Automatic version detection based on commits
|
|
153
160
|
pnpm release
|
|
154
161
|
|
|
155
|
-
#
|
|
162
|
+
# Force minor release
|
|
156
163
|
pnpm release:minor
|
|
157
164
|
|
|
158
|
-
#
|
|
165
|
+
# Force major release
|
|
159
166
|
pnpm release:major
|
|
160
167
|
```
|
|
161
168
|
|
|
162
|
-
|
|
169
|
+
The `pnpm release` command automatically:
|
|
163
170
|
|
|
164
|
-
1.
|
|
165
|
-
2.
|
|
166
|
-
3.
|
|
167
|
-
4.
|
|
168
|
-
5.
|
|
169
|
-
6.
|
|
171
|
+
1. Analyzes commits since the last release
|
|
172
|
+
2. Determines the version (patch/minor/major) based on commit types
|
|
173
|
+
3. Updates `package.json` with the new version
|
|
174
|
+
4. Generates/updates `CHANGELOG.md`
|
|
175
|
+
5. Creates a git tag (e.g., `v1.1.0`)
|
|
176
|
+
6. Creates a commit with the changes
|
|
170
177
|
|
|
171
|
-
|
|
178
|
+
After creating a release:
|
|
172
179
|
|
|
173
180
|
```bash
|
|
174
|
-
#
|
|
181
|
+
# Push changes and tags
|
|
175
182
|
git push --follow-tags
|
|
176
183
|
|
|
177
|
-
#
|
|
184
|
+
# Publish to npm (if needed)
|
|
178
185
|
npm publish
|
|
179
186
|
```
|
|
180
187
|
|
|
181
188
|
### Workflow
|
|
182
189
|
|
|
183
|
-
1.
|
|
184
|
-
2.
|
|
185
|
-
3.
|
|
190
|
+
1. **Development**: Create commits with the correct format (use `pnpm commit` for convenience)
|
|
191
|
+
2. **Release**: Run `pnpm release` when ready to create a release
|
|
192
|
+
3. **Publishing**: Push changes and tags, then publish to npm (if needed)
|
|
186
193
|
|
|
187
|
-
##
|
|
194
|
+
## License
|
|
188
195
|
|
|
189
196
|
MIT
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atme-lab/ui-kit",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.3",
|
|
4
|
+
"description": "Component library for personal projects",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.esm.js",
|