@factorearth/component-library 5.2.4-alpha.0 → 5.3.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.
Files changed (46) hide show
  1. package/README.md +11 -11
  2. package/dist/Atoms/Accordion/Accordion.js +18 -18
  3. package/dist/Atoms/Badge/Badge.js +18 -18
  4. package/dist/Atoms/Box/Box.js +15 -15
  5. package/dist/Atoms/Buttons/Button.js +23 -23
  6. package/dist/Atoms/ContentDropdown/ContentDropdown.js +24 -24
  7. package/dist/Atoms/DateField/DateField.js +94 -94
  8. package/dist/Atoms/FieldWrapper/FieldWrapper.js +35 -35
  9. package/dist/Atoms/MoreHorizonButton/MoreHorizonButton.js +52 -52
  10. package/dist/Atoms/NoteField/NoteField.js +38 -38
  11. package/dist/Atoms/NumberField/NumberField.js +63 -63
  12. package/dist/Atoms/OptionsDropdown/OptionsDropdown.js +38 -38
  13. package/dist/Atoms/Pagination/Pagination.js +25 -25
  14. package/dist/Atoms/PhoneNumberField/PhoneNumberField.js +4 -4
  15. package/dist/Atoms/ProgressBar/ProgressBar.js +16 -16
  16. package/dist/Atoms/SortDropdown/SortDropdown.js +39 -39
  17. package/dist/Atoms/Tab/Tab.js +18 -18
  18. package/dist/Atoms/TextField/TextField.js +24 -24
  19. package/dist/Atoms/Toggle/Toggle.js +11 -11
  20. package/dist/Atoms/Typography/Typography.js +7 -7
  21. package/dist/Molecules/Form/Form.js +8 -8
  22. package/dist/Molecules/NavMenu/NavMenu.js +102 -102
  23. package/dist/Molecules/TableHeader/TableHeader.js +14 -14
  24. package/dist/Molecules/TableRow/TableRow.js +27 -27
  25. package/dist/Molecules/Thumbnail/Thumbnail.d.ts +4 -4
  26. package/dist/Molecules/Thumbnail/Thumbnail.js +50 -126
  27. package/dist/Molecules/Thumbnail/Thumbnail.js.map +1 -1
  28. package/dist/Organisms/Card/Card.js +33 -33
  29. package/dist/Organisms/EditUserPerms/EditUserPerms.js +67 -67
  30. package/dist/Organisms/ErrorSplash/ErrorSplash.js +44 -44
  31. package/dist/Organisms/Modal/Modal.d.ts +5 -0
  32. package/dist/Organisms/Modal/Modal.js +88 -74
  33. package/dist/Organisms/Modal/Modal.js.map +1 -1
  34. package/dist/Organisms/Splash/Splash.d.ts +10 -0
  35. package/dist/Organisms/Splash/Splash.js +82 -0
  36. package/dist/Organisms/Splash/Splash.js.map +1 -0
  37. package/dist/Organisms/TabManager/TabManager.js +13 -13
  38. package/dist/Organisms/Table/Table.js +14 -14
  39. package/dist/Organisms/Tutorial/Tutorial.js +51 -51
  40. package/dist/index.d.ts +0 -1
  41. package/dist/index.js +0 -1
  42. package/dist/index.js.map +1 -1
  43. package/package.json +2 -2
  44. package/dist/Atoms/Spinner/Spinner.d.ts +0 -7
  45. package/dist/Atoms/Spinner/Spinner.js +0 -10
  46. package/dist/Atoms/Spinner/Spinner.js.map +0 -1
@@ -3,20 +3,20 @@ import React, { useMemo, useState } from "react";
3
3
  import { MdPersonAddAlt } from "react-icons/md";
4
4
  import ContentDropdown from "../../Atoms/ContentDropdown/ContentDropdown";
5
5
  import Tab from "../../Atoms/Tab/Tab";
6
- const Container = styled.div `
7
- display: flex;
8
- width: 100%;
9
- flex-direction: column;
10
- align-items: flex-start;
11
- background-color: ${({ colorPalette }) => colorPalette.background.primary}
6
+ const Container = styled.div `
7
+ display: flex;
8
+ width: 100%;
9
+ flex-direction: column;
10
+ align-items: flex-start;
11
+ background-color: ${({ colorPalette }) => colorPalette.background.primary}
12
12
  `;
13
- const NavBar = styled.div `
14
- display: flex;
15
- padding: 0px 16px;
16
- align-items: flex-start;
17
- gap: 8px;
18
- align-self: stretch;
19
- border-bottom: 0.5px solid #89949F;
13
+ const NavBar = styled.div `
14
+ display: flex;
15
+ padding: 0px 16px;
16
+ align-items: flex-start;
17
+ gap: 8px;
18
+ align-self: stretch;
19
+ border-bottom: 0.5px solid #89949F;
20
20
  `;
21
21
  function TabManager(props) {
22
22
  const { colorPalette, tabLabels, forms } = props;
@@ -3,21 +3,21 @@ import { TableHeader } from "../../Molecules/TableHeader/TableHeader";
3
3
  import { TableRow } from "../../Molecules/TableRow/TableRow";
4
4
  import styled from "@emotion/styled";
5
5
  import { Pagination } from "../../Atoms/Pagination/Pagination";
6
- const StyledTable = styled.table `
7
- display: flex;
8
- padding: 0px 24px;
9
- flex-direction: column;
6
+ const StyledTable = styled.table `
7
+ display: flex;
8
+ padding: 0px 24px;
9
+ flex-direction: column;
10
10
  `;
11
- const StyledTableHead = styled.thead `
12
- position: sticky;
13
- top: 0;
14
- z-index: 998;
15
- border-width: 1px;
16
- border-style: solid;
17
- border-color: ${({ colorPalette }) => colorPalette.border.secondary};
18
- border-right: none;
19
- border-left: none;
20
- border-top: none;
11
+ const StyledTableHead = styled.thead `
12
+ position: sticky;
13
+ top: 0;
14
+ z-index: 998;
15
+ border-width: 1px;
16
+ border-style: solid;
17
+ border-color: ${({ colorPalette }) => colorPalette.border.secondary};
18
+ border-right: none;
19
+ border-left: none;
20
+ border-top: none;
21
21
  `;
22
22
  const paginate = ({ items, pageIndex, pageSize, }) => {
23
23
  if (pageIndex === 0) {
@@ -5,64 +5,64 @@ import Accordion from "../../Atoms/Accordion/Accordion";
5
5
  import { Button } from "../../Atoms/Buttons/Button";
6
6
  import { Typography } from "../../Atoms/Typography/Typography";
7
7
  import { GoBug } from "react-icons/go";
8
- const TutorialOverlay = styled.div `
9
- background-color: ${({ colors }) => `${colors.background.secondary}90`};
10
- position: absolute;
11
- z-index: 1000;
12
- display: flex;
13
- justify-content: center;
14
- height: 100vh;
15
- width: 100vw;
16
- top: 0;
17
- left: 0;
8
+ const TutorialOverlay = styled.div `
9
+ background-color: ${({ colors }) => `${colors.background.secondary}90`};
10
+ position: absolute;
11
+ z-index: 1000;
12
+ display: flex;
13
+ justify-content: center;
14
+ height: 100vh;
15
+ width: 100vw;
16
+ top: 0;
17
+ left: 0;
18
18
  `;
19
- const TutorialWrapper = styled.div `
20
- background-color: ${({ colors }) => colors.background.primary};
21
- color: ${({ colors }) => colors.text.primary};
22
- display: flex;
23
- flex-direction: column;
24
- align-items: flex-start;
25
- gap: 16px;
26
- align-self: stretch;
27
- height: 500px;
28
- width: 500px;
29
- border-radius: 4px;
30
- box-shadow: ${({ colors }) => `${colors.background.secondary} 0px 5px 15px`};
31
- margin-top: calc(50vh - 250px)
19
+ const TutorialWrapper = styled.div `
20
+ background-color: ${({ colors }) => colors.background.primary};
21
+ color: ${({ colors }) => colors.text.primary};
22
+ display: flex;
23
+ flex-direction: column;
24
+ align-items: flex-start;
25
+ gap: 16px;
26
+ align-self: stretch;
27
+ height: 500px;
28
+ width: 500px;
29
+ border-radius: 4px;
30
+ box-shadow: ${({ colors }) => `${colors.background.secondary} 0px 5px 15px`};
31
+ margin-top: calc(50vh - 250px)
32
32
  `;
33
33
  //I used the calc above because `align-items: center` had no affect when applied to the TutorialOverlay styled div
34
- const HelpHeader = styled.div `
35
- display: flex;
36
- flex-direction: column;
37
- align-items: flex-start;
38
- gap: 16px;
39
- align-self: stretch;
40
- padding: 24px;
41
- box-shadow: ${({ colors }) => `${colors.background.secondary} 0px 3px 5px`};
34
+ const HelpHeader = styled.div `
35
+ display: flex;
36
+ flex-direction: column;
37
+ align-items: flex-start;
38
+ gap: 16px;
39
+ align-self: stretch;
40
+ padding: 24px;
41
+ box-shadow: ${({ colors }) => `${colors.background.secondary} 0px 3px 5px`};
42
42
  `;
43
- const TitleAndExit = styled.div `
44
- display: flex;
45
- justify-content: space-between;
46
- align-items: center;
47
- align-self: stretch;
43
+ const TitleAndExit = styled.div `
44
+ display: flex;
45
+ justify-content: space-between;
46
+ align-items: center;
47
+ align-self: stretch;
48
48
  `;
49
- const ScrollableArea = styled.div `
50
- overflow: scroll;
51
- overflow-x: hidden;
49
+ const ScrollableArea = styled.div `
50
+ overflow: scroll;
51
+ overflow-x: hidden;
52
52
  `;
53
- const ContentContainer = styled.div `
54
- padding: 0px 24px;
55
- width: 90%;
53
+ const ContentContainer = styled.div `
54
+ padding: 0px 24px;
55
+ width: 90%;
56
56
  `;
57
- const ContactContainer = styled.div `
58
- background-color: ${({ colors }) => colors.background.tertiary};
59
- color: ${({ colors }) => colors.text.primary};
60
- display: flex;
61
- padding: 24px 16px;
62
- flex-direction: column;
63
- align-items: center;
64
- gap: 16px;
65
- align-self: stretch;
57
+ const ContactContainer = styled.div `
58
+ background-color: ${({ colors }) => colors.background.tertiary};
59
+ color: ${({ colors }) => colors.text.primary};
60
+ display: flex;
61
+ padding: 24px 16px;
62
+ flex-direction: column;
63
+ align-items: center;
64
+ gap: 16px;
65
+ align-self: stretch;
66
66
  `;
67
67
  ;
68
68
  ;
package/dist/index.d.ts CHANGED
@@ -10,7 +10,6 @@ export * from "./Atoms/FieldWrapper/FieldWrapper";
10
10
  export * from "./Atoms/DropdownField/DropdownField";
11
11
  export * from "./Atoms/NoteField/NoteField";
12
12
  export * from "./Atoms/SelectField/SelectField";
13
- export * from "./Atoms/Spinner/Spinner";
14
13
  export * from "./Atoms/Tab/Tab";
15
14
  export * from "./Atoms/ProgressBar/ProgressBar";
16
15
  export * from "./Atoms/Typography/Typography";
package/dist/index.js CHANGED
@@ -12,7 +12,6 @@ export * from "./Atoms/FieldWrapper/FieldWrapper";
12
12
  export * from "./Atoms/DropdownField/DropdownField";
13
13
  export * from "./Atoms/NoteField/NoteField";
14
14
  export * from "./Atoms/SelectField/SelectField";
15
- export * from "./Atoms/Spinner/Spinner";
16
15
  export * from "./Atoms/Tab/Tab";
17
16
  export * from "./Atoms/ProgressBar/ProgressBar";
18
17
  export * from "./Atoms/Typography/Typography";
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iCAAiC,CAAC;AAChD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,qDAAqD;AACrD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,YAAY;AACZ,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,YAAY;AACZ,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,yCAAyC,CAAA;AACvD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,qCAAqC,CAAA;AACnD,SAAS;AACT,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iCAAiC,CAAC;AAChD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,qDAAqD;AACrD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iBAAiB,CAAC;AAChC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,YAAY;AACZ,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,YAAY;AACZ,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,yCAAyC,CAAA;AACvD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,qCAAqC,CAAA;AACnD,SAAS;AACT,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@factorearth/component-library",
3
- "version": "5.2.4-alpha.0",
3
+ "version": "5.3.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": "e26fe5c23d67f49589f583c61b316355be947431",
49
+ "gitHead": "57dab3950917a769867985b1acbfc246c1823ba7",
50
50
  "dependencies": {
51
51
  "@emotion/react": "^11.13.0",
52
52
  "@emotion/styled": "^11.13.0",
@@ -1,7 +0,0 @@
1
- import React from "react";
2
- import { Colors } from "../../Theme/types";
3
- interface SpinnerProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
4
- colorPalette: Colors;
5
- }
6
- export declare const Spinner: (props: SpinnerProps) => React.JSX.Element;
7
- export {};
@@ -1,10 +0,0 @@
1
- import React from "react";
2
- export const Spinner = (props) => {
3
- const { colorPalette, ...htmlProps } = props;
4
- return (React.createElement("div", { ...htmlProps },
5
- React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: "100", viewBox: "0 0 24 24" },
6
- React.createElement("path", { fill: "#7e818d", d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".5" }),
7
- React.createElement("path", { fill: "#7b69e0", d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" },
8
- React.createElement("animateTransform", { attributeName: "transform", dur: "1.5s", repeatCount: "indefinite", type: "rotate", values: "0 12 12;360 12 12" })))));
9
- };
10
- //# sourceMappingURL=Spinner.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../lib/Atoms/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IAC3C,MAAM,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC7C,OAAO,CACH,gCAAS,SAAS;QACvB,6BAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW;YACnF,8BAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,+EAA+E,EAAC,OAAO,EAAC,IAAI,GAAG;YACtH,8BACC,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,kKAAkK;gBACpK,0CAAkB,aAAa,EAAC,WAAW,EAAC,GAAG,EAAC,MAAM,EAAC,WAAW,EAAC,YAAY,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,mBAAmB,GAAG,CACrH,CACF,CACD,CACH,CAAC;AACN,CAAC,CAAC"}