@bigtablet/design-system 1.18.5 → 1.18.7
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 +190 -49
- package/package.json +8 -1
package/README.md
CHANGED
|
@@ -8,7 +8,9 @@
|
|
|
8
8
|
[](LICENSE)
|
|
9
9
|
[](https://github.com/Bigtablet/bigtablet-design-system/actions)
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
[🇰🇷 한국어](./README_KR.md) · 🇺🇸 English
|
|
12
|
+
|
|
13
|
+
The official design system of Bigtablet — a unified UI library composed of Foundation (design tokens) and UI Components.
|
|
12
14
|
|
|
13
15
|
[GitHub](https://github.com/Bigtablet/bigtablet-design-system) · [NPM](https://www.npmjs.com/package/@bigtablet/design-system) · [Storybook](https://bigtablet.github.io/bigtablet-design-system)
|
|
14
16
|
|
|
@@ -16,19 +18,22 @@ Bigtablet의 공식 디자인 시스템으로, Foundation(디자인 토큰)과 C
|
|
|
16
18
|
|
|
17
19
|
---
|
|
18
20
|
|
|
19
|
-
##
|
|
21
|
+
## Features
|
|
20
22
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
| Feature | Description |
|
|
24
|
+
|---------|-------------|
|
|
25
|
+
| ⚛️ **React 19** | Full support for the latest React version |
|
|
26
|
+
| 🔷 **TypeScript** | Complete type definitions for all components |
|
|
27
|
+
| 📦 **Dual Bundle** | Separate bundles optimized for Pure React and Next.js |
|
|
28
|
+
| 🌐 **Vanilla JS** | Supports non-React environments (Thymeleaf, JSP, PHP, etc.) |
|
|
29
|
+
| 🎨 **Design Tokens** | Consistent token-based system for colors, typography, spacing |
|
|
30
|
+
| ♿ **Accessibility** | Keyboard navigation, screen reader support, full ARIA attributes |
|
|
31
|
+
| 🧪 **86% Coverage** | Stable test coverage powered by Vitest |
|
|
32
|
+
| 🎭 **Storybook** | Interactive documentation for all components |
|
|
28
33
|
|
|
29
34
|
---
|
|
30
35
|
|
|
31
|
-
##
|
|
36
|
+
## Installation
|
|
32
37
|
|
|
33
38
|
```bash
|
|
34
39
|
# npm
|
|
@@ -41,27 +46,38 @@ yarn add @bigtablet/design-system
|
|
|
41
46
|
pnpm add @bigtablet/design-system
|
|
42
47
|
```
|
|
43
48
|
|
|
44
|
-
|
|
49
|
+
**Peer Dependencies**
|
|
45
50
|
|
|
46
51
|
```bash
|
|
47
52
|
npm install react react-dom lucide-react react-toastify
|
|
48
53
|
```
|
|
49
54
|
|
|
55
|
+
> Recommended for use with **React 18+** and **Next.js 13+**.
|
|
56
|
+
|
|
50
57
|
---
|
|
51
58
|
|
|
52
|
-
##
|
|
59
|
+
## Quick Start
|
|
53
60
|
|
|
54
61
|
### Pure React
|
|
55
62
|
|
|
56
63
|
```tsx
|
|
57
|
-
import { Button, TextField } from '@bigtablet/design-system';
|
|
64
|
+
import { Button, TextField, Modal } from '@bigtablet/design-system';
|
|
58
65
|
import '@bigtablet/design-system/style.css';
|
|
59
66
|
|
|
60
67
|
function App() {
|
|
68
|
+
const [open, setOpen] = React.useState(false);
|
|
69
|
+
|
|
61
70
|
return (
|
|
62
71
|
<div>
|
|
63
|
-
<TextField
|
|
64
|
-
|
|
72
|
+
<TextField
|
|
73
|
+
label="Email"
|
|
74
|
+
placeholder="email@example.com"
|
|
75
|
+
helperText="Please enter your work email."
|
|
76
|
+
/>
|
|
77
|
+
<Button variant="primary" onClick={() => setOpen(true)}>Confirm</Button>
|
|
78
|
+
<Modal open={open} onClose={() => setOpen(false)} title="Notice">
|
|
79
|
+
Hello!
|
|
80
|
+
</Modal>
|
|
65
81
|
</div>
|
|
66
82
|
);
|
|
67
83
|
}
|
|
@@ -69,80 +85,205 @@ function App() {
|
|
|
69
85
|
|
|
70
86
|
### Next.js
|
|
71
87
|
|
|
88
|
+
In a Next.js environment, import from the `/next` path. `Sidebar` uses `next/link`, so always use this path.
|
|
89
|
+
|
|
72
90
|
```tsx
|
|
73
|
-
|
|
91
|
+
// app/layout.tsx
|
|
92
|
+
import { Sidebar } from '@bigtablet/design-system/next';
|
|
74
93
|
import '@bigtablet/design-system/style.css';
|
|
75
94
|
|
|
76
|
-
|
|
95
|
+
const navItems = [
|
|
96
|
+
{ label: 'Home', href: '/home', icon: HomeIcon },
|
|
97
|
+
{
|
|
98
|
+
type: 'group' as const,
|
|
99
|
+
id: 'settings',
|
|
100
|
+
label: 'Settings',
|
|
101
|
+
icon: SettingsIcon,
|
|
102
|
+
children: [
|
|
103
|
+
{ label: 'Profile', href: '/settings/profile' },
|
|
104
|
+
{ label: 'Security', href: '/settings/security' },
|
|
105
|
+
],
|
|
106
|
+
},
|
|
107
|
+
];
|
|
108
|
+
|
|
109
|
+
export default function Layout({ children }: { children: React.ReactNode }) {
|
|
77
110
|
return (
|
|
78
|
-
<div>
|
|
79
|
-
<Sidebar items={
|
|
80
|
-
<main>{children}</main>
|
|
111
|
+
<div style={{ display: 'flex' }}>
|
|
112
|
+
<Sidebar items={navItems} activePath="/home" />
|
|
113
|
+
<main style={{ flex: 1 }}>{children}</main>
|
|
81
114
|
</div>
|
|
82
115
|
);
|
|
83
116
|
}
|
|
84
117
|
```
|
|
85
118
|
|
|
119
|
+
### Provider Setup
|
|
120
|
+
|
|
121
|
+
`Alert` and `Toast` require Providers to be added at the root of your app.
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
// app/layout.tsx or _app.tsx
|
|
125
|
+
import { AlertProvider, ToastProvider } from '@bigtablet/design-system';
|
|
126
|
+
|
|
127
|
+
export default function RootLayout({ children }) {
|
|
128
|
+
return (
|
|
129
|
+
<html>
|
|
130
|
+
<body>
|
|
131
|
+
<AlertProvider>
|
|
132
|
+
<ToastProvider />
|
|
133
|
+
{children}
|
|
134
|
+
</AlertProvider>
|
|
135
|
+
</body>
|
|
136
|
+
</html>
|
|
137
|
+
);
|
|
138
|
+
}
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
```tsx
|
|
142
|
+
// Usage example
|
|
143
|
+
import { useAlert } from '@bigtablet/design-system';
|
|
144
|
+
|
|
145
|
+
function MyComponent() {
|
|
146
|
+
const { showAlert } = useAlert();
|
|
147
|
+
|
|
148
|
+
return (
|
|
149
|
+
<Button
|
|
150
|
+
onClick={() =>
|
|
151
|
+
showAlert({
|
|
152
|
+
title: 'Delete',
|
|
153
|
+
message: 'Are you sure you want to delete this?',
|
|
154
|
+
showCancel: true,
|
|
155
|
+
onConfirm: () => console.log('Deleted'),
|
|
156
|
+
})
|
|
157
|
+
}
|
|
158
|
+
>
|
|
159
|
+
Delete
|
|
160
|
+
</Button>
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
```
|
|
164
|
+
|
|
86
165
|
### Vanilla JS (HTML/CSS/JS)
|
|
87
166
|
|
|
167
|
+
For non-React environments (Thymeleaf, JSP, PHP, etc.), use directly via CDN.
|
|
168
|
+
|
|
88
169
|
```html
|
|
89
170
|
<link rel="stylesheet" href="https://unpkg.com/@bigtablet/design-system/dist/vanilla/bigtablet.min.css">
|
|
90
171
|
<script src="https://unpkg.com/@bigtablet/design-system/dist/vanilla/bigtablet.min.js"></script>
|
|
91
172
|
|
|
92
|
-
|
|
173
|
+
<!-- Button -->
|
|
174
|
+
<button class="bt-button bt-button--md bt-button--primary">Primary</button>
|
|
175
|
+
<button class="bt-button bt-button--md bt-button--secondary">Secondary</button>
|
|
176
|
+
|
|
177
|
+
<!-- TextField -->
|
|
178
|
+
<div class="bt-text-field">
|
|
179
|
+
<label class="bt-text-field__label">Name</label>
|
|
180
|
+
<div class="bt-text-field__wrap">
|
|
181
|
+
<input type="text" class="bt-text-field__input bt-text-field__input--outline bt-text-field__input--md" placeholder="Enter text...">
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<!-- Alert (JS API) -->
|
|
186
|
+
<script>
|
|
187
|
+
Bigtablet.Alert({
|
|
188
|
+
title: 'Confirm',
|
|
189
|
+
message: 'Do you want to continue?',
|
|
190
|
+
showCancel: true,
|
|
191
|
+
onConfirm: () => console.log('Confirmed'),
|
|
192
|
+
});
|
|
193
|
+
</script>
|
|
93
194
|
```
|
|
94
195
|
|
|
95
196
|
---
|
|
96
197
|
|
|
97
|
-
##
|
|
198
|
+
## Components
|
|
98
199
|
|
|
99
200
|
| Category | Components |
|
|
100
201
|
|----------|------------|
|
|
101
|
-
| **General** | Button
|
|
102
|
-
| **Form** | TextField
|
|
103
|
-
| **Feedback** | Alert
|
|
104
|
-
| **Navigation** | Pagination
|
|
105
|
-
| **Overlay** | Modal |
|
|
106
|
-
| **Display** | Card |
|
|
202
|
+
| **General** | `Button`, `Select` |
|
|
203
|
+
| **Form** | `TextField`, `Checkbox`, `Radio`, `Switch`, `DatePicker`, `FileInput` |
|
|
204
|
+
| **Feedback** | `Alert`, `Toast`, `Spinner`, `TopLoading` |
|
|
205
|
+
| **Navigation** | `Pagination`, `Sidebar` |
|
|
206
|
+
| **Overlay** | `Modal` |
|
|
207
|
+
| **Display** | `Card` |
|
|
208
|
+
|
|
209
|
+
👉 **[Full Component Docs](./docs/COMPONENTS.md)**
|
|
210
|
+
|
|
211
|
+
---
|
|
212
|
+
|
|
213
|
+
## Design Tokens
|
|
214
|
+
|
|
215
|
+
SCSS tokens and CSS custom properties are provided for a consistent design.
|
|
216
|
+
|
|
217
|
+
```scss
|
|
218
|
+
// SCSS
|
|
219
|
+
@use "src/styles/scss/token" as token;
|
|
220
|
+
|
|
221
|
+
.my-component {
|
|
222
|
+
color: token.$color_text_primary;
|
|
223
|
+
padding: token.$spacing_md;
|
|
224
|
+
border-radius: token.$radius_md;
|
|
225
|
+
}
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
```css
|
|
229
|
+
/* CSS Custom Properties */
|
|
230
|
+
.my-component {
|
|
231
|
+
color: var(--bt-color-text-primary);
|
|
232
|
+
padding: var(--bt-spacing-md);
|
|
233
|
+
border-radius: var(--bt-radius-md);
|
|
234
|
+
}
|
|
235
|
+
```
|
|
107
236
|
|
|
108
|
-
|
|
237
|
+
Main token categories: `colors`, `spacing`, `typography`, `radius`, `shadows`, `motion`, `z-index`, `breakpoints`
|
|
109
238
|
|
|
110
239
|
---
|
|
111
240
|
|
|
112
|
-
##
|
|
241
|
+
## Documentation
|
|
113
242
|
|
|
114
|
-
|
|
|
115
|
-
|
|
116
|
-
| [Components](./docs/COMPONENTS.md) |
|
|
117
|
-
| [Vanilla JS](./docs/VANILLA.md) |
|
|
118
|
-
| [Architecture](./docs/ARCHITECTURE.md) |
|
|
119
|
-
| [Contributing](./docs/CONTRIBUTING.md) |
|
|
120
|
-
| [Testing](./docs/TESTING.md) |
|
|
243
|
+
| Document | Description |
|
|
244
|
+
|----------|-------------|
|
|
245
|
+
| [Components](./docs/COMPONENTS.md) | Component Props API & usage examples |
|
|
246
|
+
| [Vanilla JS](./docs/VANILLA.md) | Integration guide for non-React environments |
|
|
247
|
+
| [Architecture](./docs/ARCHITECTURE.md) | Project structure & design principles |
|
|
248
|
+
| [Contributing](./docs/CONTRIBUTING.md) | Dev setup & contribution guide |
|
|
249
|
+
| [Testing](./docs/TESTING.md) | Test writing patterns & guide |
|
|
121
250
|
|
|
122
251
|
---
|
|
123
252
|
|
|
124
|
-
##
|
|
253
|
+
## Development
|
|
125
254
|
|
|
126
255
|
```bash
|
|
127
|
-
pnpm install #
|
|
128
|
-
pnpm storybook # Storybook
|
|
129
|
-
pnpm build #
|
|
130
|
-
pnpm
|
|
256
|
+
pnpm install # Install dependencies
|
|
257
|
+
pnpm storybook # Start Storybook (port 6006)
|
|
258
|
+
pnpm build # Build library
|
|
259
|
+
pnpm dev # Watch mode
|
|
260
|
+
pnpm test # Run tests
|
|
261
|
+
pnpm test:coverage # Coverage report
|
|
131
262
|
```
|
|
132
263
|
|
|
133
|
-
|
|
264
|
+
> Detailed dev setup guide → **[Contributing](./docs/CONTRIBUTING.md)**
|
|
134
265
|
|
|
135
266
|
---
|
|
136
267
|
|
|
137
|
-
##
|
|
268
|
+
## Browser Support
|
|
269
|
+
|
|
270
|
+
| Browser | Version |
|
|
271
|
+
|---------|---------|
|
|
272
|
+
| Chrome | 80+ |
|
|
273
|
+
| Firefox | 75+ |
|
|
274
|
+
| Safari | 13+ |
|
|
275
|
+
| Edge | 80+ |
|
|
276
|
+
|
|
277
|
+
---
|
|
278
|
+
|
|
279
|
+
## License
|
|
138
280
|
|
|
139
281
|
[Bigtablet License](https://github.com/Bigtablet/.github/blob/main/BIGTABLET_LICENSE.md)
|
|
140
282
|
|
|
141
283
|
---
|
|
142
284
|
|
|
143
|
-
|
|
285
|
+
<div align="center">
|
|
144
286
|
|
|
145
|
-
- [
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
- [Issues](https://github.com/Bigtablet/bigtablet-design-system/issues)
|
|
287
|
+
[GitHub](https://github.com/Bigtablet/bigtablet-design-system) · [NPM](https://www.npmjs.com/package/@bigtablet/design-system) · [Storybook](https://bigtablet.github.io/bigtablet-design-system) · [Issues](https://github.com/Bigtablet/bigtablet-design-system/issues)
|
|
288
|
+
|
|
289
|
+
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigtablet/design-system",
|
|
3
|
-
"version": "1.18.
|
|
3
|
+
"version": "1.18.7",
|
|
4
4
|
"description": "Bigtablet Design System UI Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -114,5 +114,12 @@
|
|
|
114
114
|
"publishConfig": {
|
|
115
115
|
"access": "public",
|
|
116
116
|
"registry": "https://registry.npmjs.org/"
|
|
117
|
+
},
|
|
118
|
+
"pnpm": {
|
|
119
|
+
"overrides": {
|
|
120
|
+
"rollup": "^4.59.0",
|
|
121
|
+
"lodash": "^4.17.23",
|
|
122
|
+
"lodash-es": "^4.17.23"
|
|
123
|
+
}
|
|
117
124
|
}
|
|
118
125
|
}
|