@chem-po/react-web 0.0.5 → 0.0.7

package/src/components/box/CollapseHorizontal.tsx

@@ -0,0 +1,18 @@
+import { Center, CenterProps } from '@chakra-ui/react'
+
+export const CollapseHorizontal = ({
+  width,
+  children,
+  active,
+  duration = 400,
+  ...props
+}: CenterProps & { width: number; active: boolean; duration?: number }) => (
+  <Center
+    width={`${active ? width : 0}px`}
+    opacity={active ? 1 : 0}
+    transition={`all ${duration}ms ease-in-out`}
+    overflow="hidden"
+    {...props}>
+    {children}
+  </Center>
+)

package/src/components/box/ContentBox.tsx

@@ -0,0 +1,17 @@
+import { Flex, FlexProps } from '@chakra-ui/react'
+import { ForwardedRef, forwardRef } from 'react'
+
+const ContentBoxBase = (props: FlexProps, ref: ForwardedRef<HTMLDivElement>) => {
+  return (
+    <Flex
+      ref={ref}
+      bg="background.100"
+      p={3}
+      borderRadius={6}
+      boxShadow="1px 1px 4px #00000066"
+      {...props}
+    />
+  )
+}
+
+export const ContentBox = forwardRef<HTMLDivElement, FlexProps>(ContentBoxBase)

package/src/components/box/ExpandOnMount.tsx

@@ -0,0 +1,48 @@
+import { Box, BoxProps } from '@chakra-ui/react'
+import { useMounted } from '@chem-po/react'
+import useResizeObserver from '@react-hook/resize-observer'
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+export const ExpandOnMount: FC<
+  BoxProps & { in?: boolean; animateOpacity?: boolean; duration?: number; onExited?: () => void }
+> = ({ animateOpacity, duration = 300, children, in: isIn = true, onExited, ...props }) => {
+  const mounted = useMounted()
+
+  const [bodyHeight, setBodyHeight] = useState<number>(0)
+  const bodyRef = useRef<HTMLDivElement | null>(null)
+
+  const [isAnimating, setIsAnimating] = useState(false)
+  const expanded = useMemo(() => mounted && isIn, [isIn, mounted])
+  const height = useMemo(() => (expanded ? bodyHeight : 0), [bodyHeight, expanded])
+  const handleBodyResize = useCallback((e: ResizeObserverEntry) => {
+    setBodyHeight(e.target.scrollHeight)
+  }, [])
+
+  useResizeObserver(bodyRef, handleBodyResize)
+
+  const animatingTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
+  useEffect(() => {
+    if (animatingTimeout.current) {
+      clearTimeout(animatingTimeout.current)
+      animatingTimeout.current = null
+    }
+    setIsAnimating(true)
+    animatingTimeout.current = setTimeout(() => {
+      setIsAnimating(false)
+      if (onExited && !expanded) onExited()
+    }, duration)
+  }, [expanded, duration, onExited])
+  const transition = useMemo(() => {
+    if (!isAnimating && expanded) return 'height 0ms'
+    if (!animateOpacity) return `height ${duration}ms`
+    return `height ${duration}ms, opacity ${duration}ms ease ${expanded ? duration : 0}ms`
+  }, [animateOpacity, duration, expanded, isAnimating])
+
+  return (
+    <Box overflow="hidden" w="100%" transition={transition} height={`${height}px`} {...props}>
+      <Box ref={bodyRef} w="100%" {...props}>
+        {children}
+      </Box>
+    </Box>
+  )
+}

package/src/components/box/Expandable.tsx

@@ -0,0 +1,96 @@
+import {
+  Box,
+  Collapse,
+  Flex,
+  HStack,
+  StackProps,
+  Text,
+  useDisclosure,
+  VStack,
+} from '@chakra-ui/react'
+import React, { FC, PropsWithChildren, useCallback } from 'react'
+import { useBorderColor } from '../../hooks/ui/useBorderColor'
+import { ViewButton } from '../button/ViewButton'
+
+export const Expandable = ({
+  header,
+  children,
+  initExpanded = false,
+  nested,
+  alwaysExpanded,
+  headerProps,
+  iconColor,
+  footer,
+  isOpen: isOpenProp,
+  onClose: onCloseProp,
+  onOpen: onOpenProp,
+  ...stackProps
+}: PropsWithChildren<
+  StackProps & {
+    header: string | FC<{ isOpen: boolean; onClose: () => void }>
+    footer?: FC<{ isOpen: boolean; onClose: () => void }>
+    headerProps?: StackProps
+    nested?: boolean
+    alwaysExpanded?: boolean
+    initExpanded?: boolean
+    isOpen?: boolean
+    onClose?: () => void
+    iconColor?: string
+    onOpen?: () => void
+  }
+>) => {
+  const { isOpen, onClose, onOpen } = useDisclosure({
+    defaultIsOpen: alwaysExpanded ?? initExpanded,
+    isOpen: isOpenProp,
+    onClose: onCloseProp,
+    onOpen: onOpenProp,
+  })
+
+  const handleOpenClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (alwaysExpanded) return
+      if (isOpen) {
+        onClose()
+        return
+      }
+      onOpen()
+    },
+    [alwaysExpanded, onOpen, onClose, isOpen],
+  )
+  const borderColor = useBorderColor()
+  return (
+    <VStack spacing={0} borderColor={borderColor} w="100%" {...stackProps}>
+      <HStack
+        borderBottom={isOpen ? `1px solid ${borderColor}` : undefined}
+        px={2}
+        spacing={0}
+        w="100%"
+        {...headerProps}>
+        <Flex
+          onClick={handleOpenClick}
+          cursor="pointer"
+          aria-label="expand/hide"
+          align="center"
+          flex={1}>
+          {typeof header === 'string' ? (
+            <Text fontWeight={600} color="gray.500" flex={1}>
+              {header}
+            </Text>
+          ) : (
+            header({ isOpen, onClose })
+          )}
+        </Flex>
+        {alwaysExpanded ? null : (
+          <ViewButton color={iconColor} onClick={handleOpenClick} isOpen={isOpen} />
+        )}
+      </HStack>
+      <Box w="100%" borderLeft={nested ? '4px solid #00000033' : undefined}>
+        <Collapse unmountOnExit style={{ width: '100%' }} in={isOpen}>
+          {children as any}
+        </Collapse>
+      </Box>
+      {footer ? footer({ isOpen, onClose }) : null}
+    </VStack>
+  )
+}

package/src/components/box/FullSizeContainer.tsx

@@ -0,0 +1,50 @@
+import { Box, BoxProps } from '@chakra-ui/react'
+import { FullSizeContext } from '@chem-po/react'
+import useResizeObserver from '@react-hook/resize-observer'
+import { FC, useCallback, useMemo, useRef, useState } from 'react'
+
+export const FullSizeContainer = ({
+  children,
+  ...props
+}: Omit<BoxProps, 'children'> & { children: FC<{ width: number; height: number }> }) => {
+  const [width, setWidth] = useState(0)
+  const [height, setHeight] = useState(0)
+
+  const ref = useRef<HTMLDivElement>(null)
+  const handleResize = useCallback((entry: ResizeObserverEntry) => {
+    // const rect = entry.target.getBoundingClientRect()
+    setWidth(entry.target.scrollWidth)
+    setHeight(entry.target.scrollHeight)
+  }, [])
+
+  useResizeObserver(ref, handleResize)
+
+  return (
+    <Box ref={ref} {...props} width="100%" height="100%">
+      {children({ width, height })}
+    </Box>
+  )
+}
+
+// same as FullSizeContainer, but provides the width and height in a context instead of a render prop
+export const FullSizeProvider = ({ children, ...props }: BoxProps) => {
+  const [width, setWidth] = useState(0)
+  const [height, setHeight] = useState(0)
+
+  const ref = useRef<HTMLDivElement>(null)
+  const handleResize = useCallback((entry: ResizeObserverEntry) => {
+    // const rect = entry.target.getBoundingClientRect()
+    setWidth(entry.target.scrollWidth)
+    setHeight(entry.target.scrollHeight)
+  }, [])
+
+  useResizeObserver(ref, handleResize)
+
+  const contextValue = useMemo(() => ({ width, height }), [width, height])
+
+  return (
+    <Box ref={ref} {...props} width="100%" height="100%">
+      <FullSizeContext.Provider value={contextValue}>{children}</FullSizeContext.Provider>
+    </Box>
+  )
+}

package/src/components/box/MobileFrame/index.tsx

@@ -0,0 +1,145 @@
+import { Box, Center, Flex, useColorModeValue } from '@chakra-ui/react'
+import { cssGradients } from '@chem-po/core'
+import { MobileFrameProvider, useScreen, useViews, View, ViewsProvider } from '@chem-po/react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { PropsWithChildren, ReactNode, useMemo, useRef } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import { matchRoutes, useLocation, useOutlet } from 'react-router-dom'
+import { CSSTransition, SwitchTransition } from 'react-transition-group'
+import { ForceMobile } from '../../modal/ForceMobile'
+import { NAV_BAR_HEIGHT, NavBar } from '../../nav/NavBar'
+import { ErrorView } from '../../view/ErrorView'
+import { RedirectView } from '../../view/RedirectView'
+import './styles.css'
+
+const IPHONE_12_WIDTH = 390
+const IPHONE_12_HEIGHT = 844
+const IPHONE_12_ASPECT = IPHONE_12_WIDTH / IPHONE_12_HEIGHT
+
+const MobileFrameBody = ({
+  children,
+  navBarChildren,
+}: PropsWithChildren<{ navBarChildren?: ReactNode }>) => {
+  const { isMobile, height: screenHeight, width: screenWidth } = useScreen()
+
+  // const contentHeight = useMemo(() => (isMobile ? screenHeight : IPHONE_12_HEIGHT), [isMobile, screenHeight])
+  // const contentWidth = useMemo(() => (isMobile ? screenWidth : IPHONE_12_WIDTH), [isMobile, screenWidth])
+  // should be constrained to the screen size
+  const { contentHeight, contentWidth } = useMemo(() => {
+    let h = isMobile ? screenHeight : IPHONE_12_HEIGHT
+    let w = isMobile ? screenWidth : IPHONE_12_WIDTH
+    if (isMobile) return { contentHeight: h, contentWidth: w }
+    const cappedHeight = Math.floor(screenHeight * 0.9)
+    const cappedWidth = Math.floor(screenWidth * 0.9)
+    if (h > cappedHeight) {
+      w = Math.floor(cappedHeight * IPHONE_12_ASPECT)
+      h = cappedHeight
+    } else if (w > cappedWidth) {
+      h = Math.floor(cappedWidth / IPHONE_12_ASPECT)
+      w = cappedWidth
+    }
+    return { contentHeight: h, contentWidth: w }
+  }, [isMobile, screenHeight, screenWidth])
+
+  const outerBg = useColorModeValue(cssGradients.accentGray, cssGradients.darkGray)
+  const location = useLocation()
+  const currentOutlet = useOutlet()
+  const views = useViews()
+  const view = useMemo(() => views.find(v => !!matchRoutes(v.routes, location)), [views, location])
+  const viewKey = useMemo(() => {
+    if (!view) return '404'
+    return typeof view.view.path === 'string' ? view.view.path : view.view.path[0]
+  }, [view])
+  const overlayRef = useRef<HTMLDivElement>(null)
+  const nodeRef = useRef<HTMLDivElement>(null)
+  const absoluteNavBar = useMemo(() => !!view?.view?.navBar?.absolute, [view])
+  const bodyHeight = useMemo(
+    () => contentHeight - (absoluteNavBar ? 0 : NAV_BAR_HEIGHT),
+    [contentHeight, absoluteNavBar],
+  )
+  const contextData = useMemo(
+    () => ({
+      overlayRef,
+      height: contentHeight,
+      width: contentWidth,
+      absoluteNavBar,
+      bodyHeight,
+    }),
+    [overlayRef, contentHeight, contentWidth, absoluteNavBar, bodyHeight],
+  )
+  return (
+    <ForceMobile>
+      <MobileFrameProvider value={contextData}>
+        <Center position="relative" bg={outerBg} w="100%" height="100%">
+          <Flex
+            bg="background.100"
+            // ref={frameRef}
+            position="relative"
+            style={{ height: `${contentHeight}px`, width: `${contentWidth}px` }}
+            boxShadow={isMobile ? 'none' : '1px 1px 4px rgba(0,0,0,0.4)'}
+            borderRadius={isMobile ? 0 : 10}
+            overflow="hidden"
+            direction="column"
+            maxH={contentHeight}>
+            <AnimatePresence>
+              <SwitchTransition>
+                <CSSTransition
+                  key={viewKey}
+                  nodeRef={nodeRef}
+                  unmountOnExit
+                  classNames="page"
+                  timeout={300}>
+                  {() => (
+                    <motion.div
+                      style={{
+                        position: 'relative',
+                        width: '100%',
+                        overflow: 'hidden',
+                      }}
+                      animate={{
+                        height: bodyHeight,
+                        opacity: 1,
+                        dur: 0.5,
+                        scale: 1,
+                      }}
+                      initial={{ opacity: 0, scale: 0.9, height: bodyHeight }}
+                      exit={{ opacity: 0 }}>
+                      <ErrorBoundary FallbackComponent={() => <ErrorView />}>
+                        {view ? currentOutlet : <RedirectView />}
+                      </ErrorBoundary>
+                      {children ? (
+                        <Box
+                          height="100%"
+                          w="100%"
+                          position="absolute"
+                          top={0}
+                          left={0}
+                          pointerEvents="none">
+                          {children}
+                        </Box>
+                      ) : null}
+                    </motion.div>
+                  )}
+                </CSSTransition>
+              </SwitchTransition>
+            </AnimatePresence>
+            <NavBar selectedView={view?.view}>{navBarChildren}</NavBar>
+            <Flex pos="absolute" pointerEvents="none" bottom={0} w="100%" h="100%">
+              <Flex ref={overlayRef} w="100%" h="100%" pos="relative" />
+            </Flex>
+          </Flex>
+        </Center>
+      </MobileFrameProvider>
+    </ForceMobile>
+  )
+}
+
+export const MobileFrame = ({
+  children,
+  navBarChildren,
+  views,
+}: PropsWithChildren<{ views: View[]; navBarChildren?: ReactNode }>) => (
+  <ViewsProvider views={views}>
+    <MobileFrameBody navBarChildren={navBarChildren}>{children}</MobileFrameBody>
+  </ViewsProvider>
+)

package/src/components/box/MobileFrame/styles.css

@@ -0,0 +1,35 @@
+.page {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  min-height: 0;
+  flex: 1;
+}
+
+.page-enter {
+  opacity: 0;
+  transform: scale(1.05);
+  overflow: hidden;
+}
+
+.page-enter-active {
+  opacity: 1;
+  transform: scale(1);
+  overflow: hidden !important;
+  transition: opacity 300ms, transform 300ms;
+}
+
+.page-exit {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.page-exit-active {
+  opacity: 0;
+  overflow: hidden !important;
+  /* transform: scale(0.95); */
+  transition: opacity 300ms, transform 300ms;
+}

package/src/components/box/index.ts

@@ -0,0 +1,6 @@
+export * from './CollapseHorizontal'
+export * from './ContentBox'
+export * from './Expandable'
+export * from './ExpandOnMount'
+export * from './FullSizeContainer'
+export * from './MobileFrame'

package/src/components/button/DeleteButton.tsx

@@ -0,0 +1,178 @@
+import { DeleteIcon } from '@chakra-ui/icons'
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogOverlay,
+  Button,
+  Flex,
+  HStack,
+  IconButton,
+  IconButtonProps,
+  Text,
+  useToast,
+  VStack,
+} from '@chakra-ui/react'
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+
+const defaultAlertBodyText = "Are you sure? You can't undo this action afterwards."
+export const DeleteConfirmAlert = ({
+  confirmActive,
+  onCancel,
+  onConfirm,
+  body = defaultAlertBodyText,
+  actionName = 'Delete',
+  actionLoading,
+  itemName,
+}: {
+  confirmActive: boolean
+  onCancel: () => void
+  onConfirm: () => void
+  body?: string | ReactNode
+  actionLoading?: boolean
+  actionName?: string
+  itemName: string
+}) => {
+  const cancelRef = useRef<HTMLButtonElement>(null)
+  return (
+    <AlertDialog
+      isCentered
+      isOpen={confirmActive}
+      leastDestructiveRef={cancelRef}
+      onClose={() => onCancel()}>
+      <AlertDialogOverlay>
+        <AlertDialogContent gap={0}>
+          <AlertDialogBody>
+            <VStack align="flex-start" py={1}>
+              <Text fontSize="lg" fontWeight={500}>
+                {actionName} {itemName}?
+              </Text>
+              {typeof body === 'string' ? <Text fontSize="md">{body}</Text> : body}
+              <HStack justify="flex-end" w="100%">
+                <Button size="sm" ref={cancelRef} onClick={onCancel}>
+                  Cancel
+                </Button>
+                <Button
+                  size="sm"
+                  isLoading={actionLoading}
+                  color="white"
+                  textShadow="1px 1px 3px #00000077"
+                  bg="red.500"
+                  _dark={{
+                    bg: 'red.500',
+                  }}
+                  onClick={onConfirm}>
+                  {actionName}
+                </Button>
+              </HStack>
+            </VStack>
+          </AlertDialogBody>
+        </AlertDialogContent>
+      </AlertDialogOverlay>
+    </AlertDialog>
+  )
+}
+
+export const DeleteButton: React.FC<
+  Partial<IconButtonProps> & {
+    onDelete: (() => Promise<any>) | (() => void)
+    itemName: string
+    actionName?: string
+    noConfirm?: boolean
+    text?: string
+    alertBody?: string | ReactNode
+  }
+> = ({ onDelete, itemName, noConfirm, alertBody, text, actionName = 'Delete', ...props }) => {
+  const [deleteLoading, setDeleteLoading] = useState(false)
+  const [confirmActive, setConfirmActive] = useState(false)
+  const confirmTimer = useRef<any>()
+  const isMounted = useRef(true)
+  useEffect(() => {
+    isMounted.current = true
+
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  const toast = useToast()
+  const handleDelete = useCallback(async () => {
+    if (confirmTimer.current) clearTimeout(confirmTimer.current)
+    setConfirmActive(false)
+    if (onDelete) {
+      setDeleteLoading(true)
+      try {
+        await onDelete()
+      } catch (err: any) {
+        console.error(err)
+        toast({
+          title: 'Error',
+          description: err.message ?? 'An error occurred',
+          status: 'error',
+          duration: 5000,
+          isClosable: true,
+        })
+      }
+      if (isMounted.current) {
+        setDeleteLoading(false)
+      }
+    } else {
+      console.error('No delete function')
+    }
+  }, [onDelete, toast])
+
+  return (
+    <>
+      {text ? (
+        <Button
+          variant="ghost"
+          size={props.size ?? 'md'}
+          aria-label="delete"
+          _hover={{ color: 'red.600', bg: 'red.200' }}
+          color="red.600"
+          onClick={e => {
+            e.stopPropagation()
+            if (noConfirm) handleDelete()
+            else setConfirmActive(true)
+          }}
+          isLoading={deleteLoading}
+          {...props}>
+          <Flex align="center" gap={1}>
+            <DeleteIcon />
+            <Text>{text}</Text>
+          </Flex>
+        </Button>
+      ) : (
+        <IconButton
+          variant="ghost"
+          size={props.size ?? 'sm'}
+          aria-label={actionName}
+          _hover={{ color: 'red.600', bg: 'red.200' }}
+          color="red.500"
+          borderRadius="full"
+          icon={<DeleteIcon />}
+          onClick={e => {
+            e.stopPropagation()
+            if (noConfirm) handleDelete()
+            else setConfirmActive(true)
+          }}
+          isLoading={deleteLoading}
+          {...props}
+        />
+      )}
+      {noConfirm ? null : (
+        <DeleteConfirmAlert
+          confirmActive={confirmActive}
+          onCancel={() => setConfirmActive(false)}
+          actionLoading={deleteLoading}
+          onConfirm={() => {
+            handleDelete()
+          }}
+          actionName={actionName}
+          body={alertBody}
+          itemName={itemName}
+        />
+      )}
+    </>
+  )
+}

package/src/components/button/Toggle.tsx

@@ -0,0 +1,88 @@
+import { Box, Flex, IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react'
+import { JSX } from 'react'
+import { useBorderColor } from '../../hooks'
+
+export interface ToggleOption<Option extends string = string> {
+  id: Option
+  label: string
+  disabledMessage?: string
+  Render: (selected: boolean) => JSX.Element
+}
+export interface ToggleProps<Option extends string> {
+  options: ToggleOption<Option>[]
+  value: Option
+  size?: number
+  onChange: (value: Option) => Promise<void> | void
+}
+
+const ToggleButton = <Option extends string>({
+  selected,
+  option: { Render, label, disabledMessage },
+  size,
+  ...props
+}: Omit<IconButtonProps, 'children' | 'aria-label' | 'size'> & {
+  option: ToggleOption<Option>
+  size: number
+  selected: boolean
+}) => {
+  const body = (
+    <Box>
+      <IconButton
+        variant="unstyled"
+        w={`${size}px`}
+        h={`${size}px`}
+        minW={0}
+        borderRadius={0}
+        outline="none"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        opacity={!disabledMessage ? 1 : 0.6}
+        filter={!disabledMessage ? 'none' : 'grayscale(1)'}
+        bg={selected ? 'whiteAlpha.500' : 'blackAlpha.100'}
+        _dark={{ bg: selected ? 'blackAlpha.500' : 'whiteAlpha.200' }}
+        icon={Render(selected)}
+        pointerEvents={selected ? 'none' : 'auto'}
+        aria-label={label}
+        {...props}
+      />
+    </Box>
+  )
+
+  return (
+    <Tooltip label={disabledMessage ?? label} aria-label={label}>
+      {body}
+    </Tooltip>
+  )
+}
+
+export const Toggle = <Option extends string>({
+  value,
+  onChange,
+  size = 28,
+  options,
+}: ToggleProps<Option>) => {
+  const borderColor = useBorderColor()
+  return (
+    <Flex
+      bg="whiteAlpha.300"
+      _dark={{ bg: 'blackAlpha.300' }}
+      border={`1px solid ${borderColor}`}
+      borderRadius={3}>
+      {options.map((option, i) => (
+        <ToggleButton<Option>
+          key={option.id}
+          onClick={() => {
+            onChange(option.id)
+          }}
+          option={option}
+          size={size}
+          borderLeftRadius={i ? 0 : 3}
+          borderRightRadius={i === options.length - 1 ? 3 : 0}
+          selected={option.id === value}
+          borderLeft={i ? `1px solid ${borderColor}` : 'none'}
+        />
+      ))}
+    </Flex>
+  )
+}