@lawkit/ui 0.1.0 → 0.1.1
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 +88 -0
- package/package.json +20 -14
package/README.md
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
# @lawkit/ui
|
|
2
|
+
|
|
3
|
+
Law.ai Design System -- React component library with built-in design tokens.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @lawkit/ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Button, lightThemeClass } from "@lawkit/ui";
|
|
15
|
+
import "@lawkit/ui/style.css";
|
|
16
|
+
|
|
17
|
+
function App() {
|
|
18
|
+
return (
|
|
19
|
+
<div className={lightThemeClass}>
|
|
20
|
+
<Button color="primary" size="medium">
|
|
21
|
+
Click me
|
|
22
|
+
</Button>
|
|
23
|
+
</div>
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
> `lightThemeClass`를 루트에 적용하면 디자인 토큰(색상, 간격, 타이포 등)이 CSS 변수로 주입됩니다.
|
|
29
|
+
|
|
30
|
+
## Components (38+)
|
|
31
|
+
|
|
32
|
+
### Layout & Navigation
|
|
33
|
+
`Tabs` `NavigationTab` `ButtonTab` `ChipsNavigation` `Pagination` `Collapse`
|
|
34
|
+
|
|
35
|
+
### Data Display
|
|
36
|
+
`Card` `DataTable` `ListGroup` `TreeView` `Avatar` `AvatarGroup` `Mention` `Widget` `ProgressBar` `StepBar` `Skeleton` `Spinner`
|
|
37
|
+
|
|
38
|
+
### Form
|
|
39
|
+
`Button` `ButtonGroup` `IconButtonGroup` `Input` `InputGroup` `MultiSelect` `Dropdown` `TagSelect` `NumberInput` `Checkbox` `Radio` `RadioGroup` `Switch` `Slider` `RangeSlider` `DatePicker` `DateRangePicker` `FileUploadArea`
|
|
40
|
+
|
|
41
|
+
### Feedback & Overlay
|
|
42
|
+
`Modal` `SweetAlert` `Toast` `Alert` `Tooltip` `Popover` `InfoPopover` `ChartTooltip` `CalendarPopover`
|
|
43
|
+
|
|
44
|
+
## Theming
|
|
45
|
+
|
|
46
|
+
### Default Theme
|
|
47
|
+
|
|
48
|
+
`lightThemeClass`를 적용하면 기본 테마가 활성화됩니다.
|
|
49
|
+
|
|
50
|
+
### Custom Theme
|
|
51
|
+
|
|
52
|
+
`createLdsThemeVars()`로 브랜드 컬러를 오버라이드할 수 있습니다:
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
import { createLdsThemeVars } from "@lawkit/ui";
|
|
56
|
+
|
|
57
|
+
const customTheme = createLdsThemeVars({
|
|
58
|
+
accentPrimary: "#E91E63",
|
|
59
|
+
accentSuccess: "#4CAF50",
|
|
60
|
+
accentDanger: "#F44336",
|
|
61
|
+
accentWarning: "#FF9800",
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
function App() {
|
|
65
|
+
return (
|
|
66
|
+
<div className={lightThemeClass} style={customTheme}>
|
|
67
|
+
{/* 커스텀 테마 적용 */}
|
|
68
|
+
</div>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## CSS Import
|
|
74
|
+
|
|
75
|
+
반드시 스타일시트를 import 해야 합니다:
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
import "@lawkit/ui/style.css";
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Requirements
|
|
82
|
+
|
|
83
|
+
- React 18.2+ or React 19
|
|
84
|
+
- ES modules (`"type": "module"`)
|
|
85
|
+
|
|
86
|
+
## License
|
|
87
|
+
|
|
88
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lawkit/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "LDS Design System — React component library with design tokens",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -17,12 +17,19 @@
|
|
|
17
17
|
"*.css"
|
|
18
18
|
],
|
|
19
19
|
"files": [
|
|
20
|
-
"dist"
|
|
20
|
+
"dist",
|
|
21
|
+
"README.md"
|
|
21
22
|
],
|
|
22
23
|
"publishConfig": {
|
|
23
24
|
"access": "public"
|
|
24
25
|
},
|
|
25
|
-
"keywords": [
|
|
26
|
+
"keywords": [
|
|
27
|
+
"react",
|
|
28
|
+
"design-system",
|
|
29
|
+
"components",
|
|
30
|
+
"ui",
|
|
31
|
+
"lawkit"
|
|
32
|
+
],
|
|
26
33
|
"repository": {
|
|
27
34
|
"type": "git",
|
|
28
35
|
"url": "https://github.com/cartoonpoet/LDS.git",
|
|
@@ -36,16 +43,7 @@
|
|
|
36
43
|
"dependencies": {
|
|
37
44
|
"@tanstack/react-table": "^8.21.3"
|
|
38
45
|
},
|
|
39
|
-
"scripts": {
|
|
40
|
-
"dev": "vite build --watch",
|
|
41
|
-
"build": "vite build",
|
|
42
|
-
"prepublishOnly": "pnpm run build",
|
|
43
|
-
"lint": "echo \"No lint configured yet\"",
|
|
44
|
-
"check": "tsc --noEmit",
|
|
45
|
-
"test": "vitest run --config vitest.config.ts"
|
|
46
|
-
},
|
|
47
46
|
"devDependencies": {
|
|
48
|
-
"@lds/tokens": "workspace:*",
|
|
49
47
|
"@storybook/react": "^10.2.17",
|
|
50
48
|
"@storybook/react-vite": "^10.2.17",
|
|
51
49
|
"@testing-library/jest-dom": "^6.9.1",
|
|
@@ -62,6 +60,14 @@
|
|
|
62
60
|
"typescript": "^5.9.3",
|
|
63
61
|
"vite": "^7.3.1",
|
|
64
62
|
"vite-plugin-dts": "^4.5.4",
|
|
65
|
-
"vitest": "^4.1.0"
|
|
63
|
+
"vitest": "^4.1.0",
|
|
64
|
+
"@lds/tokens": "0.1.0"
|
|
65
|
+
},
|
|
66
|
+
"scripts": {
|
|
67
|
+
"dev": "vite build --watch",
|
|
68
|
+
"build": "vite build",
|
|
69
|
+
"lint": "echo \"No lint configured yet\"",
|
|
70
|
+
"check": "tsc --noEmit",
|
|
71
|
+
"test": "vitest run --config vitest.config.ts"
|
|
66
72
|
}
|
|
67
|
-
}
|
|
73
|
+
}
|