@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.1

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

@@ -1,257 +0,0 @@
-import {
-  Box,
-  Pagination as MuiPagination,
-  PaginationProps as MuiPaginationProps,
-  Stack,
-  styled,
-  TextField,
-} from '@mui/material';
-import React, { useEffect, useRef, useState } from 'react';
-import { Icons } from '../../export';
-import { DropDownButton } from '../../Navigation/DropDownMenu/DropDownButton';
-import { DropdownMenu } from '../../Navigation/DropDownMenu/DropDownMenu';
-import { DropdownMenuItem } from '../../Navigation/DropDownMenu/DropdownMenuItem';
-import { StyledDivider } from '../Card/styles';
-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,
-}));
-
-const PageNavigationContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  height: '32px',
-  width: '80px',
-  border: `1px solid ${theme.palette.divider}`,
-  borderRadius: '6px',
-  backgroundColor: theme.palette.surface.grey,
-}));
-
-const PageInput = styled(TextField)(({ theme }) => ({
-  width: '52px',
-  minWidth: '52px',
-  '& .MuiInputBase-root': {
-    fontSize: '14px',
-    padding: 0,
-    width: '52px',
-    border: 'none',
-    '& input': {
-      padding: '4px 8px',
-      textAlign: 'left',
-      minWidth: '32px',
-      border: 'none',
-      outline: 'none',
-    },
-    '& fieldset': {
-      border: 'none',
-    },
-  },
-}));
-
-export const TablePagination = (props: PaginationProps) => {
-  const { limit, offset, totalCount, onPageChange, onLimitChange, rowCount } =
-    props;
-
-  const currentPage = Math.ceil(offset / limit) + 1;
-  const totalPages = Math.ceil(totalCount / limit);
-  const [pageInputValue, setPageInputValue] = useState(currentPage.toString());
-
-  // Add ref for the input field
-  const pageInputRef = useRef<HTMLInputElement>(null);
-
-  const getPaginationText = () => {
-    if (rowCount == 0) return 'No records';
-    return `Showing ${offset + 1} - ${offset + rowCount} rows of ${totalCount}`;
-  };
-
-  const handlePageInputChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    setPageInputValue(event.target.value);
-  };
-
-  const handlePageInputSubmit = () => {
-    const pageNumber = parseInt(pageInputValue);
-    if (pageNumber >= 1 && pageNumber <= totalPages) {
-      onPageChange((pageNumber - 1) * limit);
-    } else {
-      // Reset to current page if invalid
-      setPageInputValue(currentPage.toString());
-    }
-  };
-
-  const handlePageInputKeyPress = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      handlePageInputSubmit();
-    } else if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      const currentValue = parseInt(pageInputValue) || 1;
-      if (currentValue < totalPages) {
-        setPageInputValue((currentValue + 1).toString());
-      }
-    } else if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      const currentValue = parseInt(pageInputValue) || 1;
-      if (currentValue > 1) {
-        setPageInputValue((currentValue - 1).toString());
-      }
-    }
-  };
-
-  const handlePageInputBlur = () => {
-    handlePageInputSubmit();
-  };
-
-  const handleUpArrow = () => {
-    const currentValue = parseInt(pageInputValue) || 1;
-    if (currentValue < totalPages) {
-      setPageInputValue((currentValue + 1).toString());
-      // Focus the input field after changing the value
-      pageInputRef.current?.focus();
-    }
-  };
-
-  const handleDownArrow = () => {
-    const currentValue = parseInt(pageInputValue) || 1;
-    if (currentValue > 1) {
-      setPageInputValue((currentValue - 1).toString());
-      // Focus the input field after changing the value
-      pageInputRef.current?.focus();
-    }
-  };
-
-  // Add global keydown listener to handle Enter key from anywhere in the component
-  useEffect(() => {
-    const handleGlobalKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === 'Enter' &&
-        document.activeElement !== pageInputRef.current
-      ) {
-        // Check if focus is on the arrow buttons or nearby elements
-        const activeElement = document.activeElement as HTMLElement;
-        if (activeElement && activeElement.closest('.pagination-container')) {
-          handlePageInputSubmit();
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleGlobalKeyDown);
-    return () => document.removeEventListener('keydown', handleGlobalKeyDown);
-  }, [pageInputValue, totalPages, limit, onPageChange]);
-
-  // Update input value when currentPage changes externally
-  useEffect(() => {
-    setPageInputValue(currentPage.toString());
-  }, [currentPage]);
-
-  return (
-    <TablePaginationContainer direction="row" className="pagination-container">
-      <Typography variant="caption">{getPaginationText()}</Typography>
-
-      <MuiPagination
-        {...props}
-        variant="outlined"
-        shape="rounded"
-        onChange={(e, v) => onPageChange((Number(v) - 1) * limit)}
-      />
-
-      <Box sx={{ display: 'flex', gap: '24px' }}>
-        <Stack direction="row" alignItems="center" spacing={1}>
-          <Typography variant="caption">Page</Typography>
-          <PageNavigationContainer>
-            <PageInput
-              inputRef={pageInputRef}
-              value={pageInputValue}
-              onChange={handlePageInputChange}
-              onKeyPress={handlePageInputKeyPress}
-              onBlur={handlePageInputBlur}
-              size="small"
-              variant="outlined"
-            />
-            <StyledDivider flexItem />
-            <Stack gap={'1.5px'} width={'30%'} alignItems="center">
-              <Icons.UpArrow
-                size={10}
-                onClick={handleUpArrow}
-                disabled={parseInt(pageInputValue) >= totalPages}
-              />
-              <StyledDivider flexItem orientation="horizontal" />
-              <Icons.DownArrow
-                size={10}
-                onClick={handleDownArrow}
-                disabled={parseInt(pageInputValue) <= 1}
-              />
-            </Stack>
-          </PageNavigationContainer>
-          <Typography variant="caption">of {totalPages}</Typography>
-        </Stack>
-
-        <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
-              key="10"
-              label="10 / Page"
-              onClick={() => onLimitChange(Number(10))}
-            />,
-            <DropdownMenuItem
-              key="20"
-              label="20 / Page"
-              onClick={() => onLimitChange(Number(20))}
-            />,
-            <DropdownMenuItem
-              key="50"
-              label="50 / Page"
-              onClick={() => onLimitChange(Number(50))}
-            />,
-            <DropdownMenuItem
-              key="100"
-              label="100 / Page"
-              onClick={() => onLimitChange(Number(100))}
-            />,
-            <DropdownMenuItem
-              key="200"
-              label="200 / Page"
-              onClick={() => onLimitChange(Number(200))}
-            />,
-          ]}
-        />
-      </Box>
-    </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/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>
-    </>
-  );
-};

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

@@ -1,31 +0,0 @@
-import { Box, Stack, styled, Typography } from '@mui/material';
-
-export const StyledSidePanelContainer = styled(Stack)(({ theme }) => ({
-  width: '300px',
-  backgroundColor: '#F7F8FA',
-  padding: '12px',
-  borderRadius: '8px',
-  gap: '12px',
-}));
-
-export const StyledValueContainer = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.surface.defaultBackground,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  width: '226px',
-  padding: '14px 12px',
-  borderRadius: '4px',
-}));
-
-export const StyledTextContainer = styled(Stack)(({ theme }) => ({
-  width: '226px',
-  height: '128px',
-  backgroundColor: theme.palette.surface.defaultBackground,
-  alignItems: 'center',
-  justifyContent: 'center',
-}));
-
-export const StyledTypography = styled(Typography)(({ theme }) => ({
-  color: theme.palette.text.tertiary,
-}));

package/src/components/Feedback/Spinner/Spinner.css

@@ -1,32 +0,0 @@
-.spinner {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 1s linear infinite;
-  scale: 0.4;
-}
-.spinner::before , .spinner::after {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0px;
-  border-radius: 50%;
-  border: 5px solid #7D60D9;
-  animation: prixClipFix 1.5s linear infinite ;
-}
-.spinner::after{
-  transform: rotate3d(90, 90, 0, 180deg );
-  border-color: #FF3D00;
-}
-
-@keyframes rotate {
-  0%   {transform: rotate(0deg)}
-  100%   {transform: rotate(360deg)}
-}
-
-@keyframes prixClipFix {
-    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-    75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-}

package/src/components/Feedback/Tooltip/ToolTipContent.tsx

@@ -1,15 +0,0 @@
-import { Stack } from '@mui/material';
-import { Icons, Typography } from '../../export';
-import { TooltipContentProps } from './Tooltip';
-
-export const ToolTipContent = ({ message }: TooltipContentProps) => {
-  return (
-    <Stack gap={1} sx={{ margin: '5px' }}>
-      <Stack direction="row" gap={1}>
-        <Icons.BulbIcon />
-        <Typography variant="subtitle3">Note:</Typography>
-      </Stack>
-      <Typography variant="caption">{message}</Typography>
-    </Stack>
-  );
-};