@chem-po/react-web 0.0.51 → 0.0.53

package/src/components/form/input/file.tsx

@@ -1,379 +0,0 @@
-import {
-  Center,
-  Flex,
-  HStack,
-  IconButton,
-  Image,
-  ImageProps,
-  Text,
-  useColorModeValue,
-  VStack,
-} from '@chakra-ui/react'
-import React, {
-  ChangeEventHandler,
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-import { FileValue, generateId, ImageViewOptions, InputRef, WithId } from '@chem-po/core'
-import { FileField, useImageSize, useObjectUrl } from '@chem-po/react'
-import { useBorderColor } from '../../../hooks'
-import { LoadingImage } from '../../loading/LoadingImage'
-import { PlayButton } from '../../media/PlayButton'
-import { FieldProps } from './types'
-
-const generateAccept = (field: FileField) => {
-  if (!field.accept) return undefined
-  const accept: string[] = []
-  if (field.accept.includes('image')) {
-    accept.push('image/jpg', 'image/jpeg', 'image/png', 'image/svg', 'image/gif')
-  }
-  if (field.accept.includes('pdf')) accept.push('application/pdf')
-  if (field.accept.includes('audio')) {
-    accept.push('audio/mp3', 'audio/wav', 'audio/x-wav', 'audio/webm', 'audio/ogg')
-  }
-  return accept.join(',')
-}
-
-export const AudioFileView = ({
-  hasUpload,
-  value,
-  noLabel,
-}: {
-  value: FileValue
-  noLabel?: boolean
-  hasUpload?: boolean
-}) => {
-  const media = useMemo<WithId<any>>(
-    () => ({
-      id: generateId(),
-      title: value.filename || 'Uploaded file',
-      artistName: '',
-      artistId: '',
-      storageDir: '',
-      producerId: '',
-      songwriterId: '',
-    }),
-    [value],
-  )
-
-  return (
-    <VStack>
-      <HStack spacing={4}>
-        <PlayButton withThumbnail media={media} />
-        {hasUpload ? (
-          <IconButton
-            w="40px"
-            h="40px"
-            p={2}
-            borderRadius="full"
-            boxShadow="0 0 4px black"
-            aria-label="upload"
-            icon={<Image filter="invert(100%)" src="/svg/upload.svg" opacity={0.8} />}
-          />
-        ) : null}
-      </HStack>
-      {!noLabel && value.filename ? (
-        <Text fontSize="md">{value.filename || 'Uploaded file'}</Text>
-      ) : null}
-    </VStack>
-  )
-}
-
-const ImageFileView = ({
-  value,
-  options,
-  hasUpload,
-  loading: loadingProp,
-}: {
-  value: FileValue
-  options?: ImageViewOptions
-  hasUpload?: boolean
-  loading?: boolean
-}) => {
-  const [loaded, setLoaded] = useState(false)
-  const { url, loading } = useObjectUrl(value)
-  const [imageSize, setImageSize] = useState({ width: 0, height: 0 })
-  const { shape, placeholder, objectFit, withFullView, background } = options ?? {}
-  const {
-    src: placeholderSrc,
-    opacity: placeholderOpacity,
-    scale: placeholderScale,
-  } = placeholder ?? {}
-
-  const size = useImageSize(options, imageSize)
-  const { width: optWidth, height: optHeight } = size ?? {}
-
-  const opacity = useMemo(() => {
-    if (loaded) return url ? 1 : (placeholderOpacity ?? 0.8)
-    return 0
-  }, [loaded, url, placeholderOpacity])
-
-  const imageProps = useMemo<ImageProps>(() => {
-    if (!url) {
-      return {
-        width: size ? `${size.width * (placeholderScale ?? 0.9)}px` : 'auto',
-        height: size ? `${size.height * (placeholderScale ?? 0.9)}px` : '80px',
-      }
-    }
-    return {
-      objectFit: objectFit ?? (loaded && shape ? 'cover' : 'contain'),
-      onLoad: e => {
-        setLoaded(true)
-        setImageSize({
-          width: e.currentTarget.naturalWidth,
-          height: e.currentTarget.naturalHeight,
-        })
-      },
-    }
-  }, [url, size, placeholderScale, loaded, shape, objectFit])
-  const isLoading = !!loadingProp || loading
-  const width = typeof optWidth === 'number' ? `${optWidth}px` : 'auto'
-  const height = typeof optHeight === 'number' ? `${optHeight}px` : '100px'
-  return (
-    <LoadingImage
-      width={width}
-      height={height}
-      withFullView={!hasUpload || withFullView}
-      overflow="hidden"
-      borderRadius={shape === 'circle' ? 'full' : 4}
-      boxShadow={shape ? '1px 1px 3px #00000066' : 'none'}
-      opacity={opacity}
-      background={background}
-      transition="opacity 333ms ease"
-      loadingOverride={isLoading}
-      imageProps={imageProps}
-      src={url ?? placeholderSrc}
-    />
-  )
-}
-
-const extensionIcons: Record<string, string> = {
-  txt: '/icons/description.svg',
-  pdf: '/icons/pdf.svg',
-  zip: '/icons/zip.svg',
-  '7z': '/icons/zip.svg',
-  rar: '/icons/zip.svg',
-}
-
-const ExtensionIcon = ({ value }: { value: FileValue | null | undefined }) => {
-  const extension = useMemo(() => {
-    if (!value) return ''
-    const parts = value.filename.split('.')
-    return parts[parts.length - 1]
-  }, [value])
-  const icon = extensionIcons[extension]
-  const filter = useColorModeValue('invert(0)', 'invert(1)')
-  if (!icon) return null
-
-  return <Image filter={extension !== 'pdf' ? filter : 'none'} h="24px" src={icon} />
-}
-
-const FileViewBody = ({
-  value,
-  noLabel,
-  imageOptions,
-  loading,
-  hasUpload,
-}: {
-  value: FileValue
-  imageOptions?: ImageViewOptions
-  loading?: boolean
-  noLabel?: boolean
-  hasUpload?: boolean
-}) => {
-  const fileType = useMemo(() => value.type?.split('/')?.[0], [value])
-  switch (fileType) {
-    case 'image':
-      return (
-        <ImageFileView
-          hasUpload={hasUpload}
-          loading={loading}
-          options={imageOptions}
-          value={value}
-        />
-      )
-    case 'audio':
-      return <AudioFileView noLabel={noLabel} value={value} hasUpload={hasUpload} />
-    case 'pdf':
-      return <Image src="/icons/pdf.svg" />
-    default:
-      return (
-        <Flex gap={2}>
-          <ExtensionIcon value={value} />
-          <Text>{value.filename}</Text>
-        </Flex>
-      )
-  }
-}
-
-const NoFileView = ({
-  hasUpload,
-  imageOptions,
-}: {
-  hasUpload?: boolean
-  imageOptions?: ImageViewOptions
-}) => {
-  const imageSize = useImageSize(imageOptions)
-  const { shape, placeholder } = imageOptions ?? {}
-  const {
-    src: placeholderSrc,
-    scale: placeholderScale,
-    opacity: placeholderOpacity,
-  } = placeholder ?? {}
-  const { width, height } = imageSize ?? {}
-  const filter = useColorModeValue('invert(0)', 'invert(1)')
-
-  const bg = useColorModeValue('whiteAlpha.500', 'whiteAlpha.100')
-  const borderColor = useBorderColor()
-
-  const body = imageOptions ? (
-    <Center
-      height={shape ? `${height}px` : 'auto'}
-      width={shape ? `${width}px` : 'auto'}
-      bg={shape ? bg : 'transparent'}
-      borderRadius={shape === 'circle' ? 'full' : 4}
-      overflow="hidden"
-      boxShadow={shape ? '1px 1px 4px #00000055' : 'none'}>
-      <Image
-        filter={filter}
-        opacity={placeholderOpacity}
-        height={typeof height === 'number' ? `${height * (placeholderScale ?? 0.6)}px` : '50px'}
-        src={placeholderSrc ?? '/icons/image.svg'}
-      />
-    </Center>
-  ) : (
-    <Text
-      border="1px dashed"
-      borderColor={borderColor}
-      p={3}
-      fontSize="sm"
-      textAlign="center"
-      w="100%"
-      opacity={0.8}>
-      {hasUpload ? 'Click to upload or drop file here' : 'No file uploaded'}
-    </Text>
-  )
-  return (
-    <Center
-      width={typeof width === 'number' ? `${width}px` : 'auto'}
-      height={typeof height === 'number' ? `${height}px` : 'auto'}>
-      {body}
-    </Center>
-  )
-}
-
-export const FileView = ({
-  value,
-  hasUpload,
-  noLabel,
-  loading,
-  imageOptions,
-}: {
-  value?: FileValue | null
-  hasUpload?: boolean
-  noLabel?: boolean
-  loading?: boolean
-  imageOptions?: ImageViewOptions
-}) => {
-  const { storagePath, dataUrl } = value ?? {}
-
-  const missingFile = useMemo(() => !dataUrl && !storagePath, [dataUrl, storagePath])
-  if (!value || missingFile) {
-    return <NoFileView hasUpload={hasUpload} imageOptions={imageOptions} />
-  }
-  return (
-    <FileViewBody
-      loading={loading}
-      imageOptions={imageOptions}
-      noLabel={noLabel}
-      hasUpload={hasUpload}
-      value={value}
-    />
-  )
-}
-export const FileComponent = forwardRef<InputRef, FieldProps<FileField>>(
-  ({ input: { value, onChange }, field }, ref) => {
-    const { imageOptions } = field || {}
-    const inputRef = useRef<HTMLInputElement>(null)
-
-    const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
-      e => {
-        const file = e.target.files?.[0]
-        if (!file) return
-        if (value?.dataUrl) URL.revokeObjectURL(value.dataUrl)
-
-        onChange({
-          ...value,
-          dataUrl: URL.createObjectURL(file),
-          type: file.type,
-          filename: file.name,
-        })
-      },
-      [onChange, value],
-    )
-
-    useImperativeHandle(ref, () => ({
-      focus: () => {
-        inputRef.current?.click()
-      },
-      blur: () => {
-        inputRef.current?.blur()
-      },
-    }))
-    const isImageField = useMemo(
-      () => field.accept?.length === 1 && field.accept[0] === 'image',
-      [field],
-    )
-    const imgOptions = useMemo<ImageViewOptions | undefined>(
-      () =>
-        isImageField || value?.type?.startsWith('image/') || value?.type?.startsWith('video/')
-          ? {
-              height: 120,
-              ...imageOptions,
-              objectFit: 'contain',
-            }
-          : undefined,
-      [imageOptions, isImageField, value],
-    )
-    return (
-      <Center
-        flexFlow="column"
-        position="relative"
-        cursor="pointer"
-        onClick={() => inputRef.current?.click()}
-        width="100%">
-        <Text fontSize="sm" opacity={0.8} mb={1}>
-          {field.placeholder}
-        </Text>
-        <Center
-          // maxW='160px'
-          width="100%"
-          position="relative"
-          p={2}
-          overflow="hidden">
-          <FileView hasUpload imageOptions={imgOptions} value={value} />
-          <input
-            onChange={handleChange}
-            ref={inputRef}
-            accept={generateAccept(field)}
-            type="file"
-            style={{
-              position: 'absolute',
-              pointerEvents: 'none',
-              height: 0.1,
-              width: 0.1,
-              opacity: 0,
-            }}
-          />
-        </Center>
-      </Center>
-    )
-  },
-)
-
-FileComponent.displayName = 'FileComponent'

package/src/components/form/input/hooks/index.ts

@@ -1,2 +0,0 @@
-export * from './useInputImperativeHandle'
-export * from './useInputStyles'

package/src/components/form/input/hooks/useInputImperativeHandle.ts

@@ -1,16 +0,0 @@
-import { InputRef } from '@chem-po/core'
-import { Ref, useImperativeHandle, useRef } from 'react'
-
-export const useInputImperativeHandle = (
-  ref: Ref<InputRef>,
-  onFocus?: () => void,
-  onBlur?: () => void,
-) => {
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  useImperativeHandle(ref, () => ({
-    focus: onFocus ?? (() => inputRef.current?.focus()),
-    blur: onBlur ?? (() => inputRef.current?.blur()),
-  }))
-  return inputRef
-}

package/src/components/form/input/hooks/useInputStyles.ts

@@ -1,125 +0,0 @@
-import { InputSize } from '@chem-po/core'
-import { useBackgroundColor, useTextColor } from '@chem-po/react'
-import { useMemo } from 'react'
-
-const inputStyles = {
-  input: {
-    width: '100%',
-    fontSize: '16px',
-    outline: 'none',
-  },
-  inputXSmall: {
-    padding: '4px 6px',
-    borderRadius: '3px',
-  },
-  inputSmall: {
-    padding: '6px 9px',
-    borderRadius: '4px',
-  },
-  inputMedium: {
-    padding: '8px 12px',
-    borderRadius: '6px',
-  },
-  inputLarge: {
-    padding: '10px 14px',
-    borderRadius: '8px',
-  },
-  inputTextSmall: {
-    fontSize: '14px',
-  },
-  inputTextMedium: {
-    fontSize: '16px',
-  },
-  inputTextLarge: {
-    fontSize: '18px',
-  },
-  buttonContainer: {
-    display: 'flex',
-    flexDirection: 'row' as const,
-    alignItems: 'center',
-  },
-  buttonContainerSmall: {
-    gap: '6px',
-  },
-  buttonContainerMedium: {
-    gap: '8px',
-  },
-  buttonContainerLarge: {
-    gap: '10px',
-  },
-}
-
-const iconSizeMap = {
-  sm: 16,
-  md: 20,
-  lg: 24,
-}
-
-const clearButtonSizeMap = {
-  sm: 12,
-  md: 14,
-  lg: 16,
-}
-
-const inputSizeMap = {
-  sm: inputStyles.inputSmall,
-  md: inputStyles.inputMedium,
-  lg: inputStyles.inputLarge,
-}
-
-const editableInputSizeMap = {
-  sm: inputStyles.inputXSmall,
-  md: inputStyles.inputSmall,
-  lg: inputStyles.inputMedium,
-}
-
-const inputTextSizeMap = {
-  sm: inputStyles.inputTextSmall,
-  md: inputStyles.inputTextMedium,
-  lg: inputStyles.inputTextLarge,
-}
-
-const buttonContainerSizeMap = {
-  sm: inputStyles.buttonContainerSmall,
-  md: inputStyles.buttonContainerMedium,
-  lg: inputStyles.buttonContainerLarge,
-}
-
-export interface UseInputStyles {
-  text: React.CSSProperties
-  container: React.CSSProperties
-  size: InputSize
-  iconSize: number
-  clearButtonSize: number
-  buttonContainer: React.CSSProperties
-}
-
-export const useInputStyles = (
-  inEditable: boolean | undefined,
-  size: InputSize | undefined,
-  formSize: InputSize = 'md',
-): UseInputStyles => {
-  const formElementBg = useBackgroundColor(150)
-  const bg = useMemo(
-    () => (inEditable ? 'transparent' : formElementBg),
-    [inEditable, formElementBg],
-  )
-  const textColor = useTextColor()
-  const usedSize = size ?? formSize
-
-  return {
-    text: { ...inputTextSizeMap[usedSize], color: textColor },
-    container: {
-      ...inputStyles.input,
-      ...(inEditable ? editableInputSizeMap[usedSize] : inputSizeMap[usedSize]),
-      backgroundColor: bg,
-    },
-    size: usedSize,
-    iconSize: iconSizeMap[usedSize],
-    clearButtonSize: clearButtonSizeMap[usedSize],
-    buttonContainer: {
-      ...inputStyles.buttonContainer,
-      ...buttonContainerSizeMap[usedSize],
-    },
-  }
-}

package/src/components/form/input/index.ts

@@ -1,2 +0,0 @@
-export * from './Editable'
-export * from './StandaloneInput'

package/src/components/form/input/input.css

@@ -1,44 +0,0 @@
-.react-date-picker,
-.react-datetime-picker,
-.react-time-picker {
-  border: none;
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0.25rem 0.25rem;
-  padding: 0.5rem 0.5rem;
-  /* box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); */
-  border: 1px solid #cdcdcd;
-  /* background-color: white; */
-}
-
-.react-date-picker__wrapper,
-.react-datetime-picker__wrapper,
-.react-time-picker__wrapper {
-  width: 100%;
-  display: flex;
-  border: none !important;
-}
-
-.react-date-picker__clear-button__icon,
-.react-date-picker__button__icon,
-.react-time-picker__clear-button,
-.react-time-picker__button__icon {
-  margin-left: auto;
-}
-
-.react-date-picker__inputGroup,
-.react-datetime-picker__inputGroup {
-  flex: 1;
-}
-
-.react-date-picker__inputGroup > input,
-.react-time-picker__inputGroup > input,
-.react-time-picker__inputGroup > select {
-  font-size: 1rem;
-  color: #000000aa;
-  background-color: transparent;
-  width: 50px;
-  outline: none;
-  margin: 0 0.3rem;
-  font-family: 'Public Sans';
-}

package/src/components/form/input/input.tsx

@@ -1,134 +0,0 @@
-import { Flex, FlexProps, Text, VStack } from '@chakra-ui/react'
-import { FieldType, InputRef } from '@chem-po/core'
-import { Field, TypedField } from '@chem-po/react'
-import React, { ForwardedRef, forwardRef, ForwardRefExoticComponent, useMemo } from 'react'
-import { BooleanComponent } from './boolean'
-import { ColorComponent } from './color'
-import { DateInput } from './date'
-import { DateTimeInput } from './datetime'
-import { FileComponent } from './file'
-import { MultipleSelectComponent } from './multipleSelect'
-import { CurrencyAmountComponent, NumberComponent } from './number'
-import { OptionalTag } from './OptionalTag'
-import { SelectComponent } from './select'
-import { SocialMediaComponent } from './socialMedia'
-import { TextComponent } from './text'
-import { TimeInput } from './time'
-import { FieldProps } from './types'
-
-type ComponentType<T extends Field> = ForwardRefExoticComponent<
-  FieldProps<T> & React.RefAttributes<InputRef>
->
-
-const Components: { [Key in FieldType]: ComponentType<TypedField<Key>> } = {
-  text: TextComponent,
-  file: FileComponent,
-  boolean: BooleanComponent,
-  select: SelectComponent,
-  multipleSelect: MultipleSelectComponent,
-  currency: CurrencyAmountComponent,
-  number: NumberComponent,
-  date: DateInput,
-  datetime: DateTimeInput,
-  time: TimeInput,
-  socialMedia: SocialMediaComponent,
-  color: ColorComponent,
-}
-
-const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<InputRef>) => {
-  const {
-    field,
-    meta: { error, active, touched },
-    input,
-    inEditable,
-  } = props
-
-  const { value } = input
-
-  const color = useMemo(() => {
-    if (error && touched) return '#ff7777'
-    if (active) return 'rgba(0,0,0,0.7)'
-    return 'rgba(0,0,0,0.3)'
-  }, [error, active, touched])
-  const { _type, optional, label: Label } = field
-  const showPlaceholder = useMemo(
-    () => _type === 'multipleSelect' || (!!value && _type !== 'file' && _type !== 'boolean'),
-    [value, _type],
-  )
-  const styles = useMemo<FlexProps>(() => {
-    if (inEditable) return {}
-    switch (_type) {
-      case 'text':
-      case 'number':
-      case 'currency':
-      case 'select':
-        return { boxShadow: `0 0 7px ${color}`, transition: 'all 300ms' }
-      default:
-        return {}
-    }
-  }, [_type, color, inEditable])
-  const Component = useMemo(() => Components[_type] as ComponentType<T>, [_type])
-
-  const pb = useMemo(() => {
-    if (inEditable) return 0
-    return error && touched ? 6 : 2
-  }, [inEditable, error, touched])
-  return (
-    <VStack
-      position="relative"
-      align="flex-start"
-      width="100%"
-      py={inEditable ? 0 : 1}
-      px={1}
-      spacing={0}
-      pb={pb}
-      transition="all 500ms"
-      pt={showPlaceholder && !inEditable ? 5 : 0}>
-      {Label && !inEditable ? (
-        typeof Label === 'string' ? (
-          <Text color="gray.800" fontSize="sm" px={2}>
-            {Label}
-          </Text>
-        ) : (
-          <Label />
-        )
-      ) : null}
-      <Flex width="100%" borderRadius={4} overflow="hidden" {...styles}>
-        <Component ref={ref} {...props} />
-      </Flex>
-      {inEditable ? null : (
-        <>
-          <Text
-            opacity={error && touched ? 1 : 0}
-            transition={`opacity 500ms ease ${error && touched ? 250 : 0}ms`}
-            position="absolute"
-            bottom="0px"
-            fontSize="sm"
-            px={1}
-            pointerEvents="none"
-            color="red.600">
-            {error}
-          </Text>
-          <Text
-            opacity={showPlaceholder ? 1 : 0}
-            transition={`opacity 500ms ease ${showPlaceholder ? 250 : 0}ms`}
-            position="absolute"
-            top="-5px"
-            pointerEvents="none"
-            fontSize="sm"
-            fontFamily="fonts.heading"
-            px={1}
-            color="blackAlpha.600"
-            _dark={{
-              color: 'whiteAlpha.600',
-            }}>
-            {field.placeholder || ''}
-          </Text>
-        </>
-      )}
-      {optional && !inEditable ? <OptionalTag field={field} value={value} /> : null}
-    </VStack>
-  )
-}
-
-export const Input = forwardRef<InputRef, FieldProps<Field>>(InputBase)