@kdsui/components 1.0.0
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 +112 -0
- package/dist/index.js +36863 -0
- package/package.json +100 -0
- package/src/styles/base.css +38 -0
package/README.md
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
# @kdsui/components
|
|
2
|
+
|
|
3
|
+
React component library built with [Radix UI](https://www.radix-ui.com/) primitives and [Tailwind CSS](https://tailwindcss.com/).
|
|
4
|
+
|
|
5
|
+
29 accessible, typed components: buttons, inputs, modals, pagination, radio groups, selects, tabs, tooltips, and more.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @kdsui/components
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
**Peer dependencies** (required):
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install react react-dom
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { AppButton, AppInput, AppModal } from "@kdsui/components";
|
|
23
|
+
import "@kdsui/components/styles";
|
|
24
|
+
|
|
25
|
+
export function MyForm() {
|
|
26
|
+
return (
|
|
27
|
+
<div>
|
|
28
|
+
<AppInput label="Email" placeholder="you@example.com" fullWidth />
|
|
29
|
+
<AppButton variant="primary" usage="cta">
|
|
30
|
+
Submit
|
|
31
|
+
</AppButton>
|
|
32
|
+
</div>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Components
|
|
38
|
+
|
|
39
|
+
| Category | Components |
|
|
40
|
+
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
41
|
+
| Actions | `AppButton` |
|
|
42
|
+
| Form | `AppInput`, `AppTextarea`, `AppSelect`, `AppCheckbox`, `AppCheckboxGroup`, `AppRadio`, `AppRadioGroup`, `AppSwitch`, `AppQuantityInput`, `AppTagInput`, `AppUpload` |
|
|
43
|
+
| Display | `AppBadge`, `AppTag`, `AppTable`, `AppTabs`, `AppPagination`, `AppSeparator` |
|
|
44
|
+
| Feedback | `AppMessage`, `AppCallout`, `AppModal`, `AppTooltip`, `AppLoadingIcon` |
|
|
45
|
+
| Branding | `AppIcon` (571 icons), `AppIconWallet`, `AppLabel`, `AppLogoBrumaire` |
|
|
46
|
+
|
|
47
|
+
## Development
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
# Storybook dev server (port 6006)
|
|
51
|
+
npm run dev
|
|
52
|
+
|
|
53
|
+
# Build library
|
|
54
|
+
npm run build
|
|
55
|
+
|
|
56
|
+
# Run tests
|
|
57
|
+
npm run test
|
|
58
|
+
npm run test:watch
|
|
59
|
+
npm run test:coverage
|
|
60
|
+
|
|
61
|
+
# Lint & format
|
|
62
|
+
npm run lint
|
|
63
|
+
npm run lintfix
|
|
64
|
+
npm run lint:prettier
|
|
65
|
+
|
|
66
|
+
# Type check
|
|
67
|
+
npm run typecheck
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
**Node version**: 20.20.0 (Volta-managed)
|
|
71
|
+
|
|
72
|
+
## Tech Stack
|
|
73
|
+
|
|
74
|
+
| Tool | Purpose |
|
|
75
|
+
| ----------------- | ------------------------------------------------------------------------------ |
|
|
76
|
+
| React 18/19 | UI framework |
|
|
77
|
+
| TypeScript | Type safety |
|
|
78
|
+
| Radix UI | Accessible primitives (checkbox, dialog, radio, select, switch, tabs, tooltip) |
|
|
79
|
+
| Tailwind CSS | Styling |
|
|
80
|
+
| Vite | Build (ES module output) |
|
|
81
|
+
| Storybook | Component documentation |
|
|
82
|
+
| Vitest | Unit tests |
|
|
83
|
+
| ESLint + Prettier | Code quality |
|
|
84
|
+
|
|
85
|
+
## Conventions
|
|
86
|
+
|
|
87
|
+
- **Conventional commits** enforced via Husky + Commitlint
|
|
88
|
+
- **Lint-staged** runs ESLint + Prettier on pre-commit
|
|
89
|
+
- **Semantic versioning** via semantic-release (automated on `main` branch)
|
|
90
|
+
|
|
91
|
+
### Commit format
|
|
92
|
+
|
|
93
|
+
```
|
|
94
|
+
type(scope): description
|
|
95
|
+
|
|
96
|
+
# Examples:
|
|
97
|
+
feat(pagination): add previousLabel/nextLabel props
|
|
98
|
+
fix(button): prevent fullWidth stretch in flex containers
|
|
99
|
+
docs: update README
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Types: `feat` (minor), `fix` (patch), `docs`, `style`, `refactor`, `test`, `chore`.
|
|
103
|
+
|
|
104
|
+
## Build Output
|
|
105
|
+
|
|
106
|
+
- ES module (`dist/index.js`)
|
|
107
|
+
- Type declarations (`dist/types/`)
|
|
108
|
+
- Bundled CSS (no code split)
|
|
109
|
+
|
|
110
|
+
## License
|
|
111
|
+
|
|
112
|
+
MIT
|