@chem-po/react-web 0.0.5 → 0.0.6

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

@@ -0,0 +1,379 @@
+import {
+  Center,
+  Flex,
+  HStack,
+  IconButton,
+  Image,
+  ImageProps,
+  Text,
+  useColorModeValue,
+  VStack,
+} from '@chakra-ui/react'
+
+import { FileValue, generateId, ImageViewOptions, InputRef, WithId } from '@chem-po/core'
+import { FileField, useImageSize, useObjectUrl } from '@chem-po/react'
+import {
+  ChangeEventHandler,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from '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, noFullView, 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}
+      noFullView={hasUpload ?? noFullView}
+      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 && 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

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

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

@@ -0,0 +1,16 @@
+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/useInputStyle.ts

@@ -0,0 +1,39 @@
+import { InputSize } from '@chem-po/react'
+import { CSSProperties, useMemo } from 'react'
+
+const inputPaddingY: Record<InputSize, number> = {
+  xs: 0.25,
+  sm: 0.35,
+  md: 0.5,
+  lg: 0.5,
+  xl: 0.5,
+}
+
+const inputPaddingX: Record<InputSize, number> = {
+  xs: 0.5,
+  sm: 0.75,
+  md: 0.75,
+  lg: 0.75,
+  xl: 0.75,
+}
+const getInputPadding = (size: InputSize) => {
+  const paddingY = inputPaddingY[size]
+  const paddingX = inputPaddingX[size]
+  return `${paddingY}rem ${paddingX}rem`
+}
+const fontSize: Record<InputSize, string> = {
+  xs: '0.75rem',
+  sm: '0.875rem',
+  md: '1rem',
+  lg: '1.125rem',
+  xl: '1.25rem',
+}
+
+export const useInputStyle = (size?: InputSize) =>
+  useMemo<Partial<CSSProperties>>(
+    () => ({
+      padding: getInputPadding(size ?? 'md'),
+      fontSize: fontSize[size ?? 'md'],
+    }),
+    [size],
+  )

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

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

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

@@ -0,0 +1,44 @@
+.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

@@ -0,0 +1,130 @@
+import { Flex, FlexProps, Text, VStack } from '@chakra-ui/react'
+import { FieldType, InputRef } from '@chem-po/core'
+import { Field, TypedField } from '@chem-po/react'
+import { 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 } = 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', bg: 'background.50' }
+      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 ? 4 : 0}>
+      {label && !inEditable ? (
+        <Text color="gray.800" fontSize="sm" px={2}>
+          {label}
+        </Text>
+      ) : null}
+      <Flex width="100%" borderRadius={4} py={0.5} 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="-4px"
+            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)

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

@@ -0,0 +1,55 @@
+import { Box, Button, Flex, Text, useColorMode } from '@chakra-ui/react'
+import { InputRef } from '@chem-po/core'
+import { MultipleSelectField } from '@chem-po/react'
+import { forwardRef, useImperativeHandle } from 'react'
+import { FieldProps } from '../types'
+
+export const MultipleSelectComponent = forwardRef<InputRef, FieldProps<MultipleSelectField>>(
+  ({ field, input, inEditable }, ref) => {
+    const { options, renderOption, getOptionKey } = field
+    const { onChange, value, onFocus, onBlur } = input
+    const { colorMode } = useColorMode()
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        onFocus()
+      },
+      blur: () => {
+        onBlur()
+      },
+    }))
+
+    const body = (
+      <Flex w="100%" flexFlow="row wrap">
+        {options.map(o => (
+          <Box key={getOptionKey ? getOptionKey(o) : o} p={0.5}>
+            <Button
+              w="100%"
+              minH={0}
+              size="xs"
+              p={0}
+              opacity={value?.includes(o) ? 1 : 0.7}
+              variant="unstyled"
+              onClick={e => {
+                e.stopPropagation()
+                onChange(value?.includes(o) ? value.filter(v => v !== o) : [...(value ?? []), o])
+              }}
+              _hover={{ opacity: 0.8 }}>
+              {renderOption(o, colorMode, !!value?.includes(o))}
+            </Button>
+          </Box>
+        ))}
+      </Flex>
+    )
+
+    return inEditable ? (
+      <Flex py={0.5} flexFlow="column" w="100%">
+        <Text lineHeight={1} px={2} opacity={0.8} fontSize="sm" fontWeight={600}>
+          {field.placeholder}
+        </Text>
+        {body}
+      </Flex>
+    ) : (
+      body
+    )
+  },
+)