@neko-os/ui 0.5.3 → 0.6.0

package/src/components/inputs/dateWheelPicker/QuarterWheelPicker.js

@@ -0,0 +1,61 @@
+import { useMemo } from 'react'
+import dayjs from 'dayjs'
+
+import { ClearLink } from '../../actions/ClearLink'
+import { View } from '../../structure'
+import { WheelPicker } from '../WheelPicker'
+
+const QUARTERS = [
+  { value: 1, label: 'Q1' },
+  { value: 2, label: 'Q2' },
+  { value: 3, label: 'Q3' },
+  { value: 4, label: 'Q4' },
+]
+
+function getYearOptions(min, max) {
+  const minYear = min ? dayjs(min).year() : dayjs().year() - 100
+  const maxYear = max ? dayjs(max).year() : dayjs().year() + 100
+  const options = []
+  for (let y = minYear; y <= maxYear; y++) options.push({ value: y, label: String(y) })
+  return options
+}
+
+export function QuarterWheelPicker({ value, onChange, min, max, allowClear }) {
+  const current = value ? dayjs(value) : dayjs()
+  const quarter = Math.floor(current.month() / 3) + 1
+  const year = current.year()
+
+  const yearOptions = useMemo(() => getYearOptions(min, max), [min, max])
+
+  const handleQuarterChange = (q) => {
+    onChange?.(
+      dayjs()
+        .year(year)
+        .month((q - 1) * 3)
+        .startOf('month')
+    )
+  }
+
+  const handleYearChange = (y) => {
+    onChange?.(
+      dayjs()
+        .year(y)
+        .month((quarter - 1) * 3)
+        .startOf('month')
+    )
+  }
+
+  return (
+    <View>
+      <View row>
+        <View flex>
+          <WheelPicker options={QUARTERS} value={quarter} onChange={handleQuarterChange} />
+        </View>
+        <View flex>
+          <WheelPicker options={yearOptions} value={year} onChange={handleYearChange} />
+        </View>
+      </View>
+      <ClearLink hide={!allowClear} value={value} onChange={onChange} />
+    </View>
+  )
+}

package/src/components/inputs/dateWheelPicker/WeekWheelPicker.js

@@ -0,0 +1,66 @@
+import { useMemo } from 'react'
+import dayjs from 'dayjs'
+import weekOfYear from 'dayjs/esm/plugin/weekOfYear'
+
+import { ClearLink } from '../../actions/ClearLink'
+import { View } from '../../structure'
+import { WheelPicker } from '../WheelPicker'
+
+dayjs.extend(weekOfYear)
+
+function getWeekOptions(year) {
+  const options = []
+  let d = dayjs().year(year).startOf('year').startOf('week')
+
+  while (d.year() <= year) {
+    const weekStart = d
+    const weekEnd = d.endOf('week')
+    const label = `W${d.week()}  ${weekStart.format('MMM D')} - ${weekEnd.format('MMM D')}`
+    options.push({ value: d.week(), label, date: weekStart })
+    d = d.add(1, 'week')
+  }
+
+  return options
+}
+
+function getYearOptions(min, max) {
+  const minYear = min ? dayjs(min).year() : dayjs().year() - 100
+  const maxYear = max ? dayjs(max).year() : dayjs().year() + 100
+  const options = []
+  for (let y = minYear; y <= maxYear; y++) options.push({ value: y, label: String(y) })
+  return options
+}
+
+export function WeekWheelPicker({ value, onChange, min, max, allowClear }) {
+  const current = value ? dayjs(value) : dayjs()
+  const week = current.week()
+  const year = current.year()
+
+  const weekOptions = useMemo(() => getWeekOptions(year), [year])
+  const yearOptions = useMemo(() => getYearOptions(min, max), [min, max])
+
+  const handleWeekChange = (w) => {
+    const opt = weekOptions.find((o) => o.value === w)
+    if (opt) onChange?.(opt.date.startOf('week'))
+  }
+
+  const handleYearChange = (y) => {
+    const newWeeks = getWeekOptions(y)
+    const closest = newWeeks.find((o) => o.value === week) || newWeeks[0]
+    onChange?.(closest.date.startOf('week'))
+  }
+
+  return (
+    <View>
+      <View row>
+        <View flex>
+          <WheelPicker options={weekOptions} value={week} onChange={handleWeekChange} />
+        </View>
+        <View width={120}>
+          <WheelPicker options={yearOptions} value={year} onChange={handleYearChange} />
+        </View>
+      </View>
+      <ClearLink hide={!allowClear} value={value} onChange={onChange} />
+    </View>
+  )
+}

package/src/components/inputs/dateWheelPicker/YearWheelPicker.js

@@ -0,0 +1,35 @@
+import { View } from '../../structure'
+import { DayWheelPicker } from './DayWheelPicker'
+
+let DatePickerDate, DatePickerMonth
+try {
+  const dp = require('@quidone/react-native-wheel-picker').DatePicker
+  DatePickerDate = dp.Date
+  DatePickerMonth = dp.Month
+} catch {
+  DatePickerDate = null
+  DatePickerMonth = null
+}
+
+const renderHiddenDate = () => (
+  <View width={0} hiddenOverflow pointerEvents="none">
+    {DatePickerDate ? <DatePickerDate /> : null}
+  </View>
+)
+
+const renderHiddenMonth = () => (
+  <View width={0} hiddenOverflow pointerEvents="none">
+    {DatePickerMonth ? <DatePickerMonth /> : null}
+  </View>
+)
+
+export function YearWheelPicker({ value, ...props }) {
+  return (
+    <DayWheelPicker
+      {...props}
+      value={value?.startOf?.('year') ?? value}
+      renderDate={renderHiddenDate}
+      renderMonth={renderHiddenMonth}
+    />
+  )
+}

package/src/components/inputs/index.js

@@ -21,3 +21,7 @@ export * from './SegmentedPicker'
 export * from './Editable'
 export * from './upload/Upload'
 export * from './UploadInput'
+export * from './WheelPicker'
+export * from './dateWheelPicker/DateWheelPicker'
+export * from './NumberWheelInput'
+export * from './NumberWheelPicker'

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'