@chem-po/react-web 0.0.52 → 0.0.53

package/src/components/form/Form.tsx

@@ -1,428 +0,0 @@
-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,
-  FormOnSubmit,
-  FormProps,
-  IFormElement,
-  ListField,
-  useDataView,
-  useFormSubmit,
-  UseFormSubmitProps,
-  useGetItemField,
-} from '@chem-po/react'
-import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
-import React, { 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 { placeholder } = field
-  const borderColor = useBorderColor()
-  const getItemField = useGetItemField(field)
-  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={getItemField(index)}
-                  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, onSubmit, ...props }: FormProps<F>) => {
-  const body =
-    isField(field) || isListField(field) ? (
-      <FieldForm field={field} onSubmit={onSubmit as FormOnSubmit<Field | ListField>} {...props} />
-    ) : (
-      <FieldMapForm field={field} onSubmit={onSubmit as FormOnSubmit<FieldMap>} {...props} />
-    )
-
-  return <ChempoFormProvider>{body}</ChempoFormProvider>
-}

package/src/components/form/FormFooter.tsx

@@ -1,90 +0,0 @@
-import { Button, ButtonProps, Collapse, Flex, HStack, Progress, Text } from '@chakra-ui/react'
-import React from 'react'
-
-import { FC, PropsWithChildren } from 'react'
-
-import {
-  FormProps,
-  IFormElement,
-  useBorderColor,
-  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: 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()
-  const borderColor = useBorderColor()
-  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={borderColor} 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

@@ -1,38 +0,0 @@
-import { Center, Flex, Progress, Text } from '@chakra-ui/react'
-import { UploadsState } from '@chem-po/core'
-import React, { 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

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

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