@chem-po/react-web 0.0.8 → 0.0.10

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

@@ -1,7 +1,7 @@
 import { Flex, FlexProps, Text, VStack } from '@chakra-ui/react'
 import { FieldType, InputRef } from '@chem-po/core'
 import { Field, TypedField } from '@chem-po/react'
-import { ForwardedRef, forwardRef, ForwardRefExoticComponent, useMemo } from 'react'
+import React, { ForwardedRef, forwardRef, ForwardRefExoticComponent, useMemo } from 'react'
 import { BooleanComponent } from './boolean'
 import { ColorComponent } from './color'
 import { DateInput } from './date'
@@ -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

@@ -1,12 +1,12 @@
 import { Box, Button, Flex, Text, useColorMode } from '@chakra-ui/react'
 import { InputRef } from '@chem-po/core'
 import { MultipleSelectField } from '@chem-po/react'
-import { forwardRef, useImperativeHandle } from 'react'
+import React, { forwardRef, useImperativeHandle } from 'react'
 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/number/index.tsx

@@ -1,7 +1,7 @@
 import { useColorModeValue } from '@chakra-ui/react'
 import { InputRef } from '@chem-po/core'
 import { CurrencyAmountField, NumberField } from '@chem-po/react'
-import { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import CurrencyInput from 'react-currency-input-field'
 import { InputSlider } from '../InputSlider'
 import { useInputImperativeHandle } from '../hooks/useInputImperativeHandle'

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

@@ -11,7 +11,7 @@ import {
 } from '@chakra-ui/react'
 import { InputRef } from '@chem-po/core'
 import { SelectField } from '@chem-po/react'
-import { forwardRef, useImperativeHandle, useMemo } from 'react'
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react'
 import { FieldProps } from '../types'
 
 const DefaultRenderOption = (value: any) => {
@@ -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/input/socialMedia/index.tsx

@@ -14,7 +14,14 @@ import {
 
 import { getHandle, InputRef, SocialMediaSites } from '@chem-po/core'
 import { SocialMediaField } from '@chem-po/react'
-import { FC, ForwardedRef, forwardRef, useCallback, useImperativeHandle, useMemo } from 'react'
+import React, {
+  FC,
+  ForwardedRef,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+} from 'react'
 import { FieldProps } from '../types'
 
 const facebookLogo = '/icons/facebook.svg'

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

@@ -2,7 +2,7 @@ import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
 import { Flex, IconButton, Input } from '@chakra-ui/react'
 import { InputRef } from '@chem-po/core'
 import { TextField } from '@chem-po/react'
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import { FieldProps } from '../types'
 import { TextAreaComponent } from './textarea'
 

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

@@ -1,6 +1,6 @@
 import { InputRef } from '@chem-po/core'
 import { TextField, useTextColor } from '@chem-po/react'
-import { ForwardedRef, forwardRef, useImperativeHandle, useRef } from 'react'
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 import { FieldProps } from '../types'
 

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

@@ -1,7 +1,7 @@
 import { Input } from '@chakra-ui/react'
 import { InputRef } from '@chem-po/core'
 import { TimeField } from '@chem-po/react'
-import { forwardRef, useImperativeHandle } from 'react'
+import React, { forwardRef, useImperativeHandle } from 'react'
 import { FieldProps } from '../types'
 // import '../input.css'
 

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

@@ -1,7 +1,7 @@
 import { Box, Flex, Text } from '@chakra-ui/react'
 import { ImageViewOptions } from '@chem-po/core'
 import { FileField } from '@chem-po/react'
-import { CSSProperties, useMemo } from 'react'
+import React, { CSSProperties, useMemo } from 'react'
 import { ExpandOnMount } from '../../box/ExpandOnMount'
 import { FileView } from '../input/file'
 

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

@@ -2,7 +2,7 @@ import { Flex, Text } from '@chakra-ui/react'
 
 import { formatField } from '@chem-po/core'
 import { Field } from '@chem-po/react'
-import { CSSProperties, useMemo } from 'react'
+import React, { CSSProperties, useMemo } from 'react'
 import { FileFieldView } from './file'
 import { MultipleSelectFieldView } from './multipleSelect'
 import { SelectFieldView } from './select'

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

@@ -2,7 +2,7 @@ import { Box, Text } from '@chakra-ui/react'
 
 import { Flex, useColorMode } from '@chakra-ui/react'
 import { MultipleSelectField } from '@chem-po/react'
-import { CSSProperties } from 'react'
+import React, { CSSProperties } from 'react'
 
 export const MultipleSelectFieldView = ({
   field,
@@ -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

@@ -1,25 +1,32 @@
 import { Flex, Text, useColorMode } from '@chakra-ui/react'
 import { SelectField } from '@chem-po/react'
-import { CSSProperties } from '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/Body/InfiniteScrollGridBody.tsx

@@ -1,7 +1,7 @@
 import { useColorMode } from '@chakra-ui/react'
 import { AnyObject, WithId } from '@chem-po/core'
 import { ListGridOptions, useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import {
   FixedSizeGrid,
   GridOnItemsRenderedProps,

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

@@ -1,7 +1,7 @@
 import { useColorMode } from '@chakra-ui/react'
 import { AnyObject, WithId } from '@chem-po/core'
 import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { FixedSizeList, VariableSizeGrid, VariableSizeList } from 'react-window'
 import InfiniteLoader from 'react-window-infinite-loader'
 import { ListItemProps, ListRow } from '../ListItem/ListRow'

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

@@ -1,4 +1,5 @@
 import { useDataList } from '@chem-po/react'
+import React from 'react'
 import { InfiniteScrollGridBody } from './InfiniteScrollGridBody'
 import { InfiniteScrollListBody } from './InfiniteScrollListBody'
 import { PagedGridBody } from './PagedGridBody'

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

@@ -1,7 +1,7 @@
 import { useColorMode } from '@chakra-ui/react'
 import { AnyObject, BaseComponent, ItemPreviewProps, ListGridOptions } from '@chem-po/core'
 import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import { memo, useEffect, useMemo, useRef } from 'react'
+import React, { memo, useEffect, useMemo, useRef } from 'react'
 import { FixedSizeGrid, VariableSizeGrid } from 'react-window'
 import { GridItemProps, ListCell } from '../ListItem/ListCell'
 import { NoItemsRow } from '../NoItems'

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

@@ -1,6 +1,6 @@
 import { useColorMode } from '@chakra-ui/react'
 import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import { FixedSizeList, VariableSizeList } from 'react-window'
 import { ListItemProps, ListRow } from '../ListItem/ListRow'
 import { NoItemsRow } from '../NoItems'

package/src/components/list/DataList.tsx

@@ -5,6 +5,7 @@ import {
   useDataListData,
   usePaginatedQuery,
 } from '@chem-po/react'
+import React from 'react'
 import { ListContainer } from './ListContainer'
 import { ListContent } from './ListContent'
 import { ListViewProps } from './types'

package/src/components/list/ListContainer.tsx

@@ -1,5 +1,6 @@
 import { Flex, FlexProps } from '@chakra-ui/react'
 import { useMounted } from '@chem-po/react'
+import React from 'react'
 import { FullSizeProvider } from '../box'
 
 export const ListContainer = (props: FlexProps) => {

package/src/components/list/ListContent.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@chakra-ui/react'
 import { AnyObject } from '@chem-po/core'
 import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { LoadingOverlay } from '../loading'
 import { ListBody } from './Body/ListBody'
 import { ListCreate } from './ListCreate'

package/src/components/list/ListCreate.tsx

@@ -1,7 +1,7 @@
 import { CloseIcon } from '@chakra-ui/icons'
 import { Flex, IconButton, Text } from '@chakra-ui/react'
 import { FieldMap, useBackendBase, useDataList, usePaginatedList } from '@chem-po/react'
-import { useCallback } from 'react'
+import React, { useCallback } from 'react'
 import { Form } from '../form'
 import { DesktopModal } from '../modal'
 

package/src/components/list/ListFilters.tsx

@@ -19,7 +19,7 @@ import {
 
 import { AnyObject, isFilterGroup, QueryFilter } from '@chem-po/core'
 import { FilterPreset, FilterPresetGroup, useDataList, useScreen } from '@chem-po/react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { useBorderColor } from '../../hooks'
 import { filterMatchesPreset } from './utils'
 

package/src/components/list/ListFooter.tsx

@@ -17,7 +17,7 @@ import {
 import { toPlural } from '@chem-po/core'
 import { useDataList, usePaginatedList } from '@chem-po/react'
 import useResizeObserver from '@react-hook/resize-observer'
-import { useCallback, useMemo, useRef } from 'react'
+import React, { useCallback, useMemo, useRef } from 'react'
 import { useBorderColor } from '../../hooks'
 import { ExpandOnMount } from '../box'
 import { DataListFooterProps } from './types'

package/src/components/list/ListHeader.tsx

@@ -13,7 +13,7 @@ import {
 import { getHasAccess, toPlural } from '@chem-po/core'
 import { useAuth, useDataList } from '@chem-po/react'
 import useResizeObserver from '@react-hook/resize-observer'
-import { useCallback, useMemo, useRef } from 'react'
+import React, { useCallback, useMemo, useRef } from 'react'
 import { useBorderColor } from '../../hooks/ui/useBorderColor'
 import { Toggle, ToggleOption } from '../button/Toggle'
 import { PresetFilters } from './ListFilters'

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

@@ -1,6 +1,7 @@
 import { Flex } from '@chakra-ui/react'
 import { AnyObject, ColorMode, DBItem } from '@chem-po/core'
 import { DataList, ListGridOptions } from '@chem-po/react'
+import React from 'react'
 import { GridChildComponentProps } from 'react-window'
 
 export interface GridItemProps<T extends AnyObject> {
@@ -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,6 +1,7 @@
 import { Flex } from '@chakra-ui/react'
 import { AnyObject, ColorMode, DBItem } from '@chem-po/core'
 import { DataList } from '@chem-po/react'
+import React from 'react'
 import { ListChildComponentProps } from 'react-window'
 
 export interface ListItemProps<T extends AnyObject = AnyObject> {
@@ -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/list/ListItemView.tsx

@@ -1,7 +1,7 @@
 import { Text, useColorMode, useColorModeValue } from '@chakra-ui/react'
 import { AnyObject, DBItem } from '@chem-po/core'
 import { useDataList, usePaginatedList } from '@chem-po/react'
-import { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { DefaultModal } from '../modal'
 
 export const ListItemView = () => {

package/src/components/list/ListSort.tsx

@@ -2,7 +2,7 @@ import { ArrowDownIcon, ArrowUpIcon } from '@chakra-ui/icons'
 import { Button, HStack, Text, useColorMode } from '@chakra-ui/react'
 import { SortDirection } from '@chem-po/core'
 import { SortPreset, useDataList } from '@chem-po/react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { CollapseHorizontal } from '../box/CollapseHorizontal'
 
 const SortButton = ({ preset }: { preset: SortPreset }) => {

package/src/components/list/NoItems.tsx

@@ -1,7 +1,7 @@
 import { Flex, Text } from '@chakra-ui/react'
 import { toPlural } from '@chem-po/core'
 import { useDataList, usePaginatedList } from '@chem-po/react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { Loading } from '../loading'
 
 export const NoItemsRow = () => {

package/src/components/loading/CircularProgress.tsx

@@ -3,6 +3,7 @@ import {
   CircularProgress as Orig,
   useColorModeValue,
 } from '@chakra-ui/react'
+import React from 'react'
 
 export const CircularProgress = (props: CircularProgressProps) => {
   const color = useColorModeValue('gray.400', 'gray.400')

package/src/components/loading/Loading.tsx

@@ -1,7 +1,7 @@
 import { Center, CenterProps, HStack, StackProps, Text, useColorModeValue } from '@chakra-ui/react'
 import { ThemedAsset, useAppAssets } from '@chem-po/react'
 import { LottieOptions, useLottie } from 'lottie-react'
-import { useEffect, useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { ContentBox } from '../box/ContentBox'
 // import loadingAnimation from './circles_loading.json'
 // import loadingAnimationLight from './circles_loading_light.json'

package/src/components/loading/LoadingImage.tsx

@@ -1,6 +1,6 @@
 import { BoxProps, Center, IconButton, Image, ImageProps } from '@chakra-ui/react'
 import { useMounted } from '@chem-po/react'
-import { SyntheticEvent, useCallback, useEffect, useRef, useState } from 'react'
+import React, { SyntheticEvent, useCallback, useEffect, useRef, useState } from 'react'
 import { ImageViewOverlay } from '../overlay/ImageViewOverlay'
 import { LoadingLogo } from './Loading'
 

package/src/components/loading/LoadingSwitch.tsx

@@ -1,5 +1,5 @@
 import { Center, Flex, Switch, Text, useToast } from '@chakra-ui/react'
-import { useCallback, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { Loading } from './Loading'
 
 export const LoadingSwitch = ({

package/src/components/media/PlayButton.tsx

@@ -1,6 +1,7 @@
 import { ButtonProps, Center, IconButton, Image } from '@chakra-ui/react'
 import { SpotifyTrack, WithId } from '@chem-po/core'
 import { usePlaylist } from '@chem-po/react'
+import React from 'react'
 import { useActiveMedia, usePlayer } from '../../store/usePlayer'
 
 export const PlayButton = ({

package/src/components/modal/DefaultModal.tsx

@@ -1,5 +1,5 @@
 import { useScreen } from '@chem-po/react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { DesktopModal } from './DesktopModal'
 import { useForceMobile } from './ForceMobile'
 import { MobileModal } from './MobileModal'

package/src/components/modal/DesktopModal.tsx

@@ -1,4 +1,5 @@
 import { Box, Modal, ModalContent, ModalOverlay } from '@chakra-ui/react'
+import React from 'react'
 import { DefaultModalProps } from './type'
 
 export const DesktopModal = ({ children, isOpen, contentProps, ...props }: DefaultModalProps) => (

package/src/components/modal/MobileModal.tsx

@@ -1,6 +1,6 @@
 import { Flex, useColorModeValue } from '@chakra-ui/react'
 import { useMobileFrame } from '@chem-po/react'
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { MobileOverlay } from '../overlay/MobileOverlay'
 import { DefaultModalProps } from './type'
 

package/src/components/nav/NavBar.tsx

@@ -1,7 +1,7 @@
 import { Button, Flex, Image, useColorModeValue } from '@chakra-ui/react'
 import { palette } from '@chem-po/core'
 import { useViews, View } from '@chem-po/react'
-import { PropsWithChildren, useMemo } from 'react'
+import React, { PropsWithChildren, useMemo } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
 export const NAV_BAR_HEIGHT = 50

package/src/components/overlay/ImageViewOverlay.tsx

@@ -1,7 +1,7 @@
 import { CloseIcon } from '@chakra-ui/icons'
 import { Center, IconButton, Image, Modal, ModalContent, ModalOverlay } from '@chakra-ui/react'
 import { useScreen } from '@chem-po/react'
-import { SyntheticEvent, useCallback, useMemo, useState } from 'react'
+import React, { SyntheticEvent, useCallback, useMemo, useState } from 'react'
 import { LoadingLogo } from '../loading/Loading'
 
 export const ImageViewOverlay = ({ src, onClose }: { src: string; onClose: () => void }) => {

package/src/components/overlay/MobileOverlay.tsx

@@ -1,5 +1,6 @@
 import { Flex, FlexProps, Portal } from '@chakra-ui/react'
 import { useMobileFrame } from '@chem-po/react'
+import React from 'react'
 
 export const MobileOverlay = (props: FlexProps) => {
   const { overlayRef } = useMobileFrame()

package/src/components/text/GradientText/index.tsx

@@ -1,4 +1,5 @@
 import { Box, BoxProps, Text, TextProps } from '@chakra-ui/react'
+import React from 'react'
 import './styles.css'
 
 export const GradientText = ({

package/src/components/text/NumberTicker.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 
 export const NumberTicker = ({ value, duration = 30 }: { value: number; duration?: number }) => {
   const spanRef = useRef<HTMLSpanElement>(null)

package/src/components/theme/colorMode/DarkModeToggle.tsx

@@ -1,6 +1,6 @@
 import { MoonIcon, SunIcon } from '@chakra-ui/icons'
 import { Flex, FlexProps, IconButton, useColorMode, useColorModeValue } from '@chakra-ui/react'
-
+import React from 'react'
 export const DarkModeToggle = () => {
   const { colorMode, toggleColorMode } = useColorMode()
   const bg = useColorModeValue('gray.200', 'whiteAlpha.200')

package/src/components/view/ErrorView.tsx

@@ -1,4 +1,5 @@
 import { Flex, Text, useColorModeValue } from '@chakra-ui/react'
+import React from 'react'
 import { ContentBox } from '../box/ContentBox'
 
 export const ErrorView = ({ message }: { message?: string }) => {

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