@chem-po/react-native 0.0.5 → 0.0.7

package/lib/typescript/tsup.config.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("tsup").Options | import("tsup").Options[] | ((overrideOptions: import("tsup").Options) => import("tsup").Options | import("tsup").Options[] | Promise<import("tsup").Options | import("tsup").Options[]>);
+export default _default;
+//# sourceMappingURL=tsup.config.d.ts.map

package/lib/typescript/tsup.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsup.config.d.ts","sourceRoot":"","sources":["../../tsup.config.ts"],"names":[],"mappings":";AAEA,wBAUE"}

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@chem-po/react-native",
-  "version": "0.0.5",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "version": "0.0.7",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -13,13 +16,29 @@
       },
       "require": {
         "default": "./dist/index.cjs"
-      }
+      },
+      "source": "./src/index.ts"
     }
   },
   "sideEffects": false,
   "license": "MIT",
   "files": [
-    "dist"
+    "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__",
+    "!**/.*"
   ],
   "dependencies": {
     "@expo/vector-icons": "^14.0.4",
@@ -41,8 +60,8 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.77.2",
-    "@chem-po/core": "0.0.5",
-    "@chem-po/react": "0.0.5"
+    "@chem-po/react": "0.0.7",
+    "@chem-po/core": "0.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -54,8 +73,8 @@
     "babel-plugin-react-native-web": "^0.19.10",
     "expo-build-properties": "~0.13.3",
     "expo-dev-client": "~5.0.12",
+    "react-native-builder-bob": "^0.20.0",
     "storybook": "^8.5.3",
-    "tsup": "^8.0.1",
     "typescript": "^5.7.2",
     "vite": "^6.0.11"
   },
@@ -76,11 +95,28 @@
       ]
     }
   },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
   "scripts": {
     "type-check": "tsc --noEmit",
     "lint": "pnpm type-check && eslint \"src/**/*.ts*\" --fix --quiet",
-    "build": "tsup ./src/index.ts --tsconfig ./tsconfig.json --config ./tsup.config.ts",
-    "prebuild": "pnpm lint",
-    "clean": "rm -rf dist"
+    "build": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn example && yarn install",
+    "watch": "bob build --watch",
+    "clean": "rm -rf lib"
   }
 }

package/src/components/box/Center.tsx

@@ -0,0 +1,19 @@
+import { 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

@@ -0,0 +1,44 @@
+import { 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

@@ -0,0 +1,24 @@
+import { 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

@@ -0,0 +1,28 @@
+import { 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

@@ -0,0 +1,74 @@
+import { 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

@@ -0,0 +1,143 @@
+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,
+  children,
+  initExpanded = false,
+  nested,
+  alwaysExpanded,
+  iconColor = '#000',
+  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, 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?.({ isOpen, onClose })}
+    </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

@@ -0,0 +1,64 @@
+import { createContext, FC, useCallback, useContext, useMemo, useRef, useState } from 'react'
+import { View, ViewProps } from 'react-native'
+
+export const FullSizeContainer = ({
+  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, 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

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