@chem-po/react-web 0.0.5 → 0.0.6

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

@@ -0,0 +1,75 @@
+import {
+  HStack,
+  Slider,
+  SliderFilledTrack,
+  SliderProps,
+  SliderThumb,
+  SliderTrack,
+  StackProps,
+  Text,
+  Tooltip,
+} from '@chakra-ui/react'
+import { Gradient, gradientToCssGradientProp } from '@chem-po/core'
+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

@@ -0,0 +1,33 @@
+import { Flex, Text } from '@chakra-ui/react'
+import { Field } from '@chem-po/react'
+import { 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

@@ -0,0 +1,41 @@
+import { InputRef } from '@chem-po/core'
+import { Field, useStandaloneInput } from '@chem-po/react'
+import { 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

@@ -0,0 +1,53 @@
+import { Checkbox, Flex, Switch, Text } from '@chakra-ui/react'
+import { InputRef } from '@chem-po/core'
+import { BooleanField } from '@chem-po/react'
+import { ForwardedRef, forwardRef, useImperativeHandle } from 'react'
+import { FieldProps } from '../types'
+
+const BaseCheckboxComponent = (
+  { field, input: { onChange, value, ...input } }: FieldProps<BooleanField>,
+  ref: ForwardedRef<InputRef>,
+) => {
+  const { placeholder } = field
+  useImperativeHandle(ref, () => ({
+    focus: () => {},
+    blur: () => {},
+  }))
+  return (
+    <Checkbox isChecked={value} onChange={e => onChange(e.target.checked)} {...input}>
+      {placeholder}
+    </Checkbox>
+  )
+}
+
+const CheckboxBooleanComponent = forwardRef<InputRef, FieldProps<BooleanField>>(
+  BaseCheckboxComponent,
+)
+
+const BaseSwitchComponent = (
+  { field, input: { onChange, value, ...input } }: FieldProps<BooleanField>,
+  ref: ForwardedRef<InputRef>,
+) => {
+  const { placeholder } = field
+  useImperativeHandle(ref, () => ({
+    focus: () => {},
+    blur: () => {},
+  }))
+  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}>
+        {placeholder}
+      </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

@@ -0,0 +1,126 @@
+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 { 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

@@ -0,0 +1,122 @@
+import {
+  Button,
+  Image,
+  Popover,
+  PopoverArrow,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  Text,
+} from '@chakra-ui/react'
+import { 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

@@ -0,0 +1,93 @@
+import { HStack } from '@chakra-ui/react'
+import { InputRef } from '@chem-po/core'
+import { DateTimeField, FieldMeta } from '@chem-po/react'
+import { 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'