@chem-po/react-web 0.0.5 → 0.0.6

package/src/components/form/Form.tsx

@@ -0,0 +1,425 @@
+import { CloseIcon, DeleteIcon, DragHandleIcon, EditIcon } from '@chakra-ui/icons'
+import {
+  Box,
+  Button,
+  Flex,
+  IconButton,
+  Stack,
+  Text,
+  useColorModeValue,
+  VStack,
+} from '@chakra-ui/react'
+import { isField, isListField } from '@chem-po/core'
+import {
+  ChempoFormProvider,
+  DataViewProps,
+  DataViewProvider,
+  Field,
+  FieldFormProps,
+  FieldMap,
+  FieldMapFormProps,
+  FormProps,
+  IFormElement,
+  ListField,
+  useDataView,
+  useFormSubmit,
+  UseFormSubmitProps,
+} from '@chem-po/react'
+import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
+import { FC, useMemo, useState } from 'react'
+import { useFieldArray, UseFieldArrayMove, useFormContext } from 'react-hook-form'
+import { useBorderColor } from '../../hooks'
+import { Expandable } from '../box'
+import { ExpandOnMount } from '../box/ExpandOnMount'
+import { DeleteButton } from '../button/DeleteButton'
+import { Condition } from './Condition'
+import { FieldComponent } from './Field'
+import { FormFooter } from './FormFooter'
+import { Editable } from './input/Editable'
+import { FieldView } from './view'
+
+const makeOnDragEndFunction = (move: UseFieldArrayMove) => (result: DropResult) => {
+  // dropped outside the list
+  if (!result.destination) {
+    return
+  }
+
+  move(result.source.index, result.destination.index)
+}
+
+export const ListFieldInput: FC<{ field: ListField; name: string }> = ({ field, name }) => {
+  const emptyData = useMemo(() => {
+    if (isField(field.itemField)) return ''
+    if (isListField(field.itemField)) return []
+    return {}
+  }, [field])
+  const draggingBg = useColorModeValue('#efefef', '#2b2b2b')
+  const borderColor = useBorderColor()
+  const { control } = useFormContext()
+  const { fields, append, remove, move } = useFieldArray({
+    control,
+    name,
+  })
+  const onDragEnd = useMemo(() => makeOnDragEndFunction(move), [move])
+  return (
+    <Flex overflow="hidden" gap={2} flexFlow="column" w="100%" px={2} py={1}>
+      <Text lineHeight={1} opacity={0.7} fontSize="sm">
+        {field.placeholder}
+      </Text>
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable droppableId="droppable">
+          {(droppableProvided, { draggingFromThisWith }) => (
+            <Flex
+              ref={droppableProvided.innerRef}
+              flexFlow="column"
+              w="100%"
+              py={1}
+              borderRadius={4}
+              minH="30px"
+              align="flex"
+              {...droppableProvided.droppableProps}>
+              {fields.length ? (
+                fields.map((formField, idx) => (
+                  <Draggable key={formField.id} draggableId={formField.id} index={idx}>
+                    {({ dragHandleProps, draggableProps, innerRef }, { isDragging }) => (
+                      <Flex
+                        transition="all 300ms"
+                        boxShadow={`2px 2px 4px #000000${isDragging ? '55' : '00'}`}
+                        borderRadius={4}
+                        pt={2}
+                        px={2}
+                        border={`1px solid ${borderColor}`}
+                        bg={`${draggingBg}${isDragging ? 'ff' : '00'}`}
+                        ref={innerRef}
+                        w="100%"
+                        {...draggableProps}>
+                        <ExpandOnMount>
+                          <Flex
+                            opacity={draggingFromThisWith && !isDragging ? 0.5 : 1}
+                            gap={1}
+                            align="center"
+                            w="100%">
+                            <IconButton
+                              aria-label="drag"
+                              size="xs"
+                              opacity={0.8}
+                              variant="ghost"
+                              icon={<DragHandleIcon />}
+                              {...dragHandleProps}
+                            />
+                            <Box minW="0" flex={1}>
+                              <FormElement name={formField.id} field={field.itemField} />
+                            </Box>
+                            <IconButton
+                              aria-label="delete"
+                              size="xs"
+                              bg="red.600"
+                              color="white"
+                              icon={<DeleteIcon filter="drop-shadow(1px 1px 3px #00000088)" />}
+                              onClick={e => {
+                                e.stopPropagation()
+                                remove(idx)
+                              }}
+                            />
+                          </Flex>
+                        </ExpandOnMount>
+                      </Flex>
+                    )}
+                  </Draggable>
+                ))
+              ) : (
+                <Text fontSize="sm" opacity={0.7} py={1} px={2}>
+                  No items
+                </Text>
+              )}
+              {droppableProvided.placeholder}
+            </Flex>
+          )}
+        </Droppable>
+      </DragDropContext>
+      <Flex>
+        <Button mr="auto" width="auto" size="xs" onClick={() => append(emptyData)}>
+          + NEW
+        </Button>
+      </Flex>
+    </Flex>
+  )
+}
+
+export const FormElement = ({
+  field,
+  name,
+  // validate,
+}: {
+  field: IFormElement
+  name: string
+  // validate?: boolean
+}) => {
+  const fields = useMemo<Array<{ name: string; field: IFormElement }>>(() => {
+    if (isField(field) || isListField(field)) return [{ name: 'value', field }]
+
+    return Object.entries((field as FieldMap).children).map(([childName, childField]) => ({
+      name: `${name ? `${name}.` : ''}${childName}`,
+      field: childField,
+    }))
+  }, [field, name])
+  return (
+    <VStack spacing={1} w="100%">
+      {fields.map(f => {
+        if (isListField(f.field)) {
+          const b = <ListFieldInput key={f.name} name={f.name} field={f.field} />
+          return f.field.condition ? (
+            <Condition path={name} condition={f.field.condition} key={f.name}>
+              {b}
+            </Condition>
+          ) : (
+            b
+          )
+        }
+        if (isField(f.field)) {
+          const b = <FieldComponent key={f.name} name={f.name} field={f.field} />
+          return f.field.condition ? (
+            <Condition path={name} condition={f.field.condition} key={f.name}>
+              {b}
+            </Condition>
+          ) : (
+            b
+          )
+        }
+
+        const b = <FormElement key={f.name} name={f.name} field={f.field} />
+        return f.field.condition ? (
+          <Condition path={name} condition={f.field.condition} key={f.name}>
+            {b}
+          </Condition>
+        ) : (
+          b
+        )
+      })}
+    </VStack>
+  )
+}
+const ListFieldView = ({
+  field,
+  value,
+  path,
+}: {
+  field: ListField
+  value: any[]
+  path: string
+}) => {
+  const { itemField, placeholder } = field
+  const borderColor = useBorderColor()
+  return (
+    <Box w="100%" p={1}>
+      <Expandable
+        border={`1px solid ${borderColor}`}
+        borderRadius={4}
+        initExpanded
+        header={() => <Text py={1}>{placeholder}</Text>}>
+        <Flex flexFlow="column" bg="background.200" gap={2} px={2} py={1}>
+          {value?.length ? (
+            value.map((item, index) => (
+              <Box
+                bg="background.100"
+                key={`${path}.${index}`}
+                border={`1px solid ${borderColor}`}
+                borderRadius={3}>
+                <FormElementView
+                  path={`${path}.${index}`}
+                  field={{ ...itemField, placeholder: `${placeholder} ${index + 1}` }}
+                  value={item}
+                />
+              </Box>
+            ))
+          ) : (
+            <Text fontSize="sm" opacity={0.7} py={1} px={2}>
+              No items
+            </Text>
+          )}
+        </Flex>
+      </Expandable>
+    </Box>
+  )
+}
+
+const FormElementView = ({
+  field,
+  value,
+  path,
+  storagePath,
+}: {
+  field: IFormElement
+  value: any
+  path: string
+  storagePath?: string
+}) => {
+  const { updateField } = useDataView()
+  if (isField(field)) {
+    return updateField ? (
+      <Editable
+        storagePath={storagePath}
+        field={field}
+        value={value}
+        onSubmit={v => updateField(path, v)}
+      />
+    ) : (
+      <FieldView field={field} value={value} />
+    )
+  }
+  if (isListField(field)) {
+    return <ListFieldView path={path} field={field} value={value} />
+  }
+  return (
+    <DataView
+      storagePath={storagePath ? `${storagePath}.${path}` : undefined}
+      path={path}
+      field={field}
+    />
+  )
+}
+
+export const DataView = ({
+  field,
+  value,
+  onClose,
+  onDelete,
+  onSubmit,
+  itemName,
+  storagePath,
+  path = '',
+}: DataViewProps & { path?: string }) => {
+  const { name: fieldName, children } = field
+  const [isEditing, setIsEditing] = useState(false)
+  return (
+    <DataViewProvider value={value} onSubmit={onSubmit}>
+      <Expandable
+        alwaysExpanded
+        header={() => (
+          <Flex align="center" px={2} w="100%">
+            <Text py={2} fontSize="lg" fontFamily="fonts.heading">
+              {fieldName}
+            </Text>
+            <Flex gap={2} align="center" ml="auto">
+              {onDelete ? <DeleteButton onDelete={onDelete} itemName={itemName ?? 'item'} /> : null}
+              {onSubmit ? (
+                <IconButton
+                  size="sm"
+                  borderRadius="full"
+                  minW={0}
+                  w={7}
+                  h={7}
+                  ml="auto"
+                  aria-label="edit"
+                  icon={<EditIcon />}
+                  onClick={() => setIsEditing(true)}
+                />
+              ) : null}
+              {onClose ? (
+                <IconButton
+                  size="sm"
+                  borderRadius="full"
+                  minW={0}
+                  w={7}
+                  h={7}
+                  variant="ghost"
+                  aria-label="close"
+                  icon={<CloseIcon opacity={0.8} w={3} h={3} />}
+                  onClick={onClose}
+                />
+              ) : null}
+            </Flex>
+          </Flex>
+        )}>
+        {isEditing && onSubmit ? (
+          <Form
+            storagePath={storagePath}
+            field={field}
+            value={value}
+            onSubmit={onSubmit}
+            onBack={() => setIsEditing(false)}
+          />
+        ) : (
+          <Flex flexFlow="column" px={4} py={2}>
+            {Object.entries(children).map(([key, childField]) => (
+              <FormElementView
+                storagePath={storagePath ? `${storagePath}/${key}` : undefined}
+                path={path ? `${path}.${key}` : key}
+                key={key}
+                field={childField}
+                value={value?.[key]}
+              />
+            ))}
+          </Flex>
+        )}
+      </Expandable>
+    </DataViewProvider>
+  )
+}
+
+export const FieldMapForm = <F extends FieldMap>({
+  onSubmit: submit,
+  onBack,
+  field,
+  value,
+  buttonText = 'SUBMIT',
+  renderFooter,
+  storagePath,
+}: FieldMapFormProps<F>) => {
+  const submitDataProps = useMemo<UseFormSubmitProps<F>>(
+    () => ({
+      field,
+      value,
+      submit,
+      storagePath,
+    }),
+    [field, value, submit, storagePath],
+  )
+
+  const { onSubmit, uploads } = useFormSubmit(submitDataProps)
+
+  return (
+    <Stack w="100%" spacing={3}>
+      <form>
+        <Box pt={1} px={2} w="100%">
+          <FormElement name="" field={field} />
+        </Box>
+        <FormFooter
+          uploads={uploads}
+          onSubmit={onSubmit}
+          renderFooter={renderFooter}
+          onBack={onBack}
+          buttonText={buttonText}
+        />
+      </form>
+    </Stack>
+  )
+}
+
+export const FieldForm = <F extends Field | ListField>({
+  onSubmit,
+  field,
+  value,
+  ...props
+}: FieldFormProps<F>) => {
+  const fieldMap = useMemo<FieldMap>(() => ({ children: { value: field } }), [field])
+  return (
+    <FieldMapForm
+      field={fieldMap}
+      value={{ value }}
+      onSubmit={data => onSubmit(data?.value)}
+      {...props}
+    />
+  )
+}
+
+export const Form = <F extends IFormElement>({ field, ...props }: FormProps<F>) => {
+  const body =
+    isField(field) || isListField(field) ? (
+      <FieldForm field={field} {...props} />
+    ) : (
+      <FieldMapForm field={field} {...props} />
+    )
+
+  return <ChempoFormProvider>{body}</ChempoFormProvider>
+}

package/src/components/form/FormFooter.tsx

@@ -0,0 +1,82 @@
+import { Button, ButtonProps, Collapse, Flex, HStack, Progress, Text } from '@chakra-ui/react'
+
+import { FC, PropsWithChildren } from 'react'
+
+import { FormProps, IFormElement, useChempoForm, UseFormSubmit } from '@chem-po/react'
+import { useFormState } from 'react-hook-form'
+import { UploadProgress } from './UploadProgress'
+
+const CancelButton = ({ onBack, children }: PropsWithChildren<{ onBack: () => void }>) => (
+  <Button
+    flex={1}
+    transition="all 500ms"
+    onClick={onBack}
+    variant="outline"
+    border="1px solid #cdcdcd"
+    color="#777"
+    ml="auto">
+    {children}
+  </Button>
+)
+
+export const SubmitButton: FC<
+  { onSubmitClick: () => Promise<void>; submitting: boolean } & ButtonProps
+> = ({ onSubmitClick, submitting, children, filter, opacity }) => (
+  <Button
+    isLoading={submitting}
+    filter={filter}
+    flex={1}
+    transition="all 500ms"
+    opacity={opacity}
+    onClick={() => {
+      onSubmitClick()
+    }}
+    ml="auto"
+    variant="solid">
+    {children}
+  </Button>
+)
+
+const FormErrorView = () => {
+  const { formError } = useChempoForm()
+  return (
+    <Collapse in={!!formError}>
+      <Text color="red">{formError ?? ''}</Text>
+    </Collapse>
+  )
+}
+
+export const FormFooter = <F extends IFormElement>({
+  renderFooter,
+  ...props
+}: Pick<FormProps<F>, 'renderFooter' | 'onBack' | 'buttonText'> &
+  Pick<UseFormSubmit, 'uploads'> & {
+    onSubmit: () => Promise<void>
+  }) => {
+  const { uploads, onBack, buttonText, onSubmit } = props
+  const { isSubmitting: submitting, isValid: valid } = useFormState()
+  return (
+    <Flex w="100%" flexFlow="column">
+      <Collapse endingHeight={5} style={{ width: '100%' }} in={submitting}>
+        <Progress w="100%" h="5px" isIndeterminate />
+      </Collapse>
+      <UploadProgress uploads={uploads} />
+      <FormErrorView />
+      {renderFooter ? (
+        renderFooter(props)
+      ) : (
+        <HStack py={2} borderTop="1px solid" borderColor="background.200" px={3} w="100%">
+          {onBack ? <CancelButton onBack={onBack}>Cancel</CancelButton> : null}
+          <SubmitButton
+            size="sm"
+            filter={`grayscale(${!valid ? 100 : 0}%)`}
+            opacity={!valid ? 0.5 : 1}
+            onSubmitClick={onSubmit}
+            submitting={submitting}>
+            {buttonText}
+          </SubmitButton>
+        </HStack>
+      )}
+    </Flex>
+  )
+}

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

@@ -0,0 +1,38 @@
+import { Center, Flex, Progress, Text } from '@chakra-ui/react'
+import { UploadsState } from '@chem-po/core'
+import { useMemo } from 'react'
+import { TransitionGroup } from 'react-transition-group'
+import { ExpandOnMount } from '../../box'
+import './styles.css'
+
+export const UploadProgress = ({ uploads }: { uploads: UploadsState }) => {
+  const asArr = useMemo(() => Object.values(uploads), [uploads])
+  return (
+    <TransitionGroup component={Flex} width="100%" flexFlow="column">
+      {asArr.map(upload => (
+        <ExpandOnMount key={upload.label}>
+          <Center px={2} height="26px" position="relative" w="100%" flexDirection="column">
+            <Progress
+              borderRadius="full"
+              value={upload.percent * 100}
+              mx={2}
+              my={1}
+              size="md"
+              height="100%"
+              width="100%"
+            />
+            <Text
+              fontFamily="fonts.heading"
+              textShadow="1px 1px 3px #000000aa"
+              color="white"
+              position="absolute"
+              fontSize="sm"
+              fontWeight={500}>
+              {upload.label.toUpperCase()}
+            </Text>
+          </Center>
+        </ExpandOnMount>
+      ))}
+    </TransitionGroup>
+  )
+}

package/src/components/form/UploadProgress/styles.css

@@ -0,0 +1,23 @@
+.upload-enter {
+  opacity: 0;
+  height: 0;
+  overflow: hidden;
+}
+.upload-enter-active {
+  opacity: 1;
+  height: 26px;
+  overflow: hidden;
+  transition: opacity 300ms, height 300ms;
+}
+
+.upload-exit {
+  opacity: 1;
+  height: 26px;
+  overflow: hidden;
+}
+.upload-exit-active {
+  opacity: 0;
+  height: 0;
+  overflow: hidden;
+  transition: opacity 300ms, height 300ms;
+}

package/src/components/form/index.ts

@@ -0,0 +1,4 @@
+export * from './Form'
+export * from './input'
+export { FileView } from './input/file'
+export { FieldView } from './view'

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

@@ -0,0 +1,129 @@
+import { CheckIcon, CloseIcon, EditIcon } from '@chakra-ui/icons'
+import { Flex, IconButton } from '@chakra-ui/react'
+import { palette } from '@chem-po/core'
+import {
+  ChempoFormProvider,
+  EditableProps,
+  Field,
+  useColorModeValue,
+  useEditable,
+} from '@chem-po/react'
+import { CSSProperties, useEffect, useMemo } from 'react'
+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,
+}: EditableProps<CSSProperties, T>) => {
+  const {
+    formattedValue,
+    inputRef,
+    setValue,
+    isLoading,
+    uploads,
+    editHovered,
+    handleEditOpen,
+    handleEditClose,
+    isEditing,
+    value,
+    setEditHovered,
+    submit,
+    submitValue,
+    parse,
+  } = useEditable({
+    value: initValue,
+    field,
+    onSubmit,
+    storagePath,
+    onEditOpen,
+    onEditClose,
+  })
+  const alwaysEditing = useMemo(() => field._type === 'file' || field._type === 'boolean', [field])
+  useEffect(() => {
+    if (isEditing) {
+      inputRef.current?.focus()
+    }
+  }, [isEditing, inputRef])
+
+  const editingBorderColor = useColorModeValue('#00000055', '#ffffff55')
+
+  return (
+    <ChempoFormProvider>
+      <Flex
+        borderRadius={4}
+        border={`1px dashed ${editHovered && !isEditing ? editingBorderColor : 'transparent'}`}
+        flexFlow="column"
+        w="100%">
+        <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 || alwaysEditing ? (
+              <StandaloneInput
+                ref={inputRef}
+                value={formattedValue}
+                inEditable
+                field={field}
+                style={{ padding: 0, ...style }}
+                onChange={alwaysEditing ? v => submitValue(parse(v)) : v => setValue(parse(v))}
+              />
+            ) : (
+              <FieldView style={style} field={field} value={value} />
+            )}
+          </Flex>
+          {alwaysEditing ? null : (
+            <>
+              <IconButton
+                aria-label="Edit"
+                size="xs"
+                icon={isEditing ? <CloseIcon width={3} /> : <EditIcon />}
+                onMouseEnter={() => setEditHovered(true)}
+                onMouseLeave={() => setEditHovered(false)}
+                onClick={() => {
+                  if (isEditing) {
+                    setValue(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>
+    </ChempoFormProvider>
+  )
+}