@campxdev/react-blueprint 1.2.15 → 1.2.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.2.15",
+  "version": "1.2.17",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/components/Charts/BarChart/BarChart.tsx

@@ -142,7 +142,10 @@ export const BarChart = ({
               type="category"
               dataKey={dataKey}
               stroke={theme.palette.border.primary}
-              tick={{ fill: theme.palette.text.tertiary }}
+              tick={{
+                fill: theme.palette.text.tertiary,
+                ...baseAxisProps?.xAxis?.tick,
+              }}
               angle={baseAxisProps?.xAxis?.angle}
               tickMargin={baseAxisProps?.xAxis?.tickMargin}
             >
@@ -155,7 +158,10 @@ export const BarChart = ({
             <YAxis
               type="number"
               stroke={theme.palette.border.primary}
-              tick={{ fill: theme.palette.text.tertiary }}
+              tick={{
+                fill: theme.palette.text.tertiary,
+                ...baseAxisProps?.yAxis?.tick,
+              }}
               tickMargin={baseAxisProps?.yAxis?.tickMargin}
               domain={domain}
             >
@@ -176,7 +182,10 @@ export const BarChart = ({
             <XAxis
               type="number"
               stroke={theme.palette.border.primary}
-              tick={{ fill: theme.palette.text.tertiary }}
+              tick={{
+                fill: theme.palette.text.tertiary,
+                ...baseAxisProps?.xAxis?.tick,
+              }}
               angle={baseAxisProps?.xAxis?.angle}
               tickMargin={baseAxisProps?.xAxis?.tickMargin}
             >
@@ -190,7 +199,10 @@ export const BarChart = ({
               dataKey={dataKey}
               type="category"
               stroke={theme.palette.border.primary}
-              tick={{ fill: theme.palette.text.tertiary }}
+              tick={{
+                fill: theme.palette.text.tertiary,
+                ...baseAxisProps?.yAxis?.tick,
+              }}
               tickMargin={baseAxisProps?.yAxis?.tickMargin}
             >
               {yLabel && (

package/src/components/Charts/LineChart/LineChart.tsx

@@ -12,9 +12,11 @@ import {
 } from 'recharts';
 import {
   AxisLabelProps,
+  BaseAxisProps,
   CartesianGridProps,
   LegendProps,
   MarginProps,
+  SubTitleProps,
   TitleProps,
 } from '../types/types';
 import { CurveType } from 'recharts/types/shape/Curve';
@@ -22,7 +24,10 @@ import { Typography } from '../../export';
 
 export type LineChartProps = {
   title?: string;
+  showSubtitle?: boolean;
+  subTitle?: string;
   titleProps?: TitleProps;
+  subTitleProps?: SubTitleProps;
   width?: number;
   height?: number;
   dataKey: string;
@@ -32,6 +37,7 @@ export type LineChartProps = {
   showLegend?: boolean;
   cartesianGrid?: CartesianGridProps;
   axisLabelProps?: AxisLabelProps;
+  baseAxisProps?: BaseAxisProps;
   legendSx?: LegendProps;
   containerSx?: SxProps;
   margin?: MarginProps;
@@ -46,6 +52,9 @@ type LineItem = {
 
 export const LineChart = ({
   title = 'Line Chart',
+  showSubtitle = false,
+  subTitle = '',
+  subTitleProps = { variant: 'caption' },
   titleProps = { variant: 'subtitle2' },
   width = 700,
   height = 500,
@@ -57,6 +66,7 @@ export const LineChart = ({
   showLegend = true,
   cartesianGrid = { showCartesianGrid: false },
   axisLabelProps,
+  baseAxisProps,
   legendSx,
   containerSx,
 }: LineChartProps) => {
@@ -73,6 +83,15 @@ export const LineChart = ({
       >
         {title}
       </Typography>
+      {showSubtitle && (
+        <Typography
+          variant={subTitleProps.variant}
+          align={'center'}
+          sx={subTitleProps.sx}
+        >
+          {title}
+        </Typography>
+      )}
       <ReLineChart width={width} height={height} margin={margin} data={data}>
         {showCartesianGrid && (
           <CartesianGrid strokeDasharray={`${size} ${size}`} />
@@ -98,7 +117,12 @@ export const LineChart = ({
           type="category"
           dataKey={dataKey}
           stroke={theme.palette.border.primary}
-          tick={{ fill: theme.palette.text.tertiary }}
+          tick={{
+            fill: theme.palette.text.tertiary,
+            ...baseAxisProps?.xAxis?.tick,
+          }}
+          angle={baseAxisProps?.xAxis?.angle}
+          tickMargin={baseAxisProps?.xAxis?.tickMargin}
         >
           <Label
             {...xLabel}
@@ -109,7 +133,11 @@ export const LineChart = ({
         <YAxis
           type="number"
           stroke={theme.palette.border.primary}
-          tick={{ fill: theme.palette.text.tertiary }}
+          tick={{
+            fill: theme.palette.text.tertiary,
+            ...baseAxisProps?.yAxis?.tick,
+          }}
+          tickMargin={baseAxisProps?.yAxis?.tickMargin}
         >
           {yLabel && (
             <Label

package/src/components/Charts/PieChart/PieChart.tsx

@@ -1,11 +1,19 @@
 import { Stack, SxProps, useTheme } from '@mui/material';
 import { Cell, Legend, Pie, PieChart as RePieChart, Tooltip } from 'recharts';
-import { LegendProps, MarginProps, TitleProps } from '../types/types';
+import {
+  LegendProps,
+  MarginProps,
+  SubTitleProps,
+  TitleProps,
+} from '../types/types';
 import { Typography } from '../../export';
 
 export type PieChartProps = {
   title?: string;
+  showSubtitle?: boolean;
+  subTitle?: string;
   titleProps?: TitleProps;
+  subTitleProps?: SubTitleProps;
   margin?: MarginProps;
   width?: number;
   height?: number;
@@ -31,6 +39,9 @@ type PieProps = {
 
 export const PieChart = ({
   title = 'Pie Chart',
+  showSubtitle = false,
+  subTitle = '',
+  subTitleProps = { variant: 'caption' },
   titleProps = { variant: 'subtitle2' },
   margin,
   width = 500,
@@ -53,6 +64,15 @@ export const PieChart = ({
       >
         {title}
       </Typography>
+      {showSubtitle && (
+        <Typography
+          variant={subTitleProps.variant}
+          align={'center'}
+          sx={subTitleProps.sx}
+        >
+          {title}
+        </Typography>
+      )}
       <RePieChart width={width} height={height} margin={margin}>
         {showToolTip && (
           <Tooltip

package/src/components/Charts/TreeMap/TreeMap.tsx

@@ -1,12 +1,15 @@
 import { Box, Stack, styled, SxProps, useTheme } from '@mui/material';
 import { Treemap as ReTreeMap, Tooltip } from 'recharts';
 import { AnimationTiming } from 'recharts/types/util/types';
-import { MarginProps, TitleProps } from '../types/types';
+import { MarginProps, SubTitleProps, TitleProps } from '../types/types';
 import { Typography } from '../../export';
 
 interface TreeMapProps {
   title?: string;
+  showSubtitle?: boolean;
+  subTitle?: string;
   titleProps?: TitleProps;
+  subTitleProps?: SubTitleProps;
   data: any;
   dataKey: string | number;
   width?: number;
@@ -26,6 +29,9 @@ interface TreeMapProps {
 const TreeMap = ({
   title = 'Tree Map',
   titleProps = { variant: 'subtitle2' },
+  showSubtitle = false,
+  subTitle = '',
+  subTitleProps = { variant: 'caption' },
   data,
   dataKey,
   width = 400,
@@ -49,6 +55,15 @@ const TreeMap = ({
       >
         {title}
       </Typography>
+      {showSubtitle && (
+        <Typography
+          variant={subTitleProps.variant}
+          align={'center'}
+          sx={subTitleProps.sx}
+        >
+          {title}
+        </Typography>
+      )}
       <ReTreeMap
         data={data}
         dataKey={dataKey}

package/src/components/Charts/types/types.ts

@@ -49,6 +49,7 @@ export type BaseAxisProps = {
 export type TickProps = {
   angle?: number;
   tickMargin?: number;
+  tick?: any;
 };
 
 export type LegendProps = {

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

@@ -9,7 +9,7 @@ import {
 } from '@mui/material';
 import { Variant } from '@mui/material/styles/createTypography';
 import { ReactNode } from 'react';
-import { DropDownIcon, DropdownMenu } from '../../export';
+import { DropDownIcon, DropdownMenu, Switch, SwitchProps } from '../../export';
 import {
   StyledButton,
   StyledCardActions,
@@ -46,6 +46,8 @@ export interface CardProps {
   imageSrc?: string;
   titleImgIcon?: ReactNode;
   checkBox?: boolean;
+  hasSwitch?: boolean;
+  switchProps?: SwitchProps;
   moreOptions?: boolean;
   menu?: Array<ReactNode>;
   icon?: ReactNode;
@@ -76,6 +78,8 @@ export const Card = ({
   icon,
   children,
   menu = [],
+  switchProps,
+  hasSwitch,
 }: CardProps) => {
   const handleClick = (e: any) => {
     footer?.onClick();
@@ -106,6 +110,7 @@ export const Card = ({
           </Stack>
         </Stack>
         <Stack flexDirection={'row'} gap={'12px'} alignItems={'center'}>
+          {hasSwitch && <Switch {...switchProps} />}
           {status && (
             <StyledStatusText variant="label2" sx={statusSx}>
               {status}{' '}

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

@@ -27,6 +27,7 @@ export const DataTable = (props: DataTableProps) => {
         getRowId={(row) => row.id ?? v4()}
         {...props}
         slots={{
+          ...props.slots,
           pagination: () => {
             if (
               limit === undefined ||

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

@@ -0,0 +1,209 @@
+import { Button } 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 = {
+  limit?: number;
+  offset?: number;
+  totalCount?: number;
+  hideDelete?: boolean;
+  onPageChange?: (page: number) => void;
+  onLimitChange?: (limit: number) => void;
+  onChange: (rows: GridValidRowModel) => void;
+  onSave?: (params: any) => void;
+  onDelete?: (params: any) => void;
+} & 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 { 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) ?? []);
+  };
+
+  return (
+    <>
+      <DataTable
+        editMode="row"
+        onRowModesModelChange={handleRowModesModelChange}
+        onRowEditStop={handleRowEditStop}
+        processRowUpdate={processRowUpdate}
+        rowModesModel={rowModesModel}
+        {...props}
+        rows={rows}
+        columns={[
+          ...columns,
+          {
+            field: 'actions',
+            type: 'actions',
+            headerName: 'Actions',
+            width: 150,
+            cellClassName: 'actions',
+            getActions: (params) => {
+              if (rowModesModel[params.id]?.mode === GridRowModes.Edit) {
+                return props.hideDelete
+                  ? [
+                      <GridActionsCellItem
+                        icon={<Icons.SaveIcon />}
+                        label="Save"
+                        onClick={() => handleSaveClick(params)}
+                      />,
+                    ]
+                  : [
+                      <GridActionsCellItem
+                        icon={<Icons.SaveIcon />}
+                        label="Save"
+                        onClick={() => handleSaveClick(params)}
+                      />,
+                      <GridActionsCellItem
+                        icon={<Icons.DeleteIcon />}
+                        label="Cancel"
+                        onClick={() => handleDeleteClick(params)}
+                        color="inherit"
+                      />,
+                    ];
+              }
+
+              return props.hideDelete
+                ? [
+                    <GridActionsCellItem
+                      icon={<Icons.EditIcon />}
+                      label="Edit"
+                      onClick={() => handleEditClick(params)}
+                      color="inherit"
+                    />,
+                  ]
+                : [
+                    <GridActionsCellItem
+                      icon={<Icons.EditIcon />}
+                      label="Edit"
+                      onClick={() => handleEditClick(params)}
+                      color="inherit"
+                    />,
+                    <GridActionsCellItem
+                      icon={<Icons.DeleteIcon />}
+                      label="Delete"
+                      onClick={() => handleDeleteClick(params)}
+                      color="inherit"
+                    />,
+                  ];
+            },
+          } 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/export.ts

@@ -3,5 +3,6 @@ export * from './Avatar/Avatar';
 export * from './Card/Card';
 export * from './Chips/Chips';
 export * from './DataTable/DataTable';
+export * from './EditableDataTable/EditableDataTable';
 export * from './SidePanel/SidePanel';
 export * from './Typography/Typography';

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

@@ -1,6 +1,7 @@
 import { axios as campxAxios } from '@campxdev/campx-web-utils';
 import {
-  BaseSelectProps,
+  AutocompleteCloseReason,
+  AutocompleteProps,
   Box,
   Autocomplete as MuiAutocomplete,
   Paper,
@@ -8,7 +9,7 @@ import {
 } from '@mui/material';
 import axios from 'axios';
 import _ from 'lodash';
-import { useEffect, useReducer } from 'react';
+import { SyntheticEvent, useEffect, useReducer } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Spinner } from '../../Feedback/Spinner/Spinner';
 import { TextField } from '../TextField/TextField';
@@ -26,16 +27,31 @@ function sleep(duration: number): Promise<void> {
 export type SingleSelectProps = {
   options?: { label: string; subLabel?: string; value: any }[] | any[];
   optionsApiEndPoint?: string;
+  optionsApiEndpointParams?: any;
   useCampxAxios?: boolean;
   required?: boolean;
   label?: string;
   name?: string;
-  value?: any;
   getValue?: (option: any) => any;
   onChange: (value: any) => void;
   error?: any;
   helperText?: string;
-} & BaseSelectProps;
+} & Omit<
+  AutocompleteProps<
+    { label: string; subLabel?: string; value: any } | any,
+    false,
+    false,
+    false
+  >,
+  | 'options'
+  | 'open'
+  | 'onChange'
+  | 'autoFocus'
+  | 'PaperComponent'
+  | 'renderOption'
+  | 'options'
+  | 'renderInput'
+>;
 
 const CustomPaper = (props: PaperProps) => (
   <Paper
@@ -126,6 +142,7 @@ const singleSelectReducer = (
 export const SingleSelect = ({
   options,
   optionsApiEndPoint,
+  optionsApiEndpointParams,
   useCampxAxios = true,
   required = false,
   label,
@@ -135,6 +152,8 @@ export const SingleSelect = ({
   onChange,
   error,
   helperText,
+  onOpen,
+  onClose,
   ...restProps
 }: SingleSelectProps) => {
   const generateOptionsMap = (options: any[]) => {
@@ -163,7 +182,7 @@ export const SingleSelect = ({
 
   const internalAxios = useCampxAxios ? campxAxios : axios;
 
-  const handleOpen = async () => {
+  const handleOpen = async (event: SyntheticEvent) => {
     dispatch({
       actionType: SingleSelectActionsTypes.OPEN,
     });
@@ -177,6 +196,7 @@ export const SingleSelect = ({
             params: {
               limit,
               offset,
+              ...optionsApiEndpointParams,
             },
           })
           .then((res) => res.data);
@@ -200,6 +220,21 @@ export const SingleSelect = ({
         });
       }
     }
+    if (onOpen) {
+      onOpen(event);
+    }
+  };
+
+  const handleClose = (
+    event: SyntheticEvent,
+    reason: AutocompleteCloseReason,
+  ) => {
+    dispatch({
+      actionType: SingleSelectActionsTypes.CLOSE,
+    });
+    if (onClose) {
+      onClose(event, reason);
+    }
   };
 
   const handleScroll = async (event: any) => {
@@ -288,22 +323,13 @@ export const SingleSelect = ({
   }
   return (
     <MuiAutocomplete
+      {...restProps}
       onChange={(e, value) => {
         onChange(getValue ? getValue(value) : value?.value);
       }}
       open={open}
       autoFocus={true}
       value={state.internalOptionsMap[value]}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          label={label}
-          required={required}
-          name={name}
-          error={error}
-          helperText={helperText}
-        />
-      )}
       PaperComponent={CustomPaper}
       renderOption={(props, option: any) => {
         return (
@@ -316,20 +342,29 @@ export const SingleSelect = ({
         );
       }}
       ListboxProps={{
+        ...restProps.ListboxProps,
         onScroll: handleScroll,
       }}
       slotProps={{
+        ...restProps.slotProps,
         paper: {
+          ...restProps.slotProps?.paper,
           square: loadingInternalOptions,
         },
       }}
       onOpen={handleOpen}
-      onClose={() => {
-        dispatch({
-          actionType: SingleSelectActionsTypes.CLOSE,
-        });
-      }}
+      onClose={handleClose}
       options={internalOptions}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label={label}
+          required={required}
+          name={name}
+          error={error}
+          helperText={helperText}
+        />
+      )}
     />
   );
 };

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -4,6 +4,8 @@ import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../../export';
 import UserBox from './AppHeaderActions/UserBox';
 import { StyledHeader } from './styles/styles';
+import { StyledIconButton } from '../../Navigation/DropDownMenu/styles';
+import { HelpIcon } from '../../Assets/Icons/IconComponents/HelpIcon';
 
 export interface AppHeaderProps {
   actions?: ReactNode[];
@@ -35,10 +37,10 @@ export const AppHeader = ({
       <Stack alignItems={'center'} gap={'12px'} flexDirection={'row'}>
         {/* <StyledIconButton>
           <a
-            href={"https://campx.atlassian.net/servicedesk/customer/portal/2"}
+            href={'https://helpdesk.campx.in/helpdesk/my-tickets'}
             target="_blank"
             rel="noreferrer"
-            style={{ textDecoration: "none" }}
+            style={{ textDecoration: 'none' }}
           >
             <HelpIcon size={20} />
           </a>
@@ -47,6 +49,12 @@ export const AppHeader = ({
           variant="outlined"
           id="jiraIssueCollector"
           className="reportAnIssue"
+          onClick={() => {
+            window.open(
+              'https://helpdesk.campx.in/helpdesk/my-tickets',
+              '_blank',
+            );
+          }}
         >
           <Typography
             variant="button"