@chem-po/react-web 0.0.52 → 0.0.53

package/src/components/button/Toggle.tsx

@@ -1,88 +0,0 @@
-import { Box, Flex, IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react'
-import React, { 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>
-  )
-}

package/src/components/button/ViewButton.tsx

@@ -1,30 +0,0 @@
-import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'
-import { IconButton } from '@chakra-ui/react'
-import React, { FC, MouseEvent } from 'react'
-
-export const ViewButton: FC<{
-  onClick: (e: MouseEvent) => void
-  isOpen: boolean
-  viewText?: string
-  hideText?: string
-  color?: string
-}> = ({ viewText = 'View', hideText = 'Hide', onClick, isOpen, color }) => (
-  <IconButton
-    icon={
-      isOpen ? <ChevronUpIcon width={5} height={5} /> : <ChevronDownIcon width={5} height={5} />
-    }
-    aria-label={isOpen ? hideText : viewText}
-    variant="ghost"
-    p="2px"
-    ml="auto"
-    size="xs"
-    fontSize="xs"
-    borderRadius="full"
-    _hover={{ bg: 'blackAlpha.200' }}
-    color={color ?? '#777'}
-    onClick={e => {
-      e.stopPropagation()
-      onClick(e)
-    }}
-  />
-)

package/src/components/button/index.ts

@@ -1,3 +0,0 @@
-export * from './DeleteButton'
-export * from './Toggle'
-export * from './ViewButton'

package/src/components/feed/FeedContentPane.tsx

@@ -1,111 +0,0 @@
-import { AnyObject, WithId } from '@chem-po/core'
-import { MobileFrameContextData, useDocument, useMobileFrame } from '@chem-po/react'
-import { motion, MotionValue, useMotionValue, useSpring, useTransform } from 'framer-motion'
-import React, { JSX, useEffect, useMemo, useRef } from 'react'
-import { springConfig } from './constants'
-import { PanelStatus } from './types'
-
-const getContentScale = (status: PanelStatus) => {
-  // if (status === 'current') return 1
-  if (status === 'current') return 1
-  return 0
-}
-const getContentX = (status: PanelStatus, contentSize: { width: number; height: number }) => {
-  const { width: cWidth } = contentSize
-  if (status === 'current') return 0
-  if (status === 'next') return cWidth
-  if (status === 'prev') return -cWidth
-  return 0
-}
-
-const getContentY = (status: PanelStatus, contentSize: { width: number; height: number }) => {
-  const { height: cHeight } = contentSize
-  if (status === 'current') return 0
-  if (status === 'next') return cHeight * 1.1
-  if (status === 'prev') return -cHeight * 1.1
-  return 0
-}
-
-interface FeedContentPaneProps<T extends AnyObject = AnyObject> {
-  id: string
-  collectionPath: string
-  RenderItem: (i: WithId<T>) => JSX.Element
-  onItemLoad: (data: WithId<T> | null) => void
-  status: PanelStatus
-  enterStatus?: PanelStatus | null
-  offsetY: MotionValue<number>
-}
-
-export const FeedContentPane = <T extends AnyObject = AnyObject>({
-  id,
-  collectionPath,
-  onItemLoad,
-  RenderItem,
-  status,
-  offsetY,
-  enterStatus,
-}: FeedContentPaneProps<T>) => {
-  const contentSize = useMobileFrame()
-  const scale = useSpring(0, springConfig)
-  const baseY = useMotionValue(getContentY(enterStatus ?? 'next', contentSize))
-  const yVal = useTransform(() => baseY.get() + offsetY.get())
-  const y = useSpring(yVal, springConfig)
-
-  const docPath = useMemo(() => `${collectionPath}/${id}`, [collectionPath, id])
-  const { data: item } = useDocument<T>(docPath, onItemLoad)
-
-  const init = useRef<{
-    status: PanelStatus
-    contentSize: MobileFrameContextData
-    y: number
-    scale: number
-  }>({
-    contentSize,
-    status: enterStatus ?? status,
-    // x: getContentX(fromStatus || status, contentSize),
-    y: getContentY(enterStatus ?? status, contentSize),
-    scale: getContentScale(enterStatus ?? status),
-  })
-
-  useEffect(() => {
-    const newScale = getContentScale(status)
-    const updatedX = getContentX(status, contentSize)
-    baseY.set(updatedX)
-    scale.set(newScale)
-  }, [status, baseY, scale, contentSize])
-
-  return (
-    // <AnimatePresence>
-    <motion.div
-      initial={{
-        x: 0,
-        y: init.current.y,
-        scale: init.current.scale,
-      }}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        touchAction: 'none',
-        userSelect: 'none',
-        height: '100%',
-        y,
-        scale,
-        opacity: scale,
-        width: '100%',
-      }}
-      exit={{
-        opacity: 0,
-        scale: 0,
-        // x: getContentX(fromStatus || status, contentSize),
-        x: 0,
-        y: getContentY(enterStatus === 'next' ? 'prev' : 'next', contentSize),
-      }}>
-      {item ? RenderItem(item) : null}
-    </motion.div>
-    // </AnimatePresence>
-  )
-}

package/src/components/feed/MediaFeed.tsx

@@ -1,200 +0,0 @@
-import { Center } from '@chakra-ui/react'
-import { AnyObject, WithId } from '@chem-po/core'
-import { useMobileFrame } from '@chem-po/react'
-import { useMotionValue } from 'framer-motion'
-import React, {
-  CSSProperties,
-  Dispatch,
-  PropsWithChildren,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import { LoadingOverlay } from '../loading'
-import { REFRESH_THRESHOLD, SWIPE_THRESHOLD } from './constants'
-import { MediaFeedProvider } from './context'
-import { FeedContentPane } from './FeedContentPane'
-import { useMediaFeed } from './hooks'
-import { MediaFeedBackground } from './MediaFeedBackground'
-import { MediaFeedRefresh } from './MediaFeedRefresh'
-import { MediaBackgroundRef, MediaFeedProps, PanelData, UpdatePanelsArgs } from './types'
-
-const useUpdatePanels = (setItems: Dispatch<React.SetStateAction<Array<PanelData>>>) =>
-  useCallback(
-    (data: UpdatePanelsArgs) => {
-      const updated: PanelData[] = []
-      if (data.prev) updated.push({ status: 'prev', id: data.prev })
-      if (data.curr) {
-        updated.push({
-          status: 'current',
-          id: data.curr,
-        })
-      }
-      if (data.next) updated.push({ status: 'next', id: data.next })
-      setItems(updated)
-    },
-    [setItems],
-  )
-
-export const MediaFeed = <T extends AnyObject = AnyObject>({
-  fetch,
-  collection: collectionPath,
-  RenderItem,
-  authRequired,
-  getBackgroundUrl,
-  getBackgroundValue,
-  limit,
-  defaultBackground,
-  swipeDisabled,
-  children,
-}: PropsWithChildren<MediaFeedProps<T>>) => {
-  const { width, height } = useMobileFrame()
-
-  const contentRef = useRef<HTMLDivElement>(null)
-
-  const containerRef = useRef<HTMLDivElement>(null)
-  // const panels = useRef<Array<FeedContentPaneRef>>([])
-  const [direction, setDirection] = useState<'next' | 'prev' | null>(null)
-  const [panels, setPanels] = useState<Array<PanelData>>([])
-
-  const offsetY = useMotionValue(0)
-  const onNewData = useUpdatePanels(setPanels)
-
-  const backgroundRef = useRef<MediaBackgroundRef<T>>(null)
-
-  const { goNext, goPrev, loading, canGoNext, canGoPrev, refresh, refreshing } = useMediaFeed(
-    fetch,
-    onNewData,
-    limit,
-    authRequired,
-  )
-
-  const pointerDown = useRef(false)
-  const dragStart = useRef({ x: 0, y: 0 })
-
-  const onDragStart = useCallback(
-    (e: React.PointerEvent) => {
-      if (swipeDisabled) return
-      pointerDown.current = true
-      dragStart.current = { x: e.clientX, y: e.clientY }
-      const dragEndListener = (ev: PointerEvent) => {
-        // const oX = Math.max(-width / 4, Math.min(width / 4, ev.clientX - dragStart.current.x))
-        const maxY = canGoPrev ? SWIPE_THRESHOLD : REFRESH_THRESHOLD
-        const minY = canGoNext ? -SWIPE_THRESHOLD : -REFRESH_THRESHOLD
-        const oY = Math.max(minY, Math.min(maxY, ev.clientY - dragStart.current.y))
-        if (contentRef.current) contentRef.current.style.setProperty('pointer-events', 'auto')
-        if (canGoNext && oY < -(SWIPE_THRESHOLD - 10)) {
-          setDirection('next')
-          goNext()
-        } else if (canGoPrev && oY > SWIPE_THRESHOLD - 10) {
-          setDirection('prev')
-          goPrev()
-        } else if (oY > REFRESH_THRESHOLD - 10 || oY < -(REFRESH_THRESHOLD - 10)) {
-          refresh()
-          if (backgroundRef.current) backgroundRef.current.onNewData(null)
-        }
-        // else if (onSwipeUp && oY < -97) {
-        // onSwipeUp()
-        // }
-        offsetY.set(0)
-        pointerDown.current = false
-        window.removeEventListener('pointerup', dragEndListener)
-      }
-
-      window.addEventListener('pointerup', dragEndListener)
-    },
-    [offsetY, goNext, goPrev, canGoNext, canGoPrev, refresh, swipeDisabled],
-  )
-
-  const onDragMove = useCallback(
-    (e: React.PointerEvent) => {
-      requestAnimationFrame(() => {
-        if (pointerDown.current) {
-          const oX = Math.max(-10, Math.min(10, e.clientX - dragStart.current.x))
-          const maxY = canGoPrev ? SWIPE_THRESHOLD : REFRESH_THRESHOLD
-          const minY = canGoNext ? -SWIPE_THRESHOLD : -REFRESH_THRESHOLD
-          const oY = Math.max(minY, Math.min(maxY, e.clientY - dragStart.current.y))
-
-          const dist = Math.sqrt(oX ** 2 + oY ** 2)
-          if (dist > 10 && contentRef.current) {
-            contentRef.current.style.setProperty('pointer-events', 'none')
-          }
-          // offsetX.jump(oX)
-          offsetY.set(oY)
-        }
-      })
-    },
-    [offsetY, canGoNext, canGoPrev],
-  )
-
-  const containerStyle = useMemo<CSSProperties>(
-    () => ({
-      height: `${height}px`,
-      width: `${width}px`,
-      overflow: 'hidden',
-      pointerEvents: swipeDisabled ? 'none' : 'auto',
-    }),
-    [width, height, swipeDisabled],
-  )
-  const [curr, setCurr] = useState<WithId<T> | null>(null)
-
-  const handleItemLoad = useCallback(
-    (data: WithId<T> | null) => {
-      const isCurr = panels.find(p => p.status === 'current')?.id === data?.id
-      if (isCurr) setCurr(data)
-    },
-    [panels],
-  )
-
-  return (
-    <MediaFeedProvider curr={curr}>
-      <Center
-        background={defaultBackground ?? 'background.100'}
-        style={{ touchAction: 'none' }}
-        userSelect="none"
-        position="relative"
-        w="100%"
-        h="100%"
-        overflow="hidden"
-        onPointerDown={onDragStart}
-        onPointerMove={onDragMove}>
-        <MediaFeedBackground
-          item={curr}
-          getBackgroundValue={getBackgroundValue}
-          getBackgroundUrl={getBackgroundUrl}
-        />
-        <div ref={containerRef} style={containerStyle}>
-          <Center ref={contentRef} h="100%" w="100%">
-            {panels.map(panel => (
-              <FeedContentPane<T>
-                key={panel.id}
-                id={panel.id}
-                collectionPath={collectionPath}
-                RenderItem={RenderItem}
-                onItemLoad={handleItemLoad}
-                status={panel.status}
-                enterStatus={direction}
-                offsetY={offsetY}
-              />
-            ))}
-          </Center>
-        </div>
-        <MediaFeedRefresh canRefresh={!canGoPrev} refreshing={refreshing} offsetY={offsetY} />
-        {/* {onSwipeUp ? <MediaFeedSwipeUp offsetY={offsetY} /> : null} */}
-        <LoadingOverlay
-          inFeed
-          zIndex={2}
-          bg="transparent"
-          pointerEvents="none"
-          isLoading={loading}
-        />
-        {children ? (
-          <Center position="absolute" bottom="0" left="0" right="0" zIndex={3} pointerEvents="none">
-            {children}
-          </Center>
-        ) : null}
-      </Center>
-    </MediaFeedProvider>
-  )
-}

package/src/components/feed/MediaFeedBackground.tsx

@@ -1,127 +0,0 @@
-import { Center, CenterProps } from '@chakra-ui/react'
-import { AnyObject, WithId } from '@chem-po/core'
-import { useObjectUrl } from '@chem-po/react'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { LoadingLogo } from '../loading'
-import { GetBackgroundUrl, GetBackgroundValue } from './types'
-
-const emptyPng =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII='
-const FillBackground = ({
-  background,
-  ...props
-}: Omit<CenterProps, 'background'> & { background: string | null }) => (
-  <Center
-    position="absolute"
-    top="0"
-    left="0"
-    opacity={background ? 0.7 : 0}
-    transition="opacity 500ms"
-    right="0"
-    bottom="0"
-    zIndex={0}
-    transform="scale(1.075)"
-    pointerEvents="none"
-    backgroundImage={`url(${background ?? emptyPng})`}
-    backgroundSize="cover"
-    backgroundPosition="center"
-    {...props}
-    filter={props.filter ?? 'blur(15px) brightness(70%)'}
-  />
-)
-
-interface FileValueBackgroundProps<T extends AnyObject = AnyObject> {
-  getBackgroundValue: GetBackgroundValue<T>
-  item: WithId<T> | null
-  filter?: string
-}
-const FileValueBackground = <T extends AnyObject = AnyObject>({
-  getBackgroundValue,
-  item,
-  filter,
-}: FileValueBackgroundProps<T>) => {
-  const background = useMemo(
-    () => (item ? getBackgroundValue(item) : null),
-    [getBackgroundValue, item],
-  )
-  const { loading, url } = useObjectUrl(background)
-  const usedIndex = useRef(0)
-  const [index, setIndex] = useState(0)
-  const [url1, setUrl1] = useState<string | null>(null)
-  const [url2, setUrl2] = useState<string | null>(null)
-
-  useEffect(() => {
-    const usedIdx = usedIndex.current
-    if (usedIdx === 0) {
-      setUrl1(url)
-      usedIndex.current = 1
-      setIndex(0)
-    } else {
-      setUrl2(url)
-      usedIndex.current = 0
-      setIndex(1)
-    }
-  }, [url])
-
-  return (
-    <Center position="absolute" top="0" left="0" right="0" bottom="0" zIndex={0}>
-      <FillBackground filter={filter} opacity={index === 0 ? 1 : 0} background={url1} />
-      <FillBackground filter={filter} opacity={index === 1 ? 1 : 0} background={url2} />
-      <LoadingLogo isLoading={loading} />
-    </Center>
-  )
-}
-
-const UrlBackground = <T extends AnyObject = AnyObject>({
-  getBackgroundUrl,
-  item,
-  filter,
-}: {
-  getBackgroundUrl: GetBackgroundUrl<T>
-  item: T | null
-  filter?: string
-}) => {
-  const background = useMemo(() => (item ? getBackgroundUrl(item) : null), [getBackgroundUrl, item])
-  const usedIndex = useRef(0)
-  const [index, setIndex] = useState(0)
-  const [url1, setUrl1] = useState<string | null>(null)
-  const [url2, setUrl2] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!background) return
-    if (usedIndex.current === 0) {
-      setUrl1(background)
-      usedIndex.current = 1
-      setIndex(0)
-    } else {
-      setUrl2(background)
-      usedIndex.current = 0
-      setIndex(1)
-    }
-  }, [background])
-
-  return (
-    <Center position="absolute" top="0" left="0" right="0" bottom="0" zIndex={0}>
-      <FillBackground filter={filter} opacity={index === 0 ? 1 : 0} background={url1} />
-      <FillBackground filter={filter} opacity={index === 1 ? 1 : 0} background={url2} />
-    </Center>
-  )
-}
-
-interface MediaFeedBackgroundProps<T extends AnyObject = AnyObject> {
-  getBackgroundValue?: GetBackgroundValue<T>
-  getBackgroundUrl?: GetBackgroundUrl<T>
-  filter?: string
-  item: WithId<T> | null
-}
-
-export const MediaFeedBackground = <T extends AnyObject = AnyObject>({
-  getBackgroundValue,
-  getBackgroundUrl,
-  ...props
-}: MediaFeedBackgroundProps<T>) => {
-  if (getBackgroundValue)
-    return <FileValueBackground getBackgroundValue={getBackgroundValue} {...props} />
-  if (getBackgroundUrl) return <UrlBackground getBackgroundUrl={getBackgroundUrl} {...props} />
-  return null
-}

package/src/components/feed/MediaFeedRefresh.tsx

@@ -1,78 +0,0 @@
-import { RepeatIcon } from '@chakra-ui/icons'
-import { Center } from '@chakra-ui/react'
-import { motion, MotionValue, useSpring, useTransform } from 'framer-motion'
-import React, { useEffect } from 'react'
-import { CircularProgress } from '../loading/CircularProgress'
-import { REFRESH_THRESHOLD, SWIPE_THRESHOLD } from './constants'
-
-const WINDOW = REFRESH_THRESHOLD - SWIPE_THRESHOLD
-export const MediaFeedRefresh = ({
-  offsetY,
-  refreshing,
-  canRefresh,
-}: {
-  offsetY: MotionValue<number>
-  refreshing: boolean
-  canRefresh: boolean
-}) => {
-  const progress = useTransform(offsetY, v => {
-    const dist = Math.max(0, v - SWIPE_THRESHOLD)
-    return dist / WINDOW
-  })
-  const baseY = useSpring(0)
-  const isIn = useSpring(0)
-  useEffect(() => {
-    if (refreshing) {
-      baseY.set(50)
-    } else {
-      baseY.set(0)
-    }
-  }, [refreshing, baseY])
-
-  useEffect(() => {
-    if (canRefresh) {
-      isIn.set(1)
-    } else {
-      isIn.set(0)
-    }
-  }, [isIn, canRefresh])
-
-  const y = useTransform(
-    () => isIn.get() * Math.min(20, Math.max(0, baseY.get() + progress.get() ** 0.5 * 20)),
-  )
-  const scale = useTransform(y, v => isIn.get() * Math.min(1, Math.max(0, v / 30)))
-  const rotate = useTransform(() => isIn.get() * progress.get() * 180)
-  return (
-    <motion.div
-      style={{
-        opacity: scale,
-        pointerEvents: 'none',
-        y,
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: 'auto',
-        scale,
-        rotate,
-      }}>
-      <Center w="100%">
-        <RepeatIcon
-          opacity={refreshing ? 0 : 1}
-          transition={`opacity 300ms ease ${!refreshing ? 300 : 0}ms`}
-          w={8}
-          h={8}
-          color="white"
-          filter="drop-shadow(1px 1px 3px #000000aa)"
-        />
-        <CircularProgress
-          size={8}
-          position="absolute"
-          isIndeterminate
-          opacity={refreshing ? 1 : 0}
-          transition={`opacity 300ms ease ${refreshing ? 300 : 0}ms`}
-        />
-      </Center>
-    </motion.div>
-  )
-}

package/src/components/feed/MediaFeedSwipeUp.tsx

@@ -1,35 +0,0 @@
-import { ChevronUpIcon } from '@chakra-ui/icons'
-import { Center } from '@chakra-ui/react'
-import { motion, MotionValue, useTransform } from 'framer-motion'
-import React from 'react'
-
-export const MediaFeedSwipeUp = ({ offsetY }: { offsetY: MotionValue<number> }) => {
-  const progress = useTransform(offsetY, v => {
-    if (v > -30) return 0
-    return Math.max(0, -(v + 30) / 20)
-  })
-  const y = useTransform(progress, v => -(v ** 0.5) * 10)
-  return (
-    <motion.div
-      style={{
-        opacity: progress,
-        pointerEvents: 'none',
-        y,
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: 'auto',
-        scale: progress,
-      }}>
-      <Center w="100%">
-        <ChevronUpIcon
-          w={8}
-          h={8}
-          color="whiteAlpha.700"
-          filter="drop-shadow(1px 1px 3px #000000aa)"
-        />
-      </Center>
-    </motion.div>
-  )
-}

package/src/components/feed/constants.ts

@@ -1,11 +0,0 @@
-import { SpringOptions } from 'framer-motion'
-
-export const springConfig: SpringOptions = {
-  damping: 25,
-  stiffness: 200,
-  bounce: 0.5,
-  // restSpeed: 0.1,
-}
-
-export const SWIPE_THRESHOLD = 75
-export const REFRESH_THRESHOLD = 100