@chem-po/react-web 0.0.52 → 0.0.53

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

@@ -1,89 +0,0 @@
-import { Box, Button, Flex, Text, useColorMode } from '@chakra-ui/react'
-import { InputRef, RenderSelectOptionProps } from '@chem-po/core'
-import { MultipleSelectField } from '@chem-po/react'
-import React, { CSSProperties, forwardRef, useImperativeHandle, useMemo } from 'react'
-import { useInputStyles } from '../hooks/useInputStyles'
-import { FieldProps } from '../types'
-
-export const getRenderSelectedOptionText = (
-  field: MultipleSelectField,
-  textStyle: CSSProperties,
-) => {
-  return (
-    props: RenderSelectOptionProps<
-      MultipleSelectField['options'][number]['value'],
-      MultipleSelectField['options'][number]
-    >,
-  ) => {
-    const { renderOption: RenderOption } = field
-    if (typeof RenderOption === 'function') {
-      return <RenderOption {...props} />
-    }
-    return <Text style={textStyle}>{props.option.label}</Text>
-  }
-}
-
-export const MultipleSelectComponent = forwardRef<InputRef, FieldProps<MultipleSelectField>>(
-  ({ field, input, inEditable, formSize }, ref) => {
-    const { options, renderOption: RenderOption } = field
-    const { onChange, value, onFocus, onBlur } = input
-    const { text, size } = useInputStyles(inEditable, field.size, formSize)
-    const { colorMode } = useColorMode()
-    useImperativeHandle(ref, () => ({
-      focus: () => {
-        onFocus()
-      },
-      blur: () => {
-        onBlur()
-      },
-    }))
-
-    const RenderSelectedOptionText = useMemo(
-      () => getRenderSelectedOptionText(field, text),
-      [field, text],
-    )
-    const body = (
-      <Flex w="100%" flexFlow="row wrap">
-        {options.map(o => (
-          <Box key={o.value} p={0.5}>
-            <Button
-              w="100%"
-              minH={0}
-              size="xs"
-              p={0}
-              opacity={value?.includes(o.value) ? 1 : 0.7}
-              variant="unstyled"
-              onClick={e => {
-                e.stopPropagation()
-                onChange(
-                  value?.includes(o.value)
-                    ? value.filter(v => v !== o.value)
-                    : [...(value ?? []), o.value],
-                )
-              }}
-              _hover={{ opacity: 0.8 }}>
-              <RenderSelectedOptionText
-                value={o.value}
-                size={size}
-                option={o}
-                colorMode={colorMode}
-                isSelected
-              />
-            </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
-    )
-  },
-)

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

@@ -1,87 +0,0 @@
-import { useColorModeValue } from '@chakra-ui/react'
-import { InputRef } from '@chem-po/core'
-import { CurrencyAmountField, NumberField } from '@chem-po/react'
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import CurrencyInput from 'react-currency-input-field'
-import { InputSlider } from '../InputSlider'
-import { useInputImperativeHandle } from '../hooks/useInputImperativeHandle'
-import { useInputStyles } from '../hooks/useInputStyles'
-import { InputContainer } from '../shared/InputContainer'
-import { FieldProps } from '../types'
-import './styles.css'
-
-export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & { prefix?: string }>(
-  (
-    { input: { onChange, value, ...input }, field, formSize, prefix, inEditable, ...props },
-    ref,
-  ) => {
-    const { type, defaultValue, placeholder, size } = field
-    const className = useColorModeValue('number-input', 'number-input-dark')
-    const { container, text } = useInputStyles(inEditable, size, formSize)
-    const inputRef = useInputImperativeHandle(ref)
-    const [endsWith, setEndsWith] = useState('')
-    const displayed = typeof value === 'number' && !Number.isNaN(value) ? `${value}${endsWith}` : ''
-    const body =
-      type === 'slider' ? (
-        <InputSlider
-          label={placeholder}
-          onChange={onChange}
-          value={value}
-          defaultValue={defaultValue}
-        />
-      ) : (
-        <CurrencyInput
-          className={className}
-          placeholder={field.placeholder}
-          decimalsLimit={field.precision}
-          allowDecimals={!!field.precision}
-          prefix={prefix}
-          ref={inputRef}
-          onValueChange={(v, _, values) => {
-            if (v?.endsWith('.')) setEndsWith('.')
-            else if (v?.includes('.') && v?.endsWith('0')) setEndsWith('0')
-            else setEndsWith('')
-            onChange(values?.float)
-          }}
-          value={displayed}
-          {...props}
-          style={{
-            background: 'none',
-            // height: 'auto',
-            resize: 'none',
-            fontFamily: 'Encode Sans',
-            boxSizing: 'border-box',
-            opacity: value ? 1 : 0.7,
-            width: '100%',
-            borderRadius: '4px',
-            border: 'none',
-            outline: 'none',
-            ...text,
-            ...props.style,
-          }}
-          {...input}
-        />
-      )
-    return <InputContainer style={container}>{body}</InputContainer>
-  },
-)
-const BaseCurrencyAmountComponent = (
-  { field, ...props }: FieldProps<CurrencyAmountField>,
-  ref: ForwardedRef<InputRef>,
-) => {
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  useImperativeHandle(ref, () => ({
-    focus: () => {
-      inputRef.current?.focus()
-    },
-    blur: () => {
-      inputRef.current?.blur()
-    },
-  }))
-  return <NumberComponent prefix="$" field={{ ...field, _type: 'number' }} {...props} />
-}
-
-export const CurrencyAmountComponent = forwardRef<InputRef, FieldProps<CurrencyAmountField>>(
-  BaseCurrencyAmountComponent as any,
-)

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

@@ -1,8 +0,0 @@
-.number-input::placeholder {
-  opacity: 0.7;
-  color: #000;
-}
-.number-input-dark::placeholder {
-  opacity: 0.7;
-  color: white;
-}

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

@@ -1,109 +0,0 @@
-import {
-  Button,
-  Popover,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
-  Text,
-  useColorMode,
-} from '@chakra-ui/react'
-import { InputRef, RenderSelectOptionProps } from '@chem-po/core'
-import { SelectField, useBackgroundColor } from '@chem-po/react'
-import React, { forwardRef, useImperativeHandle, useMemo } from 'react'
-import { useInputStyles } from '../hooks/useInputStyles'
-import { InputContainer } from '../shared/InputContainer'
-import { FieldProps } from '../types'
-
-export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
-  ({ field, input, meta, inEditable, formSize }, ref) => {
-    const { placeholder, options, renderOption: customRender } = field
-    const { onChange, value, onFocus, onBlur } = input
-    const { text, size, container } = useInputStyles(inEditable, field.size, formSize)
-    const { active } = meta
-    const selected = useMemo(() => value && options.find(o => o.value === value), [value, options])
-    const { colorMode } = useColorMode()
-    useImperativeHandle(ref, () => ({
-      focus: () => {
-        onFocus()
-      },
-      blur: () => {
-        onBlur()
-      },
-    }))
-    const menuBg = useBackgroundColor(150)
-
-    const DefaultRenderOption = (props: RenderSelectOptionProps) => {
-      return <Text style={text}>{props.option.label}</Text>
-    }
-
-    const RenderOption = customRender ?? DefaultRenderOption
-
-    return (
-      <Popover strategy="fixed" placement="bottom" matchWidth isOpen={active} onClose={onBlur}>
-        <PopoverTrigger>
-          <Button
-            w="100%"
-            onClick={e => {
-              e.stopPropagation()
-              onFocus()
-            }}
-            variant="unstyled"
-            position="relative">
-            <InputContainer style={container}>
-              {selected ? (
-                <RenderOption
-                  size={size}
-                  value={selected.value}
-                  option={selected}
-                  colorMode={colorMode}
-                  isSelected={true}
-                />
-              ) : (
-                <Text fontWeight={400} style={text} opacity={0.6}>
-                  {placeholder}
-                </Text>
-              )}
-            </InputContainer>
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent
-          w="100%"
-          overflowY="auto"
-          maxH="300px"
-          bg={menuBg}
-          border="none"
-          boxShadow="0 0 8px rgba(0, 0, 0, 0.3)">
-          <PopoverBody p={0}>
-            {options.map(o => (
-              <Button
-                key={o.value}
-                w="100%"
-                variant="unstyled"
-                onClick={e => {
-                  e.stopPropagation()
-                  onChange(o.value)
-                  onBlur()
-                }}
-                display="flex"
-                justifyContent="flex-start"
-                alignItems="center"
-                px={3}
-                _hover={{ bg: 'blackAlpha.100' }}
-                _dark={{
-                  _hover: { bg: 'whiteAlpha.100' },
-                }}>
-                <RenderOption
-                  value={o.value}
-                  option={o}
-                  size={size}
-                  colorMode={colorMode}
-                  isSelected={o.value === value}
-                />
-              </Button>
-            ))}
-          </PopoverBody>
-        </PopoverContent>
-      </Popover>
-    )
-  },
-)

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

@@ -1,13 +0,0 @@
-import { Flex } from '@chakra-ui/react'
-import React, { CSSProperties, PropsWithChildren } from 'react'
-
-export const InputContainer = ({
-  children,
-  style,
-}: PropsWithChildren<{ style: CSSProperties }>) => {
-  return (
-    <Flex width="100%" borderRadius={4} style={style}>
-      {children}
-    </Flex>
-  )
-}

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

@@ -1,165 +0,0 @@
-import {
-  Center,
-  Collapse,
-  HStack,
-  Image,
-  Input,
-  Popover,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
-  Text,
-  VStack,
-} from '@chakra-ui/react'
-
-import { getHandle, InputRef, SocialMediaSites } from '@chem-po/core'
-import { SocialMediaField } from '@chem-po/react'
-import React, {
-  FC,
-  ForwardedRef,
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-} from 'react'
-import { FieldProps } from '../types'
-
-const facebookLogo = '/icons/facebook.svg'
-const instagramLogo = '/icons/instagram.svg'
-const soundcloudLogo = '/icons/soundcloud.svg'
-const twitterLogo = '/icons/twitter.svg'
-const youtubeLogo = '/icons/youtube.svg'
-
-const siteToIcon: Record<SocialMediaSites, any> = {
-  facebook: facebookLogo,
-  instagram: instagramLogo,
-  twitter: twitterLogo,
-  youtube: youtubeLogo,
-  soundcloud: soundcloudLogo,
-}
-
-const SocialMediaSiteInput: FC<{
-  site: SocialMediaSites
-  value?: string
-  onChange: (v?: string) => void
-}> = ({ site, value, onChange }) => {
-  const { handle, error } = useMemo(() => {
-    try {
-      const h = getHandle(site, value)
-      return { handle: h }
-    } catch (e: any) {
-      return { error: e?.message ?? 'Error parsing handle' }
-    }
-  }, [value, site])
-  const displayedText = useMemo(
-    () => (handle ? `${site.toUpperCase()}: ${handle}` : site.toUpperCase()),
-    [site, handle],
-  )
-  return (
-    <Popover trigger="hover">
-      <PopoverTrigger>
-        <Center opacity={handle ? 1 : 0.6} borderRadius="full" width="34px" height="34px">
-          <Image
-            cursor="pointer"
-            filter={`grayscale(${handle ? 0 : 100}%)`}
-            height="24px"
-            width="24px"
-            objectFit="contain"
-            src={siteToIcon[site]}
-          />
-        </Center>
-      </PopoverTrigger>
-      <PopoverContent w="auto">
-        <PopoverBody overflow="hidden" borderRadius={4} p={0} w="auto">
-          <VStack spacing={0} p={2} w="300px" align="flex-start">
-            <Text fontSize="md">{displayedText}</Text>
-
-            <Collapse in={!!error} style={{ width: '100%' }}>
-              <Text px={1} bg="red.500" fontSize="sm" color="white">
-                {error}
-              </Text>
-            </Collapse>
-            <Input
-              onChange={e => onChange(e.target.value)}
-              placeholder="Handle or URL"
-              width="100%"
-              value={value}
-              size="md"
-            />
-          </VStack>
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
-  )
-}
-export const SocialMediaComponent = forwardRef<InputRef, FieldProps<SocialMediaField>>(
-  (props: FieldProps<SocialMediaField>, ref: ForwardedRef<InputRef>) => {
-    const {
-      input: { value, onChange },
-      field: { sites },
-    } = props
-    const handleChange = useCallback(
-      (site: SocialMediaSites, v?: string) => {
-        const { [site]: _curr, ...rest } = value ?? {}
-        if (!v && Object.keys(rest).length === 0) {
-          onChange({ target: { value: undefined } })
-        }
-        if (!v) onChange(rest)
-        onChange({ ...rest, [site]: v })
-      },
-      [onChange, value],
-    )
-
-    useImperativeHandle(ref, () => ({
-      blur: () => {},
-      focus: () => {},
-    }))
-
-    return (
-      <VStack w="100%" p={1}>
-        <VStack borderRadius={4} p={2} spacing={0} w="100%">
-          <Text fontSize="md">Links</Text>
-          <HStack>
-            {!sites || sites.facebook ? (
-              <SocialMediaSiteInput
-                onChange={v => handleChange('facebook', v)}
-                site="facebook"
-                value={value?.facebook}
-              />
-            ) : null}
-            {!sites || sites.instagram ? (
-              <SocialMediaSiteInput
-                onChange={v => handleChange('instagram', v)}
-                site="instagram"
-                value={value?.instagram}
-              />
-            ) : null}
-            {!sites || sites.twitter ? (
-              <SocialMediaSiteInput
-                onChange={v => handleChange('twitter', v)}
-                site="twitter"
-                value={value?.twitter}
-              />
-            ) : null}
-            {!sites || sites.youtube ? (
-              <SocialMediaSiteInput
-                onChange={v => handleChange('youtube', v)}
-                site="youtube"
-                value={value?.youtube}
-              />
-            ) : null}
-            {!sites || sites.soundcloud ? (
-              <SocialMediaSiteInput
-                onChange={v => handleChange('soundcloud', v)}
-                site="soundcloud"
-                value={value?.soundcloud}
-              />
-            ) : null}
-          </HStack>
-        </VStack>
-      </VStack>
-    )
-  },
-)
-
-SocialMediaComponent.displayName = 'SocialMediaComponent'

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

@@ -1,78 +0,0 @@
-import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
-import { IconButton, Input } from '@chakra-ui/react'
-import { InputRef } from '@chem-po/core'
-import { TextField } from '@chem-po/react'
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import { useInputStyles } from '../hooks'
-import { InputContainer } from '../shared/InputContainer'
-import { FieldProps } from '../types'
-import { TextAreaComponent } from './textarea'
-
-export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
-  ({ input, inEditable, meta, field, formSize }, ref) => {
-    const { placeholder, type } = field
-    const [isHidden, setIsHidden] = useState(type === 'password')
-    const { text, container } = useInputStyles(inEditable, field.size, formSize)
-    const { value } = input
-    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
-
-    useImperativeHandle(ref, () => ({
-      focus: () => {
-        inputRef.current?.focus()
-      },
-      blur: () => {
-        inputRef.current?.blur()
-      },
-    }))
-    const body =
-      type === 'textarea' ? (
-        <TextAreaComponent inEditable={inEditable} field={field} input={input} meta={meta} />
-      ) : (
-        <Input
-          ref={inputRef as any}
-          border="none"
-          _dark={{
-            border: 'none',
-          }}
-          borderRadius={0}
-          background="transparent"
-          _focus={{
-            border: 'none',
-            boxShadow: 'none',
-          }}
-          py={0}
-          px={0}
-          height="auto"
-          outline="none"
-          type={isHidden ? 'password' : 'text'}
-          placeholder={placeholder}
-          style={text}
-          {...input}
-          onChange={e => {
-            input.onChange({ target: { value: e.target.value } })
-          }}
-          value={value ?? ''}
-        />
-      )
-
-    return (
-      <InputContainer style={container}>
-        {body}
-        {type === 'password' && (
-          <IconButton
-            position="absolute"
-            right={2}
-            onClick={() => setIsHidden(!isHidden)}
-            variant="ghost"
-            icon={isHidden ? <ViewIcon /> : <ViewOffIcon />}
-            aria-label={isHidden ? 'show' : 'hide'}
-            title={isHidden ? 'Show' : 'Hide'}
-            size="xs"
-          />
-        )}
-      </InputContainer>
-    )
-  },
-)
-
-TextComponent.displayName = 'TextComponent'

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

@@ -1,43 +0,0 @@
-import { InputRef } from '@chem-po/core'
-import { TextField, useTextColor } from '@chem-po/react'
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef } from 'react'
-import TextareaAutosize from 'react-textarea-autosize'
-import { FieldProps } from '../types'
-
-export const TextAreaComponent = forwardRef<InputRef, FieldProps<TextField>>(
-  ({ input, field, inEditable }, ref: ForwardedRef<InputRef>) => {
-    const textColor = useTextColor()
-    const inputRef = useRef<HTMLTextAreaElement>(null)
-    useImperativeHandle(ref, () => ({
-      focus: () => {
-        inputRef.current?.focus()
-      },
-      blur: () => {
-        inputRef.current?.blur()
-      },
-    }))
-    return (
-      <TextareaAutosize
-        placeholder={field.placeholder}
-        minRows={2}
-        maxRows={5}
-        ref={inputRef}
-        style={{
-          // height: 'auto',
-          resize: 'none',
-          width: '100%',
-          color: textColor,
-          background: 'none',
-          fontFamily: 'fonts.body',
-          boxSizing: 'border-box',
-          borderRadius: '4px',
-          border: 'none',
-          outline: 'none',
-        }}
-        {...input}
-      />
-    )
-  },
-)
-
-TextAreaComponent.displayName = 'TextAreaComponent'

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

@@ -1,33 +0,0 @@
-import { Input } from '@chakra-ui/react'
-import { InputRef } from '@chem-po/core'
-import { TimeField } from '@chem-po/react'
-import React, { forwardRef, useImperativeHandle } from 'react'
-import { FieldProps } from '../types'
-// import '../input.css'
-
-export const TimeInput = forwardRef<InputRef, FieldProps<TimeField>>(
-  ({ field, input }: FieldProps<TimeField>, ref) => {
-    useImperativeHandle(ref, () => ({
-      focus: () => {},
-      blur: () => {},
-    }))
-    return (
-      <Input
-        fontFamily="Public Sans"
-        css={`
-          ::-webkit-calendar-picker-indicator {
-            background: url(/svg/clock.svg) center/80% no-repeat;
-            color: white;
-          }
-        `}
-        fontSize="md"
-        type="time"
-        placeholder={field.placeholder}
-        {...input}
-        value={input.value ?? ''}
-      />
-    )
-  },
-)
-
-TimeInput.displayName = 'TimeInput'

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

@@ -1,4 +0,0 @@
-import { BaseFieldProps, Field } from '@chem-po/react'
-import { CSSProperties } from 'react'
-
-export type FieldProps<T extends Field> = BaseFieldProps<CSSProperties, CSSProperties, T>

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

@@ -1,36 +0,0 @@
-import { Box, Flex, Text } from '@chakra-ui/react'
-import { ImageViewOptions } from '@chem-po/core'
-import { FileField } from '@chem-po/react'
-import React, { useMemo } from 'react'
-import { ExpandOnMount } from '../../box/ExpandOnMount'
-import { FileView } from '../input/file'
-import { FieldViewProps } from './types'
-
-export const FileFieldView = ({ field, value, noLabel, style }: FieldViewProps<FileField>) => {
-  const { imageOptions, placeholder } = field
-  const options = useMemo<ImageViewOptions>(
-    () => ({
-      height: 150,
-      ...imageOptions,
-    }),
-    [imageOptions],
-  )
-  return (
-    <Flex flexFlow={value ? 'column' : 'row'} style={style}>
-      {noLabel ? null : (
-        <Text pr={2} opacity={0.7} fontWeight={600}>
-          {placeholder}
-        </Text>
-      )}
-      {value ? (
-        <ExpandOnMount>
-          <Box p={1}>
-            <FileView imageOptions={options} value={value} />
-          </Box>
-        </ExpandOnMount>
-      ) : (
-        <Text opacity={0.7}>None</Text>
-      )}
-    </Flex>
-  )
-}