@factorearth/component-library 6.4.0 → 6.4.1-s3methods.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.
@@ -2,9 +2,9 @@ import React from "react";
2
2
  import styled from "@emotion/styled";
3
3
  import { ProgressBar } from "../../Atoms/ProgressBar/ProgressBar";
4
4
  import { Typography } from "../../Atoms/Typography/Typography";
5
- const Wrapper = styled.div `
6
- pointer: ${({ progress }) => (progress.canClose ? "pointer" : "default")};
7
- margin: "24px 24px 0px 24px",
5
+ const Wrapper = styled.div `
6
+ pointer: ${({ progress }) => (progress.canClose ? "pointer" : "default")};
7
+ margin: "24px 24px 0px 24px",
8
8
  `;
9
9
  export function ProgressDisplay(props) {
10
10
  const { colors, progress, setProgress, ...rest } = props;
@@ -3,145 +3,145 @@ import { keyframes } from "@emotion/react";
3
3
  import React, { useState, useMemo, useRef, useEffect } from "react";
4
4
  import { FiMenu, FiCloud, FiCloudOff, FiSun, FiMoon, FiChevronRight, FiX, } from "react-icons/fi";
5
5
  import Toggle from "../../Atoms/Toggle/Toggle";
6
- const slideInLeft = keyframes `
7
- 0% {
8
- transform: translateX(-100%);
9
- opacity: 0;
10
- }
11
- 100% {
12
- transform: translateX(0);
13
- opacity: 1;
14
- }
6
+ const slideInLeft = keyframes `
7
+ 0% {
8
+ transform: translateX(-100%);
9
+ opacity: 0;
10
+ }
11
+ 100% {
12
+ transform: translateX(0);
13
+ opacity: 1;
14
+ }
15
15
  `;
16
- const NavMenu = styled.div `
17
- display: flex;
18
- flex-direction: column;
19
- background: ${({ colorPalette }) => colorPalette.background.primary};
20
- width: 100%;
21
- z-index: 2;
16
+ const NavMenu = styled.div `
17
+ display: flex;
18
+ flex-direction: column;
19
+ background: ${({ colorPalette }) => colorPalette.background.primary};
20
+ width: 100%;
21
+ z-index: 2;
22
22
  `;
23
- const NavBarHeader = styled.div `
24
- display: flex;
25
- justify-content: space-between;
26
- align-items: center;
27
- height: 88px;
28
- border-width: 0 0 1px 0;
29
- border-style: solid;
30
- border-color: ${({ colorPalette }) => colorPalette.background.secondary};
31
- width: 100%;
32
- @media (max-width: 500px) {
33
- justify-content: space-between;
34
- flex-wrap: wrap;
35
- align-items: center;
36
- height: max-content;
37
- }
23
+ const NavBarHeader = styled.div `
24
+ display: flex;
25
+ justify-content: space-between;
26
+ align-items: center;
27
+ height: 88px;
28
+ border-width: 0 0 1px 0;
29
+ border-style: solid;
30
+ border-color: ${({ colorPalette }) => colorPalette.background.secondary};
31
+ width: 100%;
32
+ @media (max-width: 500px) {
33
+ justify-content: space-between;
34
+ flex-wrap: wrap;
35
+ align-items: center;
36
+ height: max-content;
37
+ }
38
38
  `;
39
- const NavContent = styled.div `
40
- align-items: center;
41
- gap: 16px;
42
- padding-top: 16px;
43
- padding-bottom: 16px;
44
-
45
- @media (max-width: 500px) {
46
- justify-content: flex-end;
47
- align-items: center;
48
- background: ${({ colorPalette }) => colorPalette.background.primary};
49
- width: ${({ isWrapped }) => (isWrapped ? "100%" : "fit-content")};
50
- border-top: ${({ isWrapped, colorPalette }) => isWrapped ? `1px solid ${colorPalette.background.secondary}` : "none"};
51
- }
39
+ const NavContent = styled.div `
40
+ align-items: center;
41
+ gap: 16px;
42
+ padding-top: 16px;
43
+ padding-bottom: 16px;
44
+
45
+ @media (max-width: 500px) {
46
+ justify-content: flex-end;
47
+ align-items: center;
48
+ background: ${({ colorPalette }) => colorPalette.background.primary};
49
+ width: ${({ isWrapped }) => (isWrapped ? "100%" : "fit-content")};
50
+ border-top: ${({ isWrapped, colorPalette }) => isWrapped ? `1px solid ${colorPalette.background.secondary}` : "none"};
51
+ }
52
52
  `;
53
- const OnlineStatus = styled.div `
54
- display: flex;
55
- padding: 8px 12px;
56
- justify-content: center;
57
- align-items: center;
58
- gap: 8px;
59
- border-radius: 32px;
60
- font-weight: 700;
61
- border-width: 1px;
62
- border-style: solid;
63
- border-color: ${({ colorPalette }) => colorPalette.buttonBackground.success};
64
- color: ${({ colorPalette }) => colorPalette.buttonBackground.success};
65
- background: #ebfaed;
66
- cursor: pointer;
53
+ const OnlineStatus = styled.div `
54
+ display: flex;
55
+ padding: 8px 12px;
56
+ justify-content: center;
57
+ align-items: center;
58
+ gap: 8px;
59
+ border-radius: 32px;
60
+ font-weight: 700;
61
+ border-width: 1px;
62
+ border-style: solid;
63
+ border-color: ${({ colorPalette }) => colorPalette.buttonBackground.success};
64
+ color: ${({ colorPalette }) => colorPalette.buttonBackground.success};
65
+ background: #ebfaed;
66
+ cursor: pointer;
67
67
  `;
68
- const OfflineStatus = styled.div `
69
- display: flex;
70
- padding: 8px 12px;
71
- justify-content: center;
72
- align-items: center;
73
- gap: 8px;
74
- border-radius: 32px;
75
- font-weight: 700;
76
- border-width: 1px;
77
- border-style: solid;
78
- border-color: ${({ colorPalette }) => colorPalette.utils.icon};
79
- color: ${({ colorPalette }) => colorPalette.utils.icon};
80
- cursor: pointer;
68
+ const OfflineStatus = styled.div `
69
+ display: flex;
70
+ padding: 8px 12px;
71
+ justify-content: center;
72
+ align-items: center;
73
+ gap: 8px;
74
+ border-radius: 32px;
75
+ font-weight: 700;
76
+ border-width: 1px;
77
+ border-style: solid;
78
+ border-color: ${({ colorPalette }) => colorPalette.utils.icon};
79
+ color: ${({ colorPalette }) => colorPalette.utils.icon};
80
+ cursor: pointer;
81
81
  `;
82
- const NavMenuDropdown = styled.div `
83
- width: 320px;
84
- position: absolute;
85
- top: 88px;
86
- z-index: 1000;
87
- box-shadow: 5px 5px 5px rgba(64, 64, 64, 0.2);
88
- background: ${({ colorPalette }) => colorPalette.background.primary};
89
- animation: ${slideInLeft} 0.5s ease-out forwards;
90
- display: ${({ navOpen }) => (navOpen ? "flex" : "none")};
91
- flex-direction: column;
92
- &:focus {
93
- outline: none;
94
- }
82
+ const NavMenuDropdown = styled.div `
83
+ width: 320px;
84
+ position: absolute;
85
+ top: 88px;
86
+ z-index: 1000;
87
+ box-shadow: 5px 5px 5px rgba(64, 64, 64, 0.2);
88
+ background: ${({ colorPalette }) => colorPalette.background.primary};
89
+ animation: ${slideInLeft} 0.5s ease-out forwards;
90
+ display: ${({ navOpen }) => (navOpen ? "flex" : "none")};
91
+ flex-direction: column;
92
+ &:focus {
93
+ outline: none;
94
+ }
95
95
  `;
96
- const MenuItems = styled.div `
97
- align-items: flex-start;
98
- align-self: stretch;
96
+ const MenuItems = styled.div `
97
+ align-items: flex-start;
98
+ align-self: stretch;
99
99
  `;
100
- const MenuItem = styled.div `
101
- display: flex;
102
- padding: 8px 16px;
103
- align-items: center;
104
- color: ${({ colorPalette }) => colorPalette.text.tertiary};
105
- font-weight: 700;
106
- border-width: 0 0 1px 0;
107
- border-style: solid;
108
- border-color: ${({ colorPalette }) => colorPalette.background.secondary};
109
- width: 288px;
110
- cursor: pointer;
100
+ const MenuItem = styled.div `
101
+ display: flex;
102
+ padding: 8px 16px;
103
+ align-items: center;
104
+ color: ${({ colorPalette }) => colorPalette.text.tertiary};
105
+ font-weight: 700;
106
+ border-width: 0 0 1px 0;
107
+ border-style: solid;
108
+ border-color: ${({ colorPalette }) => colorPalette.background.secondary};
109
+ width: 288px;
110
+ cursor: pointer;
111
111
  `;
112
- const Location = styled.div `
113
- display: flex;
114
- align-items: center;
115
- gap: 10px;
116
- flex: 1 0 0;
117
- font-size: 16px;
118
- line-height: 150%;
112
+ const Location = styled.div `
113
+ display: flex;
114
+ align-items: center;
115
+ gap: 10px;
116
+ flex: 1 0 0;
117
+ font-size: 16px;
118
+ line-height: 150%;
119
119
  `;
120
- const Toggles = styled.div `
121
- padding: 24px 0px;
120
+ const Toggles = styled.div `
121
+ padding: 24px 0px;
122
122
  `;
123
- const AppInfo = styled.div `
124
- padding: 16px;
125
- width: 288px;
126
- background: ${({ colorPalette }) => colorPalette.background.tertiary};
123
+ const AppInfo = styled.div `
124
+ padding: 16px;
125
+ width: 288px;
126
+ background: ${({ colorPalette }) => colorPalette.background.tertiary};
127
127
  `;
128
- const LogoAndCopyRights = styled.div `
129
- display: flex;
130
- gap: 16px;
131
- margin-bottom: 12px;
132
- color: ${({ colorPalette }) => colorPalette.text.primary};
128
+ const LogoAndCopyRights = styled.div `
129
+ display: flex;
130
+ gap: 16px;
131
+ margin-bottom: 12px;
132
+ color: ${({ colorPalette }) => colorPalette.text.primary};
133
133
  `;
134
- const CopyRights = styled.div `
135
- font-size: 12px;
136
- font-style: normal;
137
- font-weight: 400;
138
- line-height: 55%;
134
+ const CopyRights = styled.div `
135
+ font-size: 12px;
136
+ font-style: normal;
137
+ font-weight: 400;
138
+ line-height: 55%;
139
139
  `;
140
- const Version = styled.div `
141
- text-align: center;
142
- font-size: 14px;
143
- font-weight: 400;
144
- color: ${({ colorPalette }) => colorPalette.text.primary};
140
+ const Version = styled.div `
141
+ text-align: center;
142
+ font-size: 14px;
143
+ font-weight: 400;
144
+ color: ${({ colorPalette }) => colorPalette.text.primary};
145
145
  `;
146
146
  const NavBar = (props) => {
147
147
  const { colorPalette, locations, appInfo } = props;
@@ -4,97 +4,97 @@ import styled from "@emotion/styled";
4
4
  import { Button } from "../../Atoms/Buttons/Button";
5
5
  import { FiX } from "react-icons/fi";
6
6
  import { useEffect } from "react";
7
- export const StyledDialog = styled(Dialog.Overlay) `
8
- ${({ colorPalette, toast }) => !toast && `background-color: ${colorPalette.background.secondary}`};
9
- opacity: 0.8;
10
- position: absolute;
11
- inset: 0;
12
- animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
13
- z-index: 1000;
7
+ export const StyledDialog = styled(Dialog.Overlay) `
8
+ ${({ colorPalette, toast }) => !toast && `background-color: ${colorPalette.background.secondary}`};
9
+ opacity: 0.8;
10
+ position: absolute;
11
+ inset: 0;
12
+ animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
13
+ z-index: 1000;
14
14
  `;
15
- export const StyledContent = styled(Dialog.Content) `
15
+ export const StyledContent = styled(Dialog.Content) `
16
16
  ${({ colorPalette, toast }) => !toast
17
17
  ? `background-color: ${colorPalette.background.primary}; color: ${colorPalette.text.primary};`
18
- : `background-color: ${colorPalette.toastBackground[toast]}; color: ${colorPalette.toastText[toast]};`};
19
- box-shadow: ${({ colorPalette }) => `${colorPalette.background.secondary} 0px 5px 15px`};
20
- ${({ toast }) => !toast && `border-radius: 4px;`};
21
- position: absolute;
22
- top: ${({ toast }) => (toast ? "64px" : "50%")};
23
- left: 50%;
24
- transform: translate(-50%, -50%);
25
- max-height: 85vh;
26
- animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
27
- z-index: 1000;
28
- display: flex;
29
- flex-direction: column;
30
- min-width: "300px";
31
- ${({ toast }) => toast && `width: 100%;`};
32
- gap: 16px;
33
- :focus {
34
- outline: none;
35
- }
18
+ : `background-color: ${colorPalette.toastBackground[toast]}; color: ${colorPalette.toastText[toast]};`};
19
+ box-shadow: ${({ colorPalette }) => `${colorPalette.background.secondary} 0px 5px 15px`};
20
+ ${({ toast }) => !toast && `border-radius: 4px;`};
21
+ position: absolute;
22
+ top: ${({ toast }) => (toast ? "64px" : "50%")};
23
+ left: 50%;
24
+ transform: translate(-50%, -50%);
25
+ max-height: 85vh;
26
+ animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
27
+ z-index: 1000;
28
+ display: flex;
29
+ flex-direction: column;
30
+ min-width: "300px";
31
+ ${({ toast }) => toast && `width: 100%;`};
32
+ gap: 16px;
33
+ :focus {
34
+ outline: none;
35
+ }
36
36
  `;
37
- export const DialogContainer = styled.div `
38
- display: flex;
39
- padding: 24px 24px 0px 24px;
40
- flex-direction: column;
41
- align-items: center;
42
- gap: 16px;
43
- align-self: stretch;
37
+ export const DialogContainer = styled.div `
38
+ display: flex;
39
+ padding: 24px 24px 0px 24px;
40
+ flex-direction: column;
41
+ align-items: center;
42
+ gap: 16px;
43
+ align-self: stretch;
44
44
  `;
45
- export const ModalTitleContainer = styled.div `
46
- display: flex;
47
- justify-content: space-between;
48
- align-items: center;
49
- width: 100%;
45
+ export const ModalTitleContainer = styled.div `
46
+ display: flex;
47
+ justify-content: space-between;
48
+ align-items: center;
49
+ width: 100%;
50
50
  `;
51
- export const ModalTitle = styled.div `
52
- font-size: 24px;
53
- font-style: normal;
54
- font-weight: 600;
55
- line-height: 150%;
51
+ export const ModalTitle = styled.div `
52
+ font-size: 24px;
53
+ font-style: normal;
54
+ font-weight: 600;
55
+ line-height: 150%;
56
56
  `;
57
- export const ModalHeading = styled.div `
58
- font-size: 16px;
59
- font-style: normal;
60
- font-weight: 700;
61
- line-height: 150%;
57
+ export const ModalHeading = styled.div `
58
+ font-size: 16px;
59
+ font-style: normal;
60
+ font-weight: 700;
61
+ line-height: 150%;
62
62
  `;
63
- export const ModelSubHeading = styled.div `
64
- font-size: 16px;
65
- font-style: normal;
66
- font-weight: 400;
67
- line-height: 24px; /* 150% */
68
- letter-spacing: 0.16px;
69
- width: 100%;
70
- white-space: pre-line;
63
+ export const ModelSubHeading = styled.div `
64
+ font-size: 16px;
65
+ font-style: normal;
66
+ font-weight: 400;
67
+ line-height: 24px; /* 150% */
68
+ letter-spacing: 0.16px;
69
+ width: 100%;
70
+ white-space: pre-line;
71
71
  `;
72
- export const ModalFooter = styled.div `
73
- display: flex;
74
- padding: 24px 16px;
75
- justify-content: center;
76
- align-items: center;
77
- gap: 16px;
78
- align-self: stretch;
72
+ export const ModalFooter = styled.div `
73
+ display: flex;
74
+ padding: 24px 16px;
75
+ justify-content: center;
76
+ align-items: center;
77
+ gap: 16px;
78
+ align-self: stretch;
79
79
  `;
80
- export const ModalInputBox = styled.div `
81
- display: flex;
82
- width: 322px;
83
- flex-direction: column;
84
- justify-content: center;
85
- align-items: flex-start;
86
- gap: 8px;
80
+ export const ModalInputBox = styled.div `
81
+ display: flex;
82
+ width: 322px;
83
+ flex-direction: column;
84
+ justify-content: center;
85
+ align-items: flex-start;
86
+ gap: 8px;
87
87
  `;
88
- export const ConfirmationInput = styled.input `
89
- display: flex;
90
- width: 275px;
91
- flex-direction: column;
92
- align-items: flex-start;
93
- gap: 8px;
94
- height: 40px;
95
- padding: 8px 16px;
96
- justify-content: center;
97
- flex: 1 0 0;
88
+ export const ConfirmationInput = styled.input `
89
+ display: flex;
90
+ width: 275px;
91
+ flex-direction: column;
92
+ align-items: flex-start;
93
+ gap: 8px;
94
+ height: 40px;
95
+ padding: 8px 16px;
96
+ justify-content: center;
97
+ flex: 1 0 0;
98
98
  `;
99
99
  export const Modal = (props) => {
100
100
  const { open, children, colorPalette, setOpen, toast, timeout, modal, ...htmlProps } = props;
package/dist/index.d.ts CHANGED
@@ -32,8 +32,8 @@ export * from "./Organisms/Card/Card";
32
32
  export * from "./Organisms/EditUserPerms/EditUserPerms";
33
33
  export * from "./Organisms/ErrorSplash/ErrorSplash";
34
34
  export * from "./Organisms/Modal/Modal";
35
- export * from "./Organisms/TabManager/TabManager";
36
35
  export * from "./Organisms/Table/Table";
36
+ export * from "./Organisms/TabManager/TabManager";
37
37
  export * from "./Organisms/Tutorial/Tutorial";
38
38
  export * from "./Theme/ThemeProvider";
39
39
  export * from "./Theme/types";
package/dist/index.js CHANGED
@@ -33,8 +33,8 @@ export * from "./Organisms/Card/Card";
33
33
  export * from "./Organisms/EditUserPerms/EditUserPerms";
34
34
  export * from "./Organisms/ErrorSplash/ErrorSplash";
35
35
  export * from "./Organisms/Modal/Modal";
36
- export * from "./Organisms/TabManager/TabManager";
37
36
  export * from "./Organisms/Table/Table";
37
+ export * from "./Organisms/TabManager/TabManager";
38
38
  export * from "./Organisms/Tutorial/Tutorial";
39
39
  export * from "./Theme/ThemeProvider";
40
40
  export * from "./Theme/types";
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAE7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AACtC,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAE7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AACtC,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,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": "6.4.0",
3
+ "version": "6.4.1-s3methods.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",
@@ -47,7 +47,7 @@
47
47
  "access": "public",
48
48
  "registry": "https://registry.npmjs.org/"
49
49
  },
50
- "gitHead": "bebd4ff8d57417f6a1083af391b22e210dc4b3c8",
50
+ "gitHead": "1763d1dcad86ebd1c534f5176810cfb817629c9d",
51
51
  "dependencies": {
52
52
  "@emotion/react": "^11.13.0",
53
53
  "@emotion/styled": "^11.13.0",