@campxdev/react-blueprint 1.7.16 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.7.16",
+  "version": "1.8.0",
   "main": "./export.ts",
   "dependencies": {
     "@emotion/react": "^11.13.3",

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

@@ -30,7 +30,7 @@ export const ClearIcon = ({
     >
       <path
         d="M9.52859 2.07129C9.43351 1.97624 9.26447 1.97624 9.16938 2.07129L5.9999 5.2396L2.83042 2.07129C2.73534 1.97624 2.5663 1.97624 2.47122 2.07129C2.37613 2.16634 2.37613 2.33531 2.47122 2.43036L5.64069 5.59868L2.47122 8.767C2.37613 8.86205 2.37613 9.03102 2.47122 9.12607C2.52404 9.17888 2.58743 9.2 2.65082 9.2C2.71421 9.2 2.7776 9.17888 2.83042 9.12607L5.9999 5.95776L9.16938 9.12607C9.22221 9.17888 9.2856 9.2 9.34899 9.2C9.41238 9.2 9.47576 9.17888 9.52859 9.12607C9.62367 9.03102 9.62367 8.86205 9.52859 8.767L6.35911 5.59868L9.52859 2.43036C9.62367 2.33531 9.62367 2.1769 9.52859 2.07129Z"
-        stroke-width="1"
+        strokeWidth="1"
       />
     </StyledSvg>
   );

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

@@ -25,7 +25,7 @@ export const DownArrow = ({
         stroke={theme.palette.text.primary}
         fillOpacity={disabled ? 0.5 : 1}
         strokeOpacity={disabled ? 0.5 : 1}
-        stroke-width="1"
+        strokeWidth="1"
       />
     </svg>
   );

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

@@ -28,19 +28,19 @@ export const ExportIcon = ({
           d="M15.5105 22.2501H8.99047C4.08047 22.2501 1.98047 20.1501 1.98047 15.2401V15.1101C1.98047 10.6701 3.73047 8.53009 7.65047 8.15809C7.84833 8.1444 8.04387 8.20739 8.19655 8.334C8.34922 8.4606 8.44731 8.64111 8.47047 8.83809C8.47997 8.93664 8.46988 9.03609 8.4408 9.13073C8.41172 9.22536 8.36422 9.31332 8.30102 9.38953C8.23782 9.46573 8.16018 9.5287 8.07256 9.57479C7.98494 9.62088 7.88907 9.64919 7.79047 9.65809C4.65047 9.94809 3.48047 11.4281 3.48047 15.1181V15.2481C3.48047 19.3181 4.92047 20.7581 8.99047 20.7581H15.5105C19.5805 20.7581 21.0205 19.3181 21.0205 15.2481V15.1181C21.0205 11.4081 19.8305 9.92809 16.6305 9.65809C16.5311 9.65155 16.4341 9.62524 16.345 9.58071C16.256 9.53617 16.1767 9.4743 16.1119 9.39873C16.047 9.32315 15.9979 9.2354 15.9675 9.1406C15.937 9.04581 15.9258 8.94589 15.9344 8.84669C15.9431 8.7475 15.9714 8.65103 16.0179 8.56295C16.0643 8.47486 16.1278 8.39693 16.2048 8.33373C16.2817 8.27052 16.3705 8.22332 16.4659 8.19487C16.5613 8.16643 16.6615 8.15733 16.7605 8.16809C20.7405 8.50809 22.5205 10.6581 22.5205 15.1281V15.2581C22.5205 20.1501 20.4205 22.2501 15.5105 22.2501Z"
           fill={color}
           stroke="#121212"
-          stroke-width="0.4"
+          strokeWidth="0.4"
         />
         <path
           d="M12.25 15.7501C12.0515 15.7488 11.8615 15.6694 11.7211 15.529C11.5807 15.3886 11.5013 15.1986 11.5 15.0001V3.62012C11.5013 3.42161 11.5807 3.2316 11.7211 3.09124C11.8615 2.95087 12.0515 2.87143 12.25 2.87012C12.4485 2.87143 12.6385 2.95087 12.7789 3.09124C12.9193 3.2316 12.9987 3.42161 13 3.62012V15.0001C12.9987 15.1986 12.9193 15.3886 12.7789 15.529C12.6385 15.6694 12.4485 15.7488 12.25 15.7501Z"
           fill={color}
           stroke={color}
-          stroke-width="0.4"
+          strokeWidth="0.4"
         />
         <path
           d="M15.6012 6.60012C15.5026 6.60047 15.405 6.5812 15.314 6.54343C15.223 6.50566 15.1405 6.45014 15.0712 6.38012L12.2532 3.56012L9.43317 6.38012C9.29099 6.5126 9.10295 6.58472 8.90864 6.58129C8.71434 6.57787 8.52896 6.49915 8.39155 6.36174C8.25413 6.22433 8.17542 6.03894 8.17199 5.84464C8.16856 5.65034 8.24069 5.46229 8.37317 5.32012L11.7212 1.97112C11.8623 1.83164 12.0527 1.75342 12.2512 1.75342C12.4496 1.75342 12.64 1.83164 12.7812 1.97112L16.1312 5.32112C16.2706 5.46226 16.3489 5.65269 16.3489 5.85112C16.3489 6.04955 16.2706 6.23998 16.1312 6.38112C16.0624 6.45175 15.9799 6.50759 15.8887 6.54525C15.7976 6.5829 15.6998 6.60157 15.6012 6.60012Z"
           fill={color}
           stroke={color}
-          stroke-width="0.4"
+          strokeWidth="0.4"
         />
       </svg>
     </>

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

@@ -1,5 +1,5 @@
 import { SxProps, Typography } from '@mui/material';
-import { ReactNode } from 'react';
+import { Fragment, ReactNode } from 'react';
 import Image from '../../Image/Image';
 import {
   StyledSidePanelContainer,
@@ -29,12 +29,12 @@ export const SidePanelVariables = ({
   return (
     <>
       {data?.map((item, index) => (
-        <>
+        <Fragment key={index}>
           <StyledValueContainer key={index} sx={variablesContainerSX}>
             <Typography variant="label1">{item.label}</Typography>
             <Typography variant="body2">{item.value}</Typography>
           </StyledValueContainer>
-        </>
+        </Fragment>
       ))}
     </>
   );

package/src/components/DataDisplay/Timeline/Timeline.tsx

@@ -63,7 +63,7 @@ export const Timeline = (props: TimelineProps) => {
       }
     >
       {props.timelineItems.map((item, index) => (
-        <TimelineItem>
+        <TimelineItem key={index}>
           {item.timelineOppositeContent && (
             <TimelineOppositeContent>
               {item.timelineOppositeContent}

package/src/components/Input/FileUpload/FileUpload.tsx

@@ -4,11 +4,10 @@ import {
   Stack,
   styled,
   SxProps,
-  useTheme,
   useMediaQuery,
+  useTheme,
 } from '@mui/material';
 import { IconButtons, Icons, PreviewFiles, Typography } from '../../export';
-import { alpha } from '@mui/system';
 
 export type FileUploadProps = {
   label: string;
@@ -22,6 +21,7 @@ export type FileUploadProps = {
   inputText?: string;
   multiple?: boolean;
   hideDeleteButton?: boolean;
+  hideInput?: boolean;
   errorText?: string;
   sx?: SxProps;
   showImage?: boolean;
@@ -40,6 +40,7 @@ export const FileUpload = ({
   inputText,
   onInvalidFile,
   hideDeleteButton = false,
+  hideInput = false,
   multiple = true,
   errorText,
   showImage,
@@ -81,6 +82,7 @@ export const FileUpload = ({
           onChange([validFiles[0]]);
         }
       }
+      event.target.value = ''; //Resets value after selection
     }
   };
 
@@ -93,40 +95,47 @@ export const FileUpload = ({
             {' *'}
           </span>
         )}
-      </Typography>{' '}
-      <input
-        accept={accept}
-        style={{ display: 'none' }}
-        id={name}
-        name={name}
-        type="file"
-        multiple={multiple}
-        disabled={disabled}
-        onChange={handleFileChange}
-      />
-      <FormLabel htmlFor={name}>
-        <StyledFileSelectorContainer>
-          <Stack display={'flex'} alignItems={'center'}>
-            <Icons.ExportIcon size={20} />
-            <Typography color={theme.palette.text.tertiary} variant="label2">
-              {inputText ?? 'Upload Files'}
-            </Typography>
-          </Stack>
-        </StyledFileSelectorContainer>
-        {errorText && (
-          <Typography
-            sx={{
-              display: 'flex',
-              alignItems: 'flex-end',
-              justifyContent: 'flex-end',
-              color: theme.palette.highlight.highlightRed,
-            }}
-            variant="caption"
-          >
-            {errorText}
-          </Typography>
-        )}
-      </FormLabel>
+      </Typography>
+      {!hideInput && (
+        <>
+          <input
+            accept={accept}
+            style={{ display: 'none' }}
+            id={name}
+            name={name}
+            type="file"
+            multiple={multiple}
+            disabled={disabled}
+            onChange={handleFileChange}
+          />
+          <FormLabel htmlFor={name}>
+            <StyledFileSelectorContainer>
+              <Stack display={'flex'} alignItems={'center'}>
+                <Icons.ExportIcon size={20} />
+                <Typography
+                  color={theme.palette.text.tertiary}
+                  variant="label2"
+                >
+                  {inputText ?? 'Upload Files'}
+                </Typography>
+              </Stack>
+            </StyledFileSelectorContainer>
+            {errorText && (
+              <Typography
+                sx={{
+                  display: 'flex',
+                  alignItems: 'flex-end',
+                  justifyContent: 'flex-end',
+                  color: theme.palette.highlight.highlightRed,
+                }}
+                variant="caption"
+              >
+                {errorText}
+              </Typography>
+            )}
+          </FormLabel>
+        </>
+      )}
       <Box display="flex" gap="12px" flexWrap="wrap">
         {showImage ? (
           files.map((file, index) => (
@@ -181,6 +190,7 @@ export const FileUpload = ({
               sx={previewSx}
               files={files}
               onChange={(newFiles) => onChange?.(newFiles)}
+              hideDelete={hideDeleteButton}
             />
           </Box>
         )}

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

@@ -10,6 +10,7 @@ interface FormControlWrapperProps<T extends FieldValues = FieldValues> {
   children: ReactNode;
   containerSx?: SxProps;
   formActionProps?: FormActionsProps;
+  disabled?: boolean;
 }
 
 type FormElementProps = {
@@ -32,6 +33,7 @@ export function FormControlWrapper<T extends FieldValues = FieldValues>({
   children,
   containerSx,
   formActionProps,
+  disabled = false,
 }: FormControlWrapperProps<T>) {
   const wrapWithController = (
     element: ReactElement<any>,
@@ -56,13 +58,14 @@ export function FormControlWrapper<T extends FieldValues = FieldValues>({
                 files: field.value || [],
                 ...field,
                 errorText: error ? error.message : undefined,
+                disabled,
               } as FileUploadProps);
             }
             const additionalProps =
               element.type === 'input' && restProps.type === 'checkbox'
                 ? { checked: field.value }
                 : { value: field.value };
-            console.log(error);
+
             return React.cloneElement(element, {
               ...restProps,
               ...field,
@@ -70,6 +73,7 @@ export function FormControlWrapper<T extends FieldValues = FieldValues>({
               error: !!error,
               helperText: error ? error.message : null,
               children: childElements,
+              disabled,
             } as FormElementProps);
           }}
         />

package/src/components/Navigation/PreviewFiles/PreviewFiles.tsx

@@ -16,6 +16,7 @@ export type PreviewFilesProps = {
   label?: string;
   onChange?: (newFiles: File[], deletedFile: File) => void;
   showDownload?: boolean;
+  hideDelete?: boolean;
   sx?: SxProps;
 } & Omit<BoxProps, 'onChange'>;
 
@@ -24,6 +25,7 @@ export const PreviewFiles = ({
   label,
   onChange,
   showDownload,
+  hideDelete = false,
   sx,
   ...props
 }: PreviewFilesProps) => {
@@ -135,7 +137,7 @@ export const PreviewFiles = ({
                 <Icons.DownloadIcon />
               </IconButton>
             )}
-            {onChange && (
+            {onChange && !hideDelete && (
               <IconButton
                 onClick={() => {
                   onChange(

package/src/stories/Navigation/ManageFilters.stories.tsx

@@ -1,116 +0,0 @@
-import { Meta, StoryFn } from '@storybook/react';
-import { ReactNode, useState } from 'react';
-import {
-  ManageFilters,
-  ManageFiltersProps,
-  SingleSelect,
-  TextField,
-} from '../../components/export';
-import { RadioGroup } from '../../components/Input/RadioGroup/RadioGroup';
-
-const meta: Meta<typeof ManageFilters> = {
-  title: 'Navigation/ManageFilters',
-  component: ManageFilters,
-  argTypes: {
-    options: {
-      control: { type: 'object' },
-      description: 'Array of filter options with labels and values.',
-    },
-    onChange: {
-      action: 'changed',
-      description: 'Callback when the selected values change.',
-    },
-    menuProps: {
-      control: { type: 'object' },
-      description: 'Props to customize the MUI Menu component.',
-    },
-    menuListProps: {
-      control: { type: 'object' },
-      description: 'Props to customize the MUI MenuList component.',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: StoryFn<ManageFiltersProps> = (args) => {
-  const [selectedValues, setSelectedValues] = useState<ReactNode[]>([]);
-
-  const handleOnChange = (values: ReactNode[]) => {
-    setSelectedValues(values);
-    args.onChange(values);
-  };
-
-  return (
-    <>
-      <ManageFilters {...args} onChange={handleOnChange} />
-      <div>
-        {selectedValues.length > 0 ? (
-          <ul>{selectedValues.map((value, index) => value)}</ul>
-        ) : (
-          <p>No values selected.</p>
-        )}
-      </div>
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  options: [
-    {
-      label: 'Option 1',
-      value: (
-        <SingleSelect
-          onChange={() => {}}
-          options={[
-            {
-              label: 'done',
-              value: 'done',
-            },
-            {
-              label: 'processing',
-              value: 'processing',
-            },
-            {
-              label: 'onHold',
-              value: 'onHold',
-            },
-          ]}
-        />
-      ),
-    },
-    {
-      label: 'text Filed',
-      value: <TextField sx={{ width: '250px' }} />,
-    },
-    {
-      label: 'Radio Group',
-      value: (
-        <RadioGroup
-          options={[
-            {
-              label: 'done',
-              value: 'done',
-            },
-            {
-              label: 'processing',
-              value: 'processing',
-            },
-            {
-              label: 'onHold',
-              value: 'onHold',
-            },
-          ]}
-          label={''}
-          required={false}
-          name={''}
-          disabled={false}
-        />
-      ),
-    },
-  ],
-};