@lotte-innovate/ui-component-test 0.1.32 → 0.1.34

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.
Files changed (19) hide show
  1. package/README.md +133 -95
  2. package/dist/globals.css +4 -4
  3. package/dist/lib/color/dark.js +1 -1
  4. package/dist/lib/color/light.js +3 -3
  5. package/dist/lib/components/Avatar/index.js +1 -1
  6. package/dist/lib/components/BarChart/index.d.ts +13 -57
  7. package/dist/lib/components/DoughnutChart/index.d.ts +12 -15
  8. package/dist/lib/components/DoughnutChart/index.js +10 -3
  9. package/dist/lib/components/LineChart/index.d.ts +9 -53
  10. package/dist/lib/components/PieChart/index.d.ts +12 -15
  11. package/dist/lib/components/PieChart/index.js +9 -2
  12. package/dist/lib/components/Select/index.js +1 -1
  13. package/dist/lib/components/ToggleSwitch/index.js +1 -1
  14. package/dist/lib/components/Tooltip/index.d.ts +1 -1
  15. package/dist/lib/constants.d.ts +151 -0
  16. package/dist/lib/constants.js +111 -4
  17. package/dist/lib/types.d.ts +58 -0
  18. package/package.json +131 -132
  19. package/public/images/Welcome.png +0 -0
package/README.md CHANGED
@@ -1,95 +1,133 @@
1
- # LOTTE UI COMPONENT LIBRARY
2
-
3
- <div style="padding: 20px;">
4
- <img src="./public/images/Welcome.png" style="width: auto; height: auto;" alt="컴포넌트 이미지입니다."/>
5
- </div>
6
-
7
- ---
8
-
9
- <br />
10
-
11
- ## 목차
12
-
13
- - [Introduction](#introduction)
14
- - [Installation](#installation)
15
- - [Setup](#setup)
16
- - [Usage](#usage)
17
- - [Components](#components)
18
- - [License](#license)
19
-
20
- ## Introduction
21
-
22
- 모든 L-UI 구성 요소를 내보내는 단일 패키지입니다.
23
-
24
- 일관되고 통일된 컴포넌트를 제공하며 사용자 정의 및 재사용 가능합니다.
25
-
26
- 이 라이브러리는 React로 구축된 프로젝트를 지원합니다.
27
-
28
- ## Installation
29
-
30
- 패키지를 설치하기 위해 아래 명령어를 사용합니다.
31
-
32
- ```bash
33
- npm i @lotte-innovate/ui-component-test
34
- ```
35
-
36
- ```bash
37
- yarn add @lotte-innovate/ui-component-test
38
- ```
39
-
40
- ## Setup
41
-
42
- 패키지를 설치한 후 css 스타일을 프로젝트로 가져옵니다.
43
-
44
- 프로젝트 App 진입 파일에 다음 줄을 추가해줍니다.
45
-
46
- ```
47
- import '@lotte-innovate/ui-component-test/dist/globals.css';
48
- ```
49
-
50
- ## Usage
51
-
52
- React 프로젝트에서 컴포넌트를 사용하는 방법에 대한 예시입니다.
53
-
54
- ```javascript
55
- import React from 'react';
56
- import { Button } from '@lotte-innovate/ui-component-test';
57
-
58
- const App = () => {
59
- return (
60
- <div>
61
- <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
62
- </div>
63
- );
64
- };
65
-
66
- export default App;
67
- ```
68
-
69
- 컴포넌트에서 아이콘을 사용하려면, 다음과 같은 방법으로 아이콘을 가져올 수 있습니다.
70
-
71
- ```javascript
72
- import React from 'react';
73
- import { IconButton } from '@lotte-innovate/ui-component-test';
74
- import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
75
-
76
- const App = () => {
77
- return (
78
- <div>
79
- <IconButton>
80
- <MagnifyingGlassIcon />
81
- </IconButton>
82
- </div>
83
- );
84
- };
85
-
86
- export default App;
87
- ```
88
-
89
- ## Components
90
-
91
- 주요 컴포넌트는 이런 이런 종류가 있습니다. (추가 설명 작성 예정)
92
-
93
- ## License
94
-
95
- @lotte
1
+ # LOTTE UI COMPONENT LIBRARY
2
+
3
+ <br />
4
+
5
+ ## 목차
6
+
7
+ - [Introduction](#introduction)
8
+ - [Installation](#installation)
9
+ - [Setup](#setup)
10
+ - [Usage](#usage)
11
+ - [Components](#components)
12
+ - [License](#license)
13
+
14
+ ## Introduction
15
+
16
+ 모든 L-UI 구성 요소를 내보내는 단일 패키지입니다.
17
+
18
+ 일관되고 통일된 컴포넌트를 제공하며 사용자 정의 및 재사용 가능합니다.
19
+
20
+ 이 라이브러리는 React로 구축된 프로젝트를 지원합니다.
21
+
22
+ ## Installation
23
+
24
+ 패키지를 설치하기 위해 아래 명령어를 사용합니다.
25
+
26
+ ```bash
27
+ npm i @lotte-innovate/ui-component-test
28
+ ```
29
+
30
+ ```bash
31
+ yarn add @lotte-innovate/ui-component-test
32
+ ```
33
+
34
+ ## Setup
35
+
36
+ 패키지를 설치한 후 css 스타일을 프로젝트로 가져옵니다.
37
+
38
+ 프로젝트 App 진입 파일에 다음 줄을 추가해줍니다.
39
+
40
+ ```
41
+ import '@lotte-innovate/ui-component-test/dist/globals.css';
42
+ ```
43
+
44
+ ## Usage
45
+
46
+ React 프로젝트에서 컴포넌트를 사용하는 방법에 대한 예시입니다.
47
+
48
+ ```javascript
49
+ import React from 'react';
50
+ import { Button } from '@lotte-innovate/ui-component-test';
51
+
52
+ const App = () => {
53
+ return (
54
+ <div>
55
+ <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
56
+ </div>
57
+ );
58
+ };
59
+
60
+ export default App;
61
+ ```
62
+
63
+ 컴포넌트에서 아이콘을 사용하려면, 다음과 같은 방법으로 아이콘을 가져올 수 있습니다.
64
+
65
+ ```javascript
66
+ import React from 'react';
67
+ import { IconButton } from '@lotte-innovate/ui-component-test';
68
+ import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
69
+
70
+ const App = () => {
71
+ return (
72
+ <div>
73
+ <IconButton>
74
+ <MagnifyingGlassIcon />
75
+ </IconButton>
76
+ </div>
77
+ );
78
+ };
79
+
80
+ export default App;
81
+ ```
82
+
83
+ ## Components
84
+
85
+ <br />
86
+
87
+ <details>
88
+ <summary>컴포넌트 목록</summary>
89
+
90
+ | 구분 | 종류 |
91
+ | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
92
+ | Typography 컴포넌트 | Text, Header |
93
+ | 기본 컴포넌트 | Avatar, Badge, Button, Icon Button, Label |
94
+ | 입력 컴포넌트 | Checkbox, Checkbox Group, Checkbox Cards, Radio, Radio Group, Radio Cards, Select, Slider, Switch, Text Area, Text Field, Toggle, Toggle Group |
95
+ | 네비게이션 컴포넌트 | Menubar, Navigation Menu, Tabs, Tab Nav |
96
+ | 레이아웃 컴포넌트 | Aspeact Ratio, Card, Inset, Scroll Area, Separator, Table |
97
+ | 피드백 컴포넌트 | Alert Dialog, Dialog, Hover Card, Popover, Toast, Tooltip |
98
+ | 로딩 컴포넌트 | Progress, Skeleton, Spinner, |
99
+ | 메뉴 및 선택 컴포넌트 | Context Menu, Dropdown Menu, Segmented Control |
100
+ | 기타 컴포넌트 | Accordian, Callout |
101
+
102
+ </details>
103
+ <details>
104
+ <summary>차트 목록</summary>
105
+
106
+ | 구분 | 종류 |
107
+ | --------- | ------------- |
108
+ | 비교 차트 | Bar, Line |
109
+ | 구성 차트 | Pie, Doughnut |
110
+ | 분포 차트 | Bubble |
111
+ | 관계 차트 | Radar |
112
+
113
+ </details>
114
+
115
+ <details>
116
+ <summary>공통 Props 목록</summary>
117
+
118
+ | name | description | 단계 | option |
119
+ | ---------- | ------------------------------------------------- | -------- | --------------------------------------------- |
120
+ | Color | 27가지 색상을 라이트/다크/알파/알파다크 모드 제공 | 1~12단계 | blue, crimson, teal, orange, purple, amber... |
121
+ | Radius | 컴포넌트의 둥글기 적용 | 5단계 | none, small, medium, large, full |
122
+ | Scaling | 컴포넌트의 비율 | 5단계 | 90%, 95%, 100%, 105%, 110% |
123
+ | Weight | 컴포넌트의 텍스트 굵기 | 4단계 | regular, medium, semibold, bold |
124
+ | Appearance | 컴포넌트의 디자인 스타일 | 6단계 | classic, ghost, outline, soft, solid, surface |
125
+ | Size | 컴포넌트의 크기 | 5단계 | x-small, small, medium, large, x-large |
126
+
127
+ </details>
128
+
129
+ <br />
130
+
131
+ ## License
132
+
133
+ @lotte-innovate