@factorearth/component-library 3.6.4-alpha.0 → 3.6.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/Badge/Badge.d.ts +11 -0
- package/dist/Atoms/Badge/Badge.js +24 -0
- package/dist/Atoms/Badge/Badge.js.map +1 -0
- package/dist/Atoms/ContentDropdown/ContentDropdown.d.ts +11 -0
- package/dist/Atoms/ContentDropdown/ContentDropdown.js +37 -0
- package/dist/Atoms/ContentDropdown/ContentDropdown.js.map +1 -0
- package/dist/Atoms/Tab/Tab.d.ts +10 -0
- package/dist/Atoms/Tab/Tab.js +27 -0
- package/dist/Atoms/Tab/Tab.js.map +1 -0
- package/dist/Molecules/Form/Form.d.ts +14 -0
- package/dist/Molecules/Form/Form.js +17 -0
- package/dist/Molecules/Form/Form.js.map +1 -0
- package/dist/Molecules/NavMenu/NavMenu.d.ts +5 -6
- package/dist/Molecules/NavMenu/NavMenu.js +3 -8
- package/dist/Molecules/NavMenu/NavMenu.js.map +1 -1
- package/dist/Molecules/TableHeader/TableHeader.d.ts +12 -0
- package/dist/Molecules/TableHeader/TableHeader.js +28 -0
- package/dist/Molecules/TableHeader/TableHeader.js.map +1 -0
- package/dist/Molecules/TableRow/TableRow.d.ts +19 -0
- package/dist/Molecules/TableRow/TableRow.js +36 -0
- package/dist/Molecules/TableRow/TableRow.js.map +1 -0
- package/dist/Organisms/EditUserPerms/EditUserPerms.d.ts +53 -0
- package/dist/Organisms/EditUserPerms/EditUserPerms.js +149 -0
- package/dist/Organisms/EditUserPerms/EditUserPerms.js.map +1 -0
- package/dist/Organisms/TabManager/TabManager.d.ts +9 -0
- package/dist/Organisms/TabManager/TabManager.js +47 -0
- package/dist/Organisms/TabManager/TabManager.js.map +1 -0
- package/dist/Organisms/Table/Table.d.ts +19 -0
- package/dist/Organisms/Table/Table.js +29 -0
- package/dist/Organisms/Table/Table.js.map +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Colors } from "../../Theme/types";
|
|
3
|
+
type Variant = "true" | "false";
|
|
4
|
+
interface Props {
|
|
5
|
+
icon?: React.JSX.Element;
|
|
6
|
+
label: string;
|
|
7
|
+
theme: Colors;
|
|
8
|
+
variant: Variant;
|
|
9
|
+
}
|
|
10
|
+
export declare const Badge: (props: Props) => React.JSX.Element;
|
|
11
|
+
export default Badge;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import styled from "@emotion/styled";
|
|
2
|
+
import React from "react";
|
|
3
|
+
const BadgeContainer = styled.div `
|
|
4
|
+
display: flex;
|
|
5
|
+
padding: 6px 8px;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
align-items: center;
|
|
8
|
+
gap: 4px;
|
|
9
|
+
border-radius: 32px;
|
|
10
|
+
background-color: ${({ colors, variant }) => colors.badge[variant]}
|
|
11
|
+
`;
|
|
12
|
+
const Label = styled.p `
|
|
13
|
+
margin: 0px;
|
|
14
|
+
font-size: 12px;
|
|
15
|
+
color: ${({ colors, variant }) => colors.badgeText[variant]}
|
|
16
|
+
`;
|
|
17
|
+
export const Badge = (props) => {
|
|
18
|
+
const { icon, label, theme, variant } = props;
|
|
19
|
+
return (React.createElement(BadgeContainer, { colors: theme, variant: variant },
|
|
20
|
+
icon && icon,
|
|
21
|
+
React.createElement(Label, { colors: theme, variant: variant }, label)));
|
|
22
|
+
};
|
|
23
|
+
export default Badge;
|
|
24
|
+
//# sourceMappingURL=Badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../lib/Atoms/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAuC;;;;;;;qBAOnD,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;CAClE,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAuC;;;UAGnD,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC;CAC3D,CAAC;AASF,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAY,EAAE,EAAE;IACrC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC9C,OAAO,CACN,oBAAC,cAAc,IACd,MAAM,EAAE,KAAK,EACb,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,IAAI;QACb,oBAAC,KAAK,IACL,MAAM,EAAE,KAAK,EACb,OAAO,EAAE,OAAO,IAEf,KAAK,CACC,CACQ,CACjB,CAAC;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Colors } from "../../Theme/types";
|
|
3
|
+
interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
4
|
+
colors: Colors;
|
|
5
|
+
expanded: boolean;
|
|
6
|
+
handleClick: () => void;
|
|
7
|
+
icon?: JSX.Element;
|
|
8
|
+
label: string;
|
|
9
|
+
}
|
|
10
|
+
declare function ContentDropdown(props: Props): React.JSX.Element;
|
|
11
|
+
export default ContentDropdown;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import styled from "@emotion/styled";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { FiChevronDown, FiChevronUp } from "react-icons/fi";
|
|
4
|
+
const Container = styled.div `
|
|
5
|
+
display: flex;
|
|
6
|
+
width: 100%;
|
|
7
|
+
padding: 16px 0px;
|
|
8
|
+
flex-direction: column;
|
|
9
|
+
background-color: ${({ colors }) => colors.buttonBackground.outlined};
|
|
10
|
+
`;
|
|
11
|
+
const PseudoButton = styled.div `
|
|
12
|
+
display: flex;
|
|
13
|
+
padding: 8px 16px;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
align-items: center;
|
|
16
|
+
gap: 10px;
|
|
17
|
+
border-radius: 4px;
|
|
18
|
+
`;
|
|
19
|
+
const Label = styled.p `
|
|
20
|
+
color: ${({ colors }) => colors.buttonText.outlined};
|
|
21
|
+
font-size: 20.992px;
|
|
22
|
+
font-style: normal;
|
|
23
|
+
font-weight: 700;
|
|
24
|
+
line-height: 150%;
|
|
25
|
+
`;
|
|
26
|
+
function ContentDropdown(props) {
|
|
27
|
+
const { colors, expanded, handleClick, icon, label, ...remainderProps } = props;
|
|
28
|
+
return (React.createElement(Container, { colors: colors, onClick: handleClick, role: "button", ...remainderProps },
|
|
29
|
+
React.createElement(PseudoButton, { colors: colors },
|
|
30
|
+
icon && icon,
|
|
31
|
+
React.createElement(Label, { colors: colors }, label),
|
|
32
|
+
expanded ?
|
|
33
|
+
React.createElement(FiChevronUp, { color: colors.buttonText.outlined, style: { width: "24px", height: "24px" } }) :
|
|
34
|
+
React.createElement(FiChevronDown, { color: colors.buttonText.outlined, style: { width: "24px", height: "24px" } }))));
|
|
35
|
+
}
|
|
36
|
+
export default ContentDropdown;
|
|
37
|
+
//# sourceMappingURL=ContentDropdown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ContentDropdown.js","sourceRoot":"","sources":["../../../lib/Atoms/ContentDropdown/ContentDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG5D,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAqB;;;;;qBAK5B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ;CACpE,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAqB;;;;;;;CAOnD,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAqB;UACjC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ;;;;;CAKnD,CAAC;AAUF,SAAS,eAAe,CAAC,KAAY;IACpC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;IAEhF,OAAO,CACN,oBAAC,SAAS,IACT,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,QAAQ,KACT,cAAc;QAElB,oBAAC,YAAY,IACZ,MAAM,EAAE,MAAM;YAEb,IAAI,IAAI,IAAI;YACb,oBAAC,KAAK,IAAC,MAAM,EAAE,MAAM,IAAG,KAAK,CAAS;YACrC,QAAQ,CAAC,CAAC;gBACV,oBAAC,WAAW,IACX,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,QAAQ,EACjC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GACvC,CAAC,CAAC;gBACJ,oBAAC,aAAa,IACb,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,QAAQ,EACjC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GACvC,CAEW,CACJ,CACZ,CAAC;AACH,CAAC;AAED,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import styled from "@emotion/styled";
|
|
2
|
+
import React from "react";
|
|
3
|
+
const TabDiv = styled.div `
|
|
4
|
+
display: flex;
|
|
5
|
+
padding: 6px 12px;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
align-items: center;
|
|
8
|
+
gap: 8px;
|
|
9
|
+
border-radius: 4px 4px 0px 0px;
|
|
10
|
+
background: ${({ colors, selected }) => selected ? colors.tab.selected : colors.tab.notSelected};
|
|
11
|
+
cursor: ${({ selected }) => selected ? "auto" : "pointer"};
|
|
12
|
+
border: .5px solid ${({ colors }) => colors.tab.selected};
|
|
13
|
+
`;
|
|
14
|
+
const Label = styled.p `
|
|
15
|
+
color: ${({ colors, selected }) => selected ? colors.tabText.selected : colors.tabText.notSelected};
|
|
16
|
+
font-size: 14px;
|
|
17
|
+
line-height: 150%;
|
|
18
|
+
font-weight: 700;
|
|
19
|
+
margin: 0px;
|
|
20
|
+
`;
|
|
21
|
+
function Tab(props) {
|
|
22
|
+
const { colors, handleClick, label, selected, ...remainingProps } = props;
|
|
23
|
+
return (React.createElement(TabDiv, { colors: colors, selected: selected, role: !selected ? "button" : undefined, "aria-label": `${label} tab`, onClick: !selected ? handleClick : undefined, ...remainingProps },
|
|
24
|
+
React.createElement(Label, { colors: colors, selected: selected }, label)));
|
|
25
|
+
}
|
|
26
|
+
export default Tab;
|
|
27
|
+
//# sourceMappingURL=Tab.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../lib/Atoms/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAyC;;;;;;;eAOnD,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW;WACrF,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;sBACpC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ;CACxD,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAyC;UACrD,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW;;;;;CAKlG,CAAC;AASF,SAAS,GAAG,CAAC,KAAY;IACxB,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;IAC1E,OAAO,CACN,oBAAC,MAAM,IACN,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,gBAC1B,GAAG,KAAK,MAAM,EAC1B,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,KACxC,cAAc;QAElB,oBAAC,KAAK,IACL,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,IAEjB,KAAK,CACC,CACA,CACT,CAAC;AACH,CAAC;AAED,eAAe,GAAG,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Colors } from "../../Theme/types";
|
|
3
|
+
export declare const ContentContainer: import("@emotion/styled").StyledComponent<{
|
|
4
|
+
theme?: import("@emotion/react").Theme;
|
|
5
|
+
as?: React.ElementType;
|
|
6
|
+
} & {
|
|
7
|
+
colors: Colors;
|
|
8
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
9
|
+
interface Props {
|
|
10
|
+
colors: Colors;
|
|
11
|
+
children: JSX.Element[];
|
|
12
|
+
}
|
|
13
|
+
declare function Form(props: Props): React.JSX.Element;
|
|
14
|
+
export default Form;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import styled from "@emotion/styled";
|
|
2
|
+
import React from "react";
|
|
3
|
+
export const ContentContainer = styled.div `
|
|
4
|
+
display: flex;
|
|
5
|
+
padding: 24px;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
align-items: center;
|
|
8
|
+
gap: 8px;
|
|
9
|
+
align-self: stretch;
|
|
10
|
+
background-color: ${({ colors }) => colors.background.primary};
|
|
11
|
+
`;
|
|
12
|
+
function Form(props) {
|
|
13
|
+
const { children, colors } = props;
|
|
14
|
+
return (React.createElement(ContentContainer, { colors: colors }, children));
|
|
15
|
+
}
|
|
16
|
+
export default Form;
|
|
17
|
+
//# sourceMappingURL=Form.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../lib/Molecules/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAqB;;;;;;;qBAO1C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO;CAC7D,CAAC;AAOF,SAAS,IAAI,CAAC,KAAY;IACzB,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnC,OAAO,CACN,oBAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,IAC9B,QAAQ,CACS,CACnB,CAAC;AACH,CAAC;AAED,eAAe,IAAI,CAAC"}
|
|
@@ -11,6 +11,9 @@ interface Location {
|
|
|
11
11
|
reqPerm?: string;
|
|
12
12
|
icon?: JSX.Element;
|
|
13
13
|
}
|
|
14
|
+
interface Dropdown {
|
|
15
|
+
dropdownComponent: JSX.Element | React.ReactNode;
|
|
16
|
+
}
|
|
14
17
|
interface appInfo {
|
|
15
18
|
name: string;
|
|
16
19
|
versionNum: string;
|
|
@@ -18,12 +21,8 @@ interface appInfo {
|
|
|
18
21
|
menuLogo?: string;
|
|
19
22
|
menuLogoDark?: string;
|
|
20
23
|
copyRight?: string;
|
|
21
|
-
dropdown?:
|
|
22
|
-
|
|
23
|
-
label: string;
|
|
24
|
-
value: string;
|
|
25
|
-
}[];
|
|
26
|
-
offlineCapabale?: boolean;
|
|
24
|
+
dropdown?: Dropdown;
|
|
25
|
+
offlineCapable?: boolean;
|
|
27
26
|
theme: boolean;
|
|
28
27
|
setTheme: React.Dispatch<React.SetStateAction<boolean>>;
|
|
29
28
|
online: boolean;
|
|
@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
|
|
|
2
2
|
import React, { useState, useMemo } from 'react';
|
|
3
3
|
import { FiMenu, FiCloud, FiCloudOff, FiSun, FiMoon, FiChevronRight, FiX } from "react-icons/fi";
|
|
4
4
|
import Toggle from "../../Atoms/Toggle/Toggle";
|
|
5
|
-
import { DropdownSelect } from "../../Atoms/DropdownField/DropdownField";
|
|
6
5
|
const NavMenu = styled.div `
|
|
7
6
|
display: flex;
|
|
8
7
|
width: 320px;
|
|
@@ -129,20 +128,16 @@ const NavBar = (props) => {
|
|
|
129
128
|
React.createElement(NavBarHeader, { colorPalette: colorPalette },
|
|
130
129
|
React.createElement("div", { style: { cursor: "pointer" }, id: "Navigation", onClick: () => { setNavOpen(!navOpen); } }, navOpen ? React.createElement(FiX, { size: 24, color: colorPalette.text.primary }) : React.createElement(FiMenu, { size: 24, color: colorPalette.text.primary })),
|
|
131
130
|
appInfo.headerLogo && React.createElement("img", { src: appInfo.headerLogo, alt: "FactoEarth Logo", style: { width: "40px", cursor: "pointer" } }),
|
|
132
|
-
appInfo.
|
|
131
|
+
appInfo.offlineCapable && (appInfo.online ? React.createElement(OnlineStatus, { colorPalette: colorPalette },
|
|
133
132
|
React.createElement(FiCloud, null),
|
|
134
133
|
"Online") : React.createElement(OfflineStatus, { colorPalette: colorPalette },
|
|
135
134
|
React.createElement(FiCloudOff, null),
|
|
136
135
|
"Offline"))),
|
|
137
136
|
navOpen && (React.createElement("div", { style: { boxShadow: "5px 5px 5px rgba(64, 64, 64, 0.2)" } },
|
|
138
|
-
appInfo.dropdown &&
|
|
139
|
-
React.createElement("p", null, "Projects"),
|
|
140
|
-
React.createElement(DropdownSelect, { colorPalette: colorPalette, onChange: (e) => {
|
|
141
|
-
appInfo.setSelectedProject(e);
|
|
142
|
-
}, options: appInfo.dropdownOptions, isMulti: false, isSearchable: true, menuPortalTarget: document.body, value: appInfo.selectedProject, id: "page-size", name: "page-size", menuPlacement: "auto" })),
|
|
137
|
+
appInfo.dropdown && appInfo.dropdown.dropdownComponent,
|
|
143
138
|
React.createElement(MenuItems, null, locationsList),
|
|
144
139
|
React.createElement(Toggles, { className: "toggles" },
|
|
145
|
-
appInfo.
|
|
140
|
+
appInfo.offlineCapable && React.createElement(Toggle, { colorPalette: colorPalette, modes: [
|
|
146
141
|
{
|
|
147
142
|
mode: "Offline",
|
|
148
143
|
icon: React.createElement(FiCloudOff, null)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavMenu.js","sourceRoot":"","sources":["../../../lib/Molecules/NavMenu/NavMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACjG,OAAO,MAAM,MAAM,2BAA2B,CAAA;
|
|
1
|
+
{"version":3,"file":"NavMenu.js","sourceRoot":"","sources":["../../../lib/Molecules/NavMenu/NavMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACjG,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAoC9C,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;gBAIpC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;CACpE,CAAC;AAGF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;;;;kBAOvC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,SAAS;CACxE,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;;;;;;;kBAUvC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO;WAClE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO;;CAErE,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;;;;;;;kBAUxC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS;WACxD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS;CAC3D,CAAA;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;;;;;;;;kBAW5C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,SAAS;WAC9D,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;CACzD,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAI;;;CAG/B,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;WAI1C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ;;;;kBAIzC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,SAAS;;;CAGxE,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAI;;;;;;;CAO9B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAI;;CAE7B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA0B;;;gBAGpC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,QAAQ;CACrE,CAAA;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;WAInD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;CACzD,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAI;;;;;CAKhC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA0B;;;;WAIzC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;CACzD,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IAEpC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IAElD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEvD,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QAEjC,MAAM,gBAAgB,GAAG,CAAC,SAAqB,EAAE,EAAE;YAEjD,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;gBAC5C,OAAO,CACL,oBAAC,QAAQ,IACP,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,GAAG,EAAE,QAAQ,CAAC,IAAI;oBAElB,oBAAC,QAAQ;wBACN,QAAQ,EAAE,IAAI;wBAAE,QAAQ,CAAC,IAAI,CACrB;oBACX,oBAAC,cAAc,OAAG,CACT,CACZ,CAAA;YACH,CAAC,CAAC,CAAA;YAEF,OAAO,YAAY,CAAA;QACrB,CAAC,CAAA;QAED,OAAO,gBAAgB,CAAC,SAAS,CAAC,CAAA;IAEpC,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAA;IAE7B,OAAO,CACL,oBAAC,OAAO,IAAC,YAAY,EAAE,YAAY;QACjC,oBAAC,YAAY,IAAC,YAAY,EAAE,YAAY;YACtC,6BACE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC5B,EAAE,EAAC,YAAY,EACf,OAAO,EAAE,GAAG,EAAE,GAAG,UAAU,CAAC,CAAC,OAAO,CAAC,CAAA,CAAC,CAAC,IACtC,OAAO,CAAC,CAAC,CAAC,oBAAC,GAAG,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,CAAC,oBAAC,MAAM,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,GAAI,CACnH;YACL,OAAO,CAAC,UAAU,IAAI,6BAAK,GAAG,EAAE,OAAO,CAAC,UAAU,EAAE,GAAG,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAI;YACzH,OAAO,CAAC,cAAc,IAAI,CACzB,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAC,YAAY,IAAC,YAAY,EAAE,YAAY;gBAAE,oBAAC,OAAO,OAAG;yBAAqB,CAAC,CAAC,CAAC,oBAAC,aAAa,IAAC,YAAY,EAAE,YAAY;gBAAE,oBAAC,UAAU,OAAG;0BAAuB,CAC/K,CACY;QACd,OAAO,IAAI,CACV,6BAAK,KAAK,EAAE,EAAE,SAAS,EAAE,mCAAmC,EAAE;YAC3D,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC,iBAAiB;YACvD,oBAAC,SAAS,QACP,aAAa,CACJ;YACZ,oBAAC,OAAO,IAAC,SAAS,EAAC,SAAS;gBACzB,OAAO,CAAC,cAAc,IAAI,oBAAC,MAAM,IAChC,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE;wBACL;4BACE,IAAI,EAAE,SAAS;4BACf,IAAI,EAAE,oBAAC,UAAU,OAAG;yBACrB;wBACD;4BACE,IAAI,EAAE,QAAQ;4BACd,IAAI,EAAE,oBAAC,OAAO,OAAG;yBAClB;qBACF,EACD,QAAQ,EAAE,OAAO,CAAC,SAAS,EAC3B,KAAK,EAAE,OAAO,CAAC,MAAM,GACrB;gBACF,oBAAC,MAAM,IACL,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE;wBACL;4BACE,IAAI,EAAE,MAAM;4BACZ,IAAI,EAAE,oBAAC,MAAM,OAAG;yBACjB;wBACD;4BACE,IAAI,EAAE,OAAO;4BACb,IAAI,EAAE,oBAAC,KAAK,OAAG;yBAChB;qBACF,EACD,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,KAAK,EAAE,OAAO,CAAC,KAAK,GACpB,CACM;YACV;gBACE,oBAAC,OAAO,IAAC,YAAY,EAAE,YAAY;oBACjC,oBAAC,iBAAiB,IAAC,YAAY,EAAE,YAAY;wBAC1C,OAAO,CAAC,QAAQ,IAAI,6BAAK,GAAG,EAAE,YAAY,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,EAAE,GAAG,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,GAAI;wBAC/K,OAAO,CAAC,SAAS,IAAI,oBAAC,UAAU;4BAC/B,+BAAI,OAAO,CAAC,SAAS,CAAK;4BAC1B,sDAA2B,CAChB,CACK;oBACpB,oBAAC,OAAO,IAAC,YAAY,EAAE,YAAY;wBAChC,OAAO,CAAC,IAAI;;wBAAG,OAAO,CAAC,UAAU,CAC1B,CACF,CACN,CACF,CACP,CACO,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Colors } from "Theme/types";
|
|
3
|
+
interface ColumnSpec {
|
|
4
|
+
header: string;
|
|
5
|
+
sortable: boolean;
|
|
6
|
+
}
|
|
7
|
+
interface TableHeaderProps {
|
|
8
|
+
colorPalette: Colors;
|
|
9
|
+
columns: ColumnSpec[];
|
|
10
|
+
}
|
|
11
|
+
export declare const TableHeader: (props: TableHeaderProps) => React.JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styled from "@emotion/styled";
|
|
3
|
+
import { SortDropdown } from "../../Atoms/SortDropdown/SortDropdown";
|
|
4
|
+
const HeaderCell = styled.th `
|
|
5
|
+
display: flex;
|
|
6
|
+
height: 56px;
|
|
7
|
+
padding: 0px 8px;
|
|
8
|
+
align-items: center;
|
|
9
|
+
gap: 16px;
|
|
10
|
+
align-self: stretch;
|
|
11
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
12
|
+
align-items: center;
|
|
13
|
+
min-height: 40px;
|
|
14
|
+
font-size: 16px;
|
|
15
|
+
justify-content: space-between;
|
|
16
|
+
width: 20em;
|
|
17
|
+
display: flex;
|
|
18
|
+
`;
|
|
19
|
+
export const TableHeader = (props) => {
|
|
20
|
+
const { columns, colorPalette } = props;
|
|
21
|
+
return (React.createElement("tr", { style: {
|
|
22
|
+
display: "flex",
|
|
23
|
+
width: "100%",
|
|
24
|
+
} }, columns.map((columns, i) => (React.createElement(HeaderCell, { colorPalette: colorPalette, key: `header@${i}` },
|
|
25
|
+
React.createElement("div", { style: { margin: "auto 0" } }, columns.header),
|
|
26
|
+
columns.sortable && React.createElement(SortDropdown, null))))));
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=TableHeader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../lib/Molecules/TableHeader/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAGrE,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAwB;;;;;;;WAOzC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;;;;;;;CAOzD,CAAC;AAWF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAExC,OAAO,CACL,4BAAI,KAAK,EAAE;YACT,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,MAAM;SACd,IACE,OAAO,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3B,oBAAC,UAAU,IACT,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,UAAU,CAAC,EAAE;QAEhB,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAG,OAAO,CAAC,MAAM,CAAO;QACvD,OAAO,CAAC,QAAQ,IAAI,oBAAC,YAAY,OAAG,CAC5B,CACd,CAAC,CACC,CACN,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ColumnConfig } from "Organisms/Table/Table";
|
|
3
|
+
import { Colors } from "Theme/types";
|
|
4
|
+
export declare const TableCell: import("@emotion/styled").StyledComponent<{
|
|
5
|
+
theme?: import("@emotion/react").Theme;
|
|
6
|
+
as?: React.ElementType;
|
|
7
|
+
}, React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
|
|
8
|
+
interface TableRowProps {
|
|
9
|
+
colorPalette: Colors;
|
|
10
|
+
rowData: {
|
|
11
|
+
[key: string]: any;
|
|
12
|
+
};
|
|
13
|
+
columnConfig: {
|
|
14
|
+
[key: string]: ColumnConfig;
|
|
15
|
+
};
|
|
16
|
+
index: number;
|
|
17
|
+
}
|
|
18
|
+
export declare const TableRow: ({ index, colorPalette, rowData, columnConfig }: TableRowProps) => React.JSX.Element;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styled from "@emotion/styled";
|
|
3
|
+
export const TableCell = styled.td `
|
|
4
|
+
width: 21em;
|
|
5
|
+
height: 50px;
|
|
6
|
+
display: flex;
|
|
7
|
+
padding: 0px 8px;
|
|
8
|
+
justify-content: flex-start;
|
|
9
|
+
align-items: center;
|
|
10
|
+
flex: 1 0 0;
|
|
11
|
+
align-self: stretch;
|
|
12
|
+
flexDirection: column;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
align-items: flex-start;
|
|
15
|
+
flex: 1 0 0;
|
|
16
|
+
font-size: 16px,
|
|
17
|
+
font-weight: 400,
|
|
18
|
+
`;
|
|
19
|
+
export const TableRow = ({ index, colorPalette, rowData, columnConfig } /* prop types here*/) => {
|
|
20
|
+
const rows = Object.entries(rowData).map((keyValue, index) => {
|
|
21
|
+
if (columnConfig[keyValue[0]]) {
|
|
22
|
+
const cell = columnConfig[keyValue[0]].cell(rowData);
|
|
23
|
+
return cell;
|
|
24
|
+
}
|
|
25
|
+
return;
|
|
26
|
+
}).filter((cell) => cell !== undefined);
|
|
27
|
+
return (React.createElement("tr", { style: {
|
|
28
|
+
display: "flex",
|
|
29
|
+
maxHeight: "66px",
|
|
30
|
+
background: index % 2
|
|
31
|
+
? colorPalette.background.tableRow
|
|
32
|
+
: colorPalette.background.primary,
|
|
33
|
+
borderBottom: `1px solid ${colorPalette.border.primary}`,
|
|
34
|
+
} }, rows.map((cell, i) => cell)));
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=TableRow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../lib/Molecules/TableRow/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAI;;;;;;;;;;;;;;;CAerC,CAAC;AASF,MAAM,CAAC,MAAM,QAAQ,GAAG,CACvB,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAiB,CAAC,oBAAoB,EACjF,EAAE;IACH,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,QAAe,EAAE,KAAa,EAAE,EAAE;QAC3E,IAAI,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC/B,MAAM,IAAI,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YACpD,OAAO,IAAI,CAAA;QACZ,CAAC;QACD,OAAM;IACP,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAS,EAAE,EAAE,CAAC,IAAI,KAAK,SAAS,CAAC,CAAA;IAE5C,OAAO,CACN,4BACC,KAAK,EAAE;YACN,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,MAAM;YACjB,UAAU,EACT,KAAK,GAAG,CAAC;gBACR,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,QAAQ;gBAClC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;YACnC,YAAY,EAAE,aAAa,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE;SACxD,IAEA,IAAI,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,CACrC,CACL,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Colors } from "../../Theme/types";
|
|
3
|
+
export interface Option {
|
|
4
|
+
label: string;
|
|
5
|
+
value: Role;
|
|
6
|
+
}
|
|
7
|
+
interface AwsDefaults {
|
|
8
|
+
id: string;
|
|
9
|
+
createdAt: string;
|
|
10
|
+
updatedAt: string;
|
|
11
|
+
group: string;
|
|
12
|
+
}
|
|
13
|
+
export interface UserForResolver extends AwsDefaults {
|
|
14
|
+
username: string;
|
|
15
|
+
email: string;
|
|
16
|
+
hideTutorial?: boolean;
|
|
17
|
+
isDeveloper?: boolean;
|
|
18
|
+
lightMode?: boolean;
|
|
19
|
+
roleIds: string[];
|
|
20
|
+
}
|
|
21
|
+
export interface User extends UserForResolver {
|
|
22
|
+
roles: Role[];
|
|
23
|
+
}
|
|
24
|
+
interface RoleForResolver extends AwsDefaults {
|
|
25
|
+
name: string;
|
|
26
|
+
description: string;
|
|
27
|
+
permissionIds: string[];
|
|
28
|
+
readGroups: string[];
|
|
29
|
+
}
|
|
30
|
+
export interface Role extends RoleForResolver {
|
|
31
|
+
permissions: Permission[];
|
|
32
|
+
}
|
|
33
|
+
interface Permission extends AwsDefaults {
|
|
34
|
+
name: string;
|
|
35
|
+
value: string;
|
|
36
|
+
description: string;
|
|
37
|
+
}
|
|
38
|
+
interface Props {
|
|
39
|
+
user: User;
|
|
40
|
+
/**
|
|
41
|
+
* When a role is selected, we first re-render the jsx, then call this supplied function to handle the "out of state" things like
|
|
42
|
+
* updates in DynamoDb
|
|
43
|
+
* @param role The role that has been selected
|
|
44
|
+
*/
|
|
45
|
+
handleChange: (role: Role) => Promise<void>;
|
|
46
|
+
/**
|
|
47
|
+
* All roles that can be selected
|
|
48
|
+
*/
|
|
49
|
+
roles: Role[];
|
|
50
|
+
theme: Colors;
|
|
51
|
+
}
|
|
52
|
+
export declare function EditUserPerms(props: Props): React.JSX.Element;
|
|
53
|
+
export {};
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styled from "@emotion/styled";
|
|
3
|
+
import { useMemo, useState } from "react";
|
|
4
|
+
import { FaCheck } from "react-icons/fa6";
|
|
5
|
+
import Badge from "../../Atoms/Badge/Badge";
|
|
6
|
+
import { DropdownSelect } from "../../Atoms/DropdownField/DropdownField";
|
|
7
|
+
import { FieldWrapper } from "../../Atoms/FieldWrapper/FieldWrapper";
|
|
8
|
+
import { TextFieldWrapper } from "../../Atoms/TextField/TextField";
|
|
9
|
+
const Container = styled.div `
|
|
10
|
+
display: flex;
|
|
11
|
+
padding: 16px 24px;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
align-items: flex-start;
|
|
14
|
+
gap: 8px;
|
|
15
|
+
align-self: stretch;
|
|
16
|
+
border-radius: var(--Border-Radius-border-radius-md, 8px);
|
|
17
|
+
border: 0.5px solid var(--colors-border-secondary, #DCDEE0);
|
|
18
|
+
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
19
|
+
`;
|
|
20
|
+
const Created = styled.div `
|
|
21
|
+
display: flex;
|
|
22
|
+
padding: 0px 8px;
|
|
23
|
+
gap: 8px;
|
|
24
|
+
width: 100%;
|
|
25
|
+
`;
|
|
26
|
+
const BadgeContainer = styled.div `
|
|
27
|
+
padding-top: 2px;
|
|
28
|
+
`;
|
|
29
|
+
const CreatedText = styled.p `
|
|
30
|
+
margin: 0px;
|
|
31
|
+
padding-top: 8px;
|
|
32
|
+
color: ${({ colorPalette }) => colorPalette.text.primary}
|
|
33
|
+
`;
|
|
34
|
+
const DropdownContainer = styled.div `
|
|
35
|
+
width: 100%;
|
|
36
|
+
display: flex;
|
|
37
|
+
padding: 0px 8px 8px 8px;
|
|
38
|
+
flex-direction: column;
|
|
39
|
+
`;
|
|
40
|
+
const RoleDescriptionContainer = styled.div `
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column
|
|
43
|
+
`;
|
|
44
|
+
const RoleDescriptionParagraph = styled.p `
|
|
45
|
+
font-size: 14px;
|
|
46
|
+
font-style: italic;
|
|
47
|
+
font-weight: 400;
|
|
48
|
+
line-height: 20px;
|
|
49
|
+
margin: 0px;
|
|
50
|
+
color: ${({ colorPalette }) => colorPalette.text.primary}
|
|
51
|
+
`;
|
|
52
|
+
const RoleNameParagraph = styled.h2 `
|
|
53
|
+
font-size: 14px;
|
|
54
|
+
font-style: italic;
|
|
55
|
+
font-weight: 700;
|
|
56
|
+
line-height: 20px;
|
|
57
|
+
margin: 0px;
|
|
58
|
+
color: ${({ colorPalette }) => colorPalette.text.primary}
|
|
59
|
+
`;
|
|
60
|
+
const EmailWrapper = styled.div `
|
|
61
|
+
width: 100%;
|
|
62
|
+
min-width: 60px;
|
|
63
|
+
min-height: 30px;
|
|
64
|
+
height: 38px;
|
|
65
|
+
border-radius: 4px;
|
|
66
|
+
border-width: 1px;
|
|
67
|
+
border-style: solid;
|
|
68
|
+
border-color: ${({ colorPalette }) => colorPalette.border.primary};
|
|
69
|
+
background-color: ${({ colorPalette }) => colorPalette.background.disabledInput};
|
|
70
|
+
`;
|
|
71
|
+
const PseudoInput = styled.div `
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
justify-content: space-between;
|
|
75
|
+
gap: 16px;
|
|
76
|
+
font-weight: 600;
|
|
77
|
+
font-size: 16px;
|
|
78
|
+
display: flex;
|
|
79
|
+
padding: 3px 12px 3px 16px;
|
|
80
|
+
cursor: default;
|
|
81
|
+
color: ${({ colorPalette }) => colorPalette.text.primary};
|
|
82
|
+
::placeholder {
|
|
83
|
+
font-weight: 500;
|
|
84
|
+
}
|
|
85
|
+
`;
|
|
86
|
+
export function EditUserPerms(props) {
|
|
87
|
+
const { user, handleChange, roles, theme } = props;
|
|
88
|
+
const [selectedOption, setSelectedOption] = useState(() => {
|
|
89
|
+
if (user.roles.length > 0) {
|
|
90
|
+
return {
|
|
91
|
+
label: user.roles[0].name,
|
|
92
|
+
value: user.roles[0]
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
return null;
|
|
96
|
+
});
|
|
97
|
+
// When we eventually ramp up functionality in here and bring back cognito users, we will want to use this rather than an assumed verified
|
|
98
|
+
// const emailConfirmationStatus = cognitoUser.Attributes.find((attr) => attr.Name === "email_verified")?.Value === "true" ? "true" : "false";
|
|
99
|
+
const options = useMemo(() => {
|
|
100
|
+
return roles.map((role) => {
|
|
101
|
+
return {
|
|
102
|
+
label: role.name,
|
|
103
|
+
value: role
|
|
104
|
+
};
|
|
105
|
+
});
|
|
106
|
+
}, [roles]);
|
|
107
|
+
const roleJsx = useMemo(() => {
|
|
108
|
+
if (selectedOption) {
|
|
109
|
+
return (React.createElement(RoleDescriptionContainer, { "data-testId": "Role Jsx Container" },
|
|
110
|
+
React.createElement(RoleDescriptionParagraph, { colorPalette: theme }, selectedOption.value.description),
|
|
111
|
+
React.createElement(RoleNameParagraph, { colorPalette: theme }, selectedOption.value.name),
|
|
112
|
+
selectedOption.value.permissions.length > 0 &&
|
|
113
|
+
React.createElement("ul", { style: { marginTop: "0px" } }, selectedOption.value.permissions.map((perm) => {
|
|
114
|
+
return (React.createElement("li", { key: `Role-${selectedOption.value.id}-Perm-${perm.id}` },
|
|
115
|
+
React.createElement(RoleDescriptionParagraph, { colorPalette: theme },
|
|
116
|
+
perm.name,
|
|
117
|
+
": ",
|
|
118
|
+
perm.description)));
|
|
119
|
+
}))));
|
|
120
|
+
}
|
|
121
|
+
return null;
|
|
122
|
+
}, [selectedOption, theme]);
|
|
123
|
+
function onChange(option, actionMeta) {
|
|
124
|
+
if (option) {
|
|
125
|
+
setSelectedOption(option);
|
|
126
|
+
handleChange(option.value);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
const createdDate = new Date(user.createdAt).toLocaleDateString(navigator.language, { year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit" });
|
|
130
|
+
return (React.createElement(Container, { colorPalette: theme },
|
|
131
|
+
React.createElement(FieldWrapper, { label: "Name", colorPalette: theme },
|
|
132
|
+
React.createElement(TextFieldWrapper, { colorPalette: theme, value: user.username, disabled: true })),
|
|
133
|
+
React.createElement(FieldWrapper, { label: "Email", colorPalette: theme },
|
|
134
|
+
React.createElement(EmailWrapper, { colorPalette: theme },
|
|
135
|
+
React.createElement(PseudoInput, { colorPalette: theme },
|
|
136
|
+
user.email,
|
|
137
|
+
React.createElement(BadgeContainer, null,
|
|
138
|
+
React.createElement(Badge, { icon: React.createElement(FaCheck, { color: theme.badgeText["true"] }), label: "Verified", theme: theme, variant: "true" }))))),
|
|
139
|
+
React.createElement(FieldWrapper, { colorPalette: theme, label: "Created" },
|
|
140
|
+
React.createElement(Created, null,
|
|
141
|
+
React.createElement(CreatedText, { colorPalette: theme }, createdDate))),
|
|
142
|
+
React.createElement(FieldWrapper, { label: "Role(s)", colorPalette: theme },
|
|
143
|
+
React.createElement(DropdownContainer, null,
|
|
144
|
+
React.createElement(DropdownSelect, { colorPalette: theme,
|
|
145
|
+
// @ts-ignore
|
|
146
|
+
onChange: onChange, options: options, value: selectedOption }),
|
|
147
|
+
roleJsx))));
|
|
148
|
+
}
|
|
149
|
+
//# sourceMappingURL=EditUserPerms.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditUserPerms.js","sourceRoot":"","sources":["../../../lib/Organisms/EditUserPerms/EditUserPerms.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import styled from "@emotion/styled";
|
|
2
|
+
import React, { useMemo, useState } from "react";
|
|
3
|
+
import { MdPersonAddAlt } from "react-icons/md";
|
|
4
|
+
import ContentDropdown from "../../Atoms/ContentDropdown/ContentDropdown";
|
|
5
|
+
import Tab from "../../Atoms/Tab/Tab";
|
|
6
|
+
const Container = styled.div `
|
|
7
|
+
display: flex;
|
|
8
|
+
width: 100%;
|
|
9
|
+
padding: 16px 0px;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
align-items: flex-start;
|
|
12
|
+
background-color: ${({ colors }) => colors.background.absolute}
|
|
13
|
+
`;
|
|
14
|
+
const NavBar = styled.div `
|
|
15
|
+
display: flex;
|
|
16
|
+
padding: 0px 16px;
|
|
17
|
+
align-items: flex-start;
|
|
18
|
+
gap: 8px;
|
|
19
|
+
align-self: stretch;
|
|
20
|
+
border-bottom: 0.5px solid #89949F;
|
|
21
|
+
`;
|
|
22
|
+
function TabManager(props) {
|
|
23
|
+
const { colors, tabLabels, forms } = props;
|
|
24
|
+
if (tabLabels.length <= 0)
|
|
25
|
+
throw new Error(`No tab labels provided`);
|
|
26
|
+
if (forms.length <= 0)
|
|
27
|
+
throw new Error(`No forms provided`);
|
|
28
|
+
if (tabLabels.length !== forms.length)
|
|
29
|
+
throw new Error(`Number of tab labels does not match number of forms`);
|
|
30
|
+
const [expanded, setExpanded] = useState(false);
|
|
31
|
+
const [selectedTab, setSelectedTab] = useState(0);
|
|
32
|
+
const tabs = useMemo(() => {
|
|
33
|
+
function handleSelectTab(index) {
|
|
34
|
+
setSelectedTab(index);
|
|
35
|
+
}
|
|
36
|
+
return tabLabels.map((label, index) => {
|
|
37
|
+
return (React.createElement(Tab, { colors: colors, selected: index === selectedTab, handleClick: () => handleSelectTab(index), label: label }));
|
|
38
|
+
});
|
|
39
|
+
}, [tabLabels, selectedTab]);
|
|
40
|
+
return (React.createElement(Container, { colors: colors },
|
|
41
|
+
React.createElement(ContentDropdown, { colors: colors, expanded: expanded, style: { alignItems: "flex-start" }, handleClick: () => setExpanded(!expanded), icon: React.createElement(MdPersonAddAlt, { color: colors.buttonText.outlined, style: { width: "24px", height: "24px" } }), label: "Advanced", role: "button", tabIndex: 0 }),
|
|
42
|
+
expanded && (React.createElement(React.Fragment, null,
|
|
43
|
+
React.createElement(NavBar, null, tabs),
|
|
44
|
+
forms[selectedTab]))));
|
|
45
|
+
}
|
|
46
|
+
export default TabManager;
|
|
47
|
+
//# sourceMappingURL=TabManager.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TabManager.js","sourceRoot":"","sources":["../../../lib/Organisms/TabManager/TabManager.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,eAAe,MAAM,6CAA6C,CAAC;AAC1E,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAGtC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAqB;;;;;;qBAM5B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ;CAC9D,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOxB,CAAC;AAQF,SAAS,UAAU,CAAC,KAAY;IAC/B,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE3C,IAAI,SAAS,CAAC,MAAM,IAAI,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;IACrE,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAC5D,IAAI,SAAS,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM;QAAE,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;IAE9G,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAE1D,MAAM,IAAI,GAAkB,OAAO,CAAC,GAAG,EAAE;QACxC,SAAS,eAAe,CAAC,KAAa;YACrC,cAAc,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;QACD,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACrC,OAAO,CACN,oBAAC,GAAG,IACH,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,KAAK,KAAK,WAAW,EAC/B,WAAW,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EACzC,KAAK,EAAE,KAAK,GACX,CACF,CAAC;QACH,CAAC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAE7B,OAAO,CACN,oBAAC,SAAS,IACT,MAAM,EAAE,MAAM;QAEd,oBAAC,eAAe,IACf,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,EACnC,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,EACzC,IAAI,EAAE,oBAAC,cAAc,IAAC,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,EACrG,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,GACV;QACD,QAAQ,IAAI,CACZ;YACC,oBAAC,MAAM,QACL,IAAI,CACG;YACR,KAAK,CAAC,WAAW,CAAC,CACjB,CACH,CACU,CACZ,CAAC;AACH,CAAC;AAED,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Colors } from "Theme/types";
|
|
3
|
+
export interface ColumnConfig {
|
|
4
|
+
key: string;
|
|
5
|
+
header: string;
|
|
6
|
+
cell: (rowData: {
|
|
7
|
+
[key: string]: any;
|
|
8
|
+
}) => any;
|
|
9
|
+
sortable: boolean;
|
|
10
|
+
}
|
|
11
|
+
interface TableProps {
|
|
12
|
+
colorPalette: Colors;
|
|
13
|
+
tableData: {
|
|
14
|
+
[key: string]: any;
|
|
15
|
+
};
|
|
16
|
+
columnConfig: ColumnConfig[];
|
|
17
|
+
}
|
|
18
|
+
export declare const Table: (props: TableProps) => React.JSX.Element;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TableHeader } from "../../Molecules/TableHeader/TableHeader";
|
|
3
|
+
import { TableRow } from "../../Molecules/TableRow/TableRow";
|
|
4
|
+
export const Table = (props) => {
|
|
5
|
+
const { colorPalette, tableData, columnConfig } = props;
|
|
6
|
+
const columns = columnConfig.map((column) => ({
|
|
7
|
+
header: column.header,
|
|
8
|
+
sortable: column.sortable,
|
|
9
|
+
}));
|
|
10
|
+
const config = {};
|
|
11
|
+
columnConfig.forEach((column) => {
|
|
12
|
+
config[column.key] = column;
|
|
13
|
+
});
|
|
14
|
+
return (React.createElement("table", { style: {
|
|
15
|
+
display: "flex",
|
|
16
|
+
padding: "0px 24px",
|
|
17
|
+
flexDirection: "column",
|
|
18
|
+
} },
|
|
19
|
+
React.createElement("thead", { style: {
|
|
20
|
+
position: "sticky",
|
|
21
|
+
top: "0",
|
|
22
|
+
backgroundColor: colorPalette.background.primary,
|
|
23
|
+
zIndex: 1000,
|
|
24
|
+
borderBottom: `1px solid ${colorPalette.border.primary}`,
|
|
25
|
+
} },
|
|
26
|
+
React.createElement(TableHeader, { colorPalette: colorPalette, columns: columns })),
|
|
27
|
+
React.createElement("tbody", null, Array.from({ length: tableData.length }).map((_, i) => (React.createElement(TableRow, { rowData: tableData[i], index: i, colorPalette: colorPalette, columnConfig: config }))))));
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=Table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../lib/Organisms/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAgB7D,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IAC1C,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IACxD,MAAM,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC7C,MAAM,EAAE,MAAM,CAAC,MAAM;QACrB,QAAQ,EAAE,MAAM,CAAC,QAAQ;KACzB,CAAC,CAAC,CAAC;IACJ,MAAM,MAAM,GAAoC,EAAE,CAAC;IACnD,YAAY,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QAC/B,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IAC7B,CAAC,CAAC,CAAC;IACH,OAAO,CACN,+BACC,KAAK,EAAE;YACN,OAAO,EAAE,MAAM;YACf,OAAO,EAAE,UAAU;YACnB,aAAa,EAAE,QAAQ;SACvB;QAED,+BACC,KAAK,EAAE;gBACN,QAAQ,EAAE,QAAQ;gBAClB,GAAG,EAAE,GAAG;gBACR,eAAe,EAAE,YAAY,CAAC,UAAU,CAAC,OAAO;gBAChD,MAAM,EAAE,IAAI;gBACZ,YAAY,EAAE,aAAa,YAAY,CAAC,MAAM,CAAC,OAAO,EAAE;aACxD;YAED,oBAAC,WAAW,IAAC,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,GAAI,CACtD;QACR,mCACE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACvD,oBAAC,QAAQ,IACR,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EACrB,KAAK,EAAE,CAAC,EACR,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,MAAM,GACnB,CACF,CAAC,CACK,CACD,CACR,CAAC;AACH,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@factorearth/component-library",
|
|
3
|
-
"version": "3.6.
|
|
3
|
+
"version": "3.6.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",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"access": "public",
|
|
47
47
|
"registry": "https://registry.npmjs.org/"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "b0911ad3ebe8c4ef8625bb327092b2428391bd26",
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@emotion/react": "^11.13.0",
|
|
52
52
|
"@emotion/styled": "^11.13.0",
|