@chem-po/react-web 0.0.4 → 0.0.6

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

@@ -0,0 +1,38 @@
+import { Flex } from '@chakra-ui/react'
+import { AnyObject, ColorMode, DBItem } from '@chem-po/core'
+import { DataList } from '@chem-po/react'
+import { ListChildComponentProps } from 'react-window'
+
+export interface ListItemProps<T extends AnyObject = AnyObject> {
+  list: DataList<T>
+  items: Array<DBItem<T>>
+  mobileLayout: boolean
+  onSelect: (item: DBItem<T>) => void
+  colorMode: ColorMode
+  refetch?: (id: string) => Promise<void>
+}
+export const ListRow = <T extends AnyObject>({
+  data,
+  index,
+  style,
+}: ListChildComponentProps<ListItemProps<T>>) => {
+  const { list, items, onSelect, refetch, mobileLayout, colorMode } = data || {}
+  const { ItemPreview: RenderItem, mobile } = list
+
+  const Render = mobileLayout ? (mobile?.ItemPreview ?? RenderItem) : RenderItem
+  const item = items[index]
+  if (!item) return null
+  return (
+    <Flex
+      display="flex"
+      cursor="pointer"
+      aria-label="list-item"
+      onClick={() => {
+        onSelect(items[index])
+      }}
+      style={style}
+      key={index}>
+      {Render({ index, item, refetch: refetch ? () => refetch(item._id) : undefined, colorMode })}
+    </Flex>
+  )
+}

package/src/components/list/ListItemView.tsx

@@ -0,0 +1,53 @@
+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 { DefaultModal } from '../modal'
+
+export const ListItemView = () => {
+  const { selectedItemId, deselectItem, list } = useDataList()
+  const { ItemView, itemName } = list || {}
+  const [contentOffset, setContentOffset] = useState({ x: 0, y: 0 })
+  const {
+    data: { data },
+    // refetchItem,
+  } = usePaginatedList()
+  const item = useMemo(
+    () => data.find(d => d._id === selectedItemId) ?? null,
+    [data, selectedItemId],
+  )
+  const { colorMode } = useColorMode()
+  const errorColor = useColorModeValue('red.600', 'red.300')
+  const [prevItem, setPrevItem] = useState<DBItem<AnyObject> | null>(null)
+  useEffect(() => {
+    if (item) {
+      setPrevItem(item)
+    }
+  }, [item])
+
+  return (
+    <DefaultModal
+      contentProps={{
+        p: 0,
+        transition: 'all 300ms',
+        transform: `translate(${contentOffset.x}px, ${contentOffset.y}px)`,
+      }}
+      scrollBehavior="inside"
+      onClose={deselectItem}
+      isOpen={!!ItemView && !!selectedItemId}>
+      {ItemView && prevItem ? (
+        <ItemView
+          item={prevItem}
+          colorMode={colorMode}
+          clearContentOffset={() => setContentOffset({ x: 0, y: 0 })}
+          updateContentOffset={(x, y) => setContentOffset({ x, y })}
+          // onEdited={onEdited}
+        />
+      ) : (
+        <Text color={errorColor} p={4}>
+          Error displaying {itemName}
+        </Text>
+      )}
+    </DefaultModal>
+  )
+}

package/src/components/list/ListSort.tsx

@@ -0,0 +1,84 @@
+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 { CollapseHorizontal } from '../box/CollapseHorizontal'
+
+const SortButton = ({ preset }: { preset: SortPreset }) => {
+  const { setSort: setSortFromPreset, query } = useDataList()
+  const { sort } = query
+  const { label, key, Render } = preset
+  const active = useMemo<SortDirection | null>(
+    () => (sort?.key === key ? sort.direction : null),
+    [sort, key],
+  )
+  const { colorMode } = useColorMode()
+
+  const color = useMemo(() => {
+    if (active) return 'white'
+    return colorMode === 'light' ? 'gray.500' : 'gray.400'
+  }, [active, colorMode])
+  const icon = useMemo(
+    () => (sort?.direction === 'asc' ? <ArrowUpIcon w={4} h={4} /> : <ArrowDownIcon w={4} h={4} />),
+    [sort],
+  )
+
+  return (
+    <Button
+      size="xs"
+      variant="outline"
+      bg={active ? 'accent.400' : 'transparent'}
+      transition="all 300ms"
+      textShadow={active ? '0 0 2px rgba(0,0,0,0.7)' : 'none'}
+      boxShadow={`0px 0px 1px 1px ${active ? 'transparent' : '#00000033'}`}
+      border="none"
+      // borderColor={active ? 'transparent' : 'blackAlpha.200'}
+      _dark={{
+        // borderColor: active ? 'transparent' : 'whiteAlpha.300',
+        boxShadow: `0px 0px 1px 1px ${active ? 'transparent' : '#ffffff66'}`,
+        color,
+        textShadow: active ? '0 0 2px rgba(0,0,0,0.7)' : 'none',
+      }}
+      aria-label={label}
+      opacity={active ? 1 : 0.8}
+      height={6}
+      pl={active ? 3 : 2}
+      pr={2}
+      _hover={{ opacity: 1 }}
+      gap={0}
+      color={color}
+      onClick={() =>
+        setSortFromPreset({
+          direction: active && sort?.direction === 'asc' ? 'desc' : 'asc',
+          key,
+        })
+      }>
+      {Render ? (
+        <Render active={active} colorMode={colorMode} preset={preset} />
+      ) : (
+        <Text fontWeight={600} fontSize="sm" color={color}>
+          {label}
+        </Text>
+      )}
+      <CollapseHorizontal active={!!active} h="16px" width={20}>
+        {icon}
+      </CollapseHorizontal>
+    </Button>
+  )
+}
+
+export const ListSortView = () => {
+  const {
+    list: { sortPresets },
+  } = useDataList()
+
+  if (!sortPresets) return null
+  return (
+    <HStack spacing={2}>
+      {sortPresets.map(preset => (
+        <SortButton key={preset.label} preset={preset} />
+      ))}
+    </HStack>
+  )
+}

package/src/components/list/NoItems.tsx

@@ -0,0 +1,33 @@
+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 { Loading } from '../loading'
+
+export const NoItemsRow = () => {
+  const {
+    list,
+    search: { debounced, search },
+  } = useDataList()
+  const {
+    data: { isLoading },
+  } = usePaginatedList()
+  const showLoading = useMemo(
+    () => isLoading || debounced !== search,
+    [isLoading, debounced, search],
+  )
+  const { itemName, pluralItemName, noItemsMessage, searchRequired } = list
+  return (
+    <Flex justify="center" align="flex-start" w="100%" h="100%">
+      {showLoading ? (
+        <Loading text={`Loading ${pluralItemName ?? toPlural(itemName)}`} />
+      ) : (
+        <Text textAlign="center" flex={1} p={3} fontStyle="italic" opacity={0.7}>
+          {!debounced && searchRequired
+            ? `Search ${pluralItemName ?? toPlural(itemName)}`
+            : (noItemsMessage ?? `No ${pluralItemName ?? toPlural(itemName)}`)}
+        </Text>
+      )}
+    </Flex>
+  )
+}

package/src/components/list/constants.ts

@@ -0,0 +1 @@
+export const FETCH_LIMIT = 15

package/src/components/list/index.ts

@@ -0,0 +1,4 @@
+export * from './DataList'
+export * from './ListContainer'
+export * from './ListContent'
+export * from './types'

package/src/components/list/types.ts

@@ -0,0 +1,29 @@
+import { BoxProps, FlexProps } from '@chakra-ui/react'
+import { AnyObject } from '@chem-po/core'
+import { ListProviderProps } from '@chem-po/react'
+import { ReactNode } from 'react'
+
+export interface DataListHeaderProps {
+  onResize: (size: { height: number; width: number }) => void
+  refetch?: () => void
+  boxProps?: BoxProps
+}
+
+export interface DataListFooterProps {
+  flexProps?: FlexProps
+  noFooter?: boolean
+  onResize: (size: { height: number; width: number }) => void
+}
+
+export type ListViewProps<T extends AnyObject> = ListProviderProps<T> & {
+  flexProps?: FlexProps
+  footerProps?: FlexProps
+  noFooter?: boolean
+  headerProps?: BoxProps
+  modals?: ReactNode
+}
+
+export type ListContentProps<T extends AnyObject> = Omit<
+  ListViewProps<T>,
+  'list' | 'basePath' | 'flexProps'
+>

package/src/components/list/utils.ts

@@ -0,0 +1,62 @@
+import {
+  AnyObject,
+  arrayOperators,
+  BaseQuery,
+  QueryFilter,
+  SearchPath,
+  stringTransforms,
+} from '@chem-po/core'
+import { FilterPreset } from '@chem-po/react'
+import { Query, query, where } from 'firebase/firestore'
+
+export const getIsDynamicSize = (itemHeight: number | ((item: any) => number)) =>
+  typeof itemHeight === 'function'
+
+export const getTextSearchQuery = <T extends AnyObject>(
+  baseQuery: Query<T>,
+  searchQuery: string,
+  searchPath: SearchPath<T>,
+) => {
+  let trimmed = searchQuery.trim()
+  if (!trimmed) return baseQuery
+  if (searchPath.transform) trimmed = stringTransforms[searchPath.transform](trimmed)
+  return query(
+    baseQuery,
+    where(searchPath.prop, '>=', trimmed),
+    where(searchPath.prop, '<=', `${trimmed}\uf8ff`),
+  )
+}
+export const getSearchQueries = <T extends AnyObject>(
+  baseQuery: Query<T>,
+  searchData: BaseQuery<T>['search'],
+): Array<Query<T>> => {
+  const { paths, query: search } = searchData
+  if (!paths?.length || !search) return [baseQuery]
+  return paths.map(path => getTextSearchQuery(baseQuery, search, path))
+}
+const nativeFilterMatchesPreset = <T extends AnyObject>(
+  nativeFilter: QueryFilter<T>,
+  presetFilter: QueryFilter<T>,
+) => {
+  if (nativeFilter.key !== presetFilter.key) return false
+  if (nativeFilter.operator !== presetFilter.operator) return false
+  if (arrayOperators.includes(nativeFilter.operator)) {
+    const nativeValues = Array.isArray(nativeFilter.value)
+      ? nativeFilter.value
+      : [nativeFilter.value]
+    const presetValues = Array.isArray(presetFilter.value)
+      ? presetFilter.value
+      : [presetFilter.value]
+    if (presetValues.every(value => !nativeValues.includes(value))) return false
+    return true
+  }
+  return nativeFilter.value === presetFilter.value
+}
+
+export const filterMatchesPreset = <T extends AnyObject>(
+  filter: QueryFilter<T>,
+  { nativeFilter }: FilterPreset<T>,
+) => {
+  const nativeFilters = Array.isArray(nativeFilter) ? nativeFilter : [nativeFilter]
+  return nativeFilters.every(nativeFilter => nativeFilterMatchesPreset(nativeFilter, filter))
+}

package/src/components/loading/CircularProgress.tsx

@@ -0,0 +1,11 @@
+import {
+  CircularProgressProps,
+  CircularProgress as Orig,
+  useColorModeValue,
+} from '@chakra-ui/react'
+
+export const CircularProgress = (props: CircularProgressProps) => {
+  const color = useColorModeValue('gray.400', 'gray.400')
+  const bg = useColorModeValue('gray.300', 'gray.600')
+  return <Orig isIndeterminate trackColor={bg} color={color} {...props} />
+}

package/src/components/loading/Loading.tsx

@@ -0,0 +1,160 @@
+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 { ContentBox } from '../box/ContentBox'
+// import loadingAnimation from './circles_loading.json'
+// import loadingAnimationLight from './circles_loading_light.json'
+
+export const LottieLoadingLogo = ({
+  size = 30,
+  isLoading,
+  speed = 2,
+  inFeed,
+  asset,
+}: {
+  size?: number | string
+  color?: string
+  isLoading: boolean
+  asset: ThemedAsset
+  inFeed?: boolean
+  speed?: number
+}) => {
+  const _animationData = useColorModeValue(asset.default, asset.dark ?? asset.default)
+  const animationData = useMemo(
+    () => (inFeed ? (asset.dark ?? asset.default) : _animationData),
+    [_animationData, asset, inFeed],
+  )
+  const options = useMemo<LottieOptions>(
+    () => ({
+      // animationData: getLoaderJson(propColor || defaultColor),
+      animationData,
+      loop: true,
+    }),
+    [animationData],
+  )
+  const style = useMemo(
+    () => ({
+      width: size,
+      height: size,
+      opacity: isLoading ? 0.85 : 0,
+      transition: 'opacity 300ms ease-in-out',
+    }),
+    [size, isLoading],
+  )
+  const { View, pause, play, setSpeed } = useLottie(options, style)
+  useEffect(() => {
+    setSpeed(speed)
+  }, [setSpeed, speed])
+  useEffect(() => {
+    if (isLoading) {
+      play()
+    } else pause()
+  }, [isLoading, play, pause])
+
+  return <>{View}</>
+}
+
+const SVGLoadingLogo = ({
+  size = 30,
+  isLoading,
+  asset,
+  inFeed,
+}: {
+  size?: number | string
+  isLoading: boolean
+  asset: ThemedAsset
+  inFeed?: boolean
+}) => {
+  const _svg = useColorModeValue(asset.default, asset.dark ?? asset.default)
+  const svg = useMemo(() => (inFeed ? (asset.dark ?? asset.default) : _svg), [_svg, asset, inFeed])
+  const style = useMemo(
+    () => ({
+      width: size,
+      height: size,
+      opacity: isLoading ? 0.85 : 0,
+      transition: 'opacity 300ms ease-in-out',
+    }),
+    [size, isLoading],
+  )
+  return <img src={svg} style={style} alt="loading" />
+}
+
+const LoadingBody = ({ isLoading, size }: { isLoading: boolean; size?: number | string }) => {
+  const { loading } = useAppAssets()
+  if (loading.lottieJson)
+    return <LottieLoadingLogo isLoading={isLoading} size={size} asset={loading.lottieJson} />
+  if (loading.svg) return <SVGLoadingLogo isLoading={isLoading} size={size} asset={loading.svg} />
+  return null
+}
+
+export const LoadingLogo = ({
+  isLoading,
+  size,
+  inFeed,
+}: {
+  isLoading: boolean
+  size?: number | string
+  inFeed?: boolean
+}) => {
+  const { loading } = useAppAssets()
+  if (loading.lottieJson)
+    return (
+      <LottieLoadingLogo
+        inFeed={inFeed}
+        isLoading={isLoading}
+        size={size}
+        asset={loading.lottieJson}
+      />
+    )
+  if (loading.svg)
+    return <SVGLoadingLogo inFeed={inFeed} isLoading={isLoading} size={size} asset={loading.svg} />
+  return <Text color="red">ERROR: No loading animation found</Text>
+}
+
+export const Loading = ({
+  text = 'Loading...',
+  inBox,
+  stackProps,
+}: {
+  text?: string
+  inBox?: boolean
+  stackProps?: StackProps
+}) => {
+  const body = (
+    <HStack p={2} {...stackProps}>
+      <LoadingBody isLoading />
+      <Text opacity={0.8} fontSize="sm">
+        {text}
+      </Text>
+    </HStack>
+  )
+  return inBox ? <ContentBox>{body}</ContentBox> : body
+}
+
+export const LoadingOverlay = ({
+  isLoading,
+  text,
+  inFeed,
+  ...props
+}: { isLoading: boolean; text?: string; inFeed?: boolean } & CenterProps) => {
+  const bg = useColorModeValue('#ffffffaa', '#00000088')
+  return (
+    <Center
+      pos={'absolute'}
+      top={0}
+      left={0}
+      right={0}
+      bottom={0}
+      bg={bg}
+      pointerEvents={isLoading ? 'auto' : 'none'}
+      opacity={isLoading ? 1 : 0}
+      {...props}>
+      {!text ? (
+        <LoadingLogo inFeed={inFeed} size={100} isLoading={isLoading} />
+      ) : (
+        <Loading text={text} />
+      )}
+    </Center>
+  )
+}

package/src/components/loading/LoadingImage.tsx

@@ -0,0 +1,123 @@
+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 { ImageViewOverlay } from '../overlay/ImageViewOverlay'
+import { LoadingLogo } from './Loading'
+
+export interface LoadingImageProps {
+  src?: string | null
+  loadingOverride?: boolean
+  onLoad?: ImageProps['onLoad']
+  alt?: string
+  noFullView?: boolean
+  buttonFullView?: boolean
+  imageProps?: Omit<ImageProps, 'onLoad'>
+}
+
+const emptyPng =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII='
+export const LoadingImage = ({
+  src,
+  loadingOverride,
+  alt,
+  onLoad,
+  width,
+  height,
+  noFullView,
+  buttonFullView,
+  imageProps,
+  ...boxProps
+}: LoadingImageProps & Omit<BoxProps, 'onLoad'>) => {
+  const [imageLoading, setImageLoading] = useState(!!src)
+  const imageRef = useRef<HTMLImageElement>(null)
+
+  const [viewing, setViewing] = useState(false)
+  const mounted = useMounted(100)
+  useEffect(() => {
+    if (imageRef.current?.complete) {
+      setImageLoading(true)
+    }
+  }, [imageRef])
+
+  const handleImageLoad = useCallback(
+    (e: SyntheticEvent<HTMLImageElement>) => {
+      setImageLoading(false)
+      if (onLoad) onLoad(e)
+    },
+    [onLoad],
+  )
+
+  const [prevSrc, setPrevSrc] = useState(src)
+  useEffect(() => {
+    if (src) setPrevSrc(src)
+  }, [src, prevSrc])
+
+  const loading = imageLoading || !!loadingOverride
+  return (
+    <Center
+      opacity={mounted ? 1 : 0}
+      transition="opacity 333ms"
+      w={width ?? '100%'}
+      h={height ?? '100%'}
+      overflow="hidden"
+      position="relative"
+      {...boxProps}>
+      <Image
+        src={src ?? emptyPng}
+        alt={alt}
+        onClick={noFullView || buttonFullView ? undefined : () => setViewing(true)}
+        onLoad={handleImageLoad}
+        onLoadStart={() => setImageLoading(true)}
+        top={0}
+        left={0}
+        cursor={noFullView || buttonFullView ? 'default' : 'pointer'}
+        draggable={false}
+        opacity={src && !loading ? 1 : 0}
+        transition="opacity 300ms ease-in-out"
+        w="100%"
+        h="100%"
+        objectFit={src ? 'cover' : 'contain'}
+        zIndex={0}
+        {...imageProps}
+      />
+      {buttonFullView ? (
+        <IconButton
+          pos="absolute"
+          top={2}
+          right={2}
+          zIndex={1}
+          w={7}
+          minW={0}
+          borderRadius={10}
+          h={7}
+          size="sm"
+          aria-label="View Image"
+          icon={
+            <Image
+              height="20px"
+              src="/icons/open_in_full.svg"
+              opacity={0.8}
+              filter="brightness(300%) drop-shadow(1px 1px 3px #00000066)"
+            />
+          }
+          onClick={() => setViewing(true)}
+        />
+      ) : null}
+      <Center
+        pos="absolute"
+        top={0}
+        left={0}
+        zIndex={2}
+        pointerEvents="none"
+        transition="opacity 0.5s ease-in-out"
+        opacity={loading || !src ? 1 : 0}
+        w="100%"
+        h="100%">
+        <LoadingLogo isLoading={loading} size="60%" />
+      </Center>
+      {viewing ? (
+        <ImageViewOverlay src={src ?? emptyPng} onClose={() => setViewing(false)} />
+      ) : null}
+    </Center>
+  )
+}

package/src/components/loading/LoadingSwitch.tsx

@@ -0,0 +1,78 @@
+import { Center, Flex, Switch, Text, useToast } from '@chakra-ui/react'
+import { useCallback, useState } from 'react'
+import { Loading } from './Loading'
+
+export const LoadingSwitch = ({
+  value,
+  label,
+  onChange,
+}: {
+  value: boolean
+  label: string
+  onChange: (updated: boolean) => Promise<void>
+}) => {
+  const toast = useToast()
+  const [isLoading, setIsLoading] = useState(false)
+
+  const reportComplete = useCallback((fetchedOn: number) => {
+    const buffer = Math.max(0, 1000 - (Date.now() - fetchedOn))
+    setTimeout(() => {
+      setIsLoading(false)
+    }, buffer)
+  }, [])
+
+  return (
+    <Flex
+      py={1}
+      pr={2}
+      pl={3}
+      bg="gray.700"
+      borderRadius={12}
+      boxShadow="0 0 4px black"
+      pos="relative"
+      align="center">
+      <Flex
+        opacity={isLoading ? 0 : 1}
+        transition={`opacity 300ms ${isLoading ? 'ease-out' : 'ease-in'}`}
+        pointerEvents={isLoading ? 'none' : 'auto'}
+        align="center"
+        gap={2}>
+        <Text style={{ fontSize: '1.2rem', height: '24px' }}>{label}</Text>
+        <Switch
+          size="md"
+          isChecked={value}
+          onChange={e => {
+            setIsLoading(true)
+            const fetchedOn = Date.now()
+            onChange(e.target.checked).catch(err => {
+              console.error(err)
+              toast({
+                title: 'Error',
+                description: err?.message ?? 'Error occurred',
+                status: 'error',
+                duration: 5000,
+                isClosable: true,
+              })
+            })
+
+            reportComplete(fetchedOn)
+          }}
+        />
+      </Flex>
+      <Center
+        opacity={isLoading ? 1 : 0}
+        transition={`opacity 300ms ${!isLoading ? 'ease-out' : 'ease-in'}`}
+        pointerEvents={isLoading ? 'auto' : 'none'}
+        pos="absolute"
+        top="-10%"
+        left="-10%"
+        w="120%"
+        borderRadius={8}
+        p={1}
+        gap={2}
+        h="120%">
+        <Loading />
+      </Center>
+    </Flex>
+  )
+}

package/src/components/loading/index.ts

@@ -0,0 +1,4 @@
+export * from './CircularProgress'
+export * from './Loading'
+export * from './LoadingImage'
+export * from './LoadingSwitch'