@chem-po/react-web 0.0.51 → 0.0.53

package/src/components/list/ListFooter.tsx

@@ -1,458 +0,0 @@
-import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
-import {
-  Box,
-  Button,
-  Collapse,
-  Flex,
-  IconButton,
-  Popover,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
-  Progress,
-  Text,
-  Tooltip,
-  useColorModeValue,
-} from '@chakra-ui/react'
-import { toPlural } from '@chem-po/core'
-import { useDataList, usePaginatedList } from '@chem-po/react'
-import useResizeObserver from '@react-hook/resize-observer'
-import React, { useCallback, useMemo, useRef } from 'react'
-import { useBorderColor } from '../../hooks'
-import { ExpandOnMount } from '../box'
-import { DataListFooterProps } from './types'
-
-const NextButton = ({
-  goNext,
-  canGoNext,
-  mobileLayout,
-}: {
-  goNext?: () => void
-  canGoNext: boolean
-  mobileLayout?: boolean
-}) => (
-  <Button
-    opacity={canGoNext ? 1 : 0.6}
-    pointerEvents={canGoNext ? 'auto' : 'none'}
-    borderRadius="full"
-    onClick={goNext}
-    aria-label="next"
-    variant="ghost"
-    size={mobileLayout ? 'xs' : 'sm'}
-    pl={3}
-    pr={1}
-    gap={1}>
-    <Text>Next</Text>
-    <ChevronRightIcon w={5} h={5} />
-  </Button>
-)
-
-const PrevButton = ({
-  goPrev,
-  canGoPrev,
-  mobileLayout,
-}: {
-  goPrev?: () => void
-  canGoPrev: boolean
-  mobileLayout?: boolean
-}) => (
-  <Button
-    opacity={canGoPrev ? 1 : 0.5}
-    pointerEvents={canGoPrev ? 'auto' : 'none'}
-    onClick={goPrev}
-    borderRadius="full"
-    aria-label="back"
-    variant="ghost"
-    pr={3}
-    pl={1}
-    gap={1}
-    size={mobileLayout ? 'xs' : 'sm'}>
-    <ChevronLeftIcon w={5} h={5} />
-    <Text>Back</Text>
-  </Button>
-)
-
-const FooterLoadingAndError = ({
-  progressBg,
-  borderColor,
-}: {
-  progressBg: string
-  borderColor: string
-}) => {
-  const {
-    data: { isLoading, error },
-  } = usePaginatedList()
-  return (
-    <Box position="absolute" bottom="100%" w="100%" left={0}>
-      <Collapse style={{ width: '100%' }} in={!!error} animateOpacity>
-        <Box borderTopRadius={6} bg="red.600" maxW="100%" p={1}>
-          <Tooltip placement="top" hasArrow label={error?.message ?? ''} aria-label="error">
-            <Text
-              textShadow="1px 1px 3px #00000077"
-              _dark={{ textShadow: 'none' }}
-              px={1}
-              fontWeight={600}
-              isTruncated
-              maxW="100%"
-              fontSize="sm"
-              color="white">
-              {error?.message}
-            </Text>
-          </Tooltip>
-        </Box>
-      </Collapse>
-      <ExpandOnMount in={isLoading} animateOpacity>
-        <Flex
-          bg={progressBg}
-          borderTop="1px solid"
-          borderBottom="1px solid"
-          borderColor={borderColor}
-          w="100%">
-          <Progress borderRadius={0} w="100%" height="8px" isIndeterminate={isLoading} />
-        </Flex>
-      </ExpandOnMount>
-    </Box>
-  )
-}
-
-interface PageIndicator {
-  index: number
-  isActive: boolean
-}
-interface PageIndicatorGroup {
-  indicators: PageIndicator[]
-  collapsed: boolean
-}
-
-/* 
-page nav groups: 
-0 - first group - pages 1:3 if not in current group
-1 - second group (collapsed) - pages 4:i-1 if not in current group, where i is the selected page
-2 - current group - pages i:i+2
-3 - fourth group (collapsed) - pages i+3:n-3 if not in current group, where n is the last page
-4 - last group - pages n-2:n
-*/
-const getGroupIndex = (index: number, selected: number, numPages: number) => {
-  if (Math.abs(index - selected) <= 1) return 2
-  if (index < 3) return selected === 0 ? 2 : 0
-  if (index > numPages - 4) return selected > numPages - 3 ? 2 : 4
-  return index < selected ? 1 : 3
-}
-
-const NAV_BUTTON_SIZE = 28
-const MOBILE_NAV_BUTTON_SIZE = 24
-
-const PageNavButton = ({
-  index,
-  isActive,
-  onClick,
-  borderColor,
-  isLoading,
-  mobileLayout,
-}: {
-  index: number
-  isActive: boolean
-  onClick: () => void
-  borderColor: string
-  isLoading: boolean
-  mobileLayout: boolean
-}) => {
-  return (
-    <Button
-      key={index}
-      onClick={onClick}
-      variant="unstyled"
-      display="flex"
-      border="1px solid"
-      borderColor={isActive ? 'transparent' : borderColor}
-      justifyContent="center"
-      alignItems="center"
-      width={`${mobileLayout ? MOBILE_NAV_BUTTON_SIZE : NAV_BUTTON_SIZE}px`}
-      height={`${mobileLayout ? MOBILE_NAV_BUTTON_SIZE : NAV_BUTTON_SIZE}px`}
-      fontFamily="fonts.heading"
-      lineHeight={1}
-      fontWeight={600}
-      minW="0"
-      bg={isActive ? 'accent.400' : 'transparent'}
-      _hover={{
-        bg: isActive ? 'accent.500' : 'whiteAlpha.500',
-      }}
-      color={isActive ? 'white' : borderColor}
-      textShadow={isActive ? '1px 1px 3px #00000088' : 'none'}
-      size="sm"
-      disabled={isLoading}
-      aria-label={`Go to page ${index + 1}`}>
-      {index + 1}
-    </Button>
-  )
-}
-
-const PageNavGroup = ({
-  group: { indicators, collapsed },
-  mobileLayout,
-}: {
-  group: PageIndicatorGroup
-  mobileLayout: boolean
-}) => {
-  const {
-    data: { isLoading },
-    goToPage,
-  } = usePaginatedList()
-  const borderColor = useBorderColor()
-
-  if (collapsed) {
-    return (
-      <Popover trigger="hover" gutter={1} variant="fixed">
-        {({ onClose }) => (
-          <>
-            <PopoverTrigger>
-              <IconButton
-                variant="unstyled"
-                width={`${mobileLayout ? MOBILE_NAV_BUTTON_SIZE : NAV_BUTTON_SIZE}px`}
-                height={`${mobileLayout ? MOBILE_NAV_BUTTON_SIZE : NAV_BUTTON_SIZE}px`}
-                minW="0"
-                opacity={0.7}
-                _hover={{
-                  opacity: 1,
-                }}
-                aria-label="more pages"
-                icon={
-                  <Text fontSize="md" position="relative" bottom="2px">
-                    ...
-                  </Text>
-                }
-              />
-            </PopoverTrigger>
-            <PopoverContent
-              bg="background.200"
-              w="auto"
-              border="1px solid"
-              borderColor={borderColor}
-              boxShadow="none">
-              <PopoverBody w="auto" maxW="166px" p={0.5}>
-                <Flex align="center" justify="center" flexFlow="row wrap">
-                  {indicators.map(({ index, isActive }) => (
-                    <Box key={`ind-${index}`} m={0.5}>
-                      <PageNavButton
-                        mobileLayout={mobileLayout}
-                        index={index}
-                        isActive={isActive}
-                        onClick={() => {
-                          goToPage(index)
-                          onClose()
-                        }}
-                        borderColor={borderColor}
-                        isLoading={isLoading}
-                      />
-                    </Box>
-                  ))}
-                </Flex>
-              </PopoverBody>
-            </PopoverContent>
-          </>
-        )}
-      </Popover>
-    )
-  }
-  return (
-    <>
-      {indicators.map(({ index, isActive }) => (
-        <PageNavButton
-          mobileLayout={mobileLayout}
-          key={index}
-          index={index}
-          isActive={isActive}
-          onClick={() => goToPage(index)}
-          borderColor={borderColor}
-          isLoading={isLoading}
-        />
-      ))}
-    </>
-  )
-}
-
-const PageNav = () => {
-  const { pageIndex, numPages } = usePaginatedList()
-  const { mobileLayout } = useDataList()
-  const groups = useMemo<PageIndicatorGroup[]>(() => {
-    const nPages = numPages ?? 0
-    if (nPages <= 9)
-      return [
-        {
-          indicators: Array.from({ length: nPages }, (_, i) => ({
-            index: i,
-            isActive: i === pageIndex,
-          })),
-          collapsed: false,
-        },
-      ]
-    const g: PageIndicatorGroup[] = Array.from({ length: 5 }, (_, i) => ({
-      indicators: [],
-      collapsed: i % 2 === 1,
-    }))
-
-    for (let i = 0; i < nPages; i += 1) {
-      const groupIndex = getGroupIndex(i, pageIndex, nPages)
-      if (!g[groupIndex]) {
-        g[groupIndex] = { indicators: [], collapsed: groupIndex !== 2 }
-      }
-      g[groupIndex].indicators.push({ index: i, isActive: i === pageIndex })
-    }
-    return g
-      .filter(group => group.indicators.length)
-      .map(g => ({ ...g, collapsed: g.collapsed && g.indicators.length > 1 }))
-  }, [numPages, pageIndex])
-  return (
-    <Flex gap={1} align="center">
-      {groups.map((group, i) => (
-        <PageNavGroup mobileLayout={mobileLayout} key={`group-${i}`} group={group} />
-      ))}
-    </Flex>
-  )
-}
-
-const FOOTER_TEXT_WIDTH = 120
-export const ListFooter = ({ onResize, flexProps, noFooter }: DataListFooterProps) => {
-  const borderColor = useColorModeValue('#cdcdcd', '#2d3748')
-
-  const {
-    list,
-    mobileLayout,
-    infiniteScroll,
-    search: { search, debounced },
-  } = useDataList()
-  const {
-    data: { data, isLoading },
-    totalCount,
-    pageIndex,
-    limit,
-    numFetched,
-    goNext,
-    goPrev,
-    hasMoreData,
-  } = usePaginatedList()
-  const { itemName, pluralItemName, searchRequired } = list
-
-  const { itemsText, pageText } = useMemo(() => {
-    if (isLoading && !infiniteScroll)
-      return { itemsText: mobileLayout ? 'Loading...' : '', pageText: '' }
-    if (totalCount === null) return { itemsText: 'Loading...', pageText: '' }
-    if (totalCount === 0 && !isLoading && search === debounced) {
-      return {
-        itemsText:
-          !search && searchRequired
-            ? `Search ${pluralItemName ?? toPlural(itemName)}`
-            : `No ${pluralItemName ?? toPlural(itemName)} found`,
-        pageText: '',
-      }
-    }
-    const firstItemIndex = infiniteScroll ? 1 : (pageIndex || 0) * limit + 1
-    // return `Displaying ${pluralItemName || toPlural(itemName)} ${firstItemIndex} - ${
-    //   infiniteScroll ? numFetched : pageIndex * limit + data.length
-    // } of ${totalCount}`
-    return {
-      itemsText: `${firstItemIndex} - ${
-        infiniteScroll ? numFetched : pageIndex * limit + data.length
-      } of ${totalCount}`,
-      pageText: `Page ${pageIndex + 1} of ${limit ? Math.ceil((totalCount ?? 0) / limit) : 0}`,
-    }
-  }, [
-    totalCount,
-    isLoading,
-    itemName,
-    pluralItemName,
-    limit,
-    pageIndex,
-    search,
-    searchRequired,
-    mobileLayout,
-    debounced,
-    data,
-    infiniteScroll,
-    numFetched,
-  ])
-  const hasPrev = useMemo(() => !infiniteScroll && goPrev, [infiniteScroll, goPrev])
-  const hasNext = useMemo(() => !infiniteScroll && goNext, [infiniteScroll, goNext])
-  const progressBg = useColorModeValue('#efefef', '#212121')
-
-  const ref = useRef<HTMLDivElement>(null)
-  const handleResize = useCallback(
-    (e: ResizeObserverEntry) => {
-      const height = e.borderBoxSize[0].blockSize
-      const width = e.borderBoxSize[0].inlineSize
-      onResize({ height, width })
-    },
-    [onResize],
-  )
-  useResizeObserver(ref, handleResize)
-
-  return (
-    <Flex
-      ref={ref}
-      py={noFooter ? 0 : 2}
-      px={noFooter ? 0 : 3}
-      borderTop={`1px solid ${borderColor}`}
-      position="relative"
-      flexFlow={mobileLayout ? 'column' : 'row'}
-      gap={mobileLayout ? 1 : 0}
-      w="100%"
-      {...flexProps}>
-      {noFooter || (mobileLayout && infiniteScroll) ? null : (
-        <Flex
-          align="center"
-          justify={mobileLayout ? 'center' : 'space-between'}
-          position="relative"
-          w="100%">
-          {hasPrev && !mobileLayout ? (
-            <PrevButton goPrev={goPrev} canGoPrev={!isLoading && !!pageIndex} />
-          ) : null}
-          <Flex gap={1} align="center">
-            {infiniteScroll ? null : (
-              <>
-                {!mobileLayout ? (
-                  <Text
-                    fontFamily="fonts.heading"
-                    whiteSpace="nowrap"
-                    textAlign="center"
-                    w={`${FOOTER_TEXT_WIDTH}px`}
-                    fontSize="sm">
-                    {pageText}
-                  </Text>
-                ) : null}
-                <PageNav />
-              </>
-            )}
-            {!mobileLayout ? (
-              <Text
-                fontFamily="fonts.heading"
-                textAlign="center"
-                w={mobileLayout || infiniteScroll ? 'auto' : `${FOOTER_TEXT_WIDTH}px`}
-                whiteSpace="nowrap"
-                fontSize="sm">
-                {itemsText}
-              </Text>
-            ) : null}
-          </Flex>
-          {hasNext && !mobileLayout ? (
-            <NextButton goNext={goNext} canGoNext={!isLoading && hasMoreData} />
-          ) : null}
-        </Flex>
-      )}
-      {mobileLayout && !noFooter ? (
-        <Flex gap={2} w="100%" justify="space-between" align="center">
-          {hasPrev ? <PrevButton mobileLayout goPrev={goPrev} canGoPrev={!!pageIndex} /> : null}
-          <Text
-            fontFamily="fonts.heading"
-            textAlign="center"
-            w={mobileLayout || infiniteScroll ? 'auto' : `${FOOTER_TEXT_WIDTH}px`}
-            whiteSpace="nowrap"
-            fontSize="sm">
-            {itemsText}
-          </Text>
-          {hasNext ? <NextButton mobileLayout goNext={goNext} canGoNext={hasMoreData} /> : null}
-        </Flex>
-      ) : null}
-      <FooterLoadingAndError progressBg={progressBg} borderColor={borderColor} />
-    </Flex>
-  )
-}

package/src/components/list/ListHeader.tsx

@@ -1,180 +0,0 @@
-import { AddIcon, RepeatIcon, SearchIcon } from '@chakra-ui/icons'
-import {
-  Box,
-  Flex,
-  IconButton,
-  Image,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  Tooltip,
-  useColorModeValue,
-} from '@chakra-ui/react'
-import { getHasAccess, toPlural } from '@chem-po/core'
-import { useAuth, useDataList } from '@chem-po/react'
-import useResizeObserver from '@react-hook/resize-observer'
-import React, { useCallback, useMemo, useRef } from 'react'
-import { useBorderColor } from '../../hooks/ui/useBorderColor'
-import { Toggle, ToggleOption } from '../button/Toggle'
-import { PresetFilters } from './ListFilters'
-import { ListSortView } from './ListSort'
-import { DataListHeaderProps } from './types'
-
-const ListSearch = () => {
-  const {
-    list,
-    search: { search, update },
-  } = useDataList()
-  const { searchIcon, itemName, pluralItemName } = list
-  const iconFilter = useColorModeValue('invert(0)', 'invert(1)')
-
-  return (
-    <Flex p={1} flex={1} minW="0">
-      <InputGroup>
-        <InputLeftElement pointerEvents="none">
-          {searchIcon ? (
-            <Image filter={iconFilter} src={searchIcon} w="24px" />
-          ) : (
-            <SearchIcon w="24px" opacity={0.5} />
-          )}
-        </InputLeftElement>
-        <Input
-          bg="whiteAlpha.700"
-          pl={9}
-          borderRadius={6}
-          _focus={{ boxShadow: 'none', outline: 'none' }}
-          border="none"
-          _dark={{
-            bg: 'blackAlpha.400',
-            color: '#cdcdcd',
-            _placeholder: {
-              color: '#ababab',
-            },
-            border: 'none',
-          }}
-          value={search}
-          placeholder={`Search for ${pluralItemName ?? toPlural(itemName)}`}
-          onChange={e => update(e.target.value)}
-        />
-      </InputGroup>
-    </Flex>
-  )
-}
-
-const HeaderButtons = ({ refetch }: { refetch?: () => void }) => {
-  const { list, setNewItemOpen } = useDataList()
-  const auth = useAuth()
-  const { itemName, field, access } = list
-
-  const canCreate = useMemo(() => getHasAccess(auth, access?.create, null), [access, auth])
-  return (
-    <Flex gap={2} ml="auto" align="center">
-      {refetch ? (
-        <Tooltip placement="left" hasArrow label="Refresh" aria-label="Refresh">
-          <IconButton size="xs" icon={<RepeatIcon />} aria-label="Refresh" onClick={refetch} />
-        </Tooltip>
-      ) : null}
-      {field && canCreate ? (
-        <Tooltip
-          placement="left"
-          hasArrow
-          label={`Create new ${itemName}`}
-          aria-label={`Create new ${itemName}`}>
-          <IconButton
-            size="xs"
-            icon={<AddIcon />}
-            aria-label={`Create new ${itemName}`}
-            onClick={() => setNewItemOpen(true)}
-          />
-        </Tooltip>
-      ) : null}
-    </Flex>
-  )
-}
-
-const gridToggleOptions: ToggleOption<'grid' | 'list'>[] = [
-  {
-    id: 'grid',
-    label: 'Grid View',
-    Render: selected => <Image w={5} opacity={selected ? 1 : 0.7} src="/icons/grid_view.svg" />,
-  },
-  {
-    id: 'list',
-    label: 'List View',
-    Render: selected => <Image w={6} opacity={selected ? 1 : 0.7} src="/icons/list.svg" />,
-  },
-]
-
-const GridViewToggle = () => {
-  const { toggleGridLayout, gridLayout } = useDataList()
-  if (!toggleGridLayout) return null
-  return (
-    <Toggle
-      onChange={toggleGridLayout}
-      options={gridToggleOptions}
-      value={gridLayout ? 'grid' : 'list'}
-    />
-  )
-}
-
-export const DataListHeader = ({ onResize, refetch, boxProps }: DataListHeaderProps) => {
-  const { list, mobileLayout, toggleGridLayout } = useDataList()
-  const { searchPath, sortPresets, filterPresets, Header } = list
-
-  const borderColor = useBorderColor()
-  const ref = useRef<HTMLDivElement>(null)
-  const handleResize = useCallback(
-    (entry: ResizeObserverEntry) => {
-      onResize({ height: entry.contentRect.height, width: entry.contentRect.width })
-    },
-    [onResize],
-  )
-  const hasSearch = useMemo(() => !!Object.keys(searchPath ?? {}).length, [searchPath])
-
-  useResizeObserver(ref, handleResize)
-
-  return (
-    <Box
-      ref={ref}
-      bg="background.200"
-      borderBottom={`1px solid ${borderColor}`}
-      w="100%"
-      {...boxProps}>
-      <Flex px={2} align="center" w="100%">
-        {sortPresets?.length || filterPresets?.length || hasSearch ? (
-          <Flex w="100%" flexFlow={mobileLayout ? 'column' : 'row'}>
-            {mobileLayout && !Header ? null : (
-              <Flex flex={1} px={2} py={mobileLayout ? 0 : 1} gap={1} align="center">
-                {mobileLayout ? null : (
-                  <Flex flex={1} minW="0" align="center" gap={2}>
-                    {toggleGridLayout ? <GridViewToggle /> : null}
-                    <PresetFilters />
-                    <ListSortView />
-                    {hasSearch ? <ListSearch /> : null}
-                  </Flex>
-                )}
-                <Flex align="center" minW="0" gap={3} ml="auto">
-                  {Header ? (
-                    <Box minW="0" flex={1}>
-                      <Header />
-                    </Box>
-                  ) : null}
-                  {mobileLayout ? null : <HeaderButtons refetch={refetch} />}
-                </Flex>
-              </Flex>
-            )}
-            {hasSearch && mobileLayout ? <ListSearch /> : null}
-            {mobileLayout && (sortPresets?.length || filterPresets?.length) ? (
-              <Flex pl={1} py={1} gap={1.5} align="center" w="100%">
-                {toggleGridLayout ? <GridViewToggle /> : null}
-                <PresetFilters />
-                <ListSortView />
-                <HeaderButtons refetch={refetch} />
-              </Flex>
-            ) : null}
-          </Flex>
-        ) : null}
-      </Flex>
-    </Box>
-  )
-}

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

@@ -1,49 +0,0 @@
-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> {
-  list: DataList<T>
-  grid: ListGridOptions<T>
-  items: Array<DBItem<T>>
-  colorMode: ColorMode
-  numCols: number
-  mobileLayout: boolean
-  onSelect: (item: DBItem<T>) => void
-  refetch?: (id: string) => Promise<void>
-}
-export const ListCell = <T extends AnyObject>({
-  data,
-  rowIndex,
-  columnIndex,
-  style,
-}: GridChildComponentProps<GridItemProps<T>>) => {
-  const { items, onSelect, refetch, grid, numCols, colorMode } = data || {}
-  const { ItemPreview: Render } = grid
-
-  const itemIdx = rowIndex * numCols + columnIndex
-  const item = items[itemIdx]
-  if (!item) return null
-  return (
-    <Flex
-      display="flex"
-      cursor="pointer"
-      aria-label="list-item"
-      onClick={() => {
-        onSelect(item)
-      }}
-      style={style}
-      px={1}
-      py={0.25}
-      key={itemIdx}>
-      <Render
-        index={itemIdx}
-        item={item}
-        refetch={refetch ? () => refetch(item.id) : undefined}
-        colorMode={colorMode}
-      />
-    </Flex>
-  )
-}