@chem-po/react-web 0.0.4 → 0.0.6

package/package.json

@@ -1,31 +1,32 @@
 {
   "name": "@chem-po/react-web",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
-  "publishConfig": {
-    "access": "public"
-  },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "default": "./dist/index.cjs"
-      }
-    }
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
   },
-  "keywords": [],
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
+  "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@chem-po/core": "0.0.4",
-    "@chem-po/react": "0.0.4"
+    "@chem-po/core": "0.0.6",
+    "@chem-po/react": "0.0.6"
   },
   "peerDependencies": {
     "@chakra-ui/anatomy": "^2.2.2",
@@ -40,8 +41,8 @@
     "howler": "^2.2.4",
     "lottie-react": "^2.4.0",
     "nested-property": "^4.0.0",
-    "react": "18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-currency-input-field": "^3.8.0",
     "react-day-picker": "^9.0.9",
     "react-error-boundary": "^4.0.13",
@@ -82,8 +83,9 @@
   "scripts": {
     "type-check": "tsc --noEmit",
     "lint": "pnpm type-check && eslint \"src/**/*.ts*\" --fix --quiet",
-    "build": "tsup ./src/index.ts --tsconfig ./tsconfig.json --config ./tsup.config.ts",
-    "prebuild": "pnpm lint",
-    "clean": "rm -rf dist"
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "prebuild": "pnpm lint"
   }
 }

package/src/components/auth/SignIn.tsx

@@ -0,0 +1,43 @@
+import { Button, Flex, Portal, Text } from '@chakra-ui/react'
+import { useAuth, useBackendBase } from '@chem-po/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

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

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'