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

Sign up to get free protection for your applications and to get access to all the features.
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