@chem-po/react-native 0.0.52 → 0.0.53

package/src/components/button/ButtonText.tsx

@@ -1,60 +0,0 @@
-import { ElementSize } from '@chem-po/core'
-import React from 'react'
-import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native'
-import { useButtonColors, useButtonFont, useButtonTextColor } from './hooks'
-
-export interface ButtonTextProps {
-  children: string
-  style?: StyleProp<TextStyle>
-  variant?: 'outline' | 'solid'
-  color?: string
-  disabledColor?: string
-  disabled?: boolean
-  size?: ElementSize
-}
-
-export const ButtonText = ({
-  children,
-  style,
-  disabled = false,
-  size = 'md',
-  disabledColor,
-  color: colorProp,
-  variant = 'solid',
-}: ButtonTextProps) => {
-  const colors = useButtonColors(variant)
-  const fontStyle = useButtonFont(size)
-  const textColor = useButtonTextColor(colors, variant, colorProp, disabled, disabledColor)
-
-  return (
-    <Text
-      style={[
-        styles[size],
-        fontStyle,
-        variant === 'solid' ? styles.textShadow : {},
-        { color: textColor },
-        style,
-      ]}>
-      {children}
-    </Text>
-  )
-}
-const styles = StyleSheet.create({
-  lg: {
-    fontSize: 18,
-  },
-  md: {
-    fontSize: 16,
-  },
-  sm: {
-    fontSize: 14,
-  },
-  xs: {
-    fontSize: 12,
-  },
-  textShadow: {
-    textShadowColor: 'rgba(0, 0, 0, 0.25)',
-    textShadowOffset: { width: 1, height: 1 },
-    textShadowRadius: 3,
-  },
-})

package/src/components/button/DeleteButton.tsx

@@ -1,288 +0,0 @@
-import { useBackgroundColor, useColorModeValue, useToast } from '@chem-po/react'
-import { Ionicons } from '@expo/vector-icons'
-import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
-import { ActivityIndicator, StyleSheet, View } from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
-import { Modal, Portal } from 'react-native-paper'
-import { useFontScale } from '../../store/useFontScale'
-import { Txt } from '../text/Txt'
-import { ActionButton, ActionButtonProps } from './ActionButton'
-import { ButtonText } from './ButtonText'
-
-const defaultAlertBodyText = "Are you sure? You can't undo this action afterwards."
-
-export const DeleteConfirmAlert = ({
-  confirmActive,
-  onCancel,
-  onConfirm,
-  body = defaultAlertBodyText,
-  actionName = 'Delete',
-  actionLoading,
-  itemName,
-  color,
-  cancelText = 'CANCEL',
-}: {
-  confirmActive: boolean
-  onCancel: () => void
-  onConfirm: () => void
-  body?: string | ReactNode
-  actionLoading?: boolean
-  color: string
-  actionName?: string
-  cancelText?: string
-  itemName: string
-}) => {
-  const backgroundColor = useBackgroundColor(100)
-  const fontScale = useFontScale(s => s.fontScale)
-  return (
-    <Portal>
-      <Modal style={styles.modal} visible={confirmActive} onDismiss={onCancel}>
-        <View style={[styles.alertContainer, { backgroundColor, maxWidth: 300 * fontScale }]}>
-          <Txt style={styles.alertTitle}>
-            {actionName} {itemName}?
-          </Txt>
-          {typeof body === 'string' ? <Txt style={styles.alertBody}>{body}</Txt> : body}
-          <View style={styles.buttonContainer}>
-            <Pressable style={styles.cancelButton} onPress={onCancel}>
-              <Txt style={styles.cancelText}>{cancelText}</Txt>
-            </Pressable>
-            <Pressable
-              style={[styles.confirmButton, { backgroundColor: color }]}
-              onPress={onConfirm}
-              disabled={actionLoading}>
-              {actionLoading ? (
-                <ActivityIndicator size={20 * fontScale} color="#fff" />
-              ) : (
-                <Txt style={[styles.buttonText, styles.confirmButtonText]}>
-                  {actionName.toUpperCase()}
-                </Txt>
-              )}
-            </Pressable>
-          </View>
-        </View>
-      </Modal>
-    </Portal>
-  )
-}
-
-export interface DeleteButtonProps extends Omit<ActionButtonProps, 'onPress' | 'loading'> {
-  onDelete: (() => Promise<any>) | (() => void)
-  itemName: string
-  actionName?: string
-  noConfirm?: boolean
-  text?: string
-  alertBody?: string | ReactNode
-  iconSize?: number
-  iconProps?: React.ComponentProps<typeof Ionicons>
-}
-export const DeleteButton: React.FC<DeleteButtonProps> = ({
-  onDelete,
-  itemName,
-  noConfirm,
-  alertBody,
-  text,
-  actionName = 'Delete',
-  style,
-  color: colorProp,
-  variant = 'outline',
-  iconSize = 18,
-  iconProps,
-  ...buttonProps
-}) => {
-  const { size, disabledColor, textStyle } = buttonProps
-  const { showError } = useToast()
-  const [deleteLoading, setDeleteLoading] = useState(false)
-  const [confirmActive, setConfirmActive] = useState(false)
-  const confirmTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const isMounted = useRef(true)
-  const defaultColor = useColorModeValue('#dd4444', '#ff4444')
-  const color = colorProp ?? defaultColor
-  const fontScale = useFontScale(s => s.fontScale)
-  useEffect(() => {
-    isMounted.current = true
-
-    return () => {
-      isMounted.current = false
-    }
-  }, [])
-
-  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)
-        showError(err.message ?? 'An error occurred')
-      }
-      if (isMounted.current) {
-        setDeleteLoading(false)
-      }
-    } else {
-      console.error('No delete function')
-    }
-  }, [onDelete, showError])
-
-  return (
-    <>
-      <ActionButton
-        style={[
-          {
-            borderColor: color,
-            backgroundColor: variant === 'solid' ? color : 'transparent',
-            borderWidth: variant === 'outline' ? 1 : 0,
-          },
-          style,
-        ]}
-        variant={variant}
-        onPress={() => {
-          if (noConfirm) handleDelete()
-          else setConfirmActive(true)
-        }}
-        loading={deleteLoading}
-        disabled={deleteLoading}
-        {...buttonProps}>
-        <View style={styles.contentContainer}>
-          <Ionicons
-            name="trash"
-            size={iconSize * fontScale}
-            color={variant === 'solid' ? 'white' : color}
-            {...iconProps}
-            style={[variant === 'solid' ? styles.shadow : {}, iconProps?.style]}
-          />
-          {text ? (
-            <ButtonText
-              variant={variant}
-              color={color}
-              disabledColor={disabledColor}
-              size={size}
-              style={textStyle}>
-              {text}
-            </ButtonText>
-          ) : null}
-        </View>
-      </ActionButton>
-      {noConfirm ? null : (
-        <DeleteConfirmAlert
-          confirmActive={confirmActive}
-          onCancel={() => setConfirmActive(false)}
-          actionLoading={deleteLoading}
-          onConfirm={() => {
-            handleDelete()
-          }}
-          actionName={actionName}
-          body={alertBody}
-          itemName={itemName}
-          color={color}
-        />
-      )}
-    </>
-  )
-}
-
-const styles = StyleSheet.create({
-  alertContainer: {
-    backgroundColor: 'white',
-    borderRadius: 10,
-    padding: 20,
-    maxWidth: 300,
-    alignItems: 'center',
-  },
-  modal: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  alertTitle: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 10,
-  },
-  alertBody: {
-    fontSize: 16,
-    marginBottom: 20,
-    textAlign: 'center',
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-  },
-  cancelButton: {
-    padding: 10,
-    borderColor: 'gray',
-    borderWidth: 1,
-    borderRadius: 5,
-    flex: 1,
-    marginRight: 5,
-    alignItems: 'center',
-  },
-  cancelText: {
-    color: 'gray',
-    fontWeight: 'bold',
-  },
-  confirmButton: {
-    padding: 10,
-    backgroundColor: 'red',
-    borderRadius: 5,
-    flex: 1,
-    marginLeft: 5,
-    alignItems: 'center',
-  },
-  buttonText: {
-    fontWeight: 'bold',
-  },
-  confirmButtonText: {
-    color: 'white',
-    textShadowColor: 'rgba(0, 0, 0, 0.5)',
-    textShadowOffset: { width: 1, height: 1 },
-    textShadowRadius: 3,
-  },
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderRadius: 4,
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 4,
-  },
-  loaderContainer: {
-    ...StyleSheet.absoluteFillObject,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  shadow: {
-    textShadowColor: 'rgba(0, 0, 0, 0.3)',
-    textShadowOffset: { width: 1, height: 1 },
-    textShadowRadius: 4,
-  },
-  iconButton: {
-    backgroundColor: 'transparent',
-    borderRadius: 4,
-    width: 32,
-    height: 32,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  iconButtonContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 3,
-  },
-  loading: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: 24,
-    width: 24,
-  },
-})

package/src/components/button/LoadingButton.tsx

@@ -1,41 +0,0 @@
-import { useToast } from '@chem-po/react'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { ActionButton, ActionButtonProps } from './ActionButton'
-
-export interface LoadingButtonProps<ReturnType = any> extends Omit<
-  ActionButtonProps,
-  'onPress' | 'loading'
-> {
-  onPress: () => Promise<ReturnType>
-}
-
-export const LoadingButton: React.FC<LoadingButtonProps> = ({ onPress, ...props }) => {
-  const [loading, setLoading] = useState(false)
-  const { showError } = useToast()
-
-  const isMounted = useRef(true)
-  useEffect(() => {
-    isMounted.current = true
-
-    return () => {
-      isMounted.current = false
-    }
-  }, [])
-
-  const handlePress = useCallback(async () => {
-    if (onPress) {
-      setLoading(true)
-      try {
-        await onPress()
-      } catch (err: any) {
-        console.error(err)
-        showError(err.message ?? 'An error occurred')
-      }
-      if (isMounted.current) {
-        setLoading(false)
-      }
-    }
-  }, [onPress, showError])
-
-  return <ActionButton onPress={() => void handlePress()} loading={loading} {...props} />
-}

package/src/components/button/Toggle.tsx

@@ -1,109 +0,0 @@
-import { useBackgroundColor, useBorderColor, useThemeValue, useToast } from '@chem-po/react'
-import React, { JSX, useCallback, useMemo } from 'react'
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
-
-export interface ToggleOption<Option extends string = string> {
-  id: Option
-  disabledMessage?: string
-  Render: (selected: boolean) => JSX.Element
-}
-
-export interface ToggleProps<Option extends string> {
-  options: ToggleOption<Option>[]
-  value: Option
-  size?: number | [number, number]
-  onChange: (value: Option) => Promise<void> | void
-  style?: StyleProp<ViewStyle>
-  buttonStyle?: StyleProp<ViewStyle>
-}
-
-const ToggleButton = <Option extends string>({
-  selected,
-  option: { Render, disabledMessage },
-  size,
-  onPress,
-  style,
-}: {
-  option: ToggleOption<Option>
-  size: number | [number, number]
-  selected: boolean
-  onPress: () => void
-  style?: StyleProp<ViewStyle>
-}) => {
-  const { showError } = useToast()
-  const handlePress = useCallback(() => {
-    if (!disabledMessage) {
-      onPress()
-    } else {
-      showError(disabledMessage)
-    }
-  }, [onPress, disabledMessage, showError])
-  const unselectedBackground = useBackgroundColor(150)
-  const selectedBackground = useThemeValue('colors.accent.300')
-  const [width, height] = useMemo(() => (typeof size === 'number' ? [size, size] : size), [size])
-  const body = (
-    <View style={[styles.buttonContainer, { width, height, opacity: !disabledMessage ? 1 : 0.6 }]}>
-      <Pressable
-        style={[
-          styles.button,
-          {
-            backgroundColor: selected ? selectedBackground : unselectedBackground,
-            pointerEvents: selected ? 'none' : 'auto',
-          },
-          style,
-        ]}
-        onPress={handlePress}
-        disabled={!!disabledMessage}>
-        {Render(selected)}
-      </Pressable>
-    </View>
-  )
-
-  return body
-}
-
-export const Toggle = <Option extends string>({
-  value,
-  onChange,
-  size = 28,
-  options,
-  style,
-  buttonStyle,
-}: ToggleProps<Option>) => {
-  const borderColor = useBorderColor()
-  const backgroundColor = useBackgroundColor(150)
-  return (
-    <View style={[styles.container, { borderColor, backgroundColor }, style]}>
-      {options.map(option => (
-        <ToggleButton<Option>
-          key={option.id}
-          onPress={() => {
-            onChange(option.id)
-          }}
-          option={option}
-          size={size}
-          selected={option.id === value}
-          style={buttonStyle}
-        />
-      ))}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    borderWidth: 1,
-    borderRadius: 3,
-  },
-  buttonContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  button: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 3,
-  },
-})

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>
-  )
-}