@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.2

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

@@ -1,51 +1,40 @@
+import { cn } from '@/lib/utils';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
+import { Button } from '@/shadcn-components/Input/Button/Button';
 import {
-  AutocompleteCloseReason,
-  Box,
-  InputAdornment,
-  Autocomplete as MuiAutocomplete,
-  Paper,
-  Stack,
-} from '@mui/material';
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/shadcn-components/Input/Command/Command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/shadcn-components/Input/Popover/Popover';
 import { debounce } from 'lodash';
-import { SyntheticEvent, useMemo } from 'react';
-import { Typography } from '../../../DataDisplay/Typography/Typography';
-import { Icons, SingleSelectProps, Spinner } from '../../../export';
+import { Check, ChevronDown } from 'lucide-react';
+import { SyntheticEvent, useEffect, useMemo, useRef, useState } from 'react';
+import { LabelWrapper } from '../../LabelWrapper/LabelWrapper';
 import { TextField } from '../../TextField/TextField';
+import { SingleSelectProps } from '../SingleSelect';
 import { SingleSelectState } from '../singleSelectReducer';
 import { OptionsLoader } from './OptionsLoader';
 
-declare module '@mui/material/Autocomplete' {
-  interface AutocompletePaperSlotPropsOverrides {
-    loadingOptions: boolean;
-    isSearch: boolean;
-  }
-}
-
-const CustomPaper = (props: any) => (
-  <Paper
-    {...props}
-    sx={{
-      boxShadow: 'none',
-      borderRadius: '0px 0px 4px 4px',
-    }}
-  >
-    {props.children}
-    {props.loadingOptions ? <OptionsLoader isSearch={props.isSearch} /> : <></>}
-  </Paper>
-);
-
 export type SingleInputProps = {
   onChange: (value: any) => void;
   searchDb: (searchValue: string) => Promise<void>;
   handleOpen: (event: SyntheticEvent) => Promise<void>;
-  handleClose: (event: SyntheticEvent, reason: AutocompleteCloseReason) => void;
+  handleClose: (event: SyntheticEvent, reason: string) => void;
   handleScroll: (event: any) => Promise<void>;
   state: SingleSelectState;
 } & SingleSelectProps;
 
 export const SingleInput = ({
-  required = false,
   optionsApiEndPoint,
+  required = false,
   label,
   name,
   getValue,
@@ -53,142 +42,165 @@ export const SingleInput = ({
   onChange,
   error,
   helperText,
-  dbLabelProps = {
-    labelKey: '',
-    useLabelStartCase: false,
-    useSubLabelStartCase: false,
-  },
   searchDb,
   handleOpen,
   handleClose,
   handleScroll,
   state,
-  disableClear = false,
-  ...restProps
+  fullWidth,
 }: SingleInputProps) => {
   const {
     open,
     loadingInitialInternalOptions,
     internalOptions,
     loadingInternalOptions,
+    internalOptionsMap,
   } = state;
 
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+
+  // Force re-render on mount to ensure positioning works
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
   const debouncedSendRequest = useMemo(() => {
-    return debounce((searchValue) => {
+    return debounce((searchValue: string) => {
       if (optionsApiEndPoint) searchDb(searchValue);
     }, 300);
-  }, [searchDb]);
+  }, [searchDb, optionsApiEndPoint]);
 
-  const handleSearch = async (e: any) => {
-    if (e) {
-      const searchValue = e.target.value;
-      debouncedSendRequest(searchValue);
-    }
+  const handleSearch = (searchValue: string) => {
+    debouncedSendRequest(searchValue);
   };
 
+  const selectedOption = internalOptionsMap[value];
+
   if (loadingInitialInternalOptions) {
     return (
       <TextField
         label={label}
         name={name}
         required={required}
-        InputProps={{
-          endAdornment: <Spinner />,
-        }}
-        error={error}
-        helperText={helperText}
+        error={!!error}
+        description={error || helperText}
+        disabled
+        placeholder="Loading..."
+        fullWidth={fullWidth}
+        className="bg-input-background border-none placeholder:text-muted-foreground"
       />
     );
   }
 
   return (
-    <MuiAutocomplete
-      {...restProps}
-      disableClearable
-      forcePopupIcon={false}
-      onChange={(e, value) => {
-        onChange(getValue ? getValue(value) : value?.value);
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={{
+        ...(fullWidth && { style: { width: '100%' } }),
       }}
-      onInputCapture={handleSearch}
-      open={open}
-      autoFocus={false}
-      filterOptions={(options, state) => {
-        if (optionsApiEndPoint) {
-          return options;
-        }
-        return options.filter((option) =>
-          option.label.toLowerCase().includes(state.inputValue.toLowerCase()),
-        );
-      }}
-      value={state.internalOptionsMap[value]}
-      PaperComponent={CustomPaper}
-      renderOption={(props, option: any) => {
-        return (
-          <Box component="li" {...props} margin="4px 0px" key={option.value}>
-            <Stack direction="row" alignItems="center" width="100%">
-              {option.icon && (
-                <Box sx={{ mr: '8px', display: 'flex', alignItems: 'center' }}>
-                  {option.icon}
-                </Box>
+    >
+      <Popover
+        open={open}
+        onOpenChange={(isOpen) => {
+          const syntheticEvent = {
+            currentTarget: {},
+            target: {},
+          } as SyntheticEvent;
+
+          if (isOpen) {
+            handleOpen(syntheticEvent);
+          } else {
+            handleClose(syntheticEvent, 'blur');
+          }
+        }}
+      >
+        <PopoverTrigger asChild>
+          <span
+            ref={wrapperRef}
+            style={{ display: fullWidth ? 'block' : 'inline-block' }}
+          >
+            <Button
+              variant="input"
+              role="combobox"
+              aria-expanded={open}
+              aria-invalid={!!error}
+              className={cn(
+                'justify-between font-normal',
+                fullWidth ? 'w-full' : 'w-auto',
+                !selectedOption && 'text-muted-foreground',
+                error &&
+                  'border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
               )}
-              <Stack>
-                <Typography variant="subtitle3">{option.label}</Typography>
-                <Typography variant="caption">{option?.subLabel}</Typography>
-              </Stack>
-            </Stack>
-          </Box>
-        );
-      }}
-      ListboxProps={{
-        ...restProps.ListboxProps,
-        onScroll: handleScroll,
-      }}
-      slotProps={{
-        ...restProps.slotProps,
-        paper: {
-          ...restProps.slotProps?.paper,
-          loadingOptions: loadingInternalOptions,
-          isSearch: !!state.search,
-        },
-      }}
-      onOpen={handleOpen}
-      onClose={handleClose}
-      options={internalOptions}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          label={label}
-          required={required}
-          name={name}
-          error={error}
-          helperText={helperText}
-          fullWidth
-          slotProps={{
-            input: {
-              ...params.InputProps,
-              sx: {
-                paddingRight: '18px',
-              },
-              endAdornment: (
-                <InputAdornment position="end">
-                  <Icons.DownArrow
-                    disabled={params.disabled}
-                    onClick={
-                      params.disabled
-                        ? () => {}
-                        : open
-                        ? (e) => {
-                            handleClose(e, 'escape');
-                          }
-                        : handleOpen
-                    }
-                  />
-                </InputAdornment>
-              ),
-            },
-          }}
-        />
+            >
+              {selectedOption?.label || 'Select an option...'}
+              <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </span>
+        </PopoverTrigger>
+        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+          <Command shouldFilter={!optionsApiEndPoint}>
+            <CommandInput
+              placeholder="Search..."
+              onValueChange={handleSearch}
+            />
+            <CommandList onScroll={handleScroll} className="max-h-[300px]">
+              <CommandEmpty>No options found</CommandEmpty>
+              <CommandGroup>
+                {internalOptions?.map((option, index) => {
+                  const isSelected = value === option.value;
+                  return (
+                    <CommandItem
+                      key={option.value ?? index}
+                      value={option.value}
+                      onSelect={() => {
+                        onChange(getValue ? getValue(option) : option.value);
+                        handleClose(
+                          { currentTarget: {}, target: {} } as SyntheticEvent,
+                          'selectOption',
+                        );
+                      }}
+                    >
+                      {option.icon && (
+                        <span className="mr-2 flex items-center">
+                          {option.icon}
+                        </span>
+                      )}
+                      <div className="flex flex-col flex-1">
+                        <Typography variant="small">{option.label}</Typography>
+                        {option.subLabel && (
+                          <Typography variant="muted" className="text-xs">
+                            {option.subLabel}
+                          </Typography>
+                        )}
+                      </div>
+                      <Check
+                        className={cn(
+                          'ml-2 h-4 w-4 shrink-0',
+                          isSelected ? 'opacity-100' : 'opacity-0',
+                        )}
+                      />
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </CommandList>
+            {loadingInternalOptions && (
+              <OptionsLoader isSearch={!!state.search} />
+            )}
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {(error || helperText) && (
+        <Typography
+          variant="muted"
+          className={cn('text-xs', error && 'text-destructive')}
+        >
+          {typeof error === 'string' ? error : error?.message || helperText}
+        </Typography>
       )}
-    />
+    </LabelWrapper>
   );
 };

package/src/components/Input/SingleSelect/singleSelectReducer.ts

@@ -19,6 +19,7 @@ export type Option = {
   label: string;
   subLabel?: string;
   value: any;
+  icon?: React.ReactNode;
 };
 
 export type SingleSelectState = {

package/src/components/Input/Switch/Switch.tsx

@@ -1,9 +1,25 @@
-import {
-  Switch as MuiSwitch,
-  SwitchProps as MuiSwitchProps,
-} from '@mui/material';
+import { Label } from '@/shadcn-components/Input/Label/Label';
+import { Switch as ShadcnSwitch } from '@/shadcn-components/Input/Switch/Switch';
+import * as React from 'react';
 
-export type SwitchProps = {} & MuiSwitchProps;
-export const Switch = (props: SwitchProps) => {
-  return <MuiSwitch {...props} />;
-};
+export interface SwitchProps
+  extends React.ComponentPropsWithoutRef<typeof ShadcnSwitch> {
+  label?: string;
+}
+
+export const Switch = React.forwardRef<
+  React.ElementRef<typeof ShadcnSwitch>,
+  SwitchProps
+>(({ label, ...props }, ref) => {
+  if (label) {
+    return (
+      <div className="flex items-center space-x-2">
+        <ShadcnSwitch ref={ref} {...props} />
+        <Label>{label}</Label>
+      </div>
+    );
+  }
+  return <ShadcnSwitch ref={ref} {...props} />;
+});
+
+Switch.displayName = 'Switch';

package/src/components/Input/Tags/Tags.tsx

@@ -1,36 +1,34 @@
-import { Chip, styled } from '@mui/material';
-import { Typography } from '../../DataDisplay/Typography/Typography';
-import { Icons } from '../../export';
-
-const TagList = styled('ul')(({ theme }) => ({
-  display: 'flex',
-  justifyContent: 'center',
-  flexWrap: 'wrap',
-  listStyle: 'none',
-}));
+import { cn } from '@/lib/utils';
+import { Badge } from '@/shadcn-components/DataDisplay/Badge/Badge';
+import { X } from 'lucide-react';
 
 export type TagsProps = {
   tags: { label: string; value: any }[];
   onDelete?: (deletedChip: any) => void;
+  variant?: 'default' | 'secondary' | 'destructive' | 'outline';
+  className?: string;
 };
 
-export const Tags = ({ tags, onDelete }: TagsProps) => {
+export const Tags = ({
+  tags,
+  onDelete,
+  variant = 'secondary',
+  className,
+}: TagsProps) => {
   return (
-    <TagList>
+    <div className={cn('flex justify-center flex-wrap gap-2', className)}>
       {tags.map(({ label, value }) => (
-        <Chip
-          key={value} // Add a key to ensure unique identification for each Chip
-          label={<Typography variant="body2">{label}</Typography>}
-          onDelete={
-            onDelete
-              ? (e) => {
-                  onDelete(value);
-                }
-              : undefined
-          }
-          deleteIcon={<Icons.CrossIcon />}
-        />
+        <Badge
+          key={value}
+          variant={variant}
+          className={onDelete && 'gap-1.5 pr-1'}
+        >
+          {label}
+          {onDelete && (
+            <X className="h-1 w-1" onClick={() => onDelete(value)} />
+          )}
+        </Badge>
       ))}
-    </TagList>
+    </div>
   );
 };

package/src/components/Input/TextField/TextField.tsx

@@ -1,15 +1,18 @@
-import {
-  TextField as MuiTextField,
-  TextFieldProps as MuiTextFieldProps,
-  StackProps,
-} from '@mui/material';
-import { Typography } from '../../export';
+import { cn } from '@/lib/utils';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
+import { Input } from '@/shadcn-components/Input/Input/Input';
+import * as React from 'react';
 import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
 
 export type TextFieldProps = {
-  containerProps?: StackProps;
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
   description?: string;
-} & MuiTextFieldProps;
+  label?: React.ReactNode | string;
+  required?: boolean;
+  fullWidth?: boolean;
+  error?: boolean;
+  helperText?: React.ReactNode;
+} & React.ComponentProps<typeof Input>;
 
 export const TextField = ({
   name,
@@ -19,6 +22,10 @@ export const TextField = ({
   required = false,
   containerProps,
   description,
+  fullWidth,
+  className,
+  error = false,
+  helperText,
   ...rest
 }: TextFieldProps) => {
   return (
@@ -27,20 +34,34 @@ export const TextField = ({
       required={required}
       name={name}
       containerProps={{
-        ...(rest.fullWidth && { width: '100%' }),
+        ...(fullWidth && { style: { width: '100%' } }),
         ...containerProps,
       }}
     >
-      <MuiTextField
-        required={required}
+      <Input
         id={name}
         value={value}
-        label={label}
         name={name}
         onChange={onChange}
+        className={cn(
+          fullWidth && 'w-full',
+          'bg-input-background border-none placeholder:text-muted-foreground',
+          className,
+        )}
+        required={required}
+        aria-invalid={error}
         {...rest}
       />
-      <Typography variant="caption">{description}</Typography>
+      {helperText && (
+        <Typography variant="muted" className={cn(error && 'text-destructive')}>
+          {helperText}
+        </Typography>
+      )}
+      {description && (
+        <Typography variant="muted" className={cn(error && 'text-destructive')}>
+          {description}
+        </Typography>
+      )}
     </LabelWrapper>
   );
 };

package/src/components/Input/Textarea/Textarea.tsx

@@ -0,0 +1,67 @@
+import { cn } from '@/lib/utils';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
+import { Textarea as ShadcnTextarea } from '@/shadcn-components/Input/Textarea/Textarea';
+import * as React from 'react';
+import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
+
+export type TextareaProps = {
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
+  description?: string;
+  label?: React.ReactNode | string;
+  required?: boolean;
+  fullWidth?: boolean;
+  error?: boolean;
+  helperText?: React.ReactNode;
+} & React.ComponentProps<typeof ShadcnTextarea>;
+
+export const Textarea = ({
+  name,
+  label,
+  value,
+  onChange,
+  required = false,
+  containerProps,
+  description,
+  fullWidth,
+  className,
+  error = false,
+  helperText,
+  ...rest
+}: TextareaProps) => {
+  return (
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={{
+        ...(fullWidth && { style: { width: '100%' } }),
+        ...containerProps,
+      }}
+    >
+      <ShadcnTextarea
+        id={name}
+        value={value}
+        name={name}
+        onChange={onChange}
+        className={cn(
+          fullWidth && 'w-full',
+          'bg-input-background border-none placeholder:text-muted-foreground',
+          className,
+        )}
+        required={required}
+        aria-invalid={error}
+        {...rest}
+      />
+      {helperText && (
+        <Typography variant="muted" className={cn(error && 'text-destructive')}>
+          {helperText}
+        </Typography>
+      )}
+      {description && (
+        <Typography variant="muted" className={cn(error && 'text-destructive')}>
+          {description}
+        </Typography>
+      )}
+    </LabelWrapper>
+  );
+};

package/src/components/Input/export.ts

@@ -8,6 +8,7 @@ export * from './FormWrapper/FormWrapper';
 export * from './IconButtons/IconButtons';
 export * from './LabelWrapper/LabelWrapper';
 export * from './MultiCheckBox/MultiCheckBox';
+export * from './MultiSelect/MultiSelect';
 export * from './OtpInput/OtpInput';
 export * from './PasswordField/PasswordField';
 export * from './RadioGroup/RadioGroup';
@@ -16,5 +17,5 @@ export * from './Select/Select';
 export * from './SingleCheckBox/SingleCheckBox';
 export * from './SingleSelect/SingleSelect';
 export * from './Switch/Switch';
+export * from './Textarea/Textarea';
 export * from './TextField/TextField';
-export * from './TimePicker/TimePicker';