@campxdev/react-blueprint 1.9.6 → 2.0.1

package/src/components/DataDisplay/Card/styles.tsx

@@ -1,61 +0,0 @@
-import {
-  Button,
-  CardActions,
-  Divider,
-  IconButton,
-  Stack,
-  styled,
-  Typography,
-} from '@mui/material';
-
-export const StyledCardActions = styled(CardActions)(({ theme }) => ({
-  //${} add border color
-  borderTop: `1px solid ${theme.palette.border.primary}`,
-  padding: '0',
-}));
-
-export const StyledButton = styled(Button)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  width: '100%',
-  padding: '8px 16px',
-}));
-
-export const StyledImage = styled('img')(({ theme }) => ({
-  height: '216px',
-  width: '400px',
-  objectFit: 'cover',
-}));
-
-export const StyledHeader = styled(Stack)(({ theme }) => ({
-  padding: '12px 16px',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-}));
-
-export const StyledStack = styled(Stack)(({ theme }) => ({
-  width: '50px',
-  height: '50px',
-  backgroundColor: theme.palette.surface.grey,
-  borderRadius: '50%',
-  justifyContent: 'center',
-  alignItems: 'center',
-}));
-
-export const StyledStatusText = styled(Typography)(({ theme }) => ({
-  color: theme.palette.highlight.highlightBlue,
-  padding: '5px 10px',
-  backgroundColor: theme.palette.highlight.blueBackground,
-  borderRadius: '4px',
-}));
-
-export const StyledIcon = styled(IconButton)(({ theme }) => ({
-  color: theme.palette.text.primary,
-}));
-
-export const StyledDivider = styled(Divider)(({ theme }) => ({
-  orientation: 'vertical',
-  border: '1px solid #CECECE',
-}));

package/src/components/DataDisplay/Chips/Chips.tsx

@@ -1,91 +0,0 @@
-import { Chip, Stack, styled } from '@mui/material';
-import { ReactNode, useEffect, useState } from 'react';
-
-interface ChipsProps {
-  list: { label: string | ReactNode; value: string | number }[];
-  selected: string[] | string | number;
-  onSelected: (selected: string[] | string | number) => void;
-  direction?: 'row' | 'column';
-  singleSelection?: boolean;
-  toggle?: boolean;
-}
-
-export default function Chips({
-  list = [],
-  selected: _selected,
-  onSelected,
-  direction = 'row',
-  singleSelection = true,
-  toggle = false,
-}: ChipsProps) {
-  const [selected, setSelected] = useState<string | number | string[]>(
-    singleSelection ? '' : [],
-  );
-
-  useEffect(() => {
-    setSelected(_selected);
-  }, [_selected]);
-
-  const handleChange = (value: string | number) => {
-    if (singleSelection) {
-      if (selected === value && !toggle) {
-        setSelected('');
-        onSelected('');
-      } else {
-        setSelected(value);
-        onSelected(value);
-      }
-    } else {
-      if (Array.isArray(selected)) {
-        const valueStr = value.toString();
-        const selectedStr = selected.map((item) => item.toString());
-
-        if (selectedStr.includes(valueStr)) {
-          const newSelected = selected.filter(
-            (item) => item.toString() !== valueStr,
-          );
-          setSelected(newSelected);
-          onSelected(newSelected);
-        } else {
-          const newSelected = [...selected, value.toString()];
-          setSelected(newSelected);
-          onSelected(newSelected);
-        }
-      }
-    }
-  };
-
-  const isSelected = (value: string | number) =>
-    singleSelection
-      ? selected === value
-      : Array.isArray(selected) &&
-        selected.map((item) => item.toString()).includes(value.toString());
-
-  return (
-    <Stack gap="8px" direction={direction} flexWrap="wrap">
-      {list.map((item, index) => (
-        <StyledChip
-          key={index}
-          color="primary"
-          label={item.label}
-          clickable
-          variant={isSelected(item.value) ? 'outlined' : 'filled'}
-          onClick={() => handleChange(item.value)}
-        />
-      ))}
-    </Stack>
-  );
-}
-
-const StyledChip = styled(Chip)(({ theme }) => ({
-  minWidth: '100px',
-  color: theme.palette.text.primary,
-  background: theme.palette.surface.grey,
-  '&.MuiButtonBase-root.MuiChip-filled': {
-    borderColor: theme.palette.primary.main,
-  },
-  height: '40px',
-  fontSize: '14px',
-  fontWeight: 500,
-  borderRadius: '20px',
-}));

package/src/components/DataDisplay/DataTable/DataTable.tsx

@@ -1,89 +0,0 @@
-import { Stack, styled } from '@mui/material';
-import {
-  DataGrid as MuiDataGrid,
-  DataGridProps as MuiDataGridProps,
-} from '@mui/x-data-grid';
-import { v4 } from 'uuid';
-import { TablePagination } from './TablePagination';
-
-export type DataTableProps = {
-  limit?: number;
-  offset?: number;
-  totalCount?: number;
-  onPageChange?: (page: number) => void;
-  onLimitChange?: (limit: number) => void;
-} & MuiDataGridProps;
-
-export const DataTable = (props: DataTableProps) => {
-  const {
-    limit,
-    offset,
-    totalCount,
-    onPageChange,
-    onLimitChange,
-    density,
-    rows,
-  } = props;
-
-  const getRowHeightByDensity = (): number => {
-    switch (density) {
-      case 'standard':
-        return 48;
-      case 'compact':
-        return 36;
-      case 'comfortable':
-        return 60;
-      default:
-        return 48;
-    }
-  };
-
-  return (
-    <MuiDataGrid
-      disableColumnFilter
-      disableColumnMenu
-      disableColumnSorting
-      getRowId={(row) => row.id ?? v4()}
-      getRowHeight={getRowHeightByDensity}
-      rows={rows}
-      {...props}
-      slots={{
-        ...props.slots,
-        pagination: () => {
-          if (
-            limit === undefined ||
-            offset === undefined ||
-            totalCount === undefined ||
-            onPageChange === undefined ||
-            onLimitChange === undefined
-          ) {
-            return <></>;
-          }
-          const pages = Math.ceil(totalCount / limit);
-          const currentPage = Math.ceil(offset / limit) + 1;
-          return (
-            <TablePagination
-              count={pages}
-              page={currentPage}
-              limit={limit}
-              offset={offset}
-              totalCount={totalCount}
-              onPageChange={onPageChange}
-              onLimitChange={onLimitChange}
-              rowCount={rows?.length || 0}
-            />
-          );
-        },
-      }}
-    />
-  );
-};
-
-export const CellContainer = styled(Stack)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  height: '100%',
-  flexDirection: 'row',
-  justifyContent: 'flex-start',
-  gap: '12px',
-}));

package/src/components/DataDisplay/DataTable/TablePagination.tsx

@@ -1,92 +0,0 @@
-import {
-  Pagination as MuiPagination,
-  PaginationProps as MuiPaginationProps,
-  Stack,
-  styled,
-} from '@mui/material';
-import { DropdownMenuItem } from '../../Navigation/DropDownMenu/DropdownMenuItem';
-
-import { DropDownButton } from '../../Navigation/DropDownMenu/DropDownButton';
-import { DropdownMenu } from '../../Navigation/DropDownMenu/DropDownMenu';
-import { Typography } from '../Typography/Typography';
-
-export type PaginationProps = {
-  limit: number;
-  offset: number;
-  totalCount: number;
-  onPageChange: (offset: number) => void;
-  onLimitChange: (limit: number) => void;
-  rowCount: number;
-} & MuiPaginationProps;
-
-const TablePaginationContainer = styled(Stack)(({ theme }) => ({
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  width: '100%',
-  padding: '10px 30px',
-  backgroundColor: theme.palette.surface.grey,
-}));
-
-export const TablePagination = (props: PaginationProps) => {
-  const { limit, offset, totalCount, onPageChange, onLimitChange, rowCount } =
-    props;
-
-  const getPaginationText = () => {
-    if (rowCount == 0) return 'No records';
-    return `Showing ${offset + 1} - ${offset + rowCount} rows of ${totalCount}`;
-  };
-
-  return (
-    <TablePaginationContainer direction="row">
-      <Typography variant="caption">{getPaginationText()}</Typography>
-      <MuiPagination
-        {...props}
-        variant="outlined"
-        shape="rounded"
-        onChange={(e, v) => onPageChange((Number(v) - 1) * limit)}
-      />
-      <DropdownMenu
-        anchor={({ open }) => (
-          <DropDownButton
-            loading={false}
-            onClick={open}
-            sx={{ minWidth: '130px', padding: '10px 20px', maxHeight: '32px' }}
-          >
-            {limit} / Page
-          </DropDownButton>
-        )}
-        menuListProps={{
-          sx: {
-            minWidth: '130px',
-            '& li': {
-              minHeight: '32px !important',
-              padding: '10px 20px',
-            },
-          },
-        }}
-        menu={[
-          <DropdownMenuItem
-            label="10 / Page"
-            onClick={() => onLimitChange(Number(10))}
-          />,
-          <DropdownMenuItem
-            label="20 / Page"
-            onClick={() => onLimitChange(Number(20))}
-          />,
-          <DropdownMenuItem
-            label="50 / Page"
-            onClick={() => onLimitChange(Number(50))}
-          />,
-          <DropdownMenuItem
-            label="100 / Page"
-            onClick={() => onLimitChange(Number(100))}
-          />,
-          <DropdownMenuItem
-            label="200 / Page"
-            onClick={() => onLimitChange(Number(200))}
-          />,
-        ]}
-      />
-    </TablePaginationContainer>
-  );
-};

package/src/components/DataDisplay/EditableDataTable/EditableDataTable.tsx

@@ -1,252 +0,0 @@
-import { Button, useTheme } from '@mui/material';
-import {
-  GridActionsCellItem,
-  GridColDef,
-  GridEventListener,
-  GridRowEditStopReasons,
-  GridRowModel,
-  GridRowModes,
-  GridRowModesModel,
-  GridRowParams,
-  GridToolbarContainer,
-  GridValidRowModel,
-} from '@mui/x-data-grid';
-import { useEffect, useRef, useState } from 'react';
-import { v4 } from 'uuid';
-import { DataTable, DataTableProps, Icons } from '../../export';
-
-export type EditableDataTableProps = {
-  onChange: (rows: GridValidRowModel) => void;
-  onSave?: (params: any) => void;
-  onDelete?: (params: any) => void;
-  editVisibilityArray?: number[];
-  deleteVisibilityArray?: number[];
-} & Omit<
-  DataTableProps,
-  | 'rowModesModel'
-  | 'onRowModesModelChange'
-  | 'onRowEditStop'
-  | 'processRowUpdate'
->;
-
-export const EditableDataTable = (props: EditableDataTableProps) => {
-  const { rows = [] } = props;
-
-  useEffect(() => {}, [props.columns]);
-
-  return (
-    <EditableTableCore
-      {...props}
-      rows={rows?.map((row) => (row.id ? row : { id: v4(), ...row }))}
-    />
-  );
-};
-
-export const EditableTableCore = (props: EditableDataTableProps) => {
-  const theme = useTheme();
-  const { rows = [], columns } = props;
-  const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
-  const processRowUpdate = (newRow: GridRowModel) => {
-    const updatedRow = { ...newRow, isNew: false };
-    props.onSave && props.onSave(newRow);
-    props.onChange(
-      rows?.map((row) => (row.id === newRow.id ? updatedRow : row)) ?? [],
-    );
-    return updatedRow;
-  };
-
-  const handleRowEditStop: GridEventListener<'rowEditStop'> = (
-    params,
-    event,
-  ) => {
-    if (params.reason === GridRowEditStopReasons.rowFocusOut) {
-      event.defaultMuiPrevented = true;
-    }
-  };
-
-  const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => {
-    setRowModesModel(newRowModesModel);
-  };
-
-  const handleEditClick = (params: GridRowParams) => {
-    setRowModesModel({
-      ...rowModesModel,
-      [params.id]: { mode: GridRowModes.Edit },
-    });
-  };
-
-  const handleSaveClick = (params: GridRowParams) => {
-    setRowModesModel({
-      ...rowModesModel,
-      [params.id]: { mode: GridRowModes.View },
-    });
-  };
-
-  const handleDeleteClick = (params: GridRowParams) => {
-    props.onDelete && props.onDelete(params);
-    props.onChange(rows?.filter((row) => row.id !== params.id) ?? []);
-  };
-
-  const deleteVisibilityArray =
-    props.deleteVisibilityArray || rows.map((row) => row.id);
-
-  const editVisibilityArray =
-    props.editVisibilityArray || rows.map((row) => row.id);
-
-  return (
-    <>
-      <DataTable
-        editMode="row"
-        onRowModesModelChange={handleRowModesModelChange}
-        onRowEditStop={handleRowEditStop}
-        processRowUpdate={processRowUpdate}
-        rowModesModel={rowModesModel}
-        sx={{
-          '& .MuiDataGrid-cell:focus-within, & .MuiDataGrid-cell:focus': {
-            outline: 'none !important',
-          },
-          '& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-columnHeader:focus':
-            {
-              outline: 'none !important',
-            },
-          '& .MuiDataGrid-columnHeaders': {
-            marginLeft: '9px',
-            marginRight: '9px',
-          },
-          '& .MuiDataGrid-toolbarContainer': {
-            marginLeft: '9px',
-            marginRight: '9px',
-          },
-
-          '& .MuiDataGrid-row': {
-            boxShadow: 'none',
-            marginLeft: '9px',
-            marginRight: '9px',
-          },
-          '& .MuiDataGrid-row--editing': {
-            boxShadow: 'none',
-          },
-          '& .MuiDataGrid-editInputCell input': {
-            padding: '10px 9px',
-            height: '100%',
-          },
-          '& .MuiDataGrid-cell.MuiDataGrid-cell--editing': {
-            padding: '0px 9px',
-            alignItems: 'center',
-          },
-          '& .MuiDataGrid-cell': {
-            padding: '0px 9px',
-            display: 'flex',
-            alignItems: 'center',
-          },
-          '& .MuiInputBase-input': {
-            border: `1px solid ${theme.palette.border.primary}`,
-            borderRadius: '5px',
-            ':focus-within': {
-              borderColor: theme.palette.primary.main,
-            },
-          },
-          '& .MuiAutocomplete-input': {
-            border: 'none',
-          },
-
-          '& .MuiOutlinedInput-input': {
-            padding: '8px 14px',
-          },
-        }}
-        {...props}
-        rows={rows}
-        columns={[
-          ...columns,
-          {
-            field: 'actions',
-            type: 'actions',
-            headerName: 'Actions',
-            width: 150,
-            cellClassName: 'actions',
-            getActions: (params) => {
-              const actions = [];
-
-              if (editVisibilityArray.includes(params.row.id)) {
-                if (rowModesModel[params.id]?.mode === GridRowModes.Edit) {
-                  actions.push(
-                    <GridActionsCellItem
-                      icon={<Icons.SaveIcon />}
-                      label="Save"
-                      onClick={() => handleSaveClick(params)}
-                    />,
-                  );
-                } else {
-                  actions.push(
-                    <GridActionsCellItem
-                      icon={<Icons.EditIcon />}
-                      label="Edit"
-                      onClick={() => handleEditClick(params)}
-                      color="inherit"
-                    />,
-                  );
-                }
-              }
-
-              if (deleteVisibilityArray.includes(params.row.id)) {
-                actions.push(
-                  <GridActionsCellItem
-                    icon={<Icons.DeleteIcon />}
-                    label="Delete"
-                    onClick={() => handleDeleteClick(params)}
-                    color="inherit"
-                  />,
-                );
-              }
-              return actions;
-            },
-          } as GridColDef,
-        ]}
-        slots={{
-          footer: (footerProps) => (
-            <EditFooter
-              fields={props.columns.map((column) => column.field)}
-              setRows={props.onChange}
-              setRowModesModel={setRowModesModel}
-            />
-          ),
-        }}
-      />
-    </>
-  );
-};
-
-interface EditFooterProps {
-  setRows: (
-    newRows: (oldRows: GridValidRowModel[]) => GridValidRowModel[],
-  ) => void;
-  setRowModesModel: (
-    newModel: (oldModel: GridRowModesModel) => GridRowModesModel,
-  ) => void;
-  fields: string[];
-}
-
-const EditFooter = (props: EditFooterProps) => {
-  const { setRows, setRowModesModel, fields } = props;
-  const id = useRef(v4()).current;
-  const handleClick = () => {
-    setRows((oldRows) => [
-      ...oldRows,
-      {
-        id,
-        isNew: true,
-        ...Object.fromEntries(fields.map((field) => [field, ''])),
-      },
-    ]);
-    setRowModesModel((oldModel) => ({
-      ...oldModel,
-      [id]: { mode: GridRowModes.Edit, fieldToFocus: 'name' },
-    }));
-  };
-
-  return (
-    <GridToolbarContainer sx={{ margin: '10px 0px' }}>
-      <Button onClick={handleClick}>+ Add Row</Button>
-    </GridToolbarContainer>
-  );
-};

package/src/components/DataDisplay/EmptyIllustration/EmptyIllustration.tsx

@@ -1,40 +0,0 @@
-import { Box, styled, SxProps, TypographyOwnProps } from '@mui/material';
-import { Svgs } from '../../../assets/images/svg';
-
-import { Typography } from '../export';
-
-export const CenterBox = styled(Box)(({ theme }) => ({
-  width: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-}));
-
-export const EmptyIllustration = ({
-  message,
-  imageSize = '250px',
-  messageProps,
-  containerProps,
-}: {
-  message: string;
-  imageSize?: string;
-  messageProps?: TypographyOwnProps;
-  containerProps?: SxProps;
-}) => {
-  return (
-    <>
-      <CenterBox sx={containerProps}>
-        <img
-          src={Svgs.emptyImage}
-          alt="no-items"
-          width={imageSize}
-          style={{ margin: '20px' }}
-        />
-        <Typography variant="subtitle2" {...messageProps}>
-          {message}
-        </Typography>
-      </CenterBox>
-    </>
-  );
-};

package/src/components/DataDisplay/SidePanel/SidePanel.tsx

@@ -1,81 +0,0 @@
-import { SxProps, Typography } from '@mui/material';
-import { Fragment, ReactNode } from 'react';
-import Image from '../../Image/Image';
-import {
-  StyledSidePanelContainer,
-  StyledTextContainer,
-  StyledTypography,
-  StyledValueContainer,
-} from './styles';
-
-export interface SidePanelProps {
-  variables?: { label: string; value: string }[];
-  bottomChildren?: ReactNode;
-  containerSx?: SxProps;
-  variablesContainerSX?: SxProps;
-  imageUrl?: string;
-  imageWidth?: string;
-  imageHeight?: string;
-  title?: ReactNode;
-}
-interface variablesProps {
-  data?: { label: string; value: string }[];
-  variablesContainerSX?: SxProps;
-}
-export const SidePanelVariables = ({
-  data,
-  variablesContainerSX,
-}: variablesProps) => {
-  return (
-    <>
-      {data?.map((item, index) => (
-        <Fragment key={index}>
-          <StyledValueContainer key={index} sx={variablesContainerSX}>
-            <Typography variant="label1">{item.label}</Typography>
-            <Typography variant="body2" sx={{ textAlign: 'right' }}>
-              {item.value}
-            </Typography>
-          </StyledValueContainer>
-        </Fragment>
-      ))}
-    </>
-  );
-};
-
-export const SidePanel = ({
-  variables,
-  bottomChildren,
-  containerSx,
-  variablesContainerSX,
-  imageUrl,
-  imageHeight = '100%',
-  imageWidth = '100%',
-  title = 'Default Title',
-}: SidePanelProps) => {
-  return (
-    <>
-      <StyledSidePanelContainer sx={containerSx}>
-        {imageUrl ? (
-          <Image
-            radius={'4px'}
-            src={imageUrl || ''}
-            alt="Image"
-            width={imageWidth}
-            height={imageHeight}
-          />
-        ) : (
-          <StyledTextContainer>
-            <StyledTypography variant="subtitle1">{title}</StyledTypography>
-          </StyledTextContainer>
-        )}
-
-        <SidePanelVariables
-          data={variables}
-          variablesContainerSX={variablesContainerSX}
-        />
-
-        {bottomChildren}
-      </StyledSidePanelContainer>
-    </>
-  );
-};