@chem-po/react-web 0.0.4 → 0.0.6

package/src/components/feed/MediaFeedBackground.tsx

@@ -0,0 +1,127 @@
+import { Center, CenterProps } from '@chakra-ui/react'
+import { AnyObject, WithId } from '@chem-po/core'
+import { useObjectUrl } from '@chem-po/react'
+import { 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

@@ -0,0 +1,78 @@
+import { RepeatIcon } from '@chakra-ui/icons'
+import { Center } from '@chakra-ui/react'
+import { motion, MotionValue, useSpring, useTransform } from 'framer-motion'
+import { 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

@@ -0,0 +1,34 @@
+import { ChevronUpIcon } from '@chakra-ui/icons'
+import { Center } from '@chakra-ui/react'
+import { motion, MotionValue, useTransform } from 'framer-motion'
+
+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

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

package/src/components/feed/context.tsx

@@ -0,0 +1,19 @@
+import { AnyObject, WithId } from '@chem-po/core'
+import { createContext, PropsWithChildren, useContext, useMemo } from 'react'
+
+interface MediaFeedContextValue<T extends AnyObject = AnyObject> {
+  curr: WithId<T> | null
+}
+export const MediaFeedContext = createContext<MediaFeedContextValue<any>>(
+  {} as MediaFeedContextValue<any>,
+)
+
+export const MediaFeedProvider = <T extends AnyObject = AnyObject>({
+  curr,
+  children,
+}: PropsWithChildren<{ curr: WithId<T> | null }>) => {
+  const contextData = useMemo(() => ({ curr }), [curr])
+  return <MediaFeedContext.Provider value={contextData}>{children}</MediaFeedContext.Provider>
+}
+export const useMediaFeed = <T extends AnyObject = AnyObject>() =>
+  useContext(MediaFeedContext) as MediaFeedContextValue<T>

package/src/components/feed/hooks.ts

@@ -0,0 +1,290 @@
+import { useToast } from '@chakra-ui/react'
+import { FetchFeedFunction } from '@chem-po/core'
+import { useAuth } from '@chem-po/react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { UpdatePanelsArgs } from './types'
+
+const DEFAULT_LIMIT = 10
+export const useMediaFeed = (
+  fetch: FetchFeedFunction,
+  onUpdatePanels: (items: UpdatePanelsArgs) => void,
+  limit: number = DEFAULT_LIMIT,
+  authRequired = false,
+) => {
+  // first element is prev ids, second element is curr ids, third element is next ids
+  const [ids, setIds] = useState<[string[] | null, string[] | null, string[] | null]>([
+    null,
+    null,
+    null,
+  ])
+  const [idIdx, setIdIdx] = useState<number>(0)
+  const user = useAuth(s => s.user)
+
+  const [loading, setLoading] = useState(false)
+  const [refreshing, setRefreshing] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [itemLoading, setItemLoading] = useState(false)
+  const [direction, setDirection] = useState<'next' | 'prev' | null>(null)
+
+  const toast = useToast()
+
+  const fetchingId = useRef<string | null>(null)
+
+  const idsRef = useRef<{ prev: string | null; curr: string | null; next: string | null }>({
+    prev: null,
+    curr: null,
+    next: null,
+  })
+
+  const updateCurr = useCallback(
+    (id: string | null) => {
+      if (id) {
+        if (idsRef.current.prev === id) {
+          idsRef.current.prev = null
+        }
+        if (idsRef.current.next === id) {
+          idsRef.current.next = null
+        }
+      }
+      idsRef.current.curr = id
+      onUpdatePanels({ ...idsRef.current })
+    },
+    [onUpdatePanels],
+  )
+
+  const updateNext = useCallback(
+    (id: string | null) => {
+      if (id) {
+        if (idsRef.current.prev === id) {
+          idsRef.current.prev = null
+        }
+        if (idsRef.current.curr === id) {
+          idsRef.current.curr = null
+        }
+      }
+      idsRef.current.next = id
+      onUpdatePanels({ ...idsRef.current })
+    },
+    [onUpdatePanels],
+  )
+
+  const updatePrev = useCallback(
+    (id: string | null) => {
+      if (id) {
+        if (idsRef.current.curr === id) {
+          idsRef.current.curr = null
+        }
+        if (idsRef.current.next === id) {
+          idsRef.current.next = null
+        }
+      }
+      idsRef.current.prev = id
+      onUpdatePanels({ ...idsRef.current })
+    },
+    [onUpdatePanels],
+  )
+
+  const fetchIds = useCallback(
+    async (
+      startBefore: string | null,
+      startAfter: string | null,
+      isPrefetch: boolean,
+    ): Promise<string[]> => {
+      if (!user && authRequired) return []
+      if (!isPrefetch) setLoading(true)
+
+      try {
+        const data = await fetch({ limit, startAfter, startBefore })
+        if (!isPrefetch) {
+          const firstId = data.ids[0]
+          const secondId = data.ids[1] || null
+          updateCurr(firstId)
+          updateNext(secondId)
+          updatePrev(startAfter)
+          if (startAfter) {
+            setIds(s => [s[1], data.ids, null])
+          } else if (startBefore) {
+            setIds(s => [null, data.ids, s[1]])
+          } else {
+            setIds([null, data.ids, null])
+          }
+          const newLastId = data.ids[data.ids.length - 1]
+          if (newLastId) {
+            fetchIds(null, newLastId, true)
+          }
+        } else if (startAfter) {
+          setIds(s => [s[0], s[1], data.ids])
+        } else if (startBefore) {
+          setIds(s => [data.ids, s[1], s[2]])
+        }
+        setLoading(false)
+        return data.ids || []
+      } catch (err: any) {
+        setError(err.message)
+        toast({
+          title: 'Error fetching feed',
+          description: err.message,
+          status: 'error',
+          duration: 9000,
+          isClosable: true,
+        })
+      }
+      setLoading(false)
+      return []
+    },
+    [fetch, toast, user, authRequired, updateCurr, updateNext, updatePrev, limit],
+  )
+
+  // handles prefetching of next items
+  const getNextId = useCallback(
+    async (currIdx: number, isPrefetch: boolean): Promise<{ id: string; idx: number } | null> => {
+      const currIds = ids[1] ?? []
+      const nextIds = ids[2] ?? []
+      const nextIdx = currIdx + 1
+      if (nextIdx < currIds.length) {
+        return { id: currIds[nextIdx], idx: nextIdx }
+      }
+      if (nextIds[0]) {
+        const newLastId = nextIds[nextIds.length - 1]
+        if (!isPrefetch) {
+          setIds(s => [s[1], s[2], null])
+          fetchIds(null, newLastId, true)
+        }
+        return { id: nextIds[0], idx: 0 }
+      }
+      const fetchedNextIds = await fetchIds(null, currIds[currIds.length - 1], isPrefetch)
+      const fetchedNextId = fetchedNextIds[0]
+      return fetchedNextId ? { id: fetchedNextId, idx: 0 } : null
+    },
+    [ids, fetchIds],
+  )
+
+  const getPrevId = useCallback(
+    async (currIdx: number, isPrefetch: boolean): Promise<{ id: string; idx: number } | null> => {
+      const currIds = ids[1] ?? []
+      const prevIds = ids[0] ?? []
+      const prevIdx = currIdx - 1
+      if (prevIdx >= 0) {
+        return { id: currIds[prevIdx], idx: prevIdx }
+      }
+      if (prevIds[prevIds.length - 1]) {
+        const newFirstId = prevIds[0]
+        if (!isPrefetch) {
+          setIds([null, ids[0], ids[1]])
+          fetchIds(newFirstId, null, true)
+        }
+        return { id: prevIds[prevIds.length - 1], idx: prevIds.length - 1 }
+      }
+      const fetchedPrevIds = await fetchIds(currIds[0], null, isPrefetch)
+      const fetchedPrevId = fetchedPrevIds[fetchedPrevIds.length - 1]
+      return fetchedPrevId ? { id: fetchedPrevId, idx: fetchedPrevIds.length - 1 } : null
+    },
+    [ids, fetchIds],
+  )
+
+  const goNext = useCallback(async () => {
+    if (itemLoading) return
+    // case 1: next item ID is fetched
+    const newPrev = idsRef.current.curr
+
+    setItemLoading(true)
+    const nextIdData = await getNextId(idIdx, false)
+    setDirection('next')
+    if (nextIdData) {
+      const { id: nextId, idx: nextIdx } = nextIdData
+      fetchingId.current = nextId
+      setIdIdx(nextIdx)
+      updateCurr(nextId)
+      updateNext(null)
+      updatePrev(newPrev)
+      getNextId(nextIdx, true).then(newNextId => updateNext(newNextId?.id ?? null))
+    } else {
+      toast({
+        title: 'No more items',
+        status: 'info',
+        duration: 3000,
+        isClosable: true,
+      })
+    }
+    setItemLoading(false)
+  }, [idIdx, getNextId, updateCurr, updateNext, updatePrev, toast, itemLoading])
+
+  const goPrev = useCallback(async () => {
+    if (itemLoading) return
+    // case 1: next item ID is fetched
+    const newNext = idsRef.current.curr
+
+    setDirection('prev')
+    setItemLoading(true)
+    const prevIdData = await getPrevId(idIdx, false)
+    if (prevIdData) {
+      const { id: prevId, idx: prevIdx } = prevIdData
+      fetchingId.current = prevId
+      setIdIdx(prevIdx)
+      updateCurr(prevId)
+      updatePrev(null)
+      updateNext(newNext)
+      getPrevId(prevIdx, true).then(newPrevId => updatePrev(newPrevId?.id ?? null))
+    } else {
+      toast({
+        title: 'No more items',
+        status: 'info',
+        duration: 3000,
+        isClosable: true,
+      })
+    }
+    setItemLoading(false)
+  }, [idIdx, getPrevId, updateCurr, updateNext, updatePrev, toast, itemLoading])
+
+  const refresh = useCallback(async () => {
+    setLoading(true)
+    setRefreshing(true)
+    setIds([null, null, null])
+    updateCurr(null)
+    updateNext(null)
+    updatePrev(null)
+    setDirection(null)
+    setIdIdx(0)
+    await fetchIds(null, null, false)
+    setRefreshing(false)
+  }, [fetchIds, updateCurr, updateNext, updatePrev])
+
+  const [initFetchIds] = useState(() => fetchIds)
+  useEffect(() => {
+    initFetchIds(null, null, false)
+  }, [initFetchIds])
+
+  const canGoPrev = useMemo(() => (idIdx > 0 && !!ids[1]?.length) || !!ids[0]?.length, [ids, idIdx])
+  const canGoNext = useMemo(
+    () => (ids[1] && idIdx < ids[1].length) ?? !!ids[2]?.length,
+    [ids, idIdx],
+  )
+  return useMemo(
+    () => ({
+      ids,
+      goNext,
+      goPrev,
+      error,
+      refresh,
+      refreshing,
+      loading,
+      canGoNext,
+      direction,
+      canGoPrev,
+      itemLoading,
+    }),
+    [
+      ids,
+      goNext,
+      goPrev,
+      loading,
+      error,
+      itemLoading,
+      canGoNext,
+      canGoPrev,
+      refresh,
+      refreshing,
+      direction,
+    ],
+  )
+}

package/src/components/feed/index.ts

@@ -0,0 +1,2 @@
+export { useMediaFeed } from './context'
+export * from './MediaFeed'

package/src/components/feed/types.ts

@@ -0,0 +1,50 @@
+import { AnyObject, FetchFeedFunction, FileValue, WithId } from '@chem-po/core'
+import { JSX } from 'react'
+
+export type GetBackgroundUrl<T extends AnyObject = AnyObject> = (
+  item: T,
+) => string | null | undefined
+export type GetBackgroundValue<T extends AnyObject = AnyObject> = (
+  item: T,
+) => FileValue | null | undefined
+export interface MediaFeedProps<T extends AnyObject = AnyObject> {
+  collection: string
+  fetch: FetchFeedFunction
+  authRequired?: boolean
+  limit?: number
+  // onSwipeUp?: () => void
+  swipeDisabled?: boolean
+  defaultBackground?: string
+  getBackgroundUrl?: GetBackgroundUrl<T>
+  getBackgroundValue?: GetBackgroundValue<T>
+  RenderItem: (item: WithId<T>) => JSX.Element
+}
+
+export type UseMediaFeedProps = Pick<MediaFeedProps, 'collection' | 'fetch'>
+
+export interface UseMediaFeed<T extends AnyObject = AnyObject> {
+  ids: string[][]
+  goNext: () => void
+  goPrev: () => void
+  error: string | null
+  loading: boolean
+  itemLoading: boolean
+  currItem: WithId<T> | null
+}
+export type SwipeDirection = 'next' | 'prev'
+export interface UpdatePanelsArgs {
+  prev: string | null
+  curr: string | null
+  next: string | null
+}
+
+export type PanelStatus = 'current' | 'next' | 'prev'
+
+export interface MediaBackgroundRef<T extends AnyObject> {
+  onNewData: (data: WithId<T> | null) => void
+}
+export interface PanelData {
+  id: string
+  status: PanelStatus
+  prevStatus?: PanelStatus
+}

package/src/components/form/Condition.tsx

@@ -0,0 +1,26 @@
+import { PropsWithChildren, useMemo } from 'react'
+import { useWatch } from 'react-hook-form'
+import { ExpandOnMount } from '../box'
+
+export const Condition = ({
+  path,
+  condition,
+  children,
+}: PropsWithChildren<{
+  path: string
+  condition: (values: any) => boolean
+}>) => {
+  // const { register } = useFormContext()
+  // const {
+  //   input: { value },
+  // } = useField(path ?? '', { subscription: { value: true } })
+  const value = useWatch({ exact: true, name: path })
+  const isVisible = useMemo(() => condition(value), [value, condition])
+
+  if (!isVisible) return null
+  return (
+    <ExpandOnMount py="3px" animateOpacity in>
+      {children}
+    </ExpandOnMount>
+  )
+}

package/src/components/form/Field.tsx

@@ -0,0 +1,39 @@
+import { InputRef } from '@chem-po/core'
+import { ForwardedRef, forwardRef } from 'react'
+
+import { Field, useField } from '@chem-po/react'
+import { ChangeHandler, Controller } from 'react-hook-form'
+import { Input } from './input/input'
+
+const FieldComponentBase = (
+  { field, name }: { field: Field; name: string },
+  ref: ForwardedRef<InputRef>,
+) => {
+  const { control, getOnChange, meta, onFocus, onBlur: fieldBlur } = useField(name, field)
+  return (
+    <Controller<Field['defaultValue']>
+      control={control}
+      name={name}
+      render={({ field: { name: _, ref: _r, onBlur, ...inputProps } }) => {
+        return (
+          <Input
+            ref={ref}
+            field={field}
+            input={{
+              ...inputProps,
+              onFocus,
+              onBlur: () => {
+                fieldBlur()
+                onBlur()
+              },
+              onChange: getOnChange(inputProps.onChange as ChangeHandler),
+            }}
+            meta={meta}
+          />
+        )
+      }}
+    />
+  )
+}
+
+export const FieldComponent = forwardRef(FieldComponentBase)