@chem-po/react-native 0.0.5 → 0.0.7

package/src/components/form/input/time/index.tsx

@@ -0,0 +1,106 @@
+import { InputRef, padZeros } from '@chem-po/core'
+import { TimeField, useIconColor } from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Portal } from 'react-native-paper'
+import { TimePickerModal } from 'react-native-paper-dates'
+import { FieldProps } from '../../types'
+import { DateInputClearButton } from '../common/InputClearButton'
+import { useInputColor } from '../hooks/useInputColor'
+
+export const TimeInput = forwardRef<InputRef, FieldProps<TimeField>>(
+  ({ input: { onChange, value, onFocus, onBlur }, field: { placeholder, optional } }, ref) => {
+    const [visible, setVisible] = useState(false)
+
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        setVisible(true)
+        onFocus()
+      },
+      blur: () => {
+        setVisible(false)
+        onBlur()
+      },
+    }))
+
+    const handleTimeChange = ({ hours, minutes }: { hours: number; minutes: number }) => {
+      setVisible(false)
+      const timeString = `${padZeros(hours)}:${padZeros(minutes)}`
+      onChange(timeString)
+      onBlur()
+    }
+
+    const handleDismiss = () => {
+      setVisible(false)
+      onBlur()
+    }
+
+    const formattedValue = useMemo(() => {
+      if (!value) return null
+      const [hours, minutes] = value.split(':').map(Number)
+      const amPm = hours >= 12 ? 'PM' : 'AM'
+      const formattedHours = hours % 12 === 0 ? 12 : hours % 12
+      return `${formattedHours}:${padZeros(minutes)} ${amPm}`
+    }, [value])
+
+    const { hours, minutes } = useMemo(() => {
+      if (!value) return { hours: 0, minutes: 0 }
+      const [h, m] = value.split(':').map(Number)
+      return { hours: h, minutes: m }
+    }, [value])
+
+    const iconColor = useIconColor()
+    const inputColor = useInputColor(value)
+
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => {
+            setVisible(true)
+            onFocus()
+          }}>
+          <Text style={[styles.text, { color: inputColor }]}>{formattedValue ?? placeholder}</Text>
+          <Ionicons name="time" size={20} color={iconColor} style={styles.icon} />
+          {optional && value ? (
+            <DateInputClearButton onPress={() => onChange(null)} isActive={!!value} />
+          ) : null}
+        </TouchableOpacity>
+        <Portal>
+          <TimePickerModal
+            visible={visible}
+            onDismiss={handleDismiss}
+            onConfirm={handleTimeChange}
+            hours={hours}
+            minutes={minutes}
+          />
+        </Portal>
+      </View>
+    )
+  },
+)
+
+TimeInput.displayName = 'TimeInput'
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    height: 40,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  text: {
+    fontSize: 16,
+    flex: 1,
+  },
+  icon: {
+    marginRight: 10,
+  },
+})

package/src/components/form/types.ts

@@ -0,0 +1,4 @@
+import { BaseFieldProps, Field } from '@chem-po/react'
+import { StyleProp } from 'react-native'
+
+export type FieldProps<T extends Field> = BaseFieldProps<StyleProp<any>, T>

package/src/components/form/view/file.tsx

@@ -0,0 +1,59 @@
+import { ImageViewOptions } from '@chem-po/core'
+import { FileField } from '@chem-po/react'
+import { useMemo } from 'react'
+import { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { FileView } from '../input/file'
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+  },
+  rowContainer: {
+    flexDirection: 'row',
+  },
+  label: {
+    paddingRight: 8,
+    opacity: 0.7,
+    fontWeight: '600',
+  },
+  emptyText: {
+    opacity: 0.7,
+  },
+  fileContainer: {
+    padding: 4,
+  },
+})
+
+export const FileFieldView = ({
+  field,
+  value,
+  noLabel,
+  style,
+}: {
+  field: FileField
+  value: any
+  noLabel?: boolean
+  style?: ViewStyle
+}) => {
+  const { imageOptions, placeholder } = field
+  const options = useMemo<ImageViewOptions>(
+    () => ({
+      height: 150,
+      ...imageOptions,
+    }),
+    [imageOptions],
+  )
+
+  return (
+    <View style={[value ? styles.container : styles.rowContainer, style]}>
+      {!noLabel && <Text style={styles.label}>{placeholder}</Text>}
+      {value ? (
+        <View style={styles.fileContainer}>
+          <FileView imageOptions={options} value={value} />
+        </View>
+      ) : (
+        <Text style={styles.emptyText}>None</Text>
+      )}
+    </View>
+  )
+}

package/src/components/form/view/index.tsx

@@ -0,0 +1,77 @@
+import { formatField } from '@chem-po/core'
+import { Field } from '@chem-po/react'
+import { useMemo } from 'react'
+import { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { FileFieldView } from './file'
+import { MultipleSelectFieldView } from './multipleSelect'
+import { SelectFieldView } from './select'
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  label: {
+    paddingRight: 8,
+    opacity: 0.7,
+    fontWeight: '600',
+  },
+  value: {
+    opacity: 1,
+  },
+  valueEmpty: {
+    opacity: 0.6,
+  },
+})
+
+const DefaultFieldView = ({
+  field,
+  value,
+  noLabel,
+  style,
+}: {
+  field: Field
+  value: any
+  noLabel?: boolean
+  style?: ViewStyle
+}) => {
+  const { placeholder } = field
+
+  const formatted = useMemo(() => {
+    const format = formatField[field._type]
+    if (!format) return value
+    return format(field, value)
+  }, [value, field])
+
+  return (
+    <View style={[styles.container, style]}>
+      {!noLabel && <Text style={styles.label}>{placeholder}</Text>}
+      <Text style={value !== undefined && value !== null ? styles.value : styles.valueEmpty}>
+        {formatted ?? 'None'}
+      </Text>
+    </View>
+  )
+}
+
+export const FieldView = ({
+  field,
+  value,
+  noLabel,
+  style,
+}: {
+  field: Field
+  value: any
+  noLabel?: boolean
+  style?: ViewStyle
+}) => {
+  switch (field._type) {
+    case 'select':
+      return <SelectFieldView style={style} field={field} value={value} noLabel={noLabel} />
+    case 'multipleSelect':
+      return <MultipleSelectFieldView style={style} field={field} value={value} noLabel={noLabel} />
+    case 'file':
+      return <FileFieldView style={style} field={field} value={value} noLabel={noLabel} />
+    default:
+      return <DefaultFieldView style={style} field={field} value={value} noLabel={noLabel} />
+  }
+}

package/src/components/form/view/multipleSelect.tsx

@@ -0,0 +1,52 @@
+import { MultipleSelectField } from '@chem-po/react'
+import { StyleSheet, Text, useColorScheme, View, ViewStyle } from 'react-native'
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    maxWidth: '100%',
+  },
+  label: {
+    paddingRight: 8,
+    opacity: 0.7,
+    fontWeight: '600',
+  },
+  optionContainer: {
+    padding: 2,
+  },
+  emptyText: {
+    opacity: 0.6,
+  },
+})
+
+export const MultipleSelectFieldView = ({
+  field,
+  value,
+  noLabel,
+  style,
+}: {
+  field: MultipleSelectField
+  value: any[]
+  noLabel?: boolean
+  style?: ViewStyle
+}) => {
+  const { placeholder, renderOption, getOptionKey } = field
+  const colorScheme = useColorScheme() ?? 'light'
+
+  return (
+    <View style={[styles.container, style]}>
+      {!noLabel && <Text style={styles.label}>{placeholder}</Text>}
+      {value ? (
+        value.map((v: any) => (
+          <View key={getOptionKey ? getOptionKey(v) : v} style={styles.optionContainer}>
+            {renderOption(v, colorScheme, true)}
+          </View>
+        ))
+      ) : (
+        <Text style={styles.emptyText}>None</Text>
+      )}
+    </View>
+  )
+}

package/src/components/form/view/select.tsx

@@ -0,0 +1,41 @@
+import { SelectField, usePlaceholderColor } from '@chem-po/react'
+import { StyleSheet, Text, useColorScheme, View, ViewStyle } from 'react-native'
+import { Txt } from '../../text'
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  label: {
+    paddingRight: 10,
+    fontWeight: '600',
+  },
+})
+
+const DefaultRenderOption = (value: any) => {
+  return <Txt>{typeof value === 'string' ? value : JSON.stringify(value)}</Txt>
+}
+
+export const SelectFieldView = ({
+  field,
+  value,
+  noLabel,
+  style,
+}: {
+  field: SelectField
+  value: any
+  noLabel?: boolean
+  style?: ViewStyle
+}) => {
+  const { placeholder, renderOption: customRender } = field
+  const colorScheme = useColorScheme() ?? 'light'
+  const placeholderColor = usePlaceholderColor()
+  const renderOption = customRender ?? DefaultRenderOption
+  return (
+    <View style={[styles.container, style]}>
+      {!noLabel && <Text style={[styles.label, { color: placeholderColor }]}>{placeholder}</Text>}
+      {value ? renderOption(value, colorScheme, true) : 'None'}
+    </View>
+  )
+}

package/src/components/icons/index.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react'
+import { Path, Svg } from 'react-native-svg'
+
+interface IconProps {
+  size?: number
+  color?: string
+}
+
+export const ChevronDownIcon: FC<IconProps> = ({ size = 24, color = '#000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill={color} />
+  </Svg>
+)
+
+export const ChevronUpIcon: FC<IconProps> = ({ size = 24, color = '#000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z" fill={color} />
+  </Svg>
+)
+
+export const TrashIcon: FC<IconProps> = ({ size = 24, color = '#000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+      fill={color}
+    />
+  </Svg>
+)

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from './box'
+export * from './button'
+export * from './feed'
+export * from './form'
+export * from './loading'
+export * from './overlay'
+export * from './text'
+export * from './theme'

package/src/components/loading/CircularProgress.tsx

@@ -0,0 +1,53 @@
+import { useColorModeValue } from '@chem-po/react'
+import { useEffect, useRef } from 'react'
+import {
+  ActivityIndicator,
+  ActivityIndicatorProps,
+  Animated,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native'
+
+export const CircularProgress = ({
+  color,
+  trackColor,
+  animating,
+  visible = true,
+  viewStyle,
+  ...props
+}: ActivityIndicatorProps & {
+  trackColor?: string
+  viewStyle?: StyleProp<ViewStyle>
+  visible?: boolean
+}) => {
+  const defaultTrackColor = useColorModeValue('#959595', '#575757')
+  const opacity = useRef(new Animated.Value(visible ? 1 : 0)).current
+
+  useEffect(() => {
+    Animated.timing(opacity, {
+      toValue: visible ? 1 : 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start()
+  }, [visible, opacity])
+  return (
+    <Animated.View style={[styles.container, { opacity }, viewStyle]}>
+      <ActivityIndicator
+        color={trackColor ?? defaultTrackColor} // Lighter version of your color
+        style={StyleSheet.absoluteFill}
+        animating={false}
+        {...props}
+      />
+      {/* Spinning circle */}
+      <ActivityIndicator animating={animating} color={color ?? '#575757'} {...props} />
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/components/loading/Loading.tsx

@@ -0,0 +1,181 @@
+import { ThemedAsset, useAppAssets, useTheme } from '@chem-po/react'
+import LottieView from 'lottie-react-native'
+import { useMemo } from 'react'
+import { Image, StyleSheet, Text, View, ViewStyle } from 'react-native'
+
+export const LottieLoadingLogo = ({
+  size = 30,
+  isLoading,
+  speed = 2,
+  inFeed,
+  asset,
+}: {
+  size?: number
+  color?: string
+  isLoading: boolean
+  asset: ThemedAsset
+  inFeed?: boolean
+  speed?: number
+}) => {
+  const { colorMode } = useTheme()
+  const animationData = useMemo(
+    () =>
+      inFeed
+        ? (asset.dark ?? asset.default)
+        : colorMode === 'dark'
+          ? (asset.dark ?? asset.default)
+          : asset.default,
+    [asset, inFeed, colorMode],
+  )
+
+  const style = useMemo(
+    () => ({
+      width: size,
+      height: size,
+      opacity: isLoading ? 0.85 : 0,
+    }),
+    [size, isLoading],
+  )
+
+  return <LottieView source={animationData} autoPlay={isLoading} loop speed={speed} style={style} />
+}
+
+const SVGLoadingLogo = ({
+  size = 30,
+  isLoading,
+  asset,
+  inFeed,
+}: {
+  size?: number
+  isLoading: boolean
+  asset: ThemedAsset
+  inFeed?: boolean
+}) => {
+  const { colorMode } = useTheme()
+  const svg = useMemo(
+    () =>
+      inFeed
+        ? (asset.dark ?? asset.default)
+        : colorMode === 'dark'
+          ? (asset.dark ?? asset.default)
+          : asset.default,
+    [asset, inFeed, colorMode],
+  )
+
+  const style = useMemo(
+    () => ({
+      width: size,
+      height: size,
+      opacity: isLoading ? 0.85 : 0,
+    }),
+    [size, isLoading],
+  )
+
+  return <Image source={{ uri: svg }} style={style} />
+}
+
+const LoadingBody = ({ isLoading, size }: { isLoading: boolean; size?: number }) => {
+  const { loading } = useAppAssets()
+  if (loading.lottieJson)
+    return <LottieLoadingLogo isLoading={isLoading} size={size} asset={loading.lottieJson} />
+  if (loading.svg) return <SVGLoadingLogo isLoading={isLoading} size={size} asset={loading.svg} />
+  return null
+}
+
+export const LoadingLogo = ({
+  isLoading,
+  size,
+  inFeed,
+}: {
+  isLoading: boolean
+  size?: number
+  inFeed?: boolean
+}) => {
+  const { loading } = useAppAssets()
+  if (loading.lottieJson)
+    return (
+      <LottieLoadingLogo
+        inFeed={inFeed}
+        isLoading={isLoading}
+        size={size}
+        asset={loading.lottieJson}
+      />
+    )
+  if (loading.svg)
+    return <SVGLoadingLogo inFeed={inFeed} isLoading={isLoading} size={size} asset={loading.svg} />
+  return <Text style={styles.errorText}>ERROR: No loading animation found</Text>
+}
+
+export const Loading = ({
+  text = 'Loading...',
+  inBox,
+  containerStyle,
+}: {
+  text?: string
+  inBox?: boolean
+  containerStyle?: ViewStyle
+}) => {
+  const body = (
+    <View style={[styles.loadingContainer, containerStyle]}>
+      <LoadingBody isLoading />
+      <Text style={styles.loadingText}>{text}</Text>
+    </View>
+  )
+  return inBox ? <View style={styles.boxContainer}>{body}</View> : body
+}
+
+export const LoadingOverlay = ({
+  isLoading,
+  text,
+  inFeed,
+  style,
+}: {
+  isLoading: boolean
+  text?: string
+  inFeed?: boolean
+  style?: ViewStyle
+}) => {
+  const { colorMode } = useTheme()
+  const bgColor = colorMode === 'dark' ? 'rgba(0, 0, 0, 0.53)' : 'rgba(255, 255, 255, 0.67)'
+
+  return (
+    <View
+      style={[styles.overlay, { backgroundColor: bgColor }, { opacity: isLoading ? 1 : 0 }, style]}>
+      {!text ? (
+        <LoadingLogo inFeed={inFeed} size={100} isLoading={isLoading} />
+      ) : (
+        <Loading text={text} />
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  loadingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+  },
+  loadingText: {
+    opacity: 0.8,
+    fontSize: 14,
+    marginLeft: 8,
+  },
+  boxContainer: {
+    padding: 16,
+    borderRadius: 8,
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorText: {
+    color: 'red',
+  },
+})