@chem-po/react-native 0.0.51 → 0.0.53

package/src/components/button/ActionButton.tsx

@@ -1,196 +0,0 @@
-import { ElementSize } from '@chem-po/core'
-import { Ionicons } from '@expo/vector-icons'
-import React, { PropsWithChildren, useMemo } from 'react'
-import { StyleProp, StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
-import { useFontScale } from '../../store/useFontScale'
-import { CircularProgressProps } from '../loading'
-import { WithLoadingOverlay } from '../loading/LoadingOverlay'
-import { ButtonText } from './ButtonText'
-import {
-  useButtonBackgroundColor,
-  useButtonBorderColor,
-  useButtonColors,
-  useButtonTextColor,
-} from './hooks'
-
-export interface ActionButtonProps extends PropsWithChildren {
-  icon?: {
-    name: React.ComponentProps<typeof Ionicons>['name']
-    size?: number
-  }
-  iconProps?: React.ComponentProps<typeof Ionicons>
-  style?: StyleProp<ViewStyle>
-  onPress: () => void
-  disabled?: boolean
-  textStyle?: StyleProp<TextStyle>
-  size?: ElementSize
-  color?: string
-  rippleColor?: string
-  variant?: 'outline' | 'solid'
-  disabledColor?: string
-  loading?: boolean
-}
-
-const getIndicatorSize = (size: ElementSize) => {
-  switch (size) {
-    case 'sm':
-      return 18
-    case 'md':
-      return 22
-    case 'lg':
-      return 26
-  }
-}
-
-const getContentGap = (size: ElementSize) => {
-  switch (size) {
-    case 'sm':
-      return 4
-    case 'lg':
-      return 8
-    default:
-      return 6
-  }
-}
-
-export const ActionButton = ({
-  children,
-  onPress,
-  style,
-  textStyle,
-  disabled = false,
-  loading,
-  size = 'md',
-  disabledColor,
-  color: colorProp,
-  icon,
-  iconProps,
-  variant = 'solid',
-  rippleColor: rippleColorProp,
-}: ActionButtonProps) => {
-  const colors = useButtonColors(variant)
-  const rippleColor = useMemo(
-    () => rippleColorProp ?? colors.ripple,
-    [rippleColorProp, colors.ripple],
-  )
-  const fontScale = useFontScale(s => s.fontScale)
-  const textColor = useButtonTextColor(colors, variant, colorProp, disabled, disabledColor)
-  const backgroundColor = useButtonBackgroundColor(
-    colors,
-    variant,
-    colorProp,
-    disabled,
-    disabledColor,
-  )
-  const borderColor = useButtonBorderColor(colors, variant, colorProp, disabled, disabledColor)
-  const indicatorProps = useMemo<CircularProgressProps>(() => {
-    return { color: textColor, size: getIndicatorSize(size) * fontScale }
-  }, [textColor, size, fontScale])
-
-  const body =
-    typeof children === 'string' ? (
-      <ButtonText
-        variant={variant}
-        color={colorProp}
-        disabledColor={disabledColor}
-        disabled={disabled}
-        size={size}
-        style={textStyle}>
-        {children}
-      </ButtonText>
-    ) : (
-      children
-    )
-
-  const content = (
-    <View style={[styles.content, { gap: getContentGap(size) }]}>
-      {icon ? (
-        <Ionicons
-          name={icon.name}
-          size={(icon.size ?? 20) * fontScale}
-          color={textColor}
-          {...iconProps}
-          style={[variant === 'solid' ? styles.iconShadow : {}, iconProps?.style]}
-        />
-      ) : null}
-      {body}
-    </View>
-  )
-
-  return (
-    <Pressable
-      style={[
-        containerStyles.base,
-        containerStyles[size],
-        variant === 'solid' ? styles.buttonShadow : { borderWidth: 1 },
-        { backgroundColor, borderColor },
-        style,
-      ]}
-      onPress={onPress}
-      android_ripple={{ color: rippleColor }}
-      disabled={disabled || loading}>
-      {loading !== undefined ? (
-        <WithLoadingOverlay loading={loading} indicatorProps={indicatorProps}>
-          {content}
-        </WithLoadingOverlay>
-      ) : (
-        content
-      )}
-    </Pressable>
-  )
-}
-
-export const RoundedButton = ({ style, ...props }: ActionButtonProps) => {
-  return <ActionButton style={[styles.rounded, style]} {...props} />
-}
-
-const styles = StyleSheet.create({
-  rounded: {
-    borderRadius: 100,
-  },
-  content: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  buttonShadow: {
-    shadowColor: '#000000',
-    shadowOffset: { width: 1, height: 1 },
-    shadowRadius: 6,
-    shadowOpacity: 0.25,
-    elevation: 2,
-  },
-  iconShadow: {
-    textShadowColor: 'rgba(0, 0, 0, 0.3)',
-    textShadowOffset: { width: 1, height: 1 },
-    textShadowRadius: 4,
-  },
-})
-
-const containerStyles = StyleSheet.create({
-  base: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  lg: {
-    paddingVertical: 10,
-    paddingHorizontal: 16,
-    borderRadius: 5,
-  },
-  md: {
-    paddingVertical: 6,
-    paddingHorizontal: 12,
-    borderRadius: 4,
-  },
-  sm: {
-    paddingVertical: 4,
-    paddingHorizontal: 8,
-    borderRadius: 3,
-  },
-  xs: {
-    paddingVertical: 4,
-    paddingHorizontal: 8,
-    borderRadius: 2,
-  },
-})

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