@neko-os/ui 0.5.4 → 0.6.0

package/src/components/measurements/useWeightFormatter.js

@@ -0,0 +1,29 @@
+import { WEIGHT_CONVERTERS, WEIGHT_IMPERIAL_DEFAULTS } from './helpers/weight'
+import { fixedDecimals } from '../../helpers/numbers'
+import { useIsImperial } from './MeasurementHandler'
+
+export function useWeightFormatter({
+  measurementSystem,
+  metricPrecision = 'kg',
+  imperialPrecision,
+  withoutSuffix,
+} = {}) {
+  const isImperial = useIsImperial(measurementSystem)
+  const impPrec = imperialPrecision || WEIGHT_IMPERIAL_DEFAULTS[metricPrecision] || 'lbs'
+
+  return (value) => {
+    if (!value && value !== 0) return null
+
+    if (isImperial) {
+      const converter = WEIGHT_CONVERTERS[metricPrecision]?.[impPrec]
+      if (!converter) return `${fixedDecimals(value)} ${metricPrecision}`
+
+      const converted = converter.to(value)
+      if (withoutSuffix) return fixedDecimals(converted)
+      return `${fixedDecimals(converted)} ${impPrec}`
+    }
+
+    if (withoutSuffix) return fixedDecimals(value)
+    return `${fixedDecimals(value)} ${metricPrecision}`
+  }
+}

package/src/components/routing/ReturnButton.js

@@ -0,0 +1,20 @@
+import { Button } from '../actions'
+
+// Plain ReactJS (Vite/Next/CRA): react-router goBack via navigate(-1). require() in try/catch so a
+// web app without react-router-dom degrades gracefully instead of failing the module load.
+let useNavigate
+try {
+  useNavigate = require('react-router-dom').useNavigate
+} catch {
+  useNavigate = () => () => console.warn('ReturnButton: react-router-dom not installed.')
+}
+
+// A back/close Button. Defaults to a left-arrow icon that calls navigate(-1). `close` swaps to a
+// close icon; `icon` overrides the icon name; `onPress` overrides goBack. Extra props pass to the
+// Button (label, outline, size, color, etc.).
+export function ReturnButton({ icon, close, onPress, ...props }) {
+  const navigate = useNavigate()
+  const name = icon || (close ? 'close-line' : 'arrow-left-s-line')
+
+  return <Button icon={name} onPress={onPress || (() => navigate(-1))} {...props} />
+}

package/src/components/routing/ReturnButton.native.js

@@ -0,0 +1,20 @@
+import { Button } from '../actions'
+
+// react-navigation goBack. require() in try/catch so a native app without react-navigation degrades
+// gracefully instead of failing the module load.
+let useNavigation
+try {
+  useNavigation = require('@react-navigation/native').useNavigation
+} catch {
+  useNavigation = () => ({ goBack: () => console.warn('ReturnButton: @react-navigation/native not installed.') })
+}
+
+// A back/close Button. Defaults to a left-arrow icon that calls navigation.goBack(). `close` swaps to
+// a close icon; `icon` overrides the icon name; `onPress` overrides goBack. Extra props pass to the
+// Button (label, outline, size, color, etc.).
+export function ReturnButton({ icon, close, onPress, ...props }) {
+  const navigation = useNavigation()
+  const name = icon || (close ? 'close-line' : 'arrow-left-s-line')
+
+  return <Button icon={name} onPress={onPress || (() => navigation.goBack())} {...props} />
+}

package/src/components/routing/ReturnButton.web.js

@@ -0,0 +1,2 @@
+// react-native-web apps use react-navigation (like native), so reuse the native implementation.
+export { ReturnButton } from './ReturnButton.native'

package/src/components/routing/ReturnLink.js

@@ -0,0 +1,25 @@
+import { Icon } from '../presentation'
+import { Link } from '../actions'
+
+// Plain ReactJS (Vite/Next/CRA): react-router goBack via navigate(-1). require() in try/catch so a
+// web app without react-router-dom degrades gracefully instead of failing the module load.
+let useNavigate
+try {
+  useNavigate = require('react-router-dom').useNavigate
+} catch {
+  useNavigate = () => () => console.warn('ReturnLink: react-router-dom not installed.')
+}
+
+// A back/close Link: a Link wrapping an Icon. Defaults to a left-arrow that calls navigate(-1).
+// `close` swaps to a close icon; `icon` overrides the icon name entirely; `onPress` overrides goBack.
+// Extra props pass to the Icon (size, color, etc.).
+export function ReturnLink({ icon, close, onPress, ...props }) {
+  const navigate = useNavigate()
+  const name = icon || (close ? 'close-line' : 'arrow-left-s-line')
+
+  return (
+    <Link onPress={onPress || (() => navigate(-1))}>
+      <Icon name={name} {...props} />
+    </Link>
+  )
+}

package/src/components/routing/ReturnLink.native.js

@@ -0,0 +1,25 @@
+import { Icon } from '../presentation'
+import { Link } from '../actions'
+
+// react-navigation goBack. require() in try/catch so a native app without react-navigation degrades
+// gracefully instead of failing the module load.
+let useNavigation
+try {
+  useNavigation = require('@react-navigation/native').useNavigation
+} catch {
+  useNavigation = () => ({ goBack: () => console.warn('ReturnLink: @react-navigation/native not installed.') })
+}
+
+// A back/close Link: a Link wrapping an Icon. Defaults to a left-arrow that calls navigation.goBack().
+// `close` swaps to a close icon; `icon` overrides the icon name entirely; `onPress` overrides goBack.
+// Extra props pass to the Icon (size, color, etc.).
+export function ReturnLink({ icon, close, onPress, ...props }) {
+  const navigation = useNavigation()
+  const name = icon || (close ? 'close-line' : 'arrow-left-s-line')
+
+  return (
+    <Link onPress={onPress || (() => navigation.goBack())}>
+      <Icon name={name} {...props} />
+    </Link>
+  )
+}

package/src/components/routing/ReturnLink.web.js

@@ -0,0 +1,2 @@
+// react-native-web apps use react-navigation (like native), so reuse the native implementation.
+export { ReturnLink } from './ReturnLink.native'

package/src/components/routing/RoutedStepsContent.js

@@ -0,0 +1,21 @@
+import { ActiveStepContent } from '../steps'
+import { View } from '../structure'
+
+// Plain ReactJS (Vite/Next/CRA) fallback — no react-navigation. Renders the active step in place,
+// driven by StepsHandler's activeIndex, so a wizard built with these pieces still works on plain web
+// (just without native stack transitions). React Native / RNW use the .native variant.
+let warned = false
+
+// eslint-disable-next-line no-unused-vars -- absorb the native-only screenOptions so it doesn't leak onto View
+export function RoutedStepsContent({ screenOptions, ...props }) {
+  if (!warned) {
+    warned = true
+    console.warn('RoutedStepsContent is native-only (react-navigation). Rendering steps in place on plain web.')
+  }
+
+  return (
+    <View flex {...props}>
+      <ActiveStepContent />
+    </View>
+  )
+}

package/src/components/routing/RoutedStepsContent.native.js

@@ -0,0 +1,94 @@
+import React from 'react'
+
+import { View } from '../structure'
+import { useSteps } from '../steps'
+
+// Native-only deps. require() inside try/catch keeps web bundlers from pulling react-navigation into
+// the plain ReactJS build (which uses RoutedStepsContent.js instead).
+let NavigationContainer
+let NavigationIndependentTree
+let StackActions
+let createNativeStackNavigator
+let available = true
+try {
+  const nav = require('@react-navigation/native')
+  NavigationContainer = nav.NavigationContainer
+  NavigationIndependentTree = nav.NavigationIndependentTree
+  StackActions = nav.StackActions
+  createNativeStackNavigator = require('@react-navigation/native-stack').createNativeStackNavigator
+} catch {
+  available = false
+}
+
+let warned = false
+
+// Renders a step's content exactly like ActiveStepContent — raw, no wrapper. Any scroll/padding is
+// the consumer's call inside their own render/renderContent.
+const stepContent = (item) => {
+  const Content = item.render || item.renderContent || item.Content
+  return Content ? <Content /> : null
+}
+
+// The swapping content region — the routed equivalent of ActiveStepContent. Drop it inside any
+// StepsHandler, alongside whatever fixed chrome you want. It adds NO state of its own: StepsHandler
+// stays the single source of truth. This component just renders a self-contained native stack
+// (independent from the host NavigationContainer) and keeps it in sync with activeIndex both ways.
+export function RoutedStepsContent({ screenOptions, ...props }) {
+  const { items, activeIndex, moveToIndex } = useSteps()
+  const navRef = React.useRef(null)
+  const Stack = React.useRef(available ? createNativeStackNavigator() : null).current
+
+  // StepsHandler -> stack: when activeIndex changes (Next/Back buttons, StepsMenu, custom controls),
+  // drive the stack to the matching screen. Compare against the current TOP route (getCurrentRoute)
+  // and be explicit about direction: push forward, pop back. Using navigate() here is wrong — it can
+  // push a duplicate instead of popping. If the route already matches (e.g. a native gesture back
+  // already moved us), this is a no-op.
+  React.useEffect(() => {
+    const ref = navRef.current
+    if (!ref?.isReady?.()) return
+    const current = Number(ref.getCurrentRoute?.()?.name) || 0
+    if (activeIndex === current) return
+    ref.dispatch(
+      activeIndex > current ? StackActions.push(String(activeIndex)) : StackActions.popTo(String(activeIndex))
+    )
+  }, [activeIndex])
+
+  if (!available) {
+    if (!warned) {
+      warned = true
+      console.warn(
+        'RoutedStepsContent requires @react-navigation/native and @react-navigation/native-stack; neither is installed.'
+      )
+    }
+    return null
+  }
+
+  // stack -> StepsHandler: native gesture / hardware back changes the route without going through
+  // moveToIndex. Push that index back into StepsHandler (backward never validates, matching Steps).
+  const handleStateChange = () => {
+    const index = Number(navRef.current?.getCurrentRoute?.()?.name) || 0
+    if (index !== activeIndex) moveToIndex(index)
+  }
+
+  const navigator = (
+    <Stack.Navigator screenOptions={{ headerShown: false, ...screenOptions }}>
+      {items.map((item, index) => (
+        <Stack.Screen key={index} name={String(index)} options={{ title: item.label }}>
+          {() => stepContent(item)}
+        </Stack.Screen>
+      ))}
+    </Stack.Navigator>
+  )
+
+  // Self-contained: its own navigation world, independent of the host app's NavigationContainer, so
+  // it never touches the host back stack (react-navigation v7+).
+  return (
+    <View flex {...props}>
+      <NavigationIndependentTree>
+        <NavigationContainer ref={navRef} onStateChange={handleStateChange}>
+          {navigator}
+        </NavigationContainer>
+      </NavigationIndependentTree>
+    </View>
+  )
+}

package/src/components/routing/RoutedStepsContent.web.js

@@ -0,0 +1,3 @@
+// react-native-web: react-navigation runs fine here, and babel aliases react-native ->
+// react-native-web, so the native implementation is correct for RNW too.
+export { RoutedStepsContent } from './RoutedStepsContent.native'

package/src/components/routing/index.js

@@ -0,0 +1,3 @@
+export * from './RoutedStepsContent'
+export * from './ReturnLink'
+export * from './ReturnButton'

package/src/components/state/StatePresenter.js

@@ -24,7 +24,7 @@ export function StatePresenter({
   if (error) {
     return (
       <View flex center {...props}>
-        <Result type="error" title={errorTitle} description={errorDescription || error.message} />
+        <Result type="error" title={errorTitle} description={errorDescription || (typeof error === 'string' ? error : error.message)} />
       </View>
     )
   }

package/src/components/steps/StepsHandler.js

@@ -8,6 +8,7 @@ export function StepsHandler({ children, items, onSubmit, onValidateStep, onStep
   const [maxIndexReleased, setMaxIndexReleased] = React.useState(0)
   const [loading, setLoading] = React.useState(false)
   const activeStep = items[activeIndex]
+  const isFirstStep = activeIndex === 0
   const isLastStep = activeIndex === items.length - 1
 
   const moveToIndex = async (index) => {
@@ -44,6 +45,7 @@ export function StepsHandler({ children, items, onSubmit, onValidateStep, onStep
     activeStep,
     maxIndexReleased,
     loading,
+    isFirstStep,
     isLastStep,
     moveToNextStep,
     moveToPrevStep,

package/src/components/structure/TopBar.js

@@ -4,14 +4,24 @@ import { Text } from '../text'
 import { View } from './View'
 import { useDefaultModifier } from '../../modifiers/default'
 import { useResponsiveConverter } from '../../modifiers/responsiveConverter'
-import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
 const DEFAULT_PROPS = {
   borderB: 'overlayDivider',
+  titleProps: {
+    center: true,
+    size: 'h6',
+    numberOfLines: 1,
+  },
+  subtitleProps: {
+    center: true,
+    size: 'xs',
+    numberOfLines: 1,
+  },
 }
 
-export function TopBar({ right, left, WrapperView, children, ...rootProps }) {
+export function TopBar({ title, subtitle, right, left, WrapperView, children, ...rootProps }) {
   const { top: safeTop } = useSafeAreaInsets()
 
   const [_, props] = pipe(
@@ -19,7 +29,7 @@ export function TopBar({ right, left, WrapperView, children, ...rootProps }) {
     useDefaultModifier(DEFAULT_PROPS),
     useResponsiveConverter([])
   )([{}, rootProps])
-  let { useSafeArea = true, title, subtitle } = props
+  let { useSafeArea = true, titleProps, subtitleProps } = props
 
   const hasContent = !!title || !!subtitle || !!children || !!right || !!left
 
@@ -34,17 +44,9 @@ export function TopBar({ right, left, WrapperView, children, ...rootProps }) {
           </View>
 
           <View center flex={3}>
-            {children || (
-              <Text center h6 numberOfLines={1}>
-                {title}
-              </Text>
-            )}
-
-            {subtitle && (
-              <Text center xs numberOfLines={1}>
-                {subtitle}
-              </Text>
-            )}
+            {children || <Text {...titleProps}>{title}</Text>}
+
+            {subtitle && <Text {...subtitleProps}>{subtitle}</Text>}
           </View>
 
           <View flex={1} toRight>

package/src/components/theme/ThemePickerDrawer.js

@@ -3,7 +3,7 @@ import { ThemePicker } from './ThemePicker'
 
 export function ThemePickerDrawer({ open, onClose, onChange }) {
   return (
-    <BottomDrawer open={open} onClose={onClose} maxWidth={550} snapPoints={['50%', '85%']}>
+    <BottomDrawer open={open} onClose={onClose} maxWidth={550} snapPoints={['60%', '85%']} useSafeArea={false}>
       <DrawerScrollView padding="md">
         <ThemePicker onChange={onChange} />
       </DrawerScrollView>

package/src/helpers/compress.js

@@ -0,0 +1,61 @@
+const IMAGE_DEFAULTS = { maxWidth: 1920, maxHeight: 1920, quality: 0.8 }
+
+function isImage(asset) {
+  return asset?.type?.startsWith('image/')
+}
+
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = () => resolve(img)
+    img.onerror = reject
+    img.src = src
+  })
+}
+
+const ALPHA_TYPES = new Set(['image/png', 'image/webp', 'image/gif'])
+
+function compressWithCanvas(img, { maxWidth, maxHeight, quality, mimeType }) {
+  let { width, height } = img
+  if (width > maxWidth || height > maxHeight) {
+    const ratio = Math.min(maxWidth / width, maxHeight / height)
+    width = Math.round(width * ratio)
+    height = Math.round(height * ratio)
+  }
+
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  const ctx = canvas.getContext('2d')
+  ctx.drawImage(img, 0, 0, width, height)
+
+  const outputType = ALPHA_TYPES.has(mimeType) ? mimeType : 'image/jpeg'
+
+  return new Promise((resolve) => {
+    canvas.toBlob(
+      (blob) => resolve(blob ? { uri: URL.createObjectURL(blob), width, height } : null),
+      outputType,
+      quality
+    )
+  })
+}
+
+export async function compressAsset(asset, options = {}) {
+  if (!asset?.uri || !isImage(asset)) return asset
+
+  try {
+    const opts = { ...IMAGE_DEFAULTS, ...options.image }
+    const img = await loadImage(asset.uri)
+    const result = await compressWithCanvas(img, { ...opts, mimeType: asset.type })
+    if (!result) return asset
+    return { ...asset, uri: result.uri, width: result.width, height: result.height }
+  } catch (e) {
+    console.warn('[neko-ui compress] web image compression failed:', e?.message)
+    return asset
+  }
+}
+
+export function compressAssets(assets, options = {}) {
+  if (!assets?.length) return Promise.resolve(assets || [])
+  return Promise.all(assets.map((a) => compressAsset(a, options)))
+}

package/src/helpers/compress.native.js

@@ -0,0 +1,49 @@
+let ImageCompressor
+let VideoCompressor
+try {
+  const RNC = require('react-native-compressor')
+  ImageCompressor = RNC.Image
+  VideoCompressor = RNC.Video
+} catch {}
+
+const IMAGE_DEFAULTS = { maxWidth: 1920, maxHeight: 1920, quality: 0.8 }
+const VIDEO_DEFAULTS = { maxSize: 720 }
+
+function isImage(asset) {
+  return asset?.type?.startsWith('image/')
+}
+
+function isVideo(asset) {
+  return asset?.type?.startsWith('video/')
+}
+
+export async function compressAsset(asset, options = {}) {
+  if (!asset?.uri) return asset
+
+  if (isImage(asset) && ImageCompressor) {
+    try {
+      const uri = await ImageCompressor.compress(asset.uri, { ...IMAGE_DEFAULTS, ...options.image })
+      return { ...asset, uri }
+    } catch (e) {
+      console.warn('[neko-ui compress] image failed, keeping original:', e?.message)
+      return asset
+    }
+  }
+
+  if (isVideo(asset) && VideoCompressor) {
+    try {
+      const uri = await VideoCompressor.compress(asset.uri, { ...VIDEO_DEFAULTS, ...options.video })
+      return { ...asset, uri }
+    } catch (e) {
+      console.warn('[neko-ui compress] video failed, keeping original:', e?.message)
+      return asset
+    }
+  }
+
+  return asset
+}
+
+export function compressAssets(assets, options = {}) {
+  if (!assets?.length) return Promise.resolve(assets || [])
+  return Promise.all(assets.map((a) => compressAsset(a, options)))
+}

package/src/helpers/files.js

@@ -0,0 +1,7 @@
+// Web / non-native: no filesystem persistence. The uri (blob/object URL or
+// remote) is used as-is. Mirrors the native API surface.
+export function persistFile(uri) {
+  return uri
+}
+
+export function removeFile() {}

package/src/helpers/files.native.js

@@ -0,0 +1,55 @@
+let FS
+try {
+  FS = require('expo-file-system')
+} catch {}
+
+// `target="<base>/<subdir>"`, base is 'document' | 'cache'. Resolves to a
+// permanent Directory (created if missing) via the modern sync expo-file-system API.
+function resolveDir(target) {
+  const [base, ...rest] = (target || '').split('/').filter(Boolean)
+  if (base !== 'cache' && base !== 'document') {
+    console.warn(`[neko-ui files] target base "${base}" unknown — using document dir. Use "document" or "cache".`)
+  }
+  const root = base === 'cache' ? FS.Paths.cache : FS.Paths.document
+  const dir = new FS.Directory(root, ...rest)
+  try {
+    dir.create({ intermediates: true, idempotent: true })
+  } catch (e) {
+    console.warn('[neko-ui files] dir create failed:', e?.message)
+  }
+  return dir
+}
+
+let seq = 0
+
+// Copy a file at `uri` into a permanent app directory (`target`, default
+// 'document/files'). Returns the durable uri string. Never throws — on failure
+// or when expo-file-system is unavailable, returns the original uri.
+// `opts.name` is used only to derive the file extension (falls back to the uri,
+// then 'jpg'); the stored filename is always unique (timestamp + counter), so
+// rapid multi-select can't collide. Expects a `file://` source (e.g.
+// expo-image-picker output); `content://` sources can't be copied and fall back
+// to the original uri.
+export function persistFile(uri, target = 'document/files', { name } = {}) {
+  if (!FS || !uri) return uri
+  try {
+    const ext = name?.split('.').pop() || uri.split('?')[0].split('.').pop() || 'jpg'
+    const filename = `${Date.now()}_${seq++}_${Math.round(Math.random() * 1e6)}.${ext}`
+    const dest = new FS.File(resolveDir(target), filename)
+    new FS.File(uri).copy(dest)
+    return dest.uri
+  } catch (e) {
+    console.warn('[neko-ui files] persistFile failed, keeping uri:', e?.message)
+    return uri
+  }
+}
+
+// Delete a persisted file. No-op if missing / unavailable.
+export function removeFile(uri) {
+  if (!FS || !uri) return
+  try {
+    new FS.File(uri).delete()
+  } catch (e) {
+    console.warn('[neko-ui files] removeFile failed:', e?.message)
+  }
+}

package/src/helpers/index.js

@@ -1,7 +1,12 @@
+export * from './compress'
 export * from './debounce'
-export * from './string'
+export * from './files'
+export * from './media'
+export * from './numbers'
+export * from './pickAssets'
 export * from './random'
 export * from './storage'
+export * from './string'
 export * from './weekStart'
 export * from './weekStartSetup'
 export * from './../abstractions/helpers/useSafeAreaInsets'

package/src/helpers/media.js

@@ -0,0 +1,4 @@
+// Web / non-native: native camera & library pickers aren't available here.
+// (Upload's web implementation uses its own file-input flow.)
+export const openCamera = async () => []
+export const openLibrary = async () => []

package/src/helpers/media.native.js

@@ -0,0 +1,41 @@
+let ImagePicker
+try {
+  ImagePicker = require('expo-image-picker')
+} catch {}
+
+// Normalize an expo-image-picker asset into the shape neko-ui works with.
+// Internal — callers consume the already-normalized assets from openCamera/openLibrary.
+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,
+  }
+}
+
+// Request camera permission, launch the camera, return normalized assets.
+// Returns [] when expo-image-picker is missing, permission is denied, or the user
+// cancels. The caller owns post-processing (persist, save-to-library, closing any
+// drawer) — and any drawer should stay open until this resolves (iOS present/
+// dismiss collision otherwise).
+export async function openCamera(options = {}) {
+  if (!ImagePicker) return []
+  const permission = await ImagePicker.requestCameraPermissionsAsync()
+  if (!permission.granted) return []
+  const result = await ImagePicker.launchCameraAsync(options)
+  if (result.canceled) return []
+  return result.assets.map(normalizeImageResult)
+}
+
+// Same as openCamera but for the photo library.
+export async function openLibrary(options = {}) {
+  if (!ImagePicker) return []
+  const permission = await ImagePicker.requestMediaLibraryPermissionsAsync()
+  if (!permission.granted) return []
+  const result = await ImagePicker.launchImageLibraryAsync(options)
+  if (result.canceled) return []
+  return result.assets.map(normalizeImageResult)
+}

package/src/helpers/numbers.js

@@ -0,0 +1,13 @@
+import { is } from 'ramda'
+
+export function fixedDecimals(num, count = 2) {
+  if (!num) return num
+  if (Number.isInteger(num)) return num
+  if (is(String, num)) num = parseFloat(num)
+
+  const decimalPart = num.toString().split('.')[1]
+  if (decimalPart && decimalPart.length > count) {
+    return parseFloat(num.toFixed(count))
+  }
+  return num
+}

package/src/helpers/pickAssets.js

@@ -0,0 +1,7 @@
+export async function pickFromCamera({ multiple = false } = {}) {
+  return multiple ? [] : null
+}
+
+export async function pickFromLibrary({ multiple = false } = {}) {
+  return multiple ? [] : null
+}