ndcloud-storybook 1.2.1 → 1.2.2-beta.0
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/dist/index.cjs +465 -62
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +102 -1
- package/dist/index.d.ts +102 -1
- package/dist/index.js +452 -62
- package/dist/index.js.map +1 -1
- package/package.json +5 -4
package/dist/index.cjs
CHANGED
|
@@ -1,30 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var react = require('@emotion/react');
|
|
4
|
-
var
|
|
4
|
+
var styled16 = require('@emotion/styled');
|
|
5
5
|
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
6
6
|
|
|
7
7
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var styled16__default = /*#__PURE__*/_interopDefault(styled16);
|
|
10
10
|
|
|
11
11
|
// src/atoms/Button/Button.tsx
|
|
12
|
-
var spin = react.keyframes`
|
|
13
|
-
from { transform: rotate(0deg); }
|
|
14
|
-
to { transform: rotate(360deg); }
|
|
15
|
-
`;
|
|
16
|
-
var Wrapper = styled__default.default.div`
|
|
17
|
-
display: inline-flex;
|
|
18
|
-
align-items: center;
|
|
19
|
-
justify-content: center;
|
|
20
|
-
|
|
21
|
-
svg {
|
|
22
|
-
width: ${({ size = 20 }) => size}px;
|
|
23
|
-
height: ${({ size = 20 }) => size}px;
|
|
24
|
-
animation: ${spin} ${({ speed = "0.75s" }) => speed} linear infinite;
|
|
25
|
-
transform-origin: center;
|
|
26
|
-
}
|
|
27
|
-
`;
|
|
28
12
|
var Spinner = ({
|
|
29
13
|
size = 20,
|
|
30
14
|
speed = "0.75s",
|
|
@@ -53,6 +37,22 @@ var Spinner = ({
|
|
|
53
37
|
}
|
|
54
38
|
) });
|
|
55
39
|
var Spinner_default = Spinner;
|
|
40
|
+
var spin = react.keyframes`
|
|
41
|
+
from { transform: rotate(0deg); }
|
|
42
|
+
to { transform: rotate(360deg); }
|
|
43
|
+
`;
|
|
44
|
+
var Wrapper = styled16__default.default.div`
|
|
45
|
+
display: inline-flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
|
|
49
|
+
svg {
|
|
50
|
+
width: ${({ size = 20 }) => size}px;
|
|
51
|
+
height: ${({ size = 20 }) => size}px;
|
|
52
|
+
animation: ${spin} ${({ speed = "0.75s" }) => speed} linear infinite;
|
|
53
|
+
transform-origin: center;
|
|
54
|
+
}
|
|
55
|
+
`;
|
|
56
56
|
|
|
57
57
|
// src/tokens/colors.ts
|
|
58
58
|
var colors = {
|
|
@@ -61,6 +61,7 @@ var colors = {
|
|
|
61
61
|
// Brand
|
|
62
62
|
primaryGreen: "#7EE896",
|
|
63
63
|
primaryPurple: "#6D65DA",
|
|
64
|
+
primaryBlue: "#55A3BD",
|
|
64
65
|
// Palette
|
|
65
66
|
darkBlue1: "#12131B",
|
|
66
67
|
darkBlue2: "#2A2B33",
|
|
@@ -136,6 +137,17 @@ var FONT_SIZE_KEYS = {
|
|
|
136
137
|
xl: "xl",
|
|
137
138
|
"2xl": "2xl"
|
|
138
139
|
};
|
|
140
|
+
|
|
141
|
+
// src/utils/colorHelpers.ts
|
|
142
|
+
function getOpacity(hexColor, opacity) {
|
|
143
|
+
const hex = hexColor.trim().replace(/^#/, "");
|
|
144
|
+
if (!/^[\da-fA-F]{6}$/.test(hex)) {
|
|
145
|
+
throw new Error(`Invalid hex color: ${hexColor}`);
|
|
146
|
+
}
|
|
147
|
+
const opacityFraction = Math.round(opacity / 100 * 255);
|
|
148
|
+
const alphaHex = opacityFraction.toString(16).padStart(2, "0");
|
|
149
|
+
return `#${hex}${alphaHex}`;
|
|
150
|
+
}
|
|
139
151
|
var Variant = /* @__PURE__ */ ((Variant2) => {
|
|
140
152
|
Variant2["Primary"] = "primary";
|
|
141
153
|
Variant2["Secondary"] = "secondary";
|
|
@@ -153,11 +165,35 @@ var VARIANTS = {
|
|
|
153
165
|
},
|
|
154
166
|
outline: {
|
|
155
167
|
background: colors.backgrounds.transparent,
|
|
156
|
-
border:
|
|
157
|
-
color:
|
|
168
|
+
border: `1px solid ${getOpacity(colors.baseColors.grey2, 10)}`,
|
|
169
|
+
color: getOpacity(colors.baseColors.darkBlue3, 85)
|
|
158
170
|
}
|
|
159
171
|
};
|
|
160
|
-
var
|
|
172
|
+
var Button = ({
|
|
173
|
+
label,
|
|
174
|
+
icon,
|
|
175
|
+
loading,
|
|
176
|
+
disabled,
|
|
177
|
+
className,
|
|
178
|
+
variant = "primary",
|
|
179
|
+
selected,
|
|
180
|
+
...rest
|
|
181
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
182
|
+
StyledButton,
|
|
183
|
+
{
|
|
184
|
+
variant,
|
|
185
|
+
disabled: disabled || loading,
|
|
186
|
+
selected,
|
|
187
|
+
className,
|
|
188
|
+
...rest,
|
|
189
|
+
children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner_default, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
190
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: icon }),
|
|
191
|
+
label
|
|
192
|
+
] })
|
|
193
|
+
}
|
|
194
|
+
);
|
|
195
|
+
var Button_default = Button;
|
|
196
|
+
var StyledButton = styled16__default.default.button`
|
|
161
197
|
display: flex;
|
|
162
198
|
align-items: center;
|
|
163
199
|
justify-content: center;
|
|
@@ -187,46 +223,12 @@ var StyledButton = styled__default.default.button`
|
|
|
187
223
|
pointer-events: ${disabled ? "none" : "auto"};
|
|
188
224
|
|
|
189
225
|
&:focus-visible {
|
|
190
|
-
outline: 2px solid
|
|
226
|
+
outline: 2px solid ${colors.baseColors.primaryBlue};
|
|
191
227
|
outline-offset: 2px;
|
|
192
228
|
}
|
|
193
229
|
`;
|
|
194
230
|
}}
|
|
195
231
|
`;
|
|
196
|
-
var Button = ({
|
|
197
|
-
label,
|
|
198
|
-
icon,
|
|
199
|
-
loading,
|
|
200
|
-
disabled,
|
|
201
|
-
className,
|
|
202
|
-
...rest
|
|
203
|
-
}) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
204
|
-
StyledButton,
|
|
205
|
-
{
|
|
206
|
-
label: "",
|
|
207
|
-
disabled: disabled || loading,
|
|
208
|
-
className,
|
|
209
|
-
...rest,
|
|
210
|
-
children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner_default, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
211
|
-
icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: icon }),
|
|
212
|
-
label
|
|
213
|
-
] })
|
|
214
|
-
}
|
|
215
|
-
);
|
|
216
|
-
var Button_default = Button;
|
|
217
|
-
|
|
218
|
-
// src/utils/colorHelpers.ts
|
|
219
|
-
function getOpacity(hexColor, opacity) {
|
|
220
|
-
const hex = hexColor.trim().replace(/^#/, "");
|
|
221
|
-
if (!/^[\da-fA-F]{6}$/.test(hex)) {
|
|
222
|
-
throw new Error(`Invalid hex color: ${hexColor}`);
|
|
223
|
-
}
|
|
224
|
-
const opacityFraction = Math.round(opacity / 100 * 255);
|
|
225
|
-
const alphaHex = opacityFraction.toString(16).padStart(2, "0");
|
|
226
|
-
return `#${hex}${alphaHex}`;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
// src/atoms/shared/inputStyles.ts
|
|
230
232
|
var defaultPadding = "9px 17px";
|
|
231
233
|
var focusedPadding = "8px 16px";
|
|
232
234
|
var baseInputStyles = react.css`
|
|
@@ -286,7 +288,7 @@ var Input = ({ className, error, warning, ...rest }) => {
|
|
|
286
288
|
return /* @__PURE__ */ jsxRuntime.jsx(StyledInput, { className, error, warning, ...rest });
|
|
287
289
|
};
|
|
288
290
|
var Input_default = Input;
|
|
289
|
-
var StyledInput =
|
|
291
|
+
var StyledInput = styled16__default.default.input`
|
|
290
292
|
${baseInputStyles}
|
|
291
293
|
|
|
292
294
|
${({ error }) => error && errorStyles}
|
|
@@ -300,7 +302,7 @@ var Textarea = ({ className, error, warning, ...rest }) => {
|
|
|
300
302
|
return /* @__PURE__ */ jsxRuntime.jsx(StyledTextarea, { className, error, warning, ...rest });
|
|
301
303
|
};
|
|
302
304
|
var Textarea_default = Textarea;
|
|
303
|
-
var StyledTextarea =
|
|
305
|
+
var StyledTextarea = styled16__default.default.textarea`
|
|
304
306
|
${baseInputStyles}
|
|
305
307
|
resize: vertical;
|
|
306
308
|
min-height: 80px;
|
|
@@ -328,7 +330,7 @@ var Tab = ({
|
|
|
328
330
|
);
|
|
329
331
|
};
|
|
330
332
|
var Tab_default = Tab;
|
|
331
|
-
var StyledTab =
|
|
333
|
+
var StyledTab = styled16__default.default.div`
|
|
332
334
|
display: inline-block;
|
|
333
335
|
padding: 8px 16px;
|
|
334
336
|
user-select: none;
|
|
@@ -349,7 +351,7 @@ var StyledTab = styled__default.default.div`
|
|
|
349
351
|
}
|
|
350
352
|
`}
|
|
351
353
|
`;
|
|
352
|
-
var HelperText =
|
|
354
|
+
var HelperText = styled16__default.default.div`
|
|
353
355
|
margin-top: 4px;
|
|
354
356
|
font-size: ${typography.fontSize.xs}px;
|
|
355
357
|
color: ${({ error, warning }) => {
|
|
@@ -358,6 +360,94 @@ var HelperText = styled__default.default.div`
|
|
|
358
360
|
return colors.baseColors.grey3;
|
|
359
361
|
}};
|
|
360
362
|
`;
|
|
363
|
+
var USER_ROLES = {
|
|
364
|
+
OWNER: "owner",
|
|
365
|
+
EDITOR: "editor",
|
|
366
|
+
VIEWER: "viewer",
|
|
367
|
+
AUDITOR: "auditor"
|
|
368
|
+
};
|
|
369
|
+
var USER_STATUS = {
|
|
370
|
+
INVITED: "invited"
|
|
371
|
+
};
|
|
372
|
+
var getBadgeColor = (role, status) => {
|
|
373
|
+
if (status?.toLowerCase() === USER_STATUS.INVITED) {
|
|
374
|
+
return colors.accents.warning;
|
|
375
|
+
}
|
|
376
|
+
const roleLower = role.toLowerCase();
|
|
377
|
+
switch (roleLower) {
|
|
378
|
+
case USER_ROLES.OWNER:
|
|
379
|
+
return colors.baseColors.primaryGreen;
|
|
380
|
+
case USER_ROLES.EDITOR:
|
|
381
|
+
return colors.baseColors.primaryBlue;
|
|
382
|
+
case USER_ROLES.VIEWER:
|
|
383
|
+
case USER_ROLES.AUDITOR:
|
|
384
|
+
return colors.baseColors.primaryPurple;
|
|
385
|
+
default:
|
|
386
|
+
return colors.baseColors.primaryGreen;
|
|
387
|
+
}
|
|
388
|
+
};
|
|
389
|
+
function GroupBadge({ role, status, children }) {
|
|
390
|
+
const badgeColor = getBadgeColor(role, status);
|
|
391
|
+
const displayText = status?.toLowerCase() === USER_STATUS.INVITED ? "Invited" : children;
|
|
392
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Badge, { badgeColor, children: displayText });
|
|
393
|
+
}
|
|
394
|
+
var Badge = styled16__default.default.div`
|
|
395
|
+
display: inline-flex;
|
|
396
|
+
padding: 8px 28px;
|
|
397
|
+
border-radius: 100px;
|
|
398
|
+
background-color: ${({ badgeColor }) => getOpacity(badgeColor, 20)};
|
|
399
|
+
border: 1px solid ${({ badgeColor }) => badgeColor};
|
|
400
|
+
color: ${({ badgeColor }) => badgeColor};
|
|
401
|
+
font-size: ${FONT_SIZES.s}px;
|
|
402
|
+
font-weight: ${FONT_WEIGHTS.bold};
|
|
403
|
+
text-transform: capitalize;
|
|
404
|
+
`;
|
|
405
|
+
var Badge_default = GroupBadge;
|
|
406
|
+
function UserAvatar({
|
|
407
|
+
initials,
|
|
408
|
+
badgeColor,
|
|
409
|
+
onClick,
|
|
410
|
+
size = 56
|
|
411
|
+
}) {
|
|
412
|
+
if (!initials || !initials.trim()) {
|
|
413
|
+
return null;
|
|
414
|
+
}
|
|
415
|
+
if (onClick) {
|
|
416
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
417
|
+
ProfileAvatar,
|
|
418
|
+
{
|
|
419
|
+
badgeColor,
|
|
420
|
+
size,
|
|
421
|
+
onClick,
|
|
422
|
+
children: initials
|
|
423
|
+
}
|
|
424
|
+
);
|
|
425
|
+
}
|
|
426
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ColourAvatar, { badgeColor, size, children: initials });
|
|
427
|
+
}
|
|
428
|
+
var UserAvatar_default = UserAvatar;
|
|
429
|
+
var ColourAvatar = styled16__default.default.div`
|
|
430
|
+
width: ${({ size }) => typeof size === "number" ? `${size}px` : size === "large" ? "56px" : "40px"};
|
|
431
|
+
height: ${({ size }) => typeof size === "number" ? `${size}px` : size === "large" ? "56px" : "40px"};
|
|
432
|
+
border-radius: 50%;
|
|
433
|
+
background: ${({ badgeColor }) => badgeColor ? getOpacity(badgeColor, 20) : "linear-gradient(90deg, #6d65da 0.08%, #55a3bd 68.44%)"};
|
|
434
|
+
border: ${({ badgeColor }) => badgeColor ? `2px solid ${badgeColor}` : "none"};
|
|
435
|
+
display: flex;
|
|
436
|
+
align-items: center;
|
|
437
|
+
justify-content: center;
|
|
438
|
+
color: ${colors.baseColors.darkBlue1};
|
|
439
|
+
font-size: ${({ size }) => typeof size === "number" ? `${size * 0.325}px` : size === "large" ? `${FONT_SIZES.xs}px` : `${FONT_SIZES.s}px`};
|
|
440
|
+
font-weight: ${FONT_WEIGHTS.normal};
|
|
441
|
+
flex-shrink: 0;
|
|
442
|
+
`;
|
|
443
|
+
var ProfileAvatar = styled16__default.default(ColourAvatar)`
|
|
444
|
+
color: #fff;
|
|
445
|
+
background: ${colors.gradients.gradient1};
|
|
446
|
+
border: none;
|
|
447
|
+
border-radius: 999px;
|
|
448
|
+
line-height: 138%;
|
|
449
|
+
margin-bottom: 12px;
|
|
450
|
+
`;
|
|
361
451
|
var FormField = ({
|
|
362
452
|
id,
|
|
363
453
|
label,
|
|
@@ -395,7 +485,7 @@ var FormField = ({
|
|
|
395
485
|
displayText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
|
|
396
486
|
] });
|
|
397
487
|
};
|
|
398
|
-
var FormFieldWrapper =
|
|
488
|
+
var FormFieldWrapper = styled16__default.default.div`
|
|
399
489
|
display: flex;
|
|
400
490
|
flex-direction: column;
|
|
401
491
|
|
|
@@ -443,7 +533,7 @@ var FormFieldTextarea = ({
|
|
|
443
533
|
displayText && /* @__PURE__ */ jsxRuntime.jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
|
|
444
534
|
] });
|
|
445
535
|
};
|
|
446
|
-
var FormFieldWrapper2 =
|
|
536
|
+
var FormFieldWrapper2 = styled16__default.default.div`
|
|
447
537
|
display: flex;
|
|
448
538
|
flex-direction: column;
|
|
449
539
|
|
|
@@ -454,20 +544,333 @@ var FormFieldWrapper2 = styled__default.default.div`
|
|
|
454
544
|
}
|
|
455
545
|
`;
|
|
456
546
|
var FormFieldTextarea_default = FormFieldTextarea;
|
|
547
|
+
var SearchContainer = styled16__default.default.div`
|
|
548
|
+
width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "208px"};
|
|
549
|
+
`;
|
|
550
|
+
var InputWrapper = styled16__default.default.div`
|
|
551
|
+
position: relative;
|
|
552
|
+
width: 100%;
|
|
553
|
+
display: flex;
|
|
554
|
+
align-items: center;
|
|
555
|
+
`;
|
|
556
|
+
var IconWrapper = styled16__default.default.div`
|
|
557
|
+
position: absolute;
|
|
558
|
+
left: 17px;
|
|
559
|
+
top: 50%;
|
|
560
|
+
transform: translateY(-50%);
|
|
561
|
+
display: flex;
|
|
562
|
+
align-items: center;
|
|
563
|
+
justify-content: center;
|
|
564
|
+
color: ${colors.baseColors.grey3};
|
|
565
|
+
pointer-events: none;
|
|
566
|
+
z-index: 2;
|
|
567
|
+
`;
|
|
568
|
+
var StyledInput2 = styled16__default.default(Input_default)`
|
|
569
|
+
width: 100%;
|
|
570
|
+
padding-right: ${({ hasClearButton }) => hasClearButton ? "32px" : "17px"};
|
|
571
|
+
padding-left: ${({ hasIcon }) => hasIcon ? "44px" : "17px"};
|
|
572
|
+
font-size: ${({ fontSize = "s" }) => `${typography.fontSize[fontSize]}px`};
|
|
573
|
+
position: relative;
|
|
574
|
+
z-index: 1;
|
|
575
|
+
|
|
576
|
+
&:focus {
|
|
577
|
+
padding-left: ${({ hasIcon }) => hasIcon ? "43px" : "16px"};
|
|
578
|
+
}
|
|
579
|
+
`;
|
|
580
|
+
var ClearButton = styled16__default.default.button`
|
|
581
|
+
position: absolute;
|
|
582
|
+
right: 8px;
|
|
583
|
+
top: 50%;
|
|
584
|
+
transform: translateY(-50%);
|
|
585
|
+
background: none;
|
|
586
|
+
border: none;
|
|
587
|
+
cursor: pointer;
|
|
588
|
+
padding: 4px;
|
|
589
|
+
display: flex;
|
|
590
|
+
align-items: center;
|
|
591
|
+
justify-content: center;
|
|
592
|
+
color: ${colors.baseColors.grey3};
|
|
593
|
+
transition: color 0.2s ease;
|
|
594
|
+
z-index: 3;
|
|
595
|
+
|
|
596
|
+
&:hover {
|
|
597
|
+
color: ${colors.baseColors.grey1};
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
&:focus {
|
|
601
|
+
outline: 2px solid ${colors.baseColors.primaryPurple};
|
|
602
|
+
outline-offset: 2px;
|
|
603
|
+
border-radius: 4px;
|
|
604
|
+
}
|
|
605
|
+
`;
|
|
606
|
+
var ClearIcon = styled16__default.default.svg`
|
|
607
|
+
width: 16px;
|
|
608
|
+
height: 16px;
|
|
609
|
+
stroke-width: 2;
|
|
610
|
+
stroke-linecap: round;
|
|
611
|
+
stroke-linejoin: round;
|
|
612
|
+
`;
|
|
613
|
+
function SearchInput({
|
|
614
|
+
value,
|
|
615
|
+
onChange,
|
|
616
|
+
placeholder = "Search...",
|
|
617
|
+
showClearButton = false,
|
|
618
|
+
icon,
|
|
619
|
+
width = "208px",
|
|
620
|
+
fontSize = "s"
|
|
621
|
+
}) {
|
|
622
|
+
const handleChange = (e) => {
|
|
623
|
+
onChange(e.target.value);
|
|
624
|
+
};
|
|
625
|
+
const handleClear = () => {
|
|
626
|
+
onChange("");
|
|
627
|
+
};
|
|
628
|
+
const hasClearButton = showClearButton && !!value;
|
|
629
|
+
const hasIcon = !!icon;
|
|
630
|
+
return /* @__PURE__ */ jsxRuntime.jsx(SearchContainer, { width, children: /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, { children: [
|
|
631
|
+
hasIcon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: icon }),
|
|
632
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
633
|
+
StyledInput2,
|
|
634
|
+
{
|
|
635
|
+
type: "text",
|
|
636
|
+
placeholder,
|
|
637
|
+
value,
|
|
638
|
+
onChange: handleChange,
|
|
639
|
+
autoComplete: "off",
|
|
640
|
+
hasClearButton,
|
|
641
|
+
hasIcon,
|
|
642
|
+
fontSize
|
|
643
|
+
}
|
|
644
|
+
),
|
|
645
|
+
hasClearButton && /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { onClick: handleClear, type: "button", "aria-label": "Clear search", children: /* @__PURE__ */ jsxRuntime.jsxs(ClearIcon, { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: [
|
|
646
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
647
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
648
|
+
] }) })
|
|
649
|
+
] }) });
|
|
650
|
+
}
|
|
651
|
+
var SearchInput_default = SearchInput;
|
|
652
|
+
function TableElement({ children, ...rest }) {
|
|
653
|
+
return /* @__PURE__ */ jsxRuntime.jsx(StyledTable, { ...rest, children });
|
|
654
|
+
}
|
|
655
|
+
var Table_default = TableElement;
|
|
656
|
+
var StyledTable = styled16__default.default.table`
|
|
657
|
+
width: 100%;
|
|
658
|
+
border-collapse: separate;
|
|
659
|
+
border-spacing: 0 4px;
|
|
660
|
+
`;
|
|
661
|
+
function TableHeader({ alignRight, children, ...rest }) {
|
|
662
|
+
return /* @__PURE__ */ jsxRuntime.jsx(StyledTableHeader, { alignRight, ...rest, children });
|
|
663
|
+
}
|
|
664
|
+
var TableHeader_default = TableHeader;
|
|
665
|
+
var StyledTableHeader = styled16__default.default.th`
|
|
666
|
+
padding-bottom: 12px;
|
|
667
|
+
text-align: ${({ alignRight }) => alignRight ? "right" : "left"};
|
|
668
|
+
font-size: ${FONT_SIZES.xs}px;
|
|
669
|
+
font-weight: ${FONT_WEIGHTS.bold};
|
|
670
|
+
padding-left: ${({ alignRight }) => alignRight ? "0" : "24px"};
|
|
671
|
+
padding-right: ${({ alignRight }) => alignRight ? "60px" : "0"};
|
|
672
|
+
`;
|
|
673
|
+
function TableCell({ children, colSpan, ...rest }) {
|
|
674
|
+
return /* @__PURE__ */ jsxRuntime.jsx(StyledTableCell, { colSpan, ...rest, children });
|
|
675
|
+
}
|
|
676
|
+
var TableCell_default = TableCell;
|
|
677
|
+
var StyledTableCell = styled16__default.default.td`
|
|
678
|
+
|
|
679
|
+
`;
|
|
680
|
+
function TableRow({ children, ...rest }) {
|
|
681
|
+
return /* @__PURE__ */ jsxRuntime.jsx(StyledTableRow, { ...rest, children });
|
|
682
|
+
}
|
|
683
|
+
var TableRow_default = TableRow;
|
|
684
|
+
var StyledTableRow = styled16__default.default.tr`
|
|
685
|
+
/* Base row styling */
|
|
686
|
+
`;
|
|
687
|
+
var TableRowWrapper = styled16__default.default.div`
|
|
688
|
+
border-radius: 6px;
|
|
689
|
+
border: 1px solid ${colors.baseColors.grey7};
|
|
690
|
+
display: flex;
|
|
691
|
+
align-items: center;
|
|
692
|
+
justify-content: space-between;
|
|
693
|
+
padding: 12px 24px;
|
|
694
|
+
`;
|
|
695
|
+
var CheckboxWrapper = styled16__default.default.div`
|
|
696
|
+
display: flex;
|
|
697
|
+
align-items: center;
|
|
698
|
+
`;
|
|
699
|
+
var ActionsWrapper = styled16__default.default.div`
|
|
700
|
+
display: flex;
|
|
701
|
+
align-items: center;
|
|
702
|
+
justify-content: flex-end;
|
|
703
|
+
`;
|
|
704
|
+
var AlignedTableCell = styled16__default.default(TableCell_default)`
|
|
705
|
+
padding-top: 12px;
|
|
706
|
+
padding-bottom: 12px;
|
|
707
|
+
padding-left: ${({ alignRight }) => alignRight ? "0" : "24px"};
|
|
708
|
+
padding-right: ${({ alignRight }) => alignRight ? "60px" : "0"};
|
|
709
|
+
text-align: ${({ alignRight }) => alignRight ? "right" : "left"};
|
|
710
|
+
border: 1px solid ${colors.baseColors.grey7};
|
|
711
|
+
border-right: ${({ isLast }) => isLast ? `1px solid ${colors.baseColors.grey7}` : "none"};
|
|
712
|
+
border-left: ${({ isFirst }) => isFirst ? `1px solid ${colors.baseColors.grey7}` : "none"};
|
|
713
|
+
${({ isFirst }) => isFirst && `border-top-left-radius: 6px; border-bottom-left-radius: 6px;`}
|
|
714
|
+
${({ isLast }) => isLast && `border-top-right-radius: 6px; border-bottom-right-radius: 6px;`}
|
|
715
|
+
`;
|
|
716
|
+
var CellContent = styled16__default.default.div`
|
|
717
|
+
display: flex;
|
|
718
|
+
align-items: center;
|
|
719
|
+
justify-content: ${({ alignRight }) => alignRight ? "flex-end" : "flex-start"};
|
|
720
|
+
flex: ${({ alignRight }) => alignRight ? "0 0 auto" : "1"};
|
|
721
|
+
min-width: 0;
|
|
722
|
+
`;
|
|
723
|
+
var TableWrapper = styled16__default.default.div`
|
|
724
|
+
margin-top: 32px;
|
|
725
|
+
`;
|
|
726
|
+
var EmptyState = styled16__default.default.div`
|
|
727
|
+
padding: 24px;
|
|
728
|
+
text-align: center;
|
|
729
|
+
display: flex;
|
|
730
|
+
flex-direction: column;
|
|
731
|
+
gap: 8px;
|
|
732
|
+
`;
|
|
733
|
+
var EmptyHeader = styled16__default.default.div`
|
|
734
|
+
font-size: 26px;
|
|
735
|
+
font-weight: 700;
|
|
736
|
+
color: ${colors.baseColors.darkBlue1};
|
|
737
|
+
`;
|
|
738
|
+
var EmptySubheader = styled16__default.default.div`
|
|
739
|
+
font-size: 12px;
|
|
740
|
+
font-weight: 500;
|
|
741
|
+
color: ${colors.baseColors.grey3};
|
|
742
|
+
`;
|
|
743
|
+
function getCellContent(column, row, rowIndex) {
|
|
744
|
+
if (column.renderCell) {
|
|
745
|
+
return column.renderCell(row, rowIndex);
|
|
746
|
+
}
|
|
747
|
+
if (column.accessor) {
|
|
748
|
+
if (typeof column.accessor === "function") {
|
|
749
|
+
return column.accessor(row);
|
|
750
|
+
}
|
|
751
|
+
return String(row[column.accessor] ?? "");
|
|
752
|
+
}
|
|
753
|
+
return null;
|
|
754
|
+
}
|
|
755
|
+
function getTotalColumns(columns, showCheckboxes, renderActions) {
|
|
756
|
+
return columns.length + (showCheckboxes ? 1 : 0) + (renderActions ? 1 : 0);
|
|
757
|
+
}
|
|
758
|
+
function Table({
|
|
759
|
+
data,
|
|
760
|
+
columns,
|
|
761
|
+
getRowKey,
|
|
762
|
+
emptyMessage,
|
|
763
|
+
emptyHeader,
|
|
764
|
+
emptySubheader,
|
|
765
|
+
showCheckboxes = false,
|
|
766
|
+
onSelectAll,
|
|
767
|
+
onSelectRow,
|
|
768
|
+
selectedRows = /* @__PURE__ */ new Set(),
|
|
769
|
+
renderActions,
|
|
770
|
+
rowLayout = "aligned"
|
|
771
|
+
}) {
|
|
772
|
+
const getKey = getRowKey || ((row, index) => index);
|
|
773
|
+
const allSelected = data.length > 0 && data.every((row, idx) => selectedRows.has(getKey(row, idx)));
|
|
774
|
+
const someSelected = data.some((row, idx) => selectedRows.has(getKey(row, idx)));
|
|
775
|
+
const totalColumns = getTotalColumns(columns, showCheckboxes, renderActions);
|
|
776
|
+
const handleSelectAll = (e) => {
|
|
777
|
+
onSelectAll?.(e.target.checked);
|
|
778
|
+
};
|
|
779
|
+
const handleSelectRow = (row, e) => {
|
|
780
|
+
onSelectRow?.(row, e.target.checked);
|
|
781
|
+
};
|
|
782
|
+
return /* @__PURE__ */ jsxRuntime.jsx(TableWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table_default, { children: [
|
|
783
|
+
/* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow_default, { children: [
|
|
784
|
+
showCheckboxes && /* @__PURE__ */ jsxRuntime.jsx(TableHeader_default, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
785
|
+
"input",
|
|
786
|
+
{
|
|
787
|
+
type: "checkbox",
|
|
788
|
+
checked: allSelected,
|
|
789
|
+
ref: (input) => {
|
|
790
|
+
if (input) input.indeterminate = someSelected && !allSelected;
|
|
791
|
+
},
|
|
792
|
+
onChange: handleSelectAll,
|
|
793
|
+
"aria-label": "Select all rows"
|
|
794
|
+
}
|
|
795
|
+
) }),
|
|
796
|
+
columns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsx(TableHeader_default, { alignRight: column.alignRight, children: column.label }, index)),
|
|
797
|
+
renderActions && /* @__PURE__ */ jsxRuntime.jsx(TableHeader_default, { alignRight: true, children: " " })
|
|
798
|
+
] }) }),
|
|
799
|
+
/* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow_default, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell_default, { colSpan: totalColumns, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: emptyHeader ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
800
|
+
/* @__PURE__ */ jsxRuntime.jsx(EmptyHeader, { children: emptyHeader }),
|
|
801
|
+
emptySubheader && /* @__PURE__ */ jsxRuntime.jsx(EmptySubheader, { children: emptySubheader })
|
|
802
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: emptyMessage || "No data found" }) }) }) }) : data.map((row, rowIndex) => {
|
|
803
|
+
const rowKey = getKey(row, rowIndex);
|
|
804
|
+
const isSelected = selectedRows.has(rowKey);
|
|
805
|
+
if (rowLayout === "spaced") {
|
|
806
|
+
return /* @__PURE__ */ jsxRuntime.jsx(TableRow_default, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell_default, { colSpan: totalColumns, children: /* @__PURE__ */ jsxRuntime.jsxs(TableRowWrapper, { children: [
|
|
807
|
+
showCheckboxes && /* @__PURE__ */ jsxRuntime.jsx(CheckboxWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
808
|
+
"input",
|
|
809
|
+
{
|
|
810
|
+
type: "checkbox",
|
|
811
|
+
checked: isSelected,
|
|
812
|
+
onChange: (e) => handleSelectRow(row, e),
|
|
813
|
+
"aria-label": `Select row ${rowIndex + 1}`
|
|
814
|
+
}
|
|
815
|
+
) }),
|
|
816
|
+
columns.map((column, colIndex) => {
|
|
817
|
+
const cellContent = getCellContent(column, row, rowIndex);
|
|
818
|
+
const isLast = colIndex === columns.length - 1 && !renderActions;
|
|
819
|
+
return /* @__PURE__ */ jsxRuntime.jsx(CellContent, { alignRight: column.alignRight, isLast, children: cellContent }, colIndex);
|
|
820
|
+
}),
|
|
821
|
+
renderActions && /* @__PURE__ */ jsxRuntime.jsx(ActionsWrapper, { children: renderActions(row, rowIndex) })
|
|
822
|
+
] }) }) }, rowKey);
|
|
823
|
+
} else {
|
|
824
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(TableRow_default, { children: [
|
|
825
|
+
showCheckboxes && /* @__PURE__ */ jsxRuntime.jsx(AlignedTableCell, { isFirst: true, isLast: totalColumns === 1, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
826
|
+
"input",
|
|
827
|
+
{
|
|
828
|
+
type: "checkbox",
|
|
829
|
+
checked: isSelected,
|
|
830
|
+
onChange: (e) => handleSelectRow(row, e),
|
|
831
|
+
"aria-label": `Select row ${rowIndex + 1}`
|
|
832
|
+
}
|
|
833
|
+
) }),
|
|
834
|
+
columns.map((column, colIndex) => {
|
|
835
|
+
const cellContent = getCellContent(column, row, rowIndex);
|
|
836
|
+
const isFirst = !showCheckboxes && colIndex === 0;
|
|
837
|
+
const isLast = !renderActions && colIndex === columns.length - 1;
|
|
838
|
+
return /* @__PURE__ */ jsxRuntime.jsx(AlignedTableCell, { alignRight: column.alignRight, isFirst, isLast, children: cellContent }, colIndex);
|
|
839
|
+
}),
|
|
840
|
+
renderActions && /* @__PURE__ */ jsxRuntime.jsx(AlignedTableCell, { alignRight: true, isLast: true, children: renderActions(row, rowIndex) })
|
|
841
|
+
] }, rowKey);
|
|
842
|
+
}
|
|
843
|
+
}) })
|
|
844
|
+
] }) });
|
|
845
|
+
}
|
|
846
|
+
var DataTable_default = Table;
|
|
457
847
|
|
|
848
|
+
exports.Badge = Badge_default;
|
|
458
849
|
exports.Button = Button_default;
|
|
459
850
|
exports.FONT_SIZES = FONT_SIZES;
|
|
460
851
|
exports.FONT_SIZE_KEYS = FONT_SIZE_KEYS;
|
|
461
852
|
exports.FONT_WEIGHTS = FONT_WEIGHTS;
|
|
462
853
|
exports.FormField = FormField_default;
|
|
463
854
|
exports.FormFieldTextarea = FormFieldTextarea_default;
|
|
855
|
+
exports.GroupBadge = GroupBadge;
|
|
464
856
|
exports.HelperText = HelperText;
|
|
465
857
|
exports.Input = Input_default;
|
|
466
858
|
exports.Label = Label_default;
|
|
859
|
+
exports.SearchInput = SearchInput_default;
|
|
467
860
|
exports.Tab = Tab_default;
|
|
861
|
+
exports.Table = DataTable_default;
|
|
862
|
+
exports.TableCell = TableCell_default;
|
|
863
|
+
exports.TableElement = Table_default;
|
|
864
|
+
exports.TableHeader = TableHeader_default;
|
|
865
|
+
exports.TableRow = TableRow_default;
|
|
866
|
+
exports.TableRowWrapper = TableRowWrapper;
|
|
468
867
|
exports.Textarea = Textarea_default;
|
|
868
|
+
exports.USER_ROLES = USER_ROLES;
|
|
869
|
+
exports.USER_STATUS = USER_STATUS;
|
|
870
|
+
exports.UserAvatar = UserAvatar_default;
|
|
469
871
|
exports.Variant = Variant;
|
|
470
872
|
exports.colors = colors;
|
|
873
|
+
exports.getBadgeColor = getBadgeColor;
|
|
471
874
|
exports.getOpacity = getOpacity;
|
|
472
875
|
exports.typography = typography;
|
|
473
876
|
//# sourceMappingURL=index.cjs.map
|