@chem-po/react-native 0.0.52 → 0.0.53

package/src/components/form/Form.tsx

@@ -1,452 +0,0 @@
-import { InputSize, isField, isListField } from '@chem-po/core'
-import {
-  ChempoFormProvider,
-  DataViewProps,
-  DataViewProvider,
-  Field,
-  FieldFormProps,
-  FieldMap,
-  FieldMapFormProps,
-  FieldMapValue,
-  FormOnSubmit,
-  FormProps,
-  IFormElement,
-  ListField,
-  useButtonColor,
-  useDataView,
-  useFormSubmit,
-  UseFormSubmitProps,
-  useGetItemField,
-} from '@chem-po/react'
-import React, { FC, useMemo, useState } from 'react'
-import { useFieldArray, useFormContext } from 'react-hook-form'
-import { StyleSheet, Text, View } from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
-import { useFontScale } from '../../store/useFontScale'
-import { Expandable } from '../box/Expandable'
-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 styles = StyleSheet.create({
-  container: {
-    width: '100%',
-  },
-  listContainer: {
-    width: '100%',
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    gap: 8,
-  },
-  listHeader: {
-    fontSize: 14,
-    opacity: 0.7,
-    lineHeight: 1,
-  },
-  listContent: {
-    gap: 8,
-    paddingVertical: 4,
-    minHeight: 30,
-  },
-  listItem: {
-    paddingTop: 8,
-    paddingHorizontal: 8,
-    borderWidth: 1,
-    borderColor: '#e2e8f0',
-    borderRadius: 4,
-  },
-  listItemContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    width: '100%',
-  },
-  listItemInput: {
-    flex: 1,
-    minWidth: 0,
-  },
-  emptyListText: {
-    fontSize: 14,
-    opacity: 0.7,
-    paddingVertical: 4,
-    paddingHorizontal: 8,
-  },
-  newButton: {
-    alignSelf: 'flex-start',
-    paddingVertical: 4,
-    paddingHorizontal: 8,
-    borderRadius: 4,
-  },
-  newButtonText: {
-    fontSize: 14,
-    color: '#4a5568',
-  },
-  formElementContainer: {
-    width: '100%',
-    // paddingVertical: 5,
-    // gap: 5,
-  },
-  dataViewHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 8,
-    width: '100%',
-  },
-  dataViewTitle: {
-    fontSize: 18,
-    fontFamily: 'System',
-    paddingVertical: 8,
-  },
-  dataViewActions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    marginLeft: 'auto',
-  },
-  dataViewContent: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-  },
-  submitButton: {
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  submitButtonText: {
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  editButtonText: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: '#4a5568',
-  },
-  cancelButtonText: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: '#4a5568',
-  },
-})
-
-export const ListFieldInput: FC<{
-  field: ListField
-  name: string
-  size: InputSize
-}> = ({ field, name, size }) => {
-  const emptyData = useMemo(() => {
-    if (isField(field.itemField)) return ''
-    if (isListField(field.itemField)) return []
-    return {}
-  }, [field])
-
-  const buttonColor = useButtonColor()
-  const { control } = useFormContext()
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name,
-  })
-
-  return (
-    <View style={styles.listContainer}>
-      <Text style={styles.listHeader}>{field.placeholder}</Text>
-      <View style={styles.listContent}>
-        {fields.length ? (
-          fields.map((formField, idx) => (
-            <View key={formField.id} style={styles.listItem}>
-              <View style={styles.listItemContent}>
-                <View style={styles.listItemInput}>
-                  <FormElement size={size} name={formField.id} field={field.itemField} />
-                </View>
-                <DeleteButton
-                  onDelete={() => remove(idx)}
-                  itemName={`${field.placeholder} ${idx + 1}`}
-                />
-              </View>
-            </View>
-          ))
-        ) : (
-          <Text style={styles.emptyListText}>No items</Text>
-        )}
-      </View>
-      <Pressable
-        style={[styles.newButton, { backgroundColor: buttonColor }]}
-        onPress={() => append(emptyData)}>
-        <Text style={styles.newButtonText}>+ NEW</Text>
-      </Pressable>
-    </View>
-  )
-}
-
-export const FormElement = ({
-  field,
-  name,
-  size,
-}: {
-  field: IFormElement
-  name: string
-  size: InputSize
-}) => {
-  const fontScale = useFontScale(s => s.fontScale)
-  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 (
-    <View
-      style={[styles.formElementContainer, { gap: fontScale * 5, paddingVertical: fontScale * 5 }]}>
-      {fields.map(f => {
-        if (isListField(f.field)) {
-          const b = <ListFieldInput key={f.name} name={f.name} field={f.field} size={size} />
-          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} size={size} />
-          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} size={size} />
-        return f.field.condition ? (
-          <Condition path={name} condition={f.field.condition} key={f.name}>
-            {b}
-          </Condition>
-        ) : (
-          b
-        )
-      })}
-    </View>
-  )
-}
-
-const ListFieldView = ({
-  field,
-  value,
-  path,
-}: {
-  field: ListField
-  value: any[]
-  path: string
-}) => {
-  const { placeholder } = field
-  const getItemField = useGetItemField(field)
-  return (
-    <View style={styles.listContainer}>
-      <Expandable header={() => <Text style={styles.listHeader}>{placeholder}</Text>} initExpanded>
-        <View style={styles.listContent}>
-          {value?.length ? (
-            value.map((item, index) => (
-              <View key={`${path}.${index}`} style={styles.listItem}>
-                <FormElementView
-                  path={`${path}.${index}`}
-                  field={getItemField(index)}
-                  value={item}
-                />
-              </View>
-            ))
-          ) : (
-            <Text style={styles.emptyListText}>No items</Text>
-          )}
-        </View>
-      </Expandable>
-    </View>
-  )
-}
-
-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={() => (
-          <View style={styles.dataViewHeader}>
-            <Text style={styles.dataViewTitle}>{fieldName}</Text>
-            <View style={styles.dataViewActions}>
-              {onDelete && <DeleteButton onDelete={onDelete} itemName={itemName ?? 'item'} />}
-              <Pressable onPress={() => setIsEditing(true)}>
-                <Text style={styles.editButtonText}>Edit</Text>
-              </Pressable>
-              {onClose && (
-                <Pressable onPress={onClose}>
-                  <Text style={styles.cancelButtonText}>Cancel</Text>
-                </Pressable>
-              )}
-            </View>
-          </View>
-        )}>
-        {isEditing && onSubmit ? (
-          <Form
-            storagePath={storagePath}
-            field={field}
-            value={value}
-            onSubmit={onSubmit}
-            onBack={() => setIsEditing(false)}
-          />
-        ) : (
-          <View style={styles.dataViewContent}>
-            {Object.entries(children).map(([key, childField]) => (
-              <FormElementView
-                storagePath={storagePath ? `${storagePath}/${key}` : undefined}
-                path={path ? `${path}.${key}` : key}
-                key={key}
-                field={childField}
-                value={value?.[key]}
-              />
-            ))}
-          </View>
-        )}
-      </Expandable>
-    </DataViewProvider>
-  )
-}
-
-export const FieldMapForm = <F extends FieldMap>({
-  onSubmit: onSubmitProp,
-  onBack,
-  field,
-  value,
-  buttonText = 'SUBMIT',
-  renderFooter,
-  storagePath,
-  size = 'md',
-}: FieldMapFormProps<F>) => {
-  const useSubmitDataProps = useMemo<UseFormSubmitProps<F>>(
-    () => ({
-      field,
-      value,
-      submit: onSubmitProp as FormOnSubmit<FieldMap>,
-      storagePath,
-    }),
-    [field, value, onSubmitProp, storagePath],
-  )
-  const { onSubmit, uploads } = useFormSubmit(useSubmitDataProps)
-
-  return (
-    <View style={styles.container}>
-      <FormElement name="" field={field} size={size} />
-      <FormFooter
-        uploads={uploads}
-        onSubmit={onSubmit}
-        renderFooter={renderFooter}
-        onBack={onBack}
-        buttonText={buttonText}
-      />
-    </View>
-  )
-}
-
-export const FieldForm = <F extends Field | ListField>({
-  onSubmit,
-  field,
-  value,
-  size,
-  ...props
-}: FieldFormProps<F>) => {
-  const fieldMap = useMemo<FieldMap>(() => ({ children: { value: field } }), [field])
-  const fieldMapValue = useMemo<FieldMapValue<FieldMap>>(() => ({ value }), [value])
-  return (
-    <FieldMapForm
-      size={size}
-      field={fieldMap}
-      value={fieldMapValue}
-      onSubmit={data => onSubmit(data?.value)}
-      {...props}
-    />
-  )
-}
-
-export const Form = <F extends IFormElement>({
-  field,
-  onSubmit,
-  size = 'md',
-  ...props
-}: FormProps<F>) => {
-  const body =
-    isField(field) || isListField(field) ? (
-      <FieldForm
-        size={size}
-        field={field}
-        onSubmit={onSubmit as FormOnSubmit<Field | ListField>}
-        {...props}
-      />
-    ) : (
-      <FieldMapForm
-        size={size}
-        field={field}
-        onSubmit={onSubmit as FormOnSubmit<FieldMap>}
-        {...props}
-      />
-    )
-
-  return <ChempoFormProvider>{body}</ChempoFormProvider>
-}
-
-export default Form

package/src/components/form/FormFooter.tsx

@@ -1,164 +0,0 @@
-import {
-  FormFooterProps,
-  IFormElement,
-  useBorderColor,
-  useButtonColor,
-  usePlaceholderColor,
-} from '@chem-po/react'
-import React, { FC, PropsWithChildren, useEffect, useMemo, useRef } from 'react'
-import { useFormContext, useFormState } from 'react-hook-form'
-import { ActivityIndicator, Animated, StyleSheet, Text, View } from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
-import { UploadProgress } from './UploadProgress'
-
-const buttonTextColor = '#ffffff'
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-  },
-  progressContainer: {
-    height: 5,
-    width: '100%',
-  },
-  footerContainer: {
-    flexDirection: 'column',
-    paddingVertical: 8,
-    gap: 5,
-    borderTopWidth: 1,
-    paddingHorizontal: 12,
-    width: '100%',
-  },
-  buttonsContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    gap: 10,
-  },
-  cancelButton: {
-    flex: 1,
-    paddingVertical: 6,
-    borderRadius: 4,
-    borderWidth: 1,
-  },
-  cancelButtonText: {
-    color: buttonTextColor,
-    fontSize: 16,
-    fontWeight: '500',
-    textAlign: 'center',
-  },
-  submitButtonContainer: {
-    flex: 1,
-    borderRadius: 4,
-  },
-  submitButton: {
-    paddingVertical: 6,
-  },
-  submitButtonText: {
-    color: buttonTextColor,
-    fontSize: 16,
-    fontWeight: '500',
-    // textShadowColor: 'rgba(0, 0, 0, 0.75)',
-    textShadowOffset: { width: 0.5, height: 0.5 },
-    textShadowRadius: 5,
-    textAlign: 'center',
-  },
-  errorText: {
-    color: 'red',
-    fontSize: 16,
-    paddingVertical: 4,
-  },
-})
-
-const CancelButton = ({
-  onBack,
-  children,
-  submitting,
-}: PropsWithChildren<{ onBack: () => void; submitting: boolean }>) => {
-  const placeholderColor = usePlaceholderColor()
-  const borderColor = useBorderColor()
-  return (
-    <Pressable
-      disabled={submitting}
-      style={[styles.cancelButton, { borderColor }]}
-      onPress={onBack}>
-      <Text style={[styles.cancelButtonText, { color: placeholderColor }]}>{children}</Text>
-    </Pressable>
-  )
-}
-
-export const SubmitButton: FC<
-  PropsWithChildren<{ onSubmitClick: () => Promise<void>; submitting: boolean; valid: boolean }>
-> = ({ onSubmitClick, submitting, children, valid }) => {
-  const animatedOpacity = useRef(new Animated.Value(1)).current
-
-  const textShadowColor = useMemo(() => {
-    if (submitting || !valid) return 'rgba(0, 0, 0, 0.0)'
-    return 'rgba(0, 0, 0, 0.5)'
-  }, [submitting, valid])
-  useEffect(() => {
-    Animated.timing(animatedOpacity, {
-      toValue: submitting || !valid ? 0.5 : 1,
-      duration: 200,
-      useNativeDriver: true,
-    }).start()
-  }, [submitting, valid, animatedOpacity])
-
-  const buttonBg = useButtonColor()
-
-  return (
-    <Animated.View
-      style={[
-        styles.submitButtonContainer,
-        { opacity: animatedOpacity, backgroundColor: buttonBg },
-      ]}>
-      <Pressable
-        style={styles.submitButton}
-        onPress={() => {
-          onSubmitClick()
-        }}
-        disabled={submitting}>
-        {submitting ? (
-          <ActivityIndicator color={buttonTextColor} />
-        ) : (
-          <Text style={[styles.submitButtonText, { textShadowColor }]}>{children}</Text>
-        )}
-      </Pressable>
-    </Animated.View>
-  )
-}
-
-const FormErrorView = () => {
-  const { formState } = useFormContext()
-  if (!formState.errors.root) return null
-  return <Text style={styles.errorText}>{formState.errors.root.message}</Text>
-}
-
-export const FormFooter = <F extends IFormElement>({
-  renderFooter: RenderFooter,
-  ...props
-}: FormFooterProps<F>) => {
-  const { uploads, onSubmit, onBack, buttonText } = props
-  const borderColor = useBorderColor()
-  const { isSubmitting: submitting, isValid: valid } = useFormState()
-  return (
-    <View style={styles.container}>
-      <UploadProgress uploads={uploads} />
-      {RenderFooter ? (
-        <RenderFooter {...props} />
-      ) : (
-        <View style={[styles.footerContainer, { borderColor }]}>
-          <FormErrorView />
-          <View style={styles.buttonsContainer}>
-            {onBack && (
-              <CancelButton submitting={submitting} onBack={onBack}>
-                Cancel
-              </CancelButton>
-            )}
-            <SubmitButton onSubmitClick={onSubmit} submitting={submitting} valid={valid}>
-              {buttonText}
-            </SubmitButton>
-          </View>
-        </View>
-      )}
-    </View>
-  )
-}

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

@@ -1,50 +0,0 @@
-import { UploadsState } from '@chem-po/core'
-import React, { useMemo } from 'react'
-import { StyleSheet, View } from 'react-native'
-import { ProgressBar } from '../../loading/ProgressBar'
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    flexDirection: 'column',
-  },
-  progressContainer: {
-    paddingHorizontal: 8,
-    height: 26,
-    width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  progressBar: {
-    height: '100%',
-    width: '100%',
-    borderRadius: 13,
-    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-    overflow: 'hidden',
-  },
-  progressFill: {
-    height: '100%',
-  },
-  label: {
-    position: 'absolute',
-    color: 'white',
-    fontSize: 12,
-    fontWeight: '500',
-    textTransform: 'uppercase',
-    textShadowColor: 'rgba(0, 0, 0, 0.67)',
-    textShadowOffset: { width: 1, height: 1 },
-    textShadowRadius: 3,
-  },
-})
-
-export const UploadProgress = ({ uploads }: { uploads: UploadsState }) => {
-  const asArr = useMemo(() => Object.values(uploads), [uploads])
-
-  return (
-    <View style={styles.container}>
-      {asArr.map(upload => (
-        <ProgressBar key={upload.label} progress={upload.percent} label={upload.label} />
-      ))}
-    </View>
-  )
-}

package/src/components/form/index.ts

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