@chem-po/react-web 0.0.9 → 0.0.11

package/package.json

@@ -1,23 +1,13 @@
 {
   "name": "@chem-po/react-web",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
-  "source": "./src/index.ts",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "sideEffects": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
+  "sideEffects": false,
   "files": [
     "dist",
     "src"
@@ -26,10 +16,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@chem-po/core": "0.0.9",
-    "@chem-po/react": "0.0.9"
-  },
-  "peerDependencies": {
     "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.10.3",
@@ -42,42 +28,34 @@
     "howler": "^2.2.4",
     "lottie-react": "^2.4.0",
     "nested-property": "^4.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
     "react-currency-input-field": "^3.8.0",
     "react-day-picker": "^9.0.9",
     "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.55.0",
-    "react-router": "^6.26.2",
-    "react-router-dom": "^6.26.2",
+    "react-router": "^7.6.1",
+    "react-router-dom": "^7.6.1",
     "react-textarea-autosize": "^8.5.3",
     "react-transition-group": "^4.4.5",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@hello-pangea/dnd": "^17.0.0",
-    "zustand": "^4.3.3"
+    "@hello-pangea/dnd": "^18.0.1",
+    "zustand": "^4.3.3",
+    "@chem-po/react": "0.0.11",
+    "@chem-po/core": "0.0.11"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@types/howler": "^2.2.11",
-    "@types/react": "^18.3.1",
+    "@types/react": "~19.0.10",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-transition-group": "^4.4.11",
     "@types/react-window": "^1.8.8",
     "@types/react-window-infinite-loader": "^1.0.9",
     "replace-in-file": "^8.1.0",
-    "typescript": "^5.7.2",
     "vite": "^5.4.6",
-    "typescript-eslint": "^8.11.0",
-    "@eslint/js": "^9.13.0",
-    "@types/eslint__js": "^8.42.3",
-    "@typescript-eslint/parser": "8.12.2",
-    "eslint": "^9.13.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "prettier": "^3.2.5",
     "tsup": "^8.3.0"
   },
   "description": "",
@@ -88,5 +66,6 @@
     "dev": "tsup --watch",
     "clean": "rm -rf dist",
     "prebuild": "pnpm lint"
-  }
+  },
+  "module": "dist/index.js"
 }

package/src/components/box/Expandable.tsx

@@ -13,14 +13,14 @@ import { useBorderColor } from '../../hooks/ui/useBorderColor'
 import { ViewButton } from '../button/ViewButton'
 
 export const Expandable = ({
-  header,
+  header: Header,
   children,
   initExpanded = false,
   nested,
   alwaysExpanded,
   headerProps,
   iconColor,
-  footer,
+  footer: Footer,
   isOpen: isOpenProp,
   onClose: onCloseProp,
   onOpen: onOpenProp,
@@ -73,12 +73,12 @@ export const Expandable = ({
           aria-label="expand/hide"
           align="center"
           flex={1}>
-          {typeof header === 'string' ? (
+          {typeof Header === 'string' ? (
             <Text fontWeight={600} color="gray.500" flex={1}>
-              {header}
+              {Header}
             </Text>
           ) : (
-            header({ isOpen, onClose })
+            <Header isOpen={isOpen} onClose={onClose} />
           )}
         </Flex>
         {alwaysExpanded ? null : (
@@ -90,7 +90,7 @@ export const Expandable = ({
           {children as any}
         </Collapse>
       </Box>
-      {footer ? footer({ isOpen, onClose }) : null}
+      {Footer ? <Footer isOpen={isOpen} onClose={onClose} /> : null}
     </VStack>
   )
 }

package/src/components/box/FullSizeContainer.tsx

@@ -4,7 +4,7 @@ import useResizeObserver from '@react-hook/resize-observer'
 import React, { FC, useCallback, useMemo, useRef, useState } from 'react'
 
 export const FullSizeContainer = ({
-  children,
+  children: Children,
   ...props
 }: Omit<BoxProps, 'children'> & { children: FC<{ width: number; height: number }> }) => {
   const [width, setWidth] = useState(0)
@@ -21,7 +21,7 @@ export const FullSizeContainer = ({
 
   return (
     <Box ref={ref} {...props} width="100%" height="100%">
-      {children({ width, height })}
+      <Children width={width} height={height} />
     </Box>
   )
 }

package/src/components/button/DeleteButton.tsx

@@ -85,7 +85,7 @@ export const DeleteButton: React.FC<
 > = ({ onDelete, itemName, noConfirm, alertBody, text, actionName = 'Delete', ...props }) => {
   const [deleteLoading, setDeleteLoading] = useState(false)
   const [confirmActive, setConfirmActive] = useState(false)
-  const confirmTimer = useRef<any>()
+  const confirmTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
   const isMounted = useRef(true)
   useEffect(() => {
     isMounted.current = true

package/src/components/form/Form.tsx

@@ -18,12 +18,14 @@ import {
   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'
@@ -208,8 +210,9 @@ const ListFieldView = ({
   value: any[]
   path: string
 }) => {
-  const { itemField, placeholder } = field
+  const { placeholder } = field
   const borderColor = useBorderColor()
+  const getItemField = useGetItemField(field)
   return (
     <Box w="100%" p={1}>
       <Expandable
@@ -227,7 +230,7 @@ const ListFieldView = ({
                 borderRadius={3}>
                 <FormElementView
                   path={`${path}.${index}`}
-                  field={{ ...itemField, placeholder: `${placeholder} ${index + 1}` }}
+                  field={getItemField(index)}
                   value={item}
                 />
               </Box>
@@ -413,12 +416,12 @@ export const FieldForm = <F extends Field | ListField>({
   )
 }
 
-export const Form = <F extends IFormElement>({ field, ...props }: FormProps<F>) => {
+export const Form = <F extends IFormElement>({ field, onSubmit, ...props }: FormProps<F>) => {
   const body =
     isField(field) || isListField(field) ? (
-      <FieldForm field={field} {...props} />
+      <FieldForm field={field} onSubmit={onSubmit as FormOnSubmit<Field | ListField>} {...props} />
     ) : (
-      <FieldMapForm field={field} {...props} />
+      <FieldMapForm field={field} onSubmit={onSubmit as FormOnSubmit<FieldMap>} {...props} />
     )
 
   return <ChempoFormProvider>{body}</ChempoFormProvider>

package/src/components/form/FormFooter.tsx

@@ -48,7 +48,7 @@ const FormErrorView = () => {
 }
 
 export const FormFooter = <F extends IFormElement>({
-  renderFooter,
+  renderFooter: RenderFooter,
   ...props
 }: Pick<FormProps<F>, 'renderFooter' | 'onBack' | 'buttonText'> &
   Pick<UseFormSubmit, 'uploads'> & {
@@ -63,8 +63,8 @@ export const FormFooter = <F extends IFormElement>({
       </Collapse>
       <UploadProgress uploads={uploads} />
       <FormErrorView />
-      {renderFooter ? (
-        renderFooter(props)
+      {RenderFooter ? (
+        <RenderFooter {...props} />
       ) : (
         <HStack py={2} borderTop="1px solid" borderColor="background.200" px={3} w="100%">
           {onBack ? <CancelButton onBack={onBack}>Cancel</CancelButton> : null}

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

@@ -1,13 +1,7 @@
 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 { EditableProps, Field, useColorModeValue, useEditable } from '@chem-po/react'
 import React, { CSSProperties, useEffect, useMemo } from 'react'
 import { LoadingOverlay } from '../../loading/Loading'
 import { UploadProgress } from '../UploadProgress'
@@ -56,74 +50,72 @@ export const Editable = <T extends Field>({
   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 : (
-            <>
+    <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"
-                icon={isEditing ? <CloseIcon width={3} /> : <EditIcon />}
-                onMouseEnter={() => setEditHovered(true)}
-                onMouseLeave={() => setEditHovered(false)}
+                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={() => {
-                  if (isEditing) {
-                    setValue(value)
-                    handleEditClose()
-                  } else handleEditOpen()
+                  submit()
                 }}
               />
-              <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>
+          </>
+        )}
+        <LoadingOverlay isLoading={isLoading} />
       </Flex>
-    </ChempoFormProvider>
+      <UploadProgress uploads={uploads} />
+    </Flex>
   )
 }

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

@@ -50,7 +50,7 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
     if (active) return 'rgba(0,0,0,0.7)'
     return 'rgba(0,0,0,0.3)'
   }, [error, active, touched])
-  const { _type, optional, label } = field
+  const { _type, optional, label: Label } = field
   const showPlaceholder = useMemo(
     () => _type === 'multipleSelect' || (!!value && _type !== 'file' && _type !== 'boolean'),
     [value, _type],
@@ -84,10 +84,14 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
       pb={pb}
       transition="all 500ms"
       pt={showPlaceholder && !inEditable ? 4 : 0}>
-      {label && !inEditable ? (
-        <Text color="gray.800" fontSize="sm" px={2}>
-          {label}
-        </Text>
+      {Label && !inEditable ? (
+        typeof Label === 'string' ? (
+          <Text color="gray.800" fontSize="sm" px={2}>
+            {Label}
+          </Text>
+        ) : (
+          <Label />
+        )
       ) : null}
       <Flex width="100%" borderRadius={4} py={0.5} overflow="hidden" {...styles}>
         <Component ref={ref} {...props} />

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

@@ -6,7 +6,7 @@ import { FieldProps } from '../types'
 
 export const MultipleSelectComponent = forwardRef<InputRef, FieldProps<MultipleSelectField>>(
   ({ field, input, inEditable }, ref) => {
-    const { options, renderOption, getOptionKey } = field
+    const { options, renderOption: RenderOption, getOptionKey } = field
     const { onChange, value, onFocus, onBlur } = input
     const { colorMode } = useColorMode()
     useImperativeHandle(ref, () => ({
@@ -34,7 +34,7 @@ export const MultipleSelectComponent = forwardRef<InputRef, FieldProps<MultipleS
                 onChange(value?.includes(o) ? value.filter(v => v !== o) : [...(value ?? []), o])
               }}
               _hover={{ opacity: 0.8 }}>
-              {renderOption(o, colorMode, !!value?.includes(o))}
+              <RenderOption value={o} colorMode={colorMode} isSelected={!!value?.includes(o)} />
             </Button>
           </Box>
         ))}

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

@@ -34,7 +34,7 @@ export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
       },
     }))
 
-    const renderOption = customRender ?? DefaultRenderOption
+    const RenderOption = customRender ?? DefaultRenderOption
 
     return (
       <Popover strategy="fixed" placement="bottom" matchWidth isOpen={active} onClose={onBlur}>
@@ -49,7 +49,13 @@ export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
             }}
             variant="unstyled"
             position="relative">
-            <Box>{selected ? renderOption(selected, colorMode, true) : placeholder}</Box>
+            <Box>
+              {selected ? (
+                <RenderOption value={selected} colorMode={colorMode} isSelected={true} />
+              ) : (
+                <Text opacity={0.7}>{placeholder}</Text>
+              )}
+            </Box>
           </Button>
         </PopoverTrigger>
         <PopoverContent w="100%" overflowY="auto" maxH="300px">
@@ -68,7 +74,7 @@ export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
                 _dark={{
                   _hover: { bg: 'whiteAlpha.100' },
                 }}>
-                {renderOption(o, colorMode, o === selected)}
+                <RenderOption value={o} colorMode={colorMode} isSelected={o === selected} />
               </Button>
             ))}
           </PopoverBody>

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

@@ -15,7 +15,7 @@ export const MultipleSelectFieldView = ({
   noLabel?: boolean
   style?: CSSProperties
 }) => {
-  const { placeholder, renderOption } = field
+  const { placeholder, renderOption: RenderOption } = field
   const { colorMode } = useColorMode()
   return (
     <Flex maxW="100%" flexFlow="row wrap" align="center" style={style}>
@@ -27,7 +27,7 @@ export const MultipleSelectFieldView = ({
       {value ? (
         value.map((v: any) => (
           <Box key={field.getOptionKey ? field.getOptionKey(v) : v} p={0.5}>
-            {renderOption(v, colorMode, true)}
+            <RenderOption value={v} colorMode={colorMode} isSelected={true} />
           </Box>
         ))
       ) : (

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

@@ -2,24 +2,31 @@ import { Flex, Text, useColorMode } from '@chakra-ui/react'
 import { SelectField } from '@chem-po/react'
 import React, { CSSProperties } from 'react'
 
+const stringifyValue = (value: any) => {
+  if (typeof value === 'string') return value
+  if (typeof value === 'number') return value.toString()
+  if (typeof value === 'boolean') return value.toString()
+  return JSON.stringify(value)
+}
 const DefaultRenderOption = (value: any) => {
-  return <Text>{typeof value === 'string' ? value : JSON.stringify(value)}</Text>
+  // TODO: maybe handle non-string values more gracefully
+  return <Text>{stringifyValue(value)}</Text>
 }
 
-export const SelectFieldView = ({
+export const SelectFieldView = <F extends SelectField>({
   field,
   value,
   noLabel,
   style,
 }: {
-  field: SelectField
-  value: any
+  field: F
+  value: F['defaultValue']
   noLabel?: boolean
   style?: CSSProperties
 }) => {
   const { placeholder, renderOption: customRender } = field
   const { colorMode } = useColorMode()
-  const renderOption = customRender ?? DefaultRenderOption
+  const RenderOption = customRender ?? DefaultRenderOption
   return (
     <Flex align="center" style={style}>
       {noLabel ? null : (
@@ -27,7 +34,7 @@ export const SelectFieldView = ({
           {placeholder}
         </Text>
       )}
-      {value ? renderOption(value, colorMode, true) : 'None'}
+      {value ? <RenderOption value={value} colorMode={colorMode} isSelected={true} /> : 'None'}
     </Flex>
   )
 }

package/src/components/list/ListItem/ListCell.tsx

@@ -1,7 +1,8 @@
 import { Flex } from '@chakra-ui/react'
 import { AnyObject, ColorMode, DBItem } from '@chem-po/core'
 import { DataList, ListGridOptions } from '@chem-po/react'
-import React, { GridChildComponentProps } from 'react-window'
+import React from 'react'
+import { GridChildComponentProps } from 'react-window'
 
 export interface GridItemProps<T extends AnyObject> {
   list: DataList<T>
@@ -37,12 +38,12 @@ export const ListCell = <T extends AnyObject>({
       px={1}
       py={0.25}
       key={itemIdx}>
-      {Render({
-        index: itemIdx,
-        item,
-        refetch: refetch ? () => refetch(item._id) : undefined,
-        colorMode,
-      })}
+      <Render
+        index={itemIdx}
+        item={item}
+        refetch={refetch ? () => refetch(item._id) : undefined}
+        colorMode={colorMode}
+      />
     </Flex>
   )
 }

package/src/components/list/ListItem/ListRow.tsx

@@ -1,7 +1,8 @@
 import { Flex } from '@chakra-ui/react'
 import { AnyObject, ColorMode, DBItem } from '@chem-po/core'
 import { DataList } from '@chem-po/react'
-import React, { ListChildComponentProps } from 'react-window'
+import React from 'react'
+import { ListChildComponentProps } from 'react-window'
 
 export interface ListItemProps<T extends AnyObject = AnyObject> {
   list: DataList<T>
@@ -32,7 +33,12 @@ export const ListRow = <T extends AnyObject>({
       }}
       style={style}
       key={index}>
-      {Render({ index, item, refetch: refetch ? () => refetch(item._id) : undefined, colorMode })}
+      <Render
+        index={index}
+        item={item}
+        refetch={refetch ? () => refetch(item._id) : undefined}
+        colorMode={colorMode}
+      />
     </Flex>
   )
 }

package/src/components/view/RedirectView.tsx

@@ -7,7 +7,7 @@ import { CircularProgress } from '../loading/CircularProgress'
 import { Loading } from '../loading/Loading'
 
 export const RedirectView: React.FC<{ loading?: boolean }> = ({ loading }) => {
-  const timer = useRef<any>()
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
   const authLoading = useAuth(s => s.loading)
 
   const navigate = useNavigate()