@chem-po/react-web 0.0.51 → 0.0.53

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

@@ -1,44 +0,0 @@
-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> {
-  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={index}
-        item={item}
-        refetch={refetch ? () => refetch(item.id) : undefined}
-        colorMode={colorMode}
-      />
-    </Flex>
-  )
-}

package/src/components/list/ListItemView.tsx

@@ -1,53 +0,0 @@
-import { Text, useColorMode, useColorModeValue } from '@chakra-ui/react'
-import { AnyObject, DBItem } from '@chem-po/core'
-import { useDataList, usePaginatedList } from '@chem-po/react'
-import React, { 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

@@ -1,84 +0,0 @@
-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 React, { 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

@@ -1,33 +0,0 @@
-import { Flex, Text } from '@chakra-ui/react'
-import { toPlural } from '@chem-po/core'
-import { useDataList, usePaginatedList } from '@chem-po/react'
-import React, { 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

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

package/src/components/list/index.ts

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

package/src/components/list/types.ts

@@ -1,26 +0,0 @@
-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' | 'flexProps'>

package/src/components/list/utils.ts

@@ -1,63 +0,0 @@
-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>> => {
-  if (!searchData) return [baseQuery]
-  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

@@ -1,12 +0,0 @@
-import {
-  CircularProgressProps,
-  CircularProgress as Orig,
-  useColorModeValue,
-} from '@chakra-ui/react'
-import React from '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

@@ -1,160 +0,0 @@
-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 React, { 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

@@ -1,128 +0,0 @@
-import { BoxProps, Center, IconButton, Image, ImageProps } from '@chakra-ui/react'
-import { useColorModeValue, useMounted } from '@chem-po/react'
-import React, { 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
-  withFullView?: boolean
-  buttonFullView?: boolean
-  imageProps?: Omit<ImageProps, 'onLoad'>
-}
-
-const emptyPng =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII='
-export const LoadingImage = ({
-  src,
-  loadingOverride,
-  alt,
-  onLoad,
-  width,
-  height,
-  withFullView,
-  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 fullViewButtonFilter = useColorModeValue(
-    'none',
-    'brightness(300%) drop-shadow(1px 1px 3px #00000066)',
-  )
-
-  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={!withFullView || buttonFullView ? undefined : () => setViewing(true)}
-        onLoad={handleImageLoad}
-        onLoadStart={() => setImageLoading(true)}
-        top={0}
-        left={0}
-        cursor={!withFullView || 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={fullViewButtonFilter}
-            />
-          }
-          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

@@ -1,78 +0,0 @@
-import { Center, Flex, Switch, Text, useToast } from '@chakra-ui/react'
-import React, { 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>
-  )
-}