@campxdev/react-blueprint 1.9.6 → 2.0.1

package/src/components/Input/Button/ButtonLoader.css

@@ -1,25 +0,0 @@
-/* HTML: <div class="buttonLoader"></div> */
-.buttonLoader {
-    max-height: 40px;
-    padding: 10px 20px;
-    font-size: '14px';
-    aspect-ratio: 2.5;
-    --_g: no-repeat radial-gradient(farthest-side,#000 90%,#0000);
-    background: var(--_g), var(--_g), var(--_g), var(--_g);
-    background-size: 20% 50%;
-    animation: l44 1s infinite linear alternate; 
-    scale:0.5;
-  }
-  @keyframes l44 {
-    0%,
-    5%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
-    12.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
-    25%   {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
-    37.5% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
-    50%   {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
-    62.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
-    75%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
-    87.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
-    95%,
-    100%  {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
-  }

package/src/components/Input/DatePicker/DatePicker.tsx

@@ -1,75 +0,0 @@
-import { StackProps } from '@mui/material';
-import { PickersShortcutsItem, PickerValidDate } from '@mui/x-date-pickers';
-import {
-  DatePicker as MuiDatePicker,
-  DatePickerProps as MuiDatePickerProps,
-} from '@mui/x-date-pickers/DatePicker';
-import { format as DateFnsFormat } from 'date-fns';
-import { Icons } from '../../Assets/Icons/Icons';
-import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
-
-type DatePickerProps<
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean = false,
-> = {
-  format?: 'yyyy' | 'MMMM yyyy' | 'dd MMMM yyyy' | 'dd/MM/yyyy';
-  views?: ('year' | 'month' | 'day')[];
-  helperText?: string;
-  placeholder?: string;
-  shortcutsItems?: PickersShortcutsItem<any>[];
-  required?: boolean;
-  containerProps?: StackProps;
-  openPickerIcon?: React.ElementType;
-  error?: any;
-} & MuiDatePickerProps<TDate, TEnableAccessibleFieldDOMStructure>;
-
-export const DatePicker = <
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean = false,
->({
-  label,
-  name,
-  value,
-  required = false,
-  format = 'dd/MM/yyyy',
-  views = ['year', 'month', 'day'],
-  helperText,
-  placeholder = '',
-  shortcutsItems = [],
-  openPickerIcon: Icon = Icons.NoteIcon,
-  containerProps,
-  error,
-  ...rest
-}: DatePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => {
-  return (
-    <LabelWrapper
-      label={label}
-      required={required}
-      name={name}
-      containerProps={containerProps}
-    >
-      <MuiDatePicker
-        format={format}
-        views={views}
-        defaultValue={value}
-        slotProps={{
-          textField: {
-            helperText,
-            placeholder,
-            error: !!error,
-          },
-          shortcuts: {
-            items: shortcutsItems,
-          },
-        }}
-        slots={{
-          openPickerIcon: Icon,
-        }}
-        dayOfWeekFormatter={(day: any) => {
-          return `${DateFnsFormat(day, 'EEEE').slice(0, 2)}.`;
-        }}
-        {...rest}
-      />
-    </LabelWrapper>
-  );
-};

package/src/components/Input/DateTimePicker/DateTimePicker.tsx

@@ -1,98 +0,0 @@
-import { StackProps } from '@mui/material';
-import {
-  DateTimePicker as MuiDateTimePicker,
-  DateTimePickerProps as MuiDateTimePickerProps,
-  PickersShortcutsItem,
-  PickerValidDate,
-} from '@mui/x-date-pickers';
-import { format as DateFnsFormat } from 'date-fns';
-
-import { Icons } from '../../export';
-import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
-
-type DateTimePickerProps<
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean = false,
-> = {
-  format?:
-    | 'yyyy'
-    | 'MMMM yyyy'
-    | 'MMM yyyy'
-    | 'dd MMMM yyyy'
-    | 'dd/MM/yyyy'
-    | 'MM/dd/yyyy'
-    | 'yyyy-MM-dd'
-    | 'yyyy-MM-dd hh:mm a'
-    | 'yyyy-MM-dd HH:mm'
-    | 'dd MMM yyyy HH:mm'
-    | 'dd MMM yyyy hh:mm a'
-    | 'dd/MM/yyyy hh:mm a'
-    | 'dd/MM/yyyy HH:mm'
-    | 'hh:mm a'
-    | 'HH:mm'
-    | 'hh:mm:ss a'
-    | 'HH:mm:ss'
-    | 'MMM dd, yyyy hh:mm a'
-    | 'MMMM dd, yyyy HH:mm'
-    | 'EEE, MMM dd yyyy'
-    | 'EEEE, MMMM dd, yyyy';
-  views?: ('year' | 'month' | 'day' | 'hours' | 'minutes' | 'seconds')[];
-  helperText?: string;
-  placeholder?: string;
-  shortcutsItems?: PickersShortcutsItem<any>[];
-  required?: boolean;
-  containerProps?: StackProps;
-  openPickerIcon?: React.ElementType;
-  error?: any;
-} & MuiDateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>;
-
-export const DateTimePicker = <
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean = false,
->({
-  label,
-  name,
-  required = false,
-  format = 'dd MMM yyyy hh:mm a',
-  views = ['year', 'month', 'day', 'hours', 'minutes', 'seconds'],
-  helperText,
-  placeholder = '',
-  shortcutsItems = [],
-  openPickerIcon: Icon = Icons.NoteIcon,
-  containerProps,
-  value,
-  error,
-  ...rest
-}: DateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => {
-  return (
-    <LabelWrapper
-      label={label}
-      required={required}
-      name={name}
-      containerProps={containerProps}
-    >
-      <MuiDateTimePicker
-        format={format}
-        views={views}
-        defaultValue={value}
-        slotProps={{
-          textField: {
-            helperText,
-            placeholder,
-            error: !!error,
-          },
-          shortcuts: {
-            items: shortcutsItems,
-          },
-        }}
-        slots={{
-          openPickerIcon: Icon,
-        }}
-        dayOfWeekFormatter={(day: any) => {
-          return `${DateFnsFormat(day, 'EEEE').slice(0, 2)}.`;
-        }}
-        {...rest}
-      />
-    </LabelWrapper>
-  );
-};

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

@@ -1,236 +0,0 @@
-import {
-  Box,
-  FormLabel,
-  Stack,
-  styled,
-  SxProps,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
-import { IconButtons, Icons, PreviewFiles, Typography } from '../../export';
-
-export type FileUploadProps = {
-  label: string;
-  name: string;
-  disabled?: boolean;
-  files?: File[];
-  onChange?: (files: File[]) => void;
-  handleRemove?: (index: number) => void;
-  accept?: 'image/*' | '.pdf' | '.docx' | '.txt' | '*';
-  onInvalidFile?: (file: File) => void;
-  inputText?: string;
-  multiple?: boolean;
-  hideDeleteButton?: boolean;
-  hideInput?: boolean;
-  errorText?: string;
-  sx?: SxProps;
-  showImage?: boolean;
-  previewSx?: SxProps;
-  required?: boolean;
-};
-
-export const FileUpload = ({
-  label,
-  name = 'file-input',
-  disabled = false,
-  onChange,
-  handleRemove,
-  files = [],
-  accept = '*',
-  inputText,
-  onInvalidFile,
-  hideDeleteButton = false,
-  hideInput = false,
-  multiple = true,
-  errorText,
-  showImage,
-  previewSx,
-  sx,
-  required,
-}: FileUploadProps) => {
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down(768));
-
-  if (!onChange) {
-    return <Typography>onChange Missing</Typography>;
-  }
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files) {
-      const newFiles = Array.from(event.target.files);
-      const validFiles: File[] = [];
-      const invalidFiles: File[] = [];
-
-      newFiles.forEach((file) => {
-        if (
-          accept === '*' ||
-          file.type.match(accept) ||
-          file.name.match(accept)
-        ) {
-          validFiles.push(file);
-        } else {
-          invalidFiles.push(file);
-        }
-      });
-
-      invalidFiles.forEach((file) => onInvalidFile?.(file));
-
-      if (validFiles.length > 0) {
-        if (multiple) {
-          onChange([...files, ...validFiles]);
-        } else {
-          onChange([validFiles[0]]);
-        }
-      }
-      event.target.value = ''; //Resets value after selection
-    }
-  };
-
-  return (
-    <Stack sx={sx}>
-      <Typography variant="label1">
-        {label}{' '}
-        {required && (
-          <span style={{ color: `${theme.palette.tertiary.main}` }}>
-            {' *'}
-          </span>
-        )}
-      </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) => (
-            <StyledSelectedFileContainer
-              key={index}
-              isSmallScreen={isSmallScreen}
-            >
-              <Box
-                sx={{
-                  height: '120px',
-                  display: 'flex',
-                  overflow: 'hidden',
-                  borderRadius: '8px',
-                }}
-              >
-                <img
-                  src={URL.createObjectURL(file)}
-                  style={{
-                    height: '100%',
-                    width: '100%',
-                    objectFit: 'cover',
-                  }}
-                  alt={`Preview ${index}`}
-                />
-              </Box>
-
-              {!disabled && !hideDeleteButton && (
-                <IconButtons.DeleteButton
-                  onClick={() => {
-                    const updatedFiles = [...files];
-                    updatedFiles.splice(index, 1);
-                    onChange(updatedFiles);
-                  }}
-                  size="small"
-                />
-              )}
-            </StyledSelectedFileContainer>
-          ))
-        ) : (
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              padding: '8px',
-              overflow: 'hidden',
-              backgroundColor: theme.palette.background.default,
-              borderRadius: '8px',
-            }}
-          >
-            <PreviewFiles
-              sx={previewSx}
-              files={files}
-              onChange={(newFiles) => onChange?.(newFiles)}
-              hideDelete={hideDeleteButton}
-            />
-          </Box>
-        )}
-      </Box>
-    </Stack>
-  );
-};
-
-const StyledSelectedFileContainer = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'isSmallScreen',
-})<{ isSmallScreen: boolean }>(({ theme, isSmallScreen }) => ({
-  borderRadius: '10px',
-  position: 'relative',
-  textAlign: 'center',
-  marginTop: '5px',
-  minWidth: isSmallScreen ? '100%' : '300px', // Full width on small screens, 300px on larger
-  maxWidth: '100%',
-  '& > button': {
-    position: 'absolute',
-    right: '-4%',
-    top: '-10%',
-  },
-}));
-
-const StyledFileSelectorContainer = styled(Box)(({ theme }) => ({
-  border: '2.5px dashed',
-  height: '120px',
-  display: 'flex',
-  width: '100%',
-  minWidth: '200px',
-  borderRadius: '5px',
-  borderColor: theme.palette.border.primary,
-  justifyContent: 'center',
-  alignItems: 'center',
-  padding: '8px',
-  textAlign: 'center',
-  '&:hover': {
-    borderColor: theme.palette.primary.light,
-    backgroundColor: theme.palette.secondary.light,
-    transition:
-      'border-color 0.2s ease-in-out, background-color 0.2s ease-in-out',
-  },
-}));

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

@@ -1,62 +0,0 @@
-import { Stack, StackProps, useTheme } from '@mui/material';
-import { Button, ButtonProps } from '../export';
-
-export interface ButtonConfig extends ButtonProps {
-  show?: boolean;
-  title?: string;
-  onClick?: () => void;
-}
-
-export interface FormActionsProps {
-  submitButtonProps?: ButtonConfig;
-  cancelButtonProps?: ButtonConfig;
-  stackProps?: StackProps;
-  showTopBorder?: boolean;
-}
-
-function FormActions({
-  submitButtonProps,
-  cancelButtonProps,
-  stackProps,
-  showTopBorder = false,
-}: FormActionsProps) {
-  const theme = useTheme();
-
-  const defaultSubmitProps: ButtonConfig = {
-    show: true,
-    title: 'Submit',
-    variant: 'contained',
-    ...submitButtonProps,
-  };
-
-  const defaultCancelProps: ButtonConfig = {
-    show: true,
-    title: 'Cancel',
-    variant: 'text',
-    disableRipple: true,
-    ...cancelButtonProps,
-  };
-
-  const buttons = [defaultSubmitProps, defaultCancelProps].filter(
-    (button) => button.show,
-  );
-
-  return (
-    <Stack
-      direction="row"
-      borderTop={
-        showTopBorder ? `1px solid ${theme.palette.border.primary}` : 'none'
-      }
-      sx={{ p: '12px 16px', gap: '12px' }}
-      {...stackProps}
-    >
-      {buttons.map((button, index) => (
-        <Button key={index} {...button}>
-          {button.title}
-        </Button>
-      ))}
-    </Stack>
-  );
-}
-
-export default FormActions;

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

@@ -1,105 +0,0 @@
-import { Stack, SxProps } from '@mui/material';
-import { TextFieldProps } from '@mui/material/TextField';
-import React, { ReactElement, ReactNode, isValidElement } from 'react';
-import { Control, Controller, FieldValues, Path } from 'react-hook-form';
-import { FileUpload, FileUploadProps } from '../export';
-import FormActions, { FormActionsProps } from '../FormActions/FormActions';
-
-interface FormControlWrapperProps<T extends FieldValues = FieldValues> {
-  control: Control<T>;
-  children: ReactNode;
-  containerSx?: SxProps;
-  formActionProps?: FormActionsProps;
-  disabled?: boolean;
-}
-
-type FormElementProps = {
-  checked?: boolean;
-  loading?: boolean;
-} & TextFieldProps;
-
-type ControlledElementProps<T extends FieldValues = FieldValues> = {
-  name: Path<T>;
-  error?: boolean;
-  helperText?: ReactNode;
-  children?: ReactNode;
-  files?: File[];
-  onChange?: (files: File[]) => void;
-  [key: string]: any;
-} & TextFieldProps;
-
-export function FormControlWrapper<T extends FieldValues = FieldValues>({
-  control,
-  children,
-  containerSx,
-  formActionProps,
-  disabled = false,
-}: FormControlWrapperProps<T>) {
-  const wrapWithController = (
-    element: ReactElement<any>,
-  ): ReactElement<any> => {
-    if (!isValidElement(element)) return element;
-
-    const {
-      name,
-      children: childElements,
-      ...restProps
-    } = element.props as ControlledElementProps<T>;
-
-    if (name) {
-      return (
-        <Controller
-          name={name}
-          control={control}
-          render={({ field, fieldState: { error } }) => {
-            if (element.type === FileUpload) {
-              return React.cloneElement(element, {
-                disabled,
-                ...(restProps as Partial<FileUploadProps>),
-                files: field.value || [],
-                ...field,
-                errorText: error ? error.message : undefined,
-              } as FileUploadProps);
-            }
-            const additionalProps =
-              element.type === 'input' && restProps.type === 'checkbox'
-                ? { checked: field.value }
-                : { value: field.value };
-
-            return React.cloneElement(element, {
-              disabled,
-              ...restProps,
-              ...field,
-              ...additionalProps,
-              error: !!error,
-              helperText: error ? error.message : null,
-              children: childElements,
-            } as FormElementProps);
-          }}
-        />
-      );
-    }
-
-    if (childElements) {
-      const wrappedChildren: ReactNode = React.Children.map(
-        childElements as any,
-        wrapWithController,
-      );
-      return React.cloneElement(element, {
-        ...restProps,
-        children: wrappedChildren,
-      } as FormElementProps);
-    }
-
-    return element;
-  };
-
-  return (
-    <>
-      <Stack sx={{ m: '16px', gap: '12px', ...containerSx }}>
-        {React.Children.map(children as any, wrapWithController) || null}
-      </Stack>
-      {formActionProps && <FormActions {...formActionProps} showTopBorder />}
-    </>
-  );
-}

package/src/components/Input/FormWrapper/FormWrapper.tsx

@@ -1,12 +0,0 @@
-import { Stack, SxProps } from '@mui/material';
-import { ReactNode } from 'react';
-
-type FormWrapperProps = {
-  children: ReactNode;
-  containerSx?: SxProps;
-};
-export const FormWrapper = ({ children, containerSx }: FormWrapperProps) => {
-  return (
-    <Stack sx={{ m: '16px', gap: '12px', ...containerSx }}>{children}</Stack>
-  );
-};

package/src/components/Input/HelpButton/HelpButton.stories.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import HelpButton from './HelpButton';
-
-export default {
-  title: 'Input/HelpButton',
-  component: HelpButton,
-  tags: ['autodocs'],
-  argTypes: {
-    href: {
-      control: 'text',
-      description: 'The URL the button links to',
-      defaultValue: 'https://example.com/help',
-    },
-  },
-} as Meta<typeof HelpButton>;
-
-export const Default = (args: any) => <HelpButton {...args} />;
-Default.args = {
-  href: 'https://example.com/help',
-};

package/src/components/Input/HelpButton/HelpButton.tsx

@@ -1,17 +0,0 @@
-// HelpButton.tsx
-import React from 'react';
-import { IconButton } from '@mui/material';
-import { Icons } from '../../export';
-
-const HelpButton = () => {
-  return (
-    <IconButton
-      href={'https://campx.atlassian.net/servicedesk/customer/portal/2'}
-      target="_blank"
-    >
-      <Icons.HelpIcon />
-    </IconButton>
-  );
-};
-
-export default HelpButton;

package/src/components/Input/IconButtons/IconButtons/DeleteButton.tsx

@@ -1,10 +0,0 @@
-import { ButtonProps, IconButton } from '@mui/material';
-import { Icons } from '../../../export';
-
-export function DeleteButton({ disabled, ...props }: ButtonProps) {
-  return (
-    <IconButton {...props}>
-      <Icons.DeleteIcon />
-    </IconButton>
-  );
-}

package/src/components/Input/IconButtons/IconButtons/EditButton.tsx

@@ -1,10 +0,0 @@
-import { ButtonProps, IconButton } from '@mui/material';
-import { Icons } from '../../../export';
-
-export function EditButton({ disabled, ...props }: ButtonProps) {
-  return (
-    <IconButton {...props}>
-      <Icons.EditIcon />
-    </IconButton>
-  );
-}

package/src/components/Input/IconButtons/IconButtons/RedirectButton.tsx

@@ -1,10 +0,0 @@
-import { ButtonProps, IconButton } from '@mui/material';
-import { Icons } from '../../../export';
-
-export function RedirectButton({ disabled, ...props }: ButtonProps) {
-  return (
-    <IconButton {...props}>
-      <Icons.RedirectIcon />
-    </IconButton>
-  );
-}