@campxdev/react-blueprint 1.5.9 → 1.6.1

package/package.json

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

package/src/components/Assets/Icons/IconComponents/RightIcon.tsx

@@ -26,9 +26,9 @@ export const RightIcon = ({ size = 16 }) => {
             d="M0,5.363,2.682,2.682,0,0"
             transform="translate(8.045)"
             fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
           />
           <path
             id="Vector-2"
@@ -36,9 +36,9 @@ export const RightIcon = ({ size = 16 }) => {
             d="M0,0H10.653"
             transform="translate(0 2.682)"
             fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
           />
         </g>
         <path
@@ -47,9 +47,9 @@ export const RightIcon = ({ size = 16 }) => {
           d="M0,16.76A8.015,8.015,0,0,0,8.38,8.38,8.015,8.015,0,0,0,0,0"
           transform="translate(12.246 3.62)"
           fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
         />
         <path
           id="Vector-4"

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

@@ -160,6 +160,7 @@ export const Card = ({
           <StyledButton
             variant="text"
             onClick={handleClick}
+            sx={footer.buttonProps}
             endIcon={footer?.endIcon ?? <ChevronRight />}
           >
             {footer?.buttonText ?? 'View'}

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

@@ -16,12 +16,7 @@ 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;

package/src/components/Input/FormActions/FormActions.tsx

@@ -40,11 +40,10 @@ function FormActions({
   return (
     <Stack
       direction="row"
-      padding={2}
-      gap={2.5}
       borderTop={
         showTopBorder ? `1px solid ${theme.palette.border.primary}` : 'none'
       }
+      sx={{ p: '12px 16px' }}
       {...stackProps}
     >
       {defaultSubmitProps.show && (

package/src/components/Input/FormControlWrapper/FormControlWrapper.tsx

@@ -1,10 +1,11 @@
+import { Stack } from '@mui/material';
 import { TextFieldProps } from '@mui/material/TextField';
 import React, { ReactElement, ReactNode, isValidElement } from 'react';
-import { Control, Controller } from 'react-hook-form';
+import { Control, Controller, FieldValues, Path } from 'react-hook-form';
 import FormActions, { FormActionsProps } from '../FormActions/FormActions';
 
-interface FormControlWrapperProps {
-  control: Control<any>;
+interface FormControlWrapperProps<T extends FieldValues = FieldValues> {
+  control: Control<T>;
   children: ReactNode;
   formActionProps?: FormActionsProps;
 }
@@ -14,19 +15,19 @@ type FormElementProps = {
   loading?: boolean;
 } & TextFieldProps;
 
-type ControlledElementProps = {
-  name: string;
+type ControlledElementProps<T extends FieldValues = FieldValues> = {
+  name: Path<T>;
   error?: boolean;
   helperText?: ReactNode;
   children?: ReactNode;
   [key: string]: any;
 } & TextFieldProps;
 
-export function FormControlWrapper({
+export function FormControlWrapper<T extends FieldValues = FieldValues>({
   control,
   children,
   formActionProps,
-}: FormControlWrapperProps) {
+}: FormControlWrapperProps<T>) {
   const wrapWithController = (
     element: ReactElement<any>,
   ): ReactElement<any> => {
@@ -36,7 +37,7 @@ export function FormControlWrapper({
       name,
       children: childElements,
       ...restProps
-    } = element.props as ControlledElementProps;
+    } = element.props as ControlledElementProps<T>;
 
     if (name) {
       return (
@@ -77,8 +78,9 @@ export function FormControlWrapper({
 
   return (
     <>
-      {React.Children.map(children as any, wrapWithController) || null}
-
+      <Stack sx={{ m: '8px' }}>
+        {React.Children.map(children as any, wrapWithController) || null}
+      </Stack>
       {formActionProps && <FormActions {...formActionProps} showTopBorder />}
     </>
   );

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

@@ -50,7 +50,7 @@ export type SingleSelectProps = {
     isFloat?: boolean;
   };
   dbLabelProps?: { labelKey: string; subLabelKey?: string };
-  onChange: (value: any) => void;
+  onChange?: (value: any) => void;
   error?: any;
   helperText?: string;
 } & Omit<
@@ -423,6 +423,11 @@ export const SingleSelect = ({
       />
     );
   }
+
+  if (!onChange) {
+    return <Typography>onChange Missing</Typography>;
+  }
+
   return (
     <MuiAutocomplete
       {...restProps}

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

@@ -66,7 +66,7 @@ export const AppHeader = ({
         </Button>
         <UserBox
           fullName={userFullName}
-          actions={[]}
+          actions={actions}
           institutionsData={institutionsData}
           profileSx={profileSx}
           designation={designation}

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

@@ -1,10 +1,9 @@
 import { Avatar, Box, Stack, Typography, useTheme } from '@mui/material';
 import { ReactNode } from 'react';
-import DialogButton from '../../../Navigation/DialogButton/DialogButton';
 import { DropdownMenu } from '../../../Navigation/DropDownMenu/DropDownMenu';
 import { DropdownMenuItem } from '../../../Navigation/DropDownMenu/DropdownMenuItem';
 import { StyledMenuItem } from '../../../Navigation/DropDownMenu/styles';
-import { Icons } from '../../../export';
+import { DialogButton, Icons } from '../../../export';
 import SwitchInstitution from './SwitchInstitution';
 
 const getStartingLetters = (text: string) => {
@@ -23,6 +22,7 @@ export default function UserBox({
   profileUrl,
   profileSx = {},
   institutionsData,
+  changePassword,
   avatar = true, // Make avatar optional, default to true
   navigationIcon = true, // Make navigationIcon optional, default to true
   showActiveDevices = true, // Make active devices optional, default to true
@@ -30,13 +30,10 @@ export default function UserBox({
   fullName: string;
   designation?: string;
   institutionsData?: any[];
-  actions: {
-    label: ReactNode;
-    icon?: ReactNode;
-    onClick: any;
-  }[];
+  actions: ReactNode[];
   onLogoutClick?: any;
   profileUrl?: string;
+  changePassword?: ReactNode;
   profileSx?: any;
   avatar?: boolean; // Define avatar as optional
   navigationIcon?: boolean; // Define navigationIcon as optional
@@ -122,6 +119,7 @@ export default function UserBox({
             />
           </Box>,
 
+          actions.map((action) => action),
           <DropdownMenuItem
             label={
               <Stack

package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -30,7 +30,7 @@ export const Breadcrumbs = ({ pathTrimCount, ...rest }: BreadcrumbsProps) => {
         {currentPathArray?.map((item, index) => {
           basePath = basePath + `/${item}`;
           return index === currentPathArray.length - 1 ? (
-            <Typography variant="subtitle2">
+            <Typography key={index} variant="subtitle2">
               {_.startCase(decodeURIComponent(item).split(specialCharacter)[0])}
             </Typography>
           ) : (

package/src/components/Navigation/DialogButton/DialogButton.tsx

@@ -18,12 +18,12 @@ export type DialogButtonProps = {
   onDialogClose?: () => void;
 } & Omit<DialogProps, 'open' | 'onClose'>;
 
-export default function DialogButton({
+export const DialogButton = ({
   onDialogClose,
   onDialogOpen,
   anchor,
   ...props
-}: DialogButtonProps) {
+}: DialogButtonProps) => {
   const [open, setOpen] = useState(false);
 
   const onClose = () => {
@@ -49,4 +49,4 @@ export default function DialogButton({
       />
     </>
   );
-}
+};

package/src/stories/Navigation/DialogButton.stories.tsx

@@ -1,6 +1,7 @@
 import { Box, Button, Typography } from '@mui/material';
 import { Meta, StoryObj } from '@storybook/react/*';
-import DialogButton, {
+import {
+  DialogButton,
   DialogButtonProps,
 } from '../../components/Navigation/DialogButton/DialogButton';
 

package/src/themes/commonTheme.ts

@@ -148,7 +148,6 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           root: {
             padding: '0px',
-            margin: '16px',
           },
         },
       },
@@ -263,6 +262,7 @@ export const getCommonTheme = (mode: Theme) => {
           root: {
             textTransform: 'none',
             padding: '10px 20px ',
+            minWidth: '120px ',
             maxHeight: '40px ',
             borderRadius: '5px ',
             boxShadow: 'none ',