@factorearth/component-library 3.1.3 → 3.1.5-alpha.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/Atoms/DateField/DateField.js +1 -0
- package/dist/Atoms/DropdownField/DropdownField.js +6 -21
- package/dist/Atoms/DropdownField/DropdownField.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/package.json +2 -2
|
@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
|
|
|
3
3
|
import { FiCalendar } from "react-icons/fi";
|
|
4
4
|
import DatePicker from "react-datepicker";
|
|
5
5
|
import "react-datepicker/dist/react-datepicker.css";
|
|
6
|
+
|
|
6
7
|
const DateIcon = styled(FiCalendar) `
|
|
7
8
|
color: ${({ color }) => color.text.primary};
|
|
8
9
|
background: ${({ color }) => color.background.primary};
|
|
@@ -5,7 +5,8 @@ export const DropdownSelect = (props) => {
|
|
|
5
5
|
const { colorPalette, moreHorizon, createAble } = props;
|
|
6
6
|
const styles = {
|
|
7
7
|
control: (provided, state) => ({
|
|
8
|
-
|
|
8
|
+
...provided,
|
|
9
|
+
paddingLeft: "8px",
|
|
9
10
|
justifyContent: "center",
|
|
10
11
|
alignSelf: "stretch",
|
|
11
12
|
backgroundColor: colorPalette.background.primary,
|
|
@@ -15,28 +16,13 @@ export const DropdownSelect = (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
22
|
borderTopRightRadius: !moreHorizon ? "4px" : "0px",
|
|
21
23
|
borderBottomRightRadius: !moreHorizon ? "4px" : "0px",
|
|
22
|
-
border:
|
|
23
|
-
|
|
24
|
-
: `1px solid ${colorPalette.border.primary}`,
|
|
25
|
-
":hover": {
|
|
26
|
-
...provided[":hover"],
|
|
27
|
-
border: `1px solid ${colorPalette.border.primary}`,
|
|
28
|
-
boxShadow: "none",
|
|
29
|
-
},
|
|
30
|
-
":active": {
|
|
31
|
-
...provided[":active"],
|
|
32
|
-
border: `1px solid ${colorPalette.border.primary}`,
|
|
33
|
-
boxShadow: "none",
|
|
34
|
-
},
|
|
35
|
-
":focus": {
|
|
36
|
-
...provided[":focus"],
|
|
37
|
-
border: `1px solid ${colorPalette.border.primary}`,
|
|
38
|
-
boxShadow: "none",
|
|
39
|
-
},
|
|
24
|
+
borderRight: moreHorizon ? `1px solid ${colorPalette.border.primary}` : "none",
|
|
25
|
+
border: `1px solid ${colorPalette.border.primary}`,
|
|
40
26
|
"::placeholder": {
|
|
41
27
|
color: colorPalette.text.secondary,
|
|
42
28
|
},
|
|
@@ -45,7 +31,6 @@ export const DropdownSelect = (props) => {
|
|
|
45
31
|
input: (provided, state) => ({
|
|
46
32
|
...provided,
|
|
47
33
|
color: colorPalette.text.primary,
|
|
48
|
-
height: "40px",
|
|
49
34
|
width: "100%",
|
|
50
35
|
}),
|
|
51
36
|
container: (provided, state) => ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownField.js","sourceRoot":"","sources":["../../../lib/Atoms/DropdownField/DropdownField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAA4B,MAAM,cAAc,CAAC;AAExD,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAehD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAY,EAAE,EAAE;IAC9C,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IACxD,MAAM,MAAM,GAAG;QACd,OAAO,EAAE,CAAC,QAAa,EAAE,KAAU,EAAE,EAAE,CAAC,CAAC;YACxC,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"DropdownField.js","sourceRoot":"","sources":["../../../lib/Atoms/DropdownField/DropdownField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@factorearth/component-library",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.5-alpha.0",
|
|
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": "9012c6e17b4f6d9b4d1a7bc4f9867e8c715f7915",
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@emotion/react": "^11.13.0",
|
|
51
51
|
"@emotion/styled": "^11.13.0",
|