@campxdev/react-blueprint 1.2.18 → 1.2.19

package/src/{state/filters/filtersSlice.ts → redux/slices/pageHeaderSlice.ts}

@@ -1,32 +1,26 @@
 import { GridColumnVisibilityModel, GridDensity } from '@mui/x-data-grid';
 import { createSlice } from '@reduxjs/toolkit';
 
-export type FilterState = {
+export type PageHeaderState = {
   [uniqueId: string]: {
     density: GridDensity;
     columnVisibilityModel: GridColumnVisibilityModel;
   };
 };
 
-const initialState: FilterState = {};
+const initialState: PageHeaderState = {};
 
-const filtersSlice = createSlice({
-  name: 'filters',
+const pageHeaderSlice = createSlice({
+  name: 'pageHeader',
   initialState,
   reducers: {
     setColumnVisibilityModel: (state, action) => {
       const { uniqueId, columnVisibilityModel } = action.payload;
-      if (!state[uniqueId]) {
-        state[uniqueId] = { density: 'standard', columnVisibilityModel: {} };
-      }
-      state[uniqueId].columnVisibilityModel = columnVisibilityModel;
+      state[uniqueId] = { ...state[uniqueId], columnVisibilityModel };
     },
     setDensity: (state, action) => {
       const { uniqueId, density } = action.payload;
-      if (!state[uniqueId]) {
-        state[uniqueId] = { density: 'standard', columnVisibilityModel: {} };
-      }
-      state[uniqueId].density = density;
+      state[uniqueId] = { ...state[uniqueId], density };
     },
     resetStateForUniqueId: (state, action) => {
       const { uniqueId } = action.payload;
@@ -36,6 +30,6 @@ const filtersSlice = createSlice({
 });
 
 export const { setColumnVisibilityModel, setDensity, resetStateForUniqueId } =
-  filtersSlice.actions;
+  pageHeaderSlice.actions;
 
-export default filtersSlice.reducer;
+export default pageHeaderSlice.reducer;

package/src/{state → redux}/store.ts

@@ -1,9 +1,9 @@
 import { configureStore } from '@reduxjs/toolkit';
-import filtersSlice from './filters/filtersSlice';
+import pageHeaderSlice from './slices/pageHeaderSlice';
 
 export const store = configureStore({
   reducer: {
-    filters: filtersSlice,
+    pageHeaderSlice,
   },
 });
 

package/src/stories/Assets/Icons.stories.tsx

@@ -1,13 +1,22 @@
 // Import React and other necessary elements
 import { Stack } from '@mui/material';
 import { Meta, StoryObj } from '@storybook/react/*';
-import { Icons } from '../../components/Assets/Icons/Icons';
+
+import { Icons, Typography } from '../../components/export';
 
 const IconsStory = () => {
   return (
-    <Stack gap={2} direction={'row'}>
-      {Object.values(Icons).map((Icon) => (
-        <Icon />
+    <Stack gap={2} direction={'column'}>
+      {Object.entries(Icons).map(([key, Icon], index) => (
+        <Stack
+          direction="row"
+          alignItems="center"
+          gap={4}
+          justifyContent="space-between"
+        >
+          <Typography>{key}</Typography>
+          <Icon />
+        </Stack>
       ))}
     </Stack>
   );

package/src/stories/Navigation/ColumnFilters.stories.tsx

@@ -2,13 +2,13 @@ import { GridColumnVisibilityModel } from '@mui/x-data-grid';
 import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 import {
-  TableColumnFilters,
-  TableColumnFiltersProps,
+  TableColumnsSelector,
+  TableColumnsSelectorProps,
 } from '../../components/export';
 
-const meta: Meta<typeof TableColumnFilters> = {
+const meta: Meta<typeof TableColumnsSelector> = {
   title: 'Navigation/ColumnFilters',
-  component: TableColumnFilters,
+  component: TableColumnsSelector,
   argTypes: {
     columns: {
       control: { type: 'object' },
@@ -30,7 +30,7 @@ const meta: Meta<typeof TableColumnFilters> = {
 
 export default meta;
 
-const Template: StoryFn<TableColumnFiltersProps> = (args) => {
+const Template: StoryFn<TableColumnsSelectorProps> = (args) => {
   const [selectedValues, setSelectedValues] =
     useState<GridColumnVisibilityModel>();
 
@@ -40,7 +40,7 @@ const Template: StoryFn<TableColumnFiltersProps> = (args) => {
 
   return (
     <>
-      <TableColumnFilters {...args} />
+      <TableColumnsSelector {...args} />
     </>
   );
 };

package/src/stories/Navigation/{TableDensityFilter.stories.tsx → DensitySelector.stories.tsx}

@@ -1,13 +1,10 @@
 import { GridDensity } from '@mui/x-data-grid';
 import { Meta, StoryFn } from '@storybook/react';
-import {
-  TableDensityFilter,
-  TableDensityFilterProps,
-} from '../../components/export';
+import { DensitySelector, DensitySelectorProps } from '../../components/export';
 
-const meta: Meta<typeof TableDensityFilter> = {
-  title: 'Navigation/TableDensityFilter',
-  component: TableDensityFilter,
+const meta: Meta<typeof DensitySelector> = {
+  title: 'Layout/TableDensityFilter',
+  component: DensitySelector,
   argTypes: {
     menuProps: {
       control: { type: 'object' },
@@ -25,12 +22,12 @@ const meta: Meta<typeof TableDensityFilter> = {
 
 export default meta;
 
-const Template: StoryFn<TableDensityFilterProps> = (args) => {
+const Template: StoryFn<DensitySelectorProps> = (args) => {
   const handleOnChange = (value: GridDensity) => {};
 
   return (
     <>
-      <TableDensityFilter {...args} />
+      <DensitySelector {...args} />
     </>
   );
 };

package/src/themes/colorTokens/colorPalette.tsx

@@ -15,12 +15,14 @@ export const ColorPalette = {
     Crimson: '#D4483E',
   },
   GreyColors: {
+    White30: '#FFFFFF4D',
     White50: '#FFFFFF80',
     White70: '#FFFFFFB3',
     White: '#FFFFFF',
     Grey100: '#F2F2F2',
     Grey200: '#CECECE',
     Grey500: '#333333',
+    Black30: '#1212124D',
     Black50: '#12121280',
     Black70: '#121212B3',
     Black: '#121212',

package/src/themes/colorTokens/darkColorTokens.tsx

@@ -27,6 +27,7 @@ export const DarkColorTokens = {
   },
   border: {
     primary: ColorPalette.GreyColors.Grey500,
+    secondary: ColorPalette.GreyColors.White30,
   },
   highlight: {
     highlightGreen: ColorPalette.UtilityColors.Green,

package/src/themes/colorTokens/lightColorTokens.ts

@@ -27,6 +27,7 @@ export const LightColorTokens = {
   },
   border: {
     primary: ColorPalette.GreyColors.Grey200,
+    secondary: ColorPalette.GreyColors.Black30,
   },
   highlight: {
     highlightGreen: ColorPalette.UtilityColors.Green,

package/src/themes/commonTheme.ts

@@ -59,6 +59,11 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           root: {
             marginLeft: '2px',
+            padding: '0px',
+            fontSize: '14px',
+          },
+          label: {
+            lineHeight: '1',
           },
         },
       },
@@ -75,7 +80,10 @@ export const getCommonTheme = (mode: Theme) => {
       MuiAlert: {
         styleOverrides: {
           root: {
-            width: '400px',
+            display: 'flex',
+            minWidth: '400px',
+            width: 'fit-content',
+            maxWidth: '100%',
             fontFamily: 'Poppins',
             fontWeight: 500,
             fontSize: '14px',
@@ -104,6 +112,7 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           root: {
             borderRadius: '10px',
+            padding: '0px',
           },
         },
       },
@@ -172,6 +181,7 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
+
       MuiCard: {
         styleOverrides: {
           root: {
@@ -211,6 +221,7 @@ export const getCommonTheme = (mode: Theme) => {
             },
           },
           paper: {
+            marginTop: '8px',
             borderRadius: '5px',
             border: `1px solid ${ColorTokens.secondary.main}`,
             boxShadow: '0px',
@@ -299,8 +310,10 @@ export const getCommonTheme = (mode: Theme) => {
             '& input:-webkit-autofill': {
               height: '7px',
             },
+            fieldset: {
+              top: '0px',
+            },
             minWidth: '200px',
-            margin: '2px 0px',
           },
         },
       },

package/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
+    "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,

package/types/theme.d.ts

@@ -32,6 +32,7 @@ declare module '@mui/material/styles' {
       };
       border: {
         primary: string;
+        secondary: string;
       };
       highlight: {
         highlightGreen: string;

package/src/components/Assets/Icons/IconComponents/FilterViewIcon.tsx

@@ -1,32 +0,0 @@
-import { useTheme } from '@mui/material';
-
-export const FilterViewIcon = ({ size = 16 }) => {
-  const theme = useTheme();
-
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      style={{
-        fill: theme.palette.primary.main,
-        stroke: theme.palette.primary.main,
-      }}
-    >
-      <path
-        d="M14.0008 5.16602H2.00022C1.86789 5.16504 1.74127 5.112 1.64775 5.01838C1.55423 4.92476 1.50133 4.79808 1.50049 4.66575C1.50147 4.53351 1.55443 4.40697 1.64794 4.31346C1.74144 4.21996 1.86799 4.16699 2.00022 4.16602H14.0002C14.1325 4.16699 14.259 4.21996 14.3525 4.31346C14.446 4.40697 14.499 4.53351 14.5 4.66575C14.4991 4.79799 14.4463 4.92458 14.3529 5.01819C14.2595 5.1118 14.133 5.1649 14.0008 5.16602Z"
-        strokeWidth="0.4"
-      />
-      <path
-        d="M12.0002 8.5H4.00022C3.86789 8.49902 3.74127 8.44598 3.64775 8.35236C3.55423 8.25874 3.50133 8.13206 3.50049 7.99973C3.50147 7.8675 3.55443 7.74096 3.64794 7.64745C3.74144 7.55394 3.86799 7.50098 4.00022 7.5H12.0002C12.1326 7.50084 12.2592 7.55374 12.3529 7.64726C12.4465 7.74078 12.4995 7.86741 12.5005 7.99973C12.4997 8.13215 12.4467 8.25891 12.353 8.35255C12.2594 8.44618 12.1326 8.49916 12.0002 8.5Z"
-        strokeWidth="0.4"
-      />
-      <path
-        d="M9.33339 11.834H6.66673C6.5344 11.833 6.40778 11.78 6.31425 11.6863C6.22073 11.5927 6.16783 11.466 6.16699 11.3337C6.16797 11.2015 6.22093 11.0749 6.31444 10.9814C6.40795 10.8879 6.53449 10.835 6.66673 10.834H9.33339C9.46572 10.8348 9.5924 10.8877 9.68602 10.9812C9.77964 11.0748 9.83268 11.2014 9.83366 11.3337C9.83282 11.4661 9.77984 11.5929 9.68621 11.6865C9.59257 11.7802 9.46581 11.8331 9.33339 11.834Z"
-        strokeWidth="0.4"
-      />
-    </svg>
-  );
-};

package/src/components/Navigation/TableDensityFilter/TableDensityFilter.tsx

@@ -1,115 +0,0 @@
-import { Box, MenuListProps, MenuProps, styled, useTheme } from '@mui/material';
-import { GridDensity } from '@mui/x-data-grid';
-import { useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { setDensity } from '../../../state/export';
-import {
-  Button,
-  DropDownIcon,
-  DropdownMenu,
-  Icons,
-  Typography,
-} from '../../export';
-
-export type TableDensityFilterProps = {
-  menuProps?: Omit<MenuProps, 'open'>;
-  menuListProps?: MenuListProps;
-  uniqueId: string;
-};
-
-export const TableDensityFilter = ({
-  uniqueId,
-  ...props
-}: TableDensityFilterProps) => {
-  const dispatch = useDispatch();
-
-  const [density, setGridDensity] = useState<GridDensity>('standard');
-
-  const gridDensity: GridDensity[] = ['compact', 'standard', 'comfortable'];
-
-  const theme = useTheme();
-
-  const getIcon = (type: GridDensity, color?: string, size?: number) => {
-    switch (type) {
-      case 'standard':
-        return <Icons.StandardIcon size={size} color={color} />;
-      case 'compact':
-        return <Icons.CompactIcon size={size} color={color} />;
-      case 'comfortable':
-        return <Icons.ComfortableIcon size={size} color={color} />;
-    }
-  };
-
-  const handleClick = (value: GridDensity, close: () => void) => {
-    setGridDensity(value);
-    if (uniqueId) {
-      dispatch(
-        setDensity({
-          uniqueId: uniqueId,
-          density: value,
-        }),
-      );
-    }
-    close();
-  };
-
-  return (
-    <DropdownMenu
-      menuListProps={{
-        sx: {
-          width: '220px',
-          padding: '12px',
-          maxHeight: '350px',
-        },
-        ...props.menuListProps,
-      }}
-      anchor={({ open }: { open: (e: any) => void }) => (
-        <DropDownIcon
-          icon={{
-            icon: (
-              <FilterAnchorContainer>{getIcon(density)}</FilterAnchorContainer>
-            ),
-          }}
-          handleClick={open}
-        />
-      )}
-      menuProps={{
-        ...props.menuProps,
-      }}
-      menuHeader={
-        <Typography color={theme.palette.text.secondary} variant="label1">
-          Row Density
-        </Typography>
-      }
-      menuListContainerSx={{
-        margin: '10px 2px 0px 0px',
-        gap: 1,
-      }}
-      menu={({ close }) =>
-        gridDensity.map((item) => (
-          <Button
-            sx={{
-              gap: '5px',
-              justifyContent: 'flex-start',
-            }}
-            onClick={() => handleClick(item, close)}
-            variant="text"
-          >
-            {getIcon(item, theme.palette.secondary.light, 20)}
-            <Typography variant="label2">{item}</Typography>
-          </Button>
-        ))
-      }
-    />
-  );
-};
-
-const FilterAnchorContainer = styled(Box)(({ theme }) => ({
-  height: '40px',
-  width: '40px',
-  backgroundColor: theme.palette.secondary.main,
-  borderRadius: '5px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-}));

package/src/state/export.ts

@@ -1,2 +0,0 @@
-export * from './filters/filtersSlice';
-export * from './store';