@chem-po/react-native 0.0.52 → 0.0.53

package/package.json

@@ -2,32 +2,17 @@
   "name": "@chem-po/react-native",
   "author": "Elan Canfield",
   "license": "MIT",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "source": "src/index.ts",
   "publishConfig": {
     "access": "public",
-    "react-native": "src/index.ts"
+    "react-native": "lib/module/index.js"
   },
   "sideEffects": false,
   "files": [
-    "src",
-    "lib",
-    "android",
-    "cpp",
-    "*.podspec",
-    "!lib/typescript/example",
-    "!ios/build",
-    "!android/build",
-    "!android/gradle",
-    "!android/gradlew",
-    "!android/gradlew.bat",
-    "!android/local.properties",
-    "!**/__tests__",
-    "!**/__fixtures__",
-    "!**/__mocks__",
-    "!**/.*"
+    "lib"
   ],
   "dependencies": {
     "@lottiefiles/dotlottie-react": "^0.13.5",
@@ -71,8 +56,8 @@
     "expo-file-system": "~19.0.0",
     "expo-image-picker": "~17.0.0",
     "expo-sharing": "~14.0.0",
-    "@chem-po/core": "0.0.52",
-    "@chem-po/react": "0.0.52"
+    "@chem-po/core": "0.0.53",
+    "@chem-po/react": "0.0.53"
   },
   "react-native-builder-bob": {
     "source": "src",

package/src/components/box/Center.tsx

@@ -1,19 +0,0 @@
-import React, { forwardRef } from 'react'
-import { Animated, StyleSheet, View, ViewProps } from 'react-native'
-
-export type CenterProps = ViewProps
-export const Center = forwardRef<View, CenterProps>(({ style, ...props }, ref) => {
-  return <View ref={ref} style={[styles.center, style]} {...props} />
-})
-
-export const AnimatedCenter = forwardRef<View, CenterProps>(({ style, ...props }, ref) => {
-  return <Animated.View ref={ref} style={[styles.center, style]} {...props} />
-})
-
-const styles = StyleSheet.create({
-  center: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-})

package/src/components/box/CollapseHorizontal.tsx

@@ -1,44 +0,0 @@
-import React, { useEffect, useMemo, useRef } from 'react'
-import { Animated, StyleProp, ViewStyle } from 'react-native'
-import { AnimatedCenter, CenterProps } from './Center'
-
-export const CollapseHorizontal = ({
-  width,
-  children,
-  active,
-  duration = 400,
-  style: styleProp,
-  ...props
-}: CenterProps & { width: number; active: boolean; duration?: number }) => {
-  const widthValue = useRef(new Animated.Value(active ? width : 0)).current
-  const opacityValue = useRef(new Animated.Value(active ? 1 : 0)).current
-
-  useEffect(() => {
-    Animated.parallel([
-      Animated.timing(widthValue, {
-        toValue: active ? width : 0,
-        duration,
-        useNativeDriver: false,
-      }),
-      Animated.timing(opacityValue, {
-        toValue: active ? 1 : 0,
-        duration,
-        useNativeDriver: true,
-      }),
-    ]).start()
-  }, [active, widthValue, opacityValue, width, duration])
-
-  const style: StyleProp<ViewStyle> = useMemo(() => {
-    return {
-      width: widthValue,
-      opacity: opacityValue,
-      overflow: 'hidden',
-    }
-  }, [widthValue, opacityValue])
-
-  return (
-    <AnimatedCenter style={[style, styleProp]} {...props}>
-      {children}
-    </AnimatedCenter>
-  )
-}

package/src/components/box/ContentBox.tsx

@@ -1,24 +0,0 @@
-import React, { forwardRef } from 'react'
-import { StyleSheet, View, ViewProps } from 'react-native'
-
-const ContentBoxBase = (props: ViewProps, ref: any) => {
-  return <View ref={ref} style={[styles.container, props.style]} {...props} />
-}
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: '#FFFFFF',
-    padding: 12,
-    borderRadius: 6,
-    shadowColor: '#000000',
-    shadowOffset: {
-      width: 1,
-      height: 1,
-    },
-    shadowOpacity: 0.4,
-    shadowRadius: 4,
-    elevation: 4,
-  },
-})
-
-export const ContentBox = forwardRef<View, ViewProps>(ContentBoxBase)

package/src/components/box/DropShadow.tsx

@@ -1,28 +0,0 @@
-import React, { PropsWithChildren } from 'react'
-import { Platform, StyleProp, View, ViewStyle } from 'react-native'
-
-// Method 1: Wrapping in a View
-export const DropShadow = ({
-  children,
-  style,
-}: PropsWithChildren<{ style: StyleProp<ViewStyle> }>) => (
-  <View
-    style={[
-      {
-        ...Platform.select({
-          ios: {
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.25,
-            shadowRadius: 3.84,
-          },
-          android: {
-            elevation: 5,
-          },
-        }),
-      },
-      style,
-    ]}>
-    {children}
-  </View>
-)

package/src/components/box/ExpandOnMount.tsx

@@ -1,74 +0,0 @@
-import React, { FC, useEffect, useMemo, useRef, useState } from 'react'
-import { Animated, View, ViewProps } from 'react-native'
-
-export const ExpandOnMount: FC<
-  ViewProps & { in?: boolean; animateOpacity?: boolean; duration?: number; onExited?: () => void }
-> = ({ animateOpacity, duration = 300, children, in: isIn = true, onExited, style, ...props }) => {
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  const [bodyHeight, setBodyHeight] = useState<number>(0)
-  const bodyRef = useRef<View>(null)
-
-  const expanded = useMemo(() => mounted && isIn, [isIn, mounted])
-
-  const heightAnim = useRef(new Animated.Value(0)).current
-  const opacityAnim = useRef(new Animated.Value(0)).current
-
-  useEffect(() => {
-    if (bodyRef.current) {
-      bodyRef.current.measure((x, y, width, height) => {
-        setBodyHeight(height)
-      })
-    }
-  }, [children])
-
-  useEffect(() => {
-    const animations = [
-      Animated.timing(heightAnim, {
-        toValue: expanded ? bodyHeight : 0,
-        duration,
-        useNativeDriver: false,
-      }),
-    ]
-
-    if (animateOpacity) {
-      animations.push(
-        Animated.timing(opacityAnim, {
-          toValue: expanded ? 1 : 0,
-          duration,
-          delay: expanded ? duration : 0,
-          useNativeDriver: true,
-        }),
-      )
-    }
-
-    Animated.parallel(animations).start(() => {
-      if (!expanded && onExited) {
-        onExited()
-      }
-    })
-  }, [expanded, bodyHeight, duration, heightAnim, opacityAnim, animateOpacity, onExited])
-
-  return (
-    <Animated.View
-      style={[
-        {
-          overflow: 'hidden',
-          width: '100%',
-          height: heightAnim,
-        },
-        style,
-      ]}
-      {...props}>
-      <View
-        ref={bodyRef}
-        style={[{ width: '100%' }, animateOpacity && { opacity: opacityAnim }, style]}
-        {...props}>
-        {children}
-      </View>
-    </Animated.View>
-  )
-}

package/src/components/box/Expandable.tsx

@@ -1,143 +0,0 @@
-import React, { FC, PropsWithChildren, useCallback, useEffect, useRef } from 'react'
-import { Animated, Pressable, StyleSheet, View, ViewStyle } from 'react-native'
-import { Txt } from '../text/Txt'
-import { AnimatedCenter } from './Center'
-type ExpandableProps = PropsWithChildren<{
-  header: string | FC<{ isOpen: boolean; onClose: () => void }>
-  footer?: FC<{ isOpen: boolean; onClose: () => void }>
-  nested?: boolean
-  alwaysExpanded?: boolean
-  initExpanded?: boolean
-  isOpen?: boolean
-  onClose?: () => void
-  iconColor?: string
-  onOpen?: () => void
-  style?: ViewStyle
-}>
-
-export const Expandable = ({
-  header: Header,
-  children,
-  initExpanded = false,
-  nested,
-  alwaysExpanded,
-  iconColor = '#000',
-  footer: Footer,
-  isOpen: isOpenProp,
-  onClose: onCloseProp,
-  onOpen: onOpenProp,
-  style,
-}: ExpandableProps) => {
-  const [isOpen, setIsOpen] = React.useState(alwaysExpanded ?? initExpanded)
-  const heightAnim = useRef(new Animated.Value(0)).current
-  const rotateAnim = useRef(new Animated.Value(0)).current
-
-  useEffect(() => {
-    if (typeof isOpenProp !== 'undefined') {
-      setIsOpen(isOpenProp)
-    }
-  }, [isOpenProp])
-
-  const onClose = useCallback(() => {
-    setIsOpen(false)
-    onCloseProp?.()
-  }, [onCloseProp])
-
-  const onOpen = useCallback(() => {
-    setIsOpen(true)
-    onOpenProp?.()
-  }, [onOpenProp])
-
-  const handleOpenClick = useCallback(() => {
-    if (alwaysExpanded) return
-    if (isOpen) {
-      onClose()
-    } else {
-      onOpen()
-    }
-  }, [alwaysExpanded, onOpen, onClose, isOpen])
-
-  useEffect(() => {
-    Animated.parallel([
-      Animated.timing(heightAnim, {
-        toValue: isOpen ? 1 : 0,
-        duration: 300,
-        useNativeDriver: false,
-      }),
-      Animated.timing(rotateAnim, {
-        toValue: isOpen ? 1 : 0,
-        duration: 300,
-        useNativeDriver: true,
-      }),
-    ]).start()
-  }, [isOpen, heightAnim, rotateAnim])
-
-  const rotate = rotateAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '180deg'],
-  })
-
-  return (
-    <View style={[styles.container, style]}>
-      <Pressable onPress={handleOpenClick} style={styles.header}>
-        <View style={styles.headerContent}>
-          {typeof Header === 'string' ? (
-            <Txt style={styles.headerText}>{Header}</Txt>
-          ) : (
-            <Header isOpen={isOpen} onClose={onClose} />
-          )}
-        </View>
-        {!alwaysExpanded && (
-          <Animated.Text style={[styles.arrow, { transform: [{ rotate }], color: iconColor }]}>
-            ▼
-          </Animated.Text>
-        )}
-      </Pressable>
-
-      <AnimatedCenter
-        style={[
-          styles.content,
-          nested && styles.nested,
-          {
-            maxHeight: heightAnim.interpolate({
-              inputRange: [0, 1],
-              outputRange: [0, 1000],
-            }),
-          },
-        ]}>
-        {children}
-      </AnimatedCenter>
-
-      {Footer ? <Footer isOpen={isOpen} onClose={onClose} /> : null}
-    </View>
-  )
-}
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-  },
-  header: {
-    flexDirection: 'row',
-    padding: 8,
-    alignItems: 'center',
-  },
-  headerContent: {
-    flex: 1,
-  },
-  headerText: {
-    fontWeight: '600',
-    color: '#666',
-  },
-  arrow: {
-    fontSize: 12,
-    marginLeft: 8,
-  },
-  content: {
-    width: '100%',
-    overflow: 'hidden',
-  },
-  nested: {
-    borderLeftWidth: 4,
-    borderLeftColor: 'rgba(0,0,0,0.2)',
-  },
-})

package/src/components/box/FullSizeContainer.tsx

@@ -1,64 +0,0 @@
-import React, { createContext, FC, useCallback, useContext, useMemo, useRef, useState } from 'react'
-import { View, ViewProps } from 'react-native'
-
-export const FullSizeContainer = ({
-  children: Children,
-  ...props
-}: Omit<ViewProps, 'children'> & { children: FC<{ width: number; height: number }> }) => {
-  const [width, setWidth] = useState(0)
-  const [height, setHeight] = useState(0)
-
-  const ref = useRef<View>(null)
-  const handleLayout = useCallback((event: any) => {
-    const { width: newWidth, height: newHeight } = event.nativeEvent.layout
-    setWidth(newWidth)
-    setHeight(newHeight)
-  }, [])
-
-  return (
-    <View
-      ref={ref}
-      {...props}
-      style={[{ width: '100%', height: '100%' }, props.style]}
-      onLayout={handleLayout}>
-      <Children width={width} height={height} />
-    </View>
-  )
-}
-
-interface FullSizeContextType {
-  width: number
-  height: number
-}
-
-const FullSizeContext = createContext<FullSizeContextType>({
-  width: 0,
-  height: 0,
-})
-
-// same as FullSizeContainer, but provides the width and height in a context instead of a render prop
-export const FullSizeProvider = ({ children, ...props }: ViewProps) => {
-  const [width, setWidth] = useState(0)
-  const [height, setHeight] = useState(0)
-
-  const ref = useRef<View>(null)
-  const handleLayout = useCallback((event: any) => {
-    const { width: newWidth, height: newHeight } = event.nativeEvent.layout
-    setWidth(newWidth)
-    setHeight(newHeight)
-  }, [])
-
-  const contextValue = useMemo(() => ({ width, height }), [width, height])
-
-  return (
-    <View
-      ref={ref}
-      {...props}
-      style={[{ width: '100%', height: '100%' }, props.style]}
-      onLayout={handleLayout}>
-      <FullSizeContext.Provider value={contextValue}>{children}</FullSizeContext.Provider>
-    </View>
-  )
-}
-
-export const useFullSize = () => useContext(FullSizeContext)

package/src/components/box/index.ts

@@ -1,7 +0,0 @@
-export * from './Center'
-export * from './CollapseHorizontal'
-export * from './ContentBox'
-export * from './DropShadow'
-export * from './Expandable'
-export * from './ExpandOnMount'
-export * from './FullSizeContainer'

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