@chem-po/react-native 0.0.5 → 0.0.7

package/src/components/loading/LoadingImage.tsx

@@ -0,0 +1,144 @@
+import { useMounted } from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { DimensionValue, Image, StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native'
+import { ImageViewOverlay } from '../overlay/ImageViewOverlay'
+import { LoadingLogo } from './Loading'
+
+export interface LoadingImageProps {
+  src?: string | null
+  loadingOverride?: boolean
+  onLoad?: (e: any) => void
+  noFullView?: boolean
+  buttonFullView?: boolean
+  style?: ViewStyle
+  width?: DimensionValue
+  height?: DimensionValue
+}
+
+const emptyPng =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII='
+
+export const LoadingImage = ({
+  src,
+  loadingOverride,
+  onLoad,
+  width,
+  height,
+  noFullView,
+  buttonFullView,
+  style,
+}: LoadingImageProps) => {
+  const [imageLoading, setImageLoading] = useState(!!src)
+  const imageRef = useRef<Image>(null)
+
+  const [viewing, setViewing] = useState(false)
+  const mounted = useMounted(100)
+
+  const handleImageLoad = useCallback(
+    (e: any) => {
+      if (onLoad) onLoad(e)
+    },
+    [onLoad],
+  )
+
+  const [prevSrc, setPrevSrc] = useState(src)
+  useEffect(() => {
+    if (src) setPrevSrc(src)
+  }, [src, prevSrc])
+
+  const loading = useMemo(() => imageLoading || !!loadingOverride, [imageLoading, loadingOverride])
+
+  const ImageComponent = (
+    <Image
+      ref={imageRef}
+      source={{ uri: src ?? emptyPng }}
+      style={[
+        styles.image,
+        {
+          opacity: src && !loading ? 1 : 0,
+        },
+      ]}
+      // onLoadStart={() => setImageLoading(true)}
+      onLoadEnd={() => setImageLoading(false)}
+      onLoad={handleImageLoad}
+      resizeMode={src ? 'cover' : 'contain'}
+    />
+  )
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: width ?? '100%',
+          height: height ?? '100%',
+          opacity: mounted ? 1 : 0,
+        },
+        style,
+      ]}>
+      {noFullView || buttonFullView ? (
+        ImageComponent
+      ) : (
+        <TouchableOpacity
+          activeOpacity={0.9}
+          onPress={() => setViewing(true)}
+          style={styles.imageContainer}>
+          {ImageComponent}
+        </TouchableOpacity>
+      )}
+      {buttonFullView && (
+        <TouchableOpacity
+          style={styles.fullViewButton}
+          onPress={() => setViewing(true)}
+          activeOpacity={0.7}>
+          <Ionicons name="expand" size={20} color="white" style={styles.fullViewIcon} />
+        </TouchableOpacity>
+      )}
+      <View
+        style={[
+          styles.loadingContainer,
+          {
+            opacity: loading ? 1 : 0,
+          },
+        ]}>
+        <LoadingLogo isLoading={loading} size={10} />
+      </View>
+      {viewing && <ImageViewOverlay src={src ?? emptyPng} onClose={() => setViewing(false)} />}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  imageContainer: {
+    width: '100%',
+    height: '100%',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  loadingContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  fullViewButton: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  fullViewIcon: {
+    opacity: 0.8,
+  },
+})

package/src/components/loading/LoadingSwitch.tsx

@@ -0,0 +1,110 @@
+import { useCallback, useState } from 'react'
+import { Animated, StyleSheet, Switch, Text, View } from 'react-native'
+import { Loading } from './Loading'
+
+export const LoadingSwitch = ({
+  value,
+  label,
+  onChange,
+}: {
+  value: boolean
+  label: string
+  onChange: (updated: boolean) => Promise<void>
+}) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const opacity = useState(new Animated.Value(1))[0]
+
+  const reportComplete = useCallback(
+    (fetchedOn: number) => {
+      const buffer = Math.max(0, 1000 - (Date.now() - fetchedOn))
+      setTimeout(() => {
+        setIsLoading(false)
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }).start()
+      }, buffer)
+    },
+    [opacity],
+  )
+
+  const handleChange = (newValue: boolean) => {
+    setIsLoading(true)
+    Animated.timing(opacity, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start()
+
+    const fetchedOn = Date.now()
+    onChange(newValue).catch(err => {
+      console.error(err)
+      // Note: You might want to implement a toast notification system for React Native
+      // For now, we'll just log the error
+    })
+
+    reportComplete(fetchedOn)
+  }
+
+  return (
+    <View style={styles.container}>
+      <Animated.View
+        style={[
+          styles.content,
+          {
+            opacity,
+          },
+        ]}>
+        <Text style={styles.label}>{label}</Text>
+        <Switch value={value} onValueChange={handleChange} />
+      </Animated.View>
+      {isLoading && (
+        <View style={styles.loadingContainer}>
+          <Loading />
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 4,
+    paddingHorizontal: 12,
+    backgroundColor: '#2D3748', // gray.700 equivalent
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 0,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  label: {
+    fontSize: 20,
+    height: 24,
+    color: '#FFFFFF',
+  },
+  loadingContainer: {
+    position: 'absolute',
+    top: '-10%',
+    left: '-10%',
+    width: '120%',
+    height: '120%',
+    borderRadius: 8,
+    padding: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/src/components/loading/index.ts

@@ -0,0 +1,4 @@
+export * from './CircularProgress'
+export * from './Loading'
+export * from './LoadingImage'
+export * from './LoadingSwitch'

package/src/components/overlay/ImageViewOverlay.tsx

@@ -0,0 +1,104 @@
+import { useScreen } from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import { useCallback, useMemo, useState } from 'react'
+import { Image, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
+import { LoadingLogo } from '../loading/Loading'
+
+export const ImageViewOverlay = ({ src, onClose }: { src: string; onClose: () => void }) => {
+  const [loading, setLoading] = useState(true)
+  const screenWidth = useScreen(s => s.width)
+  const screenHeight = useScreen(s => s.height)
+  const [imageSize, setImageSize] = useState({ width: screenWidth / 2, height: screenHeight / 2 })
+
+  const { height, width } = useMemo(() => {
+    if (loading) return imageSize
+    const ratio = imageSize.width / imageSize.height
+    let h = Math.min(imageSize.height, screenHeight * 0.9)
+    let w = h * ratio
+    if (w > screenWidth * 0.9) {
+      w = Math.min(imageSize.width, screenWidth * 0.9)
+      h = w / ratio
+    }
+    return { height: h, width: w }
+  }, [screenHeight, screenWidth, imageSize, loading])
+
+  const onLoadStart = useCallback(() => setLoading(true), [])
+  const onLoad = useCallback((e: any) => {
+    const { width: naturalWidth, height: naturalHeight } = e.nativeEvent.source
+    setImageSize({ width: naturalWidth, height: naturalHeight })
+    setLoading(false)
+  }, [])
+
+  return (
+    <Modal visible={true} transparent animationType="fade" onRequestClose={onClose}>
+      <View style={styles.modalOverlay}>
+        <View style={styles.contentContainer}>
+          <View
+            style={[
+              styles.imageContainer,
+              {
+                width,
+                height,
+                opacity: loading ? 0 : 1,
+              },
+            ]}>
+            <Image
+              source={{ uri: src }}
+              style={styles.image}
+              onLoadStart={onLoadStart}
+              onLoad={onLoad}
+              resizeMode="contain"
+            />
+          </View>
+
+          <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+            <Ionicons name="close" size={24} color="white" />
+          </TouchableOpacity>
+
+          {loading && (
+            <View style={styles.loadingContainer}>
+              <LoadingLogo isLoading={loading} size={70} />
+            </View>
+          )}
+        </View>
+      </View>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+  imageContainer: {
+    overflow: 'hidden',
+    borderRadius: 4,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 16,
+    right: 16,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/src/components/overlay/index.ts

@@ -0,0 +1 @@
+export * from './ImageViewOverlay'

package/src/components/text/AnimatedText.tsx

@@ -0,0 +1,66 @@
+import { PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import { Animated, StyleProp, TextStyle } from 'react-native'
+
+export interface AnimatedTextProps {
+  show: boolean
+  color: string
+  height: number
+  marginBottom: number
+  style?: StyleProp<TextStyle>
+}
+const useAnimatedText = (show: boolean, color: string, height: number, marginBottom: number) => {
+  const placeholderAnim = useRef(new Animated.Value(0)).current
+
+  useEffect(() => {
+    Animated.timing(placeholderAnim, {
+      toValue: show ? 1 : 0,
+      duration: 200,
+      useNativeDriver: false,
+    }).start()
+  }, [show, placeholderAnim])
+
+  return useMemo(
+    () => ({
+      opacity: placeholderAnim,
+      color,
+      transform: [
+        {
+          scale: placeholderAnim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.8, 1],
+          }),
+        },
+      ],
+      height: placeholderAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, height],
+      }),
+      marginBottom: placeholderAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, marginBottom],
+      }),
+    }),
+    [color, height, marginBottom, placeholderAnim],
+  )
+}
+
+export const AnimatedText = ({
+  show,
+  color: colorProp,
+  height: heightProp,
+  marginBottom: marginBottomProp,
+  style,
+  children,
+}: PropsWithChildren<AnimatedTextProps>) => {
+  const { opacity, color, transform, height, marginBottom } = useAnimatedText(
+    show,
+    colorProp,
+    heightProp,
+    marginBottomProp,
+  )
+  return (
+    <Animated.Text style={[style, { opacity, color, transform, height, marginBottom }]}>
+      {children}
+    </Animated.Text>
+  )
+}

package/src/components/text/Txt.tsx

@@ -0,0 +1,11 @@
+import { useTextColor } from '@chem-po/react'
+import { Text, TextProps } from 'react-native'
+
+export const Txt = ({ children, ...props }: TextProps) => {
+  const color = useTextColor()
+  return (
+    <Text {...props} style={[{ color }, props.style]}>
+      {children}
+    </Text>
+  )
+}

package/src/components/text/index.ts

@@ -0,0 +1 @@
+export * from './Txt'

package/src/components/theme/colorMode/DarkModeToggle.tsx

@@ -0,0 +1,45 @@
+import { useBackgroundColor, useIconColor, useTheme } from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+
+export const DarkModeToggle = () => {
+  const { colorMode, toggleColorMode } = useTheme()
+  const isDark = colorMode === 'dark'
+
+  const iconColor = useIconColor()
+  const iconName = isDark ? 'moon' : 'sunny'
+  const bg = useBackgroundColor(100)
+  return (
+    <TouchableOpacity
+      onPress={toggleColorMode}
+      style={[
+        styles.button,
+        {
+          backgroundColor: bg,
+        },
+      ]}>
+      <Ionicons name={iconName} size={16} color={iconColor} />
+    </TouchableOpacity>
+  )
+}
+
+export const AbsoluteDarkModeToggle = () => (
+  <View style={styles.container}>
+    <DarkModeToggle />
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 12,
+    right: 12,
+  },
+  button: {
+    width: 25,
+    height: 25,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/src/components/theme/colorMode/index.ts

@@ -0,0 +1 @@
+export * from './DarkModeToggle'

package/src/components/theme/index.ts

@@ -0,0 +1 @@
+export * from './colorMode'

package/src/constants/index.ts

@@ -0,0 +1 @@
+export * from './toast'

package/src/constants/toast.ts

@@ -0,0 +1,23 @@
+import { ToastProviderProps } from '@chem-po/react'
+import { Notifier, NotifierComponents } from 'react-native-notifier'
+import { AlertComponentProps } from 'react-native-notifier/lib/typescript/src/components/Alert'
+import { NotificationComponentProps } from 'react-native-notifier/lib/typescript/src/components/Notification'
+
+// react-native toast messages
+export const nativeToast: ToastProviderProps = {
+  closeMessage: () => Notifier.hideNotification(),
+  showMessage: ({ title, type, duration, message }) => {
+    const Component = type === 'info' ? NotifierComponents.Notification : NotifierComponents.Alert
+    const componentProps = {
+      alertType: type === 'error' ? 'error' : 'success',
+    } as NotificationComponentProps | AlertComponentProps
+    Notifier.showNotification({
+      title,
+      description: message,
+      duration,
+      Component,
+      componentProps,
+    })
+    return 'root'
+  },
+}

package/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './root'

package/src/contexts/root.tsx

@@ -0,0 +1,39 @@
+import { BackendAdapterInterface, ColorMode, Theme } from '@chem-po/core'
+import { ChempoProps, ChempoProvider } from '@chem-po/react'
+import { PropsWithChildren, useMemo } from 'react'
+import { NotifierWrapper } from 'react-native-notifier'
+import { en, registerTranslation } from 'react-native-paper-dates'
+import { nativeToast } from '../constants/toast'
+import { useThemeState } from '../hooks/useThemeState'
+import { initializeScreen } from '../store/useScreen'
+
+registerTranslation('en', en)
+
+export interface ChempoNativeProviderProps
+  extends PropsWithChildren<
+    Pick<ChempoProps<BackendAdapterInterface>, 'backendAdapter' | 'assets'>
+  > {
+  theme?: Theme
+  initialColorMode?: ColorMode
+}
+export const ChempoNativeProvider = ({
+  theme: themeProp,
+  initialColorMode,
+  ...props
+}: ChempoNativeProviderProps) => {
+  const useThemeProps = useMemo(
+    () => ({ theme: themeProp, initialColorMode }),
+    [themeProp, initialColorMode],
+  )
+  const theme = useThemeState(useThemeProps)
+  return (
+    <NotifierWrapper>
+      <ChempoProvider
+        toast={nativeToast}
+        theme={theme}
+        initializeScreen={initializeScreen}
+        {...props}
+      />
+    </NotifierWrapper>
+  )
+}

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useThemeState'

package/src/hooks/useThemeState.ts

@@ -0,0 +1,18 @@
+import { ColorMode, Theme } from '@chem-po/core'
+import { ThemeProps } from '@chem-po/react'
+import { useMemo, useState } from 'react'
+
+export interface UseThemeProps {
+  initialColorMode?: ColorMode
+  theme?: Theme
+}
+
+export const useThemeState = (props?: UseThemeProps) => {
+  const { initialColorMode, theme } = props ?? {}
+  const [colorMode, setColorMode] = useState<ColorMode>(initialColorMode ?? 'light')
+
+  return useMemo<ThemeProps>(
+    () => ({ colorMode, setColorMode, theme }),
+    [colorMode, setColorMode, theme],
+  )
+}

package/src/store/index.ts

@@ -0,0 +1 @@
+export * from './useScreen'

package/src/store/useScreen.ts

@@ -0,0 +1,25 @@
+import { useScreen } from '@chem-po/react'
+import { Dimensions } from 'react-native'
+
+export const initializeScreen = () => {
+  const onDimensionsChange = () => {
+    const { width, height } = Dimensions.get('window')
+    useScreen.setState({
+      width,
+      height,
+      isMobile: true, // In React Native, we're always on mobile
+      isPortrait: width < height,
+    })
+  }
+
+  // Initial setup
+  onDimensionsChange()
+
+  // Add listener for dimension changes
+  const subscription = Dimensions.addEventListener('change', onDimensionsChange)
+
+  // Return cleanup function
+  return () => {
+    subscription.remove()
+  }
+}

package/src/styles/fill.ts

@@ -0,0 +1,19 @@
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
+
+const sharedProps: StyleProp<ViewStyle> = {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: 'flex',
+}
+export const fill = StyleSheet.create({
+  absolute: {
+    ...sharedProps,
+    position: 'absolute',
+  },
+  relative: {
+    ...sharedProps,
+    position: 'relative',
+  },
+})