@factorearth/component-library 3.0.28-alpha.0 → 3.0.28
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/Atoms/Buttons/Button.d.ts +0 -1
- package/dist/Atoms/Buttons/Button.js.map +1 -1
- package/dist/Atoms/DateField/DateField.js +1 -5
- package/dist/Atoms/DateField/DateField.js.map +1 -1
- package/dist/Atoms/DropdownField/DropdownField.d.ts +9 -4
- package/dist/Atoms/DropdownField/DropdownField.js +16 -27
- package/dist/Atoms/DropdownField/DropdownField.js.map +1 -1
- package/dist/Atoms/FieldWrapper/FieldWrapper.d.ts +8 -3
- package/dist/Atoms/FieldWrapper/FieldWrapper.js +14 -3
- package/dist/Atoms/FieldWrapper/FieldWrapper.js.map +1 -1
- package/dist/Atoms/Modal/Modal.d.ts +14 -0
- package/dist/Atoms/Modal/Modal.js +25 -0
- package/dist/Atoms/Modal/Modal.js.map +1 -0
- package/dist/Atoms/MoreHorizonButton/MoreHorizonButton.d.ts +1 -3
- package/dist/Atoms/MoreHorizonButton/MoreHorizonButton.js +4 -5
- package/dist/Atoms/MoreHorizonButton/MoreHorizonButton.js.map +1 -1
- package/dist/Atoms/NoteField/NoteField.d.ts +9 -0
- package/dist/Atoms/NoteField/NoteField.js +55 -0
- package/dist/Atoms/NoteField/NoteField.js.map +1 -0
- package/dist/Atoms/NumberField/NumberField.d.ts +3 -8
- package/dist/Atoms/NumberField/NumberField.js +21 -48
- package/dist/Atoms/NumberField/NumberField.js.map +1 -1
- package/dist/Atoms/TextField/TextField.d.ts +1 -1
- package/dist/Atoms/TextField/TextField.js +9 -7
- package/dist/Atoms/TextField/TextField.js.map +1 -1
- package/dist/Molecules/Thumbnail/Thumbnail.d.ts +2 -2
- package/dist/Molecules/Thumbnail/Thumbnail.js +28 -11
- package/dist/Molecules/Thumbnail/Thumbnail.js.map +1 -1
- package/dist/Organisms/Card/Card.d.ts +11 -0
- package/dist/Organisms/Card/Card.js +54 -0
- package/dist/Organisms/Card/Card.js.map +1 -0
- package/dist/Theme/ThemeProvider.d.ts +90 -3
- package/dist/Theme/ThemeProvider.js +0 -36
- package/dist/Theme/ThemeProvider.js.map +1 -1
- package/dist/Theme/types.d.ts +4 -17
- package/dist/index.d.ts +0 -5
- package/dist/index.js +0 -5
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -8,7 +8,6 @@ interface ButtonProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLD
|
|
|
8
8
|
icon?: JSX.Element;
|
|
9
9
|
variant: ButtonVariants;
|
|
10
10
|
label?: string;
|
|
11
|
-
buttonTheme?: "primary" | "secondary" | "tertiary";
|
|
12
11
|
children?: React.ReactNode;
|
|
13
12
|
}
|
|
14
13
|
export declare const Button: (props: ButtonProps) => React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../lib/Atoms/Buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../lib/Atoms/Buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAqB,MAAM,iBAAiB,CAAC;AAKpD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAgE;;qBAEvE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC;UACnE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC;;;;;;;;;;;;iBAY3C,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAE,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC;GAClE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,IAAI,MAAM;CAClC,CAAC;AAWF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC5C,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACvE,OAAO,CACN,oBAAC,SAAS,OAAK,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO;QACzE,IAAI,IAAI,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,QAAQ,IAAI,QAAQ,CACV,CACZ,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -19,11 +19,7 @@ const DateIcon = styled(FiCalendar) `
|
|
|
19
19
|
const DateFieldContainer = styled.div `
|
|
20
20
|
display: flex;
|
|
21
21
|
background: ${({ color }) => color.background.primary};
|
|
22
|
-
width: 100%;
|
|
23
22
|
|
|
24
|
-
.react-datepicker__wrapper {
|
|
25
|
-
width: 100%;
|
|
26
|
-
}
|
|
27
23
|
.react-datepicker {
|
|
28
24
|
border-color: ${({ color }) => color.border.primary};
|
|
29
25
|
background: ${({ color }) => color.background.primary};
|
|
@@ -42,7 +38,7 @@ const DateFieldContainer = styled.div `
|
|
|
42
38
|
border-radius: 4px 0px 0px 4px;
|
|
43
39
|
font-size: 14px;
|
|
44
40
|
text-align: center;
|
|
45
|
-
width:
|
|
41
|
+
width: 116px;
|
|
46
42
|
padding: 0;
|
|
47
43
|
margin: 0;
|
|
48
44
|
&:focus-visible {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../lib/Atoms/DateField/DateField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,4CAA4C,CAAC;AAEpD,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,CAAmB;UAC5C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;eAC5B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO;;;iBAGrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;CAOnD,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAmB;;eAEzC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO
|
|
1
|
+
{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../lib/Atoms/DateField/DateField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { GroupBase, Props } from "react-select";
|
|
2
3
|
import { Colors } from "../../Theme/types";
|
|
3
|
-
|
|
4
|
-
|
|
4
|
+
declare module "react-select/base" {
|
|
5
|
+
interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
|
|
6
|
+
colorPalette: Colors & string;
|
|
7
|
+
"data-test"?: string;
|
|
8
|
+
moreHorizon?: JSX.Element;
|
|
9
|
+
createAble?: boolean;
|
|
10
|
+
}
|
|
5
11
|
}
|
|
6
|
-
export declare const
|
|
7
|
-
export {};
|
|
12
|
+
export declare const DropdownSelect: (props: Props) => React.JSX.Element;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import Select from "react-select";
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
import Createable from "react-select/creatable";
|
|
4
|
+
export const DropdownSelect = (props) => {
|
|
5
|
+
const { colorPalette, moreHorizon, createAble } = props;
|
|
5
6
|
const styles = {
|
|
6
7
|
control: (provided, state) => ({
|
|
7
|
-
|
|
8
|
+
...provided,
|
|
9
|
+
paddingLeft: "8px",
|
|
8
10
|
justifyContent: "center",
|
|
9
|
-
gap: "10px",
|
|
10
11
|
alignSelf: "stretch",
|
|
11
12
|
backgroundColor: colorPalette.background.primary,
|
|
12
13
|
cursor: "pointer",
|
|
@@ -15,26 +16,13 @@ export const DropdownField = (props) => {
|
|
|
15
16
|
alignItems: "center",
|
|
16
17
|
fontSize: "14px",
|
|
17
18
|
zIndex: "1000",
|
|
18
|
-
height: "
|
|
19
|
+
height: "38px",
|
|
20
|
+
overflow: "auto",
|
|
19
21
|
color: colorPalette.text.primary,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
...provided[":hover"],
|
|
25
|
-
border: `1px solid ${colorPalette.border.primary}`,
|
|
26
|
-
boxShadow: "none",
|
|
27
|
-
},
|
|
28
|
-
":active": {
|
|
29
|
-
...provided[":active"],
|
|
30
|
-
border: `1px solid ${colorPalette.border.primary}`,
|
|
31
|
-
boxShadow: "none",
|
|
32
|
-
},
|
|
33
|
-
":focus": {
|
|
34
|
-
...provided[":focus"],
|
|
35
|
-
border: `1px solid ${colorPalette.border.primary}`,
|
|
36
|
-
boxShadow: "none",
|
|
37
|
-
},
|
|
22
|
+
borderTopRightRadius: !moreHorizon ? "4px" : "0px",
|
|
23
|
+
borderBottomRightRadius: !moreHorizon ? "4px" : "0px",
|
|
24
|
+
borderRight: moreHorizon ? `1px solid ${colorPalette.border.primary}` : "none",
|
|
25
|
+
border: `1px solid ${colorPalette.border.primary}`,
|
|
38
26
|
"::placeholder": {
|
|
39
27
|
color: colorPalette.text.secondary,
|
|
40
28
|
},
|
|
@@ -43,12 +31,11 @@ export const DropdownField = (props) => {
|
|
|
43
31
|
input: (provided, state) => ({
|
|
44
32
|
...provided,
|
|
45
33
|
color: colorPalette.text.primary,
|
|
46
|
-
|
|
34
|
+
width: "100%",
|
|
47
35
|
}),
|
|
48
36
|
container: (provided, state) => ({
|
|
49
37
|
...provided,
|
|
50
38
|
width: "100%",
|
|
51
|
-
margin: "auto",
|
|
52
39
|
}),
|
|
53
40
|
option: (provided, state) => ({
|
|
54
41
|
...provided,
|
|
@@ -89,8 +76,10 @@ export const DropdownField = (props) => {
|
|
|
89
76
|
}),
|
|
90
77
|
indicatorSeparator: (provided, state) => ({
|
|
91
78
|
display: "none",
|
|
92
|
-
})
|
|
79
|
+
}),
|
|
93
80
|
};
|
|
94
|
-
return React.createElement(
|
|
81
|
+
return (React.createElement("div", { style: { display: "flex", width: "100%" } },
|
|
82
|
+
createAble ? (React.createElement(Createable, { styles: styles, ...props })) : (React.createElement(Select, { styles: styles, ...props })),
|
|
83
|
+
moreHorizon && moreHorizon));
|
|
95
84
|
};
|
|
96
85
|
//# sourceMappingURL=DropdownField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownField.js","sourceRoot":"","sources":["../../../lib/Atoms/DropdownField/DropdownField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DropdownField.js","sourceRoot":"","sources":["../../../lib/Atoms/DropdownField/DropdownField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Colors } from "Theme/types";
|
|
3
|
-
interface FieldWrapperProps {
|
|
3
|
+
interface FieldWrapperProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
4
4
|
label?: string;
|
|
5
|
-
children: React.ReactNode;
|
|
5
|
+
children: React.ReactNode | JSX.Element;
|
|
6
6
|
colorPalette: Colors;
|
|
7
|
+
link?: JSX.Element;
|
|
7
8
|
}
|
|
8
|
-
|
|
9
|
+
interface FieldActionWrapperProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
10
|
+
children: React.ReactNode | JSX.Element;
|
|
11
|
+
}
|
|
12
|
+
export declare const FieldWrapper: (props: FieldWrapperProps) => React.JSX.Element;
|
|
13
|
+
export declare const FieldActionWrapper: (props: FieldActionWrapperProps) => React.JSX.Element;
|
|
9
14
|
export {};
|
|
@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
|
|
|
3
3
|
const FieldWrapperContainer = styled.div `
|
|
4
4
|
display: flex;
|
|
5
5
|
width: 100%;
|
|
6
|
+
gap: 16px;
|
|
6
7
|
`;
|
|
7
8
|
const LabelContainer = styled.label `
|
|
8
9
|
display: flex;
|
|
@@ -17,10 +18,20 @@ const LabelContainer = styled.label `
|
|
|
17
18
|
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
18
19
|
width: 50%;
|
|
19
20
|
`;
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
const FieldActionContainer = styled.div `
|
|
22
|
+
display: flex;
|
|
23
|
+
width: 100%;
|
|
24
|
+
padding: 8px 0;
|
|
25
|
+
`;
|
|
26
|
+
export const FieldWrapper = (props) => {
|
|
27
|
+
const { colorPalette, label, children, link } = props;
|
|
22
28
|
return (React.createElement(FieldWrapperContainer, { colorPalette: colorPalette },
|
|
23
|
-
label && (React.createElement(LabelContainer, { colorPalette: colorPalette },
|
|
29
|
+
label && (React.createElement(LabelContainer, { colorPalette: colorPalette },
|
|
30
|
+
label,
|
|
31
|
+
link)),
|
|
24
32
|
children));
|
|
25
33
|
};
|
|
34
|
+
export const FieldActionWrapper = (props) => {
|
|
35
|
+
return React.createElement(FieldActionContainer, null, props.children);
|
|
36
|
+
};
|
|
26
37
|
//# sourceMappingURL=FieldWrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldWrapper.js","sourceRoot":"","sources":["../../../lib/Atoms/FieldWrapper/FieldWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAA0B
|
|
1
|
+
{"version":3,"file":"FieldWrapper.js","sourceRoot":"","sources":["../../../lib/Atoms/FieldWrapper/FieldWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;CAIjE,CAAC;AACF,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAA0B;;;;;;;;;;UAUnD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;;CAExD,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;EAIrC,CAAA;AAaF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACxD,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACtD,OAAO,CACN,oBAAC,qBAAqB,IAAC,YAAY,EAAE,YAAY;QAC/C,KAAK,IAAI,CACT,oBAAC,cAAc,IAAC,YAAY,EAAE,YAAY;YAAG,KAAK;YAAE,IAAI,CAAkB,CAC1E;QACA,QAAQ,CACc,CACxB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACpE,OAAO,oBAAC,oBAAoB,QAAE,KAAK,CAAC,QAAQ,CAAwB,CAAC;AACtE,CAAC,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Colors } from "../../Theme/types";
|
|
3
|
+
interface ModalProps {
|
|
4
|
+
title: string;
|
|
5
|
+
buttonText: string;
|
|
6
|
+
triggerComponent?: (onOpen: () => void) => JSX.Element;
|
|
7
|
+
modalComponent?: (onClose: () => void) => JSX.Element;
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
colorPalette: Colors & string;
|
|
10
|
+
onOpen: () => void;
|
|
11
|
+
onClose: () => void;
|
|
12
|
+
}
|
|
13
|
+
export declare const Modal: (props: ModalProps) => React.JSX.Element;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import * as Dialog from "@radix-ui/react-dialog";
|
|
3
|
+
const DefaultTrigger = ({ buttonText, colorPalette }) => {
|
|
4
|
+
return (React.createElement(Dialog.Trigger, { asChild: true },
|
|
5
|
+
React.createElement("button", { style: { color: colorPalette.text.primary } }, buttonText)));
|
|
6
|
+
};
|
|
7
|
+
const DefaultModalContent = ({ title, colorPalette, children }) => {
|
|
8
|
+
return (React.createElement(React.Fragment, null,
|
|
9
|
+
React.createElement(Dialog.Title, { style: { color: colorPalette.text.primary } }, title),
|
|
10
|
+
children));
|
|
11
|
+
};
|
|
12
|
+
export const Modal = (props) => {
|
|
13
|
+
const { title, buttonText, triggerComponent, children, colorPalette, onOpen, onClose, modalComponent } = props;
|
|
14
|
+
return (React.createElement(Dialog.Root, null,
|
|
15
|
+
triggerComponent ? (triggerComponent(onOpen)) : (React.createElement(DefaultTrigger, { buttonText: buttonText, colorPalette: colorPalette })),
|
|
16
|
+
React.createElement(Dialog.Portal, null,
|
|
17
|
+
React.createElement(Dialog.Overlay, null),
|
|
18
|
+
React.createElement(Dialog.Content, { style: { backgroundColor: colorPalette.background.primary } },
|
|
19
|
+
modalComponent ? (modalComponent(onClose)) : (React.createElement(DefaultModalContent, { colorPalette: colorPalette, title: title }, children)),
|
|
20
|
+
React.createElement(Dialog.Close, { asChild: true },
|
|
21
|
+
React.createElement("button", { "aria-label": "Close", style: { backgroundColor: colorPalette.background.primary, color: colorPalette.text.primary } },
|
|
22
|
+
React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
23
|
+
React.createElement("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }))))))));
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=Modal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../lib/Atoms/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AAcjD,MAAM,cAAc,GAAG,CAAC,EAAE,UAAU,EAAE,YAAY,EAAuB,EAAE,EAAE;IAC5E,OAAO,CACN,oBAAC,MAAM,CAAC,OAAO,IAAC,OAAO;QACtB,gCAAQ,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,IACjD,UAAU,CACH,CACO,CACjB,CAAC;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAA4B,EAAE,EAAE;IAC3F,OAAO,CACN;QACC,oBAAC,MAAM,CAAC,KAAK,IACZ,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,IAE1C,KAAK,CACQ;QACd,QAAQ,CACP,CACH,CAAC;AACH,CAAC,CAAA;AAaD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IAC1C,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE/G,OAAO,CACN,oBAAC,MAAM,CAAC,IAAI;QACV,gBAAgB,CAAC,CAAC,CAAC,CACnB,gBAAgB,CAAC,MAAM,CAAC,CACxB,CAAC,CAAC,CAAC,CACH,oBAAC,cAAc,IAAC,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,GAAI,CACtE;QAED,oBAAC,MAAM,CAAC,MAAM;YACb,oBAAC,MAAM,CAAC,OAAO,OAAI;YACnB,oBAAC,MAAM,CAAC,OAAO,IACd,KAAK,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,UAAU,CAAC,OAAO,EAAE;gBAE1D,cAAc,CAAC,CAAC,CAAC,CACjB,cAAc,CAAC,OAAO,CAAC,CACvB,CAAC,CAAC,CAAC,CACH,oBAAC,mBAAmB,IAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAuB,CAC/F;gBAED,oBAAC,MAAM,CAAC,KAAK,IAAC,OAAO;oBACpB,8CACY,OAAO,EAClB,KAAK,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE;wBAE7F,6BACC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;4BAElC,8BACC,CAAC,EAAC,ygBAAygB,EAC3gB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,GACX,CACH,CACE,CACK,CACC,CACF,CACH,CACd,CAAC;AACH,CAAC,CAAA"}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { CSSObject } from "@emotion/styled";
|
|
3
2
|
import { Colors } from "@../../Theme/types";
|
|
4
3
|
interface MoreHorizonButtonProps {
|
|
5
4
|
colorPalette: Colors;
|
|
6
5
|
handleToggleHistory: () => void;
|
|
7
6
|
handleRefreshField: () => void;
|
|
8
|
-
styles?: CSSObject;
|
|
9
7
|
}
|
|
10
|
-
export declare const MoreHorizonButton: ({ colorPalette, handleToggleHistory, handleRefreshField,
|
|
8
|
+
export declare const MoreHorizonButton: ({ colorPalette, handleToggleHistory, handleRefreshField, }: MoreHorizonButtonProps) => React.JSX.Element;
|
|
11
9
|
export {};
|
|
@@ -19,7 +19,7 @@ const MoreHorizonIcon = styled.div `
|
|
|
19
19
|
`;
|
|
20
20
|
const MoreHorizonContainer = styled.div `
|
|
21
21
|
display: flex;
|
|
22
|
-
height:
|
|
22
|
+
height: 18px;
|
|
23
23
|
width: 16px;
|
|
24
24
|
padding: 12px 8px;
|
|
25
25
|
align-items: center;
|
|
@@ -30,7 +30,6 @@ const MoreHorizonContainer = styled.div `
|
|
|
30
30
|
border-style: solid;
|
|
31
31
|
border-width: 1px;
|
|
32
32
|
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
33
|
-
${({ styles }) => styles && styles}
|
|
34
33
|
`;
|
|
35
34
|
const MoreHorizonOption = styled.div `
|
|
36
35
|
padding: 6px 12px;
|
|
@@ -63,10 +62,10 @@ const MoreHorizonMenu = styled.div `
|
|
|
63
62
|
z-index: 1000;
|
|
64
63
|
transform-origin: top left;
|
|
65
64
|
`;
|
|
66
|
-
export const MoreHorizonButton = ({ colorPalette, handleToggleHistory, handleRefreshField,
|
|
65
|
+
export const MoreHorizonButton = ({ colorPalette, handleToggleHistory, handleRefreshField, }) => {
|
|
67
66
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
68
67
|
const [loading, setLoading] = useState(false);
|
|
69
|
-
const [yPosition, setYPosition] = useState("
|
|
68
|
+
const [yPosition, setYPosition] = useState("down");
|
|
70
69
|
const [xPosition, setXPosition] = useState("center");
|
|
71
70
|
const menuRef = useRef(null);
|
|
72
71
|
const buttonRef = useRef(null);
|
|
@@ -105,7 +104,7 @@ export const MoreHorizonButton = ({ colorPalette, handleToggleHistory, handleRef
|
|
|
105
104
|
const toggleMenu = () => {
|
|
106
105
|
setMenuOpen(!menuOpen);
|
|
107
106
|
};
|
|
108
|
-
return (React.createElement(MoreHorizonContainer, { colorPalette: colorPalette, ref: buttonRef, onClick: toggleMenu, tabIndex: -1, onBlur: () => setMenuOpen(false)
|
|
107
|
+
return (React.createElement(MoreHorizonContainer, { colorPalette: colorPalette, ref: buttonRef, onClick: toggleMenu, tabIndex: -1, onBlur: () => setMenuOpen(false) },
|
|
109
108
|
React.createElement(MoreHorizonIcon, { menuOpen: menuOpen },
|
|
110
109
|
React.createElement(FiMoreVertical, { color: colorPalette.text.primary })),
|
|
111
110
|
React.createElement(MoreHorizonMenu, { menuOpen: menuOpen && !loading, colorPalette: colorPalette, ref: menuRef, yPosition: yPosition, xPosition: xPosition },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MoreHorizonButton.js","sourceRoot":"","sources":["../../../lib/Atoms/MoreHorizonButton/MoreHorizonButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,
|
|
1
|
+
{"version":3,"file":"MoreHorizonButton.js","sourceRoot":"","sources":["../../../lib/Atoms/MoreHorizonButton/MoreHorizonButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Colors } from "../../Theme/types";
|
|
3
|
+
interface NoteFieldTextAreaProps extends React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
|
|
4
|
+
colorPalette: Colors;
|
|
5
|
+
toggleFullScreenView: () => void;
|
|
6
|
+
moreHorizon?: JSX.Element;
|
|
7
|
+
}
|
|
8
|
+
export declare const NoteFieldTextArea: React.ForwardRefExoticComponent<Omit<NoteFieldTextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React, { forwardRef } from "react";
|
|
2
|
+
import styled from "@emotion/styled";
|
|
3
|
+
import { FiMaximize } from "react-icons/fi";
|
|
4
|
+
const NoteContainer = styled.div `
|
|
5
|
+
display: flex;
|
|
6
|
+
width: 100%;
|
|
7
|
+
justify-content: flex-end;
|
|
8
|
+
`;
|
|
9
|
+
const MaximizeIconContainer = styled.div `
|
|
10
|
+
border-radius: 4px 0px 0px 4px;
|
|
11
|
+
height: 38px;
|
|
12
|
+
width: 40px;
|
|
13
|
+
display: flex;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
align-items: center;
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
18
|
+
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
19
|
+
border-width: 1px;
|
|
20
|
+
border-style: solid;
|
|
21
|
+
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
22
|
+
`;
|
|
23
|
+
const MaximizeIcon = styled(FiMaximize) `
|
|
24
|
+
width: 20px;
|
|
25
|
+
height: 20px;
|
|
26
|
+
`;
|
|
27
|
+
const NoteArea = styled.textarea `
|
|
28
|
+
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
29
|
+
border-style: solid;
|
|
30
|
+
border-width: 1px;
|
|
31
|
+
padding: 8px 16px 0px 16px;
|
|
32
|
+
height: 30px;
|
|
33
|
+
width: 100%;
|
|
34
|
+
min-height: 30px;
|
|
35
|
+
resize: vertical;
|
|
36
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
37
|
+
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
38
|
+
border-left: none;
|
|
39
|
+
font-size: 14px;
|
|
40
|
+
:focus-visible {
|
|
41
|
+
max-height: 30px;
|
|
42
|
+
}
|
|
43
|
+
${({ moreHorizon }) => moreHorizon && `border-right: none;`}
|
|
44
|
+
${({ moreHorizon }) => moreHorizon &&
|
|
45
|
+
`border-top-right-radius: 0px; border-bottom-right-radius: 0px;`}
|
|
46
|
+
`;
|
|
47
|
+
export const NoteFieldTextArea = forwardRef((props, ref) => {
|
|
48
|
+
const { colorPalette, toggleFullScreenView, moreHorizon } = props;
|
|
49
|
+
return (React.createElement(NoteContainer, { colorPalette: colorPalette },
|
|
50
|
+
React.createElement(MaximizeIconContainer, { colorPalette: colorPalette },
|
|
51
|
+
React.createElement(MaximizeIcon, { color: colorPalette.utils.icon, onClick: toggleFullScreenView })),
|
|
52
|
+
React.createElement(NoteArea, { ...props, ref: ref, colorPalette: colorPalette, moreHorizon: moreHorizon ? true : false }),
|
|
53
|
+
moreHorizon && moreHorizon));
|
|
54
|
+
});
|
|
55
|
+
//# sourceMappingURL=NoteField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NoteField.js","sourceRoot":"","sources":["../../../lib/Atoms/NoteField/NoteField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;CAIzD,CAAC;AACF,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;;;;;UAQxD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;eAC1C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;;;iBAGnD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO;CACjE,CAAC;AACF,MAAM,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;;CAGtC,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAG9B;iBACe,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO;;;;;;;;UAQxD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;eAC1C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;;;;;;GAMjE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,IAAI,qBAAqB;GACzD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACrB,WAAW;IACX,gEAAgE;CACjE,CAAC;AAYF,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAC1C,CAAC,KAA6B,EAAE,GAAsC,EAAE,EAAE;IACzE,MAAM,EAAE,YAAY,EAAE,oBAAoB,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAClE,OAAO,CACN,oBAAC,aAAa,IAAC,YAAY,EAAE,YAAY;QACxC,oBAAC,qBAAqB,IAAC,YAAY,EAAE,YAAY;YAChD,oBAAC,YAAY,IACZ,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,IAAI,EAC9B,OAAO,EAAE,oBAAoB,GAC5B,CACqB;QACxB,oBAAC,QAAQ,OACJ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,GACtC;QACD,WAAW,IAAI,WAAW,CACZ,CAChB,CAAC;AACH,CAAC,CACD,CAAC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { CSSObject } from "@emotion/styled";
|
|
3
2
|
import { Colors } from "Theme/types";
|
|
4
|
-
interface NumberFieldProps {
|
|
3
|
+
interface NumberFieldProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
5
4
|
colorPalette: Colors & string;
|
|
6
5
|
handleChange: (event: {
|
|
7
6
|
target: {
|
|
@@ -9,12 +8,8 @@ interface NumberFieldProps {
|
|
|
9
8
|
value: any;
|
|
10
9
|
};
|
|
11
10
|
}) => Promise<void>;
|
|
12
|
-
handleBlur
|
|
11
|
+
handleBlur: (newValue?: string | number) => Promise<void>;
|
|
13
12
|
fromTable?: boolean;
|
|
14
|
-
value: string | number | undefined;
|
|
15
|
-
placeholder?: string;
|
|
16
|
-
styles?: CSSObject;
|
|
17
|
-
noHistory?: boolean;
|
|
18
13
|
}
|
|
19
|
-
export declare const NumberField: (
|
|
14
|
+
export declare const NumberField: (props: NumberFieldProps) => React.JSX.Element;
|
|
20
15
|
export {};
|
|
@@ -4,16 +4,14 @@ import { FiPlus, FiMinus } from "react-icons/fi";
|
|
|
4
4
|
const NumberFieldContainer = styled.div `
|
|
5
5
|
display: flex;
|
|
6
6
|
align-items: center;
|
|
7
|
-
|
|
8
|
-
${({ styles }) => styles && styles}
|
|
7
|
+
gap: -0.5px;
|
|
9
8
|
`;
|
|
10
9
|
const NumberInput = styled.input `
|
|
11
10
|
display: flex;
|
|
12
11
|
justify-content: center;
|
|
13
12
|
align-items: center;
|
|
14
13
|
text-align: center;
|
|
15
|
-
min-width:
|
|
16
|
-
width: 100%;
|
|
14
|
+
min-width: 120px;
|
|
17
15
|
gap: 10px;
|
|
18
16
|
align-self: stretch;
|
|
19
17
|
color: ${({ color }) => color.text.primary};
|
|
@@ -29,17 +27,12 @@ const NumberInput = styled.input `
|
|
|
29
27
|
&:focus-visible {
|
|
30
28
|
outline: none;
|
|
31
29
|
}
|
|
32
|
-
&::-webkit-inner-spin-button,
|
|
33
|
-
::-webkit-outer-spin-button {
|
|
34
|
-
-webkit-appearance: none;
|
|
35
|
-
margin: 0;
|
|
36
|
-
}
|
|
37
30
|
`;
|
|
38
31
|
const DecrementButton = styled.div `
|
|
39
32
|
cursor: pointer;
|
|
40
33
|
display: flex;
|
|
41
34
|
width: 16px;
|
|
42
|
-
height:
|
|
35
|
+
height: 26px;
|
|
43
36
|
padding: 8px 16px;
|
|
44
37
|
justify-content: center;
|
|
45
38
|
align-items: center;
|
|
@@ -54,7 +47,7 @@ const IncrementButton = styled.div `
|
|
|
54
47
|
cursor: pointer;
|
|
55
48
|
display: flex;
|
|
56
49
|
width: 16px;
|
|
57
|
-
height:
|
|
50
|
+
height: 26px;
|
|
58
51
|
padding: 8px 16px;
|
|
59
52
|
justify-content: center;
|
|
60
53
|
align-items: center;
|
|
@@ -63,37 +56,27 @@ const IncrementButton = styled.div `
|
|
|
63
56
|
border-color: ${({ color }) => color.border.primary};
|
|
64
57
|
background: ${({ color }) => color.background.primary};
|
|
65
58
|
color: ${({ color }) => color.text.primary};
|
|
66
|
-
|
|
67
|
-
${({ noHistory }) => !noHistory && `border-right: none;`}
|
|
59
|
+
border-right: none;
|
|
68
60
|
`;
|
|
69
|
-
export const NumberField = (
|
|
61
|
+
export const NumberField = (props) => {
|
|
62
|
+
const { colorPalette, handleChange, handleBlur, fromTable, value, placeholder, } = props;
|
|
70
63
|
const inputRef = useRef(null);
|
|
71
64
|
const [numberValue, setNumberValue] = useState(value ? Number(value) : "");
|
|
72
65
|
useEffect(() => {
|
|
73
66
|
setNumberValue(value ? Number(value) : "");
|
|
74
67
|
}, [value]);
|
|
75
68
|
const handleIncrement = () => {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
81
|
-
else {
|
|
82
|
-
setNumberValue(Number(numberValue) + 1);
|
|
83
|
-
event.target.value = String(Number(numberValue) + 1);
|
|
84
|
-
}
|
|
69
|
+
inputRef.current?.stepUp();
|
|
70
|
+
const value = String(inputRef.current?.value);
|
|
71
|
+
setNumberValue(value);
|
|
72
|
+
const event = { target: { name: "number", value: value } };
|
|
85
73
|
handleChange(event);
|
|
86
74
|
};
|
|
87
75
|
const handleDecrement = () => {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
else {
|
|
94
|
-
setNumberValue(Number(numberValue) - 1);
|
|
95
|
-
event.target.value = String(Number(numberValue) - 1);
|
|
96
|
-
}
|
|
76
|
+
inputRef.current?.stepDown();
|
|
77
|
+
const value = String(inputRef.current?.value);
|
|
78
|
+
setNumberValue(value);
|
|
79
|
+
const event = { target: { name: "number", value: value } };
|
|
97
80
|
handleChange(event);
|
|
98
81
|
};
|
|
99
82
|
const handleFocus = () => {
|
|
@@ -106,25 +89,15 @@ export const NumberField = ({ colorPalette, handleChange, handleBlur, fromTable,
|
|
|
106
89
|
}
|
|
107
90
|
};
|
|
108
91
|
const handleNumberChange = (e) => {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
e.target.value = "";
|
|
112
|
-
setNumberValue("");
|
|
113
|
-
}
|
|
114
|
-
else {
|
|
115
|
-
setNumberValue(value);
|
|
116
|
-
}
|
|
92
|
+
setNumberValue(e.target.value);
|
|
93
|
+
e.target.value = String(e.target.value);
|
|
117
94
|
handleChange(e);
|
|
118
95
|
};
|
|
119
|
-
return (React.createElement(NumberFieldContainer, { color: colorPalette
|
|
120
|
-
React.createElement(DecrementButton, { color: colorPalette, onClick: handleDecrement, tabIndex: -1, onBlur: () => {
|
|
121
|
-
handleBlur && handleBlur(inputRef.current?.value || "");
|
|
122
|
-
} },
|
|
96
|
+
return (React.createElement(NumberFieldContainer, { color: colorPalette },
|
|
97
|
+
React.createElement(DecrementButton, { color: colorPalette, onClick: handleDecrement, tabIndex: -1, onBlur: () => { handleBlur(inputRef.current?.value || ""); } },
|
|
123
98
|
React.createElement(FiMinus, null)),
|
|
124
|
-
React.createElement(NumberInput, { name: "number", value: numberValue, onChange: handleNumberChange, onBlur: (e) => handleBlur
|
|
125
|
-
React.createElement(IncrementButton, { color: colorPalette, onClick: handleIncrement, tabIndex: -1, onBlur: () => {
|
|
126
|
-
handleBlur && handleBlur(inputRef.current?.value || "");
|
|
127
|
-
}, noHistory: noHistory },
|
|
99
|
+
React.createElement(NumberInput, { name: "number", value: numberValue, onChange: handleNumberChange, onBlur: (e) => handleBlur(e.target.value), color: colorPalette, ref: inputRef, onFocus: handleFocus, placeholder: placeholder, type: "number", step: String(numberValue).includes(".") ? .1 : 1 }),
|
|
100
|
+
React.createElement(IncrementButton, { color: colorPalette, onClick: handleIncrement, tabIndex: -1, onBlur: () => { handleBlur(inputRef.current?.value || ""); } },
|
|
128
101
|
React.createElement(FiPlus, null))));
|
|
129
102
|
};
|
|
130
103
|
//# sourceMappingURL=NumberField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../lib/Atoms/NumberField/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,
|
|
1
|
+
{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../lib/Atoms/NumberField/NumberField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { Colors } from "../../Theme/types";
|
|
|
3
3
|
interface TextFieldWrapperProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
4
4
|
activeEditing: boolean;
|
|
5
5
|
colorPalette: Colors & string;
|
|
6
|
-
|
|
6
|
+
moreHorizon: JSX.Element;
|
|
7
7
|
}
|
|
8
8
|
export declare const TextFieldWrapper: (props: TextFieldWrapperProps) => React.JSX.Element;
|
|
9
9
|
export {};
|
|
@@ -5,21 +5,21 @@ const InputWrapper = styled.input `
|
|
|
5
5
|
min-width: 60px;
|
|
6
6
|
min-height: 30px;
|
|
7
7
|
font-weight: 600;
|
|
8
|
-
|
|
8
|
+
border-radius: 4px;
|
|
9
|
+
${({ moreHorizon }) => moreHorizon &&
|
|
9
10
|
`border-top-right-radius: 0px;border-bottom-right-radius: 0px;`}
|
|
10
11
|
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
11
|
-
border-radius: 4px;
|
|
12
12
|
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
13
13
|
border-style: solid;
|
|
14
14
|
border-width: 1px;
|
|
15
15
|
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
16
|
+
padding: 0;
|
|
16
17
|
padding-left: 16px;
|
|
17
|
-
${({
|
|
18
|
-
height:
|
|
19
|
-
margin: 8px 0;
|
|
18
|
+
${({ moreHorizon }) => moreHorizon && `border-right: none;`}
|
|
19
|
+
height: 38px;
|
|
20
20
|
`;
|
|
21
21
|
export const TextFieldWrapper = (props) => {
|
|
22
|
-
const { activeEditing, value, onChange,
|
|
22
|
+
const { activeEditing, value, onChange, moreHorizon } = props;
|
|
23
23
|
const [cursor, setCursor] = useState(null);
|
|
24
24
|
const ref = useRef(null);
|
|
25
25
|
useEffect(() => {
|
|
@@ -35,6 +35,8 @@ export const TextFieldWrapper = (props) => {
|
|
|
35
35
|
if (onChange)
|
|
36
36
|
onChange(e);
|
|
37
37
|
};
|
|
38
|
-
return (React.createElement(
|
|
38
|
+
return (React.createElement("div", { style: { display: "flex", width: "100%" } },
|
|
39
|
+
React.createElement(InputWrapper, { ...props, ref: ref, onChange: handleChange, moreHorizon: moreHorizon ? true : false }),
|
|
40
|
+
moreHorizon && moreHorizon));
|
|
39
41
|
};
|
|
40
42
|
//# sourceMappingURL=TextField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../lib/Atoms/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../lib/Atoms/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAG/B;;;;;;GAMC,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACrB,WAAW;IACX,+DAA+D;qBAC5C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;iBACzD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO;;;UAGxD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;;;GAGtD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,IAAI,qBAAqB;;CAE3D,CAAC;AAWF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;IAChE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAC9D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC1D,MAAM,GAAG,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC3C,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC;QAC1B,IAAI,aAAa,IAAI,MAAM,EAAE,CAAC;YAC7B,IAAI,KAAK,IAAI,MAAM,EAAE,CAAC;gBACrB,KAAK,CAAC,iBAAiB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACzC,CAAC;QACF,CAAC;IACF,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnC,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC/D,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QACnC,IAAI,QAAQ;YAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;QAC7C,oBAAC,YAAY,OACR,KAAK,EACT,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,GACtC;QACD,WAAW,IAAI,WAAW,CACtB,CACN,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { ReactNode, Dispatch, SetStateAction } from "react";
|
|
2
2
|
import { Colors } from "Theme/types";
|
|
3
|
-
export declare const Thumbnail: ({ colorPalette, handleSubmit, settingsChildren, showImage, setShowImage, fieldInstance, s3Key, signedUrl, uploadButtonText, handleRemove, changed,
|
|
3
|
+
export declare const Thumbnail: ({ colorPalette, handleSubmit, settingsChildren, showImage, setShowImage, fieldInstance, s3Key, signedUrl, uploadButtonText, handleRemove, changed, handleChange, }: {
|
|
4
4
|
colorPalette: Colors & string;
|
|
5
5
|
handleSubmit: (newValueData: {
|
|
6
6
|
target: {
|
|
@@ -8,7 +8,7 @@ export declare const Thumbnail: ({ colorPalette, handleSubmit, settingsChildren,
|
|
|
8
8
|
value: string;
|
|
9
9
|
};
|
|
10
10
|
}, useNewValue: boolean) => Promise<void>;
|
|
11
|
-
|
|
11
|
+
handleChange(e: React.DragEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement>): void;
|
|
12
12
|
settingsChildren: ReactNode;
|
|
13
13
|
showImage: boolean;
|
|
14
14
|
setShowImage: Dispatch<SetStateAction<boolean>>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useRef, } from "react";
|
|
1
|
+
import React, { useState, useRef, useEffect, } from "react";
|
|
2
2
|
import styled from "@emotion/styled";
|
|
3
3
|
import { FiTrash2, FiEye, FiEyeOff, FiSettings } from "react-icons/fi";
|
|
4
4
|
import { Button } from "../../Atoms/Buttons/Button";
|
|
@@ -53,7 +53,7 @@ const PreviewImage = styled.img `
|
|
|
53
53
|
left: 0;
|
|
54
54
|
z-index: 1;
|
|
55
55
|
`;
|
|
56
|
-
export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showImage, setShowImage, fieldInstance, s3Key, signedUrl, uploadButtonText, handleRemove, changed,
|
|
56
|
+
export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showImage, setShowImage, fieldInstance, s3Key, signedUrl, uploadButtonText, handleRemove, changed, handleChange, }) => {
|
|
57
57
|
const [selectedImage, setSelectedImage] = useState(null);
|
|
58
58
|
const [showSettings, setShowSettings] = useState(false);
|
|
59
59
|
const acceptedFileTypes = [
|
|
@@ -63,11 +63,27 @@ export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showIm
|
|
|
63
63
|
"image/gif",
|
|
64
64
|
];
|
|
65
65
|
const inputRef = useRef(null);
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
if (inputRef && inputRef.current?.files?.[0]) {
|
|
68
|
+
const file = inputRef.current?.files?.[0];
|
|
69
|
+
if (file) {
|
|
70
|
+
const imageUrl = URL.createObjectURL(file);
|
|
71
|
+
setSelectedImage(imageUrl);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
else if (signedUrl && typeof signedUrl === "string") {
|
|
75
|
+
setSelectedImage(signedUrl);
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
setSelectedImage(null);
|
|
79
|
+
}
|
|
80
|
+
}, [signedUrl, s3Key]);
|
|
66
81
|
const handleImageUpload = (event) => {
|
|
67
82
|
const file = event.target.files?.[0];
|
|
68
83
|
if (file) {
|
|
69
84
|
const imageUrl = URL.createObjectURL(file);
|
|
70
85
|
setSelectedImage(imageUrl);
|
|
86
|
+
handleChange(event);
|
|
71
87
|
}
|
|
72
88
|
};
|
|
73
89
|
const handleDrop = (event) => {
|
|
@@ -76,6 +92,10 @@ export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showIm
|
|
|
76
92
|
if (file) {
|
|
77
93
|
const imageUrl = URL.createObjectURL(file);
|
|
78
94
|
setSelectedImage(imageUrl);
|
|
95
|
+
const dropEvent = { target: { files: event.dataTransfer.files, name: "key", type: "file" } };
|
|
96
|
+
if (inputRef.current)
|
|
97
|
+
inputRef.current.files = event.dataTransfer.files;
|
|
98
|
+
handleChange(dropEvent);
|
|
79
99
|
}
|
|
80
100
|
};
|
|
81
101
|
const handleDragOver = (event) => {
|
|
@@ -84,7 +104,6 @@ export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showIm
|
|
|
84
104
|
const handleBrowseClick = (event) => {
|
|
85
105
|
if (inputRef && inputRef.current)
|
|
86
106
|
inputRef.current.click();
|
|
87
|
-
handleClick(event);
|
|
88
107
|
};
|
|
89
108
|
const handleToggleImage = () => {
|
|
90
109
|
setShowImage(!showImage);
|
|
@@ -95,17 +114,15 @@ export const Thumbnail = ({ colorPalette, handleSubmit, settingsChildren, showIm
|
|
|
95
114
|
};
|
|
96
115
|
return (React.createElement(Container, { color: colorPalette, showImage: showImage, showSettings: showSettings, key: `thumbnail_${fieldInstance.id}` },
|
|
97
116
|
React.createElement("div", { style: { display: "flex" } },
|
|
98
|
-
React.createElement(Button, { colorPalette: colorPalette, icon: !showImage ? React.createElement(FiEye, null) : React.createElement(FiEyeOff, null), variant: "outlined", onClick: handleToggleImage }),
|
|
99
|
-
selectedImage && (React.createElement(React.Fragment, null,
|
|
117
|
+
React.createElement(Button, { colorPalette: colorPalette, icon: !showImage ? React.createElement(FiEye, null) : React.createElement(FiEyeOff, null), variant: "outlined", onClick: handleToggleImage, "aria-label": !showImage ? "show-image" : "hide-image" }),
|
|
118
|
+
showImage && selectedImage && (React.createElement(React.Fragment, null,
|
|
100
119
|
React.createElement(Button, { colorPalette: colorPalette, icon: React.createElement(FiSettings, null), variant: "outlined", styles: { borderColor: "transparent" }, onClick: handleToggleSettings }),
|
|
101
|
-
|
|
120
|
+
handleRemove && (React.createElement(Button, { colorPalette: colorPalette, icon: React.createElement(FiTrash2, null), variant: "destructive", onClick: handleRemove }))))),
|
|
102
121
|
showImage && !showSettings && (React.createElement(InputArea, { onDrop: handleDrop, onDragOver: handleDragOver, color: colorPalette },
|
|
103
|
-
selectedImage && (React.createElement(PreviewImage, { alt: s3Key || "Uploaded Image", color: colorPalette, src:
|
|
104
|
-
? signedUrl
|
|
105
|
-
: URL.createObjectURL(signedUrl.files[0]) || selectedImage })),
|
|
122
|
+
selectedImage && (React.createElement(PreviewImage, { alt: s3Key || "Uploaded Image", color: colorPalette, src: selectedImage })),
|
|
106
123
|
React.createElement(Button, { colorPalette: colorPalette, label: "Browse", styles: { input: { display: "none" } }, variant: "filled", onClick: handleBrowseClick },
|
|
107
|
-
React.createElement("input", { type: "file", accept: acceptedFileTypes.join(","), onChange: handleImageUpload, ref: inputRef, id: `upload-image-${fieldInstance.id}`,
|
|
124
|
+
React.createElement("input", { type: "file", name: "key", accept: acceptedFileTypes.join(","), onChange: handleImageUpload, ref: inputRef, id: `upload-image-${fieldInstance.id}`, multiple: false })))),
|
|
108
125
|
showSettings && showImage && (React.createElement(SettingsArea, { color: colorPalette }, settingsChildren)),
|
|
109
|
-
changed && (React.createElement(Button, { colorPalette: colorPalette, onClick:
|
|
126
|
+
changed && (React.createElement(Button, { colorPalette: colorPalette, onClick: handleSubmit, variant: "filled", styles: { margin: "0 auto" } }, uploadButtonText))));
|
|
110
127
|
};
|
|
111
128
|
//# sourceMappingURL=Thumbnail.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../lib/Molecules/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACb,QAAQ,EAER,MAAM,
|
|
1
|
+
{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../lib/Molecules/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Colors } from "../../Theme/types";
|
|
3
|
+
interface CardProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
4
|
+
colorPalette: Colors & string;
|
|
5
|
+
thumbnail: JSX.Element;
|
|
6
|
+
thumbnailSectionFields: React.ReactNode[] | JSX.Element[];
|
|
7
|
+
remainingFields: React.ReactNode[] | JSX.Element[];
|
|
8
|
+
buttons: React.ReactNode[] | JSX.Element[];
|
|
9
|
+
}
|
|
10
|
+
export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React, { forwardRef } from "react";
|
|
2
|
+
import styled from "@emotion/styled";
|
|
3
|
+
const CardContainer = styled.div `
|
|
4
|
+
padding: 24px;
|
|
5
|
+
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
6
|
+
border-width: 0.5px;
|
|
7
|
+
border-style: solid;
|
|
8
|
+
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
9
|
+
border-right: none;
|
|
10
|
+
border-left: none;
|
|
11
|
+
`;
|
|
12
|
+
const FieldsXThumbnailSection = styled.section `
|
|
13
|
+
display: flex;
|
|
14
|
+
justify-content: space-between;
|
|
15
|
+
flex-direction: row-reverse;
|
|
16
|
+
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
17
|
+
@media (max-width: 600px) {
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
align-items: flex-end;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
:has(div > div[aria-label="show-image"]) {
|
|
23
|
+
flex-direction: column;
|
|
24
|
+
}
|
|
25
|
+
`;
|
|
26
|
+
const ThumbnailSectionFields = styled.section `
|
|
27
|
+
padding: 16px 24px 0px 0px;
|
|
28
|
+
background-color: ${({ colorPalette }) => colorPalette.background.primary};
|
|
29
|
+
display: flex;
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
width: 100%;
|
|
33
|
+
@media (max-width: 600px) {
|
|
34
|
+
padding: 16px 0px 0px 24px;
|
|
35
|
+
}
|
|
36
|
+
`;
|
|
37
|
+
const ButtonContainer = styled.div `
|
|
38
|
+
display: flex;
|
|
39
|
+
justify-content: flex-end;
|
|
40
|
+
gap: 24px;
|
|
41
|
+
padding-top: 24px;
|
|
42
|
+
`;
|
|
43
|
+
export const Card = forwardRef((props, ref) => {
|
|
44
|
+
const { colorPalette, thumbnail, thumbnailSectionFields, remainingFields, buttons, } = props;
|
|
45
|
+
return (React.createElement(CardContainer, { ...props, ref: ref, colorPalette: colorPalette },
|
|
46
|
+
React.createElement(FieldsXThumbnailSection, { colorPalette: colorPalette },
|
|
47
|
+
thumbnail,
|
|
48
|
+
React.createElement(ThumbnailSectionFields, { colorPalette: colorPalette }, Array.isArray(thumbnailSectionFields) &&
|
|
49
|
+
thumbnailSectionFields.map((element) => element))),
|
|
50
|
+
Array.isArray(remainingFields) &&
|
|
51
|
+
remainingFields.map((element) => element),
|
|
52
|
+
React.createElement(ButtonContainer, null, buttons.map((element) => element))));
|
|
53
|
+
});
|
|
54
|
+
//# sourceMappingURL=Card.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../lib/Organisms/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAA0B;;qBAErC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;;;iBAGzD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO;;;CAGjE,CAAC;AAEF,MAAM,uBAAuB,GAAG,MAAM,CAAC,OAAO,CAE5C;;;;qBAImB,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;;;;;;;;;CASzE,CAAC;AAEF,MAAM,sBAAsB,GAAG,MAAM,CAAC,OAAO,CAA0B;;qBAElD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;;;;;;;;CAQzE,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKjC,CAAC;AAcF,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC7B,CAAC,KAAgB,EAAE,GAAiC,EAAE,EAAE;IACvD,MAAM,EACL,YAAY,EACZ,SAAS,EACT,sBAAsB,EACtB,eAAe,EACf,OAAO,GACP,GAAG,KAAK,CAAC;IACV,OAAO,CACN,oBAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,EAAE,YAAY;QAC7D,oBAAC,uBAAuB,IAAC,YAAY,EAAE,YAAY;YACjD,SAAS;YACV,oBAAC,sBAAsB,IAAC,YAAY,EAAE,YAAY,IAChD,KAAK,CAAC,OAAO,CAAC,sBAAsB,CAAC;gBACrC,sBAAsB,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,CACzB,CACA;QACzB,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC;YAC9B,eAAe,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC;QAC1C,oBAAC,eAAe,QAAE,OAAO,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,CAAmB,CACvD,CAChB,CAAC;AACH,CAAC,CACD,CAAC"}
|
|
@@ -1,9 +1,96 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Colors } from "Theme/types";
|
|
3
|
-
export declare const lightTheme:
|
|
4
|
-
|
|
3
|
+
export declare const lightTheme: {
|
|
4
|
+
text: {
|
|
5
|
+
primary: string;
|
|
6
|
+
secondary: string;
|
|
7
|
+
tertiary: string;
|
|
8
|
+
badge: string;
|
|
9
|
+
};
|
|
10
|
+
background: {
|
|
11
|
+
primary: string;
|
|
12
|
+
secondary: string;
|
|
13
|
+
tertiary: string;
|
|
14
|
+
tableRow: string;
|
|
15
|
+
};
|
|
16
|
+
border: {
|
|
17
|
+
primary: string;
|
|
18
|
+
secondary: string;
|
|
19
|
+
tertiary: string;
|
|
20
|
+
};
|
|
21
|
+
highlight: {
|
|
22
|
+
primary: string;
|
|
23
|
+
secondary: string;
|
|
24
|
+
};
|
|
25
|
+
utils: {
|
|
26
|
+
success: string;
|
|
27
|
+
error: string;
|
|
28
|
+
icon: string;
|
|
29
|
+
disabled: string;
|
|
30
|
+
};
|
|
31
|
+
theme: string;
|
|
32
|
+
};
|
|
33
|
+
export declare const darkTheme: {
|
|
34
|
+
text: {
|
|
35
|
+
primary: string;
|
|
36
|
+
secondary: string;
|
|
37
|
+
tertiary: string;
|
|
38
|
+
badge: string;
|
|
39
|
+
};
|
|
40
|
+
background: {
|
|
41
|
+
primary: string;
|
|
42
|
+
secondary: string;
|
|
43
|
+
tertiary: string;
|
|
44
|
+
tableRow: string;
|
|
45
|
+
};
|
|
46
|
+
border: {
|
|
47
|
+
primary: string;
|
|
48
|
+
secondary: string;
|
|
49
|
+
tertiary: string;
|
|
50
|
+
};
|
|
51
|
+
highlight: {
|
|
52
|
+
primary: string;
|
|
53
|
+
secondary: string;
|
|
54
|
+
};
|
|
55
|
+
utils: {
|
|
56
|
+
success: string;
|
|
57
|
+
error: string;
|
|
58
|
+
icon: string;
|
|
59
|
+
disabled: string;
|
|
60
|
+
};
|
|
61
|
+
theme: string;
|
|
62
|
+
};
|
|
5
63
|
export declare const useTheme: () => {
|
|
6
|
-
theme:
|
|
64
|
+
theme: {
|
|
65
|
+
text: {
|
|
66
|
+
primary: string;
|
|
67
|
+
secondary: string;
|
|
68
|
+
tertiary: string;
|
|
69
|
+
badge: string;
|
|
70
|
+
};
|
|
71
|
+
background: {
|
|
72
|
+
primary: string;
|
|
73
|
+
secondary: string;
|
|
74
|
+
tertiary: string;
|
|
75
|
+
tableRow: string;
|
|
76
|
+
};
|
|
77
|
+
border: {
|
|
78
|
+
primary: string;
|
|
79
|
+
secondary: string;
|
|
80
|
+
tertiary: string;
|
|
81
|
+
};
|
|
82
|
+
highlight: {
|
|
83
|
+
primary: string;
|
|
84
|
+
secondary: string;
|
|
85
|
+
};
|
|
86
|
+
utils: {
|
|
87
|
+
success: string;
|
|
88
|
+
error: string;
|
|
89
|
+
icon: string;
|
|
90
|
+
disabled: string;
|
|
91
|
+
};
|
|
92
|
+
theme: string;
|
|
93
|
+
};
|
|
7
94
|
setTheme: (themeName: "light" | "dark") => void;
|
|
8
95
|
};
|
|
9
96
|
export declare const ThemeProvider: ({ children, themeValue }: {
|
|
@@ -48,24 +48,6 @@ export const lightTheme = {
|
|
|
48
48
|
icon: grey["700"],
|
|
49
49
|
disabled: grey["500"],
|
|
50
50
|
},
|
|
51
|
-
buttonText: {
|
|
52
|
-
filled: grey["200"],
|
|
53
|
-
outlined: blue["700"],
|
|
54
|
-
destructive: grey["200"],
|
|
55
|
-
success: green["500"],
|
|
56
|
-
},
|
|
57
|
-
buttonBorder: {
|
|
58
|
-
filled: blue["700"],
|
|
59
|
-
outlined: blue["700"],
|
|
60
|
-
destructive: red["500"],
|
|
61
|
-
success: green["500"],
|
|
62
|
-
},
|
|
63
|
-
buttonBackground: {
|
|
64
|
-
filled: blue["700"],
|
|
65
|
-
outlined: grey["200"],
|
|
66
|
-
destructive: red["500"],
|
|
67
|
-
success: green["500"],
|
|
68
|
-
},
|
|
69
51
|
theme: "light",
|
|
70
52
|
};
|
|
71
53
|
export const darkTheme = {
|
|
@@ -96,24 +78,6 @@ export const darkTheme = {
|
|
|
96
78
|
icon: grey["200"],
|
|
97
79
|
disabled: grey["700"],
|
|
98
80
|
},
|
|
99
|
-
buttonText: {
|
|
100
|
-
filled: grey["700"],
|
|
101
|
-
outlined: grey["200"],
|
|
102
|
-
destructive: grey["200"],
|
|
103
|
-
success: green["500"],
|
|
104
|
-
},
|
|
105
|
-
buttonBorder: {
|
|
106
|
-
filled: blue["700"],
|
|
107
|
-
outlined: grey["200"],
|
|
108
|
-
destructive: red["500"],
|
|
109
|
-
success: green["500"]
|
|
110
|
-
},
|
|
111
|
-
buttonBackground: {
|
|
112
|
-
filled: grey["200"],
|
|
113
|
-
outlined: grey["700"],
|
|
114
|
-
destructive: red["500"],
|
|
115
|
-
success: green["500"],
|
|
116
|
-
},
|
|
117
81
|
theme: "dark",
|
|
118
82
|
};
|
|
119
83
|
const ThemeContext = createContext({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../lib/Theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,MAAM,MAAM,eAAe,CAAC;AAInC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAoB;IACnD,IAAI,EAAE;QACL,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,iBAAiB,CAAC,CAAC,KAAK;QAC1D,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK;KACnD;IACD,IAAI,EAAE;QACL,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK;KACnD;IACD,KAAK,EAAE;QACN,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK;KACpD;IACD,GAAG,EAAE;QACJ,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK;KAClD;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../lib/Theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,MAAM,MAAM,eAAe,CAAC;AAInC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAoB;IACnD,IAAI,EAAE;QACL,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,iBAAiB,CAAC,CAAC,KAAK;QAC1D,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK;KACnD;IACD,IAAI,EAAE;QACL,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK;QACzD,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK;KACnD;IACD,KAAK,EAAE;QACN,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK;KACpD;IACD,GAAG,EAAE;QACJ,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK;KAClD;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACzB,IAAI,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;QACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC;KAClB;IACD,UAAU,EAAE;QACX,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;QACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACrB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;KACrB;IACD,MAAM,EAAE;QACP,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;QACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;KACrB;IACD,SAAS,EAAE;QACV,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;KACtB;IACD,KAAK,EAAE;QACN,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC;QACrB,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC;QACjB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;QACjB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;KACrB;IACD,KAAK,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACxB,IAAI,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;QACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC;KAClB;IACD,UAAU,EAAE;QACX,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;QACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACrB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;KACrB;IACD,MAAM,EAAE;QACP,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;QACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;KACrB;IACD,SAAS,EAAE;QACV,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;QACpB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;KACtB;IACD,KAAK,EAAE;QACN,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC;QACrB,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC;QACjB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;QACjB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;KACrB;IACD,KAAK,EAAE,MAAM;CACb,CAAC;AAEF,MAAM,YAAY,GAAG,aAAa,CAAC;IAClC,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,CAAC,SAA2B,EAAE,EAAE,GAAE,CAAC;CAC7C,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAqD,EAAE,EAAE;IAC5G,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/C,MAAM,WAAW,GAAG,CAAC,SAA2B,EAAE,EAAE;QACnD,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;YAC3B,QAAQ,CAAC,UAAU,CAAC,CAAC;YACrB,OAAO;QACR,CAAC;QACD,QAAQ,CAAC,SAAS,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACN,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE;QACzE,6BACC,KAAK,EAAE;gBACN,eAAe,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO;gBACzC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO;aACzB,IAEA,QAAQ,CACJ,CACiB,CACxB,CAAC;AACH,CAAC,CAAC"}
|
package/dist/Theme/types.d.ts
CHANGED
|
@@ -40,23 +40,10 @@ export interface Colors {
|
|
|
40
40
|
secondary: string;
|
|
41
41
|
tertiary: string;
|
|
42
42
|
};
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
success: string;
|
|
48
|
-
};
|
|
49
|
-
buttonBorder: {
|
|
50
|
-
outlined: string;
|
|
51
|
-
filled: string;
|
|
52
|
-
destructive: string;
|
|
53
|
-
success: string;
|
|
54
|
-
};
|
|
55
|
-
buttonBackground: {
|
|
56
|
-
outlined: string;
|
|
57
|
-
filled: string;
|
|
58
|
-
destructive: string;
|
|
59
|
-
success: string;
|
|
43
|
+
button: {
|
|
44
|
+
primary: string;
|
|
45
|
+
secondary: string;
|
|
46
|
+
tertiary: string;
|
|
60
47
|
};
|
|
61
48
|
highlight: {
|
|
62
49
|
primary: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -2,8 +2,3 @@ export * from "./Atoms/MoreHorizonButton/MoreHorizonButton";
|
|
|
2
2
|
export * from "./Atoms/NumberField/NumberField";
|
|
3
3
|
export * from "./Atoms/Pagination/Pagination";
|
|
4
4
|
export * from "./Atoms/DateField/DateField";
|
|
5
|
-
export * from "./Atoms/TextField/TextField";
|
|
6
|
-
export * from "./Atoms/Buttons/Button";
|
|
7
|
-
export * from "./Atoms/FieldWrapper/FieldWrapper";
|
|
8
|
-
export * from "./Atoms/DropdownField/DropdownField";
|
|
9
|
-
export * from "./Molecules/Thumbnail/Thumbnail";
|
package/dist/index.js
CHANGED
|
@@ -4,9 +4,4 @@ export * from "./Atoms/NumberField/NumberField";
|
|
|
4
4
|
export * from "./Atoms/Pagination/Pagination";
|
|
5
5
|
// export * from "./Atoms/SortDropdown/SortDropdown";
|
|
6
6
|
export * from "./Atoms/DateField/DateField";
|
|
7
|
-
export * from "./Atoms/TextField/TextField";
|
|
8
|
-
export * from "./Atoms/Buttons/Button";
|
|
9
|
-
export * from "./Atoms/FieldWrapper/FieldWrapper";
|
|
10
|
-
export * from "./Atoms/DropdownField/DropdownField";
|
|
11
|
-
export * from "./Molecules/Thumbnail/Thumbnail";
|
|
12
7
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iCAAiC,CAAC;AAChD,6DAA6D;AAC7D,cAAc,+BAA+B,CAAC;AAC9C,qDAAqD;AACrD,cAAc,6BAA6B,CAAC
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iCAAiC,CAAC;AAChD,6DAA6D;AAC7D,cAAc,+BAA+B,CAAC;AAC9C,qDAAqD;AACrD,cAAc,6BAA6B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@factorearth/component-library",
|
|
3
|
-
"version": "3.0.28
|
|
3
|
+
"version": "3.0.28",
|
|
4
4
|
"description": " A storybook component library for FactorEarth",
|
|
5
5
|
"author": "madtrx <marlin.makori@gmail.com>",
|
|
6
6
|
"homepage": "https://github.com/FactorEarth/RecordMiddleware#readme",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"access": "public",
|
|
46
46
|
"registry": "https://registry.npmjs.org/"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "25f43e33aa8c943019e851143fd21030aca90ec7",
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@emotion/react": "^11.13.0",
|
|
51
51
|
"@emotion/styled": "^11.13.0",
|