elseware-ui 3.0.11 → 3.0.12
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 +289 -289
- package/dist/index.css +60 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +75 -3
- package/dist/index.d.ts +75 -3
- package/dist/index.js +66 -12
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +62 -13
- package/dist/index.mjs.map +1 -1
- package/dist/index.native.js.map +1 -1
- package/dist/index.native.mjs.map +1 -1
- package/package.json +173 -173
- package/tailwind.preset.js +116 -116
package/README.md
CHANGED
|
@@ -1,289 +1,289 @@
|
|
|
1
|
-
# elseware-ui
|
|
2
|
-
|
|
3
|
-
A modern, customizable React component library for building web and desktop user interfaces.
|
|
4
|
-
|
|
5
|
-
`elseware-ui` provides reusable, production-ready UI components designed to speed up application development while maintaining consistency, accessibility, scalability, and a clean developer experience.
|
|
6
|
-
|
|
7
|
-
## Features
|
|
8
|
-
|
|
9
|
-
- TypeScript-first component development
|
|
10
|
-
- React-based component architecture
|
|
11
|
-
- Tailwind CSS integration
|
|
12
|
-
- Customizable themes, variants, shapes, and styles
|
|
13
|
-
- Shared design tokens, enums, animations, and SVG utilities
|
|
14
|
-
- Modular barrel exports
|
|
15
|
-
- Tree-shakable ESM build
|
|
16
|
-
- Storybook-powered component development
|
|
17
|
-
- Linting, formatting, type checking, and build validation
|
|
18
|
-
- Web and desktop application support
|
|
19
|
-
- Developer-friendly APIs
|
|
20
|
-
|
|
21
|
-
## Installation
|
|
22
|
-
|
|
23
|
-
Install the package:
|
|
24
|
-
|
|
25
|
-
```bash
|
|
26
|
-
npm install elseware-ui
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
Install required peer dependencies if they are not already installed:
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
npm install react react-dom tailwindcss
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## Package Exports
|
|
36
|
-
|
|
37
|
-
The package exposes the main component API and compiled styles:
|
|
38
|
-
|
|
39
|
-
```json
|
|
40
|
-
{
|
|
41
|
-
".": {
|
|
42
|
-
"types": "./dist/index.d.ts",
|
|
43
|
-
"import": "./dist/index.js",
|
|
44
|
-
"require": "./dist/index.cjs"
|
|
45
|
-
},
|
|
46
|
-
"./styles.css": "./dist/index.css"
|
|
47
|
-
}
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
Recommended usage:
|
|
51
|
-
|
|
52
|
-
```tsx
|
|
53
|
-
import { Button } from "elseware-ui";
|
|
54
|
-
import "elseware-ui/styles.css";
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
## Component Import Structure
|
|
58
|
-
|
|
59
|
-
Use the following import ordering convention when creating or updating components:
|
|
60
|
-
|
|
61
|
-
```ts
|
|
62
|
-
// External
|
|
63
|
-
|
|
64
|
-
// Internal
|
|
65
|
-
|
|
66
|
-
// Data
|
|
67
|
-
|
|
68
|
-
// Types
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
Example:
|
|
72
|
-
|
|
73
|
-
```ts
|
|
74
|
-
// External
|
|
75
|
-
import React from "react";
|
|
76
|
-
|
|
77
|
-
// Internal
|
|
78
|
-
import { cn } from "../../../utils";
|
|
79
|
-
|
|
80
|
-
// Data
|
|
81
|
-
import { Shape, Variant } from "../../../data/enums";
|
|
82
|
-
import { shapes, variants } from "../../../data/styles";
|
|
83
|
-
|
|
84
|
-
// Types
|
|
85
|
-
import type { BaseComponentProps } from "../../../interfaces";
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
## Development
|
|
89
|
-
|
|
90
|
-
Install dependencies:
|
|
91
|
-
|
|
92
|
-
```bash
|
|
93
|
-
npm install
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
Start Storybook:
|
|
97
|
-
|
|
98
|
-
```bash
|
|
99
|
-
npm run dev
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
Build the component library:
|
|
103
|
-
|
|
104
|
-
```bash
|
|
105
|
-
npm run build
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
Build Storybook:
|
|
109
|
-
|
|
110
|
-
```bash
|
|
111
|
-
npm run build:storybook
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
## Code Quality
|
|
115
|
-
|
|
116
|
-
Run TypeScript checks:
|
|
117
|
-
|
|
118
|
-
```bash
|
|
119
|
-
npm run typecheck
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
Run ESLint:
|
|
123
|
-
|
|
124
|
-
```bash
|
|
125
|
-
npm run lint
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
Fix lint issues:
|
|
129
|
-
|
|
130
|
-
```bash
|
|
131
|
-
npm run lint:fix
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
Format files with Prettier:
|
|
135
|
-
|
|
136
|
-
```bash
|
|
137
|
-
npm run format
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
Check formatting:
|
|
141
|
-
|
|
142
|
-
```bash
|
|
143
|
-
npm run format:check
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
Check unused files, exports, and dependencies:
|
|
147
|
-
|
|
148
|
-
```bash
|
|
149
|
-
npm run deadcode
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
Run the full validation pipeline:
|
|
153
|
-
|
|
154
|
-
```bash
|
|
155
|
-
npm run validate
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
Run automatic lint fixes, formatting, and validation:
|
|
159
|
-
|
|
160
|
-
```bash
|
|
161
|
-
npm run full
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
## Git Hooks
|
|
165
|
-
|
|
166
|
-
Initialize Husky:
|
|
167
|
-
|
|
168
|
-
```bash
|
|
169
|
-
npm run prepare:husky
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
Recommended pre-commit hook:
|
|
173
|
-
|
|
174
|
-
```bash
|
|
175
|
-
npx lint-staged
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
## Publishing
|
|
179
|
-
|
|
180
|
-
Before publishing, update the package version:
|
|
181
|
-
|
|
182
|
-
```bash
|
|
183
|
-
npm version patch
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
or:
|
|
187
|
-
|
|
188
|
-
```bash
|
|
189
|
-
npm version minor
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
or:
|
|
193
|
-
|
|
194
|
-
```bash
|
|
195
|
-
npm version major
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
Then publish:
|
|
199
|
-
|
|
200
|
-
```bash
|
|
201
|
-
npm run release
|
|
202
|
-
```
|
|
203
|
-
|
|
204
|
-
The `release` script validates the package before publishing.
|
|
205
|
-
|
|
206
|
-
## Component Guidelines
|
|
207
|
-
|
|
208
|
-
When building components:
|
|
209
|
-
|
|
210
|
-
- Keep components modular and focused
|
|
211
|
-
- Move reusable enums to `src/data/enums.ts`
|
|
212
|
-
- Move reusable style maps to `src/data/styles.tsx`
|
|
213
|
-
- Move reusable animation class maps to `src/data/animations.tsx`
|
|
214
|
-
- Move generic SVG icons to `src/data/svgs.tsx`
|
|
215
|
-
- Keep component-specific state logic in hooks when possible
|
|
216
|
-
- Keep public types in each component's `types.ts`
|
|
217
|
-
- Export each component through its local `index.ts`
|
|
218
|
-
- Avoid unnecessary dependencies between unrelated component groups
|
|
219
|
-
|
|
220
|
-
## Barrel Export Pattern
|
|
221
|
-
|
|
222
|
-
Each component should expose a local barrel file:
|
|
223
|
-
|
|
224
|
-
```ts
|
|
225
|
-
export * from "./Button";
|
|
226
|
-
export * from "./types";
|
|
227
|
-
```
|
|
228
|
-
|
|
229
|
-
Component groups should also expose barrel exports:
|
|
230
|
-
|
|
231
|
-
```ts
|
|
232
|
-
export * from "./avatar";
|
|
233
|
-
export * from "./badge";
|
|
234
|
-
export * from "./toast";
|
|
235
|
-
```
|
|
236
|
-
|
|
237
|
-
The root entry point should expose the public package API:
|
|
238
|
-
|
|
239
|
-
```ts
|
|
240
|
-
export * from "./components";
|
|
241
|
-
export * from "./compositions";
|
|
242
|
-
export * from "./hooks";
|
|
243
|
-
export * from "./layouts";
|
|
244
|
-
export * from "./providers";
|
|
245
|
-
export * from "./routing";
|
|
246
|
-
export * from "./utils";
|
|
247
|
-
export * from "./interfaces";
|
|
248
|
-
export * from "./types";
|
|
249
|
-
```
|
|
250
|
-
|
|
251
|
-
## Styling
|
|
252
|
-
|
|
253
|
-
`elseware-ui` uses Tailwind CSS and shared design tokens.
|
|
254
|
-
|
|
255
|
-
Consumers should import the compiled stylesheet once in their application entry:
|
|
256
|
-
|
|
257
|
-
```tsx
|
|
258
|
-
import "elseware-ui/styles.css";
|
|
259
|
-
```
|
|
260
|
-
|
|
261
|
-
## Documentation
|
|
262
|
-
|
|
263
|
-
Interactive component documentation and examples are available through Storybook.
|
|
264
|
-
|
|
265
|
-
Start Storybook locally:
|
|
266
|
-
|
|
267
|
-
```bash
|
|
268
|
-
npm run dev
|
|
269
|
-
```
|
|
270
|
-
|
|
271
|
-
## About elseware Technology
|
|
272
|
-
|
|
273
|
-
elseware Technology builds tools, frameworks, and solutions for software engineering, cloud computing, game development, and developer productivity.
|
|
274
|
-
|
|
275
|
-
## Contributing
|
|
276
|
-
|
|
277
|
-
Contributions, issues, and feature requests are welcome.
|
|
278
|
-
|
|
279
|
-
Before opening a pull request, run:
|
|
280
|
-
|
|
281
|
-
```bash
|
|
282
|
-
npm run validate
|
|
283
|
-
```
|
|
284
|
-
|
|
285
|
-
## License
|
|
286
|
-
|
|
287
|
-
This project is licensed under the MIT License.
|
|
288
|
-
|
|
289
|
-
Copyright © 2026 elseware Technology.
|
|
1
|
+
# elseware-ui
|
|
2
|
+
|
|
3
|
+
A modern, customizable React component library for building web and desktop user interfaces.
|
|
4
|
+
|
|
5
|
+
`elseware-ui` provides reusable, production-ready UI components designed to speed up application development while maintaining consistency, accessibility, scalability, and a clean developer experience.
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- TypeScript-first component development
|
|
10
|
+
- React-based component architecture
|
|
11
|
+
- Tailwind CSS integration
|
|
12
|
+
- Customizable themes, variants, shapes, and styles
|
|
13
|
+
- Shared design tokens, enums, animations, and SVG utilities
|
|
14
|
+
- Modular barrel exports
|
|
15
|
+
- Tree-shakable ESM build
|
|
16
|
+
- Storybook-powered component development
|
|
17
|
+
- Linting, formatting, type checking, and build validation
|
|
18
|
+
- Web and desktop application support
|
|
19
|
+
- Developer-friendly APIs
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
22
|
+
|
|
23
|
+
Install the package:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install elseware-ui
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Install required peer dependencies if they are not already installed:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm install react react-dom tailwindcss
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Package Exports
|
|
36
|
+
|
|
37
|
+
The package exposes the main component API and compiled styles:
|
|
38
|
+
|
|
39
|
+
```json
|
|
40
|
+
{
|
|
41
|
+
".": {
|
|
42
|
+
"types": "./dist/index.d.ts",
|
|
43
|
+
"import": "./dist/index.js",
|
|
44
|
+
"require": "./dist/index.cjs"
|
|
45
|
+
},
|
|
46
|
+
"./styles.css": "./dist/index.css"
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Recommended usage:
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
import { Button } from "elseware-ui";
|
|
54
|
+
import "elseware-ui/styles.css";
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Component Import Structure
|
|
58
|
+
|
|
59
|
+
Use the following import ordering convention when creating or updating components:
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
// External
|
|
63
|
+
|
|
64
|
+
// Internal
|
|
65
|
+
|
|
66
|
+
// Data
|
|
67
|
+
|
|
68
|
+
// Types
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Example:
|
|
72
|
+
|
|
73
|
+
```ts
|
|
74
|
+
// External
|
|
75
|
+
import React from "react";
|
|
76
|
+
|
|
77
|
+
// Internal
|
|
78
|
+
import { cn } from "../../../utils";
|
|
79
|
+
|
|
80
|
+
// Data
|
|
81
|
+
import { Shape, Variant } from "../../../data/enums";
|
|
82
|
+
import { shapes, variants } from "../../../data/styles";
|
|
83
|
+
|
|
84
|
+
// Types
|
|
85
|
+
import type { BaseComponentProps } from "../../../interfaces";
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## Development
|
|
89
|
+
|
|
90
|
+
Install dependencies:
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
npm install
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Start Storybook:
|
|
97
|
+
|
|
98
|
+
```bash
|
|
99
|
+
npm run dev
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Build the component library:
|
|
103
|
+
|
|
104
|
+
```bash
|
|
105
|
+
npm run build
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
Build Storybook:
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
npm run build:storybook
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Code Quality
|
|
115
|
+
|
|
116
|
+
Run TypeScript checks:
|
|
117
|
+
|
|
118
|
+
```bash
|
|
119
|
+
npm run typecheck
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
Run ESLint:
|
|
123
|
+
|
|
124
|
+
```bash
|
|
125
|
+
npm run lint
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
Fix lint issues:
|
|
129
|
+
|
|
130
|
+
```bash
|
|
131
|
+
npm run lint:fix
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
Format files with Prettier:
|
|
135
|
+
|
|
136
|
+
```bash
|
|
137
|
+
npm run format
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Check formatting:
|
|
141
|
+
|
|
142
|
+
```bash
|
|
143
|
+
npm run format:check
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
Check unused files, exports, and dependencies:
|
|
147
|
+
|
|
148
|
+
```bash
|
|
149
|
+
npm run deadcode
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
Run the full validation pipeline:
|
|
153
|
+
|
|
154
|
+
```bash
|
|
155
|
+
npm run validate
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
Run automatic lint fixes, formatting, and validation:
|
|
159
|
+
|
|
160
|
+
```bash
|
|
161
|
+
npm run full
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
## Git Hooks
|
|
165
|
+
|
|
166
|
+
Initialize Husky:
|
|
167
|
+
|
|
168
|
+
```bash
|
|
169
|
+
npm run prepare:husky
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
Recommended pre-commit hook:
|
|
173
|
+
|
|
174
|
+
```bash
|
|
175
|
+
npx lint-staged
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
## Publishing
|
|
179
|
+
|
|
180
|
+
Before publishing, update the package version:
|
|
181
|
+
|
|
182
|
+
```bash
|
|
183
|
+
npm version patch
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
or:
|
|
187
|
+
|
|
188
|
+
```bash
|
|
189
|
+
npm version minor
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
or:
|
|
193
|
+
|
|
194
|
+
```bash
|
|
195
|
+
npm version major
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
Then publish:
|
|
199
|
+
|
|
200
|
+
```bash
|
|
201
|
+
npm run release
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
The `release` script validates the package before publishing.
|
|
205
|
+
|
|
206
|
+
## Component Guidelines
|
|
207
|
+
|
|
208
|
+
When building components:
|
|
209
|
+
|
|
210
|
+
- Keep components modular and focused
|
|
211
|
+
- Move reusable enums to `src/data/enums.ts`
|
|
212
|
+
- Move reusable style maps to `src/data/styles.tsx`
|
|
213
|
+
- Move reusable animation class maps to `src/data/animations.tsx`
|
|
214
|
+
- Move generic SVG icons to `src/data/svgs.tsx`
|
|
215
|
+
- Keep component-specific state logic in hooks when possible
|
|
216
|
+
- Keep public types in each component's `types.ts`
|
|
217
|
+
- Export each component through its local `index.ts`
|
|
218
|
+
- Avoid unnecessary dependencies between unrelated component groups
|
|
219
|
+
|
|
220
|
+
## Barrel Export Pattern
|
|
221
|
+
|
|
222
|
+
Each component should expose a local barrel file:
|
|
223
|
+
|
|
224
|
+
```ts
|
|
225
|
+
export * from "./Button";
|
|
226
|
+
export * from "./types";
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
Component groups should also expose barrel exports:
|
|
230
|
+
|
|
231
|
+
```ts
|
|
232
|
+
export * from "./avatar";
|
|
233
|
+
export * from "./badge";
|
|
234
|
+
export * from "./toast";
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
The root entry point should expose the public package API:
|
|
238
|
+
|
|
239
|
+
```ts
|
|
240
|
+
export * from "./components";
|
|
241
|
+
export * from "./compositions";
|
|
242
|
+
export * from "./hooks";
|
|
243
|
+
export * from "./layouts";
|
|
244
|
+
export * from "./providers";
|
|
245
|
+
export * from "./routing";
|
|
246
|
+
export * from "./utils";
|
|
247
|
+
export * from "./interfaces";
|
|
248
|
+
export * from "./types";
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
## Styling
|
|
252
|
+
|
|
253
|
+
`elseware-ui` uses Tailwind CSS and shared design tokens.
|
|
254
|
+
|
|
255
|
+
Consumers should import the compiled stylesheet once in their application entry:
|
|
256
|
+
|
|
257
|
+
```tsx
|
|
258
|
+
import "elseware-ui/styles.css";
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
## Documentation
|
|
262
|
+
|
|
263
|
+
Interactive component documentation and examples are available through Storybook.
|
|
264
|
+
|
|
265
|
+
Start Storybook locally:
|
|
266
|
+
|
|
267
|
+
```bash
|
|
268
|
+
npm run dev
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
## About elseware Technology
|
|
272
|
+
|
|
273
|
+
elseware Technology builds tools, frameworks, and solutions for software engineering, cloud computing, game development, and developer productivity.
|
|
274
|
+
|
|
275
|
+
## Contributing
|
|
276
|
+
|
|
277
|
+
Contributions, issues, and feature requests are welcome.
|
|
278
|
+
|
|
279
|
+
Before opening a pull request, run:
|
|
280
|
+
|
|
281
|
+
```bash
|
|
282
|
+
npm run validate
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
## License
|
|
286
|
+
|
|
287
|
+
This project is licensed under the MIT License.
|
|
288
|
+
|
|
289
|
+
Copyright © 2026 elseware Technology.
|