@campxdev/react-blueprint 1.2.7 → 1.2.9

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 (25) hide show
  1. package/.storybook/preview.tsx +22 -18
  2. package/package.json +1 -1
  3. package/src/App.tsx +46 -10
  4. package/src/components/Assets/Icons/IconComponents/EmailIcon.tsx +16 -18
  5. package/src/components/Assets/Icons/IconComponents/SmsIcon.tsx +16 -18
  6. package/src/components/Assets/Icons/IconComponents/WhatsappIcon.tsx +14 -16
  7. package/src/components/Input/MultiCheckBox/MultiCheckBox.tsx +1 -1
  8. package/src/components/Input/OtpInput/OtpInput.tsx +4 -2
  9. package/src/components/Input/RadioGroup/RadioGroup.tsx +1 -0
  10. package/src/components/Input/Select/Select.tsx +104 -0
  11. package/src/components/Input/Select/styles.tsx +29 -0
  12. package/src/components/Input/SingleSelect/SingleSelect.tsx +8 -1
  13. package/src/components/Input/Tags/Tags.tsx +2 -9
  14. package/src/components/Input/TimePicker/TimePicker.tsx +1 -1
  15. package/src/components/Input/export.ts +2 -0
  16. package/src/components/Navigation/DropDownMenu/DropDownMenu.tsx +3 -2
  17. package/src/hooks/usePageHeader.ts +8 -5
  18. package/src/index.tsx +9 -4
  19. package/src/state/store.ts +1 -3
  20. package/src/stories/Input/DatePicker.stories.tsx +1 -1
  21. package/src/stories/Input/Select.stories.tsx +70 -0
  22. package/src/stories/Input/Tags.stories.tsx +0 -11
  23. package/src/stories/Input/TextField.stories.tsx +3 -8
  24. package/src/contexts/Providers.tsx +0 -13
  25. package/src/store/activeStore.ts +0 -6
package/.storybook/preview.tsx CHANGED
@@ -1,14 +1,16 @@
1
- import { CssBaseline } from "@mui/material";
2
- import type { Preview } from "@storybook/react";
3
- import React from "react";
4
- import { BrowserRouter } from "react-router-dom";
5
- import { useDarkMode } from "storybook-dark-mode";
6
- import { MuiThemeProvider } from "../src/themes/MuiThemeProvider";
1
+ import { CssBaseline } from '@mui/material';
2
+ import type { Preview } from '@storybook/react';
3
+ import React from 'react';
4
+ import { Provider } from 'react-redux';
5
+ import { BrowserRouter } from 'react-router-dom';
6
+ import { useDarkMode } from 'storybook-dark-mode';
7
+ import { store } from '../src/state/export';
8
+ import { MuiThemeProvider } from '../src/themes/MuiThemeProvider';
7
9
 
8
- import { DarkColorTokens } from "../src/themes/colorTokens/darkColorTokens";
9
- import { LightColorTokens } from "../src/themes/colorTokens/lightColorTokens";
10
- import { darkTheme } from "../src/themes/darkTheme";
11
- import { lightTheme } from "../src/themes/lightTheme";
10
+ import { DarkColorTokens } from '../src/themes/colorTokens/darkColorTokens';
11
+ import { LightColorTokens } from '../src/themes/colorTokens/lightColorTokens';
12
+ import { darkTheme } from '../src/themes/darkTheme';
13
+ import { lightTheme } from '../src/themes/lightTheme';
12
14
 
13
15
  const preview: Preview = {
14
16
  parameters: {
@@ -19,15 +21,15 @@ const preview: Preview = {
19
21
  },
20
22
  },
21
23
  backgrounds: {
22
- default: "light", // name of the default background to use
24
+ default: 'light', // name of the default background to use
23
25
  values: [
24
- { name: "light", value: LightColorTokens.surface.defaultBackground },
26
+ { name: 'light', value: LightColorTokens.surface.defaultBackground },
25
27
  {
26
- name: "light paper",
28
+ name: 'light paper',
27
29
  value: LightColorTokens.surface.paperBackground,
28
30
  },
29
- { name: "dark", value: DarkColorTokens.surface.defaultBackground },
30
- { name: "dark paper", value: DarkColorTokens.surface.paperBackground },
31
+ { name: 'dark', value: DarkColorTokens.surface.defaultBackground },
32
+ { name: 'dark paper', value: DarkColorTokens.surface.paperBackground },
31
33
  ],
32
34
  },
33
35
  },
@@ -38,14 +40,16 @@ const preview: Preview = {
38
40
  return (
39
41
  <BrowserRouter>
40
42
  <MuiThemeProvider theme={theme}>
41
- <CssBaseline />
42
- <Story />
43
+ <Provider store={store}>
44
+ <CssBaseline />
45
+ <Story />
46
+ </Provider>
43
47
  </MuiThemeProvider>
44
48
  </BrowserRouter>
45
49
  );
46
50
  },
47
51
  ],
48
- tags: ["autodocs"],
52
+ tags: ['autodocs'],
49
53
  };
50
54
 
51
55
  export default preview;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@campxdev/react-blueprint",
3
- "version": "1.2.7",
3
+ "version": "1.2.9",
4
4
  "main": "./export.ts",
5
5
  "private": false,
6
6
  "dependencies": {
package/src/App.tsx CHANGED
@@ -1,16 +1,13 @@
1
+ import { useState } from 'react';
1
2
  import './App.css';
2
- import { AppHeader, Icons } from './components/export';
3
- import Providers from './contexts/Providers';
3
+ import { AppHeader } from './components/export';
4
+ import { Select } from './components/Input/Select/Select';
4
5
 
5
6
  function App() {
6
- const sampleChips = [
7
- { label: 'Chip1', value: 1 },
8
- { label: 'Chip2', value: 2 },
9
- { label: 'Chip3', value: 3 },
10
- ];
7
+ const [status, setStatus] = useState('green');
11
8
 
12
9
  return (
13
- <Providers>
10
+ <>
14
11
  <AppHeader
15
12
  clientName="Anurag University"
16
13
  actions={[<p>asdjflsf</p>]}
@@ -18,8 +15,47 @@ function App() {
18
15
  collapsed={false}
19
16
  institutionsData={[]}
20
17
  />
21
- <Icons.WhatsappIcon />
22
- </Providers>
18
+ <Select
19
+ value={status}
20
+ onChange={(e) => {
21
+ setStatus(e.target.value);
22
+ }}
23
+ options={[
24
+ {
25
+ label: 'Green',
26
+ value: 'green',
27
+ color: 'green',
28
+ },
29
+ {
30
+ label: 'Red',
31
+ value: 'red',
32
+
33
+ color: 'red',
34
+ },
35
+ {
36
+ label: 'Yellow',
37
+ value: 'yellow',
38
+
39
+ color: 'yellow',
40
+ },
41
+ {
42
+ label: 'PinkPanther',
43
+ value: 'pink',
44
+
45
+ color: 'pink',
46
+ },
47
+ {
48
+ label: 'Blue Boy',
49
+ value: 'blue',
50
+ color: 'blue',
51
+ },
52
+ {
53
+ label: 'Simple',
54
+ value: 'simple',
55
+ },
56
+ ]}
57
+ />
58
+ </>
23
59
  );
24
60
  }
25
61
 
package/src/components/Assets/Icons/IconComponents/EmailIcon.tsx CHANGED
@@ -1,22 +1,20 @@
1
1
  export const EmailIcon = () => {
2
2
  return (
3
- <div>
4
- <svg
5
- xmlns="http://www.w3.org/2000/svg"
6
- width="24"
7
- height="25"
8
- viewBox="0 0 24 25"
9
- fill="none"
10
- >
11
- <path
12
- d="M19 20.5H5C4.20459 20.4992 3.44199 20.1829 2.87956 19.6204C2.31712 19.058 2.00079 18.2954 2 17.5V7.5C2.00079 6.70459 2.31712 5.94199 2.87956 5.37956C3.44199 4.81712 4.20459 4.50079 5 4.5H19C19.7954 4.50079 20.558 4.81712 21.1204 5.37956C21.6829 5.94199 21.9992 6.70459 22 7.5V17.5C21.9992 18.2954 21.6829 19.058 21.1204 19.6204C20.558 20.1829 19.7954 20.4992 19 20.5Z"
13
- fill="#B2B1FF"
14
- />
15
- <path
16
- d="M22 7.5C21.9992 6.70459 21.6829 5.94199 21.1204 5.37956C20.558 4.81712 19.7954 4.50079 19 4.5H5C4.20459 4.50079 3.44199 4.81712 2.87956 5.37956C2.31712 5.94199 2.00079 6.70459 2 7.5V8.561L11.479 14.353C11.6361 14.4489 11.8165 14.4996 12.0005 14.4996C12.1845 14.4996 12.3649 14.4489 12.522 14.353L22 8.561V7.5Z"
17
- fill="#6563FF"
18
- />
19
- </svg>
20
- </div>
3
+ <svg
4
+ xmlns="http://www.w3.org/2000/svg"
5
+ width="24"
6
+ height="25"
7
+ viewBox="0 0 24 25"
8
+ fill="none"
9
+ >
10
+ <path
11
+ d="M19 20.5H5C4.20459 20.4992 3.44199 20.1829 2.87956 19.6204C2.31712 19.058 2.00079 18.2954 2 17.5V7.5C2.00079 6.70459 2.31712 5.94199 2.87956 5.37956C3.44199 4.81712 4.20459 4.50079 5 4.5H19C19.7954 4.50079 20.558 4.81712 21.1204 5.37956C21.6829 5.94199 21.9992 6.70459 22 7.5V17.5C21.9992 18.2954 21.6829 19.058 21.1204 19.6204C20.558 20.1829 19.7954 20.4992 19 20.5Z"
12
+ fill="#B2B1FF"
13
+ />
14
+ <path
15
+ d="M22 7.5C21.9992 6.70459 21.6829 5.94199 21.1204 5.37956C20.558 4.81712 19.7954 4.50079 19 4.5H5C4.20459 4.50079 3.44199 4.81712 2.87956 5.37956C2.31712 5.94199 2.00079 6.70459 2 7.5V8.561L11.479 14.353C11.6361 14.4489 11.8165 14.4996 12.0005 14.4996C12.1845 14.4996 12.3649 14.4489 12.522 14.353L22 8.561V7.5Z"
16
+ fill="#6563FF"
17
+ />
18
+ </svg>
21
19
  );
22
20
  };
package/src/components/Assets/Icons/IconComponents/SmsIcon.tsx CHANGED
@@ -1,22 +1,20 @@
1
1
  export const SmsIcon = () => {
2
2
  return (
3
- <div>
4
- <svg
5
- xmlns="http://www.w3.org/2000/svg"
6
- width="24"
7
- height="25"
8
- viewBox="0 0 24 25"
9
- fill="none"
10
- >
11
- <path
12
- d="M12 2.75C6.624 2.75 2.25 7.124 2.25 12.5C2.25 14.13 2.666 15.74 3.455 17.178L2.279 21.294C2.204 21.556 2.277 21.838 2.47 22.03C2.613 22.173 2.804 22.25 3 22.25C3.069 22.25 3.138 22.241 3.206 22.221L7.322 21.045C8.76 21.835 10.37 22.25 12 22.25C17.376 22.25 21.75 17.876 21.75 12.5C21.75 7.124 17.376 2.75 12 2.75Z"
13
- fill="#BAD7FF"
14
- />
15
- <path
16
- d="M13 12.5C13 13.052 12.552 13.5 12 13.5C11.448 13.5 11 13.052 11 12.5C11 11.948 11.448 11.5 12 11.5C12.552 11.5 13 11.948 13 12.5ZM8 11.5C7.448 11.5 7 11.948 7 12.5C7 13.052 7.448 13.5 8 13.5C8.552 13.5 9 13.052 9 12.5C9 11.948 8.552 11.5 8 11.5ZM16 11.5C15.448 11.5 15 11.948 15 12.5C15 13.052 15.448 13.5 16 13.5C16.552 13.5 17 13.052 17 12.5C17 11.948 16.552 11.5 16 11.5Z"
17
- fill="#549BFF"
18
- />
19
- </svg>
20
- </div>
3
+ <svg
4
+ xmlns="http://www.w3.org/2000/svg"
5
+ width="24"
6
+ height="25"
7
+ viewBox="0 0 24 25"
8
+ fill="none"
9
+ >
10
+ <path
11
+ d="M12 2.75C6.624 2.75 2.25 7.124 2.25 12.5C2.25 14.13 2.666 15.74 3.455 17.178L2.279 21.294C2.204 21.556 2.277 21.838 2.47 22.03C2.613 22.173 2.804 22.25 3 22.25C3.069 22.25 3.138 22.241 3.206 22.221L7.322 21.045C8.76 21.835 10.37 22.25 12 22.25C17.376 22.25 21.75 17.876 21.75 12.5C21.75 7.124 17.376 2.75 12 2.75Z"
12
+ fill="#BAD7FF"
13
+ />
14
+ <path
15
+ d="M13 12.5C13 13.052 12.552 13.5 12 13.5C11.448 13.5 11 13.052 11 12.5C11 11.948 11.448 11.5 12 11.5C12.552 11.5 13 11.948 13 12.5ZM8 11.5C7.448 11.5 7 11.948 7 12.5C7 13.052 7.448 13.5 8 13.5C8.552 13.5 9 13.052 9 12.5C9 11.948 8.552 11.5 8 11.5ZM16 11.5C15.448 11.5 15 11.948 15 12.5C15 13.052 15.448 13.5 16 13.5C16.552 13.5 17 13.052 17 12.5C17 11.948 16.552 11.5 16 11.5Z"
16
+ fill="#549BFF"
17
+ />
18
+ </svg>
21
19
  );
22
20
  };
package/src/components/Assets/Icons/IconComponents/WhatsappIcon.tsx CHANGED
@@ -10,21 +10,19 @@ export const WhatsappIcon: React.FC<WhatsappIconProps> = ({
10
10
  height = 25,
11
11
  }) => {
12
12
  return (
13
- <div>
14
- <svg
15
- xmlns="http://www.w3.org/2000/svg"
16
- width={width}
17
- height={height}
18
- viewBox="0 0 24 25"
19
- fill="none"
20
- >
21
- <path
22
- fillRule="evenodd"
23
- clipRule="evenodd"
24
- d="M11.9971 3C6.48459 3 2.00001 7.48541 2.00001 13C1.99682 15.1063 2.66369 17.159 3.90418 18.8612L2.65834 22.5766L6.50168 21.3483C8.13244 22.4293 10.0464 23.0039 12.0029 23C17.5154 23 22 18.5142 22 13C22 7.48583 17.5158 3 12.0029 3H11.9971ZM9.20542 8.07916C9.01126 7.615 8.86459 7.5975 8.57084 7.58541C8.45931 7.57835 8.34759 7.5746 8.23584 7.57416C7.85334 7.57416 7.45376 7.68583 7.21293 7.9325C6.91918 8.23249 6.19043 8.93166 6.19043 10.3662C6.19043 11.8008 7.23626 13.1883 7.37751 13.3825C7.52459 13.5762 9.41709 16.5625 12.3554 17.7796C14.6533 18.7321 15.3354 18.6437 15.8583 18.5321C16.6225 18.3675 17.5804 17.8029 17.8213 17.1212C18.0625 16.4392 18.0625 15.8571 17.9921 15.7337C17.9213 15.6104 17.7271 15.54 17.4338 15.3929C17.1396 15.2458 15.7113 14.5404 15.4408 14.4462C15.1767 14.3462 14.9242 14.3817 14.7242 14.6637C14.4421 15.0579 14.1658 15.4575 13.9425 15.6983C13.7663 15.8867 13.4779 15.9104 13.2371 15.81C12.9138 15.675 12.0088 15.3575 10.8921 14.3642C10.0279 13.5937 9.44042 12.6358 9.27001 12.3475C9.09917 12.0537 9.25251 11.8833 9.38751 11.7246C9.53459 11.5421 9.67542 11.4129 9.82251 11.2425C9.96917 11.0717 10.0517 10.9837 10.1458 10.7842C10.2458 10.59 10.175 10.39 10.1042 10.2425C10.0342 10.0958 9.44626 8.66124 9.20542 8.07958V8.07916Z"
25
- fill="#67C15E"
26
- />
27
- </svg>
28
- </div>
13
+ <svg
14
+ xmlns="http://www.w3.org/2000/svg"
15
+ width={width}
16
+ height={height}
17
+ viewBox="0 0 24 25"
18
+ fill="none"
19
+ >
20
+ <path
21
+ fillRule="evenodd"
22
+ clipRule="evenodd"
23
+ d="M11.9971 3C6.48459 3 2.00001 7.48541 2.00001 13C1.99682 15.1063 2.66369 17.159 3.90418 18.8612L2.65834 22.5766L6.50168 21.3483C8.13244 22.4293 10.0464 23.0039 12.0029 23C17.5154 23 22 18.5142 22 13C22 7.48583 17.5158 3 12.0029 3H11.9971ZM9.20542 8.07916C9.01126 7.615 8.86459 7.5975 8.57084 7.58541C8.45931 7.57835 8.34759 7.5746 8.23584 7.57416C7.85334 7.57416 7.45376 7.68583 7.21293 7.9325C6.91918 8.23249 6.19043 8.93166 6.19043 10.3662C6.19043 11.8008 7.23626 13.1883 7.37751 13.3825C7.52459 13.5762 9.41709 16.5625 12.3554 17.7796C14.6533 18.7321 15.3354 18.6437 15.8583 18.5321C16.6225 18.3675 17.5804 17.8029 17.8213 17.1212C18.0625 16.4392 18.0625 15.8571 17.9921 15.7337C17.9213 15.6104 17.7271 15.54 17.4338 15.3929C17.1396 15.2458 15.7113 14.5404 15.4408 14.4462C15.1767 14.3462 14.9242 14.3817 14.7242 14.6637C14.4421 15.0579 14.1658 15.4575 13.9425 15.6983C13.7663 15.8867 13.4779 15.9104 13.2371 15.81C12.9138 15.675 12.0088 15.3575 10.8921 14.3642C10.0279 13.5937 9.44042 12.6358 9.27001 12.3475C9.09917 12.0537 9.25251 11.8833 9.38751 11.7246C9.53459 11.5421 9.67542 11.4129 9.82251 11.2425C9.96917 11.0717 10.0517 10.9837 10.1458 10.7842C10.2458 10.59 10.175 10.39 10.1042 10.2425C10.0342 10.0958 9.44626 8.66124 9.20542 8.07958V8.07916Z"
24
+ fill="#67C15E"
25
+ />
26
+ </svg>
29
27
  );
30
28
  };
package/src/components/Input/MultiCheckBox/MultiCheckBox.tsx CHANGED
@@ -35,7 +35,7 @@ export const MultiCheckBox = ({
35
35
  name={name}
36
36
  containerProps={containerProps}
37
37
  >
38
- <Stack direction={direction}>
38
+ <Stack direction={direction} spacing={4}>
39
39
  {options?.length != 0 &&
40
40
  options?.map((item, index) => (
41
41
  <SingleCheckBox
package/src/components/Input/OtpInput/OtpInput.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useState, useRef } from 'react';
2
-
2
+ import { useTheme } from '@mui/material';
3
3
  interface OtpInputProps {
4
4
  length: number;
5
5
  onChangeOtp: (otp: string) => void;
@@ -7,7 +7,8 @@ interface OtpInputProps {
7
7
 
8
8
  const OtpInput = ({ length, onChangeOtp }: OtpInputProps) => {
9
9
  const [otp, setOtp] = useState<string[]>(Array(length).fill(''));
10
- const inputRefs = useRef<HTMLInputElement[]>([]);
10
+ const inputRefs = useRef<HTMLInputElement[]>([]);
11
+ const theme = useTheme();
11
12
 
12
13
  const handleChange = (element: HTMLInputElement, index: number) => {
13
14
  const value = element.value;
@@ -74,6 +75,7 @@ const OtpInput = ({ length, onChangeOtp }: OtpInputProps) => {
74
75
  height: '40px',
75
76
  textAlign: 'center',
76
77
  fontSize: '20px',
78
+ stroke: theme.palette.border.primary,
77
79
  }}
78
80
  />
79
81
  ))}
package/src/components/Input/RadioGroup/RadioGroup.tsx CHANGED
@@ -49,6 +49,7 @@ export const RadioGroup = ({
49
49
  />
50
50
  }
51
51
  label={<Typography variant="body2">{item.label}</Typography>}
52
+ sx={{ marginBottom: '32px' }}
52
53
  />
53
54
  ))}
54
55
  </MuiRadioGroup>
package/src/components/Input/Select/Select.tsx ADDED
@@ -0,0 +1,104 @@
1
+ import { MenuItem, SxProps, Theme, useTheme } from '@mui/material';
2
+ import { BaseSelectProps } from '@mui/material/Select';
3
+ import * as React from 'react';
4
+ import { StyledFormControl, StyledSelect } from './styles';
5
+
6
+ export type SelectProps = {
7
+ options: Array<{
8
+ label: React.ReactNode;
9
+ value: string | number;
10
+ color?: 'red' | 'green' | 'blue' | 'pink' | 'yellow' | 'orange';
11
+ }>;
12
+ onChange?: (event: React.ChangeEvent<{ value: any }>) => void;
13
+ value: string | number;
14
+ containerSx?: SxProps;
15
+ } & BaseSelectProps;
16
+ const getColorPairs = (
17
+ theme: Theme,
18
+ color?: 'red' | 'green' | 'blue' | 'pink' | 'yellow' | 'orange',
19
+ ) => {
20
+ switch (color) {
21
+ case 'red':
22
+ return {
23
+ textColor: theme.palette.highlight.highlightRed,
24
+ backgroundColor: theme.palette.highlight.redBackground,
25
+ };
26
+ case 'green':
27
+ return {
28
+ textColor: theme.palette.highlight.highlightGreen,
29
+ backgroundColor: theme.palette.highlight.greenBackground,
30
+ };
31
+ case 'blue':
32
+ return {
33
+ textColor: theme.palette.highlight.highlightBlue,
34
+ backgroundColor: theme.palette.highlight.blueBackground,
35
+ };
36
+ case 'pink':
37
+ return {
38
+ textColor: theme.palette.highlight.highlightPink,
39
+ backgroundColor: theme.palette.highlight.pinkBackground,
40
+ };
41
+ case 'yellow':
42
+ return {
43
+ textColor: theme.palette.highlight.highlightYellow,
44
+ backgroundColor: theme.palette.highlight.yellowBackground,
45
+ };
46
+ case 'orange':
47
+ return {
48
+ textColor: theme.palette.highlight.highlightOrange,
49
+ backgroundColor: theme.palette.highlight.orangeBackground,
50
+ };
51
+ default:
52
+ return {
53
+ textColor: theme.palette.text.primary,
54
+ backgroundColor: theme.palette.surface.defaultBackground,
55
+ };
56
+ }
57
+ };
58
+
59
+ export const Select = ({
60
+ options = [],
61
+ onChange,
62
+ value,
63
+ containerSx,
64
+ }: SelectProps) => {
65
+ const selectedOption = options.find((option) => option.value === value);
66
+
67
+ const theme = useTheme();
68
+
69
+ const { textColor, backgroundColor } = getColorPairs(
70
+ theme,
71
+ selectedOption?.color,
72
+ );
73
+
74
+ return (
75
+ <StyledFormControl
76
+ textColor={textColor}
77
+ bgcolor={backgroundColor}
78
+ sx={containerSx}
79
+ >
80
+ <StyledSelect
81
+ value={value}
82
+ onChange={onChange}
83
+ displayEmpty
84
+ inputProps={{ 'aria-label': 'Without label' }}
85
+ // endAdornment={<Icons.AccordionArrow />}
86
+ >
87
+ {options?.map((item, index) => (
88
+ <MenuItem
89
+ key={index}
90
+ value={item.value}
91
+ sx={{
92
+ boxShadow: 'none',
93
+ '&:focus': {
94
+ boxShadow: 'none',
95
+ },
96
+ }}
97
+ >
98
+ {item.label}
99
+ </MenuItem>
100
+ ))}
101
+ </StyledSelect>
102
+ </StyledFormControl>
103
+ );
104
+ };
package/src/components/Input/Select/styles.tsx ADDED
@@ -0,0 +1,29 @@
1
+ import { FormControl, Select, SelectProps } from '@mui/material';
2
+ import { styled } from '@mui/material/styles';
3
+ export const StyledFormControl = styled(FormControl)<{
4
+ bgcolor?: string;
5
+ textColor?: string;
6
+ }>(({ theme, bgcolor, textColor }) => ({
7
+ margin: '8px',
8
+ minWidth: 220,
9
+ height: 40,
10
+ borderRadius: '8px',
11
+ backgroundColor: bgcolor || theme.palette.surface.grey,
12
+ color: textColor || theme.palette.text.secondary,
13
+ padding: 0,
14
+ '& .MuiInputBase-root': {
15
+ color: textColor,
16
+ },
17
+ }));
18
+
19
+ export const StyledSelect = styled(Select)<SelectProps>(() => ({
20
+ '& .MuiOutlinedInput-notchedOutline': {
21
+ border: 'none',
22
+ },
23
+ '&:hover .MuiOutlinedInput-notchedOutline': {
24
+ border: 'none',
25
+ },
26
+ '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
27
+ border: 'none',
28
+ },
29
+ }));
package/src/components/Input/SingleSelect/SingleSelect.tsx CHANGED
@@ -38,12 +38,19 @@ export type SingleSelectProps = {
38
38
  } & BaseSelectProps;
39
39
 
40
40
  const CustomPaper = (props: PaperProps) => (
41
- <Paper {...props}>
41
+ <Paper
42
+ {...props}
43
+ sx={{
44
+ boxShadow: 'none',
45
+ borderRadius: '0px 0px 4px 4px',
46
+ }}
47
+ >
42
48
  {props.children}
43
49
  <FetchingOptionsLoader loading={!!props.square} />
44
50
  </Paper>
45
51
  );
46
52
 
53
+
47
54
  enum SingleSelectActionsTypes {
48
55
  OPEN = 'open',
49
56
  CLOSE = 'close',
package/src/components/Input/Tags/Tags.tsx CHANGED
@@ -11,23 +11,16 @@ const TagList = styled('ul')(({ theme }) => ({
11
11
 
12
12
  export type TagsProps = {
13
13
  tags: { label: string; value: any }[];
14
- onClick?: (clickedChip: any) => void;
15
14
  onDelete?: (deletedChip: any) => void;
16
15
  };
17
16
 
18
- export const Tags = ({ tags, onClick, onDelete }: TagsProps) => {
17
+ export const Tags = ({ tags, onDelete }: TagsProps) => {
19
18
  return (
20
19
  <TagList>
21
20
  {tags.map(({ label, value }) => (
22
21
  <Chip
22
+ key={value} // Add a key to ensure unique identification for each Chip
23
23
  label={<Typography variant="body2">{label}</Typography>}
24
- onClick={
25
- onClick
26
- ? () => {
27
- onClick(value);
28
- }
29
- : undefined
30
- }
31
24
  onDelete={
32
25
  onDelete
33
26
  ? (e) => {
package/src/components/Input/TimePicker/TimePicker.tsx CHANGED
@@ -27,7 +27,7 @@ export const TimePicker = <
27
27
  format = 'hh:mm a',
28
28
  views = ['hours', 'minutes'],
29
29
  helperText,
30
- placeholder = '',
30
+ placeholder = 'Select Time',
31
31
  required = false,
32
32
  containerProps,
33
33
  ...rest
package/src/components/Input/export.ts CHANGED
@@ -5,7 +5,9 @@ export * from './FormControlWrapper/FormControlWrapper';
5
5
  export * from './IconButtons/IconButtons';
6
6
  export * from './MultiCheckBox/MultiCheckBox';
7
7
  export * from './PasswordField/PasswordField';
8
+ export * from './RadioGroup/RadioGroup';
8
9
  export * from './SearchBar/SearchBar';
10
+ export * from './Select/Select';
9
11
  export * from './SingleCheckBox/SIngleCheckBox';
10
12
  export * from './SingleSelect/SingleSelect';
11
13
  export * from './Switch/Switch';
package/src/components/Navigation/DropDownMenu/DropDownMenu.tsx CHANGED
@@ -81,13 +81,14 @@ export const DropdownMenu = ({
81
81
  backgroundColor: theme.palette.surface.paperBackground,
82
82
  borderRadius: '3px',
83
83
  },
84
- padding: '2px',
85
84
  }}
86
85
  >
87
86
  {menuItems.map((item, index) => (
88
87
  <Fragment key={index}>
89
88
  {item}
90
- <Divider flexItem sx={{ margin: '0 !important' }} />
89
+ {index < menuItems.length - 1 && (
90
+ <Divider flexItem sx={{ margin: '0 !important' }} />
91
+ )}
91
92
  </Fragment>
92
93
  ))}
93
94
  </Stack>
package/src/hooks/usePageHeader.ts CHANGED
@@ -1,14 +1,17 @@
1
1
  import { useRef } from 'react';
2
2
  import { useDispatch, useSelector } from 'react-redux';
3
3
  import { v4 } from 'uuid';
4
- import { resetStateForUniqueId } from '../state/filters/filtersSlice';
4
+ import {
5
+ FilterState,
6
+ resetStateForUniqueId,
7
+ } from '../state/filters/filtersSlice';
5
8
  import { RootState } from '../state/store';
6
9
 
7
10
  export const usePageHeader = () => {
8
11
  const uuidRef = useRef(v4());
9
12
  const dispatch = useDispatch();
10
- const dataTableState = useSelector(
11
- (state: RootState) => state.filters[uuidRef.current] || {},
13
+ const filterState = useSelector(
14
+ (state: RootState) => state.filters[uuidRef.current] || ({} as FilterState),
12
15
  );
13
16
 
14
17
  const resetState = () => {
@@ -16,8 +19,8 @@ export const usePageHeader = () => {
16
19
  };
17
20
 
18
21
  return {
19
- columnVisibilityModel: dataTableState.columnVisibilityModel,
20
- density: dataTableState.density,
22
+ columnVisibilityModel: filterState.columnVisibilityModel,
23
+ density: filterState.density,
21
24
  uniqueId: uuidRef.current,
22
25
  resetState,
23
26
  };
package/src/index.tsx CHANGED
@@ -1,18 +1,23 @@
1
1
  import React from 'react';
2
2
  import ReactDOM from 'react-dom/client';
3
3
  import App from './App';
4
- import Providers from './contexts/Providers';
4
+
5
+ import { Provider } from 'react-redux';
5
6
  import './index.css';
6
7
  import reportWebVitals from './reportWebVitals';
8
+ import { store } from './state/store';
9
+ import { MuiThemeProvider } from './themes/MuiThemeProvider';
7
10
 
8
11
  const root = ReactDOM.createRoot(
9
12
  document.getElementById('root') as HTMLElement,
10
13
  );
11
14
  root.render(
12
15
  <React.StrictMode>
13
- <Providers>
14
- <App />
15
- </Providers>
16
+ <MuiThemeProvider>
17
+ <Provider store={store}>
18
+ <App />
19
+ </Provider>
20
+ </MuiThemeProvider>
16
21
  </React.StrictMode>,
17
22
  );
18
23
 
package/src/state/store.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { configureStore } from '@reduxjs/toolkit';
2
2
  import filtersSlice from './filters/filtersSlice';
3
3
 
4
- const store = configureStore({
4
+ export const store = configureStore({
5
5
  reducer: {
6
6
  filters: filtersSlice,
7
7
  },
@@ -9,5 +9,3 @@ const store = configureStore({
9
9
 
10
10
  export type RootState = ReturnType<typeof store.getState>;
11
11
  export type AppDispatch = typeof store.dispatch;
12
-
13
- export default store;
package/src/stories/Input/DatePicker.stories.tsx CHANGED
@@ -22,7 +22,7 @@ export default meta;
22
22
  type Story = StoryObj<typeof DatePicker>;
23
23
 
24
24
  export const Primary: Story = {
25
- args: { label: 'Date Picker', name: 'date-picker', required: true },
25
+ args: { label: 'Date Picker', name: 'date-picker',placeholder:'Select Date', required: true },
26
26
  };
27
27
 
28
28
  export const Secondary: Story = {
package/src/stories/Input/Select.stories.tsx ADDED
@@ -0,0 +1,70 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { Select } from '../../components/export';
3
+ // Adjust the import path as necessary
4
+
5
+ const meta: Meta<typeof Select> = {
6
+ title: 'Input/Select',
7
+ component: Select,
8
+ argTypes: {
9
+ options: {
10
+ description: 'Array of options with label, value, and optional color',
11
+ control: 'object',
12
+ },
13
+ value: {
14
+ description: 'Selected value for the Select component',
15
+ control: 'text',
16
+ },
17
+ onChange: {
18
+ description: 'Function to handle value changes',
19
+ action: 'changed',
20
+ },
21
+ containerSx: {
22
+ description: 'SX props for styling the container',
23
+ control: 'object',
24
+ },
25
+ },
26
+ };
27
+ export default meta;
28
+
29
+ type Story = StoryObj<typeof Select>;
30
+
31
+ export const Default: Story = {
32
+ args: {
33
+ value: undefined,
34
+ options: [
35
+ { label: 'Red Option', value: 'red', color: 'red' },
36
+ { label: 'Green Option', value: 'green', color: 'green' },
37
+ { label: 'Blue Option', value: 'blue', color: 'blue' },
38
+ { label: 'Pink Option', value: 'pink', color: 'pink' },
39
+ { label: 'Yellow Option', value: 'yellow', color: 'yellow' },
40
+ { label: 'Orange Option', value: 'orange', color: 'orange' },
41
+ ],
42
+ containerSx: {
43
+ width: 200,
44
+ },
45
+ },
46
+ };
47
+
48
+ export const WithPreselectedValue: Story = {
49
+ args: {
50
+ ...Default.args,
51
+ value: 'green',
52
+ },
53
+ };
54
+
55
+ export const WithPlaceHolder: Story = {
56
+ args: {
57
+ ...Default.args,
58
+ placeholder: 'Select an option...',
59
+ },
60
+ };
61
+
62
+ export const EmptyOptions: Story = {
63
+ args: {
64
+ value: '',
65
+ options: [],
66
+ containerSx: {
67
+ width: 200,
68
+ },
69
+ },
70
+ };
package/src/stories/Input/Tags.stories.tsx CHANGED
@@ -31,17 +31,6 @@ export const Default = {
31
31
  args: {},
32
32
  };
33
33
 
34
- export const ClickableTag = {
35
- render: () => (
36
- <Tags
37
- tags={sampleTags}
38
- onClick={(clickedChip) => {
39
- console.log(clickedChip);
40
- }}
41
- />
42
- ),
43
- };
44
-
45
34
  export const DeletableTag = {
46
35
  render: () => (
47
36
  <Tags
package/src/stories/Input/TextField.stories.tsx CHANGED
@@ -4,14 +4,9 @@ import { Meta } from '@storybook/react';
4
4
  // Make sure your TextField import is correct
5
5
  import { InputAdornment as MuiInputAdornment } from '@mui/material';
6
6
  import { Icons } from '../../components/Assets/Icons/Icons';
7
- import {
8
- ToolTipContent,
9
- Tooltip,
10
- } from '../../components/Feedback/Tooltip/Tooltip';
11
- import {
12
- TextField,
13
- TextFieldProps,
14
- } from '../../components/Input/TextField/TextField';
7
+
8
+ import { TextField, TextFieldProps, Tooltip, ToolTipContent } from '../../components/export';
9
+
15
10
 
16
11
  // Define the default export with Meta type including the component type
17
12
  export default {
package/src/contexts/Providers.tsx DELETED
@@ -1,13 +0,0 @@
1
- import { ReactNode } from 'react';
2
- import { Provider } from 'react-redux';
3
-
4
- import store from '../state/store';
5
- import { MuiThemeProvider } from '../themes/MuiThemeProvider';
6
-
7
- export default function Providers({ children }: { children: ReactNode }) {
8
- return (
9
- <MuiThemeProvider>
10
- <Provider store={store}>{children}</Provider>
11
- </MuiThemeProvider>
12
- );
13
- }
package/src/store/activeStore.ts DELETED
@@ -1,6 +0,0 @@
1
- import { Store } from 'pullstate';
2
-
3
- export const activeStore = new Store({
4
- active: 0,
5
- open: window.innerWidth > 1024 ? true : false,
6
- });