@chem-po/react-web 0.0.51 → 0.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chem-po/react-web",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,8 +9,7 @@
   },
   "sideEffects": false,
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "keywords": [],
   "author": "",
@@ -40,8 +39,8 @@
     "react-window-infinite-loader": "^1.0.9",
     "@hello-pangea/dnd": "^18.0.1",
     "zustand": "^4.3.3",
-    "@chem-po/core": "0.0.51",
-    "@chem-po/react": "0.0.51"
+    "@chem-po/core": "0.0.53",
+    "@chem-po/react": "0.0.53"
   },
   "peerDependencies": {
     "react": "~19.1.0",

package/src/components/auth/SignIn.tsx

@@ -1,43 +0,0 @@
-import { Button, Flex, Portal, Text } from '@chakra-ui/react'
-import { useAuth, useBackendBase } from '@chem-po/react'
-import React from 'react'
-interface SignInProps {
-  // authProviders: Array<AuthProviderData<FC<{ noText?: boolean }>>>
-  layout?: 'row' | 'column'
-}
-
-export const SignIn = ({ layout = 'row' }: SignInProps) => {
-  const {
-    adapter: { auth },
-  } = useBackendBase()
-
-  const user = useAuth(s => s.user)
-  return (
-    <Flex gap={[1, 1, 2]} align="center" flexFlow={['column', 'column', 'row']}>
-      {user ? (
-        <Button
-          size="sm"
-          onClick={() => {
-            auth.logout()
-          }}>
-          SIGN OUT
-        </Button>
-      ) : (
-        <>
-          <Text whiteSpace="nowrap" textAlign="center" opacity={0.8} fontWeight={600} fontSize="sm">
-            SIGN IN
-          </Text>
-          <Flex flexFlow={layout} gap={2} w="100%"></Flex>
-        </>
-      )}
-    </Flex>
-  )
-}
-
-export const AbsoluteLogin = (props: SignInProps) => (
-  <Portal>
-    <Flex position="fixed" bottom={4} left={4}>
-      <SignIn {...props} />
-    </Flex>
-  </Portal>
-)

package/src/components/auth/index.ts

@@ -1 +0,0 @@
-export * from './SignIn'

package/src/components/box/CollapseHorizontal.tsx

@@ -1,19 +0,0 @@
-import { Center, CenterProps } from '@chakra-ui/react'
-import React from '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

@@ -1,17 +0,0 @@
-import { Flex, FlexProps } from '@chakra-ui/react'
-import React, { 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

@@ -1,48 +0,0 @@
-import { Box, BoxProps } from '@chakra-ui/react'
-import { useMounted } from '@chem-po/react'
-import useResizeObserver from '@react-hook/resize-observer'
-import React, { 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

@@ -1,96 +0,0 @@
-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: Header,
-  children,
-  initExpanded = false,
-  nested,
-  alwaysExpanded,
-  headerProps,
-  iconColor,
-  footer: 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={isOpen} onClose={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={isOpen} onClose={onClose} /> : null}
-    </VStack>
-  )
-}

package/src/components/box/FullSizeContainer.tsx

@@ -1,50 +0,0 @@
-import { Box, BoxProps } from '@chakra-ui/react'
-import { FullSizeContext } from '@chem-po/react'
-import useResizeObserver from '@react-hook/resize-observer'
-import React, { FC, useCallback, useMemo, useRef, useState } from 'react'
-
-export const FullSizeContainer = ({
-  children: 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={width} height={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

@@ -1,146 +0,0 @@
-import { Box, Center, Flex, useColorModeValue } from '@chakra-ui/react'
-import { cssGradients } from '@chem-po/core'
-import { MobileFrameProvider, useScreen, View } from '@chem-po/react'
-import { AnimatePresence, motion } from 'framer-motion'
-import React, { 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 { useViews, ViewsProvider } from '../../../contexts/view'
-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

@@ -1,35 +0,0 @@
-.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

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

package/src/components/button/DeleteButton.tsx

@@ -1,178 +0,0 @@
-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<ReturnType<typeof setTimeout> | null>(null)
-  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}
-        />
-      )}
-    </>
-  )
-}