@campxdev/react-blueprint 0.1.20 → 0.1.22
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/package.json +1 -1
- package/src/components/Icons/IconComponents/ActiveDevicesIcon.tsx +75 -0
- package/src/components/Icons/IconComponents/ExportIcon.tsx +70 -0
- package/src/components/Icons/IconComponents/FilterIcon.tsx +63 -0
- package/src/components/Icons/IconComponents/InstitutionsIcon.tsx +112 -0
- package/src/components/Icons/IconComponents/NavigationIcon.tsx +34 -0
- package/src/components/Icons/IconComponents/ProfileIcon.tsx +53 -0
- package/src/components/Icons/export.ts +12 -0
- package/src/components/Input/CheckBox/CheckBox.stories.tsx +46 -0
- package/src/components/Input/CheckBox/CheckBox.tsx +72 -0
- package/src/components/Input/CheckBox/MultiCheckBox.tsx +59 -0
- package/src/components/Layout/Header/AppHeader.tsx +1 -1
- package/src/components/Layout/Header/HeaderActions/UserBox.tsx +17 -8
- package/src/components/Layout/PageContent/PageContent.tsx +1 -1
- package/src/components/export.ts +1 -0
- package/src/themes/commonTheme.ts +13 -1
- package/src/utils/campxAxios.ts +1 -2
- package/src/utils/constants.ts +3 -0
package/package.json
CHANGED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { useTheme } from "@mui/material";
|
|
2
|
+
|
|
3
|
+
export const ActiveDevicesIcon = () => {
|
|
4
|
+
const theme = useTheme();
|
|
5
|
+
const color = theme.palette.text.primary;
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<div>
|
|
9
|
+
<svg
|
|
10
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
+
id="Active_Devices"
|
|
12
|
+
data-name="Active Devices"
|
|
13
|
+
width="16"
|
|
14
|
+
height="16"
|
|
15
|
+
viewBox="0 0 16 16"
|
|
16
|
+
style={{
|
|
17
|
+
stroke: color,
|
|
18
|
+
fill: "none",
|
|
19
|
+
}}
|
|
20
|
+
>
|
|
21
|
+
<g id="monitor-mobbile">
|
|
22
|
+
<path
|
|
23
|
+
id="Vector"
|
|
24
|
+
d="M5.706,10.382H3.235C.756,10.382,0,9.625,0,7.147V3.235C0,.756.756,0,3.235,0H10.1c2.478,0,3.235.756,3.235,3.235a.489.489,0,0,1-.978,0c0-1.917-.339-2.256-2.256-2.256H3.235C1.317.978.978,1.317.978,3.235V7.147c0,1.917.339,2.256,2.256,2.256H5.706a.489.489,0,1,1,0,.978Z"
|
|
25
|
+
transform="translate(0.99 1.335)"
|
|
26
|
+
strokeWidth="0.6"
|
|
27
|
+
/>
|
|
28
|
+
<path
|
|
29
|
+
id="Vector-2"
|
|
30
|
+
data-name="Vector"
|
|
31
|
+
d="M.489,3.932A.493.493,0,0,1,0,3.443V.489A.493.493,0,0,1,.489,0,.493.493,0,0,1,.978.489V3.443A.488.488,0,0,1,.489,3.932Z"
|
|
32
|
+
transform="translate(6.207 10.732)"
|
|
33
|
+
strokeWidth="0.6"
|
|
34
|
+
/>
|
|
35
|
+
<path
|
|
36
|
+
id="Vector-3"
|
|
37
|
+
data-name="Vector"
|
|
38
|
+
d="M5.359,1H.459A.484.484,0,0,1,0,.5.484.484,0,0,1,.459,0h4.9a.484.484,0,0,1,.459.5A.484.484,0,0,1,5.359,1Z"
|
|
39
|
+
transform="translate(1.367 8.133)"
|
|
40
|
+
strokeWidth="0.6"
|
|
41
|
+
/>
|
|
42
|
+
<path
|
|
43
|
+
id="Vector-4"
|
|
44
|
+
data-name="Vector"
|
|
45
|
+
d="M2.615.978H.489A.493.493,0,0,1,0,.489.493.493,0,0,1,.489,0H2.615A.493.493,0,0,1,3.1.489.493.493,0,0,1,2.615.978Z"
|
|
46
|
+
transform="translate(4.081 13.687)"
|
|
47
|
+
strokeWidth="0.6"
|
|
48
|
+
/>
|
|
49
|
+
<path
|
|
50
|
+
id="Vector-5"
|
|
51
|
+
data-name="Vector"
|
|
52
|
+
d="M4.735,8.562H2.419C.613,8.562,0,7.949,0,6.143V2.419C0,.613.613,0,2.419,0H4.735C6.541,0,7.154.613,7.154,2.419V6.143C7.154,7.956,6.541,8.562,4.735,8.562ZM2.419.978C1.141.978.978,1.141.978,2.419V6.143c0,1.278.163,1.441,1.441,1.441H4.735c1.278,0,1.441-.163,1.441-1.441V2.419c0-1.278-.163-1.441-1.441-1.441Z"
|
|
53
|
+
transform="translate(7.856 6.102)"
|
|
54
|
+
strokeWidth="0.6"
|
|
55
|
+
/>
|
|
56
|
+
<path
|
|
57
|
+
id="Vector-6"
|
|
58
|
+
data-name="Vector"
|
|
59
|
+
d="M.652,1.3a.657.657,0,0,1-.463-.189A.644.644,0,0,1,.052.9.709.709,0,0,1,0,.65.658.658,0,0,1,.189.193.68.68,0,0,1,.783.011L.9.05c.039.02.078.039.111.059A.647.647,0,0,1,1.3.65.709.709,0,0,1,1.252.9a.644.644,0,0,1-.137.209.4.4,0,0,1-.1.078A.619.619,0,0,1,.9,1.256a.788.788,0,0,1-.117.033A.444.444,0,0,1,.652,1.3Z"
|
|
60
|
+
transform="translate(10.804 11.244)"
|
|
61
|
+
strokeWidth="0.6"
|
|
62
|
+
/>
|
|
63
|
+
<path
|
|
64
|
+
id="Vector-7"
|
|
65
|
+
data-name="Vector"
|
|
66
|
+
d="M0,0H16V16H0Z"
|
|
67
|
+
fill="none"
|
|
68
|
+
opacity="0"
|
|
69
|
+
strokeWidth="0.6"
|
|
70
|
+
/>
|
|
71
|
+
</g>
|
|
72
|
+
</svg>
|
|
73
|
+
</div>
|
|
74
|
+
);
|
|
75
|
+
};
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { useTheme } from "@mui/material";
|
|
2
|
+
|
|
3
|
+
export const ExportIcon = ({
|
|
4
|
+
sx = {},
|
|
5
|
+
color,
|
|
6
|
+
}: {
|
|
7
|
+
sx?: any;
|
|
8
|
+
color?: string;
|
|
9
|
+
}) => {
|
|
10
|
+
const theme = useTheme();
|
|
11
|
+
color = color ?? theme.palette.text.primary;
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<>
|
|
15
|
+
<svg
|
|
16
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
17
|
+
width="25"
|
|
18
|
+
height="20"
|
|
19
|
+
viewBox="0 0 30 30"
|
|
20
|
+
style={{
|
|
21
|
+
fill: color,
|
|
22
|
+
...sx,
|
|
23
|
+
}}
|
|
24
|
+
>
|
|
25
|
+
<g
|
|
26
|
+
id="Mask_Group_152"
|
|
27
|
+
data-name="Mask Group 152"
|
|
28
|
+
transform="translate(30) rotate(90)"
|
|
29
|
+
clipPath="url(#clip-path)"
|
|
30
|
+
>
|
|
31
|
+
<g
|
|
32
|
+
id="Group_9672"
|
|
33
|
+
data-name="Group 9672"
|
|
34
|
+
transform="translate(5.109 3.395)"
|
|
35
|
+
>
|
|
36
|
+
<g
|
|
37
|
+
id="Group_9671"
|
|
38
|
+
data-name="Group 9671"
|
|
39
|
+
transform="translate(2.196 5.819)"
|
|
40
|
+
>
|
|
41
|
+
<path
|
|
42
|
+
id="Vector"
|
|
43
|
+
d="M1.1,0A1.1,1.1,0,0,0,.672.088,1.083,1.083,0,0,0,0,1.1V16.383a1.1,1.1,0,0,0,1.1,1.1,1.1,1.1,0,0,0,1.1-1.1V3.742L6.54,8.089A1.1,1.1,0,0,0,8.089,6.54L1.871.322A1.1,1.1,0,0,0,1.1,0Z"
|
|
44
|
+
transform="translate(6.215 0)"
|
|
45
|
+
stroke={color}
|
|
46
|
+
strokeWidth="0.5"
|
|
47
|
+
/>
|
|
48
|
+
<path
|
|
49
|
+
id="Vector-2"
|
|
50
|
+
data-name="Vector"
|
|
51
|
+
d="M7.311,0a1.084,1.084,0,0,0-.775.322L.318,6.54A1.1,1.1,0,0,0,1.867,8.089L8.086,1.871a1.1,1.1,0,0,0,0-1.549A1.084,1.084,0,0,0,7.311,0Z"
|
|
52
|
+
transform="translate(0 0)"
|
|
53
|
+
stroke={color}
|
|
54
|
+
strokeWidth="0.5"
|
|
55
|
+
/>
|
|
56
|
+
</g>
|
|
57
|
+
<path
|
|
58
|
+
id="Vector-3"
|
|
59
|
+
data-name="Vector"
|
|
60
|
+
d="M18.878,0H1.03A1.037,1.037,0,0,0,0,1.03a1.037,1.037,0,0,0,1.03,1.03H18.878a1.037,1.037,0,0,0,1.03-1.03A1.037,1.037,0,0,0,18.878,0Z"
|
|
61
|
+
transform="translate(0 0)"
|
|
62
|
+
stroke={color}
|
|
63
|
+
strokeWidth="0.5"
|
|
64
|
+
/>
|
|
65
|
+
</g>
|
|
66
|
+
</g>
|
|
67
|
+
</svg>
|
|
68
|
+
</>
|
|
69
|
+
);
|
|
70
|
+
};
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { useTheme } from "@mui/material";
|
|
2
|
+
export const FilterIcon = ({
|
|
3
|
+
sx = {},
|
|
4
|
+
color,
|
|
5
|
+
}: {
|
|
6
|
+
sx?: any;
|
|
7
|
+
color?: string;
|
|
8
|
+
}) => {
|
|
9
|
+
const theme = useTheme();
|
|
10
|
+
color = color ?? theme.palette.text.primary;
|
|
11
|
+
return (
|
|
12
|
+
<>
|
|
13
|
+
<svg
|
|
14
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
15
|
+
id="sort"
|
|
16
|
+
width="20"
|
|
17
|
+
height="20"
|
|
18
|
+
viewBox="0 0 20 20"
|
|
19
|
+
style={{
|
|
20
|
+
fill: color,
|
|
21
|
+
...sx,
|
|
22
|
+
}}
|
|
23
|
+
>
|
|
24
|
+
<path
|
|
25
|
+
id="Vector"
|
|
26
|
+
d="M0,0H15"
|
|
27
|
+
transform="translate(2.5 5.833)"
|
|
28
|
+
fill="none"
|
|
29
|
+
stroke={color}
|
|
30
|
+
stroke-linecap="round"
|
|
31
|
+
stroke-width="1.5"
|
|
32
|
+
/>
|
|
33
|
+
<path
|
|
34
|
+
id="Vector-2"
|
|
35
|
+
data-name="Vector"
|
|
36
|
+
d="M0,0H10"
|
|
37
|
+
transform="translate(5 10)"
|
|
38
|
+
fill="none"
|
|
39
|
+
stroke={color}
|
|
40
|
+
stroke-linecap="round"
|
|
41
|
+
stroke-width="1.5"
|
|
42
|
+
/>
|
|
43
|
+
<path
|
|
44
|
+
id="Vector-3"
|
|
45
|
+
data-name="Vector"
|
|
46
|
+
d="M0,0H3.333"
|
|
47
|
+
transform="translate(8.333 14.167)"
|
|
48
|
+
fill="none"
|
|
49
|
+
stroke={color}
|
|
50
|
+
stroke-linecap="round"
|
|
51
|
+
stroke-width="1.5"
|
|
52
|
+
/>
|
|
53
|
+
<path
|
|
54
|
+
id="Vector-4"
|
|
55
|
+
data-name="Vector"
|
|
56
|
+
d="M0,0H20V20H0Z"
|
|
57
|
+
fill="none"
|
|
58
|
+
opacity="0"
|
|
59
|
+
/>
|
|
60
|
+
</svg>
|
|
61
|
+
</>
|
|
62
|
+
);
|
|
63
|
+
};
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { useTheme } from "@mui/material";
|
|
2
|
+
|
|
3
|
+
export const InstitutionsIcon = () => {
|
|
4
|
+
const theme = useTheme();
|
|
5
|
+
const color = theme.palette.text.primary;
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<div>
|
|
9
|
+
<svg
|
|
10
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
+
id="Institutions"
|
|
12
|
+
width="16"
|
|
13
|
+
height="16"
|
|
14
|
+
viewBox="0 0 16 16"
|
|
15
|
+
style={{
|
|
16
|
+
stroke: color,
|
|
17
|
+
}}
|
|
18
|
+
>
|
|
19
|
+
<g id="bank">
|
|
20
|
+
<path
|
|
21
|
+
id="Vector"
|
|
22
|
+
d="M12.309,6.483H1.091A1.1,1.1,0,0,1,0,5.392V3.323a1.133,1.133,0,0,1,.686-1.01L6.295.07a1.205,1.205,0,0,1,.81,0l5.609,2.244a1.141,1.141,0,0,1,.686,1.01V5.392A1.1,1.1,0,0,1,12.309,6.483ZM6.7.93a.174.174,0,0,0-.062.006L1.035,3.18a.235.235,0,0,0-.1.143V5.392a.154.154,0,0,0,.156.156H12.309a.154.154,0,0,0,.156-.156V3.323a.212.212,0,0,0-.1-.143L6.756.936A.139.139,0,0,0,6.7.93Z"
|
|
23
|
+
transform="translate(1.3 1.363)"
|
|
24
|
+
stroke={color}
|
|
25
|
+
strokeWidth="0.5"
|
|
26
|
+
fill="none" // Removed fill to ensure stroke is visible
|
|
27
|
+
/>
|
|
28
|
+
<path
|
|
29
|
+
id="Vector-2"
|
|
30
|
+
data-name="Vector"
|
|
31
|
+
d="M12.932,3.428H.467A.471.471,0,0,1,0,2.96V1.091A1.1,1.1,0,0,1,1.091,0H12.309A1.1,1.1,0,0,1,13.4,1.091V2.96A.471.471,0,0,1,12.932,3.428Zm-12-.935h11.53v-1.4a.154.154,0,0,0-.156-.156H1.091a.154.154,0,0,0-.156.156Z"
|
|
32
|
+
transform="translate(1.3 11.274)"
|
|
33
|
+
stroke={color}
|
|
34
|
+
strokeWidth="0.5"
|
|
35
|
+
fill="none" // Removed fill to ensure stroke is visible
|
|
36
|
+
/>
|
|
37
|
+
<path
|
|
38
|
+
id="Vector-3"
|
|
39
|
+
data-name="Vector"
|
|
40
|
+
d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
|
|
41
|
+
transform="translate(2.547 6.911)"
|
|
42
|
+
stroke={color}
|
|
43
|
+
strokeWidth="0.5"
|
|
44
|
+
fill="none" // Removed fill to ensure stroke is visible
|
|
45
|
+
/>
|
|
46
|
+
<path
|
|
47
|
+
id="Vector-4"
|
|
48
|
+
data-name="Vector"
|
|
49
|
+
d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
|
|
50
|
+
transform="translate(5.04 6.911)"
|
|
51
|
+
stroke={color}
|
|
52
|
+
strokeWidth="0.5"
|
|
53
|
+
fill="none" // Removed fill to ensure stroke is visible
|
|
54
|
+
/>
|
|
55
|
+
<path
|
|
56
|
+
id="Vector-5"
|
|
57
|
+
data-name="Vector"
|
|
58
|
+
d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
|
|
59
|
+
transform="translate(7.533 6.911)"
|
|
60
|
+
stroke={color}
|
|
61
|
+
strokeWidth="0.5"
|
|
62
|
+
fill="none" // Removed fill to ensure stroke is visible
|
|
63
|
+
/>
|
|
64
|
+
<path
|
|
65
|
+
id="Vector-6"
|
|
66
|
+
data-name="Vector"
|
|
67
|
+
d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
|
|
68
|
+
transform="translate(10.025 6.911)"
|
|
69
|
+
stroke={color}
|
|
70
|
+
strokeWidth="0.5"
|
|
71
|
+
fill="none" // Removed fill to ensure stroke is visible
|
|
72
|
+
/>
|
|
73
|
+
<path
|
|
74
|
+
id="Vector-7"
|
|
75
|
+
data-name="Vector"
|
|
76
|
+
d="M.467,5.3A.471.471,0,0,1,0,4.83V.467A.471.471,0,0,1,.467,0,.471.471,0,0,1,.935.467V4.83A.471.471,0,0,1,.467,5.3Z"
|
|
77
|
+
transform="translate(12.518 6.911)"
|
|
78
|
+
stroke={color}
|
|
79
|
+
strokeWidth="0.5"
|
|
80
|
+
fill="none" // Removed fill to ensure stroke is visible
|
|
81
|
+
/>
|
|
82
|
+
<path
|
|
83
|
+
id="Vector-8"
|
|
84
|
+
data-name="Vector"
|
|
85
|
+
d="M14.178.935H.467A.471.471,0,0,1,0,.467.471.471,0,0,1,.467,0H14.178a.471.471,0,0,1,.467.467A.471.471,0,0,1,14.178.935Z"
|
|
86
|
+
transform="translate(0.677 13.767)"
|
|
87
|
+
stroke={color}
|
|
88
|
+
strokeWidth="0.5"
|
|
89
|
+
fill="none" // Removed fill to ensure stroke is visible
|
|
90
|
+
/>
|
|
91
|
+
<path
|
|
92
|
+
id="Vector-9"
|
|
93
|
+
data-name="Vector"
|
|
94
|
+
d="M1.4,2.8A1.4,1.4,0,1,1,2.8,1.4,1.4,1.4,0,0,1,1.4,2.8Zm0-1.87A.467.467,0,1,0,1.87,1.4.471.471,0,0,0,1.4.935Z"
|
|
95
|
+
transform="translate(6.598 3.484)"
|
|
96
|
+
stroke={color}
|
|
97
|
+
strokeWidth="0.5"
|
|
98
|
+
fill="none" // Removed fill to ensure stroke is visible
|
|
99
|
+
/>
|
|
100
|
+
<path
|
|
101
|
+
id="Vector-10"
|
|
102
|
+
data-name="Vector"
|
|
103
|
+
d="M0,0H16V16H0Z"
|
|
104
|
+
fill="none"
|
|
105
|
+
opacity="0"
|
|
106
|
+
strokeWidth="0.5"
|
|
107
|
+
/>
|
|
108
|
+
</g>
|
|
109
|
+
</svg>
|
|
110
|
+
</div>
|
|
111
|
+
);
|
|
112
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { useTheme } from "@mui/material";
|
|
2
|
+
|
|
3
|
+
export const NavigationIcon = () => {
|
|
4
|
+
const theme = useTheme();
|
|
5
|
+
const color = theme.palette.text.primary;
|
|
6
|
+
return (
|
|
7
|
+
<>
|
|
8
|
+
<svg
|
|
9
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
10
|
+
width="21"
|
|
11
|
+
height="21"
|
|
12
|
+
viewBox="0 0 30 30"
|
|
13
|
+
style={{
|
|
14
|
+
stroke: color,
|
|
15
|
+
}}
|
|
16
|
+
>
|
|
17
|
+
<g
|
|
18
|
+
id="Mask_Group_125"
|
|
19
|
+
data-name="Mask Group 125"
|
|
20
|
+
transform="translate(-847 -594)"
|
|
21
|
+
clipPath="url(#clip-path)"
|
|
22
|
+
>
|
|
23
|
+
<path
|
|
24
|
+
id="share-square"
|
|
25
|
+
d="M17.555,19.621a5.165,5.165,0,0,1-5.163,5.163H5.163A5.165,5.165,0,0,1,0,19.621V12.392A5.165,5.165,0,0,1,5.163,7.229H6.2a1.033,1.033,0,0,1,0,2.065H5.163a3.107,3.107,0,0,0-3.1,3.1v7.229a3.107,3.107,0,0,0,3.1,3.1h7.229a3.107,3.107,0,0,0,3.1-3.1,1.033,1.033,0,1,1,2.065,0Zm6.33-13.538L18.3.31A1.019,1.019,0,0,0,16.843.289a1.029,1.029,0,0,0-.021,1.456L22.13,7.219H13.425a5.165,5.165,0,0,0-5.163,5.163v5.163a1.033,1.033,0,0,0,2.065,0V12.382a3.107,3.107,0,0,1,3.1-3.1h8.7l-5.308,5.473a1.027,1.027,0,0,0,.744,1.745,1.066,1.066,0,0,0,.744-.31l5.576-5.752a3.1,3.1,0,0,0,.01-4.368Z"
|
|
26
|
+
transform="translate(849.609 596.406)"
|
|
27
|
+
fill={color}
|
|
28
|
+
strokeWidth="0.3"
|
|
29
|
+
/>
|
|
30
|
+
</g>
|
|
31
|
+
</svg>
|
|
32
|
+
</>
|
|
33
|
+
);
|
|
34
|
+
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { useTheme } from "@mui/material";
|
|
2
|
+
|
|
3
|
+
export const ProfileIcon = () => {
|
|
4
|
+
const theme = useTheme();
|
|
5
|
+
const color = theme.palette.text.primary;
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<>
|
|
9
|
+
<svg
|
|
10
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
+
id="My_Profile"
|
|
12
|
+
data-name="My Profile"
|
|
13
|
+
width="16"
|
|
14
|
+
height="16"
|
|
15
|
+
viewBox="0 0 16 16"
|
|
16
|
+
style={{
|
|
17
|
+
stroke: color,
|
|
18
|
+
fill: color, // Set fill color to use the theme's primary text color
|
|
19
|
+
}}
|
|
20
|
+
>
|
|
21
|
+
<g id="user-octagon">
|
|
22
|
+
<path
|
|
23
|
+
id="Vector"
|
|
24
|
+
d="M6.56,14.337a2.585,2.585,0,0,1-1.3-.347L1.3,11.7A2.618,2.618,0,0,1,0,9.45V4.89A2.618,2.618,0,0,1,1.3,2.637L5.26.35a2.589,2.589,0,0,1,2.6,0l3.96,2.287a2.618,2.618,0,0,1,1.3,2.253V9.45a2.618,2.618,0,0,1-1.3,2.253L7.86,13.99A2.585,2.585,0,0,1,6.56,14.337ZM6.56,1a1.634,1.634,0,0,0-.8.213L1.8,3.5A1.6,1.6,0,0,0,1,4.89V9.45a1.612,1.612,0,0,0,.8,1.387l3.96,2.287a1.6,1.6,0,0,0,1.6,0l3.96-2.287a1.6,1.6,0,0,0,.8-1.387V4.89a1.612,1.612,0,0,0-.8-1.387L7.36,1.217A1.634,1.634,0,0,0,6.56,1Z"
|
|
25
|
+
transform="translate(1.44 0.83)"
|
|
26
|
+
strokeWidth="0.5"
|
|
27
|
+
/>
|
|
28
|
+
<path
|
|
29
|
+
id="Vector-2"
|
|
30
|
+
data-name="Vector"
|
|
31
|
+
d="M2.053,4.107A2.053,2.053,0,1,1,4.107,2.053,2.054,2.054,0,0,1,2.053,4.107ZM2.053,1A1.053,1.053,0,1,0,3.107,2.053,1.056,1.056,0,0,0,2.053,1Z"
|
|
32
|
+
transform="translate(5.947 3.727)"
|
|
33
|
+
strokeWidth="0.5"
|
|
34
|
+
/>
|
|
35
|
+
<path
|
|
36
|
+
id="Vector-3"
|
|
37
|
+
data-name="Vector"
|
|
38
|
+
d="M5.833,3.173a.5.5,0,0,1-.5-.5A1.974,1.974,0,0,0,3.167,1,1.974,1.974,0,0,0,1,2.673a.5.5,0,0,1-.5.5.5.5,0,0,1-.5-.5A2.955,2.955,0,0,1,3.167,0,2.955,2.955,0,0,1,6.333,2.673.5.5,0,0,1,5.833,3.173Z"
|
|
39
|
+
transform="translate(4.833 8.433)"
|
|
40
|
+
strokeWidth="0.5"
|
|
41
|
+
/>
|
|
42
|
+
<path
|
|
43
|
+
id="Vector-4"
|
|
44
|
+
data-name="Vector"
|
|
45
|
+
d="M0,0H16V16H0Z"
|
|
46
|
+
fill="none"
|
|
47
|
+
opacity="0"
|
|
48
|
+
/>
|
|
49
|
+
</g>
|
|
50
|
+
</svg>
|
|
51
|
+
</>
|
|
52
|
+
);
|
|
53
|
+
};
|
|
@@ -1,13 +1,19 @@
|
|
|
1
|
+
import { ActiveDevicesIcon } from "./IconComponents/ActiveDevicesIcon";
|
|
1
2
|
import { AppsIcon } from "./IconComponents/AppsIcon";
|
|
2
3
|
import { CareerIcon } from "./IconComponents/CareerIcon";
|
|
3
4
|
import { ClogWheelIcon } from "./IconComponents/ClogWheelIcon";
|
|
4
5
|
import { DashBoardIcon } from "./IconComponents/DashBoardIcon";
|
|
5
6
|
import { ExamResultIcon } from "./IconComponents/ExamResultIcon";
|
|
7
|
+
import { ExportIcon } from "./IconComponents/ExportIcon";
|
|
8
|
+
import { FilterIcon } from "./IconComponents/FilterIcon";
|
|
6
9
|
import { HelpIcon } from "./IconComponents/HelpIcon";
|
|
7
10
|
import { HomeIcon } from "./IconComponents/HomeIcon";
|
|
11
|
+
import { InstitutionsIcon } from "./IconComponents/InstitutionsIcon";
|
|
8
12
|
import { LeftIcon } from "./IconComponents/LeftIcon";
|
|
9
13
|
import { LogoutIcon } from "./IconComponents/LogoutIcon";
|
|
14
|
+
import { NavigationIcon } from "./IconComponents/NavigationIcon";
|
|
10
15
|
import { NotificationIcon } from "./IconComponents/NotificationIcon";
|
|
16
|
+
import { ProfileIcon } from "./IconComponents/ProfileIcon";
|
|
11
17
|
import { RightIcon } from "./IconComponents/RightIcon";
|
|
12
18
|
import { TicketsIcon } from "./IconComponents/TicketsIcon";
|
|
13
19
|
export const Icons = {
|
|
@@ -23,4 +29,10 @@ export const Icons = {
|
|
|
23
29
|
RightIcon: RightIcon,
|
|
24
30
|
LogoutIcon: LogoutIcon,
|
|
25
31
|
TicketsIcon: TicketsIcon,
|
|
32
|
+
FilterIcon: FilterIcon,
|
|
33
|
+
ExportIcon: ExportIcon,
|
|
34
|
+
ProfileIcon: ProfileIcon,
|
|
35
|
+
InstitutionsIcon: InstitutionsIcon,
|
|
36
|
+
ActiveDevicesIcon: ActiveDevicesIcon,
|
|
37
|
+
NavigationIcon: NavigationIcon,
|
|
26
38
|
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { Meta, StoryFn } from "@storybook/react";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { MultiCheckBox, MultiCheckboxProps } from "./MultiCheckBox";
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
title: "Input/CheckBox",
|
|
7
|
+
component: MultiCheckBox,
|
|
8
|
+
tags: ["autodocs"],
|
|
9
|
+
argTypes: {},
|
|
10
|
+
} as Meta<typeof MultiCheckBox>;
|
|
11
|
+
|
|
12
|
+
const MultiCheckBoxStory: StoryFn<MultiCheckboxProps> = (args) => {
|
|
13
|
+
const [defaultValues, setDefaultValues] = useState(args.values || []);
|
|
14
|
+
return (
|
|
15
|
+
<MultiCheckBox
|
|
16
|
+
{...args}
|
|
17
|
+
values={defaultValues}
|
|
18
|
+
onChange={(values: any) => {
|
|
19
|
+
setDefaultValues(values);
|
|
20
|
+
}}
|
|
21
|
+
/>
|
|
22
|
+
);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export const Default = MultiCheckBoxStory.bind({});
|
|
26
|
+
Default.args = {
|
|
27
|
+
label: "First Name",
|
|
28
|
+
name: "firstName",
|
|
29
|
+
options: [
|
|
30
|
+
{
|
|
31
|
+
label: "Option 1",
|
|
32
|
+
value: "value1",
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
label: "Option 2",
|
|
36
|
+
value: "value2",
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
label: "Option 3",
|
|
40
|
+
value: "value3",
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
required: true,
|
|
44
|
+
direction: "row",
|
|
45
|
+
values: ["value2"],
|
|
46
|
+
};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import {
|
|
2
|
+
FormControlLabel,
|
|
3
|
+
Checkbox as MuiCheckbox,
|
|
4
|
+
CheckboxProps as MuiCheckboxProps,
|
|
5
|
+
styled,
|
|
6
|
+
} from "@mui/material";
|
|
7
|
+
import { ReactNode } from "react";
|
|
8
|
+
|
|
9
|
+
export type CheckboxProps = {
|
|
10
|
+
label: ReactNode;
|
|
11
|
+
} & MuiCheckboxProps;
|
|
12
|
+
|
|
13
|
+
export const CheckBox = ({
|
|
14
|
+
checked,
|
|
15
|
+
label,
|
|
16
|
+
onChange,
|
|
17
|
+
...rest
|
|
18
|
+
}: CheckboxProps) => {
|
|
19
|
+
return (
|
|
20
|
+
<FormControlLabel
|
|
21
|
+
control={
|
|
22
|
+
<MuiCheckbox
|
|
23
|
+
checked={checked}
|
|
24
|
+
checkedIcon={<BpCheckedIcon />}
|
|
25
|
+
icon={<BpIcon />}
|
|
26
|
+
onChange={onChange}
|
|
27
|
+
{...rest}
|
|
28
|
+
/>
|
|
29
|
+
}
|
|
30
|
+
label={label}
|
|
31
|
+
/>
|
|
32
|
+
);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export const BpIcon = styled("span")(({ theme }) => ({
|
|
36
|
+
borderRadius: 3,
|
|
37
|
+
width: 20,
|
|
38
|
+
height: 20,
|
|
39
|
+
marginLeft: "2px",
|
|
40
|
+
border: `1px solid ${theme.palette.secondary.main}`,
|
|
41
|
+
backgroundColor: theme.palette.background.paper,
|
|
42
|
+
".Mui-focusVisible &": {
|
|
43
|
+
outline: `2px auto ${theme.palette.secondary.main}`,
|
|
44
|
+
outlineOffset: 2,
|
|
45
|
+
},
|
|
46
|
+
"input:hover ~ &": {
|
|
47
|
+
backgroundColor: theme.palette.background.paper,
|
|
48
|
+
},
|
|
49
|
+
"input:disabled ~ &": {
|
|
50
|
+
boxShadow: "none",
|
|
51
|
+
background: theme.palette.secondary.main,
|
|
52
|
+
},
|
|
53
|
+
}));
|
|
54
|
+
|
|
55
|
+
export const BpCheckedIcon = styled(BpIcon)(({ theme }) => ({
|
|
56
|
+
backgroundColor: theme.palette.background.paper,
|
|
57
|
+
border: `1px solid ${theme.palette.primary.main}`,
|
|
58
|
+
display: "flex",
|
|
59
|
+
justifyContent: "center",
|
|
60
|
+
alignItems: "center",
|
|
61
|
+
"&:before": {
|
|
62
|
+
content: '""',
|
|
63
|
+
display: "block",
|
|
64
|
+
width: 8,
|
|
65
|
+
height: 8,
|
|
66
|
+
padding: 5,
|
|
67
|
+
background: theme.palette.primary.main,
|
|
68
|
+
},
|
|
69
|
+
"input:hover ~ &": {
|
|
70
|
+
backgroundColor: theme.palette.background.paper,
|
|
71
|
+
},
|
|
72
|
+
}));
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { Stack, StackProps } from "@mui/material";
|
|
2
|
+
import { ResponsiveStyleValue } from "@mui/system";
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
|
+
import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
|
|
5
|
+
import { CheckBox } from "./CheckBox";
|
|
6
|
+
|
|
7
|
+
export type MultiCheckboxProps = {
|
|
8
|
+
containerProps?: StackProps;
|
|
9
|
+
options: Array<{ label: ReactNode; value: any }>;
|
|
10
|
+
label: string;
|
|
11
|
+
direction?: ResponsiveStyleValue<
|
|
12
|
+
"row" | "row-reverse" | "column" | "column-reverse"
|
|
13
|
+
>;
|
|
14
|
+
values: any[];
|
|
15
|
+
onChange: (values: any[]) => void;
|
|
16
|
+
required: boolean;
|
|
17
|
+
name: string;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export const MultiCheckBox = ({
|
|
21
|
+
name,
|
|
22
|
+
options,
|
|
23
|
+
required = false,
|
|
24
|
+
containerProps,
|
|
25
|
+
label,
|
|
26
|
+
direction,
|
|
27
|
+
values = [],
|
|
28
|
+
onChange = () => {},
|
|
29
|
+
...rest
|
|
30
|
+
}: MultiCheckboxProps) => {
|
|
31
|
+
return (
|
|
32
|
+
<LabelWrapper
|
|
33
|
+
label={label}
|
|
34
|
+
required={required}
|
|
35
|
+
name={name}
|
|
36
|
+
containerProps={containerProps}
|
|
37
|
+
>
|
|
38
|
+
<Stack direction={direction}>
|
|
39
|
+
{options?.length != 0 &&
|
|
40
|
+
options?.map((item, index) => (
|
|
41
|
+
<CheckBox
|
|
42
|
+
key={index}
|
|
43
|
+
name={name}
|
|
44
|
+
checked={values?.includes(item.value)}
|
|
45
|
+
label={item.label}
|
|
46
|
+
onChange={(event) => {
|
|
47
|
+
if (event.target.checked) {
|
|
48
|
+
onChange([...values, item.value]);
|
|
49
|
+
} else {
|
|
50
|
+
onChange(values.filter((val) => val !== item.value));
|
|
51
|
+
}
|
|
52
|
+
}}
|
|
53
|
+
{...rest}
|
|
54
|
+
/>
|
|
55
|
+
))}
|
|
56
|
+
</Stack>
|
|
57
|
+
</LabelWrapper>
|
|
58
|
+
);
|
|
59
|
+
};
|
|
@@ -63,16 +63,25 @@ export default function UserBox({
|
|
|
63
63
|
menu={[
|
|
64
64
|
<DropdownMenuItem
|
|
65
65
|
label={
|
|
66
|
-
<Stack gap={0.5}>
|
|
66
|
+
<Stack gap={0.5} sx={{ width: "100%" }}>
|
|
67
67
|
<StyledTypography variant="subtitle3">Account</StyledTypography>
|
|
68
|
-
<Stack
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<
|
|
68
|
+
<Stack
|
|
69
|
+
direction={"row"}
|
|
70
|
+
alignItems={"center"}
|
|
71
|
+
justifyContent={"space-between"}
|
|
72
|
+
>
|
|
73
|
+
<Stack direction={"row"} gap={1}>
|
|
74
|
+
<StyledAvatar src={profileUrl ?? ""} sx={profileSx}>
|
|
75
|
+
{getStartingLetters(fullName)}
|
|
76
|
+
</StyledAvatar>
|
|
77
|
+
<Stack direction={"row"} justifyContent={"space-between"}>
|
|
78
|
+
<Stack>
|
|
79
|
+
<Typography variant="subtitle3">{fullName}</Typography>
|
|
80
|
+
<Typography variant="caption">{designation}</Typography>
|
|
81
|
+
</Stack>
|
|
82
|
+
</Stack>
|
|
75
83
|
</Stack>
|
|
84
|
+
<Icons.NavigationIcon />
|
|
76
85
|
</Stack>
|
|
77
86
|
</Stack>
|
|
78
87
|
}
|
package/src/components/export.ts
CHANGED
|
@@ -30,7 +30,19 @@ export const getCommonTheme = (mode: Theme) => {
|
|
|
30
30
|
},
|
|
31
31
|
},
|
|
32
32
|
},
|
|
33
|
-
|
|
33
|
+
MuiCheckbox: {
|
|
34
|
+
defaultProps: {
|
|
35
|
+
disableRipple: true,
|
|
36
|
+
},
|
|
37
|
+
styleOverrides: {
|
|
38
|
+
root: {
|
|
39
|
+
"& .MuiSvgIcon-root": {
|
|
40
|
+
width: "20px",
|
|
41
|
+
height: "20px",
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
},
|
|
34
46
|
MuiDialogTitle: {
|
|
35
47
|
styleOverrides: {
|
|
36
48
|
root: {
|
package/src/utils/campxAxios.ts
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import axios from "axios";
|
|
2
|
-
import
|
|
2
|
+
import { sessionKey } from "./constants";
|
|
3
3
|
|
|
4
4
|
console.log(window.location.pathname.split("/"));
|
|
5
5
|
|
|
6
6
|
const tenantCode = "campx";
|
|
7
7
|
const institutionCode = "campx";
|
|
8
|
-
const sessionKey = Cookies.get("campx_session_key");
|
|
9
8
|
const isProduction = process.env.NODE_ENV === "production";
|
|
10
9
|
|
|
11
10
|
export const campxAxios = axios.create({
|
package/src/utils/constants.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import Cookies from "js-cookie";
|
|
2
|
+
|
|
1
3
|
export const isDevelopment: boolean =
|
|
2
4
|
process.env.NODE_ENV === "development" ||
|
|
3
5
|
window.location.origin.split("campx")[1] === ".dev";
|
|
4
6
|
|
|
5
7
|
export const urlTenantKey = window.location.pathname.split("/")[1];
|
|
6
8
|
export const institutionKey = window.location.pathname.split("/")[2];
|
|
9
|
+
export const sessionKey = Cookies.get("campx_session_key");
|