@campxdev/react-blueprint 1.8.9 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.8.9",
+  "version": "1.9.0",
   "main": "./export.ts",
   "dependencies": {
     "@emotion/react": "^11.13.3",
@@ -32,6 +32,7 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^3.1.4",
     "react-hook-form": "^7.52.0",
+    "@hookform/resolvers": "^2.9.10",
     "react-joyride": "^2.8.2",
     "react-query": "^3.39.3",
     "react-redux": "^9.1.2",
@@ -41,7 +42,8 @@
     "redux": "^5.0.1",
     "storybook-dark-mode": "^4.0.1",
     "typescript": "^5.5.2",
-    "web-vitals": "^2.1.0"
+    "web-vitals": "^2.1.0",
+    "yup": "^1.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

package/src/components/Input/Button/Button.tsx

@@ -6,23 +6,25 @@ import './ButtonLoader.css';
 
 export type ButtonProps = {
   loading?: boolean;
-  color?: string;
   background?: string;
   hoverBackground?: string;
-} & Omit<MuiButtonProps, 'color'>;
+  textColor?: string;
+} & MuiButtonProps;
 
 export const Button = ({
   loading = false,
   color,
   background,
   hoverBackground,
+  textColor,
   ...props
 }: ButtonProps) => {
   return (
     <MuiButton
       {...props}
+      color={color}
       sx={{
-        color,
+        color: textColor,
         background,
         ':hover': {
           background: hoverBackground,

package/src/components/Input/SingleSelect/components/MenuFooter.tsx

@@ -15,7 +15,7 @@ export const MenuFooter = ({ onClick }: { onClick: () => void }) => {
           margin: '0px 16px',
         }}
         disableRipple
-        color={theme.palette.text.tertiary}
+        textColor={theme.palette.text.tertiary}
       >
         Clear
       </Button>

package/src/components/Input/SingleSelect/components/SingleFilter.tsx

@@ -125,7 +125,7 @@ export const SingleFilter = ({
                 ? theme.palette.highlight.greenBackground
                 : theme.palette.surface.grey
             }
-            color={theme.palette.text.primary}
+            textColor={theme.palette.text.primary}
             endIcon={<KeyboardArrowDown />}
           >
             {validValue

package/src/components/Layout/PageHeader/PageHeader.tsx

@@ -1,4 +1,4 @@
-import { Box, Divider, Stack, useTheme } from '@mui/material';
+import { Divider, Stack, useTheme } from '@mui/material';
 import { GridColDef } from '@mui/x-data-grid';
 import { motion } from 'framer-motion';
 import {
@@ -9,48 +9,27 @@ import {
   useState,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useSearchParams } from 'react-router-dom';
 import { setFilterByNameForUniqueId } from '../../../redux/slices/pageHeaderSlice';
 import { RootState } from '../../../redux/store';
-import {
-  DensitySelector,
-  Icons,
-  TableColumnsSelector,
-  Typography,
-} from '../../export';
+import { DensitySelector, TableColumnsSelector } from '../../export';
 import { FiltersAnchor } from './components/Anchors';
 import { ManageFilters } from './components/ManageFilters/ManageFilters';
 import { SearchBar } from './components/SearchBar';
+import { Views, ViewsProps, ViewTab } from './components/Views/Views';
+import { ViewsActions } from './components/Views/ViewsActions';
 
 interface PageHeaderProps {
   uniqueId?: string;
   viewsSlot?: ReactNode;
   filterComponents?: ReactElement[];
+  viewsProps?: Omit<ViewsProps, 'uniqueId'>;
   actions?: ReactNode[];
   columns?: GridColDef[];
   searchText?: string;
   defaultShowLabels?: string[];
 }
 
-const ViewTab = ({ title }: { title: string }) => {
-  const theme = useTheme();
-  return (
-    <Stack>
-      <Stack direction="row" gap={1} alignItems="center" padding="8px 0px">
-        <Icons.ViewsIcon />
-        <Typography variant="subtitle3">{title}</Typography>
-      </Stack>
-      <Divider
-        style={{
-          background: theme.palette.tertiary.main,
-          height: '4px',
-          width: '92px',
-          borderRadius: '48px',
-        }}
-      />
-    </Stack>
-  );
-};
-
 const motionDivVariants = {
   collapsed: { height: '48px' },
   expanded: { height: '108px' },
@@ -62,11 +41,16 @@ export const PageHeader = ({
   filterComponents = [],
   defaultShowLabels = [],
   columns,
-  viewsSlot = <Box></Box>,
+  viewsSlot = <ViewTab title="Default View" active={true} onClick={() => {}} />,
   searchText = 'Search',
+  viewsProps,
 }: PageHeaderProps) => {
   const [expanded, setExpanded] = useState(false);
 
+  const [searchParams] = useSearchParams();
+
+  const viewId = searchParams.get('viewId');
+
   const allFilterLabels = filterComponents.map(
     (filter) => filter.props['label'] || 'Label Not Found',
   );
@@ -134,10 +118,21 @@ export const PageHeader = ({
         direction="row"
         width="100%"
         alignItems="center"
-        justifyContent="space-between"
+        justifyContent="flex-end"
         height="48px"
       >
-        {isTableMode ? <ViewTab title="Default View" /> : viewsSlot}
+        {isTableMode && viewsProps ? (
+          <Views {...viewsProps} uniqueId={uniqueId} />
+        ) : (
+          <Stack
+            direction="row"
+            gap={2}
+            justifyContent="flex-start"
+            width="100%"
+          >
+            {viewsSlot}
+          </Stack>
+        )}
 
         <Stack direction="row" alignItems="center">
           {isTableMode && (
@@ -166,42 +161,57 @@ export const PageHeader = ({
         />
       )}
       {expanded && (
-        <Stack direction="row" width="100%" alignItems="center" gap={2}>
-          {finalFilterComponents.map((filter, index) => (
-            <Fragment key={index}>
-              {wrapProps(filter)}
-              {index < finalFilterComponents.length - 1 && (
-                <Divider
-                  orientation="vertical"
-                  style={{
-                    height: '20px',
-                    background: theme.palette.border.primary,
-                  }}
-                />
+        <Stack
+          direction="row"
+          width="100%"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Stack
+            key={viewId ?? 'default'}
+            direction={'row'}
+            alignItems="center"
+            gap={2}
+          >
+            {finalFilterComponents.map((filter, index) => (
+              <Fragment key={index}>
+                {wrapProps(filter)}
+                {index < finalFilterComponents.length - 1 && (
+                  <Divider
+                    orientation="vertical"
+                    style={{
+                      height: '20px',
+                      background: theme.palette.border.primary,
+                    }}
+                  />
+                )}
+              </Fragment>
+            ))}
+            <ManageFilters
+              filterLabels={filterComponents.map((filter) => {
+                return filter.props['label'] || 'Label Not Found';
+              })}
+              selectedFilterLabels={finalFilterComponents.map(
+                (filter) => filter.props['label'] || 'Label Not Found',
               )}
-            </Fragment>
-          ))}
-          <ManageFilters
-            filterLabels={filterComponents.map((filter) => {
-              return filter.props['label'] || 'Label Not Found';
-            })}
-            selectedFilterLabels={finalFilterComponents.map(
-              (filter) => filter.props['label'] || 'Label Not Found',
-            )}
-            handleCheckboxChange={function (
-              label: string,
-              checked: boolean,
-            ): void {
-              if (checked) {
-                setHiddenLabels(hiddenLabels.filter((l) => label !== l));
-              } else {
-                setHiddenLabels([...hiddenLabels, label]);
-              }
-            }}
-            handleReset={() => {
-              setHiddenLabels(initialHiddenLabels);
-            }}
-          />
+              handleCheckboxChange={function (
+                label: string,
+                checked: boolean,
+              ): void {
+                if (checked) {
+                  setHiddenLabels(hiddenLabels.filter((l) => label !== l));
+                } else {
+                  setHiddenLabels([...hiddenLabels, label]);
+                }
+              }}
+              handleReset={() => {
+                setHiddenLabels(initialHiddenLabels);
+              }}
+            />
+          </Stack>
+          {viewsProps && uniqueId && (
+            <ViewsActions {...viewsProps} uniqueId={uniqueId} />
+          )}
         </Stack>
       )}
     </motion.div>

package/src/components/Layout/PageHeader/components/ManageFilters/ManageFilters.tsx

@@ -42,7 +42,7 @@ export const ManageFiltersMenuFooter = ({
           margin: '0px 16px',
         }}
         disableRipple
-        color={theme.palette.text.tertiary}
+        textColor={theme.palette.text.tertiary}
       >
         Reset
       </Button>

package/src/components/Layout/PageHeader/components/TableColumnsSelector/TableColumnsSelector.tsx

@@ -51,7 +51,7 @@ export const TableColumnsSelectorMenuFooter = ({
           margin: '0px 16px',
         }}
         disableRipple
-        color={theme.palette.text.tertiary}
+        textColor={theme.palette.text.tertiary}
       >
         Reset
       </Button>

package/src/components/Layout/PageHeader/components/Views/CreateViewForm.tsx

@@ -0,0 +1,74 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm } from 'react-hook-form';
+import { useMutation, useQueryClient } from 'react-query';
+import { useSelector } from 'react-redux';
+import { useSearchParams } from 'react-router-dom';
+import * as yup from 'yup';
+import { RootState } from '../../../../../redux/store';
+import { FormControlWrapper, TextField } from '../../../../export';
+import { ViewsProps } from './Views';
+
+export type CreateViewFormProps = {
+  close: () => void;
+} & ViewsProps;
+
+export const CreateViewForm = ({
+  axios,
+  type,
+  close,
+  uniqueId,
+}: CreateViewFormProps) => {
+  const schema = yup.object().shape({
+    name: yup.string().required('Name is required'),
+  });
+
+  const { control, handleSubmit } = useForm<{ name: string }>({
+    resolver: yupResolver(schema),
+  });
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const state = useSelector((state: RootState) => state.pageHeader[uniqueId]);
+
+  const createView = async (name: string) => {
+    return axios.post(`admin/views`, {
+      name,
+      type,
+      filters: state.filters,
+      columnVisibilityModel: state.columnVisibilityModel,
+      density: state.density,
+    });
+  };
+
+  const queryClient = useQueryClient();
+
+  const { mutate, isLoading } = useMutation(createView, {
+    onSuccess: (res) => {
+      close();
+      queryClient.invalidateQueries(type);
+      searchParams.set('viewId', res.data.viewId);
+      setSearchParams(searchParams);
+    },
+  });
+
+  const onSubmit = (data: { name: string }) => {
+    mutate(data.name);
+  };
+  return (
+    <FormControlWrapper
+      control={control}
+      formActionProps={{
+        submitButtonProps: {
+          title: 'Save',
+          onClick: handleSubmit(onSubmit),
+          loading: isLoading,
+        },
+        cancelButtonProps: {
+          title: 'Cancel',
+          onClick: close,
+        },
+      }}
+    >
+      <TextField name="name" label="View Name" />
+    </FormControlWrapper>
+  );
+};

package/src/components/Layout/PageHeader/components/Views/Views.tsx

@@ -0,0 +1,113 @@
+import { Axios } from 'axios';
+
+import { Divider, Stack, useTheme } from '@mui/material';
+import { useQuery } from 'react-query';
+import { useDispatch } from 'react-redux';
+import { useSearchParams } from 'react-router-dom';
+import {
+  PageHeaderSingleState,
+  resetStateForUniqueId,
+  setViewForUniqueId,
+} from '../../../../../redux/slices/pageHeaderSlice';
+import { Icons, Spinner, Typography } from '../../../../export';
+
+export type ViewsProps = {
+  type: string;
+  axios: Axios;
+  uniqueId: string;
+};
+
+export type View = {
+  id: string;
+  name: string;
+  slug: string;
+  type: string;
+} & PageHeaderSingleState;
+
+export const ViewTab = ({
+  title,
+  active,
+  onClick,
+}: {
+  title: string;
+  active: boolean;
+  onClick: () => void;
+}) => {
+  const theme = useTheme();
+  return (
+    <Stack onClick={onClick} sx={{ cursor: 'pointer' }} minWidth="80px">
+      <Stack direction="row" gap={1} alignItems="center" padding="8px 0px">
+        <Icons.ViewsIcon />
+        <Typography variant="subtitle3">{title}</Typography>
+      </Stack>
+
+      <Divider
+        style={{
+          background: theme.palette.tertiary.main,
+          height: '4px',
+          width: '100%',
+          borderRadius: '48px',
+          display: active ? 'block' : 'none',
+        }}
+      />
+    </Stack>
+  );
+};
+
+export const Views = ({ type, axios, uniqueId }: ViewsProps) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const viewId = searchParams.get('viewId');
+  const dispatch = useDispatch();
+  const { data, isLoading } = useQuery(type, async (): Promise<View[]> => {
+    return axios
+      .get(`admin/views/user-views/${type}`)
+      .then((data) => data.data);
+  });
+
+  const resetState = () => {
+    dispatch(
+      resetStateForUniqueId({
+        uniqueId: uniqueId,
+      }),
+    );
+  };
+
+  const setViewState = (view: View) => {
+    dispatch(
+      setViewForUniqueId({
+        uniqueId: uniqueId,
+        view: view,
+      }),
+    );
+  };
+
+  if (isLoading) return <Spinner />;
+
+  return (
+    <Stack direction="row" gap={2} justifyContent="flex-start" width="100%">
+      <ViewTab
+        title="Default View"
+        active={!viewId}
+        onClick={() => {
+          resetState();
+          searchParams.delete('viewId');
+          setSearchParams(searchParams);
+        }}
+      />
+      {data &&
+        data.map((view: View, index: number) => (
+          <ViewTab
+            title={view.name}
+            active={view.id == viewId}
+            onClick={() => {
+              resetState();
+              setViewState(view);
+              searchParams.set('viewId', view.id);
+              setSearchParams(searchParams);
+            }}
+          />
+        ))}
+    </Stack>
+  );
+};

package/src/components/Layout/PageHeader/components/Views/ViewsActions.tsx

@@ -0,0 +1,61 @@
+import { useMutation, useQueryClient } from 'react-query';
+import { useDispatch } from 'react-redux';
+import { useSearchParams } from 'react-router-dom';
+import { resetStateForUniqueId } from '../../../../../redux/slices/pageHeaderSlice';
+import { Button, DialogButton } from '../../../../export';
+import { CreateViewForm } from './CreateViewForm';
+import { ViewsProps } from './Views';
+
+export const ViewsActions = (viewsProps: ViewsProps) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const dispatch = useDispatch();
+
+  const viewId = searchParams.get('viewId');
+
+  const deleteView = async () => {
+    return viewsProps.axios.delete(`admin/views/${viewId}`);
+  };
+  const queryClient = useQueryClient();
+  const resetState = () => {
+    dispatch(
+      resetStateForUniqueId({
+        uniqueId: viewsProps.uniqueId,
+      }),
+    );
+  };
+
+  const { mutate, isLoading } = useMutation(deleteView, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(viewsProps.type);
+      resetState();
+      searchParams.delete('viewId');
+      setSearchParams(searchParams);
+    },
+  });
+  return viewId ? (
+    <Button
+      variant="outlined"
+      color="error"
+      loading={isLoading}
+      onClick={() => {
+        mutate();
+      }}
+    >
+      Delete View
+    </Button>
+  ) : (
+    <DialogButton
+      anchor={({ open }) => (
+        <Button variant="contained" color="secondary" onClick={open}>
+          Save View
+        </Button>
+      )}
+      title="Save View"
+      content={({ close }) => {
+        return <CreateViewForm close={close} {...viewsProps} />;
+      }}
+      maxWidth="sm"
+    />
+  );
+};

package/src/components/Navigation/ConfirmDialog/ConfirmDialog.tsx

@@ -59,7 +59,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
                   close();
                 }}
                 variant="text"
-                color={theme.palette.text.tertiary}
+                textColor={theme.palette.text.tertiary}
               >
                 {cancelButtonText}
               </Button>

package/src/redux/slices/pageHeaderSlice.ts

@@ -94,6 +94,18 @@ export const pageHeaderSlice = createSlice({
         },
       };
     },
+    setViewForUniqueId: (state, action) => {
+      const { uniqueId, view } = action.payload;
+      state[uniqueId] = {
+        ...state[uniqueId],
+        filters: {
+          ...state[uniqueId].filters,
+          ...view.filters,
+        },
+        columnVisibilityModel: view.columnVisibilityModel,
+        density: view.density,
+      };
+    },
   },
 });
 
@@ -106,4 +118,5 @@ export const {
   setLimitForUniqueId,
   setOffsetForUniqueId,
   setFilterByNameForUniqueId,
+  setViewForUniqueId,
 } = pageHeaderSlice.actions;

package/src/themes/colorTokens/darkColorTokens.tsx

@@ -10,6 +10,7 @@ export const DarkColorTokens = {
     main: ColorPalette.BrandColors.Violet700,
     light: ColorPalette.BrandColors.Violet550,
     dark: ColorPalette.BrandColors.Violet900,
+    contrastText: ColorPalette.BrandColors.Violet400,
   },
   tertiary: { main: ColorPalette.BrandColors.Crimson },
   text: {

package/src/themes/colorTokens/lightColorTokens.ts

@@ -10,6 +10,7 @@ export const LightColorTokens = {
     main: ColorPalette.BrandColors.Violet200,
     light: ColorPalette.BrandColors.Violet100,
     dark: ColorPalette.BrandColors.Violet250,
+    contrastText: ColorPalette.BrandColors.Violet600,
   },
   tertiary: { main: ColorPalette.BrandColors.Crimson },
   text: {