@chem-po/react-web 0.0.15 → 0.0.17

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>(
     () => ({

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

@@ -1,27 +1,18 @@
 import { Flex, Text } from '@chakra-ui/react'
 
 import { formatField } from '@chem-po/core'
-import { Field } from '@chem-po/react'
+import { Field, FormatField } from '@chem-po/react'
 import React, { CSSProperties, useMemo } from 'react'
 import { FileFieldView } from './file'
 import { MultipleSelectFieldView } from './multipleSelect'
 import { SelectFieldView } from './select'
+import { FieldViewProps } from './types'
 
-const DefaultFieldView = ({
-  field,
-  value,
-  noLabel,
-  style,
-}: {
-  field: Field
-  value: any
-  noLabel?: boolean
-  style?: CSSProperties
-}) => {
+const DefaultFieldView = <F extends Field>({ field, value, noLabel, style }: FieldViewProps<F>) => {
   const { placeholder } = field
 
   const formatted = useMemo(() => {
-    const format = formatField[field._type]
+    const format = formatField[field._type] as FormatField<F>
     if (!format) return value
     return format(field, value)
   }, [value, field])

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

@@ -2,20 +2,27 @@ import { Box, Text } from '@chakra-ui/react'
 
 import { Flex, useColorMode } from '@chakra-ui/react'
 import { MultipleSelectField } from '@chem-po/react'
-import React, { CSSProperties } from 'react'
+import React, { useMemo } from 'react'
+import { useInputStyles } from '../input/hooks/useInputStyles'
+import { getRenderSelectedOptionText } from '../input/multipleSelect'
+import { FieldViewProps } from './types'
 
-export const MultipleSelectFieldView = ({
+export const MultipleSelectFieldView = <F extends MultipleSelectField>({
   field,
   value,
   noLabel,
   style,
-}: {
-  field: MultipleSelectField
-  value: any[]
-  noLabel?: boolean
-  style?: CSSProperties
-}) => {
-  const { placeholder, renderOption: RenderOption } = field
+}: FieldViewProps<F>) => {
+  const { placeholder, options } = field
+  const { size, text } = useInputStyles(undefined, field.size)
+  const selectedOptions = useMemo(
+    () => options.filter(o => value?.includes(o.value)),
+    [value, options],
+  )
+  const RenderSelectedOptionText = useMemo(
+    () => getRenderSelectedOptionText(field, text),
+    [field, text],
+  )
   const { colorMode } = useColorMode()
   return (
     <Flex maxW="100%" flexFlow="row wrap" align="center" style={style}>
@@ -24,10 +31,16 @@ export const MultipleSelectFieldView = ({
           {placeholder}
         </Text>
       )}
-      {value ? (
-        value.map((v: any) => (
-          <Box key={field.getOptionKey ? field.getOptionKey(v) : v} p={0.5}>
-            <RenderOption value={v} colorMode={colorMode} isSelected={true} />
+      {selectedOptions.length ? (
+        selectedOptions.map(o => (
+          <Box key={o.value} p={0.5}>
+            <RenderSelectedOptionText
+              value={o.value}
+              option={o}
+              colorMode={colorMode}
+              isSelected={true}
+              size={size}
+            />
           </Box>
         ))
       ) : (

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

@@ -1,6 +1,8 @@
 import { Flex, Text, useColorMode } from '@chakra-ui/react'
 import { SelectField } from '@chem-po/react'
-import React, { CSSProperties } from 'react'
+import React from 'react'
+import { useInputStyles } from '../input/hooks/useInputStyles'
+import { FieldViewProps } from './types'
 
 const stringifyValue = (value: any) => {
   if (typeof value === 'string') return value
@@ -18,14 +20,12 @@ export const SelectFieldView = <F extends SelectField>({
   value,
   noLabel,
   style,
-}: {
-  field: F
-  value: F['defaultValue']
-  noLabel?: boolean
-  style?: CSSProperties
-}) => {
+  size: propSize,
+}: FieldViewProps<F>) => {
   const { placeholder, renderOption: customRender } = field
   const { colorMode } = useColorMode()
+  const { size } = useInputStyles(undefined, field.size, propSize)
+  const selectedOption = field.options.find(o => o.value === value)
   const RenderOption = customRender ?? DefaultRenderOption
   return (
     <Flex align="center" style={style}>
@@ -34,7 +34,17 @@ export const SelectFieldView = <F extends SelectField>({
           {placeholder}
         </Text>
       )}
-      {value ? <RenderOption value={value} colorMode={colorMode} isSelected={true} /> : 'None'}
+      {value && selectedOption ? (
+        <RenderOption
+          value={value}
+          option={selectedOption}
+          colorMode={colorMode}
+          isSelected={true}
+          size={size}
+        />
+      ) : (
+        <Text>None</Text>
+      )}
     </Flex>
   )
 }

package/src/components/form/view/types.ts

@@ -0,0 +1,11 @@
+import { InputSize } from '@chem-po/core'
+import { Field } from '@chem-po/react'
+import { CSSProperties } from 'react'
+
+export interface FieldViewProps<F extends Field> {
+  field: F
+  value: F['defaultValue']
+  noLabel?: boolean
+  size?: InputSize
+  style?: CSSProperties
+}

package/src/components/list/Body/InfiniteScrollGridBody.tsx

@@ -42,7 +42,7 @@ export const InfiniteScrollGridBody = <T extends AnyObject>({
       grid: options,
       colorMode,
       numCols,
-      onSelect: (item: WithId<T>) => onSelectItem(item._id),
+      onSelect: (item: WithId<T>) => onSelectItem(item.id),
       refetch: refetchItem,
     }),
     [items, list, refetchItem, onSelectItem, mobileLayout, numCols, options, colorMode],
@@ -83,7 +83,7 @@ export const InfiniteScrollGridBody = <T extends AnyObject>({
       data: ListItemProps<T>
     }) => {
       const index = rowIndex * numCols + columnIndex
-      return data.items[index]?._id || `${index}`
+      return data.items[index]?.id || `${index}`
     },
     [numCols],
   )

package/src/components/list/Body/InfiniteScrollListBody.tsx

@@ -26,7 +26,7 @@ export const InfiniteScrollListBody = ({ height }: { height: number }) => {
       items,
       mobileLayout,
       colorMode,
-      onSelect: (item: WithId<AnyObject>) => onSelectItem(item._id),
+      onSelect: (item: WithId<AnyObject>) => onSelectItem(item.id),
       refetch: refetchItem,
     }),
     [items, list, refetchItem, onSelectItem, mobileLayout, colorMode],
@@ -78,7 +78,7 @@ export const InfiniteScrollListBody = ({ height }: { height: number }) => {
           itemCount={totalCount ?? 0}
           itemData={itemData}
           style={{ overflowX: 'hidden' }}
-          itemKey={index => items[index]?._id || `${index}`}
+          itemKey={index => items[index]?.id || `${index}`}
           onItemsRendered={i => {
             onItemsRendered(i)
           }}
@@ -100,7 +100,7 @@ export const InfiniteScrollListBody = ({ height }: { height: number }) => {
           itemSize={itemHeight as number}
           itemCount={totalCount ?? 0}
           itemData={itemData}
-          itemKey={index => items[index]?._id || `${index}`}
+          itemKey={index => items[index]?.id || `${index}`}
           style={{
             overflowX: 'hidden',
           }}

package/src/components/list/Body/PagedGridBody.tsx

@@ -33,7 +33,7 @@ const BasePagedGridBody = <
       list,
       items,
       numCols,
-      onSelect: item => onSelectItem(item._id),
+      onSelect: item => onSelectItem(item.id),
       mobileLayout,
       colorMode,
       grid: options,

package/src/components/list/Body/PagedListBody.tsx

@@ -22,7 +22,7 @@ const BasePagedListBody = ({ height }: { height: number }) => {
       list,
       colorMode,
       items,
-      onSelect: item => onSelectItem(item._id),
+      onSelect: item => onSelectItem(item.id),
       mobileLayout,
     }),
     [items, list, onSelectItem, mobileLayout, colorMode],

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

@@ -41,7 +41,7 @@ export const ListCell = <T extends AnyObject>({
       <Render
         index={itemIdx}
         item={item}
-        refetch={refetch ? () => refetch(item._id) : undefined}
+        refetch={refetch ? () => refetch(item.id) : undefined}
         colorMode={colorMode}
       />
     </Flex>

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

@@ -36,7 +36,7 @@ export const ListRow = <T extends AnyObject>({
       <Render
         index={index}
         item={item}
-        refetch={refetch ? () => refetch(item._id) : undefined}
+        refetch={refetch ? () => refetch(item.id) : undefined}
         colorMode={colorMode}
       />
     </Flex>

package/src/components/list/ListItemView.tsx

@@ -13,7 +13,7 @@ export const ListItemView = () => {
     // refetchItem,
   } = usePaginatedList()
   const item = useMemo(
-    () => data.find(d => d._id === selectedItemId) ?? null,
+    () => data.find(d => d.id === selectedItemId) ?? null,
     [data, selectedItemId],
   )
   const { colorMode } = useColorMode()

package/src/components/list/utils.ts

@@ -30,6 +30,7 @@ export const getSearchQueries = <T extends AnyObject>(
   baseQuery: Query<T>,
   searchData: BaseQuery<T>['search'],
 ): Array<Query<T>> => {
+  if (!searchData) return [baseQuery]
   const { paths, query: search } = searchData
   if (!paths?.length || !search) return [baseQuery]
   return paths.map(path => getTextSearchQuery(baseQuery, search, path))

package/src/components/view/RedirectView.tsx

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

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

@@ -1,39 +0,0 @@
-import { InputSize } from '@chem-po/react'
-import { CSSProperties, useMemo } from 'react'
-
-const inputPaddingY: Record<InputSize, number> = {
-  xs: 0.25,
-  sm: 0.35,
-  md: 0.5,
-  lg: 0.5,
-  xl: 0.5,
-}
-
-const inputPaddingX: Record<InputSize, number> = {
-  xs: 0.5,
-  sm: 0.75,
-  md: 0.75,
-  lg: 0.75,
-  xl: 0.75,
-}
-const getInputPadding = (size: InputSize) => {
-  const paddingY = inputPaddingY[size]
-  const paddingX = inputPaddingX[size]
-  return `${paddingY}rem ${paddingX}rem`
-}
-const fontSize: Record<InputSize, string> = {
-  xs: '0.75rem',
-  sm: '0.875rem',
-  md: '1rem',
-  lg: '1.125rem',
-  xl: '1.25rem',
-}
-
-export const useInputStyle = (size?: InputSize) =>
-  useMemo<Partial<CSSProperties>>(
-    () => ({
-      padding: getInputPadding(size ?? 'md'),
-      fontSize: fontSize[size ?? 'md'],
-    }),
-    [size],
-  )