@campxdev/react-blueprint 1.9.6 → 2.0.1

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

@@ -1,172 +0,0 @@
-import {
-  MenuListProps,
-  MenuProps,
-  Stack,
-  styled,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import { useState } from 'react';
-import { Button, Icons, SearchBar, SingleCheckBox } from '../../../../export';
-import { DropdownMenu } from '../../../../Navigation/export';
-
-export type ManageFiltersProps = {
-  filterLabels: string[];
-  selectedFilterLabels: string[];
-  handleCheckboxChange: (label: string, checked: boolean) => void;
-  handleReset: () => void;
-  menuProps?: Omit<MenuProps, 'open'>;
-  menuListProps?: MenuListProps;
-};
-
-const FooterContainerContainer = styled(Stack)(({ theme }) => ({
-  backgroundColor: theme.palette.surface.defaultBackground,
-  borderRadius: '4px',
-  height: '40px',
-}));
-
-export const ManageFiltersMenuFooter = ({
-  onClick,
-}: {
-  onClick: () => void;
-}) => {
-  const theme = useTheme();
-  return (
-    <FooterContainerContainer direction="row" alignItems="center">
-      <Button
-        variant="text"
-        onClick={onClick}
-        sx={{
-          fontFamily: 'Heebo',
-          minWidth: '0px',
-          margin: '0px 16px',
-        }}
-        disableRipple
-        textColor={theme.palette.text.tertiary}
-      >
-        Reset
-      </Button>
-    </FooterContainerContainer>
-  );
-};
-
-export const ManageFilters = ({
-  filterLabels,
-  selectedFilterLabels,
-  handleCheckboxChange,
-  handleReset,
-  ...props
-}: ManageFiltersProps) => {
-  const theme = useTheme();
-  const [search, setSearch] = useState<string>('');
-
-  const filteredOptions = filterLabels.filter((label) =>
-    label.toLowerCase().includes(search.toLowerCase()),
-  );
-
-  return (
-    <DropdownMenu
-      menuListProps={{
-        sx: {
-          padding: '0px',
-          width: '250px',
-        },
-        ...props.menuListProps,
-      }}
-      anchor={({ open }: { open: (e: any) => void }) => (
-        <Button onClick={open} sx={{ gap: '1px' }} variant="text">
-          {<Icons.ConfigureIcon />} Manage Filters
-        </Button>
-      )}
-      menuProps={{
-        ...props.menuProps,
-        anchorOrigin: {
-          vertical: 'bottom',
-          horizontal: 'left',
-        },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'left',
-        },
-      }}
-      menuHeader={
-        <SearchBar
-          fullWidth
-          size="small"
-          placeholder="Search"
-          onSearch={(value) => {
-            setSearch(value);
-          }}
-        />
-      }
-      menuListContainerSx={{
-        margin: '12px 12px 0px 12px',
-        gap: 0,
-        maxHeight: '310px',
-        overflowY: 'scroll',
-      }}
-      menu={filteredOptions.map((item, index) => (
-        <SingleCheckBox
-          key={index}
-          formControlLabelProps={{
-            labelPlacement: 'start',
-            sx: {
-              display: 'flex',
-              justifyContent: 'space-between',
-              margin: '0px',
-              width: '100%',
-              '.MuiFormControlLabel-label': {
-                width: '100%',
-              },
-            },
-          }}
-          icon={<Icons.VisibilityOffIcon />}
-          checkedIcon={<Icons.VisibilityIcon />}
-          checked={selectedFilterLabels.includes(item)}
-          label={
-            <Typography
-              color={
-                !selectedFilterLabels.includes(item)
-                  ? theme.palette.text.tertiary
-                  : theme.palette.text.primary
-              }
-              variant="subtitle3"
-            >
-              {item}
-            </Typography>
-          }
-          onChange={(e) => {
-            handleCheckboxChange(item, e.target.checked);
-          }}
-        />
-      ))}
-      menuFooter={<ManageFiltersMenuFooter onClick={handleReset} />}
-    />
-  );
-};
-
-// const FilterAnchorContainer = styled(Box)(({ theme }) => ({
-//   height: '40px',
-//   width: '40px',
-//   backgroundColor: theme.palette.secondary.main,
-//   borderRadius: '5px',
-//   display: 'flex',
-//   alignItems: 'center',
-//   justifyContent: 'center',
-// }));
-
-/* <DropDownIcon
-  icon={{
-    icon: (
-      <Badge
-        overlap="circular"
-        variant={values.length > 0 ? 'dot' : 'standard'}
-      >
-        <FilterAnchorContainer>
-          <FilterViewIcon />
-        </FilterAnchorContainer>
-      </Badge>
-    ),
-  }}
-  handleClick={open}
-/>; */

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

@@ -1,109 +0,0 @@
-import { InputAdornment, Stack } from '@mui/material';
-import { AnimatePresence, motion } from 'framer-motion';
-import { debounce } from 'lodash';
-import React, { useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { setSearchForUniqueId } from '../../../../redux/slices/pageHeaderSlice';
-import { RootState } from '../../../../redux/store';
-import { Icons, TextField } from '../../../export';
-import { SearchAnchor } from './Anchors';
-
-export const SearchBar = ({
-  uniqueId,
-  searchText,
-}: {
-  uniqueId: string;
-  searchText: string;
-}) => {
-  const dispatch = useDispatch();
-
-  const [expandedSearch, setExpandedSearch] = useState(false);
-
-  const handleSearchClick = () => {
-    setExpandedSearch(true);
-  };
-
-  const search = useSelector(
-    (state: RootState) => state.pageHeader[uniqueId]?.filters?.search,
-  );
-
-  // Wrap onSearch in useCallback
-  const onSearch = (value: string | null) => {
-    dispatch(
-      setSearchForUniqueId({
-        uniqueId: uniqueId,
-        search: value,
-      }),
-    );
-  };
-
-  const debouncedSendRequest = useMemo(
-    () => debounce(onSearch, 300),
-    [onSearch],
-  );
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    debouncedSendRequest(e.target.value);
-  };
-
-  const handleClearClick = (e: any) => {
-    onSearch(null);
-    setExpandedSearch(false);
-  };
-
-  return (
-    <AnimatePresence mode="wait">
-      {expandedSearch ? (
-        <motion.div
-          key="searchBar"
-          initial={{ opacity: 0, x: -20, scale: 0.95 }}
-          animate={{ opacity: 1, x: 0, scale: 1 }}
-          exit={{ opacity: 0, x: 20, scale: 0.95 }}
-          transition={{ duration: 0.3 }}
-        >
-          <TextField
-            containerProps={{
-              margin: '0px',
-              width: '300px',
-            }}
-            sx={{
-              input: {
-                padding: '9px 9px 9px 4px',
-              },
-            }}
-            size="small"
-            placeholder={searchText}
-            defaultValue={search || ''}
-            onChange={handleChange}
-            InputProps={{
-              startAdornment: (
-                // <InputAdornment position="start">
-                <Stack direction="row" alignItems="center" gap="4px">
-                  <Icons.SearchIcon />
-                  <Icons.LineDividerIcon />
-                </Stack>
-                // </InputAdornment>
-              ),
-              endAdornment: (
-                <InputAdornment position="end">
-                  <Icons.ClearIcon onClick={handleClearClick} />
-                </InputAdornment>
-              ),
-            }}
-            autoFocus
-          />
-        </motion.div>
-      ) : (
-        <motion.div
-          key="searchAnchor"
-          initial={{ opacity: 0, x: 20, scale: 0.95 }}
-          animate={{ opacity: 1, x: 0, scale: 1 }}
-          exit={{ opacity: 0, x: -20, scale: 0.95 }}
-          transition={{ duration: 0.3 }}
-        >
-          <SearchAnchor handleClick={handleSearchClick} showDot={false} />
-        </motion.div>
-      )}
-    </AnimatePresence>
-  );
-};

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

@@ -1,242 +0,0 @@
-import {
-  MenuListProps,
-  MenuProps,
-  Stack,
-  styled,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import { GridColDef, GridColumnVisibilityModel } from '@mui/x-data-grid';
-import { useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { setColumnVisibilityModelForUniqueId } from '../../../../../redux/slices/pageHeaderSlice';
-import { RootState } from '../../../../../redux/store';
-import {
-  Button,
-  EmptyIllustration,
-  Icons,
-  SearchBar,
-  SingleCheckBox,
-} from '../../../../export';
-import { DropdownMenu } from '../../../../Navigation/export';
-import { ColumnsAnchor } from '../Anchors';
-
-export type TableColumnsSelectorProps = {
-  columns: GridColDef[];
-  menuProps?: Omit<MenuProps, 'open'>;
-  menuListProps?: MenuListProps;
-  uniqueId: string;
-};
-
-export const FooterContainerContainer = styled(Stack)(({ theme }) => ({
-  backgroundColor: theme.palette.surface.defaultBackground,
-  borderRadius: '4px',
-  height: '40px',
-}));
-
-export const TableColumnsSelectorMenuFooter = ({
-  onClick,
-}: {
-  onClick: () => void;
-}) => {
-  const theme = useTheme();
-  return (
-    <FooterContainerContainer direction="row" alignItems="center">
-      <Button
-        variant="text"
-        onClick={onClick}
-        sx={{
-          fontFamily: 'Heebo',
-          minWidth: '0px',
-          margin: '0px 16px',
-        }}
-        disableRipple
-        textColor={theme.palette.text.tertiary}
-      >
-        Reset
-      </Button>
-    </FooterContainerContainer>
-  );
-};
-
-export const TableColumnsSelector = ({
-  columns,
-  uniqueId,
-  ...props
-}: TableColumnsSelectorProps) => {
-  const dispatch = useDispatch();
-
-  const columnVisibilityModel = useSelector(
-    (state: RootState) =>
-      state.pageHeader[uniqueId]?.columnVisibilityModel ||
-      columns.reduce((acc, column) => {
-        acc[column.field] = true;
-        return acc;
-      }, {} as GridColumnVisibilityModel),
-  );
-
-  const [search, setSearch] = useState<string>('');
-
-  const theme = useTheme();
-
-  const filteredOptions = columns.filter((option) =>
-    option.headerName?.toLowerCase().includes(search.toLowerCase()),
-  );
-
-  const handleCheckboxChange = (column: GridColDef, checked: boolean) => {
-    const newColumnVisibilityModel = {
-      ...columnVisibilityModel,
-      [column.field]: !checked,
-    };
-    dispatch(
-      setColumnVisibilityModelForUniqueId({
-        uniqueId: uniqueId,
-        columnVisibilityModel: newColumnVisibilityModel,
-      }),
-    );
-  };
-  return (
-    <>
-      <DropdownMenu
-        menuListProps={{
-          sx: {
-            padding: '0px',
-            width: '250px',
-          },
-          ...props.menuListProps,
-        }}
-        anchor={({ open }: { open: (e: any) => void }) => (
-          <ColumnsAnchor
-            handleClick={open}
-            showDot={Object.values(columnVisibilityModel).includes(false)}
-          />
-        )}
-        menuProps={{
-          ...props.menuProps,
-          anchorOrigin: {
-            vertical: 'bottom',
-            horizontal: 'left',
-          },
-          transformOrigin: {
-            vertical: 'top',
-            horizontal: 'left',
-          },
-        }}
-        menuHeader={
-          <SearchBar
-            fullWidth
-            size="small"
-            placeholder="Search"
-            onSearch={(value) => {
-              setSearch(value);
-            }}
-          />
-        }
-        menuListContainerSx={{
-          margin: '12px 12px 0px 12px',
-          height: '310px',
-          overflowY: 'scroll',
-        }}
-        menu={filteredOptions.map((item, index) => (
-          <SingleCheckBox
-            key={index}
-            formControlLabelProps={{
-              labelPlacement: 'start',
-              sx: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                margin: '0px',
-                width: '100%',
-                '.MuiFormControlLabel-label': {
-                  width: '100%',
-                },
-              },
-            }}
-            icon={<Icons.VisibilityIcon />}
-            checkedIcon={<Icons.VisibilityOffIcon />}
-            checked={!columnVisibilityModel[item.field]}
-            label={
-              <Typography
-                color={
-                  !columnVisibilityModel[item.field]
-                    ? theme.palette.text.tertiary
-                    : theme.palette.text.primary
-                }
-                variant="subtitle3"
-              >
-                {item.headerName}
-              </Typography>
-            }
-            onChange={(e) => {
-              handleCheckboxChange(item, e.target.checked);
-            }}
-          />
-        ))}
-        menuSlot={({ close }) => {
-          if (filteredOptions.length === 0)
-            return (
-              <EmptyIllustration
-                message="No Options Found"
-                imageSize="100px"
-                containerProps={{
-                  height: '310px',
-                }}
-              />
-            );
-          return filteredOptions.map((item, index) => (
-            <SingleCheckBox
-              key={index}
-              formControlLabelProps={{
-                labelPlacement: 'start',
-                sx: {
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  margin: '0px',
-                  width: '100%',
-                  '.MuiFormControlLabel-label': {
-                    width: '100%',
-                  },
-                  borderBottom: `1px solid ${theme.palette.secondary.main}`,
-                },
-              }}
-              icon={<Icons.VisibilityIcon />}
-              checkedIcon={<Icons.VisibilityOffIcon />}
-              checked={!columnVisibilityModel[item.field]}
-              label={
-                <Typography
-                  color={
-                    !columnVisibilityModel[item.field]
-                      ? theme.palette.text.tertiary
-                      : theme.palette.text.primary
-                  }
-                  variant="subtitle3"
-                >
-                  {item.headerName}
-                </Typography>
-              }
-              onChange={(e) => {
-                handleCheckboxChange(item, e.target.checked);
-              }}
-            />
-          ));
-        }}
-        useMenuSlot
-        menuFooter={
-          <TableColumnsSelectorMenuFooter
-            onClick={() => {
-              dispatch(
-                setColumnVisibilityModelForUniqueId({
-                  uniqueId: uniqueId,
-                  columnVisibilityModel: columns.reduce((acc, column) => {
-                    acc[column.field] = true;
-                    return acc;
-                  }, {} as GridColumnVisibilityModel),
-                }),
-              );
-            }}
-          />
-        }
-      />
-    </>
-  );
-};

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

@@ -1,74 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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">
-      <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>
-  );
-};