@ayseaistudio/ui-components 1.0.0 → 1.0.2
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 +97 -0
- package/dist/Label/Label.d.ts +33 -0
- package/dist/Label/Label.js +67 -0
- package/dist/Label/index.d.ts +1 -0
- package/dist/Label/index.js +1 -0
- package/dist/Label/style.css +251 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# @ayseaistudio/ui-components
|
|
2
|
+
|
|
3
|
+
Reusable UI component library for **AISTUDIO** projects.
|
|
4
|
+
Includes ready-to-use components like buttons and other UI elements.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## 🚀 Installation
|
|
9
|
+
|
|
10
|
+
Install the package in your React project:
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @ayseaistudio/ui-components
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
If you encounter a React version conflict, use:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @ayseaistudio/ui-components --legacy-peer-deps
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## 🛠️ Development & Publishing Workflow
|
|
25
|
+
|
|
26
|
+
Follow these steps whenever you add a new component or make changes:
|
|
27
|
+
|
|
28
|
+
### 1️⃣ Build the project
|
|
29
|
+
|
|
30
|
+
Compile TypeScript source files into JavaScript:
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npx tsc
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### 2️⃣ Copy CSS files to the `dist/` folder
|
|
37
|
+
|
|
38
|
+
Ensure that all component styles are available after build:
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npx cpy "src/**/*.css" dist/
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 3️⃣ Increase the package version
|
|
45
|
+
|
|
46
|
+
Each publish requires a **new version**. Choose one of the following depending on the change type:
|
|
47
|
+
|
|
48
|
+
```bash
|
|
49
|
+
npm version patch # for small fixes (1.0.0 → 1.0.1)
|
|
50
|
+
npm version minor # for new components (1.0.0 → 1.1.0)
|
|
51
|
+
npm version major # for breaking changes (1.0.0 → 2.0.0)
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### 4️⃣ Publish to npm
|
|
55
|
+
|
|
56
|
+
Publish the new version publicly:
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
npm publish --access public
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
⚠️ Make sure you are logged in to npm as **ayseaistudio**:
|
|
63
|
+
|
|
64
|
+
```bash
|
|
65
|
+
npm whoami
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
## 🧪 Local Testing (Before Publishing)
|
|
72
|
+
|
|
73
|
+
If you want to test the package locally in another project:
|
|
74
|
+
|
|
75
|
+
### In the `UIComponents` project:
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
npm link
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### In your target project:
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
npm link @ayseaistudio/ui-components
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
This allows you to import the local version without publishing.
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
### To login npm:
|
|
92
|
+
|
|
93
|
+
Username: ayseaistudio
|
|
94
|
+
email: ayse.kalkan@aistudio.com.tr
|
|
95
|
+
Password: AIstudio1.
|
|
96
|
+
|
|
97
|
+
---
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
import "./style.css";
|
|
4
|
+
interface Props {
|
|
5
|
+
text?: string;
|
|
6
|
+
title?: string;
|
|
7
|
+
leftIcon?: React.JSX.Element;
|
|
8
|
+
rightIcon?: React.JSX.Element;
|
|
9
|
+
size: "large" | "x-large" | "medium" | "small";
|
|
10
|
+
color: "mauve" | "lime" | "black" | "zest" | "blue" | "orange" | "galliano" | "green" | "invert" | "red";
|
|
11
|
+
version?: "primary" | "secondary";
|
|
12
|
+
stroke?: "off" | "on";
|
|
13
|
+
bold?: "off" | "on";
|
|
14
|
+
spacing?: "off" | "on";
|
|
15
|
+
className: any;
|
|
16
|
+
}
|
|
17
|
+
export declare const Label: {
|
|
18
|
+
({ text, title, leftIcon, rightIcon, size, color, version, stroke, bold, spacing, className, }: Props): React.JSX.Element;
|
|
19
|
+
propTypes: {
|
|
20
|
+
text: PropTypes.Requireable<string>;
|
|
21
|
+
title: PropTypes.Requireable<string>;
|
|
22
|
+
withLeftIcon: PropTypes.Requireable<boolean>;
|
|
23
|
+
withRightIcon: PropTypes.Requireable<boolean>;
|
|
24
|
+
withText: PropTypes.Requireable<boolean>;
|
|
25
|
+
size: PropTypes.Requireable<string>;
|
|
26
|
+
color: PropTypes.Requireable<string>;
|
|
27
|
+
version: PropTypes.Requireable<string>;
|
|
28
|
+
stroke: PropTypes.Requireable<string>;
|
|
29
|
+
bold: PropTypes.Requireable<string>;
|
|
30
|
+
spacing: PropTypes.Requireable<string>;
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
export {};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import "./style.css";
|
|
5
|
+
const getIconColor = (version, color) => {
|
|
6
|
+
if (version === "primary" && color === "black") {
|
|
7
|
+
return "#5D5D5D";
|
|
8
|
+
}
|
|
9
|
+
if (version === "secondary") {
|
|
10
|
+
return "#888888";
|
|
11
|
+
}
|
|
12
|
+
const colorMap = {
|
|
13
|
+
lime: "#567C0F",
|
|
14
|
+
mauve: "#A931EC",
|
|
15
|
+
blue: "#7240E7",
|
|
16
|
+
red: "#ED1515",
|
|
17
|
+
orange: "#E44012",
|
|
18
|
+
zest: "#AA4613",
|
|
19
|
+
galliano: "#946414",
|
|
20
|
+
green: "#289140",
|
|
21
|
+
invert: "#EEEEEE",
|
|
22
|
+
black: undefined // This case is handled above
|
|
23
|
+
};
|
|
24
|
+
return colorMap[color];
|
|
25
|
+
};
|
|
26
|
+
const getIconClassName = (size) => {
|
|
27
|
+
const sizeClassMap = {
|
|
28
|
+
"x-large": "class",
|
|
29
|
+
"large": "class-2",
|
|
30
|
+
"medium": "class-3",
|
|
31
|
+
"small": "class-4"
|
|
32
|
+
};
|
|
33
|
+
return sizeClassMap[size] || "";
|
|
34
|
+
};
|
|
35
|
+
export const Label = ({ text, title, leftIcon, rightIcon, size, color, version, stroke = "off", bold, spacing, className, }) => {
|
|
36
|
+
return (_jsxs("div", { className: `label ${size} ${stroke} ${spacing} ${color} ${className}`, title: title, children: [leftIcon && (React.cloneElement(leftIcon, {
|
|
37
|
+
className: getIconClassName(size),
|
|
38
|
+
color: getIconColor(version, color)
|
|
39
|
+
})), text && (_jsx("div", { className: `text-wrapper ${version} bold-${bold} size-${size} color-${color}`, children: text })), rightIcon && (React.cloneElement(rightIcon, {
|
|
40
|
+
className: getIconClassName(size),
|
|
41
|
+
color: getIconColor(version, color)
|
|
42
|
+
}))] }));
|
|
43
|
+
};
|
|
44
|
+
Label.propTypes = {
|
|
45
|
+
text: PropTypes.string,
|
|
46
|
+
title: PropTypes.string,
|
|
47
|
+
withLeftIcon: PropTypes.bool,
|
|
48
|
+
withRightIcon: PropTypes.bool,
|
|
49
|
+
withText: PropTypes.bool,
|
|
50
|
+
size: PropTypes.oneOf(["large", "x-large", "medium", "small"]),
|
|
51
|
+
color: PropTypes.oneOf([
|
|
52
|
+
"mauve",
|
|
53
|
+
"lime",
|
|
54
|
+
"black",
|
|
55
|
+
"zest",
|
|
56
|
+
"blue",
|
|
57
|
+
"orange",
|
|
58
|
+
"galliano",
|
|
59
|
+
"green",
|
|
60
|
+
"invert",
|
|
61
|
+
"red",
|
|
62
|
+
]),
|
|
63
|
+
version: PropTypes.oneOf(["primary", "secondary"]),
|
|
64
|
+
stroke: PropTypes.oneOf(["off", "on"]),
|
|
65
|
+
bold: PropTypes.oneOf(["off", "on"]),
|
|
66
|
+
spacing: PropTypes.oneOf(["off", "on"]),
|
|
67
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Label } from "./Label";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Label } from "./Label";
|
|
@@ -0,0 +1,251 @@
|
|
|
1
|
+
.label {
|
|
2
|
+
align-items: center;
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
position: relative;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.label .class {
|
|
9
|
+
height: 24px !important;
|
|
10
|
+
position: relative !important;
|
|
11
|
+
width: 24px !important;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.label .class-2 {
|
|
15
|
+
height: 20px !important;
|
|
16
|
+
position: relative !important;
|
|
17
|
+
width: 20px !important;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.label .class-3 {
|
|
21
|
+
height: 18px !important;
|
|
22
|
+
position: relative !important;
|
|
23
|
+
width: 18px !important;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.label .class-4 {
|
|
27
|
+
height: 16px !important;
|
|
28
|
+
position: relative !important;
|
|
29
|
+
width: 16px !important;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.label .text-wrapper {
|
|
33
|
+
-webkit-box-orient: vertical;
|
|
34
|
+
-webkit-line-clamp: 1;
|
|
35
|
+
display: -webkit-box;
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
position: relative;
|
|
38
|
+
text-overflow: ellipsis;
|
|
39
|
+
white-space: nowrap;
|
|
40
|
+
width: fit-content;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.label.large {
|
|
44
|
+
gap: 4px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.label.small {
|
|
48
|
+
gap: 4px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.label.x-large {
|
|
52
|
+
gap: 6px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.label.medium {
|
|
56
|
+
gap: 4px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.label.on {
|
|
60
|
+
border: 1px solid;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.label.off {
|
|
64
|
+
border: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.label.on.small {
|
|
68
|
+
padding: 6px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.label.orange.on {
|
|
72
|
+
border-color: #e4401233;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.label.invert.on {
|
|
76
|
+
border-color: #f8f8f81a;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.label.black.on {
|
|
80
|
+
border-color: #e7e7e7;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.label.on.x-large {
|
|
84
|
+
border-radius: 12px;
|
|
85
|
+
padding: 8px;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.label.small.on {
|
|
89
|
+
border-radius: 8px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.label.on.large {
|
|
93
|
+
border-radius: 12px;
|
|
94
|
+
padding: 6px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.label.galliano.on {
|
|
98
|
+
border-color: #b9891533;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.label.zest.on {
|
|
102
|
+
border-color: #cd65124c;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.label.on.medium {
|
|
106
|
+
padding: 6px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.label.mauve.on {
|
|
110
|
+
border-color: #a931ec33;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.label.red.on {
|
|
114
|
+
border-color: #ed151533;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.label.lime.on {
|
|
118
|
+
border-color: #71a30d66;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.label.on.green {
|
|
122
|
+
border-color: #28914033;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.label.medium.on {
|
|
126
|
+
border-radius: 8px;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.label.blue.on {
|
|
130
|
+
border-color: #7240e733;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.label.off.on {
|
|
134
|
+
border-radius: 12px;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.label .secondary {
|
|
138
|
+
color: #888888;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.label .bold-on.size-x-large {
|
|
142
|
+
font-family: var(--h4-bold-font-family);
|
|
143
|
+
font-size: var(--h4-bold-font-size);
|
|
144
|
+
font-style: var(--h4-bold-font-style);
|
|
145
|
+
font-weight: var(--h4-bold-font-weight);
|
|
146
|
+
letter-spacing: var(--h4-bold-letter-spacing);
|
|
147
|
+
line-height: var(--h4-bold-line-height);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.label .primary.color-blue {
|
|
151
|
+
color: #7240e7;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.label .bold-on.size-medium {
|
|
155
|
+
font-family: var(--b1-bold-font-family);
|
|
156
|
+
font-size: var(--b1-bold-font-size);
|
|
157
|
+
font-style: var(--b1-bold-font-style);
|
|
158
|
+
font-weight: var(--b1-bold-font-weight);
|
|
159
|
+
letter-spacing: var(--b1-bold-letter-spacing);
|
|
160
|
+
line-height: var(--b1-bold-line-height);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.label .primary.color-orange {
|
|
164
|
+
color: #e44012;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.label .color-lime.primary {
|
|
168
|
+
color: #567c0f;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.label .size-small.bold-off {
|
|
172
|
+
font-family: var(--b2-medium-font-family);
|
|
173
|
+
font-size: var(--b2-medium-font-size);
|
|
174
|
+
font-style: var(--b2-medium-font-style);
|
|
175
|
+
font-weight: var(--b2-medium-font-weight);
|
|
176
|
+
letter-spacing: var(--b2-medium-letter-spacing);
|
|
177
|
+
line-height: var(--b2-medium-line-height);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.label .primary.color-green {
|
|
181
|
+
color: #289140;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.label .color-invert.primary {
|
|
185
|
+
color: #eeeeee;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.label .size-x-large.bold-off {
|
|
189
|
+
font-family: var(--h4-medium-font-family);
|
|
190
|
+
font-size: var(--h4-medium-font-size);
|
|
191
|
+
font-style: var(--h4-medium-font-style);
|
|
192
|
+
font-weight: var(--h4-medium-font-weight);
|
|
193
|
+
letter-spacing: var(--h4-medium-letter-spacing);
|
|
194
|
+
line-height: var(--h4-medium-line-height);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.label .primary.color-mauve {
|
|
198
|
+
color: #a931ec;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.label .color-red.primary {
|
|
202
|
+
color: #ed1515;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.label .bold-off.size-large {
|
|
206
|
+
font-family: var(--h6-medium-font-family);
|
|
207
|
+
font-size: var(--h6-medium-font-size);
|
|
208
|
+
font-style: var(--h6-medium-font-style);
|
|
209
|
+
font-weight: var(--h6-medium-font-weight);
|
|
210
|
+
letter-spacing: var(--h6-medium-letter-spacing);
|
|
211
|
+
line-height: var(--h6-medium-line-height);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.label .color-galliano.primary {
|
|
215
|
+
color: #946414;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.label .color-zest.primary {
|
|
219
|
+
color: #aa4613;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.label .bold-on.size-small {
|
|
223
|
+
font-family: var(--b2-bold-font-family);
|
|
224
|
+
font-size: var(--b2-bold-font-size);
|
|
225
|
+
font-style: var(--b2-bold-font-style);
|
|
226
|
+
font-weight: var(--b2-bold-font-weight);
|
|
227
|
+
letter-spacing: var(--b2-bold-letter-spacing);
|
|
228
|
+
line-height: var(--b2-bold-line-height);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.label .primary.color-black {
|
|
232
|
+
color: #5d5d5d;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.label .bold-on.size-large {
|
|
236
|
+
font-family: var(--h6-bold-font-family);
|
|
237
|
+
font-size: var(--h6-bold-font-size);
|
|
238
|
+
font-style: var(--h6-bold-font-style);
|
|
239
|
+
font-weight: var(--h6-bold-font-weight);
|
|
240
|
+
letter-spacing: var(--h6-bold-letter-spacing);
|
|
241
|
+
line-height: var(--h6-bold-line-height);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.label .bold-off.size-medium {
|
|
245
|
+
font-family: var(--b1-medium-font-family);
|
|
246
|
+
font-size: var(--b1-medium-font-size);
|
|
247
|
+
font-style: var(--b1-medium-font-style);
|
|
248
|
+
font-weight: var(--b1-medium-font-weight);
|
|
249
|
+
letter-spacing: var(--b1-medium-letter-spacing);
|
|
250
|
+
line-height: var(--b1-medium-line-height);
|
|
251
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,3 +2,4 @@ export { PrimaryButton } from "./PrimaryButton/PrimaryButton";
|
|
|
2
2
|
export { SecondaryButton } from "./SecondaryButton/SecondaryButton";
|
|
3
3
|
export { TertiaryButton } from "./TertiaryButton/TertiaryButton";
|
|
4
4
|
export { SelectionButton } from "./SelectionButton/SelectionButton";
|
|
5
|
+
export { Label } from "./Label/Label";
|
package/dist/index.js
CHANGED
|
@@ -2,3 +2,4 @@ export { PrimaryButton } from "./PrimaryButton/PrimaryButton";
|
|
|
2
2
|
export { SecondaryButton } from "./SecondaryButton/SecondaryButton";
|
|
3
3
|
export { TertiaryButton } from "./TertiaryButton/TertiaryButton";
|
|
4
4
|
export { SelectionButton } from "./SelectionButton/SelectionButton";
|
|
5
|
+
export { Label } from "./Label/Label";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ayseaistudio/ui-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
"dist"
|
|
9
9
|
],
|
|
10
10
|
"peerDependencies": {
|
|
11
|
-
"react": "
|
|
12
|
-
"react-dom": "
|
|
11
|
+
"react": ">=18.0.0",
|
|
12
|
+
"react-dom": ">=18.0.0"
|
|
13
13
|
},
|
|
14
14
|
"scripts": {
|
|
15
15
|
"build": "tsc && cpy \"src/**/*.css\" dist --parents"
|