@chem-po/react-native 0.0.52 → 0.0.53

package/src/components/loading/LoadingImage.tsx

@@ -1,163 +0,0 @@
-import { useMounted } from '@chem-po/react'
-import { Ionicons } from '@expo/vector-icons'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { DimensionValue, Image, StyleSheet, View, ViewStyle } from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
-import { ImageViewModal } from '../image/ImageViewModal'
-import { LoadingLogo } from './Loading'
-
-export interface LoadingImageProps {
-  src?: string | null
-  loadingOverride?: boolean
-  onLoad?: (dims: { width: number; height: number }) => void
-  filename?: string
-  fileType?: string
-  withFullView?: boolean
-  buttonFullView?: boolean
-  style?: ViewStyle
-  width?: DimensionValue
-  height?: DimensionValue
-  withDownload?: boolean
-}
-
-const emptyPng =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII='
-
-export const LoadingImage = ({
-  src,
-  loadingOverride,
-  onLoad,
-  filename,
-  fileType,
-  width,
-  height,
-  withFullView,
-  buttonFullView,
-  withDownload,
-  style,
-}: LoadingImageProps) => {
-  const [imageLoading, setImageLoading] = useState(!!src)
-  const imageRef = useRef<Image>(null)
-
-  const [viewing, setViewing] = useState(false)
-  const mounted = useMounted(100)
-
-  const handleImageLoad = useCallback(() => {
-    if (onLoad && src) {
-      Image.getSize(src, (width, height) => {
-        onLoad({ width, height })
-      })
-    }
-  }, [onLoad, src])
-
-  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,
-        },
-      ]}
-      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,
-      ]}>
-      {!withFullView || buttonFullView ? (
-        ImageComponent
-      ) : (
-        <Pressable
-          onPress={() => setViewing(true)}
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}>
-          {ImageComponent}
-        </Pressable>
-      )}
-      {buttonFullView && (
-        <Pressable style={styles.fullViewButton} onPress={() => setViewing(true)}>
-          <Ionicons name="expand" size={20} color="white" style={styles.fullViewIcon} />
-        </Pressable>
-      )}
-      <View
-        style={[
-          styles.loadingContainer,
-          {
-            opacity: loading ? 1 : 0,
-            pointerEvents: loading ? 'auto' : 'none',
-          },
-        ]}>
-        <LoadingLogo isLoading={loading} size={10} />
-      </View>
-      {viewing ? (
-        <ImageViewModal
-          withDownload={withDownload}
-          filename={filename}
-          fileType={fileType}
-          isOpen
-          src={src ?? emptyPng}
-          onClose={() => setViewing(false)}
-        />
-      ) : null}
-    </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/LoadingOverlay.tsx

@@ -1,74 +0,0 @@
-import React, { useMemo } from 'react'
-import { Animated, StyleProp, StyleSheet, ViewStyle } from 'react-native'
-import { FadeInOptions, useFadeIn } from '../../hooks/useFadeIn'
-import { useFontScale } from '../../store/useFontScale'
-import { CircularProgress, CircularProgressProps } from './CircularProgress'
-const loadingFadeInProps: FadeInOptions = {
-  activeOpacity: 0.8,
-  duration: 100,
-}
-interface LoadingOverlayProps {
-  loading: boolean
-  fadeOptions?: FadeInOptions
-  style?: StyleProp<ViewStyle>
-  indicatorProps?: CircularProgressProps
-}
-export const LoadingOverlay = ({
-  loading,
-  fadeOptions,
-  style,
-  indicatorProps,
-}: LoadingOverlayProps) => {
-  const opts = useMemo(() => ({ ...loadingFadeInProps, ...fadeOptions }), [fadeOptions])
-  const opacity = useFadeIn(loading, opts)
-
-  const fontScale = useFontScale(s => s.fontScale)
-  return (
-    <Animated.View
-      style={[styles.overlay, style, { opacity, pointerEvents: loading ? 'auto' : 'none' }]}>
-      <CircularProgress size={indicatorProps?.size ?? 20 * fontScale} {...indicatorProps} />
-    </Animated.View>
-  )
-}
-
-const withOverlayLoadingFadeIn: FadeInOptions = {
-  enterDelay: 250,
-}
-export const WithLoadingOverlay = ({
-  loading,
-  children,
-  style,
-  overlayStyle,
-  indicatorProps,
-}: {
-  loading: boolean
-  children: React.ReactNode
-  style?: StyleProp<ViewStyle>
-  overlayStyle?: StyleProp<ViewStyle>
-  indicatorProps?: CircularProgressProps
-}) => {
-  const bodyOpacity = useFadeIn(!loading, withOverlayLoadingFadeIn)
-  return (
-    <>
-      <Animated.View style={[style, { opacity: bodyOpacity }]}>{children}</Animated.View>
-      <LoadingOverlay
-        fadeOptions={withOverlayLoadingFadeIn}
-        loading={loading}
-        style={overlayStyle}
-        indicatorProps={indicatorProps}
-      />
-    </>
-  )
-}
-
-const styles = StyleSheet.create({
-  overlay: {
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-  },
-})

package/src/components/loading/LoadingSwitch.tsx

@@ -1,110 +0,0 @@
-import React, { 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/ProgressBar.tsx

@@ -1,75 +0,0 @@
-import { useColorModeValue, useThemeValue } from '@chem-po/react'
-import React, { useEffect, useRef } from 'react'
-import { Animated, StyleSheet, Text, View } from 'react-native'
-
-export const ProgressBar = ({
-  progress,
-  label,
-  height = 26,
-}: {
-  progress: number
-  label?: string
-  height?: number
-}) => {
-  const accentColor = useThemeValue('colors.accent.300')
-  const animatedWidth = useRef(new Animated.Value(0)).current
-  const backgroundColor = useColorModeValue('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.2)')
-
-  useEffect(() => {
-    Animated.timing(animatedWidth, {
-      toValue: progress,
-      duration: 300,
-      useNativeDriver: false, // width animations require layout driver
-    }).start()
-  }, [progress, animatedWidth])
-
-  return (
-    <View style={[styles.progressContainer, { height, backgroundColor }]}>
-      <View style={styles.progressBar}>
-        <Animated.View
-          style={[
-            styles.progressFill,
-            {
-              width: animatedWidth.interpolate({
-                inputRange: [0, 1],
-                outputRange: ['0%', '100%'],
-                extrapolate: 'clamp',
-              }),
-              backgroundColor: accentColor,
-            },
-          ]}
-        />
-      </View>
-      <Text style={styles.label}>{label}</Text>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  progressContainer: {
-    width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 20,
-    padding: 3,
-  },
-  progressBar: {
-    height: '100%',
-    width: '100%',
-    borderRadius: 20,
-    overflow: 'hidden',
-  },
-  progressFill: {
-    height: '100%',
-  },
-  label: {
-    position: 'absolute',
-    color: 'white',
-    fontSize: 12,
-    fontWeight: '500',
-    textTransform: 'uppercase',
-    textShadowColor: 'rgba(0, 0, 0, 0.67)',
-    textShadowOffset: { width: 1, height: 1 },
-    textShadowRadius: 3,
-  },
-})

package/src/components/loading/index.ts

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

package/src/components/text/AnimatedText.tsx

@@ -1,68 +0,0 @@
-import React, { PropsWithChildren, useEffect, useMemo, useRef } from 'react'
-import { Animated, StyleProp, TextStyle } from 'react-native'
-import { useFontScale } from '../../store/useFontScale'
-
-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
-  const fontScale = useFontScale(s => s.fontScale)
-
-  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 * fontScale],
-      }),
-      marginBottom: placeholderAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, marginBottom * fontScale],
-      }),
-    }),
-    [color, height, marginBottom, placeholderAnim, fontScale],
-  )
-}
-
-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

@@ -1,12 +0,0 @@
-import { useTextColor } from '@chem-po/react'
-import React from '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

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

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

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

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

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

package/src/components/theme/index.ts

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

package/src/constants/index.ts

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

package/src/constants/toast.ts

@@ -1,24 +0,0 @@
-import { ToastProviderProps } from '@chem-po/react'
-import { ComponentProps } from 'react'
-import { Notifier, NotifierComponents } from 'react-native-notifier'
-
-// 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
-      | ComponentProps<typeof NotifierComponents.Notification>
-      | ComponentProps<typeof NotifierComponents.Alert>
-    Notifier.showNotification({
-      title,
-      description: message,
-      duration,
-      Component,
-      componentProps,
-    })
-    return 'root'
-  },
-}

package/src/contexts/fonts.tsx

@@ -1,23 +0,0 @@
-import React, { createContext, PropsWithChildren, useContext } from 'react'
-import { MD3Typescale } from 'react-native-paper/lib/typescript/types'
-
-export interface ChempoFontsProviderProps {
-  fonts: MD3Typescale
-}
-
-export const ChempoFontsContext = createContext<ChempoFontsProviderProps | null>(null)
-
-export const ChempoFontsProvider = ({
-  children,
-  fonts,
-}: PropsWithChildren<ChempoFontsProviderProps>) => {
-  return <ChempoFontsContext.Provider value={{ fonts }}>{children}</ChempoFontsContext.Provider>
-}
-
-export const useChempoFonts = () => {
-  const context = useContext(ChempoFontsContext)
-  if (!context) {
-    throw new Error('useChempoFonts must be used within a ChempoFontsProvider')
-  }
-  return context
-}

package/src/contexts/index.ts

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