@chem-po/react-native 0.0.51 → 0.0.53

package/src/components/button/hooks.ts

@@ -1,66 +0,0 @@
-import { ButtonColors } from '@chem-po/core'
-import { useTheme } from '@chem-po/react'
-import { useMemo } from 'react'
-import { useFont } from '../../hooks/useFont'
-
-export const useButtonFont = (size: 'lg' | 'md' | 'sm' | 'xs') => {
-  const fontSize = useMemo(() => (size === 'xs' ? 'sm' : size), [size])
-  const font = useFont('display', fontSize)
-  return font
-}
-
-export const useButtonColors = (variant: 'solid' | 'outline') => {
-  const { buttons } = useTheme()
-  return useMemo(() => buttons[variant], [buttons, variant])
-}
-
-export const useButtonTextColor = (
-  colors: ButtonColors,
-  variant: 'solid' | 'outline',
-  buttonColor: string | undefined,
-  disabled: boolean,
-  disabledColor: string | undefined,
-) => {
-  return useMemo(() => {
-    if (disabled) {
-      if (disabledColor && variant === 'outline') return disabledColor
-      return colors.disabled.text
-    }
-    if (buttonColor && variant === 'outline') return buttonColor
-    return colors.text
-  }, [variant, buttonColor, disabledColor, disabled, colors])
-}
-
-export const useButtonBackgroundColor = (
-  colors: ButtonColors,
-  variant: 'solid' | 'outline',
-  buttonColor: string | undefined,
-  disabled: boolean,
-  disabledColor: string | undefined,
-) => {
-  return useMemo(() => {
-    if (disabled) {
-      if (disabledColor && variant === 'solid') return disabledColor
-      return colors.disabled.background
-    }
-    if (buttonColor && variant === 'solid') return buttonColor
-    return colors.background
-  }, [variant, buttonColor, disabledColor, disabled, colors])
-}
-
-export const useButtonBorderColor = (
-  colors: ButtonColors,
-  variant: 'solid' | 'outline',
-  buttonColor: string | undefined,
-  disabled: boolean,
-  disabledColor: string | undefined,
-) => {
-  return useMemo(() => {
-    if (disabled) {
-      if (disabledColor && variant === 'outline') return disabledColor
-      return colors.disabled.border
-    }
-    if (buttonColor && variant === 'outline') return buttonColor
-    return colors.border
-  }, [variant, buttonColor, disabledColor, disabled, colors])
-}

package/src/components/button/index.ts

@@ -1,5 +0,0 @@
-export * from './ActionButton'
-export * from './ButtonText'
-export * from './DeleteButton'
-export * from './LoadingButton'
-export * from './Toggle'

package/src/components/feed/FeedContentPane.tsx

@@ -1,97 +0,0 @@
-import { AnyObject, WithId } from '@chem-po/core'
-import { PanelStatus, useDocument, useScreen } from '@chem-po/react'
-import React, { JSX, useEffect, useMemo, useRef } from 'react'
-// import { motion, MotionValue, useMotionValue, useSpring, useTransform } from 'framer-motion'
-import { Animated } from 'react-native'
-
-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: Animated.Value
-}
-
-export const FeedContentPane = <T extends AnyObject = AnyObject>({
-  id,
-  collectionPath,
-  onItemLoad,
-  RenderItem,
-  status,
-  offsetY,
-  enterStatus,
-}: FeedContentPaneProps<T>) => {
-  const { height, width } = useScreen()
-  const contentSize = useMemo(() => ({ height, width }), [height, width])
-  const scale = useRef(new Animated.Value(0)).current
-  const baseY = useRef(new Animated.Value(getContentY(enterStatus ?? 'next', contentSize))).current
-  const y = Animated.add(baseY, offsetY)
-
-  const docPath = useMemo(() => `${collectionPath}/${id}`, [collectionPath, id])
-  const { data: item } = useDocument<T>(docPath, onItemLoad)
-
-  // const init = useRef<{
-  //   status: PanelStatus
-  //   contentSize: Size
-  //   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 updatedY = getContentY(status, contentSize)
-    baseY.setValue(updatedY)
-    scale.setValue(newScale)
-    // baseY.set(updatedY)
-    // scale.set(newScale)
-  }, [status, baseY, scale, contentSize])
-
-  return (
-    // <AnimatePresence>
-    <Animated.View
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        transform: [{ translateY: y }, { scale }],
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100%',
-        opacity: scale,
-        width: '100%',
-      }}>
-      {item ? RenderItem(item) : null}
-    </Animated.View>
-    // </AnimatePresence>
-  )
-}

package/src/components/feed/MediaFeed.tsx

@@ -1,199 +0,0 @@
-import { AnyObject, WithId } from '@chem-po/core'
-import {
-  MediaBackgroundRef,
-  MediaFeedProps,
-  PanelData,
-  UpdatePanelsArgs,
-  useScreen,
-  useTheme,
-} from '@chem-po/react'
-import React, { Dispatch, PropsWithChildren, useCallback, useMemo, useRef, useState } from 'react'
-import { Animated, StyleSheet, View, ViewStyle } from 'react-native'
-import {
-  Gesture,
-  GestureDetector,
-  GestureStateChangeEvent,
-  GestureUpdateEvent,
-  PanGestureHandlerEventPayload,
-} from 'react-native-gesture-handler'
-import { fill } from '../../styles/fill'
-import { Center } from '../box/Center'
-import { LoadingOverlay } from '../loading/LoadingOverlay'
-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'
-
-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 } = useScreen()
-  const { theme } = useTheme()
-
-  const contentRef = useRef<View>(null)
-  const containerRef = useRef<View>(null)
-  // const panels = useRef<Array<FeedContentPaneRef>>([])
-  const [direction, setDirection] = useState<'next' | 'prev' | null>(null)
-  const [panels, setPanels] = useState<Array<PanelData>>([])
-
-  const offsetY = useRef(new Animated.Value(0)).current
-  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: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
-      if (swipeDisabled) return
-      pointerDown.current = true
-      dragStart.current = { x: e.x, y: e.y }
-    },
-    [swipeDisabled],
-  )
-
-  const onDragEnd = useCallback(
-    (e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
-      if (!pointerDown.current) return
-
-      const maxY = canGoPrev ? SWIPE_THRESHOLD : REFRESH_THRESHOLD
-      const minY = canGoNext ? -SWIPE_THRESHOLD : -REFRESH_THRESHOLD
-      const oY = Math.max(minY, Math.min(maxY, e.y - dragStart.current.y))
-
-      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)
-      }
-
-      offsetY.setValue(0)
-      pointerDown.current = false
-    },
-    [offsetY, goNext, goPrev, canGoNext, canGoPrev, refresh],
-  )
-
-  const onDragMove = useCallback(
-    (e: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
-      if (!pointerDown.current) return
-
-      const oX = Math.max(-10, Math.min(10, e.x - 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.y - dragStart.current.y))
-
-      const dist = Math.sqrt(oX ** 2 + oY ** 2)
-      if (dist > 10 && contentRef.current) {
-        // contentRef.current.style.setProperty('pointer-events', 'none')
-      }
-      offsetY.setValue(oY)
-    },
-    [offsetY, canGoNext, canGoPrev],
-  )
-
-  const panGesture = Gesture.Pan().onStart(onDragStart).onUpdate(onDragMove).onEnd(onDragEnd)
-
-  const containerStyle = useMemo<ViewStyle>(
-    () => ({
-      height,
-      width,
-      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}>
-      <GestureDetector gesture={panGesture}>
-        <Center
-          style={[
-            styles.container,
-            { backgroundColor: defaultBackground ?? theme.colors.background[100] },
-          ]}>
-          <MediaFeedBackground
-            item={curr}
-            getBackgroundValue={getBackgroundValue}
-            getBackgroundUrl={getBackgroundUrl}
-          />
-          <View style={containerStyle} ref={containerRef}>
-            <Center style={fill.relative} ref={contentRef}>
-              {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>
-          </View>
-          <MediaFeedRefresh canRefresh={!canGoPrev} refreshing={refreshing} offsetY={offsetY} />
-          {/* {onSwipeUp ? <MediaFeedSwipeUp offsetY={offsetY} /> : null} */}
-          <LoadingOverlay loading={loading} />
-          {children ? <Center style={[fill.absolute, { zIndex: 3 }]}>{children}</Center> : null}
-        </Center>
-      </GestureDetector>
-    </MediaFeedProvider>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    ...fill.relative,
-    overflow: 'hidden',
-  },
-})

package/src/components/feed/MediaFeedBackground.tsx

@@ -1,136 +0,0 @@
-import { AnyObject, WithId } from '@chem-po/core'
-import { GetBackgroundUrl, GetBackgroundValue, useObjectUrl } from '@chem-po/react'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { ImageBackground, StyleSheet, View, ViewProps } from 'react-native'
-import { fill } from '../../styles/fill'
-import { Center } from '../box/Center'
-import { LoadingLogo } from '../loading'
-
-const emptyPng =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII='
-export const backgroundStyle = StyleSheet.create({
-  imageBackground: {
-    flex: 1,
-    transform: [{ scale: 1.075 }],
-  },
-})
-
-interface FillBackgroundProps extends ViewProps {
-  background: string | null
-  opacity?: number
-}
-
-const FillBackground: React.FC<FillBackgroundProps> = ({
-  background,
-  opacity = 0.7,
-  style,
-  ...props
-}) => (
-  <View style={[fill.absolute, style]} {...props}>
-    <ImageBackground
-      source={{ uri: background ?? emptyPng }}
-      style={[backgroundStyle.imageBackground, { opacity }]}
-      resizeMode="cover"></ImageBackground>
-  </View>
-)
-
-interface FileValueBackgroundProps<T extends AnyObject = AnyObject> {
-  getBackgroundValue: GetBackgroundValue<T>
-  item: WithId<T> | null
-  filter?: string
-}
-const FileValueBackground = <T extends AnyObject = AnyObject>({
-  getBackgroundValue,
-  item,
-}: 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 style={fill.absolute}>
-      <FillBackground opacity={index === 0 ? 1 : 0} background={url1} />
-      <FillBackground opacity={index === 1 ? 1 : 0} background={url2} />
-      <LoadingLogo isLoading={loading} />
-    </Center>
-  )
-}
-
-const UrlBackground = <T extends AnyObject = AnyObject>({
-  getBackgroundUrl,
-  item,
-}: {
-  getBackgroundUrl: GetBackgroundUrl<T>
-  item: T | null
-}) => {
-  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 style={fill.absolute}>
-      <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,113 +0,0 @@
-import Icon from '@expo/vector-icons/MaterialCommunityIcons' // or your preferred icon set
-import React, { useEffect, useRef } from 'react'
-import { Animated, StyleSheet, View } from 'react-native'
-import { DropShadow } from '../box/DropShadow'
-import { CircularProgress } from '../loading'
-import { REFRESH_THRESHOLD, SWIPE_THRESHOLD } from './constants'
-
-const WINDOW = REFRESH_THRESHOLD - SWIPE_THRESHOLD
-
-export const MediaFeedRefresh = ({
-  offsetY,
-  refreshing,
-  canRefresh,
-}: {
-  offsetY: Animated.Value
-  refreshing: boolean
-  canRefresh: boolean
-}) => {
-  // Create animated values
-  const baseY = useRef(new Animated.Value(0)).current
-  const isIn = useRef(new Animated.Value(0)).current
-
-  const dist = Animated.subtract(offsetY, SWIPE_THRESHOLD)
-  const baseProgress = Animated.divide(dist, WINDOW)
-  const progress = Animated.diffClamp(baseProgress, 0, 1)
-
-  // Handle refreshing state
-  useEffect(() => {
-    Animated.spring(baseY, {
-      toValue: refreshing ? 50 : 0,
-      useNativeDriver: true,
-    }).start()
-  }, [refreshing, baseY])
-
-  // Handle canRefresh state
-  useEffect(() => {
-    Animated.spring(isIn, {
-      toValue: canRefresh ? 1 : 0,
-      useNativeDriver: true,
-    }).start()
-  }, [canRefresh, isIn])
-
-  // Create complex animations
-  const progressRoot = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, Math.sqrt(1) * 20],
-  })
-
-  const yBase = Animated.add(baseY, progressRoot)
-  const yConstrained = yBase.interpolate({
-    inputRange: [0, 20],
-    outputRange: [0, 20],
-    extrapolate: 'clamp',
-  })
-
-  const y = Animated.multiply(isIn, yConstrained)
-
-  const scale = y.interpolate({
-    inputRange: [0, 30],
-    outputRange: [0, 1],
-    extrapolate: 'clamp',
-  })
-  const finalScale = Animated.multiply(isIn, scale)
-
-  const rotate = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '180deg'],
-  })
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        {
-          opacity: finalScale,
-          transform: [{ translateY: y }, { scale: finalScale }, { rotate }],
-        },
-      ]}>
-      <View style={styles.centerContainer}>
-        <DropShadow
-          style={[
-            {
-              opacity: refreshing ? 0 : 1,
-            },
-          ]}>
-          <Icon name="refresh" size={32} color="white" />
-        </DropShadow>
-
-        <DropShadow
-          style={{
-            opacity: refreshing ? 1 : 0,
-          }}>
-          <CircularProgress animating size="large" color="white" />
-        </DropShadow>
-      </View>
-    </Animated.View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    pointerEvents: 'none',
-  },
-  centerContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-  },
-})

package/src/components/feed/constants.ts

@@ -1,2 +0,0 @@
-export const SWIPE_THRESHOLD = 75
-export const REFRESH_THRESHOLD = 100

package/src/components/feed/context.tsx

@@ -1,19 +0,0 @@
-import { AnyObject, WithId } from '@chem-po/core'
-import React, { 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>