@chem-po/react-web 0.0.52 → 0.0.53

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

@@ -1,155 +0,0 @@
-import { CheckIcon, CloseIcon, EditIcon } from '@chakra-ui/icons'
-import { Flex, IconButton } from '@chakra-ui/react'
-import { palette } from '@chem-po/core'
-import {
-  CustomEditableViewProps,
-  EditableProps,
-  Field,
-  useColorModeValue,
-  useEditable,
-} from '@chem-po/react'
-import React, { CSSProperties, useCallback, useEffect } from 'react'
-import { CustomInputProps } from '../../../types/forms'
-import { LoadingOverlay } from '../../loading/Loading'
-import { UploadProgress } from '../UploadProgress'
-import { FieldView } from '../view'
-import { StandaloneInput } from './StandaloneInput'
-
-export const Editable = <T extends Field>({
-  value: initValue,
-  field,
-  onSubmit,
-  storagePath,
-  style,
-  onEditClose,
-  onEditOpen,
-  CustomInput,
-  CustomView,
-  containerStyle,
-  size,
-}: EditableProps<CSSProperties, CSSProperties, T>) => {
-  const {
-    inputRef,
-    onChange,
-    isLoading,
-    uploads,
-    editHovered,
-    handleEditOpen,
-    handleEditClose,
-    isEditing,
-    value,
-    setEditHovered,
-    shouldSubmitOnChange,
-    submit,
-    submitValue,
-  } = useEditable({
-    value: initValue,
-    field,
-    onSubmit,
-    storagePath,
-    onEditOpen,
-    onEditClose,
-  })
-
-  useEffect(() => {
-    if (isEditing) {
-      inputRef.current?.focus()
-    }
-  }, [isEditing, inputRef])
-
-  const editingBorderColor = useColorModeValue('#00000055', '#ffffff55')
-
-  const RenderInput = useCallback(
-    (props: CustomInputProps<T['defaultValue']>) => {
-      if (CustomInput) {
-        return <CustomInput {...props} />
-      }
-      if (!field) throw new Error('Editable component must have a field OR a CustomInput')
-      return <StandaloneInput field={field} {...props} />
-    },
-    [CustomInput, field],
-  )
-
-  const RenderView = useCallback(
-    (props: CustomEditableViewProps<T['defaultValue']>) => {
-      if (CustomView) {
-        return <CustomView {...props} />
-      }
-      if (!field) throw new Error('Editable component must have a field OR a CustomView')
-      return <FieldView style={style} field={field} value={value} {...props} />
-    },
-    [CustomView, field, style, value],
-  )
-
-  return (
-    <Flex
-      borderRadius={4}
-      border={`1px dashed ${editHovered && !isEditing ? editingBorderColor : 'transparent'}`}
-      flexFlow="column"
-      w="100%"
-      style={containerStyle}>
-      <Flex align="center" px={1} position="relative" w="100%">
-        <Flex
-          opacity={isLoading ? 0 : 1}
-          transition="all 300ms"
-          mr={1}
-          border={`1px dashed ${isEditing ? editingBorderColor : 'transparent'}`}
-          flex={1}
-          minW="0">
-          {isEditing || shouldSubmitOnChange ? (
-            <RenderInput
-              ref={inputRef}
-              value={value}
-              inEditable
-              style={{ padding: 0, ...style }}
-              size={size}
-              onChange={shouldSubmitOnChange ? v => void submitValue(v) : onChange}
-              inputStyle={style}
-            />
-          ) : (
-            <RenderView inEditable size={size} value={value} />
-          )}
-        </Flex>
-        {shouldSubmitOnChange ? null : (
-          <>
-            <IconButton
-              aria-label="Edit"
-              size="xs"
-              icon={isEditing ? <CloseIcon width={3} /> : <EditIcon />}
-              onMouseEnter={() => setEditHovered(true)}
-              onMouseLeave={() => setEditHovered(false)}
-              onClick={() => {
-                if (isEditing) {
-                  onChange(value)
-                  handleEditClose()
-                } else handleEditOpen()
-              }}
-            />
-            <Flex
-              transition="all 300ms"
-              justify="flex-end"
-              opacity={isEditing ? 1 : 0}
-              overflow="hidden"
-              w={isEditing ? '30px' : '0px'}>
-              <IconButton
-                aria-label="Edit"
-                size="xs"
-                bg={palette.cyan.light}
-                _dark={{ bg: palette.cyan.light, _hover: { bg: palette.cyan.lighter } }}
-                _hover={{
-                  bg: palette.cyan.medium,
-                }}
-                icon={<CheckIcon filter="drop-shadow(1px 1px 3px #000000aa)" />}
-                onClick={() => {
-                  submit()
-                }}
-              />
-            </Flex>
-          </>
-        )}
-        <LoadingOverlay isLoading={isLoading} />
-      </Flex>
-      <UploadProgress uploads={uploads} />
-    </Flex>
-  )
-}

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

@@ -1,76 +0,0 @@
-import {
-  HStack,
-  Slider,
-  SliderFilledTrack,
-  SliderProps,
-  SliderThumb,
-  SliderTrack,
-  StackProps,
-  Text,
-  Tooltip,
-} from '@chakra-ui/react'
-import { Gradient, gradientToCssGradientProp } from '@chem-po/core'
-import React from 'react'
-import { GradientText } from '../../text/GradientText'
-
-export const InputSlider = ({
-  label,
-  stackProps,
-  gradient,
-  value,
-  min,
-  max,
-  ...props
-}: {
-  label: string
-  stackProps?: StackProps
-  gradient?: Gradient
-} & SliderProps) => {
-  const gradientCss = gradient ? gradientToCssGradientProp(gradient) : null
-  return (
-    <HStack
-      opacity={value !== undefined ? 1 : 0.5}
-      // filter={`grayscale(${value !== undefined ? 0 : 100}%)`}
-      _hover={{
-        opacity: 1,
-        // filter: 'grayscale(0%)',
-      }}
-      transition="all 500ms"
-      spacing={2}
-      width="100%"
-      align="center"
-      {...stackProps}>
-      <HStack w="100%" align="center">
-        {min !== undefined && gradientCss ? (
-          <GradientText fontSize="sm" color={gradientCss}>
-            {typeof min === 'number' ? min.toFixed((props?.step ?? 1) < 1 ? 2 : 0) : ''}
-          </GradientText>
-        ) : null}
-        {min !== undefined && !gradientCss ? (
-          <Text>{typeof min === 'number' ? min.toFixed((props?.step ?? 1) < 1 ? 2 : 0) : ''}</Text>
-        ) : null}
-        <Slider min={min} max={max} step={1} aria-label={label} flex={1} {...props}>
-          <SliderTrack bg="gray.400">
-            <SliderFilledTrack bg={gradientCss ?? 'blackAlpha.500'} />
-          </SliderTrack>
-          <Tooltip
-            bg="gray.100"
-            color="gray.500"
-            placement="top"
-            hasArrow
-            label={typeof value === 'number' ? value.toFixed(0) : ''}>
-            <SliderThumb width={2} height={4} />
-          </Tooltip>
-        </Slider>
-        {max !== undefined && gradientCss ? (
-          <GradientText fontSize="sm" color={gradientCss}>
-            {typeof max === 'number' ? max.toFixed((props?.step ?? 1) < 1 ? 2 : 0) : ''}
-          </GradientText>
-        ) : null}
-        {max !== undefined && !gradientCss ? (
-          <Text>{typeof max === 'number' ? max.toFixed((props?.step ?? 1) < 1 ? 2 : 0) : ''}</Text>
-        ) : null}
-      </HStack>
-    </HStack>
-  )
-}

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

@@ -1,33 +0,0 @@
-import { Flex, Text } from '@chakra-ui/react'
-import { Field } from '@chem-po/react'
-import React, { useMemo } from 'react'
-
-export const OptionalTag = <T extends Field>({
-  value,
-  field,
-}: {
-  field: T
-  value: T['defaultValue'] | undefined | null
-}) => {
-  const top = useMemo(() => {
-    if (value === '' || value === undefined || value === null) return 1
-    switch (field._type) {
-      case 'text':
-      case 'number':
-      case 'select':
-      case 'date':
-      case 'time':
-      case 'datetime':
-        return -1
-      default:
-        return 1
-    }
-  }, [value, field])
-  return (
-    <Flex transition="top 300ms" top={top} position="absolute" right={3}>
-      <Text fontSize="xs" opacity={0.6}>
-        OPTIONAL
-      </Text>
-    </Flex>
-  )
-}

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

@@ -1,41 +0,0 @@
-import { InputRef } from '@chem-po/core'
-import { Field, useStandaloneInput } from '@chem-po/react'
-import React, { CSSProperties, ForwardedRef, forwardRef } from 'react'
-import { Input } from './input'
-
-const StandaloneInputBase = (
-  {
-    onChange,
-    value,
-    field,
-    onBlur,
-    inEditable,
-    onFocus,
-    style,
-  }: {
-    onChange: (v?: any) => void
-    value?: any
-    field: Field
-    onBlur?: () => void
-    onFocus?: () => void
-    theme?: 'basic' | 'detailed'
-    inEditable?: boolean
-    style?: CSSProperties
-  },
-  ref: ForwardedRef<InputRef>,
-) => {
-  const { inputProps, meta } = useStandaloneInput(field, value, onChange, onFocus, onBlur)
-
-  return (
-    <Input
-      ref={ref}
-      field={field}
-      inEditable={inEditable}
-      style={style}
-      input={inputProps}
-      meta={meta}
-    />
-  )
-}
-
-export const StandaloneInput = forwardRef(StandaloneInputBase)

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

@@ -1,53 +0,0 @@
-import { Checkbox, Flex, Switch, Text } from '@chakra-ui/react'
-import { InputRef } from '@chem-po/core'
-import { BooleanField, useBooleanFieldText } from '@chem-po/react'
-import React, { ForwardedRef, forwardRef, useImperativeHandle } from 'react'
-import { FieldProps } from '../types'
-
-const BaseCheckboxComponent = (
-  { field, input: { onChange, value, ...input } }: FieldProps<BooleanField>,
-  ref: ForwardedRef<InputRef>,
-) => {
-  useImperativeHandle(ref, () => ({
-    focus: () => {},
-    blur: () => {},
-  }))
-  const text = useBooleanFieldText(field, value)
-  return (
-    <Checkbox isChecked={value} onChange={e => onChange(e.target.checked)} {...input}>
-      {text}
-    </Checkbox>
-  )
-}
-
-const CheckboxBooleanComponent = forwardRef<InputRef, FieldProps<BooleanField>>(
-  BaseCheckboxComponent,
-)
-
-const BaseSwitchComponent = (
-  { field, input: { onChange, value, ...input } }: FieldProps<BooleanField>,
-  ref: ForwardedRef<InputRef>,
-) => {
-  useImperativeHandle(ref, () => ({
-    focus: () => {},
-    blur: () => {},
-  }))
-  const text = useBooleanFieldText(field, value)
-  return (
-    <Flex gap={1} align="center">
-      <Switch isChecked={value} onChange={e => onChange(e.target.checked)} {...input} />
-      <Text fontWeight={600} opacity={value ? 0.9 : 0.6}>
-        {text}
-      </Text>
-    </Flex>
-  )
-}
-
-const SwitchBooleanComponent = forwardRef<InputRef, FieldProps<BooleanField>>(BaseSwitchComponent)
-
-const BaseBooleanComponent = (props: FieldProps<BooleanField>, ref: ForwardedRef<InputRef>) => {
-  if (props.field.type === 'switch') return <SwitchBooleanComponent ref={ref} {...props} />
-  return <CheckboxBooleanComponent ref={ref} {...props} />
-}
-
-export const BooleanComponent = forwardRef<InputRef, FieldProps<BooleanField>>(BaseBooleanComponent)

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

@@ -1,126 +0,0 @@
-import { Box, Center, HStack, SliderProps, StackProps, Text, VStack } from '@chakra-ui/react'
-
-import { colorValueToHex, Gradient, gradients, InputRef } from '@chem-po/core'
-import { ColorField } from '@chem-po/react'
-import React, { forwardRef, useCallback, useMemo } from 'react'
-import { useInputImperativeHandle } from '../hooks/useInputImperativeHandle'
-import { InputSlider } from '../InputSlider'
-import { FieldProps } from '../types'
-
-const ColorComponentSlider = ({
-  label,
-  stackProps,
-  gradient,
-  value,
-  ...props
-}: {
-  label: string
-  stackProps?: StackProps
-  gradient: Gradient
-} & SliderProps) => (
-  <InputSlider
-    label={label}
-    value={value}
-    min={0}
-    step={1}
-    max={255}
-    stackProps={{ width: '100%', ...stackProps }}
-    gradient={gradient}
-    {...props}
-  />
-)
-
-export const ColorComponent = forwardRef<InputRef, FieldProps<ColorField>>(
-  ({ input: { onChange, value }, field, meta }, ref) => {
-    // my colors: {r: 0, g: 0, b: 0, a: 0}
-    // input colors: '#rrggbbaa'
-    const { withAlpha, defaultValue } = field
-    const { active } = meta || {}
-
-    useInputImperativeHandle(ref)
-
-    const handleChange = useCallback(
-      (key: 'r' | 'g' | 'b' | 'a', val: number) => {
-        if (withAlpha) {
-          onChange({
-            r: 0,
-            g: 0,
-            b: 0,
-            a: 1,
-            ...value,
-            [key]: val,
-          })
-        } else {
-          onChange({
-            r: 0,
-            g: 0,
-            b: 0,
-            ...value,
-            [key]: val,
-          })
-        }
-      },
-      [value, onChange, withAlpha],
-    )
-
-    const withDefault = useMemo(() => ({ ...defaultValue, ...value }), [defaultValue, value])
-    const asHex = useMemo(() => colorValueToHex(!!withAlpha, withDefault), [withDefault, withAlpha])
-    return (
-      <HStack w="100%">
-        <Box
-          boxShadow="inset 0 0 12px rgba(255,255,255,0.4), 0 0 4px rgba(0,0,0,0.4)"
-          p={2}
-          bg="blackAlpha.800"
-          borderRadius="full">
-          <Center
-            transition="background 300ms"
-            bg={asHex}
-            width="80px"
-            h="80px"
-            borderRadius="full">
-            <Text style={{ fontSize: '1.3rem' }}>{asHex}</Text>
-          </Center>
-        </Box>
-        <VStack
-          spacing={1}
-          flex={1}
-          px={2}
-          align="flex-start"
-          borderRadius={6}
-          transition="all 400ms"
-          boxShadow={`0 0 5px ${active ? '#ffffff' : 'transparent'}`}>
-          <ColorComponentSlider
-            label="R"
-            gradient={gradients.red}
-            defaultValue={defaultValue.r}
-            value={value?.r}
-            onChange={updatedRed => handleChange('r', updatedRed)}
-          />
-          <ColorComponentSlider
-            label="G"
-            defaultValue={defaultValue.g}
-            gradient={gradients.green}
-            value={value?.g}
-            onChange={updatedGreen => handleChange('g', updatedGreen)}
-          />
-          <ColorComponentSlider
-            label="B"
-            gradient={gradients.blue}
-            defaultValue={defaultValue.b}
-            value={value?.b}
-            onChange={updatedBlue => handleChange('b', updatedBlue)}
-          />
-          {withAlpha ? (
-            <ColorComponentSlider
-              label="A"
-              gradient={gradients.midnight}
-              defaultValue={1}
-              value={value?.a}
-              onChange={updatedAlpha => handleChange('a', updatedAlpha)}
-            />
-          ) : null}
-        </VStack>
-      </HStack>
-    )
-  },
-)

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

@@ -1,122 +0,0 @@
-import {
-  Button,
-  Image,
-  Popover,
-  PopoverArrow,
-  PopoverContent,
-  PopoverTrigger,
-  Portal,
-  Text,
-} from '@chakra-ui/react'
-import React, { forwardRef, useImperativeHandle, useMemo } from 'react'
-import { DayPicker } from 'react-day-picker'
-// import 'react-day-picker/dist/style.css'
-import { getDateString, InputRef } from '@chem-po/core'
-import { DateField } from '@chem-po/react'
-import { FieldProps } from '../types'
-
-const padZeros = (n: number, digits: number) => {
-  let v = `${n}`
-  for (let i = v.length; i < digits; i += 1) {
-    v = `0${v}`
-  }
-  return v
-}
-export const parseDate = (date?: Date) =>
-  date
-    ? `${padZeros(date.getFullYear(), 4)}-${padZeros(date.getMonth() + 1, 2)}-${padZeros(
-        date.getDate(),
-        2,
-      )}`
-    : undefined
-export const DateInput = forwardRef<InputRef, FieldProps<DateField>>(
-  (props: FieldProps<DateField>, ref) => {
-    const {
-      input,
-      field: { placeholder, minDate, maxDate, optional },
-      meta: { active },
-    } = props
-    const { onChange, value, onFocus, onBlur } = input
-    const date = useMemo(() => (value ? new Date(`${value}T00:00:00.000`) : new Date()), [value])
-    const disabled = useMemo(() => {
-      const res: { from: Date; to: Date }[] = []
-      if (minDate !== undefined) {
-        res.push({
-          to: minDate === 'now' ? new Date() : new Date(minDate),
-          from: new Date(0),
-        })
-      }
-      if (maxDate !== undefined) {
-        res.push({
-          from: maxDate === 'now' ? new Date() : new Date(maxDate),
-          to: new Date(Infinity),
-        })
-      }
-      return res
-    }, [minDate, maxDate])
-
-    useImperativeHandle(ref, () => ({
-      focus: () => {},
-      blur: () => {},
-    }))
-
-    return (
-      <Popover
-        isOpen={active}
-        onOpen={onFocus}
-        onClose={onBlur}
-        closeDelay={100}
-        placement="bottom">
-        <PopoverTrigger>
-          <Button
-            w="100%"
-            fontFamily="Public Sans"
-            fontWeight="normal"
-            alignItems="center"
-            _hover={{ bg: '#efefef' }}
-            lineHeight={1}
-            variant="outline">
-            <Text fontSize="md" height="16px" align="left" flex={1}>
-              {value ? getDateString(value, 'short') : placeholder}
-            </Text>
-            <Image src="/svg/calendar.svg" height="20px" />
-          </Button>
-        </PopoverTrigger>
-        <Portal>
-          <PopoverContent zIndex={2} onFocus={onFocus}>
-            <PopoverArrow />
-            <DayPicker
-              required={!optional}
-              disabled={disabled}
-              styles={{
-                caption: {
-                  fontFamily: 'Public Sans',
-                  fontWeight: '400',
-                  fontSize: '0.9rem',
-                  color: '#555',
-                },
-                head: {
-                  fontFamily: 'Public Sans',
-                },
-                nav: {
-                  fontFamily: 'Public Sans',
-                },
-              }}
-              modifiersStyles={{
-                selected: {
-                  background: '#454545',
-                },
-              }}
-              // id={name}
-              mode="single"
-              selected={date}
-              onSelect={(updated: Date | undefined) => onChange(parseDate(updated))}
-            />
-          </PopoverContent>
-        </Portal>
-      </Popover>
-    )
-  },
-)
-
-DateInput.displayName = 'DateInput'

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

@@ -1,93 +0,0 @@
-import { HStack } from '@chakra-ui/react'
-import { InputRef } from '@chem-po/core'
-import { DateTimeField, FieldMeta } from '@chem-po/react'
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
-import { DateInput, parseDate } from '../date'
-import '../input.css'
-import { TimeInput } from '../time'
-import { FieldProps } from '../types'
-
-const parseDateAndTime = (timestamp?: number | string) => {
-  if (!timestamp) return { date: undefined, time: undefined }
-  const d = new Date(timestamp)
-  return { date: parseDate(d), time: d.toTimeString().substring(0, 5) }
-}
-
-export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
-  ({ input: { value, onBlur, onChange, onFocus } }, ref) => {
-    const [{ date, time }, set] = useState<{ date?: string; time?: string }>(
-      parseDateAndTime(value),
-    )
-    const [focusedElement, setFocused] = useState<'date' | 'time' | null>(null)
-    const handleChange = useCallback(
-      (type: 'date' | 'time', updated?: string) => {
-        if (type === 'date') {
-          set({ date: updated, time })
-          if (updated && time) onChange(new Date(`${updated}T${time}`).getTime())
-        } else {
-          set({ time: updated, date })
-          if (updated && date) {
-            onChange(new Date(`${date}T${updated}:00.000`).getTime())
-          }
-        }
-      },
-      [date, time, onChange],
-    )
-
-    useImperativeHandle(ref, () => ({
-      focus: () => {},
-      blur: () => {},
-    }))
-
-    const meta = useMemo<FieldMeta>(
-      () => ({
-        active: focusedElement === 'date',
-        error: undefined,
-        touched: false,
-      }),
-      [focusedElement],
-    )
-
-    return (
-      <HStack w="100%">
-        <DateInput
-          field={{ _type: 'date', placeholder: 'Date' }}
-          input={{
-            // name: '',
-            value: date,
-            onChange: (dateString: string) => {
-              handleChange('date', dateString)
-            },
-            onBlur: () => {
-              setFocused(null)
-              onBlur()
-            },
-            onFocus: () => {
-              setFocused('date')
-              onFocus()
-            },
-          }}
-          meta={meta}
-        />
-        <TimeInput
-          field={{ _type: 'time', placeholder: 'Time' }}
-          input={{
-            value: time,
-            onChange: e => handleChange('time', e.target.value),
-            onBlur: () => {
-              setFocused(null)
-              onBlur()
-            },
-            onFocus: () => {
-              setFocused('time')
-              onFocus()
-            },
-          }}
-          meta={meta}
-        />
-      </HStack>
-    )
-  },
-)
-
-DateTimeInput.displayName = 'DateTimeInput'