@campxdev/react-blueprint 1.9.6 → 2.0.1

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

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

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

@@ -1,11 +0,0 @@
-import { DeleteButton } from './IconButtons/DeleteButton';
-import { EditButton } from './IconButtons/EditButton';
-import { RedirectButton } from './IconButtons/RedirectButton';
-import { ViewButton } from './IconButtons/ViewButton';
-
-export const IconButtons = {
-  DeleteButton,
-  EditButton,
-  ViewButton,
-  RedirectButton,
-};

package/src/components/Input/LabelWrapper/LabelWrapper.tsx

@@ -1,35 +0,0 @@
-import { Stack, StackProps, Typography, useTheme } from '@mui/material';
-import { ReactNode } from 'react';
-
-export const LabelWrapper = ({
-  required,
-  name,
-  children,
-  containerProps,
-  label,
-}: {
-  required: boolean;
-  name?: string;
-  label?: ReactNode | string;
-  children: ReactNode;
-  containerProps?: StackProps;
-}) => {
-  const theme = useTheme();
-  return (
-    <Stack {...containerProps}>
-      {typeof label === 'string' ? (
-        <Typography htmlFor={name} component="label" variant="label1">
-          {label}
-          {required && (
-            <span style={{ color: `${theme.palette.tertiary.main}` }}>
-              {' *'}
-            </span>
-          )}
-        </Typography>
-      ) : (
-        label
-      )}
-      {children}
-    </Stack>
-  );
-};

package/src/components/Input/MultiCheckBox/MultiCheckBox.tsx

@@ -1,59 +0,0 @@
-import { Stack, StackProps } from '@mui/material';
-import { ResponsiveStyleValue } from '@mui/system';
-import { ReactNode } from 'react';
-import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
-import { SingleCheckBox } from '../SingleCheckBox/SingleCheckBox';
-
-export type MultiCheckboxProps = {
-  containerProps?: StackProps;
-  options: Array<{ label: ReactNode; value: any }>;
-  label: string;
-  direction?: ResponsiveStyleValue<
-    'row' | 'row-reverse' | 'column' | 'column-reverse'
-  >;
-  values: any[];
-  onChange: (values: any[]) => void;
-  required: boolean;
-  name: string;
-};
-
-export const MultiCheckBox = ({
-  name,
-  options,
-  required = false,
-  containerProps,
-  label,
-  direction,
-  values = [],
-  onChange = () => {},
-  ...rest
-}: MultiCheckboxProps) => {
-  return (
-    <LabelWrapper
-      label={label}
-      required={required}
-      name={name}
-      containerProps={containerProps}
-    >
-      <Stack direction={direction} spacing={4}>
-        {options?.length !== 0 &&
-          options?.map((item, index) => (
-            <SingleCheckBox
-              key={index}
-              name={name}
-              checked={values?.includes(item.value)}
-              label={item.label}
-              onChange={(event) => {
-                if (event.target.checked) {
-                  onChange([...values, item.value]);
-                } else {
-                  onChange(values.filter((val) => val !== item.value));
-                }
-              }}
-              {...rest}
-            />
-          ))}
-      </Stack>
-    </LabelWrapper>
-  );
-};

package/src/components/Input/OtpInput/OtpInput.tsx

@@ -1,87 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { useTheme } from '@mui/material';
-interface OtpInputProps {
-  length: number;
-  onChangeOtp: (otp: string) => void;
-}
-
-const OtpInput = ({ length, onChangeOtp }: OtpInputProps) => {
-  const [otp, setOtp] = useState<string[]>(Array(length).fill(''));
-  const inputRefs = useRef<HTMLInputElement[]>([]);  
-  const theme = useTheme();
-
-  const handleChange = (element: HTMLInputElement, index: number) => {
-    const value = element.value;
-    if (/^[0-9]$/.test(value) || value === '') {
-      const newOtp = [...otp];
-      newOtp[index] = value;
-      setOtp(newOtp);
-      onChangeOtp(newOtp.join(''));
-
-      if (value && index < length - 1) {
-        inputRefs.current[index + 1].focus();
-      }
-    }
-  };
-
-  const handleKeyDown = (
-    event: React.KeyboardEvent<HTMLInputElement>,
-    index: number,
-  ) => {
-    if (event.key === 'Backspace' && !otp[index] && index > 0) {
-      inputRefs.current[index - 1].focus();
-    }
-  };
-
-  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
-    event.preventDefault();
-    const paste = event.clipboardData.getData('text');
-    const digits = paste.split('').filter((char) => /^[0-9]$/.test(char));
-
-    if (digits.length > 0) {
-      const newOtp = [...otp];
-      const startIndex = Number(event.currentTarget.dataset.index) || 0;
-      let focusIndex = startIndex;
-
-      for (let i = startIndex; i < length; i++) {
-        if (digits.length > 0) {
-          newOtp[i] = digits.shift()!;
-          focusIndex = i;
-        }
-      }
-
-      setOtp(newOtp);
-      onChangeOtp(newOtp.join(''));
-      inputRefs.current[Math.min(focusIndex + 1, length - 1)].focus();
-    }
-  };
-
-  return (
-    <div style={{ display: 'flex', gap: '10px' }}>
-      {otp.map((value, index) => (
-        <input
-          className="MuiOtpInput"
-          key={index}
-          ref={(el) => (inputRefs.current[index] = el!)}
-          type="text"
-          value={value ? '•' : ''}
-          onChange={(e) => handleChange(e.target, index)}
-          onKeyDown={(e) => handleKeyDown(e, index)}
-          onPaste={handlePaste}
-          data-index={index}
-          maxLength={1}
-          style={{
-            width: '40px',
-            height: '40px',
-            textAlign: 'center',
-            fontSize: '20px',
-            stroke: theme.palette.border.primary,
-          }}
-        />
-      ))}
-    </div>
-  );
-};
-
-export default OtpInput;
-export type { OtpInputProps };

package/src/components/Input/PasswordField/PasswordField.tsx

@@ -1,67 +0,0 @@
-import {
-  IconButton,
-  InputAdornment,
-  TextField as MuiTextField,
-  TextFieldProps as MuiTextFieldProps,
-  StackProps,
-} from '@mui/material';
-import { useState } from 'react';
-import { VisibilityOffIcon } from '../../Assets/Icons/IconComponents/VisibiityOffIcon';
-import { VisibilityIcon } from '../../Assets/Icons/IconComponents/VisibilityIcon';
-import { Typography } from '../../export';
-import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
-
-export type PasswordFieldProps = {
-  containerProps?: StackProps;
-  description?: string;
-} & MuiTextFieldProps;
-
-export const PasswordField = ({
-  name,
-  label,
-  value,
-  onChange,
-  required = false,
-  containerProps,
-  description,
-  type = 'text',
-  ...rest
-}: PasswordFieldProps) => {
-  const [showPassword, setShowPassword] = useState(false);
-  const handleClickShowPassword = () => {
-    setShowPassword((prev) => !prev);
-  };
-  return (
-    <LabelWrapper
-      label={label}
-      required={required}
-      name={name}
-      containerProps={containerProps}
-    >
-      <MuiTextField
-        required={required}
-        id={name}
-        value={value}
-        label={label}
-        name={name}
-        onChange={onChange}
-        type={!showPassword ? 'password' : 'text'}
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">
-              <IconButton
-                aria-label="toggle password visibility"
-                onClick={handleClickShowPassword}
-                edge="end"
-              >
-                {showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />}
-              </IconButton>
-            </InputAdornment>
-          ),
-        }}
-        {...rest}
-      />
-      <Typography variant="caption">{description}</Typography>
-    </LabelWrapper>
-  );
-};

package/src/components/Input/RadioGroup/RadioGroup.tsx

@@ -1,62 +0,0 @@
-import {
-  FormControlLabel,
-  RadioGroup as MuiRadioGroup,
-  RadioGroupProps as MuiRadioGroupProps,
-  Radio,
-  StackProps,
-} from '@mui/material';
-import { ReactNode } from 'react';
-import { Typography } from '../../DataDisplay/Typography/Typography';
-import { Icons } from '../../export';
-import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
-
-export type RadioGroupProps = {
-  containerProps?: StackProps;
-  options: Array<{ label: ReactNode; value: any; disabled?: boolean }>;
-  label: string;
-  required: boolean;
-  name: string;
-  disabled: boolean;
-} & MuiRadioGroupProps;
-
-export const RadioGroup = ({
-  label,
-  required,
-  options,
-  name,
-  containerProps,
-  disabled,
-  onChange,
-  ...rest
-}: RadioGroupProps) => {
-  return (
-    <LabelWrapper
-      label={label}
-      required={required}
-      name={name}
-      containerProps={containerProps}
-    >
-      <MuiRadioGroup
-        onChange={onChange}
-        name={name}
-        {...rest}
-        sx={{ height: '100%', ...rest.sx }}
-      >
-        {options?.map((item, index) => (
-          <FormControlLabel
-            key={index}
-            value={item.value}
-            control={
-              <Radio
-                checkedIcon={<Icons.CheckedRadioIcon />}
-                icon={<Icons.UnCheckedRadioIcon />}
-                disabled={disabled || item.disabled}
-              />
-            }
-            label={<Typography variant="body2">{item.label}</Typography>}
-          />
-        ))}
-      </MuiRadioGroup>
-    </LabelWrapper>
-  );
-};

package/src/components/Input/SearchBar/SearchBar.tsx

@@ -1,85 +0,0 @@
-import {
-  Box,
-  InputAdornment,
-  TextField,
-  TextFieldProps,
-  styled,
-} from '@mui/material';
-import { debounce } from 'lodash';
-import { ReactNode, useMemo, useState } from 'react';
-import { SearchIcon } from '../../Assets/Icons/IconComponents/SearchIcon';
-
-export type SearchBarProps = {
-  placeholder?: string;
-  label?: string | ReactNode;
-  value?: string;
-  onSearch: (value: string) => void;
-} & TextFieldProps;
-
-export const SearchBar = ({
-  placeholder = 'Search by Name',
-  label,
-  value = '',
-  onSearch,
-  ...rest
-}: SearchBarProps) => {
-  const [search, setSearch] = useState(value);
-
-  const debouncedSendRequest = useMemo(() => {
-    return debounce(onSearch, 300);
-  }, [onSearch]);
-
-  const handleChange = (e: any) => {
-    setSearch(e.target.value);
-    debouncedSendRequest(e.target.value);
-  };
-
-  return (
-    <Box margin="8px">
-      <StyledTextField
-        placeholder={placeholder}
-        label={label}
-        value={search}
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">
-              <SearchIcon />
-            </InputAdornment>
-          ),
-        }}
-        {...rest}
-        onChange={handleChange}
-      />
-    </Box>
-  );
-};
-
-const StyledTextField = styled(TextField)(({ theme }) => ({
-  margin: 0,
-  height: 40,
-  backgroundColor: theme.palette.surface.grey,
-  '.MuiFormControl-root': {
-    margin: 0,
-    height: '100%',
-  },
-  '.MuiOutlinedInput-root': {
-    height: '100%',
-    padding: '5px, 10px',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '.MuiInputBase-input': {
-    height: '100%',
-    fontSize: '14px',
-    '&::placeholder': {
-      color: theme.palette.text.tertiary,
-      fontSize: '14px',
-      opacity: 1,
-    },
-  },
-  '.MuiOutlinedInput-notchedOutline': {
-    height: '100%',
-    top: 0,
-    borderColor: theme.palette.border.primary,
-  },
-}));

package/src/components/Input/Select/Select.tsx

@@ -1,104 +0,0 @@
-import { MenuItem, SxProps, Theme, useTheme } from '@mui/material';
-import { BaseSelectProps } from '@mui/material/Select';
-import * as React from 'react';
-import { StyledFormControl, StyledSelect } from './styles';
-
-export type SelectProps = {
-  options: Array<{
-    label: React.ReactNode;
-    value: string | number;
-    color?: 'red' | 'green' | 'blue' | 'pink' | 'yellow' | 'orange';
-  }>;
-  onChange?: (event: React.ChangeEvent<{ value: any }>) => void;
-  value: string | number;
-  containerSx?: SxProps;
-} & BaseSelectProps;
-const getColorPairs = (
-  theme: Theme,
-  color?: 'red' | 'green' | 'blue' | 'pink' | 'yellow' | 'orange',
-) => {
-  switch (color) {
-    case 'red':
-      return {
-        textColor: theme.palette.highlight.highlightRed,
-        backgroundColor: theme.palette.highlight.redBackground,
-      };
-    case 'green':
-      return {
-        textColor: theme.palette.highlight.highlightGreen,
-        backgroundColor: theme.palette.highlight.greenBackground,
-      };
-    case 'blue':
-      return {
-        textColor: theme.palette.highlight.highlightBlue,
-        backgroundColor: theme.palette.highlight.blueBackground,
-      };
-    case 'pink':
-      return {
-        textColor: theme.palette.highlight.highlightPink,
-        backgroundColor: theme.palette.highlight.pinkBackground,
-      };
-    case 'yellow':
-      return {
-        textColor: theme.palette.highlight.highlightYellow,
-        backgroundColor: theme.palette.highlight.yellowBackground,
-      };
-    case 'orange':
-      return {
-        textColor: theme.palette.highlight.highlightOrange,
-        backgroundColor: theme.palette.highlight.orangeBackground,
-      };
-    default:
-      return {
-        textColor: theme.palette.text.primary,
-        backgroundColor: theme.palette.surface.defaultBackground,
-      };
-  }
-};
-
-export const Select = ({
-  options = [],
-  onChange,
-  value,
-  containerSx,
-}: SelectProps) => {
-  const selectedOption = options.find((option) => option.value === value);
-
-  const theme = useTheme();
-
-  const { textColor, backgroundColor } = getColorPairs(
-    theme,
-    selectedOption?.color,
-  );
-
-  return (
-    <StyledFormControl
-      textColor={textColor}
-      bgcolor={backgroundColor}
-      sx={containerSx}
-    >
-      <StyledSelect
-        value={value}
-        onChange={onChange}
-        displayEmpty
-        inputProps={{ 'aria-label': 'Without label' }}
-        // endAdornment={<Icons.AccordionArrow />}
-      >
-        {options?.map((item, index) => (
-          <MenuItem
-            key={index}
-            value={item.value}
-            sx={{
-              boxShadow: 'none',
-              '&:focus': {
-                boxShadow: 'none',
-              },
-            }}
-          >
-            {item.label}
-          </MenuItem>
-        ))}
-      </StyledSelect>
-    </StyledFormControl>
-  );
-};

package/src/components/Input/Select/styles.tsx

@@ -1,29 +0,0 @@
-import { FormControl, Select, SelectProps } from '@mui/material';
-import { styled } from '@mui/material/styles';
-export const StyledFormControl = styled(FormControl)<{
-  bgcolor?: string;
-  textColor?: string;
-}>(({ theme, bgcolor, textColor }) => ({
-  margin: '8px',
-  minWidth: 220,
-  height: 40,
-  borderRadius: '8px',
-  backgroundColor: bgcolor || theme.palette.surface.grey,
-  color: textColor || theme.palette.text.secondary,
-  padding: 0,
-  '& .MuiInputBase-root': {
-    color: textColor,
-  },
-}));
-
-export const StyledSelect = styled(Select)<SelectProps>(() => ({
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-  },
-  '&:hover .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-  },
-  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-  },
-}));

package/src/components/Input/SingleCheckBox/SingleCheckBox.tsx

@@ -1,60 +0,0 @@
-import {
-  FormControlLabel,
-  FormControlLabelProps,
-  Checkbox as MuiCheckbox,
-  CheckboxProps as MuiCheckboxProps,
-  SxProps,
-  useTheme,
-} from '@mui/material';
-import { ReactNode } from 'react';
-import {
-  Typography,
-  TypographyProps,
-} from '../../DataDisplay/Typography/Typography';
-import { Icons } from '../../export';
-
-export type CheckboxProps = {
-  checkedIcon?: ReactNode;
-  icon?: ReactNode;
-  label: ReactNode;
-  formControlLabelProps?: Omit<FormControlLabelProps, 'control' | 'label'>;
-  typographyProps?: TypographyProps;
-} & MuiCheckboxProps;
-
-export const SingleCheckBox = ({
-  checked,
-  label,
-  onChange,
-  required,
-  checkedIcon = <Icons.CheckedCheckboxIcon />,
-  icon = <Icons.UnCheckedCheckboxIcon />,
-  formControlLabelProps,
-  typographyProps,
-  ...rest
-}: CheckboxProps) => {
-  const theme = useTheme();
-  return (
-    <FormControlLabel
-      control={
-        <MuiCheckbox
-          checked={checked}
-          checkedIcon={checkedIcon}
-          icon={icon}
-          onChange={onChange}
-          {...rest}
-        />
-      }
-      label={
-        <Typography variant="body1" {...typographyProps}>
-          {label}
-          {required && (
-            <span style={{ color: `${theme.palette.tertiary.main}` }}>
-              {' *'}
-            </span>
-          )}
-        </Typography>
-      }
-      {...formControlLabelProps}
-    />
-  );
-};