@itilite/lumina-ui 0.0.5 → 0.0.31
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/cjs/index.css +1 -1
- package/dist/cjs/index.js +754 -396
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/Button/types.d.ts +0 -2
- package/dist/cjs/types/components/Tag/Tag.d.ts +4 -0
- package/dist/cjs/types/components/Tag/index.d.ts +1 -0
- package/dist/cjs/types/components/Tag/type.d.ts +7 -0
- package/dist/cjs/types/components/index.d.ts +1 -0
- package/dist/esm/index.css +1 -1
- package/dist/esm/index.js +754 -397
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/Button/types.d.ts +0 -2
- package/dist/esm/types/components/Tag/Tag.d.ts +4 -0
- package/dist/esm/types/components/Tag/index.d.ts +1 -0
- package/dist/esm/types/components/Tag/type.d.ts +7 -0
- package/dist/esm/types/components/index.d.ts +1 -0
- package/dist/types/components/Button/Button.d.ts +4 -0
- package/dist/types/components/Button/Button.test.d.ts +1 -0
- package/dist/types/components/Button/index.d.ts +1 -0
- package/dist/types/components/Button/types.d.ts +16 -0
- package/dist/types/components/Checkbox/Checkbox.d.ts +4 -0
- package/dist/types/components/Checkbox/index.d.ts +1 -0
- package/dist/types/components/Checkbox/types.d.ts +11 -0
- package/dist/types/components/Modal/Modal.d.ts +3 -0
- package/dist/types/components/Modal/index.d.ts +1 -0
- package/dist/types/components/Modal/types.d.ts +21 -0
- package/dist/types/components/Radio/Radio.d.ts +4 -0
- package/dist/types/components/Radio/index.d.ts +1 -0
- package/dist/types/components/Radio/types.d.ts +11 -0
- package/dist/types/components/Switch/Switch.d.ts +4 -0
- package/dist/types/components/Switch/index.d.ts +1 -0
- package/dist/types/components/Switch/types.d.ts +7 -0
- package/dist/types/components/Tag/Tag.d.ts +4 -0
- package/dist/types/components/Tag/index.d.ts +1 -0
- package/dist/types/components/Tag/type.d.ts +7 -0
- package/dist/types/components/Tooltip/Tooltip.d.ts +3 -0
- package/dist/types/components/Tooltip/index.d.ts +1 -0
- package/dist/types/components/Tooltip/types.d.ts +8 -0
- package/dist/types/components/index.d.ts +7 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +16 -11
- package/src/components/Button/Button.module.scss +2 -8
- package/src/components/Button/Button.tsx +0 -4
- package/src/components/Button/types.ts +0 -2
- package/src/components/Tag/Tag.module.scss +61 -0
- package/src/components/Tag/Tag.tsx +34 -0
- package/src/components/Tag/index.ts +1 -0
- package/src/components/Tag/type.ts +7 -0
- package/src/components/index.ts +2 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Tag } from "./Tag";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Button } from "./Button";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export interface ButtonProps {
|
|
2
|
+
type?: "primary" | "secondary" | "critical" | undefined;
|
|
3
|
+
variant?: "subtle" | "text" | "link";
|
|
4
|
+
size?: "large" | "small";
|
|
5
|
+
shape?: "circle" | "default" | "round";
|
|
6
|
+
icon?: React.ReactNode;
|
|
7
|
+
iconPosition?: "start" | "end";
|
|
8
|
+
className?: string;
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
11
|
+
href?: string;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
loading?: boolean;
|
|
14
|
+
onHoverUnderline?: boolean;
|
|
15
|
+
analytics?: Record<string, unknown>;
|
|
16
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Checkbox } from "./Checkbox";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { CheckboxChangeEvent } from 'antd/es/checkbox';
|
|
2
|
+
export interface CheckboxProps {
|
|
3
|
+
checked?: boolean;
|
|
4
|
+
className?: string;
|
|
5
|
+
onChange?: (e: CheckboxChangeEvent) => void;
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
size?: "large" | "small" | "medium";
|
|
8
|
+
variant?: "normal" | "emphasized";
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
indeterminate?: boolean;
|
|
11
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Modal } from "./Modal";
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export interface ModalProps {
|
|
2
|
+
className?: string | undefined;
|
|
3
|
+
title?: string | undefined;
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
open?: boolean;
|
|
6
|
+
handleOk?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
|
|
7
|
+
handleCancel?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
|
|
8
|
+
okText?: string | undefined;
|
|
9
|
+
cancelText?: string | undefined;
|
|
10
|
+
closeIcon?: React.ReactNode;
|
|
11
|
+
bodyClassName?: string | undefined;
|
|
12
|
+
outsideClickDisable?: boolean;
|
|
13
|
+
hideCross?: boolean;
|
|
14
|
+
okButtonLoading?: boolean;
|
|
15
|
+
okButtonDisabled?: boolean;
|
|
16
|
+
variant?: "primary" | "secondary";
|
|
17
|
+
okBtnClasses?: string | undefined;
|
|
18
|
+
cancelButtonAnalytics?: object | undefined;
|
|
19
|
+
okButtonAnalytics?: object | undefined;
|
|
20
|
+
footerMargintopDisable?: boolean;
|
|
21
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Radio } from "./Radio";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { RadioChangeEvent } from "antd/lib/radio";
|
|
2
|
+
export interface RadioProps {
|
|
3
|
+
checked?: boolean;
|
|
4
|
+
className?: string;
|
|
5
|
+
onChange?: (event: RadioChangeEvent) => void;
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
size?: "large" | "small" | "medium";
|
|
8
|
+
variant?: "normal" | "emphasized";
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
extra?: React.ReactNode;
|
|
11
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Switch } from "./Switch";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Tag } from "./Tag";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Tooltip } from "./Tooltip";
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export interface TooltipProps {
|
|
2
|
+
children?: React.ReactNode;
|
|
3
|
+
title?: string | undefined;
|
|
4
|
+
placement?: "top" | "left" | "right" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
|
|
5
|
+
color?: string | undefined;
|
|
6
|
+
className?: string | undefined;
|
|
7
|
+
mode?: "light" | "dark";
|
|
8
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./components";
|
package/package.json
CHANGED
|
@@ -1,10 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itilite/lumina-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.31",
|
|
4
4
|
"description": "Design system",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
7
7
|
"types": "dist/types/index.d.ts",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"build:types": "tsc --emitDeclarationOnly",
|
|
10
|
+
"build": "rollup -c",
|
|
11
|
+
"prebuild:all": "node -v && npm -v && pwd && ls -la",
|
|
12
|
+
"build:all": "ROLLUP_DEBUG=* rollup -c && tsc --emitDeclarationOnly",
|
|
13
|
+
"dev": "rollup -c -w",
|
|
14
|
+
"lint": "eslint ",
|
|
15
|
+
"lint:fix": "eslint ./src --ext .ts,.tsx --fix",
|
|
16
|
+
"test": "jest",
|
|
17
|
+
"publish": "npm init --scope=itilite && npm publish"
|
|
18
|
+
},
|
|
8
19
|
"author": "Itilite",
|
|
9
20
|
"license": "ISC",
|
|
10
21
|
"devDependencies": {
|
|
@@ -77,14 +88,8 @@
|
|
|
77
88
|
"url": "https://github.com/Itilite/design-system/issues"
|
|
78
89
|
},
|
|
79
90
|
"homepage": "https://github.com/Itilite/design-system#readme",
|
|
80
|
-
"
|
|
81
|
-
"
|
|
82
|
-
"
|
|
83
|
-
"prebuild:all": "node -v && npm -v && pwd && ls -la",
|
|
84
|
-
"build:all": "ROLLUP_DEBUG=* rollup -c && tsc --emitDeclarationOnly",
|
|
85
|
-
"dev": "rollup -c -w",
|
|
86
|
-
"lint": "eslint ",
|
|
87
|
-
"lint:fix": "eslint ./src --ext .ts,.tsx --fix",
|
|
88
|
-
"test": "jest"
|
|
91
|
+
"dependencies": {
|
|
92
|
+
"minimatch": "^8.0.4",
|
|
93
|
+
"minipass": "^4.2.8"
|
|
89
94
|
}
|
|
90
|
-
}
|
|
95
|
+
}
|
|
@@ -35,19 +35,13 @@
|
|
|
35
35
|
@apply tw-bg-color-action-primary;
|
|
36
36
|
box-shadow: 0px 2px 4px 0px rgba(17, 24, 39, 0.1);
|
|
37
37
|
}
|
|
38
|
-
&.variant_subtle {
|
|
39
|
-
@apply tw-text-color-text-primary;
|
|
40
|
-
&:hover {
|
|
41
|
-
@apply tw-text-color-text-primary-hover;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
38
|
&:focus-visible {
|
|
45
39
|
outline: 2px solid #ec5d2561;
|
|
46
40
|
}
|
|
47
41
|
&.variant_subtle {
|
|
48
42
|
@apply tw-text-color-text-primary;
|
|
49
43
|
&:hover {
|
|
50
|
-
@apply tw-text-color-text-primary
|
|
44
|
+
@apply tw-text-color-text-primary;
|
|
51
45
|
}
|
|
52
46
|
}
|
|
53
47
|
&.variant_text,
|
|
@@ -153,7 +147,7 @@
|
|
|
153
147
|
@apply tw-h-auto;
|
|
154
148
|
box-shadow: none;
|
|
155
149
|
&:global(.ant-btn-default):hover {
|
|
156
|
-
&.onHoverUnderline
|
|
150
|
+
&.onHoverUnderline{
|
|
157
151
|
text-decoration: underline;
|
|
158
152
|
}
|
|
159
153
|
box-shadow: none;
|
|
@@ -21,8 +21,6 @@ const Button: React.FC<ButtonProps> = (props) => {
|
|
|
21
21
|
disabled = false,
|
|
22
22
|
loading = false,
|
|
23
23
|
onHoverUnderline = false,
|
|
24
|
-
id = "",
|
|
25
|
-
name = ""
|
|
26
24
|
} = props;
|
|
27
25
|
|
|
28
26
|
const buttonMap: Record<string, "primary" | "default" | "text" | "link"> = {
|
|
@@ -40,8 +38,6 @@ const Button: React.FC<ButtonProps> = (props) => {
|
|
|
40
38
|
|
|
41
39
|
return (
|
|
42
40
|
<AntButton
|
|
43
|
-
id={id}
|
|
44
|
-
name={name}
|
|
45
41
|
className={clsx(
|
|
46
42
|
classes.button,
|
|
47
43
|
classes[`size_${size}`],
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
.tag {
|
|
2
|
+
@apply tw-rounded;
|
|
3
|
+
@apply tw-p-1;
|
|
4
|
+
@apply tw-font-medium;
|
|
5
|
+
@apply tw-text-font-size-10;
|
|
6
|
+
@apply tw-leading-3;
|
|
7
|
+
@apply tw-bg-white;
|
|
8
|
+
@apply tw-h-max;
|
|
9
|
+
@apply tw-border-solid;
|
|
10
|
+
border-width: 0.5px;
|
|
11
|
+
&.small {
|
|
12
|
+
@apply tw-py-[2px] tw-px-1;
|
|
13
|
+
@apply tw-text-font-size-10;
|
|
14
|
+
@apply tw-leading-3;
|
|
15
|
+
}
|
|
16
|
+
&.success {
|
|
17
|
+
@apply tw-text-color-green-500;
|
|
18
|
+
@apply tw-bg-color-surface-success;
|
|
19
|
+
@apply tw-border-color-green-200;
|
|
20
|
+
}
|
|
21
|
+
&.blue {
|
|
22
|
+
@apply tw-text-color-blue-500;
|
|
23
|
+
@apply tw-bg-color-blue-50;
|
|
24
|
+
@apply tw-border-color-blue-200;
|
|
25
|
+
}
|
|
26
|
+
&.warning {
|
|
27
|
+
@apply tw-text-color-orange-600;
|
|
28
|
+
@apply tw-bg-color-orange-50;
|
|
29
|
+
@apply tw-border-color-orange-200;
|
|
30
|
+
}
|
|
31
|
+
&.processing {
|
|
32
|
+
@apply tw-text-color-text-weak;
|
|
33
|
+
@apply tw-bg-color-surface-default-hover;
|
|
34
|
+
@apply tw-border-color-gray-200;
|
|
35
|
+
}
|
|
36
|
+
&.bookingConfirmed {
|
|
37
|
+
@apply tw-text-color-text-success;
|
|
38
|
+
@apply tw-bg-color-surface-success;
|
|
39
|
+
@apply tw-border-color-green-200;
|
|
40
|
+
}
|
|
41
|
+
&.bookingRescheduled {
|
|
42
|
+
@apply tw-text-color-text-info;
|
|
43
|
+
@apply tw-bg-color-surface-info;
|
|
44
|
+
@apply tw-border-color-infoSubtle;
|
|
45
|
+
}
|
|
46
|
+
&.bookingRescheduledPending {
|
|
47
|
+
@apply tw-text-color-text-warning;
|
|
48
|
+
@apply tw-bg-color-surface-warning;
|
|
49
|
+
@apply tw-border-color-warningSubtle;
|
|
50
|
+
}
|
|
51
|
+
&.failed {
|
|
52
|
+
@apply tw-text-color-text-critical;
|
|
53
|
+
@apply tw-bg-color-surface-critical;
|
|
54
|
+
@apply tw-border-color-red-200;
|
|
55
|
+
}
|
|
56
|
+
&.bookingPending {
|
|
57
|
+
@apply tw-text-color-text-weak;
|
|
58
|
+
@apply tw-bg-color-surface-default-hover;
|
|
59
|
+
@apply tw-border-color-text-weak;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Tag as AntTag } from "antd";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
|
|
5
|
+
import classes from "./Tag.module.scss";
|
|
6
|
+
import { TagProps } from "./type";
|
|
7
|
+
|
|
8
|
+
const Tag: React.FC<TagProps> = (props) => {
|
|
9
|
+
const {
|
|
10
|
+
type = "success",
|
|
11
|
+
className = "",
|
|
12
|
+
title = "",
|
|
13
|
+
icon = null,
|
|
14
|
+
size = "",
|
|
15
|
+
...rest
|
|
16
|
+
} = props;
|
|
17
|
+
return (
|
|
18
|
+
<AntTag
|
|
19
|
+
className={clsx(
|
|
20
|
+
classes.tag,
|
|
21
|
+
size === "small" && classes.small,
|
|
22
|
+
classes[type],
|
|
23
|
+
className
|
|
24
|
+
)}
|
|
25
|
+
icon={icon}
|
|
26
|
+
{...rest}
|
|
27
|
+
>
|
|
28
|
+
{title}
|
|
29
|
+
</AntTag>
|
|
30
|
+
);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export default Tag;
|
|
34
|
+
Tag.displayName = "Tag";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Tag } from "./Tag";
|
package/src/components/index.ts
CHANGED