@chem-po/react-native 0.0.52 → 0.0.53

package/src/contexts/root.tsx

@@ -1,190 +0,0 @@
-import { BackendAdapterInterface, ColorMode, Theme } from '@chem-po/core'
-import { ChempoProps, ChempoProvider, defaultTheme } from '@chem-po/react'
-import React, { FC, PropsWithChildren, useMemo } from 'react'
-import { GestureHandlerRootView } from 'react-native-gesture-handler'
-import { NotifierWrapper } from 'react-native-notifier'
-import {
-  configureFonts,
-  MD3TypescaleKey,
-  PaperProvider,
-  Props as PaperProviderProps,
-} from 'react-native-paper'
-import { en, registerTranslation } from 'react-native-paper-dates'
-import { MD3Type, MD3Typescale, ThemeProp } from 'react-native-paper/lib/typescript/types'
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
-import { nativeToast } from '../constants/toast'
-import { useRefreshFontScale } from '../hooks/useRefreshFontScale'
-import { UseThemeProps, useThemeState } from '../hooks/useThemeState'
-import { initializeScreen } from '../store/useScreen'
-import { ChempoFontsProvider } from './fonts'
-
-registerTranslation('en', en)
-
-export type FontConfig = Partial<Record<MD3TypescaleKey, Partial<MD3Type>>>
-export type MiddlewareProvider = FC<PropsWithChildren>
-export interface ChempoNativeProviderProps<
-  BackendAdapter extends BackendAdapterInterface,
-> extends PropsWithChildren<Pick<ChempoProps<BackendAdapter>, 'backendAdapter' | 'assets'>> {
-  theme?: Theme
-  fonts?: FontConfig
-  initialColorMode?: ColorMode
-  colorModeProp?: string
-  middlewareProvider?: MiddlewareProvider
-  insetNotifier?: boolean
-  disableFontScaling?: boolean
-}
-const createPaperTheme = (
-  themeConfig: Theme,
-  font: FontConfig | undefined,
-  colorMode: ColorMode,
-): { theme: PaperProviderProps['theme']; fonts: MD3Typescale } => {
-  const { colors } = themeConfig
-
-  const fonts = configureFonts({
-    config: {
-      ...font,
-      bodyLarge: {
-        fontSize: 18,
-        ...font?.bodyLarge,
-      },
-      bodyMedium: {
-        fontSize: 17,
-        ...font?.bodyMedium,
-      },
-      bodySmall: {
-        fontSize: 16,
-        ...font?.bodySmall,
-      },
-    },
-  })
-  const theme = {
-    dark: colorMode === 'dark',
-    colors: {
-      primary: colors.accent[300],
-      onPrimary: colors.text[900],
-      primaryContainer: colors.accent[800],
-      onPrimaryContainer: colors.text[150],
-
-      secondary: colors.background[150],
-      onSecondary: colors.text[100],
-      secondaryContainer: colors.accent[950],
-      onSecondaryContainer: colors.text[150],
-
-      tertiary: colors.accent[600],
-      onTertiary: colors.text[50],
-      tertiaryContainer: colors.accent[300],
-      onTertiaryContainer: colors.text[700],
-
-      error: colors.error[500],
-      onError: colors.text[50],
-      errorContainer: colors.error[100],
-      onErrorContainer: colors.error[900],
-
-      background: colors.background[50],
-      onBackground: colors.text[100],
-      surface: colors.background[100],
-      onSurface: colors.text[100],
-      surfaceVariant: colors.background[200],
-      onSurfaceVariant: colors.text[300],
-      outline: colors.text[500],
-      outlineVariant: colors.accent[300],
-
-      surfaceDisabled: colors.background[200],
-      onSurfaceDisabled: colors.text[400],
-      backdrop: '#000000aa', // 60% opacity
-
-      inverseSurface: colors.background[900],
-      inverseOnSurface: colors.text[50],
-      inversePrimary: colors.accent[200],
-      shadow: '#00000099',
-      scrim: '#00000099', // Semi-transparent dark overlay
-
-      elevation: {
-        level0: 'transparent',
-        level1: colors.background[100],
-        level2: colors.background[200],
-        level3: colors.background[300],
-        level4: colors.background[400],
-        level5: colors.background[500],
-      },
-    },
-    roundness: 4,
-    animation: {
-      scale: 1.0,
-    },
-    fonts,
-  }
-  return { theme, fonts }
-}
-
-const ChempoPaperProvider = ({
-  children,
-  paperTheme,
-}: PropsWithChildren<{ paperTheme: ThemeProp | undefined }>) => {
-  return <PaperProvider theme={paperTheme}>{children}</PaperProvider>
-}
-
-const ProviderBody = ({
-  children,
-  insetNotifier,
-  paperTheme,
-}: PropsWithChildren<{
-  insetNotifier?: boolean
-  paperTheme: ThemeProp | undefined
-}>) => {
-  const { top } = useSafeAreaInsets()
-
-  return (
-    <ChempoPaperProvider paperTheme={paperTheme}>
-      <NotifierWrapper containerStyle={{ paddingTop: insetNotifier ? top : 0 }}>
-        {children}
-      </NotifierWrapper>
-    </ChempoPaperProvider>
-  )
-}
-
-export const ChempoNativeProvider = <BackendAdapter extends BackendAdapterInterface>({
-  theme: themeProp,
-  initialColorMode,
-  children,
-  fonts: fontConfig,
-  colorModeProp,
-  middlewareProvider: Middleware,
-  insetNotifier,
-  disableFontScaling,
-  ...props
-}: ChempoNativeProviderProps<BackendAdapter>) => {
-  const useThemeProps = useMemo<UseThemeProps>(
-    () => ({ theme: themeProp, initialColorMode, colorModeProp }),
-    [themeProp, initialColorMode, colorModeProp],
-  )
-  const theme = useThemeState(useThemeProps)
-  useRefreshFontScale(disableFontScaling)
-
-  const { theme: paperTheme, fonts } = useMemo(
-    () => createPaperTheme(theme.theme ?? defaultTheme, fontConfig, theme.colorMode),
-    [theme, fontConfig],
-  )
-
-  const body = (
-    <ProviderBody insetNotifier={insetNotifier} paperTheme={paperTheme}>
-      {children}
-    </ProviderBody>
-  )
-
-  return (
-    <ChempoFontsProvider fonts={fonts}>
-      <ChempoProvider
-        toast={nativeToast}
-        theme={theme}
-        initializeScreen={initializeScreen}
-        {...props}>
-        <SafeAreaProvider>
-          <GestureHandlerRootView>
-            {Middleware ? <Middleware>{body}</Middleware> : body}
-          </GestureHandlerRootView>
-        </SafeAreaProvider>
-      </ChempoProvider>
-    </ChempoFontsProvider>
-  )
-}

package/src/hooks/index.ts

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

package/src/hooks/useFadeIn.ts

@@ -1,48 +0,0 @@
-import { useEffect, useRef } from 'react'
-import { Animated } from 'react-native'
-
-export interface FadeInOptions {
-  activeOpacity?: number
-  inactiveOpacity?: number
-  duration?: number
-  enterDelay?: number
-  exitDelay?: number
-}
-
-const defaultFadeInOptions: FadeInOptions = {
-  activeOpacity: 1,
-  inactiveOpacity: 0,
-  duration: 250,
-  enterDelay: 0,
-  exitDelay: 0,
-}
-export const useFadeIn = (active: boolean, opts?: FadeInOptions) => {
-  const {
-    activeOpacity = 1,
-    inactiveOpacity = 0,
-    duration = 300,
-    enterDelay = 0,
-    exitDelay = 0,
-  } = opts ?? defaultFadeInOptions
-  const opacity = useRef(new Animated.Value(active ? activeOpacity : inactiveOpacity))
-
-  useEffect(() => {
-    if (active) {
-      Animated.timing(opacity.current, {
-        toValue: activeOpacity,
-        duration,
-        useNativeDriver: true,
-        delay: enterDelay,
-      }).start()
-    } else {
-      Animated.timing(opacity.current, {
-        toValue: inactiveOpacity,
-        duration,
-        useNativeDriver: true,
-        delay: exitDelay,
-      }).start()
-    }
-  }, [active, activeOpacity, inactiveOpacity, duration, enterDelay, exitDelay])
-
-  return opacity.current
-}

package/src/hooks/useFont.ts

@@ -1,25 +0,0 @@
-import { useChempoFonts } from '../contexts/fonts'
-
-export type FontFamilyType = 'display' | 'body' | 'label' | 'headline' | 'title'
-export type FontSize = 'lg' | 'md' | 'sm'
-export type FontSizeKey = 'Small' | 'Medium' | 'Large'
-export type FontKey = `${FontFamilyType}${FontSizeKey}`
-
-const getFontKeySize = (fontSize: FontSize): FontSizeKey => {
-  switch (fontSize) {
-    case 'lg':
-      return 'Large'
-    case 'md':
-      return 'Medium'
-    default:
-      return 'Small'
-  }
-}
-
-const getFontKey = (fontFamily: FontFamilyType, fontSize: FontSize): FontKey =>
-  `${fontFamily}${getFontKeySize(fontSize)}`
-
-export const useFont = (fontFamily: FontFamilyType, fontSize: FontSize) => {
-  const { fonts } = useChempoFonts()
-  return fonts[getFontKey(fontFamily, fontSize)]
-}

package/src/hooks/useRefreshFontScale.ts

@@ -1,39 +0,0 @@
-import { useEffect } from 'react'
-import { AppState, Dimensions, PixelRatio, Platform } from 'react-native'
-import { useFontScale } from '../store/useFontScale'
-
-/**
- * Subscribes to app state and refreshes the global font scale when the app
- * becomes active (cold start or returning from background). Call once near the
- * root of the app (e.g. in _layout).
- */
-export function useRefreshFontScale(disableFontScaling = false) {
-  useEffect(() => {
-    if (disableFontScaling) {
-      useFontScale.setState({ fontScale: 1 })
-      return () => {}
-    }
-    const refresh = () => useFontScale.setState({ fontScale: PixelRatio.getFontScale() ?? 1 })
-
-    refresh()
-
-    const appStateSub = AppState.addEventListener('change', nextState => {
-      if (nextState === 'active') refresh()
-    })
-
-    // On Android, font scale changes come through Dimensions 'change' events
-    // triggered by Android configuration changes. AppState alone is not sufficient
-    // because PixelRatio.getFontScale() may not have updated yet when AppState fires.
-    const dimensionsSub =
-      Platform.OS === 'android'
-        ? Dimensions.addEventListener('change', ({ window }) => {
-            useFontScale.setState({ fontScale: window.fontScale ?? 1 })
-          })
-        : null
-
-    return () => {
-      appStateSub.remove()
-      dimensionsSub?.remove()
-    }
-  }, [disableFontScaling])
-}

package/src/hooks/useThemeState.ts

@@ -1,43 +0,0 @@
-import { ColorMode, Theme } from '@chem-po/core'
-import { ThemeProps } from '@chem-po/react'
-import AsyncStorage from '@react-native-async-storage/async-storage'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-
-export interface UseThemeProps {
-  colorModeProp?: string
-  theme?: Theme
-  // deprecated - using AsyncStorage instead
-  initialColorMode?: ColorMode
-}
-
-export const useThemeState = (props?: UseThemeProps) => {
-  const { initialColorMode, theme, colorModeProp = 'chempoColorMode' } = props ?? {}
-  const [initialized, setInitialized] = useState(false)
-
-  const [colorMode, setColorModeState] = useState<ColorMode>(initialColorMode ?? 'light')
-
-  useEffect(() => {
-    if (initialized) return
-
-    const initialize = async () => {
-      const storedColorMode = await AsyncStorage.getItem(colorModeProp)
-      if (storedColorMode) setColorModeState(storedColorMode as ColorMode)
-      else AsyncStorage.setItem(colorModeProp, initialColorMode ?? 'light')
-      setInitialized(true)
-    }
-    initialize()
-  }, [initialized, colorModeProp, initialColorMode])
-
-  const setColorMode = useCallback(
-    (colorMode: ColorMode) => {
-      setColorModeState(colorMode)
-      AsyncStorage.setItem(colorModeProp, colorMode)
-    },
-    [colorModeProp],
-  )
-
-  return useMemo<ThemeProps>(
-    () => ({ colorMode, setColorMode, theme, colorModeProp, initialized }),
-    [colorMode, setColorMode, theme, colorModeProp, initialized],
-  )
-}

package/src/index.ts

@@ -1,6 +0,0 @@
-export * from './components'
-export * from './constants'
-export * from './contexts'
-export * from './hooks'
-export * from './store'
-export * from './types'

package/src/store/index.ts

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

package/src/store/useFontScale.ts

@@ -1,8 +0,0 @@
-import { PixelRatio } from 'react-native'
-import { create } from 'zustand'
-
-// export const normalizeFontScale = (fontScale: number) =>
-//   fontScale > 1 ? (fontScale - 1) * 0.5 + 1 : fontScale
-export const useFontScale = create<{ fontScale: number }>(() => ({
-  fontScale: PixelRatio.getFontScale() ?? 1,
-}))

package/src/store/useScreen.ts

@@ -1,25 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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',
-  },
-})

package/src/types/forms.ts

@@ -1,14 +0,0 @@
-import { BaseCustomInput, BaseCustomInputProps } from '@chem-po/react'
-import { TextStyle, ViewStyle } from 'react-native'
-
-export type CustomInput<Value, InputStyle = TextStyle> = BaseCustomInput<
-  Value,
-  ViewStyle,
-  InputStyle
->
-
-export type CustomInputProps<Value, InputStyle = TextStyle> = BaseCustomInputProps<
-  Value,
-  ViewStyle,
-  InputStyle
->

package/src/types/index.ts

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

package/src/utils/downloadFile.ts

@@ -1,61 +0,0 @@
-import { Directory, File, Paths } from 'expo-file-system'
-import { StorageAccessFramework } from 'expo-file-system/legacy'
-import { shareAsync } from 'expo-sharing'
-import { Platform } from 'react-native'
-
-export const downloadFile = async (uri: string, filename: string, fileType: string) => {
-  if (Platform.OS === 'android') {
-    const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync()
-    if (!permissions.granted) {
-      throw new Error('Permission not granted')
-    }
-
-    // Create cache directory for temporary file
-    const cacheDir = new Directory(Paths.cache)
-
-    // Ensure cache directory exists
-    if (!cacheDir.exists) {
-      cacheDir.create()
-    }
-
-    // Download the file to cache directory using static method
-    const downloadedFile = await File.downloadFileAsync(uri, cacheDir)
-
-    // Read the downloaded file as bytes and convert to base64
-    const fileBytes = await downloadedFile.bytes()
-
-    // Convert Uint8Array to base64 safely (handles large files better than btoa)
-    const base64Content = Array.from(fileBytes, byte => String.fromCharCode(byte)).join('')
-    const encodedContent = btoa(base64Content)
-
-    // Create a file within the selected directory using SAF
-    const fileUri = await StorageAccessFramework.createFileAsync(
-      permissions.directoryUri,
-      filename,
-      fileType,
-    )
-
-    // Write the content to the SAF file using legacy method (as SAF might not have new API yet)
-    await StorageAccessFramework.writeAsStringAsync(fileUri, encodedContent, {
-      encoding: 'base64',
-    })
-
-    // Clean up temporary file
-    downloadedFile.delete()
-
-    return { uri: fileUri }
-  }
-
-  // For iOS and other platforms
-  const documentsDir = new Directory(Paths.document)
-
-  // Ensure documents directory exists
-  if (!documentsDir.exists) {
-    documentsDir.create()
-  }
-
-  // Download file directly to documents directory
-  const downloadedFile = await File.downloadFileAsync(uri, documentsDir)
-
-  return shareAsync(downloadedFile.uri)
-}

package/src/utils/downloadFileLegacy.ts

@@ -1,66 +0,0 @@
-import {
-  cacheDirectory,
-  deleteAsync,
-  documentDirectory,
-  downloadAsync,
-  EncodingType,
-  readAsStringAsync,
-  StorageAccessFramework,
-} from 'expo-file-system/legacy'
-import { shareAsync } from 'expo-sharing'
-import { Platform } from 'react-native'
-
-export const downloadFileLegacy = async (uri: string, filename: string, fileType: string) => {
-  if (Platform.OS === 'android') {
-    const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync()
-    if (!permissions.granted) {
-      throw new Error('Permission not granted')
-    }
-
-    // Download to temporary location first
-    const tempFileUri = `${cacheDirectory}${filename}`
-
-    try {
-      // Download the file to temporary location
-      await downloadAsync(uri, tempFileUri)
-
-      // Read the temporary file as base64
-      const base64Content = await readAsStringAsync(tempFileUri, {
-        encoding: EncodingType.Base64,
-      })
-
-      // Create a file within the selected directory using SAF
-      const fileUri = await StorageAccessFramework.createFileAsync(
-        permissions.directoryUri,
-        filename,
-        fileType,
-      )
-
-      // Write the content to the SAF file
-      await StorageAccessFramework.writeAsStringAsync(fileUri, base64Content, {
-        encoding: EncodingType.Base64,
-      })
-
-      // Clean up temporary file
-      await deleteAsync(tempFileUri, { idempotent: true })
-
-      return { uri: fileUri }
-    } catch (error) {
-      // Clean up temporary file in case of error
-      try {
-        await deleteAsync(tempFileUri, { idempotent: true })
-      } catch {
-        // Ignore cleanup errors
-      }
-      throw error
-    }
-  }
-
-  // For iOS and other platforms
-  if (!documentDirectory) {
-    throw new Error('Document directory not found')
-  }
-
-  const result = await downloadAsync(uri, documentDirectory + filename)
-  return shareAsync(result.uri)
-}