@chem-po/react-native 0.0.5 → 0.0.7

package/src/components/form/Form.tsx

@@ -0,0 +1,393 @@
+import { isField, isListField } from '@chem-po/core'
+import {
+  ChempoFormProvider,
+  DataViewProps,
+  DataViewProvider,
+  Field,
+  FieldFormProps,
+  FieldMap,
+  FieldMapFormProps,
+  FormProps,
+  IFormElement,
+  ListField,
+  useButtonColor,
+  useDataView,
+  useFormSubmit,
+  UseFormSubmitProps,
+} from '@chem-po/react'
+import { FC, useMemo, useState } from 'react'
+import { useFieldArray, useFormContext } from 'react-hook-form'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+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%',
+    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,
+  },
+})
+
+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 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 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>
+      <TouchableOpacity
+        style={[styles.newButton, { backgroundColor: buttonColor }]}
+        onPress={() => append(emptyData)}>
+        <Text style={styles.newButtonText}>+ NEW</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+export const FormElement = ({ field, name }: { field: IFormElement; name: string }) => {
+  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}>
+      {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
+        )
+      })}
+    </View>
+  )
+}
+
+const ListFieldView = ({
+  field,
+  value,
+  path,
+}: {
+  field: ListField
+  value: any[]
+  path: string
+}) => {
+  const { itemField, placeholder } = 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={{ ...itemField, placeholder: `${placeholder} ${index + 1}` }}
+                  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'} />}
+              {onSubmit && (
+                <TouchableOpacity onPress={() => setIsEditing(true)}>
+                  <Text>Edit</Text>
+                </TouchableOpacity>
+              )}
+              {onClose && (
+                <TouchableOpacity onPress={onClose}>
+                  <Text>Close</Text>
+                </TouchableOpacity>
+              )}
+            </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,
+}: FieldMapFormProps<F>) => {
+  const useSubmitDataProps = useMemo<UseFormSubmitProps<F>>(
+    () => ({
+      field,
+      value,
+      submit: onSubmitProp,
+      storagePath,
+    }),
+    [field, value, onSubmitProp, storagePath],
+  )
+  const { onSubmit, uploads } = useFormSubmit(useSubmitDataProps)
+
+  return (
+    <View style={styles.container}>
+      <FormElement name="" field={field} />
+      <FormFooter
+        uploads={uploads}
+        onSubmit={onSubmit}
+        renderFooter={renderFooter}
+        onBack={onBack}
+        buttonText={buttonText}
+      />
+    </View>
+  )
+}
+
+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>
+}
+
+export default Form

package/src/components/form/FormFooter.tsx

@@ -0,0 +1,163 @@
+import {
+  FormFooterProps,
+  IFormElement,
+  useBorderColor,
+  useButtonColor,
+  usePlaceholderColor,
+} from '@chem-po/react'
+import { FC, PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import { useFormContext, useFormState } from 'react-hook-form'
+import { ActivityIndicator, Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+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 (
+    <TouchableOpacity
+      disabled={submitting}
+      style={[styles.cancelButton, { borderColor }]}
+      onPress={onBack}>
+      <Text style={[styles.cancelButtonText, { color: placeholderColor }]}>{children}</Text>
+    </TouchableOpacity>
+  )
+}
+
+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 },
+      ]}>
+      <TouchableOpacity
+        style={styles.submitButton}
+        onPress={() => {
+          onSubmitClick()
+        }}
+        disabled={submitting}>
+        {submitting ? (
+          <ActivityIndicator color={buttonTextColor} />
+        ) : (
+          <Text style={[styles.submitButtonText, { textShadowColor }]}>{children}</Text>
+        )}
+      </TouchableOpacity>
+    </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,
+  ...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

@@ -0,0 +1,62 @@
+import { UploadsState } from '@chem-po/core'
+import { useMemo } from 'react'
+import { Animated, StyleSheet, Text, View } from 'react-native'
+
+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%',
+    backgroundColor: '#3182CE', // Default blue color, can be customized
+  },
+  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 => (
+        <Animated.View key={upload.label} style={styles.progressContainer}>
+          <View style={styles.progressBar}>
+            <Animated.View
+              style={[
+                styles.progressFill,
+                {
+                  width: `${upload.percent * 100}%`,
+                },
+              ]}
+            />
+          </View>
+          <Text style={styles.label}>{upload.label}</Text>
+        </Animated.View>
+      ))}
+    </View>
+  )
+}

package/src/components/form/index.ts

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