@neko-os/ui 0.5.4 → 0.6.1

package/src/components/inputs/upload/Upload.native.js

@@ -5,13 +5,11 @@ import { Icon } from '../../presentation/Icon'
 import { Link } from '../../actions/Link'
 import { Text } from '../../text/Text'
 import { View } from '../../structure/View'
+import { compressAssets } from '../../../helpers/compress'
+import { persistFile } from '../../../helpers/files'
+import { pickFromCamera, pickFromLibrary } from '../../../helpers/pickAssets'
 import { useUploadState } from './useUploadState'
 
-let ImagePicker
-try {
-  ImagePicker = require('expo-image-picker')
-} catch {}
-
 let DocumentPicker
 try {
   DocumentPicker = require('expo-document-picker')
@@ -28,17 +26,6 @@ function needsFilePicker(accept) {
   return parts.some((p) => !p.startsWith('image/'))
 }
 
-function normalizeImageResult(asset) {
-  return {
-    uri: asset.uri,
-    name: asset.fileName || asset.uri.split('/').pop(),
-    type: asset.mimeType || asset.type || 'image/jpeg',
-    size: asset.fileSize || asset.filesize,
-    width: asset.width,
-    height: asset.height,
-  }
-}
-
 function normalizeDocumentResult(doc) {
   return {
     uri: doc.uri,
@@ -56,53 +43,74 @@ function getMediaTypes(accept) {
   return undefined
 }
 
-export function Upload({ children, onChange, onUpload, value: valueProp, accept, multiple = false, maxCount, disabled = false, ...props }) {
+export function Upload({ children, onChange, onUpload, value: valueProp, accept, multiple = false, maxCount, disabled = false, persistTo, saveToLibrary, compress = true, ...props }) {
   const { value, addFiles, remove } = useUploadState({ onUpload, onChange, multiple, maxCount, value: valueProp })
   const [open, setOpen] = useState(false)
 
+  const commitFiles = useCallback(
+    async (assets) => {
+      const compressOpts = typeof compress === 'object' ? compress : {}
+      const processed = compress !== false ? await compressAssets(assets, compressOpts) : assets
+      if (persistTo && !onUpload) {
+        addFiles(processed.map((a) => ({ ...a, uri: persistFile(a.uri, persistTo, { name: a.name }) })))
+      } else {
+        addFiles(processed)
+      }
+    },
+    [compress, persistTo, onUpload, addFiles]
+  )
+
   const handlePress = useCallback(() => {
     if (disabled) return
     setOpen(true)
   }, [disabled])
 
+  // NOTE: keep the drawer OPEN while presenting the native picker, and close it
+  // only after the picker returns. The drawer is a RN <Modal>; closing it first
+  // makes the picker present from a modal that's mid-dismiss (and then unmounts
+  // under the picker) -> iOS present/dismiss collision that freezes the screen on
+  // the second open. Closing in `finally` avoids any concurrent modal transition.
   const handleCamera = useCallback(async () => {
-    setOpen(false)
-    if (!ImagePicker) return
-    const permission = await ImagePicker.requestCameraPermissionsAsync()
-    if (!permission.granted) return
-    const result = await ImagePicker.launchCameraAsync({
-      allowsMultipleSelection: multiple,
-      selectionLimit: maxCount || 0,
-      mediaTypes: getMediaTypes(accept),
-    })
-    if (result.canceled) return
-    addFiles(result.assets.map(normalizeImageResult))
-  }, [multiple, maxCount, accept, addFiles])
+    try {
+      const result = await pickFromCamera({
+        multiple, maxCount, compress, saveToLibrary,
+        mediaTypes: getMediaTypes(accept),
+        persistTo: !onUpload ? persistTo : undefined,
+      })
+      if (multiple ? !result.length : !result) return
+      addFiles(multiple ? result : [result])
+    } finally {
+      setOpen(false)
+    }
+  }, [multiple, maxCount, accept, compress, saveToLibrary, onUpload, persistTo, addFiles])
 
   const handleLibrary = useCallback(async () => {
-    setOpen(false)
-    if (!ImagePicker) return
-    const permission = await ImagePicker.requestMediaLibraryPermissionsAsync()
-    if (!permission.granted) return
-    const result = await ImagePicker.launchImageLibraryAsync({
-      allowsMultipleSelection: multiple,
-      selectionLimit: maxCount || 0,
-      mediaTypes: getMediaTypes(accept),
-    })
-    if (result.canceled) return
-    addFiles(result.assets.map(normalizeImageResult))
-  }, [multiple, maxCount, accept, addFiles])
+    try {
+      const result = await pickFromLibrary({
+        multiple, maxCount, compress,
+        mediaTypes: getMediaTypes(accept),
+        persistTo: !onUpload ? persistTo : undefined,
+      })
+      if (multiple ? !result.length : !result) return
+      addFiles(multiple ? result : [result])
+    } finally {
+      setOpen(false)
+    }
+  }, [multiple, maxCount, accept, compress, onUpload, persistTo, addFiles])
 
   const handleFiles = useCallback(async () => {
-    setOpen(false)
-    if (!DocumentPicker) return
-    const result = await DocumentPicker.getDocumentAsync({
-      multiple,
-      type: accept || '*/*',
-    })
-    if (result.canceled) return
-    addFiles(result.assets.map(normalizeDocumentResult))
-  }, [multiple, accept, addFiles])
+    if (!DocumentPicker) return setOpen(false)
+    try {
+      const result = await DocumentPicker.getDocumentAsync({
+        multiple,
+        type: accept || '*/*',
+      })
+      if (result.canceled) return
+      commitFiles(result.assets.map(normalizeDocumentResult))
+    } finally {
+      setOpen(false)
+    }
+  }, [multiple, accept, commitFiles])
 
   const showCamera = acceptsImages(accept)
   const showLibrary = acceptsImages(accept)

package/src/components/inputs/upload/useUploadState.js

@@ -5,6 +5,13 @@ function toArray(val) {
   return Array.isArray(val) ? val : [val]
 }
 
+// Stable identity for a file item. Newly picked files get an internal `_id`;
+// externally-provided value items (e.g. persisted records) are keyed by their
+// own `id`, so consumers never need to stamp `_id` themselves.
+function keyOf(file) {
+  return file?._id ?? file?.id
+}
+
 export function useUploadState({ onUpload, onChange, multiple, maxCount, value: valueProp }) {
   const [inFlight, setInFlight] = useState([])
   const [committed, setCommitted] = useState(null)
@@ -125,12 +132,13 @@ export function useUploadState({ onUpload, onChange, multiple, maxCount, value:
   const remove = useCallback(
     (file) => {
       if (!file) return
+      const key = keyOf(file)
 
-      setInFlight((prev) => prev.filter((f) => f._id !== file._id))
+      setInFlight((prev) => prev.filter((f) => keyOf(f) !== key))
 
       const ext = externalArrayRef.current
-      if (ext.some((f) => f._id === file._id)) {
-        const next = ext.filter((f) => f._id !== file._id)
+      if (ext.some((f) => keyOf(f) === key)) {
+        const next = ext.filter((f) => keyOf(f) !== key)
         const val = multiple ? next : next[0] || null
         if (!isControlled) setCommitted(val)
         onChangeRef.current?.(val)

package/src/components/measurements/FeetInchesInput.js

@@ -0,0 +1,91 @@
+import React from 'react'
+
+import { BottomDrawer } from '../modals/bottomDrawer'
+import { LinkInput } from '../inputs/LinkInput'
+import { NumberInput } from '../inputs'
+import { View } from '../structure'
+import { WheelPicker } from '../inputs/WheelPicker'
+import { useResponsiveValue } from '../../responsive'
+
+const USE_BOTTOM_DRAWER = { native: true, sm: true, md: true }
+
+function formatFeetInches(value) {
+  const { feet = 0, inches = 0 } = value || {}
+  if (!value || (!feet && !inches)) return ''
+  return `${feet}'${inches}"`
+}
+
+function FeetInchesInline({ value, onChange, label, ...props }) {
+  const { feet, inches } = value || {}
+
+  return (
+    <View row gap="sm" toBottom>
+      <NumberInput
+        value={feet}
+        onChange={(newFeet) => onChange({ feet: newFeet, inches })}
+        min={0}
+        precision={0}
+        flex
+        label={label}
+        {...props}
+        suffix="ft"
+      />
+      <NumberInput
+        value={inches}
+        onChange={(newInches) => onChange({ feet, inches: newInches })}
+        min={0}
+        max={11}
+        precision={0}
+        flex
+        {...props}
+        suffix="in"
+      />
+    </View>
+  )
+}
+
+const FEET_OPTIONS = Array.from({ length: 9 }, (_, i) => ({ label: i, value: i }))
+const INCH_OPTIONS = Array.from({ length: 12 }, (_, i) => ({ label: i, value: i }))
+
+function FeetInchesDrawer({ value, onChange, label, ...props }) {
+  const [open, setOpen] = React.useState(false)
+  const { feet = 0, inches = 0 } = value || {}
+
+  return (
+    <>
+      <LinkInput
+        value={formatFeetInches(value)}
+        placeholder={label || props.placeholder}
+        onPress={() => setOpen(true)}
+        {...props}
+      />
+      <BottomDrawer open={open} onClose={() => setOpen(false)} snapPoints={[350]}>
+        <View row gap="sm" center flex padding="md">
+          <View flex>
+            <WheelPicker
+              options={FEET_OPTIONS}
+              value={feet}
+              suffix="ft"
+              onChange={(f) => onChange({ feet: f, inches })}
+            />
+          </View>
+          <View flex>
+            <WheelPicker
+              options={INCH_OPTIONS}
+              value={inches}
+              suffix="in"
+              onChange={(i) => onChange({ feet, inches: i })}
+            />
+          </View>
+        </View>
+      </BottomDrawer>
+    </>
+  )
+}
+
+export function FeetInchesInput(props) {
+  const shouldUseDrawer = useResponsiveValue(USE_BOTTOM_DRAWER)
+
+  if (shouldUseDrawer) return <FeetInchesDrawer {...props} />
+  return <FeetInchesInline {...props} />
+}

package/src/components/measurements/LengthInput.js

@@ -0,0 +1,32 @@
+import { NumberInput } from '../inputs'
+import { fixedDecimals } from '../../helpers/numbers'
+import { LENGTH_CONVERTERS, LENGTH_IMPERIAL_DEFAULTS } from './helpers/length'
+import { useIsImperial } from './MeasurementHandler'
+import { useLocalInputValue } from './useLocalInputValue'
+import { FeetInchesInput } from './FeetInchesInput'
+
+export function LengthInput({
+  value,
+  onChange,
+  measurementSystem,
+  metricPrecision = 'cm',
+  imperialPrecision,
+  ...props
+}) {
+  const isImperial = useIsImperial(measurementSystem)
+  const impPrec = imperialPrecision || LENGTH_IMPERIAL_DEFAULTS[metricPrecision] || 'ft+in'
+  const converter = isImperial ? LENGTH_CONVERTERS[metricPrecision]?.[impPrec] : null
+  const isFtIn = isImperial && impPrec === 'ft+in' && !!converter
+
+  const Input = isFtIn ? FeetInchesInput : NumberInput
+  const suffix = isFtIn ? false : converter ? impPrec : metricPrecision
+
+  let formattedValue
+  if (isFtIn) formattedValue = converter.to(value)
+  else if (converter) formattedValue = fixedDecimals(converter.to(value))
+  else formattedValue = fixedDecimals(value)
+
+  const [localValue, handleChange] = useLocalInputValue({ value, formattedValue, suffix, onChange, converter })
+
+  return <Input {...props} value={localValue} onChange={handleChange} suffix={suffix} />
+}

package/src/components/measurements/LengthText.js

@@ -0,0 +1,10 @@
+import { Text } from '../text'
+import { useLengthFormatter } from './useLengthFormatter'
+
+export function LengthText({ value, measurementSystem, metricPrecision, imperialPrecision, withoutSuffix, ...props }) {
+  const format = useLengthFormatter({ measurementSystem, metricPrecision, imperialPrecision, withoutSuffix })
+
+  if (!value && value !== 0) return false
+
+  return <Text {...props}>{format(value)}</Text>
+}

package/src/components/measurements/MeasurementHandler.js

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { detectMeasurementSystem } from './helpers/detectMeasurementSystem'
+
+const MeasurementContext = React.createContext(null)
+
+export function MeasurementHandler({ children, measurementSystem }) {
+  const value = React.useMemo(() => ({ measurementSystem }), [measurementSystem])
+
+  return <MeasurementContext.Provider value={value}>{children}</MeasurementContext.Provider>
+}
+
+export function useMeasurementSystem(override) {
+  const ctx = React.useContext(MeasurementContext)
+
+  return React.useMemo(() => {
+    if (override) return override
+    if (ctx?.measurementSystem) return ctx.measurementSystem
+    return detectMeasurementSystem()
+  }, [override, ctx?.measurementSystem])
+}
+
+export function useIsImperial(override) {
+  const system = useMeasurementSystem(override)
+  return system === 'imperial'
+}

package/src/components/measurements/WeightInput.js

@@ -0,0 +1,25 @@
+import { NumberInput } from '../inputs'
+import { fixedDecimals } from '../../helpers/numbers'
+import { WEIGHT_CONVERTERS, WEIGHT_IMPERIAL_DEFAULTS } from './helpers/weight'
+import { useIsImperial } from './MeasurementHandler'
+import { useLocalInputValue } from './useLocalInputValue'
+
+export function WeightInput({
+  value,
+  onChange,
+  measurementSystem,
+  metricPrecision = 'kg',
+  imperialPrecision,
+  ...props
+}) {
+  const isImperial = useIsImperial(measurementSystem)
+  const impPrec = imperialPrecision || WEIGHT_IMPERIAL_DEFAULTS[metricPrecision] || 'lbs'
+  const converter = isImperial ? WEIGHT_CONVERTERS[metricPrecision]?.[impPrec] : null
+
+  const suffix = converter ? impPrec : metricPrecision
+  const formattedValue = converter ? fixedDecimals(converter.to(value)) : fixedDecimals(value)
+
+  const [localValue, handleChange] = useLocalInputValue({ value, formattedValue, suffix, onChange, converter })
+
+  return <NumberInput {...props} value={localValue} onChange={handleChange} suffix={suffix} />
+}

package/src/components/measurements/WeightText.js

@@ -0,0 +1,10 @@
+import { Text } from '../text'
+import { useWeightFormatter } from './useWeightFormatter'
+
+export function WeightText({ value, measurementSystem, metricPrecision, imperialPrecision, withoutSuffix, ...props }) {
+  const format = useWeightFormatter({ measurementSystem, metricPrecision, imperialPrecision, withoutSuffix })
+
+  if (!value && value !== 0) return false
+
+  return <Text {...props}>{format(value)}</Text>
+}

package/src/components/measurements/helpers/detectMeasurementSystem.js

@@ -0,0 +1,15 @@
+export function detectMeasurementSystem() {
+  try {
+    const locale = new Intl.Locale(navigator.language)
+    const info = locale.textInfo ?? locale.getTextInfo?.()
+    const ms = locale.measurementSystem ?? info?.measurementSystem
+    if (ms) return ['us', 'imperial'].includes(ms) ? 'imperial' : 'metric'
+
+    // Fallback: only US, Myanmar, Liberia use imperial
+    const lang = navigator.language || ''
+    if (lang.startsWith('en-US') || lang.startsWith('my-MM') || lang.startsWith('en-LR')) {
+      return 'imperial'
+    }
+  } catch {}
+  return 'metric'
+}

package/src/components/measurements/helpers/detectMeasurementSystem.native.js

@@ -0,0 +1,9 @@
+export function detectMeasurementSystem() {
+  try {
+    const Localization = require('expo-localization')
+    const locales = Localization.getLocales()
+    const ms = locales?.[0]?.measurementSystem
+    if (ms) return ['us', 'imperial'].includes(ms) ? 'imperial' : 'metric'
+  } catch {}
+  return 'metric'
+}

package/src/components/measurements/helpers/index.js

@@ -0,0 +1,2 @@
+export * from './length'
+export * from './weight'

package/src/components/measurements/helpers/length.js

@@ -0,0 +1,112 @@
+const CM_TO_INCH = 0.393701
+const CM_TO_FOOT = 0.0328084
+const CM_PER_M = 100
+const CM_PER_KM = 100000
+const MI_TO_KM = 1.60934
+
+export function cmToIn(cm) {
+  if (!cm) return cm
+  return cm * CM_TO_INCH
+}
+
+export function inToCm(inches) {
+  if (!inches) return inches
+  return inches / CM_TO_INCH
+}
+
+export function cmToFt(cm) {
+  if (!cm) return cm
+  return cm * CM_TO_FOOT
+}
+
+export function ftToCm(feet) {
+  if (!feet) return feet
+  return feet / CM_TO_FOOT
+}
+
+export function cmToFtIn(cm) {
+  if (!cm) return false
+  const totalInches = cmToIn(cm)
+  let feet = Math.floor(totalInches / 12)
+  let inches = Math.round(totalInches % 12)
+  if (inches === 12) {
+    feet += 1
+    inches = 0
+  }
+  return { feet, inches }
+}
+
+export function ftInToCm(value) {
+  if (!value) return false
+  const { feet, inches } = value || {}
+  const totalInches = (feet || 0) * 12 + (inches || 0)
+  return inToCm(totalInches)
+}
+
+export function cmToM(cm) {
+  if (!cm) return cm
+  return cm / CM_PER_M
+}
+
+export function mToCm(m) {
+  if (!m) return m
+  return m * CM_PER_M
+}
+
+export function mToFt(m) {
+  if (!m) return m
+  return cmToFt(m * CM_PER_M)
+}
+
+export function ftToM(ft) {
+  if (!ft) return ft
+  return ftToCm(ft) / CM_PER_M
+}
+
+export function mToFtIn(m) {
+  if (!m) return false
+  return cmToFtIn(m * CM_PER_M)
+}
+
+export function ftInToM(value) {
+  if (!value) return false
+  return ftInToCm(value) / CM_PER_M
+}
+
+export function mToIn(m) {
+  if (!m) return m
+  return cmToIn(m * CM_PER_M)
+}
+
+export function inToM(inches) {
+  if (!inches) return inches
+  return inToCm(inches) / CM_PER_M
+}
+
+export function kmToMi(km) {
+  if (!km) return km
+  return km / MI_TO_KM
+}
+
+export function miToKm(mi) {
+  if (!mi) return mi
+  return mi * MI_TO_KM
+}
+
+export const LENGTH_CONVERTERS = {
+  cm: {
+    'ft+in': { to: cmToFtIn, from: ftInToCm },
+    in: { to: cmToIn, from: inToCm },
+    ft: { to: cmToFt, from: ftToCm },
+  },
+  m: {
+    ft: { to: mToFt, from: ftToM },
+    'ft+in': { to: mToFtIn, from: ftInToM },
+    in: { to: mToIn, from: inToM },
+  },
+  km: {
+    mi: { to: kmToMi, from: miToKm },
+  },
+}
+
+export const LENGTH_IMPERIAL_DEFAULTS = { cm: 'ft+in', m: 'ft', km: 'mi' }

package/src/components/measurements/helpers/weight.js

@@ -0,0 +1,56 @@
+const KG_TO_LB = 2.20462
+const OZ_PER_LB = 16
+const G_PER_KG = 1000
+
+export function kgToLbs(kg) {
+  if (!kg) return kg
+  return kg * KG_TO_LB
+}
+
+export function lbsToKg(lbs) {
+  if (!lbs) return lbs
+  return lbs / KG_TO_LB
+}
+
+export function kgToOz(kg) {
+  if (!kg) return kg
+  return kg * KG_TO_LB * OZ_PER_LB
+}
+
+export function ozToKg(oz) {
+  if (!oz) return oz
+  return oz / (KG_TO_LB * OZ_PER_LB)
+}
+
+export function gToOz(g) {
+  if (!g) return g
+  return kgToOz(g / G_PER_KG)
+}
+
+export function ozToG(oz) {
+  if (!oz) return oz
+  return ozToKg(oz) * G_PER_KG
+}
+
+export function gToLbs(g) {
+  if (!g) return g
+  return kgToLbs(g / G_PER_KG)
+}
+
+export function lbsToG(lbs) {
+  if (!lbs) return lbs
+  return lbsToKg(lbs) * G_PER_KG
+}
+
+export const WEIGHT_CONVERTERS = {
+  kg: {
+    lbs: { to: kgToLbs, from: lbsToKg },
+    oz: { to: kgToOz, from: ozToKg },
+  },
+  g: {
+    oz: { to: gToOz, from: ozToG },
+    lbs: { to: gToLbs, from: lbsToG },
+  },
+}
+
+export const WEIGHT_IMPERIAL_DEFAULTS = { kg: 'lbs', g: 'oz' }

package/src/components/measurements/index.js

@@ -0,0 +1,9 @@
+export * from './helpers'
+export * from './MeasurementHandler'
+export * from './useLengthFormatter'
+export * from './useWeightFormatter'
+export * from './LengthText'
+export * from './WeightText'
+export * from './FeetInchesInput'
+export * from './LengthInput'
+export * from './WeightInput'

package/src/components/measurements/useLengthFormatter.js

@@ -0,0 +1,35 @@
+import { LENGTH_CONVERTERS, LENGTH_IMPERIAL_DEFAULTS } from './helpers/length'
+import { fixedDecimals } from '../../helpers/numbers'
+import { useIsImperial } from './MeasurementHandler'
+
+export function useLengthFormatter({
+  measurementSystem,
+  metricPrecision = 'cm',
+  imperialPrecision,
+  withoutSuffix,
+} = {}) {
+  const isImperial = useIsImperial(measurementSystem)
+  const impPrec = imperialPrecision || LENGTH_IMPERIAL_DEFAULTS[metricPrecision] || 'ft+in'
+
+  return (value) => {
+    if (!value && value !== 0) return null
+
+    if (isImperial) {
+      const converter = LENGTH_CONVERTERS[metricPrecision]?.[impPrec]
+      if (!converter) return `${fixedDecimals(value)} ${metricPrecision}`
+
+      const converted = converter.to(value)
+
+      if (impPrec === 'ft+in') {
+        const v = typeof converted === 'object' ? converted : { feet: 0, inches: 0 }
+        return `${v.feet}'${v.inches}"`
+      }
+
+      if (withoutSuffix) return fixedDecimals(converted)
+      return `${fixedDecimals(converted)} ${impPrec}`
+    }
+
+    if (withoutSuffix) return fixedDecimals(value)
+    return `${fixedDecimals(value)} ${metricPrecision}`
+  }
+}

package/src/components/measurements/useLocalInputValue.js

@@ -0,0 +1,32 @@
+import React from 'react'
+
+// Local display state for measurement inputs.
+// Resyncs when the unit changes or the value is changed externally,
+// without clobbering what the user is typing (their own onChange echoes back).
+export function useLocalInputValue({ value, formattedValue, suffix, onChange, converter }) {
+  const [localValue, setLocalValue] = React.useState(formattedValue)
+  const [prevSuffix, setPrevSuffix] = React.useState(suffix)
+  const lastEmitted = React.useRef(value)
+
+  if (suffix !== prevSuffix) {
+    setPrevSuffix(suffix)
+    setLocalValue(formattedValue)
+    lastEmitted.current = value
+  } else if (value !== lastEmitted.current) {
+    lastEmitted.current = value
+    setLocalValue(formattedValue)
+  }
+
+  function handleChange(newValue) {
+    setLocalValue(newValue)
+    if (!newValue && newValue !== 0) {
+      lastEmitted.current = newValue
+      return onChange(newValue)
+    }
+    const converted = converter ? converter.from(newValue) : newValue
+    lastEmitted.current = converted
+    onChange(converted)
+  }
+
+  return [localValue, handleChange]
+}