corekit-components 0.1.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 +135 -0
- package/dist/index.d.ts +842 -0
- package/dist/index.js +3250 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +1891 -0
- package/package.json +70 -0
package/README.md
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
# CoreKit
|
|
2
|
+
|
|
3
|
+
A minimal, reusable React component library built as an internal design system with primitive, composable components.
|
|
4
|
+
|
|
5
|
+
> **Private package** — not an app. Built in library mode with ESM output.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Tech Stack
|
|
10
|
+
|
|
11
|
+
| Layer | Technology |
|
|
12
|
+
| ---------------- | ----------------------------------- |
|
|
13
|
+
| UI Framework | React 18 |
|
|
14
|
+
| Language | TypeScript (strict mode) |
|
|
15
|
+
| Styling | TailwindCSS + CSS Variables |
|
|
16
|
+
| Variants | class-variance-authority (cva) |
|
|
17
|
+
| Build | Vite (library mode, ESM) |
|
|
18
|
+
| Documentation | Storybook (Vite builder) |
|
|
19
|
+
| Utilities | clsx |
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## Getting Started
|
|
24
|
+
|
|
25
|
+
### Prerequisites
|
|
26
|
+
|
|
27
|
+
- Node.js >= 18
|
|
28
|
+
- npm >= 9
|
|
29
|
+
|
|
30
|
+
### Install Dependencies
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npm install
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Development (watch mode)
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npm run dev
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Build
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
npm run build
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Output:
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
dist/
|
|
52
|
+
├── index.js # ESM bundle
|
|
53
|
+
├── index.d.ts # Type declarations
|
|
54
|
+
└── styles.css # Compiled CSS with design tokens
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Storybook
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
npm run storybook # Dev server at http://localhost:6006
|
|
61
|
+
npm run build-storybook # Static build
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## Project Structure
|
|
67
|
+
|
|
68
|
+
```
|
|
69
|
+
src/
|
|
70
|
+
├── components/
|
|
71
|
+
│ ├── Button/ # Variant-driven button (cva)
|
|
72
|
+
│ │ ├── Button.tsx
|
|
73
|
+
│ │ ├── types.ts
|
|
74
|
+
│ │ └── index.ts
|
|
75
|
+
│ ├── Input/ # Accessible form input with label & error
|
|
76
|
+
│ │ ├── Input.tsx
|
|
77
|
+
│ │ ├── types.ts
|
|
78
|
+
│ │ └── index.ts
|
|
79
|
+
│ ├── Card/ # Composition-based card layout
|
|
80
|
+
│ │ ├── Card.tsx
|
|
81
|
+
│ │ ├── types.ts
|
|
82
|
+
│ │ └── index.ts
|
|
83
|
+
│ ├── Box/ # Polymorphic wrapper div
|
|
84
|
+
│ │ ├── Box.tsx
|
|
85
|
+
│ │ ├── types.ts
|
|
86
|
+
│ │ └── index.ts
|
|
87
|
+
│ ├── Stack/ # Flex layout (vertical/horizontal)
|
|
88
|
+
│ │ ├── Stack.tsx
|
|
89
|
+
│ │ ├── types.ts
|
|
90
|
+
│ │ └── index.ts
|
|
91
|
+
│ └── Modal/ # Accessible portal-based modal
|
|
92
|
+
│ ├── Modal.tsx
|
|
93
|
+
│ ├── types.ts
|
|
94
|
+
│ └── index.ts
|
|
95
|
+
├── tokens/
|
|
96
|
+
│ ├── colors.ts
|
|
97
|
+
│ ├── spacing.ts
|
|
98
|
+
│ ├── radius.ts
|
|
99
|
+
│ └── index.ts
|
|
100
|
+
├── styles.css # Design tokens as CSS custom properties
|
|
101
|
+
└── index.ts # Barrel export
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## Design Tokens
|
|
107
|
+
|
|
108
|
+
All components consume design tokens via CSS custom properties. **No hardcoded colors or radius values.**
|
|
109
|
+
|
|
110
|
+
```css
|
|
111
|
+
:root {
|
|
112
|
+
/* Colors */
|
|
113
|
+
--color-primary: #2563eb;
|
|
114
|
+
--color-secondary: #7c3aed;
|
|
115
|
+
--color-muted: #6b7280;
|
|
116
|
+
|
|
117
|
+
/* Radius */
|
|
118
|
+
--radius-sm: 0.25rem;
|
|
119
|
+
--radius-md: 0.375rem;
|
|
120
|
+
--radius-lg: 0.5rem;
|
|
121
|
+
|
|
122
|
+
/* Spacing */
|
|
123
|
+
--space-1: 0.25rem;
|
|
124
|
+
--space-2: 0.5rem;
|
|
125
|
+
--space-4: 1rem;
|
|
126
|
+
|
|
127
|
+
/* Shadows */
|
|
128
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
129
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Override these variables in your consuming app to theme the entire library.
|
|
134
|
+
|
|
135
|
+
---
|