@chem-po/react-web 0.0.15 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chem-po/react-web",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,8 +40,8 @@
     "react-window-infinite-loader": "^1.0.9",
     "@hello-pangea/dnd": "^18.0.1",
     "zustand": "^4.3.3",
-    "@chem-po/core": "0.0.15",
-    "@chem-po/react": "0.0.15"
+    "@chem-po/core": "0.0.16",
+    "@chem-po/react": "0.0.16"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@types/howler": "^2.2.11",
-    "@types/react": "~19.0.10",
+    "@types/react": "~19.0.12",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-transition-group": "^4.4.11",
     "@types/react-window": "^1.8.8",

package/src/components/form/FormFooter.tsx

@@ -3,7 +3,13 @@ import React from 'react'
 
 import { FC, PropsWithChildren } from 'react'
 
-import { FormProps, IFormElement, useChempoForm, UseFormSubmit } from '@chem-po/react'
+import {
+  FormProps,
+  IFormElement,
+  useBorderColor,
+  useChempoForm,
+  UseFormSubmit,
+} from '@chem-po/react'
 import { useFormState } from 'react-hook-form'
 import { UploadProgress } from './UploadProgress'
 
@@ -56,6 +62,7 @@ export const FormFooter = <F extends IFormElement>({
   }) => {
   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}>
@@ -66,7 +73,7 @@ export const FormFooter = <F extends IFormElement>({
       {RenderFooter ? (
         <RenderFooter {...props} />
       ) : (
-        <HStack py={2} borderTop="1px solid" borderColor="background.200" px={3} w="100%">
+        <HStack py={2} borderTop="1px solid" borderColor={borderColor} px={3} w="100%">
           {onBack ? <CancelButton onBack={onBack}>Cancel</CancelButton> : null}
           <SubmitButton
             size="sm"

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

@@ -18,7 +18,6 @@ export const Editable = <T extends Field>({
   onEditOpen,
 }: EditableProps<CSSProperties, T>) => {
   const {
-    formattedValue,
     inputRef,
     setValue,
     isLoading,
@@ -31,7 +30,6 @@ export const Editable = <T extends Field>({
     setEditHovered,
     submit,
     submitValue,
-    parse,
   } = useEditable({
     value: initValue,
     field,
@@ -66,11 +64,11 @@ export const Editable = <T extends Field>({
           {isEditing || alwaysEditing ? (
             <StandaloneInput
               ref={inputRef}
-              value={formattedValue}
+              value={value}
               inEditable
               field={field}
               style={{ padding: 0, ...style }}
-              onChange={alwaysEditing ? v => submitValue(parse(v)) : v => setValue(parse(v))}
+              onChange={alwaysEditing ? v => submitValue(v) : setValue}
             />
           ) : (
             <FieldView style={style} field={field} value={value} />

package/src/components/form/input/hooks/index.ts

@@ -1,2 +1,2 @@
 export * from './useInputImperativeHandle'
-export * from './useInputStyle'
+export * from './useInputStyles'

package/src/components/form/input/hooks/useInputStyles.ts

@@ -0,0 +1,125 @@
+import { InputSize } from '@chem-po/core'
+import { useBackgroundColor, useTextColor } from '@chem-po/react'
+import { useMemo } from 'react'
+
+const inputStyles = {
+  input: {
+    width: '100%',
+    fontSize: '16px',
+    outline: 'none',
+  },
+  inputXSmall: {
+    padding: '4px 6px',
+    borderRadius: '3px',
+  },
+  inputSmall: {
+    padding: '6px 9px',
+    borderRadius: '4px',
+  },
+  inputMedium: {
+    padding: '8px 12px',
+    borderRadius: '6px',
+  },
+  inputLarge: {
+    padding: '10px 14px',
+    borderRadius: '8px',
+  },
+  inputTextSmall: {
+    fontSize: '14px',
+  },
+  inputTextMedium: {
+    fontSize: '16px',
+  },
+  inputTextLarge: {
+    fontSize: '18px',
+  },
+  buttonContainer: {
+    display: 'flex',
+    flexDirection: 'row' as const,
+    alignItems: 'center',
+  },
+  buttonContainerSmall: {
+    gap: '6px',
+  },
+  buttonContainerMedium: {
+    gap: '8px',
+  },
+  buttonContainerLarge: {
+    gap: '10px',
+  },
+}
+
+const iconSizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+}
+
+const clearButtonSizeMap = {
+  sm: 12,
+  md: 14,
+  lg: 16,
+}
+
+const inputSizeMap = {
+  sm: inputStyles.inputSmall,
+  md: inputStyles.inputMedium,
+  lg: inputStyles.inputLarge,
+}
+
+const editableInputSizeMap = {
+  sm: inputStyles.inputXSmall,
+  md: inputStyles.inputSmall,
+  lg: inputStyles.inputMedium,
+}
+
+const inputTextSizeMap = {
+  sm: inputStyles.inputTextSmall,
+  md: inputStyles.inputTextMedium,
+  lg: inputStyles.inputTextLarge,
+}
+
+const buttonContainerSizeMap = {
+  sm: inputStyles.buttonContainerSmall,
+  md: inputStyles.buttonContainerMedium,
+  lg: inputStyles.buttonContainerLarge,
+}
+
+export interface UseInputStyles {
+  text: React.CSSProperties
+  container: React.CSSProperties
+  size: InputSize
+  iconSize: number
+  clearButtonSize: number
+  buttonContainer: React.CSSProperties
+}
+
+export const useInputStyles = (
+  inEditable: boolean | undefined,
+  size: InputSize | undefined,
+  formSize: InputSize = 'md',
+): UseInputStyles => {
+  const formElementBg = useBackgroundColor(150)
+  const bg = useMemo(
+    () => (inEditable ? 'transparent' : formElementBg),
+    [inEditable, formElementBg],
+  )
+  const textColor = useTextColor()
+  const usedSize = size ?? formSize
+
+  return {
+    text: { ...inputTextSizeMap[usedSize], color: textColor },
+    container: {
+      ...inputStyles.input,
+      ...(inEditable ? editableInputSizeMap[usedSize] : inputSizeMap[usedSize]),
+      backgroundColor: bg,
+    },
+    size: usedSize,
+    iconSize: iconSizeMap[usedSize],
+    clearButtonSize: clearButtonSizeMap[usedSize],
+    buttonContainer: {
+      ...inputStyles.buttonContainer,
+      ...buttonContainerSizeMap[usedSize],
+    },
+  }
+}

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

@@ -62,7 +62,7 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
       case 'number':
       case 'currency':
       case 'select':
-        return { boxShadow: `0 0 7px ${color}`, transition: 'all 300ms', bg: 'background.50' }
+        return { boxShadow: `0 0 7px ${color}`, transition: 'all 300ms' }
       default:
         return {}
     }
@@ -83,7 +83,7 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
       spacing={0}
       pb={pb}
       transition="all 500ms"
-      pt={showPlaceholder && !inEditable ? 4 : 0}>
+      pt={showPlaceholder && !inEditable ? 5 : 0}>
       {Label && !inEditable ? (
         typeof Label === 'string' ? (
           <Text color="gray.800" fontSize="sm" px={2}>
@@ -93,7 +93,7 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
           <Label />
         )
       ) : null}
-      <Flex width="100%" borderRadius={4} py={0.5} overflow="hidden" {...styles}>
+      <Flex width="100%" borderRadius={4} overflow="hidden" {...styles}>
         <Component ref={ref} {...props} />
       </Flex>
       {inEditable ? null : (
@@ -113,7 +113,7 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
             opacity={showPlaceholder ? 1 : 0}
             transition={`opacity 500ms ease ${showPlaceholder ? 250 : 0}ms`}
             position="absolute"
-            top="-4px"
+            top="-5px"
             pointerEvents="none"
             fontSize="sm"
             fontFamily="fonts.heading"

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

@@ -1,13 +1,33 @@
 import { Box, Button, Flex, Text, useColorMode } from '@chakra-ui/react'
-import { InputRef } from '@chem-po/core'
+import { InputRef, RenderSelectOptionProps } from '@chem-po/core'
 import { MultipleSelectField } from '@chem-po/react'
-import React, { forwardRef, useImperativeHandle } from 'react'
+import React, { CSSProperties, forwardRef, useImperativeHandle, useMemo } from 'react'
+import { useInputStyles } from '../hooks/useInputStyles'
 import { FieldProps } from '../types'
 
+export const getRenderSelectedOptionText = (
+  field: MultipleSelectField,
+  textStyle: CSSProperties,
+) => {
+  return (
+    props: RenderSelectOptionProps<
+      MultipleSelectField['options'][number]['value'],
+      MultipleSelectField['options'][number]
+    >,
+  ) => {
+    const { renderOption: RenderOption } = field
+    if (typeof RenderOption === 'function') {
+      return <RenderOption {...props} />
+    }
+    return <Text style={textStyle}>{props.option.label}</Text>
+  }
+}
+
 export const MultipleSelectComponent = forwardRef<InputRef, FieldProps<MultipleSelectField>>(
-  ({ field, input, inEditable }, ref) => {
-    const { options, renderOption: RenderOption, getOptionKey } = field
+  ({ field, input, inEditable, formSize }, ref) => {
+    const { options, renderOption: RenderOption } = field
     const { onChange, value, onFocus, onBlur } = input
+    const { text, size } = useInputStyles(inEditable, field.size, formSize)
     const { colorMode } = useColorMode()
     useImperativeHandle(ref, () => ({
       focus: () => {
@@ -18,23 +38,37 @@ export const MultipleSelectComponent = forwardRef<InputRef, FieldProps<MultipleS
       },
     }))
 
+    const RenderSelectedOptionText = useMemo(
+      () => getRenderSelectedOptionText(field, text),
+      [field, text],
+    )
     const body = (
       <Flex w="100%" flexFlow="row wrap">
         {options.map(o => (
-          <Box key={getOptionKey ? getOptionKey(o) : o} p={0.5}>
+          <Box key={o.value} p={0.5}>
             <Button
               w="100%"
               minH={0}
               size="xs"
               p={0}
-              opacity={value?.includes(o) ? 1 : 0.7}
+              opacity={value?.includes(o.value) ? 1 : 0.7}
               variant="unstyled"
               onClick={e => {
                 e.stopPropagation()
-                onChange(value?.includes(o) ? value.filter(v => v !== o) : [...(value ?? []), o])
+                onChange(
+                  value?.includes(o.value)
+                    ? value.filter(v => v !== o.value)
+                    : [...(value ?? []), o.value],
+                )
               }}
               _hover={{ opacity: 0.8 }}>
-              <RenderOption value={o} colorMode={colorMode} isSelected={!!value?.includes(o)} />
+              <RenderSelectedOptionText
+                value={o.value}
+                size={size}
+                option={o}
+                colorMode={colorMode}
+                isSelected
+              />
             </Button>
           </Box>
         ))}

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

@@ -5,60 +5,64 @@ import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState
 import CurrencyInput from 'react-currency-input-field'
 import { InputSlider } from '../InputSlider'
 import { useInputImperativeHandle } from '../hooks/useInputImperativeHandle'
-import { useInputStyle } from '../hooks/useInputStyle'
+import { useInputStyles } from '../hooks/useInputStyles'
+import { InputContainer } from '../shared/InputContainer'
 import { FieldProps } from '../types'
 import './styles.css'
 
 export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & { prefix?: string }>(
-  ({ input: { onChange, value, ...input }, field, size, prefix, inEditable: _, ...props }, ref) => {
-    const { type, defaultValue, placeholder } = field
+  (
+    { input: { onChange, value, ...input }, field, formSize, prefix, inEditable, ...props },
+    ref,
+  ) => {
+    const { type, defaultValue, placeholder, size } = field
     const className = useColorModeValue('number-input', 'number-input-dark')
-    const style = useInputStyle(size)
+    const { container, text } = useInputStyles(inEditable, size, formSize)
     const inputRef = useInputImperativeHandle(ref)
     const [endsWith, setEndsWith] = useState('')
     const displayed = typeof value === 'number' && !Number.isNaN(value) ? `${value}${endsWith}` : ''
-    if (type === 'slider') {
-      return (
+    const body =
+      type === 'slider' ? (
         <InputSlider
           label={placeholder}
           onChange={onChange}
           value={value}
           defaultValue={defaultValue}
         />
+      ) : (
+        <CurrencyInput
+          className={className}
+          placeholder={field.placeholder}
+          decimalsLimit={field.precision}
+          allowDecimals={!!field.precision}
+          prefix={prefix}
+          ref={inputRef}
+          onValueChange={(v, _, values) => {
+            if (v?.endsWith('.')) setEndsWith('.')
+            else if (v?.includes('.') && v?.endsWith('0')) setEndsWith('0')
+            else setEndsWith('')
+            onChange(values?.float)
+          }}
+          value={displayed}
+          {...props}
+          style={{
+            background: 'none',
+            // height: 'auto',
+            resize: 'none',
+            fontFamily: 'Encode Sans',
+            boxSizing: 'border-box',
+            opacity: value ? 1 : 0.7,
+            width: '100%',
+            borderRadius: '4px',
+            border: 'none',
+            outline: 'none',
+            ...text,
+            ...props.style,
+          }}
+          {...input}
+        />
       )
-    }
-    return (
-      <CurrencyInput
-        className={className}
-        placeholder={field.placeholder}
-        decimalsLimit={field.precision}
-        allowDecimals={!!field.precision}
-        prefix={prefix}
-        ref={inputRef}
-        onValueChange={(v, _, values) => {
-          if (v?.endsWith('.')) setEndsWith('.')
-          else if (v?.includes('.') && v?.endsWith('0')) setEndsWith('0')
-          else setEndsWith('')
-          onChange(values?.float)
-        }}
-        value={displayed}
-        {...props}
-        style={{
-          background: 'none',
-          // height: 'auto',
-          resize: 'none',
-          fontFamily: 'Encode Sans',
-          boxSizing: 'border-box',
-          width: '100%',
-          borderRadius: '4px',
-          border: 'none',
-          outline: 'none',
-          ...style,
-          ...props.style,
-        }}
-        {...input}
-      />
-    )
+    return <InputContainer style={container}>{body}</InputContainer>
   },
 )
 const BaseCurrencyAmountComponent = (

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

@@ -1,5 +1,4 @@
 import {
-  Box,
   Button,
   Popover,
   PopoverArrow,
@@ -9,21 +8,20 @@ import {
   Text,
   useColorMode,
 } from '@chakra-ui/react'
-import { InputRef } from '@chem-po/core'
+import { InputRef, RenderSelectOptionProps } from '@chem-po/core'
 import { SelectField } from '@chem-po/react'
 import React, { forwardRef, useImperativeHandle, useMemo } from 'react'
+import { useInputStyles } from '../hooks/useInputStyles'
+import { InputContainer } from '../shared/InputContainer'
 import { FieldProps } from '../types'
 
-const DefaultRenderOption = (value: any) => {
-  return <Text>{typeof value === 'string' ? value : JSON.stringify(value)}</Text>
-}
-
 export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
-  ({ field, input, meta }, ref) => {
-    const { placeholder, options, renderOption: customRender, getOptionKey } = field
+  ({ field, input, meta, inEditable, formSize }, ref) => {
+    const { placeholder, options, renderOption: customRender } = field
     const { onChange, value, onFocus, onBlur } = input
+    const { text, size, container } = useInputStyles(inEditable, field.size, formSize)
     const { active } = meta
-    const selected = useMemo(() => value && options.find(o => o === value), [value, options])
+    const selected = useMemo(() => value && options.find(o => o.value === value), [value, options])
     const { colorMode } = useColorMode()
     useImperativeHandle(ref, () => ({
       focus: () => {
@@ -34,47 +32,63 @@ export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
       },
     }))
 
+    const DefaultRenderOption = (props: RenderSelectOptionProps) => {
+      return <Text style={text}>{props.option.label}</Text>
+    }
+
     const RenderOption = customRender ?? DefaultRenderOption
 
     return (
       <Popover strategy="fixed" placement="bottom" matchWidth isOpen={active} onClose={onBlur}>
         <PopoverTrigger>
           <Button
-            fontWeight={500}
             w="100%"
-            opacity={value ? 1 : 0.7}
             onClick={e => {
               e.stopPropagation()
               onFocus()
             }}
             variant="unstyled"
             position="relative">
-            <Box>
+            <InputContainer style={container}>
               {selected ? (
-                <RenderOption value={selected} colorMode={colorMode} isSelected={true} />
+                <RenderOption
+                  size={size}
+                  value={selected.value}
+                  option={selected}
+                  colorMode={colorMode}
+                  isSelected={true}
+                />
               ) : (
-                <Text opacity={0.7}>{placeholder}</Text>
+                <Text fontWeight={400} style={text} opacity={0.6}>
+                  {placeholder}
+                </Text>
               )}
-            </Box>
+            </InputContainer>
           </Button>
         </PopoverTrigger>
         <PopoverContent w="100%" overflowY="auto" maxH="300px">
           <PopoverBody p={0}>
             {options.map(o => (
               <Button
-                key={getOptionKey ? getOptionKey(o) : o}
+                key={o.value}
                 w="100%"
                 variant="unstyled"
                 onClick={e => {
                   e.stopPropagation()
-                  onChange(o)
+                  onChange(o.value)
                   onBlur()
                 }}
                 _hover={{ bg: 'blackAlpha.100' }}
                 _dark={{
                   _hover: { bg: 'whiteAlpha.100' },
                 }}>
-                <RenderOption value={o} colorMode={colorMode} isSelected={o === selected} />
+                <RenderOption
+                  value={o.value}
+                  option={o}
+                  size={size}
+                  colorMode={colorMode}
+                  isSelected={o.value === value}
+                />
               </Button>
             ))}
           </PopoverBody>

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

@@ -0,0 +1,13 @@
+import { Flex } from '@chakra-ui/react'
+import React, { CSSProperties, PropsWithChildren } from 'react'
+
+export const InputContainer = ({
+  children,
+  style,
+}: PropsWithChildren<{ style: CSSProperties }>) => {
+  return (
+    <Flex width="100%" borderRadius={4} style={style}>
+      {children}
+    </Flex>
+  )
+}

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

@@ -1,15 +1,18 @@
 import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
-import { Flex, IconButton, Input } from '@chakra-ui/react'
+import { IconButton, Input } from '@chakra-ui/react'
 import { InputRef } from '@chem-po/core'
 import { TextField } from '@chem-po/react'
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import { useInputStyles } from '../hooks'
+import { InputContainer } from '../shared/InputContainer'
 import { FieldProps } from '../types'
 import { TextAreaComponent } from './textarea'
 
 export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
-  ({ input, inEditable, meta, field }, ref) => {
+  ({ input, inEditable, meta, field, formSize }, ref) => {
     const { placeholder, type } = field
     const [isHidden, setIsHidden] = useState(type === 'password')
+    const { text, container } = useInputStyles(inEditable, field.size, formSize)
     const { value } = input
     const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
 
@@ -32,15 +35,18 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
             border: 'none',
           }}
           borderRadius={0}
-          px={inEditable ? 0 : 3}
           background="transparent"
           _focus={{
             border: 'none',
+            boxShadow: 'none',
           }}
-          py={inEditable ? 0 : 0.5}
+          py={0}
+          px={0}
+          height="auto"
+          outline="none"
           type={isHidden ? 'password' : 'text'}
-          height={inEditable ? 'auto' : 10}
           placeholder={placeholder}
+          style={text}
           {...input}
           onChange={e => {
             input.onChange({ target: { value: e.target.value } })
@@ -49,22 +55,22 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
         />
       )
 
-    return type === 'password' ? (
-      <Flex width="100%" position="relative" align="center">
+    return (
+      <InputContainer style={container}>
         {body}
-        <IconButton
-          position="absolute"
-          right={2}
-          onClick={() => setIsHidden(!isHidden)}
-          variant="ghost"
-          icon={isHidden ? <ViewIcon /> : <ViewOffIcon />}
-          aria-label={isHidden ? 'show' : 'hide'}
-          title={isHidden ? 'Show' : 'Hide'}
-          size="xs"
-        />
-      </Flex>
-    ) : (
-      body
+        {type === 'password' && (
+          <IconButton
+            position="absolute"
+            right={2}
+            onClick={() => setIsHidden(!isHidden)}
+            variant="ghost"
+            icon={isHidden ? <ViewIcon /> : <ViewOffIcon />}
+            aria-label={isHidden ? 'show' : 'hide'}
+            title={isHidden ? 'Show' : 'Hide'}
+            size="xs"
+          />
+        )}
+      </InputContainer>
     )
   },
 )

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

@@ -31,7 +31,6 @@ export const TextAreaComponent = forwardRef<InputRef, FieldProps<TextField>>(
           fontFamily: 'fonts.body',
           boxSizing: 'border-box',
           borderRadius: '4px',
-          padding: inEditable ? 0 : '0.6rem 1rem',
           border: 'none',
           outline: 'none',
         }}

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

@@ -1,21 +1,12 @@
 import { Box, Flex, Text } from '@chakra-ui/react'
 import { ImageViewOptions } from '@chem-po/core'
 import { FileField } from '@chem-po/react'
-import React, { CSSProperties, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { ExpandOnMount } from '../../box/ExpandOnMount'
 import { FileView } from '../input/file'
+import { FieldViewProps } from './types'
 
-export const FileFieldView = ({
-  field,
-  value,
-  noLabel,
-  style,
-}: {
-  field: FileField
-  value: any
-  noLabel?: boolean
-  style?: CSSProperties
-}) => {
+export const FileFieldView = ({ field, value, noLabel, style }: FieldViewProps<FileField>) => {
   const { imageOptions, placeholder } = field
   const options = useMemo<ImageViewOptions>(
     () => ({