@xjur-ui/react 1.0.6 → 2.1.0

package/src/components/upload.tsx

@@ -0,0 +1,647 @@
+import type { ComponentProps, DragEvent, ChangeEvent } from 'react'
+import { useRef, useState, useCallback, createContext, useContext } from 'react'
+import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
+import { Icon, type IconType } from './icon'
+import { Button } from './form/button'
+import { Switch } from './form/switch'
+import { InputRoot, InputContent, InputText } from './form/input'
+import {
+  SelectRoot,
+  SelectTrigger,
+  SelectContent,
+  SelectOption
+} from './form/select'
+
+export interface FileFormat {
+  name: string
+  type: string
+  fileBinary: File
+  restrict?: boolean
+  description?: string
+  fileType?: string
+}
+
+export interface FileTypeOption {
+  value: string
+  label: string
+}
+
+interface UploadContextValue {
+  files: FileFormat[]
+  onFilesChange?: (files: FileFormat[]) => void
+  accept?: string
+  multiple?: boolean
+  disabled?: boolean
+  maxFiles?: number
+  maxSize?: number
+  acceptedFormats?: string[]
+}
+
+const UploadContext = createContext<UploadContextValue | null>(null)
+
+function useUploadContext() {
+  const context = useContext(UploadContext)
+  if (!context) {
+    throw new Error('Upload components must be used within UploadRoot')
+  }
+  return context
+}
+
+interface UploadRootProps extends ComponentProps<'div'> {
+  files: FileFormat[]
+  onFilesChange?: (files: FileFormat[]) => void
+  accept?: string
+  multiple?: boolean
+  disabled?: boolean
+  maxFiles?: number
+  maxSize?: number
+  acceptedFormats?: string[]
+}
+
+function UploadRoot({
+  children,
+  className,
+  files,
+  onFilesChange,
+  accept,
+  multiple = false,
+  disabled = false,
+  maxFiles = 1,
+  maxSize,
+  acceptedFormats = ['.jpeg', '.png', '.webp'],
+  ...props
+}: UploadRootProps) {
+  return (
+    <UploadContext.Provider
+      value={{
+        files,
+        onFilesChange,
+        accept,
+        multiple,
+        disabled,
+        maxFiles,
+        maxSize,
+        acceptedFormats
+      }}
+    >
+      <div className={cx('flex flex-col gap-4', className)} {...props}>
+        {children}
+      </div>
+    </UploadContext.Provider>
+  )
+}
+
+const uploadAreaVariants = cva(
+  [
+    'flex flex-col items-center justify-center',
+    'relative border-2 border-dashed border-border-layer-2 rounded-lg transition-all duration-200 ease-in-out cursor-pointer',
+    'hover:border-border-layer-2 hover:bg-transparent',
+    'focus-within:border-primary-idle focus-within:ring-2 focus-within:ring-primary-idle/20',
+    'data-[drag-over=true]:border-primary-idle data-[drag-over=true]:bg-primary-alt-idle/10'
+  ],
+  {
+    variants: {
+      size: {
+        large: 'p-6 min-h-[200px] ',
+        medium: 'p-6 min-h-[160px]',
+        small: 'p-6 min-h-[130px]',
+        oneLine: 'p-4 min-h-[18px]'
+      },
+      showButton: {
+        true: '',
+        false: ''
+      },
+      variant: {
+        default: 'bg-white',
+        transparent: 'bg-transparent',
+        minimal: 'bg-white',
+        oneLineWhite: 'bg-white',
+        oneLineTransparent: 'bg-transparent'
+      }
+    },
+    compoundVariants: [
+      {
+        size: 'large',
+        showButton: true
+      },
+      {
+        size: 'medium',
+        showButton: true
+      },
+      {
+        size: 'small',
+        showButton: true
+      },
+      {
+        variant: 'oneLineWhite',
+        showButton: false,
+        className: 'items-center flex flex-row justify-center'
+      },
+      {
+        variant: 'oneLineTransparent',
+        showButton: false,
+        className: 'items-center flex flex-row justify-center'
+      }
+    ],
+    defaultVariants: {
+      size: 'large',
+      variant: 'default',
+      showButton: true
+    }
+  }
+)
+
+interface UploadAreaProps
+  extends Omit<ComponentProps<'div'>, 'onChange'>,
+    ClassVariantProps<typeof uploadAreaVariants> {
+  showAcceptedFormats?: boolean
+  buttonText?: string
+  description?: string
+  icon?: string
+  showButton?: boolean
+}
+
+function UploadArea({
+  className,
+  size = 'large',
+  showButton = true,
+  variant = 'default',
+  showAcceptedFormats = true,
+  buttonText = 'Selecionar arquivo',
+  description = 'Clique ou solte os arquivos para fazer o upload',
+  icon = 'upload',
+  ...props
+}: UploadAreaProps) {
+  const {
+    onFilesChange,
+    accept,
+    multiple,
+    disabled,
+    maxFiles,
+    maxSize,
+    acceptedFormats
+  } = useUploadContext()
+  const [isDragOver, setIsDragOver] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [dragCounter, setDragCounter] = useState(0)
+
+  const validateFiles = useCallback(
+    (files: File[]): FileFormat[] => {
+      let validFiles = files
+
+      if (maxFiles && maxFiles > 0) {
+        validFiles = validFiles.slice(0, maxFiles)
+      }
+
+      if (maxSize) {
+        validFiles = validFiles.filter(file => file.size <= maxSize)
+      }
+
+      if (accept) {
+        validFiles = validFiles.filter(file => {
+          const fileExtension = `.${file.name.split('.').pop()?.toLowerCase()}`
+          return acceptedFormats?.some(format =>
+            format.startsWith('.')
+              ? format === fileExtension
+              : file.type.includes(format)
+          )
+        })
+      }
+
+      return validFiles.map(file => ({
+        name: file.name,
+        type: file.type,
+        fileBinary: file,
+        restrict: false
+      }))
+    },
+    [maxFiles, maxSize, accept, acceptedFormats]
+  )
+
+  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setDragCounter(prev => prev + 1)
+    setIsDragOver(true)
+  }, [])
+
+  const handleDragLeave = useCallback(
+    (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setDragCounter(prev => prev - 1)
+      if (dragCounter <= 1) {
+        setIsDragOver(false)
+      }
+    },
+    [dragCounter]
+  )
+
+  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setIsDragOver(false)
+      setDragCounter(0)
+
+      if (disabled) return
+
+      const files = Array.from(e.dataTransfer.files)
+      const validFiles = validateFiles(files)
+
+      if (validFiles.length > 0) {
+        onFilesChange?.(validFiles)
+      }
+    },
+    [disabled, onFilesChange, validateFiles]
+  )
+
+  const handleFileSelect = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      if (disabled) return
+
+      const files = Array.from(e.target.files || [])
+      const validFiles = validateFiles(files)
+
+      if (validFiles.length > 0) {
+        onFilesChange?.(validFiles)
+      }
+    },
+    [disabled, onFilesChange, validateFiles]
+  )
+
+  return (
+    <UploadAreaTrigger
+      {...props}
+      aria-disabled={disabled}
+      aria-label={description}
+      className={cx(
+        uploadAreaVariants({ size, showButton, variant }),
+        className
+      )}
+      data-drag-over={isDragOver}
+      fileInputRef={fileInputRef}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      <input
+        accept={accept}
+        className="hidden"
+        disabled={disabled}
+        multiple={multiple}
+        ref={fileInputRef}
+        type="file"
+        onChange={handleFileSelect}
+      />
+
+      <UploadAreaContent
+        buttonText={buttonText}
+        description={description}
+        icon={icon}
+        showAcceptedFormats={showAcceptedFormats}
+        showButton={showButton}
+        variant={variant || 'default'}
+        onButtonClick={() => {
+          if (!disabled && fileInputRef.current) {
+            fileInputRef.current.click()
+          }
+        }}
+      />
+    </UploadAreaTrigger>
+  )
+}
+
+function UploadTitle({ children, className, ...props }: ComponentProps<'h3'>) {
+  return (
+    <h3
+      className={cx('text-neutral-dark text-lg font-semibold', className)}
+      {...props}
+    >
+      {children}
+    </h3>
+  )
+}
+
+interface UploadAreaContentProps extends ComponentProps<'div'> {
+  description?: string
+  icon?: string
+  showAcceptedFormats?: boolean
+  buttonText?: string
+  showButton?: boolean
+  onButtonClick?: () => void
+  variant?:
+    | 'default'
+    | 'transparent'
+    | 'minimal'
+    | 'oneLineWhite'
+    | 'oneLineTransparent'
+}
+
+function UploadAreaContent({
+  description = 'Clique ou solte os arquivos para fazer o upload',
+  icon = 'upload',
+  showAcceptedFormats = true,
+  buttonText = 'Selecionar arquivo',
+  showButton = true,
+  onButtonClick,
+  variant = 'default',
+  className,
+  ...props
+}: UploadAreaContentProps) {
+  const { acceptedFormats } = useUploadContext()
+
+  const formatAcceptedFormats = () => {
+    if (!showAcceptedFormats) return null
+
+    return (
+      <p className="text-neutral-secondary mt-2 text-sm">
+        Formatos aceitos: {acceptedFormats?.join(' ')}
+      </p>
+    )
+  }
+
+  const isOneLineVariant =
+    variant === 'oneLineWhite' || variant === 'oneLineTransparent'
+
+  if (isOneLineVariant) {
+    return (
+      <div
+        {...props}
+        className={cx(
+          'flex h-full items-center justify-center gap-4 text-center',
+          className
+        )}
+      >
+        <Icon
+          className="text-neutral-secondary text-4xl"
+          name={icon as IconType}
+        />
+        <p className="text-neutral-dark text-base font-medium">{description}</p>
+        {formatAcceptedFormats()}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      {...props}
+      className={cx(
+        'flex h-full w-full flex-col items-center gap-4 text-center',
+        className
+      )}
+    >
+      <div className="flex flex-col items-center">
+        <Icon
+          className="text-neutral-secondary mb-3 text-4xl"
+          name={icon as IconType}
+        />
+
+        <p className="text-neutral-dark mb-2 text-base font-medium">
+          {description}
+        </p>
+
+        {formatAcceptedFormats()}
+      </div>
+
+      {showButton && (
+        <div>
+          <Button
+            size="md"
+            variant="primary"
+            onClick={e => {
+              e.stopPropagation()
+              onButtonClick?.()
+            }}
+          >
+            {buttonText}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface UploadAreaTriggerProps extends ComponentProps<'div'> {
+  fileInputRef?: React.RefObject<HTMLInputElement | null>
+}
+
+function UploadAreaTrigger({
+  children,
+  fileInputRef,
+  ...props
+}: UploadAreaTriggerProps) {
+  const { disabled } = useUploadContext()
+
+  const handleClick = useCallback(() => {
+    if (!disabled && fileInputRef?.current) {
+      fileInputRef.current.click()
+    }
+  }, [disabled, fileInputRef])
+
+  return (
+    <div
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      onClick={handleClick}
+      onKeyDown={e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          handleClick()
+        }
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+interface EditableFilesListProps {
+  fileTypeOptions?: FileTypeOption[]
+  onUpdateFile?: (index: number, file: Partial<FileFormat>) => void
+  onDeleteFile?: (index: number) => void
+  onReorderFiles?: (fromIndex: number, toIndex: number) => void
+  className?: string
+}
+
+function EditableFilesList({
+  fileTypeOptions = [
+    { value: 'document', label: 'Documento' },
+    { value: 'image', label: 'Imagem' },
+    { value: 'video', label: 'Vídeo' },
+    { value: 'audio', label: 'Áudio' },
+    { value: 'other', label: 'Outro' }
+  ],
+  onUpdateFile,
+  onDeleteFile,
+  className,
+  ...props
+}: EditableFilesListProps) {
+  const { files, onFilesChange } = useUploadContext()
+
+  if (!files || files.length === 0) return null
+
+  const handleDescriptionChange = (index: number, description: string) => {
+    if (onUpdateFile) {
+      onUpdateFile(index, { description })
+    } else {
+      const updatedFiles = [...files]
+      updatedFiles[index] = { ...updatedFiles[index], description }
+      onFilesChange?.(updatedFiles)
+    }
+  }
+
+  const handleFileTypeChange = (index: number, fileType: string) => {
+    if (onUpdateFile) {
+      onUpdateFile(index, { fileType })
+    } else {
+      const updatedFiles = [...files]
+      updatedFiles[index] = { ...updatedFiles[index], fileType }
+      onFilesChange?.(updatedFiles)
+    }
+  }
+
+  const handleRestrictChange = (index: number, restrict: boolean) => {
+    if (onUpdateFile) {
+      onUpdateFile(index, { restrict })
+    } else {
+      const updatedFiles = [...files]
+      updatedFiles[index] = { ...updatedFiles[index], restrict }
+      onFilesChange?.(updatedFiles)
+    }
+  }
+
+  const handleDelete = (index: number) => {
+    if (onDeleteFile) {
+      onDeleteFile(index)
+    } else {
+      const updatedFiles = files.filter((_, i) => i !== index)
+      onFilesChange?.(updatedFiles)
+    }
+  }
+
+  return (
+    <div className={cx('space-y-2', className)} {...props}>
+      <div className="border-border-layer-2 p-4">
+        <div className="border-border-layer-2 mb-3 flex w-full flex-row items-center justify-between gap-4 border-b pb-2">
+          <div className="w-full">
+            <span className="text-sm font-medium text-gray-300">Descrição</span>
+          </div>
+          <div className="w-full">
+            <span className="text-sm font-medium text-gray-300">Tipo</span>
+          </div>
+          <div className="flex justify-end">
+            <span className="text-sm font-medium text-gray-300">Restrito</span>
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          {files.map((file, index) => (
+            <div className="flex flex-row items-center gap-4 py-3" key={index}>
+              <div className="flex justify-start">
+                <Icon
+                  className="text-neutral-secondary hover:text-neutral-dark cursor-grab"
+                  name="drag_indicator"
+                />
+              </div>
+
+              <div className="w-full">
+                <InputRoot>
+                  <InputContent>
+                    <InputText
+                      placeholder="Nome do arquivo"
+                      value={file.description || file.name}
+                      onChange={e =>
+                        handleDescriptionChange(index, e.target.value)
+                      }
+                    />
+                  </InputContent>
+                </InputRoot>
+              </div>
+
+              <div className="w-full">
+                <SelectRoot>
+                  <SelectTrigger className="flex justify-between">
+                    <span className="text-neutral-dark">
+                      {fileTypeOptions.find(
+                        option => option.value === file.fileType
+                      )?.label || 'Tipo'}
+                    </span>
+                    <Icon
+                      className="text-neutral-secondary"
+                      name="keyboard_arrow_down"
+                    />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {fileTypeOptions.map(option => (
+                      <SelectOption
+                        key={option.value}
+                        value={option.value}
+                        onSelect={() =>
+                          handleFileTypeChange(index, option.value)
+                        }
+                      >
+                        {option.label}
+                      </SelectOption>
+                    ))}
+                  </SelectContent>
+                </SelectRoot>
+              </div>
+
+              <div className="flex justify-end">
+                <Switch
+                  checked={file.restrict || false}
+                  onCheckedChange={checked =>
+                    handleRestrictChange(index, checked)
+                  }
+                />
+              </div>
+
+              <div className="flex justify-end">
+                <Button
+                  appearance="ghost"
+                  size="sm"
+                  variant="destructive"
+                  onClick={() => handleDelete(index)}
+                >
+                  <Icon name="delete" />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const Upload = {
+  Root: UploadRoot,
+  Area: UploadArea,
+  Title: UploadTitle,
+  AreaContent: UploadAreaContent,
+  AreaTrigger: UploadAreaTrigger,
+  EditableList: EditableFilesList
+}
+
+export { UploadRoot }
+export { UploadArea }
+export { UploadTitle }
+export { UploadAreaContent }
+export { UploadAreaTrigger }
+export { EditableFilesList }
+export { uploadAreaVariants }
+export type {
+  UploadRootProps,
+  UploadAreaProps,
+  UploadAreaContentProps,
+  UploadAreaTriggerProps,
+  EditableFilesListProps
+}

package/src/index.css

@@ -1,5 +1,5 @@
 @import "tailwindcss";
 @import "@xjur-ui/styles/theme.css";
 @import "tw-animate-css";
-@plugin "tailwind-scrollbar-hide";
-@plugin "tailwind-scrollbar";
+@plugin "tailwind-scrollbar";
+@plugin "tailwind-scrollbar-hide";

package/src/resources/icons.ts

@@ -1,5 +1,7 @@
 export const icons = [
   'account_balance',
+  'assignment',
+  'task',
   'ad_units',
   'add_a_photo',
   'add',
@@ -144,7 +146,8 @@ export const icons = [
   'format_underlined',
   'format_list_bulleted',
   'format_list_numbered',
-  'redo'
+  'redo',
+  'more_horiz'
 ] as const
 
 export type IconType = (typeof icons)[number]

package/src/resources/logo/index.tsx

@@ -0,0 +1,33 @@
+import { Horizontal } from './horizontal'
+import { Vertical } from './vertical'
+import { Icon } from './icon'
+
+interface LogoWrapperProps {
+  mode: 'horizontal' | 'vertical' | 'icon'
+  variant: 'colorful' | 'orange' | 'purple' | 'white' | 'gray'
+  color?: string
+}
+
+export default function LogoWrapper({
+  mode,
+  variant,
+  color
+}: LogoWrapperProps) {
+  switch (mode) {
+    case 'icon':
+      if (variant === 'colorful' || !color) {
+        return <Icon.Colorful />
+      }
+      return <Icon.Solid color={color} />
+    case 'vertical':
+      if (variant === 'colorful' || !color) {
+        return <Vertical.Colorful />
+      }
+      return <Vertical.Solid color={color} />
+    case 'horizontal':
+      if (variant === 'colorful' || !color) {
+        return <Horizontal.Colorful />
+      }
+      return <Horizontal.Solid color={color} />
+  }
+}