@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/InputSearch/input-search.tsx

@@ -0,0 +1,210 @@
+import { ComponentProps, forwardRef, useCallback } from 'react';
+
+import { Loader2 } from 'lucide-react';
+
+import { SearchLg } from '@/components/icons';
+
+import { Badge, Flex, RenderCondition } from '@/components';
+import { cn } from '@/utils';
+
+const INPUT_BASE_CLASSES = [
+  'h-full w-full',
+  'border-none bg-transparent outline-none',
+  'placeholder:text-gray-500 leading-10! placeholder:leading-10!',
+  'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+].join(' ');
+
+const CONTAINER_BASE_CLASSES = [
+  'border border-gray-300 w-full bg-white',
+  'transition-[color,box-shadow]',
+  'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+].join(' ');
+
+const INPUT_SIZE_CLASSES = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-base',
+} as const;
+
+const CONTAINER_SIZE_CLASSES = {
+  sm: 'px-3 h-10',
+  md: 'px-[14px] h-10',
+  lg: 'px-4 h-11',
+} as const;
+
+const ERROR_CLASSES = 'border-error-500 ring-error-500/20';
+const SUCCESS_CLASSES = 'border-green-500 ring-green-500/20';
+
+export interface InputSearchProps extends Omit<ComponentProps<'input'>, 'size' | 'type' | 'onChange'> {
+  /** Error state styling */
+  error?: boolean;
+
+  /** Success state styling */
+  success?: boolean;
+
+  /** Size of the input field */
+  size?: keyof typeof INPUT_SIZE_CLASSES;
+
+  /** Container rounded state styling */
+  rounded?: 'md' | 'lg' | '2xl' | '3xl' | 'full';
+
+  /** Callback triggered when search is performed (Enter key or button click) */
+  onSearch?: (value: string) => void;
+
+  /** Callback triggered when input value changes */
+  onChange?: (value: string) => void;
+
+  /** Text for the Enter button */
+  enterButtonText?: string;
+
+  /** Whether to show the Enter button */
+  showEnterButton?: boolean;
+
+  /** Whether to show the loading state */
+  loading?: boolean;
+
+  /** Test identifier */
+  'data-testid'?: string;
+
+  /** Whether the input has focus */
+  hasFocus?: boolean;
+}
+
+const InputSearchComponent = forwardRef<HTMLInputElement, InputSearchProps>(
+  ({
+    className,
+    error = false,
+    success = false,
+    size = 'md',
+    rounded = 'md',
+    disabled,
+    placeholder = 'Search...',
+    value,
+    defaultValue,
+    onSearch,
+    onChange,
+    enterButtonText = 'Enter',
+    showEnterButton = true,
+    loading = false,
+    hasFocus = true,
+    'data-testid': testId,
+    ...props
+  }, ref) => {
+    const isDisabled = disabled || loading;
+
+    const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(e.target.value);
+    }, [ onChange ]);
+
+    const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' && onSearch) {
+        e.preventDefault();
+        onSearch(e.currentTarget.value);
+      }
+    }, [ onSearch ]);
+
+    const handleSearchClick = useCallback(() => {
+      if (isDisabled) return;
+
+      if (onSearch) {
+        const inputValue = ref && typeof ref !== 'function' ? ref.current?.value || '' : '';
+        const propValue = value !== undefined ? String(value) : '';
+        const defaultPropValue = defaultValue !== undefined ? String(defaultValue) : '';
+        const currentValue = inputValue || propValue || defaultPropValue;
+        onSearch(currentValue);
+      }
+    }, [ onSearch, ref, value, defaultValue, isDisabled ]);
+
+    const containerClasses = cn(
+      CONTAINER_BASE_CLASSES,
+      CONTAINER_SIZE_CLASSES[size],
+      {
+        [ERROR_CLASSES]: error,
+        [SUCCESS_CLASSES]: success && !error,
+        'rounded-md': rounded === 'md',
+        'rounded-lg': rounded === 'lg',
+        'rounded-2xl': rounded === '2xl',
+        'rounded-3xl': rounded === '3xl',
+        'rounded-full': rounded === 'full',
+        'focus-within-primary': hasFocus,
+      },
+      className
+    );
+
+    const inputClasses = cn(
+      INPUT_BASE_CLASSES,
+      INPUT_SIZE_CLASSES[size]
+    );
+
+    return (
+      <Flex className={containerClasses}>
+        <Flex className="w-full h-full gap-2 items-center">
+          <SearchLg
+            className={cn(
+              'text-gray-400',
+              size === 'sm' && 'size-5 min-w-5',
+              size === 'md' && 'size-5 min-w-5',
+              size === 'lg' && 'size-6 min-w-6'
+            )}
+          />
+
+          <input
+            ref={ref}
+            type="text"
+            disabled={isDisabled}
+            data-slot="input"
+            data-testid={testId}
+            className={inputClasses}
+            aria-invalid={error}
+            placeholder={placeholder}
+            value={value}
+            defaultValue={defaultValue}
+            maxLength={props.maxLength ?? 255}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            {...props}
+          />
+
+          <RenderCondition condition={loading}>
+            <Loader2
+              className={cn(
+                'animate-spin text-muted-foreground',
+                size === 'sm' && 'size-4 min-w-4',
+                size === 'md' && 'size-5 min-w-5',
+                size === 'lg' && 'size-6 min-w-6'
+              )}
+            />
+          </RenderCondition>
+
+          <RenderCondition condition={!loading && showEnterButton}>
+
+            <Badge
+              className={cn(
+                'text-gray-500 cursor-pointer border-gray-200 transition-colors',
+                'hover:bg-gray-100 hover:text-gray-700',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm',
+                {
+                  'opacity-50 cursor-not-allowed': isDisabled,
+                  'hover:bg-transparent hover:text-gray-500': isDisabled,
+                },
+                size === 'sm' && 'px-0.5 py-0.5',
+                size === 'md' && 'px-1 py-0.5',
+                size === 'lg' && 'px-1.5 py-1'
+              )}
+              variant="outline"
+              onClick={handleSearchClick}
+              tabIndex={isDisabled ? -1 : 0}
+            >
+              {enterButtonText}
+            </Badge>
+          </RenderCondition>
+
+        </Flex>
+      </Flex>
+    );
+  }
+);
+
+InputSearchComponent.displayName = 'InputSearch';
+
+export const InputSearch = InputSearchComponent;

package/src/components/atoms/InputUpload/index.ts

@@ -0,0 +1 @@
+export { InputUpload, type InputUploadProps } from './input-upload';

package/src/components/atoms/InputUpload/input-upload.stories.tsx

@@ -0,0 +1,229 @@
+import { useState } from 'react';
+
+import { InputUpload, InputUploadProps } from './input-upload';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof InputUpload> = {
+  title: 'Components/Data Entry/InputUpload',
+  component: InputUpload,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'InputUpload is a versatile component for file uploads with drag & drop support, image preview, validation and loading states.',
+      },
+    },
+  },
+  argTypes: {
+    buttonText: { control: 'text' },
+    placeholder: { control: 'text' },
+    maxSize: { control: 'number' },
+    label: { control: 'text' },
+    helperText: { control: 'text' },
+    showPreview: { control: 'boolean' },
+    previewSize: {
+      control: 'select',
+      options: [ 'sm', 'md', 'lg', 'custom' ],
+    },
+    customPreviewVariant: { control: 'text' },
+    customPreviewSizes: { control: 'text' },
+    loading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    error: { control: 'text' },
+    accept: { control: 'text' },
+    previewVariant: {
+      control: 'select',
+      options: [ 'rounded', 'square', 'banner', 'custom' ],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CustomButtonText: Story = {
+  args: {
+    placeholder: 'Choose a file',
+    accept: '.csv,.xlsx',
+    maxSize: 20,
+    label: 'Data Spreadsheet',
+    buttonText: 'Choose File',
+    helperText: 'Import data from an Excel or CSV spreadsheet',
+  },
+};
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Select a file',
+    accept: '.jpg,.jpeg,.png,.pdf',
+    maxSize: 10,
+    label: 'File Upload',
+    helperText: 'Drag and drop a file or click to select',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Upload disabled',
+    accept: 'image/*',
+    maxSize: 10,
+    label: 'Upload Disabled',
+    disabled: true,
+    helperText: 'This field is temporarily unavailable',
+  },
+};
+
+function InteractiveExampleComponent(args: InputUploadProps) {
+  const [ file, setFile ] = useState<File | null>(null);
+  const [ error, setError ] = useState<string>('');
+  const [ loading, setLoading ] = useState(false);
+
+  const handleFileSelect = (selectedFile: File | null) => {
+    setFile(selectedFile);
+    setError('');
+
+    if (selectedFile) {
+      setLoading(true);
+      setTimeout(() => {
+        setLoading(false);
+      }, 2000);
+    }
+  };
+
+  const handleError = (errorMessage: string) => {
+    setError(errorMessage);
+  };
+
+  return (
+    <div className="space-y-4 w-[500px]">
+      <InputUpload
+        label="Interactive Example"
+        placeholder="Select a file to test"
+        accept="image/*,.pdf"
+        maxSize={5}
+        showPreview={true}
+        previewSize="md"
+        buttonText="Choose File"
+        helperText="Drag and drop or click to select"
+        onFileSelect={handleFileSelect}
+        onError={handleError}
+        loading={loading}
+        error={error}
+        {...args}
+      />
+
+      {file && (
+        <div className="p-4 bg-gray-50 rounded-lg">
+          <h4 className="font-medium text-gray-900 mb-2">Selected File:</h4>
+          <p className="text-sm text-gray-600">
+            Name: {file.name}<br />
+            Size: {(file.size / 1024 / 1024).toFixed(2)} MB<br />
+            Type: {file.type}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const InteractiveExample: Story = {
+  render: (args) => <InteractiveExampleComponent {...args} />,
+};
+
+export const LargePreview: Story = {
+  args: {
+    placeholder: 'Select an image',
+    accept: 'image/*',
+    maxSize: 10,
+    label: 'Featured Image',
+    showPreview: true,
+    previewSize: 'lg',
+    helperText: 'We recommend images with 16:9 aspect ratio',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    placeholder: 'Uploading...',
+    accept: 'image/*',
+    maxSize: 10,
+    label: 'Upload in Progress',
+    loading: true,
+    helperText: 'Please wait while the file is being processed',
+  },
+};
+
+export const MultipleVariants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <InputUpload
+        label="Simple Upload"
+        placeholder="Select a file"
+        accept="*/*"
+        maxSize={10}
+      />
+
+      <InputUpload
+        label="Upload with Preview"
+        placeholder="Select an image"
+        accept="image/*"
+        maxSize={5}
+        showPreview={true}
+        previewSize="md"
+      />
+
+      <InputUpload
+        label="Upload with Error"
+        placeholder="Select a file"
+        accept=".pdf"
+        maxSize={1}
+        error="File too large"
+      />
+
+      <InputUpload
+        label="Upload Loading"
+        placeholder="Processing..."
+        accept="image/*"
+        maxSize={10}
+        loading={true}
+      />
+    </div>
+  ),
+};
+
+export const SmallPreview: Story = {
+  args: {
+    placeholder: 'Select an icon',
+    accept: 'image/*',
+    maxSize: 2,
+    label: 'Project Icon',
+    showPreview: true,
+    previewSize: 'sm',
+    helperText: 'Icons should be no larger than 2MB',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    placeholder: 'Select a file',
+    accept: '.pdf,.doc,.docx',
+    maxSize: 5,
+    label: 'Document',
+    error: 'File too large. Maximum size: 5MB',
+  },
+};
+
+export const WithImagePreview: Story = {
+  args: {
+    placeholder: 'Select an image',
+    accept: 'image/*',
+    maxSize: 5,
+    label: 'Profile Picture',
+    showPreview: true,
+    previewSize: 'md',
+    helperText: 'Accepted formats: JPG, PNG, GIF (max 5MB)',
+  },
+};
+