@chem-po/react-web 0.0.5 → 0.0.6

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

@@ -0,0 +1,83 @@
+import { useColorModeValue } from '@chakra-ui/react'
+import { InputRef } from '@chem-po/core'
+import { CurrencyAmountField, NumberField } from '@chem-po/react'
+import { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import CurrencyInput from 'react-currency-input-field'
+import { InputSlider } from '../InputSlider'
+import { useInputImperativeHandle } from '../hooks/useInputImperativeHandle'
+import { useInputStyle } from '../hooks/useInputStyle'
+import { FieldProps } from '../types'
+import './styles.css'
+
+export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & { prefix?: string }>(
+  ({ input: { onChange, value, ...input }, field, size, prefix, inEditable: _, ...props }, ref) => {
+    const { type, defaultValue, placeholder } = field
+    const className = useColorModeValue('number-input', 'number-input-dark')
+    const style = useInputStyle(size)
+    const inputRef = useInputImperativeHandle(ref)
+    const [endsWith, setEndsWith] = useState('')
+    const displayed = typeof value === 'number' && !Number.isNaN(value) ? `${value}${endsWith}` : ''
+    if (type === 'slider') {
+      return (
+        <InputSlider
+          label={placeholder}
+          onChange={onChange}
+          value={value}
+          defaultValue={defaultValue}
+        />
+      )
+    }
+    return (
+      <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',
+          width: '100%',
+          borderRadius: '4px',
+          border: 'none',
+          outline: 'none',
+          ...style,
+          ...props.style,
+        }}
+        {...input}
+      />
+    )
+  },
+)
+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

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

@@ -0,0 +1,80 @@
+import {
+  Box,
+  Button,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+  useColorMode,
+} from '@chakra-ui/react'
+import { InputRef } from '@chem-po/core'
+import { SelectField } from '@chem-po/react'
+import { forwardRef, useImperativeHandle, useMemo } from 'react'
+import { FieldProps } from '../types'
+
+const DefaultRenderOption = (value: any) => {
+  return <Text>{typeof value === 'string' ? value : JSON.stringify(value)}</Text>
+}
+
+export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
+  ({ field, input, meta }, ref) => {
+    const { placeholder, options, renderOption: customRender, getOptionKey } = field
+    const { onChange, value, onFocus, onBlur } = input
+    const { active } = meta
+    const selected = useMemo(() => value && options.find(o => o === value), [value, options])
+    const { colorMode } = useColorMode()
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        onFocus()
+      },
+      blur: () => {
+        onBlur()
+      },
+    }))
+
+    const renderOption = customRender ?? DefaultRenderOption
+
+    return (
+      <Popover strategy="fixed" placement="bottom" matchWidth isOpen={active} onClose={onBlur}>
+        <PopoverTrigger>
+          <Button
+            fontWeight={500}
+            w="100%"
+            opacity={value ? 1 : 0.7}
+            onClick={e => {
+              e.stopPropagation()
+              onFocus()
+            }}
+            variant="unstyled"
+            position="relative">
+            <Box>{selected ? renderOption(selected, colorMode, true) : placeholder}</Box>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent w="100%" overflowY="auto" maxH="300px">
+          <PopoverBody p={0}>
+            {options.map(o => (
+              <Button
+                key={getOptionKey ? getOptionKey(o) : o}
+                w="100%"
+                variant="unstyled"
+                onClick={e => {
+                  e.stopPropagation()
+                  onChange(o)
+                  onBlur()
+                }}
+                _hover={{ bg: 'blackAlpha.100' }}
+                _dark={{
+                  _hover: { bg: 'whiteAlpha.100' },
+                }}>
+                {renderOption(o, colorMode, o === selected)}
+              </Button>
+            ))}
+          </PopoverBody>
+          <PopoverArrow />
+        </PopoverContent>
+      </Popover>
+    )
+  },
+)

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

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

@@ -0,0 +1,72 @@
+import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
+import { Flex, IconButton, Input } from '@chakra-ui/react'
+import { InputRef } from '@chem-po/core'
+import { TextField } from '@chem-po/react'
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import { FieldProps } from '../types'
+import { TextAreaComponent } from './textarea'
+
+export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
+  ({ input, inEditable, meta, field }, ref) => {
+    const { placeholder, type } = field
+    const [isHidden, setIsHidden] = useState(type === 'password')
+    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}
+          px={inEditable ? 0 : 3}
+          background="transparent"
+          _focus={{
+            border: 'none',
+          }}
+          py={inEditable ? 0 : 0.5}
+          type={isHidden ? 'password' : 'text'}
+          height={inEditable ? 'auto' : 10}
+          placeholder={placeholder}
+          {...input}
+          onChange={e => {
+            input.onChange({ target: { value: e.target.value } })
+          }}
+          value={value ?? ''}
+        />
+      )
+
+    return type === 'password' ? (
+      <Flex width="100%" position="relative" align="center">
+        {body}
+        <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"
+        />
+      </Flex>
+    ) : (
+      body
+    )
+  },
+)
+
+TextComponent.displayName = 'TextComponent'

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

@@ -0,0 +1,44 @@
+import { InputRef } from '@chem-po/core'
+import { TextField, useTextColor } from '@chem-po/react'
+import { 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',
+          padding: inEditable ? 0 : '0.6rem 1rem',
+          border: 'none',
+          outline: 'none',
+        }}
+        {...input}
+      />
+    )
+  },
+)
+
+TextAreaComponent.displayName = 'TextAreaComponent'

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

@@ -0,0 +1,33 @@
+import { Input } from '@chakra-ui/react'
+import { InputRef } from '@chem-po/core'
+import { TimeField } from '@chem-po/react'
+import { 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

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

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

@@ -0,0 +1,45 @@
+import { Box, Flex, Text } from '@chakra-ui/react'
+import { ImageViewOptions } from '@chem-po/core'
+import { FileField } from '@chem-po/react'
+import { CSSProperties, useMemo } from 'react'
+import { ExpandOnMount } from '../../box/ExpandOnMount'
+import { FileView } from '../input/file'
+
+export const FileFieldView = ({
+  field,
+  value,
+  noLabel,
+  style,
+}: {
+  field: FileField
+  value: any
+  noLabel?: boolean
+  style?: CSSProperties
+}) => {
+  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>
+  )
+}

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

@@ -0,0 +1,61 @@
+import { Flex, Text } from '@chakra-ui/react'
+
+import { formatField } from '@chem-po/core'
+import { Field } from '@chem-po/react'
+import { CSSProperties, useMemo } from 'react'
+import { FileFieldView } from './file'
+import { MultipleSelectFieldView } from './multipleSelect'
+import { SelectFieldView } from './select'
+
+const DefaultFieldView = ({
+  field,
+  value,
+  noLabel,
+  style,
+}: {
+  field: Field
+  value: any
+  noLabel?: boolean
+  style?: CSSProperties
+}) => {
+  const { placeholder } = field
+
+  const formatted = useMemo(() => {
+    const format = formatField[field._type]
+    if (!format) return value
+    return format(field, value)
+  }, [value, field])
+  return (
+    <Flex align="center" style={style}>
+      {noLabel ? null : (
+        <Text pr={2} opacity={0.7} fontWeight={600}>
+          {placeholder}
+        </Text>
+      )}
+      <Text opacity={value !== undefined && value !== null ? 1 : 0.6}>{formatted ?? 'None'}</Text>
+    </Flex>
+  )
+}
+
+export const FieldView = ({
+  field,
+  value,
+  noLabel,
+  style,
+}: {
+  field: Field
+  value: any
+  noLabel?: boolean
+  style?: CSSProperties
+}) => {
+  switch (field._type) {
+    case 'select':
+      return <SelectFieldView style={style} field={field} value={value} noLabel={noLabel} />
+    case 'multipleSelect':
+      return <MultipleSelectFieldView style={style} field={field} value={value} noLabel={noLabel} />
+    case 'file':
+      return <FileFieldView style={style} field={field} value={value} noLabel={noLabel} />
+    default:
+      return <DefaultFieldView style={style} field={field} value={value} noLabel={noLabel} />
+  }
+}

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

@@ -0,0 +1,38 @@
+import { Box, Text } from '@chakra-ui/react'
+
+import { Flex, useColorMode } from '@chakra-ui/react'
+import { MultipleSelectField } from '@chem-po/react'
+import { CSSProperties } from 'react'
+
+export const MultipleSelectFieldView = ({
+  field,
+  value,
+  noLabel,
+  style,
+}: {
+  field: MultipleSelectField
+  value: any[]
+  noLabel?: boolean
+  style?: CSSProperties
+}) => {
+  const { placeholder, renderOption } = field
+  const { colorMode } = useColorMode()
+  return (
+    <Flex maxW="100%" flexFlow="row wrap" align="center" style={style}>
+      {noLabel ? null : (
+        <Text pr={2} opacity={0.7} fontWeight={600}>
+          {placeholder}
+        </Text>
+      )}
+      {value ? (
+        value.map((v: any) => (
+          <Box key={field.getOptionKey ? field.getOptionKey(v) : v} p={0.5}>
+            {renderOption(v, colorMode, true)}
+          </Box>
+        ))
+      ) : (
+        <Text opacity={0.6}>None</Text>
+      )}
+    </Flex>
+  )
+}

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

@@ -0,0 +1,33 @@
+import { Flex, Text, useColorMode } from '@chakra-ui/react'
+import { SelectField } from '@chem-po/react'
+import { CSSProperties } from 'react'
+
+const DefaultRenderOption = (value: any) => {
+  return <Text>{typeof value === 'string' ? value : JSON.stringify(value)}</Text>
+}
+
+export const SelectFieldView = ({
+  field,
+  value,
+  noLabel,
+  style,
+}: {
+  field: SelectField
+  value: any
+  noLabel?: boolean
+  style?: CSSProperties
+}) => {
+  const { placeholder, renderOption: customRender } = field
+  const { colorMode } = useColorMode()
+  const renderOption = customRender ?? DefaultRenderOption
+  return (
+    <Flex align="center" style={style}>
+      {noLabel ? null : (
+        <Text pr={2} opacity={0.7} fontWeight={600}>
+          {placeholder}
+        </Text>
+      )}
+      {value ? renderOption(value, colorMode, true) : 'None'}
+    </Flex>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,14 @@
+export * from './auth'
+export * from './box'
+export * from './button'
+export * from './feed'
+export * from './form'
+export * from './list'
+export * from './loading'
+export * from './media'
+export * from './modal'
+export * from './nav'
+export * from './overlay'
+export * from './text'
+export * from './theme'
+export * from './view'