@platformatic/ui-components 0.13.5 → 0.15.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/dist/assets/index-DjGoNdUR.js +49 -0
- package/dist/index.html +1 -1
- package/index.d.ts +119 -0
- package/package.json +7 -3
- package/src/components/Checkbox.module.css +7 -7
- package/src/components/SplashScreen.jsx +14 -11
- package/src/components/index.d.ts +25 -0
- package/src/stories/Checkbox.stories.jsx +6 -0
- package/test-d/index.test-d.ts +92 -0
- package/tsconfig.json +16 -0
- package/dist/assets/index-k0azWzu3.js +0 -49
package/dist/index.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Platformatic UI Components</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-DjGoNdUR.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-DMinbJlj.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { ComponentType } from "react";
|
|
2
|
+
|
|
3
|
+
declare module "@platformatic/ui-components" {
|
|
4
|
+
export interface VerticalSeparatorProps {
|
|
5
|
+
color?: string;
|
|
6
|
+
backgroundColorOpacity?: string;
|
|
7
|
+
classes?: string;
|
|
8
|
+
height?: string;
|
|
9
|
+
width?: string;
|
|
10
|
+
marginLeft?: string;
|
|
11
|
+
marginRight?: string;
|
|
12
|
+
}
|
|
13
|
+
export const Checkbox: ComponentType<any>;
|
|
14
|
+
export const BorderedBox: ComponentType<any>;
|
|
15
|
+
export const Button: ComponentType<any>;
|
|
16
|
+
export const HorizontalSeparator: ComponentType<any>;
|
|
17
|
+
export const LoadingSpinnerV2: ComponentType<any>;
|
|
18
|
+
export const Tooltip: ComponentType<any>;
|
|
19
|
+
export const VerticalSeparator: ComponentType<VerticalSeparatorProps>;
|
|
20
|
+
export const TooltipAbsolute: ComponentType<any>;
|
|
21
|
+
|
|
22
|
+
export interface PlatformaticIconProps {
|
|
23
|
+
iconName: string;
|
|
24
|
+
color?: string;
|
|
25
|
+
size?: string;
|
|
26
|
+
onClick?: (() => void) | null;
|
|
27
|
+
disabled?: boolean;
|
|
28
|
+
inactive?: boolean;
|
|
29
|
+
className?: string;
|
|
30
|
+
internalOverHandling?: boolean;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export interface CopyAndPasteProps {
|
|
34
|
+
value: unknown;
|
|
35
|
+
tooltipLabel?: string;
|
|
36
|
+
color?: string;
|
|
37
|
+
size?: string;
|
|
38
|
+
tooltipClassName?: string;
|
|
39
|
+
position?: string;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export const PlatformaticIcon: ComponentType<PlatformaticIconProps>;
|
|
43
|
+
export const CopyAndPaste: ComponentType<CopyAndPasteProps>;
|
|
44
|
+
|
|
45
|
+
interface IconProps {
|
|
46
|
+
size?: string;
|
|
47
|
+
color?: string;
|
|
48
|
+
addImportantToColor?: boolean;
|
|
49
|
+
className?: string;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export const Icons: {
|
|
53
|
+
AppIcon: ComponentType<IconProps>;
|
|
54
|
+
AlertIcon: ComponentType<IconProps>;
|
|
55
|
+
ArrowUpIcon: ComponentType<IconProps>;
|
|
56
|
+
ArrowDownIcon: ComponentType<IconProps>;
|
|
57
|
+
CircleCheckMarkIcon: ComponentType<IconProps>;
|
|
58
|
+
CLIIcon: ComponentType<IconProps>;
|
|
59
|
+
[key: string]: ComponentType<IconProps>;
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
interface ToggleSwitchProps {
|
|
63
|
+
label?: string;
|
|
64
|
+
labelClassName?: string;
|
|
65
|
+
name: string;
|
|
66
|
+
onChange: () => void;
|
|
67
|
+
checked: boolean;
|
|
68
|
+
size?: string;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
interface InputProps {
|
|
72
|
+
label?: string;
|
|
73
|
+
placeholder?: string;
|
|
74
|
+
value: string;
|
|
75
|
+
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
76
|
+
name: string;
|
|
77
|
+
type?: string;
|
|
78
|
+
error?: string;
|
|
79
|
+
className?: string;
|
|
80
|
+
disabled?: boolean;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
interface SelectProps {
|
|
84
|
+
label?: string;
|
|
85
|
+
options: Array<{ label: string; value: string }>;
|
|
86
|
+
value: string;
|
|
87
|
+
onChange: (value: string) => void;
|
|
88
|
+
name: string;
|
|
89
|
+
placeholder?: string;
|
|
90
|
+
error?: string;
|
|
91
|
+
className?: string;
|
|
92
|
+
disabled?: boolean;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
interface CheckboxProps {
|
|
96
|
+
label: string;
|
|
97
|
+
checked: boolean;
|
|
98
|
+
onChange: () => void;
|
|
99
|
+
name: string;
|
|
100
|
+
disabled?: boolean;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
interface RadioButtonProps {
|
|
104
|
+
label: string;
|
|
105
|
+
value: string;
|
|
106
|
+
checked: boolean;
|
|
107
|
+
onChange: () => void;
|
|
108
|
+
name: string;
|
|
109
|
+
disabled?: boolean;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
export const Forms: {
|
|
113
|
+
ToggleSwitch: ComponentType<ToggleSwitchProps>;
|
|
114
|
+
Input: ComponentType<InputProps>;
|
|
115
|
+
Select: ComponentType<SelectProps>;
|
|
116
|
+
Checkbox: ComponentType<CheckboxProps>;
|
|
117
|
+
RadioButton: ComponentType<RadioButtonProps>;
|
|
118
|
+
};
|
|
119
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@platformatic/ui-components",
|
|
3
3
|
"description": "Platformatic UI Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.15.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"repository": {
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"tailwind": "tailwindcss -i ./src/styles/main.css -o ./dist/main.css",
|
|
19
19
|
"lint": "standard src | snazzy",
|
|
20
20
|
"lint:fix": "standard src --fix",
|
|
21
|
-
"test": "vitest run",
|
|
21
|
+
"test": "tsd && vitest run",
|
|
22
22
|
"prepare": "rm -Rf dist; npm run build; npm run tailwind"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
"standard": "^17.0.0",
|
|
54
54
|
"storybook": "^8.0.8",
|
|
55
55
|
"tailwindcss": "^3.1.8",
|
|
56
|
+
"tsd": "^0.31.2",
|
|
56
57
|
"vite": "^5.0.0",
|
|
57
58
|
"vitest": "^3.0.0"
|
|
58
59
|
},
|
|
@@ -69,5 +70,8 @@
|
|
|
69
70
|
"pre-commit": [
|
|
70
71
|
"lint",
|
|
71
72
|
"test"
|
|
72
|
-
]
|
|
73
|
+
],
|
|
74
|
+
"tsd": {
|
|
75
|
+
"directory": "test-d"
|
|
76
|
+
}
|
|
73
77
|
}
|
|
@@ -27,15 +27,15 @@
|
|
|
27
27
|
.checkbox--medium.checkbox--main-dark-blue:checked:after,
|
|
28
28
|
.checkbox--medium.checkbox--rich-black:checked:after {
|
|
29
29
|
@apply absolute h-full w-full;
|
|
30
|
-
top:
|
|
31
|
-
left:
|
|
30
|
+
top: -4px;
|
|
31
|
+
left: 1px;
|
|
32
32
|
content: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%204L5%208L12%201%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
|
|
33
33
|
}
|
|
34
34
|
.checkbox--small.checkbox--main-dark-blue:checked:after,
|
|
35
35
|
.checkbox--small.checkbox--rich-black:checked:after {
|
|
36
36
|
@apply absolute h-full w-full;
|
|
37
|
-
top:
|
|
38
|
-
left:
|
|
37
|
+
top: -4px;
|
|
38
|
+
left: 2px;
|
|
39
39
|
content: url('data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%228%22%20viewBox%3D%220%200%2011%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M1.25%203.5L4.25%206.5L9.5%201.25%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3C%2Fsvg%3E');
|
|
40
40
|
}
|
|
41
41
|
.disabled {
|
|
@@ -50,14 +50,14 @@
|
|
|
50
50
|
}
|
|
51
51
|
.checkbox--medium.checkbox--white:checked:after {
|
|
52
52
|
@apply absolute h-full w-full;
|
|
53
|
-
top:
|
|
54
|
-
left:
|
|
53
|
+
top: -4px;
|
|
54
|
+
left: 2px;
|
|
55
55
|
content: url('data:image/svg+xml,%3Csvg%20width=%2213%22%20height=%229%22%20viewBox=%220%200%2013%209%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M1%204L5%208L12%201%22%20stroke%3D%22%2300050B%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E');
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.checkbox--small.checkbox--white:checked:after {
|
|
59
59
|
@apply absolute h-full w-full;
|
|
60
|
-
top: -
|
|
60
|
+
top: -7px;
|
|
61
61
|
left: 0px;
|
|
62
62
|
content: url('data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%228%22%20viewBox%3D%220%200%2011%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M1.25%203.5L4.25%206.5L9.5%201.25%22%20stroke%3D%22%2300050B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3C%2Fsvg%3E');
|
|
63
63
|
}
|
|
@@ -12,7 +12,8 @@ export default function SplashScreen (props) {
|
|
|
12
12
|
title = 'Operation completed',
|
|
13
13
|
blur = false,
|
|
14
14
|
children,
|
|
15
|
-
onDestroyed = () => {}
|
|
15
|
+
onDestroyed = () => {},
|
|
16
|
+
showDismissButton = true
|
|
16
17
|
} = props
|
|
17
18
|
|
|
18
19
|
const [destroyed, setDestroyed] = useState(false)
|
|
@@ -49,16 +50,18 @@ export default function SplashScreen (props) {
|
|
|
49
50
|
{children}
|
|
50
51
|
</div>
|
|
51
52
|
|
|
52
|
-
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
53
|
+
{showDismissButton && (
|
|
54
|
+
<div className={styles.button}>
|
|
55
|
+
<Button
|
|
56
|
+
color={RICH_BLACK}
|
|
57
|
+
backgroundColor={WHITE}
|
|
58
|
+
onClick={() => setDestroyed(true)}
|
|
59
|
+
label='Dismiss'
|
|
60
|
+
paddingClass={styles.buttonPadding}
|
|
61
|
+
textClass={styles.buttonText}
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
64
|
+
)}
|
|
62
65
|
</div>
|
|
63
66
|
</div>
|
|
64
67
|
)
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
declare module "@platformatic/ui-components/src/components/constants" {
|
|
2
|
+
export const WHITE: string;
|
|
3
|
+
export const SMALL: string;
|
|
4
|
+
export const POSITION_END: string;
|
|
5
|
+
export const RICH_BLACK: string;
|
|
6
|
+
export const BLACK_RUSSIAN: string;
|
|
7
|
+
export const TRANSPARENT: string;
|
|
8
|
+
export const MARGIN_0: string;
|
|
9
|
+
export const OPACITY_15: string;
|
|
10
|
+
export const OPACITY_30: string;
|
|
11
|
+
export const OPACITY_100: string;
|
|
12
|
+
export const WARNING_YELLOW: string;
|
|
13
|
+
export const ANTI_FLASH_WHITE: string;
|
|
14
|
+
export const DULLS_BACKGROUND_COLOR: string;
|
|
15
|
+
export const ERROR_RED: string;
|
|
16
|
+
export const LARGE: string;
|
|
17
|
+
export const MEDIUM: string;
|
|
18
|
+
export const MAIN_GREEN: string;
|
|
19
|
+
export const BOX_SHADOW: string;
|
|
20
|
+
export const UNDERLINE: string;
|
|
21
|
+
export const MAIN_DARK_BLUE: string;
|
|
22
|
+
export const DIRECTION_RIGHT: string;
|
|
23
|
+
export const POSITION_CENTER: string;
|
|
24
|
+
export const TINY: string;
|
|
25
|
+
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { expectType, expectAssignable } from "tsd";
|
|
2
|
+
import { ComponentType } from "react";
|
|
3
|
+
import {
|
|
4
|
+
VerticalSeparatorProps,
|
|
5
|
+
Checkbox,
|
|
6
|
+
BorderedBox,
|
|
7
|
+
Button,
|
|
8
|
+
HorizontalSeparator,
|
|
9
|
+
LoadingSpinnerV2,
|
|
10
|
+
Tooltip,
|
|
11
|
+
VerticalSeparator,
|
|
12
|
+
TooltipAbsolute,
|
|
13
|
+
PlatformaticIconProps,
|
|
14
|
+
CopyAndPasteProps,
|
|
15
|
+
PlatformaticIcon,
|
|
16
|
+
CopyAndPaste,
|
|
17
|
+
Icons,
|
|
18
|
+
Forms,
|
|
19
|
+
ToggleSwitchProps,
|
|
20
|
+
InputProps,
|
|
21
|
+
SelectProps,
|
|
22
|
+
CheckboxProps,
|
|
23
|
+
RadioButtonProps,
|
|
24
|
+
IconProps,
|
|
25
|
+
} from "@platformatic/ui-components";
|
|
26
|
+
|
|
27
|
+
// Test that Forms components are properly typed as React ComponentType
|
|
28
|
+
expectType<ComponentType<ToggleSwitchProps>>(Forms.ToggleSwitch);
|
|
29
|
+
expectType<ComponentType<InputProps>>(Forms.Input);
|
|
30
|
+
expectType<ComponentType<SelectProps>>(Forms.Select);
|
|
31
|
+
expectType<ComponentType<CheckboxProps>>(Forms.Checkbox);
|
|
32
|
+
expectType<ComponentType<RadioButtonProps>>(Forms.RadioButton);
|
|
33
|
+
|
|
34
|
+
// Test VerticalSeparatorProps interface
|
|
35
|
+
expectAssignable<VerticalSeparatorProps>({});
|
|
36
|
+
expectAssignable<VerticalSeparatorProps>({
|
|
37
|
+
color: "red",
|
|
38
|
+
backgroundColorOpacity: "0.5",
|
|
39
|
+
classes: "custom-class",
|
|
40
|
+
height: "100px",
|
|
41
|
+
width: "2px",
|
|
42
|
+
marginLeft: "10px",
|
|
43
|
+
marginRight: "10px",
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
// Test PlatformaticIconProps interface
|
|
47
|
+
expectAssignable<PlatformaticIconProps>({
|
|
48
|
+
iconName: "test-icon",
|
|
49
|
+
});
|
|
50
|
+
expectAssignable<PlatformaticIconProps>({
|
|
51
|
+
iconName: "test-icon",
|
|
52
|
+
color: "blue",
|
|
53
|
+
size: "large",
|
|
54
|
+
onClick: () => {},
|
|
55
|
+
disabled: false,
|
|
56
|
+
inactive: true,
|
|
57
|
+
className: "custom-icon",
|
|
58
|
+
internalOverHandling: true,
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
// Test CopyAndPasteProps interface
|
|
62
|
+
expectAssignable<CopyAndPasteProps>({
|
|
63
|
+
value: "test",
|
|
64
|
+
});
|
|
65
|
+
expectAssignable<CopyAndPasteProps>({
|
|
66
|
+
value: { test: "object" },
|
|
67
|
+
tooltipLabel: "Copy me",
|
|
68
|
+
color: "green",
|
|
69
|
+
size: "small",
|
|
70
|
+
tooltipClassName: "custom-tooltip",
|
|
71
|
+
position: "top",
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
// Test that components are properly typed as React ComponentType
|
|
75
|
+
expectType<ComponentType<any>>(Checkbox);
|
|
76
|
+
expectType<ComponentType<any>>(BorderedBox);
|
|
77
|
+
expectType<ComponentType<any>>(Button);
|
|
78
|
+
expectType<ComponentType<any>>(HorizontalSeparator);
|
|
79
|
+
expectType<ComponentType<any>>(LoadingSpinnerV2);
|
|
80
|
+
expectType<ComponentType<any>>(Tooltip);
|
|
81
|
+
expectType<ComponentType<VerticalSeparatorProps>>(VerticalSeparator);
|
|
82
|
+
expectType<ComponentType<any>>(TooltipAbsolute);
|
|
83
|
+
expectType<ComponentType<PlatformaticIconProps>>(PlatformaticIcon);
|
|
84
|
+
expectType<ComponentType<CopyAndPasteProps>>(CopyAndPaste);
|
|
85
|
+
|
|
86
|
+
// Test specific Icons exports
|
|
87
|
+
expectType<ComponentType<IconProps>>(Icons.CircleStopIcon);
|
|
88
|
+
expectType<ComponentType<IconProps>>(Icons.RunningIcon);
|
|
89
|
+
|
|
90
|
+
// Test that Icons allows string index access
|
|
91
|
+
const dynamicIcon: string | ComponentType<any> = Icons["someIconName"];
|
|
92
|
+
expectType<ComponentType<any>>(dynamicIcon);
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"module": "commonjs",
|
|
4
|
+
"target": "es2019",
|
|
5
|
+
"lib": ["es2019"],
|
|
6
|
+
"strict": true,
|
|
7
|
+
"esModuleInterop": true,
|
|
8
|
+
"skipLibCheck": true,
|
|
9
|
+
"forceConsistentCasingInFileNames": true,
|
|
10
|
+
"baseUrl": ".",
|
|
11
|
+
"paths": {
|
|
12
|
+
"@platformatic/ui-components": ["./index.d.ts"]
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"include": ["test-d/**/*.ts"]
|
|
16
|
+
}
|