@neko-os/ui 0.5.3 → 0.6.0

package/src/NekoUI.js

@@ -1,6 +1,7 @@
 import { initFirstDayOfWeek } from './helpers/weekStartSetup'
 import { DynamicStyleTag } from './DynamicStyleTag'
 import { I18nProvider } from './i18n'
+import { MeasurementHandler } from './components/measurements/MeasurementHandler'
 import { ModalsHandler } from './components/modals/modal/handler/ModalsHandler'
 import { NotificationsHandler } from './components/feedback/notifications/NotificationsHandler'
 import { OverlayHandler } from './components/structure/overlay/OverlayHandler'
@@ -12,23 +13,25 @@ import { useThemeHandler } from './theme'
 
 initFirstDayOfWeek()
 
-export function NekoUI({ children, i18n, ...props }) {
+export function NekoUI({ children, i18n, measurementSystem, ...props }) {
   return (
     <ThemeHandler {...props}>
       <DynamicStyleTag />
       <ResponsiveHandler>
-        <PortalHandler>
-          <ModalsHandler>
-            <I18nProvider i18n={i18n}>
-              <NotificationsHandler>
-                <OverlayHandler>
-                  {children}
-                  <FixedComponents />
-                </OverlayHandler>
-              </NotificationsHandler>
-            </I18nProvider>
-          </ModalsHandler>
-        </PortalHandler>
+        <MeasurementHandler measurementSystem={measurementSystem}>
+          <PortalHandler>
+            <ModalsHandler>
+              <I18nProvider i18n={i18n}>
+                <NotificationsHandler>
+                  <OverlayHandler>
+                    {children}
+                    <FixedComponents />
+                  </OverlayHandler>
+                </NotificationsHandler>
+              </I18nProvider>
+            </ModalsHandler>
+          </PortalHandler>
+        </MeasurementHandler>
       </ResponsiveHandler>
     </ThemeHandler>
   )

package/src/abstractions/Image.native.js

@@ -1,7 +1,7 @@
 import { Image as RNImage } from 'react-native'
 
 export function AbsImage({ src, source, resizeMode = 'cover', ...props }) {
-  if (!source && !!src) source = { uri: src }
+  if (!source && src != null) source = typeof src === 'string' ? { uri: src } : src
 
   return <RNImage source={source} resizeMode={resizeMode} {...props} />
 }

package/src/abstractions/Image.web.js

@@ -1,7 +1,7 @@
 import { Image as RNImage } from 'react-native'
 
 export function AbsImage({ src, source, resizeMode = 'cover', ...props }) {
-  if (!source && !!src) source = { uri: src }
+  if (!source && src != null) source = typeof src === 'string' ? { uri: src } : src
 
   return <RNImage source={source} resizeMode={resizeMode} {...props} />
 }

package/src/abstractions/WindowOverlay.js

@@ -0,0 +1,3 @@
+export function AbsWindowOverlay({ children }) {
+  return children
+}

package/src/abstractions/WindowOverlay.native.js

@@ -0,0 +1,21 @@
+import { Platform } from 'react-native'
+
+let AbsWindowOverlay = ({ children }) => children
+
+// iOS native-stack modals (presentation: 'modal') present a UIViewController above
+// the RN root view, covering anything rendered inside it regardless of zIndex.
+// FullWindowOverlay renders above presented view controllers and passes touches
+// through empty areas. On Android/web screens stay in the same window, so the
+// passthrough is enough.
+if (Platform.OS === 'ios') {
+  try {
+    const { FullWindowOverlay } = require('react-native-screens') || {}
+    if (FullWindowOverlay) {
+      AbsWindowOverlay = ({ children }) => <FullWindowOverlay>{children}</FullWindowOverlay>
+    }
+  } catch {
+    console.warn('react-native-screens not installed. Notifications may render behind native iOS modals.')
+  }
+}
+
+export { AbsWindowOverlay }

package/src/abstractions/helpers/storage.js

@@ -3,7 +3,7 @@ function set(key, value) {
 }
 
 function setAsync(key, value) {
-  return Promise.resulve(set(key, value))
+  return Promise.resolve(set(key, value))
 }
 
 function get(key) {
@@ -11,7 +11,7 @@ function get(key) {
 }
 
 function getAsync(key) {
-  return Promise.resulve(get(key))
+  return Promise.resolve(get(key))
 }
 
 function remove(key) {
@@ -19,7 +19,15 @@ function remove(key) {
 }
 
 function removeAsync(key) {
-  return Promise.resulve(remove(key))
+  return Promise.resolve(remove(key))
+}
+
+function clear() {
+  return localStorage.clear()
+}
+
+function clearAsync() {
+  return Promise.resolve(clear())
 }
 
 export const AbsStorage = {
@@ -29,4 +37,6 @@ export const AbsStorage = {
   getAsync,
   remove,
   removeAsync,
+  clear,
+  clearAsync,
 }

package/src/abstractions/helpers/storage.native.js

@@ -7,6 +7,9 @@ let getAsync = () => Promise.resolve(get())
 let remove = () => console.warn('expo-sqlite not installed. Neko Storage needs expo-sqlite to work properly')
 let removeAsync = () => Promise.resolve(remove())
 
+let clear = () => console.warn('expo-sqlite not installed. Neko Storage needs expo-sqlite to work properly')
+let clearAsync = () => Promise.resolve(clear())
+
 try {
   const StorageModule = require('expo-sqlite/kv-store')
   if (StorageModule?.default) {
@@ -19,6 +22,9 @@ try {
 
     remove = Storage.removeItemSync.bind(Storage)
     removeAsync = Storage.removeItem.bind(Storage)
+
+    clear = Storage.clearSync.bind(Storage)
+    clearAsync = Storage.clearAsync.bind(Storage)
   }
 } catch (e) {
   console.log('expo-sqlite not available:', e)
@@ -31,4 +37,6 @@ export const AbsStorage = {
   getAsync,
   remove,
   removeAsync,
+  clear,
+  clearAsync,
 }

package/src/components/feedback/notifications/NotificationsHandler.js

@@ -1,10 +1,11 @@
 import { is } from 'ramda'
 import React from 'react'
 
+import { AbsWindowOverlay } from '../../../abstractions/WindowOverlay'
 import { Notification } from './Notification'
-import { SafeAreaView } from '../../structure/SafeAreaView'
 import { View } from '../../structure/View'
 import { useResponsiveValue } from '../../../responsive/responsiveHooks'
+import { useSafeAreaInsets } from '../../../abstractions/helpers/useSafeAreaInsets'
 
 const NotificationsContext = React.createContext(null)
 
@@ -35,6 +36,7 @@ export function useNotifier() {
 
 export function NotificationsHandler({ children }) {
   const width = useResponsiveValue({ sm: '100%', df: 400 })
+  const insets = useSafeAreaInsets()
   const [messages, setMessages] = React.useState([])
 
   const add = React.useCallback((key, data) => {
@@ -52,13 +54,15 @@ export function NotificationsHandler({ children }) {
       {children}
 
       {!!messages.length && (
-        <View fixed top={0} right={0} padding="md" width={width} maxWidth="100%" pointerEvents="box-none" zIndex={600}>
-          <SafeAreaView gap="xs">
-            {messages.map(({ key, ...item }) => (
-              <Notification key={key} {...item} />
-            ))}
-          </SafeAreaView>
-        </View>
+        <AbsWindowOverlay>
+          <View fixed top={0} right={0} padding="md" width={width} maxWidth="100%" pointerEvents="box-none" zIndex={600}>
+            <View paddingT={insets.top} paddingR={insets.right} gap="xs" pointerEvents="box-none">
+              {messages.map(({ key, ...item }) => (
+                <Notification key={key} {...item} />
+              ))}
+            </View>
+          </View>
+        </AbsWindowOverlay>
       )}
     </NotificationsContext.Provider>
   )

package/src/components/form/useNewForm.js

@@ -64,11 +64,13 @@ export function useNewForm({ initialValues = {}, validate, onSubmit, onValuesCha
 
     const isTouched = (name) => {
       if (!name) return touchedRef.current.size > 0
+      if (Array.isArray(name)) return name.some((n) => touchedRef.current.has(toKey(n)))
       return touchedRef.current.has(toKey(name))
     }
 
     const isDirty = (name) => {
       if (!name) return dirtyRef.current.size > 0
+      if (Array.isArray(name)) return name.some((n) => dirtyRef.current.has(toKey(n)))
       return dirtyRef.current.has(toKey(name))
     }
 

package/src/components/index.js

@@ -19,4 +19,6 @@ export * from './theme'
 export * from './sections'
 export * from './filter'
 export * from './steps'
+export * from './routing'
 export * from './carousel'
+export * from './measurements'

package/src/components/inputs/DateInput.js

@@ -11,6 +11,7 @@ dayjs.extend(advancedFormat)
 dayjs.extend(weekOfYear)
 
 import { DatePicker } from './datePicker/DatePicker'
+import { DateWheelPicker } from './dateWheelPicker/DateWheelPicker'
 import { MaskInput } from './MaskInput'
 import { Popover } from '../structure/popover/Popover'
 import { isValidDate } from '../calendar/_helpers/dateDisabled'
@@ -46,6 +47,7 @@ export function DateInput({
   onCheckDisabled,
   placement,
   type = 'day',
+  presentation = 'calendar',
   format,
   startsOpen,
   allowClear,
@@ -85,26 +87,28 @@ export function DateInput({
     setInputValue(!!value ? dayjs(value).format(format) : '')
   }, [value])
 
+  const isWheel = presentation === 'wheel'
   const Input = useBottomDrawer ? LinkInput : FullWidthInputWrapper
+  const Picker = isWheel ? DateWheelPicker : DatePicker
 
   return (
     <Popover
       trigger="click"
       startsOpen={startsOpen}
       placement={placement || 'bottomLeft'}
-      snapPoints={[450]}
+      snapPoints={[isWheel ? 275 : 450]}
       useBottomDrawer={useBottomDrawer}
       bottomDrawerProps={{ contentProps: { padding: 'md' } }}
       watch={[value?.format?.('YYYYMMDD')]}
       renderContent={({ onClose }) => (
         <View flex centerH onMouseDown={(e) => e.preventDefault()}>
-          <DatePicker
+          <Picker
             value={value}
             onChange={(v) => {
               handleChange(v)
-              onClose()
+              if (!isWheel) onClose()
             }}
-            width={useBottomDrawer ? '100%' : 275}
+            width={!isWheel && (useBottomDrawer ? '100%' : 275)}
             allowClear={allowClear}
             {...validations}
             type={type}

package/src/components/inputs/InputWrapper.js

@@ -9,14 +9,14 @@ import { useDefaultModifier } from '../../modifiers/default'
 import { useSizeConverter } from '../../modifiers/sizeConverter'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
-const DEFAULT_PROPS = {
+const DEFAULT_PROPS = ([{ sizeCode }]) => ({
   paddingH: 'sm',
   bg: 'overlayBG',
   border: true,
-  br: 'md',
+  br: sizeCode,
   row: true,
   gap: 'sm',
-}
+})
 
 export function InputWrapper({
   prefix,

package/src/components/inputs/NumberWheelInput.js

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { BottomDrawer } from '../modals/bottomDrawer'
+import { LinkInput } from './LinkInput'
+import { NumberWheelPicker } from './NumberWheelPicker'
+import { View } from '../structure/View'
+
+export function NumberWheelInput({
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  decimalStep,
+  useInt,
+  precision,
+  suffix,
+  ...props
+}) {
+  const [open, setOpen] = React.useState(false)
+  const [localValue, setLocalValue] = React.useState(value)
+  value = value ?? localValue
+
+  const handleChange = (v) => {
+    setLocalValue(v)
+    onChange?.(v)
+  }
+
+  const displayValue = value != null ? `${value}${suffix ? ` ${suffix}` : ''}` : ''
+
+  return (
+    <>
+      <LinkInput value={displayValue} onPress={() => setOpen(true)} {...props} />
+      <BottomDrawer open={open} onClose={() => setOpen(false)} snapPoints={[275]} contentProps={{ padding: 'md' }}>
+        <View flex centerH>
+          <NumberWheelPicker
+            value={value}
+            onChange={handleChange}
+            min={min}
+            max={max}
+            step={step}
+            decimalStep={decimalStep}
+            useInt={useInt}
+            precision={precision}
+          />
+        </View>
+      </BottomDrawer>
+    </>
+  )
+}

package/src/components/inputs/NumberWheelPicker.js

@@ -0,0 +1,43 @@
+import { Text } from '../text'
+import { View } from '../structure'
+import { WheelPicker } from './WheelPicker'
+
+export function NumberWheelPicker({ value, onChange, min = 0, max = 100, step = 1, decimalStep = 1, useInt, precision = 2 }) {
+  if (useInt) precision = 0
+
+  const intValue = value != null ? Math.trunc(value) : min
+  const decFactor = Math.pow(10, precision)
+  const decValue = value != null ? Math.round((Math.abs(value) - Math.abs(intValue)) * decFactor) : 0
+
+  const handleIntChange = (v) => {
+    onChange?.(precision === 0 ? v : v + decValue / decFactor)
+  }
+
+  const handleDecChange = (v) => {
+    onChange?.(intValue + v / decFactor)
+  }
+
+  return (
+    <View row gap="xs" centerV>
+      <View flex>
+        <WheelPicker range={[min, max]} step={step} value={intValue} onChange={handleIntChange} />
+      </View>
+      {precision > 0 && (
+        <>
+          <Text h3 strong>
+            .
+          </Text>
+          <View flex>
+            <WheelPicker
+              range={[0, decFactor - 1]}
+              step={decimalStep}
+              value={decValue}
+              onChange={handleDecChange}
+              formatLabel={(v) => String(v).padStart(precision, '0')}
+            />
+          </View>
+        </>
+      )}
+    </View>
+  )
+}

package/src/components/inputs/SegmentedPicker.js

@@ -18,8 +18,9 @@ const DEFAULT_PROPS = ([{ sizeCode }]) => ({
   row: true,
   border: true,
   buttonProps: {
-    fullH: true,
     size: sizeCode,
+    height: null,
+    flex: true,
   },
 })
 

package/src/components/inputs/UploadInput.js

@@ -111,7 +111,7 @@ function Content({ value, open, remove, isDragging, multiple, area, grid, maxCou
     return (
       <View row wrap gap="sm">
         {items.map((item) => (
-          <GridItem key={item._id} value={item} remove={remove} />
+          <GridItem key={item._id ?? item.id} value={item} remove={remove} />
         ))}
         {showAdd && <AddTile onPress={open} isDragging={isDragging} />}
       </View>
@@ -129,7 +129,7 @@ function Content({ value, open, remove, isDragging, multiple, area, grid, maxCou
     <View gap="xs">
       {showAdd && link}
       {items.map((item) => (
-        <ListItem key={item._id} value={item} remove={remove} />
+        <ListItem key={item._id ?? item.id} value={item} remove={remove} />
       ))}
     </View>
   )

package/src/components/inputs/WheelPicker.js

@@ -0,0 +1,49 @@
+import { NumberInput } from './NumberInput'
+
+export function WheelPicker({
+  value,
+  onChange,
+  options,
+  suffix,
+  range,
+  step = 1,
+  labelKey = 'label',
+  valueKey = 'value',
+  useRawOption,
+  formatLabel,
+  ...props
+}) {
+  let min = 0
+  let max = 100
+
+  if (!!range || !options) {
+    const [from, to] = range || [0, 100]
+    const count = Math.floor((to - from) / step) + 1
+    options = Array.from({ length: count }, (_, i) => {
+      const v = from + i * step
+      return { [labelKey]: formatLabel ? formatLabel(v) : v, [valueKey]: v }
+    })
+  }
+
+  const values = (options || []).map((o) => o[valueKey]).filter((v) => typeof v === 'number')
+  if (values.length) {
+    min = Math.min(...values)
+    max = Math.max(...values)
+  }
+
+  function handleChange(newValue) {
+    if (useRawOption) {
+      // NumberInput allows free typing — snap to the nearest option on miss
+      const match = options.find((o) => o[valueKey] === newValue)
+      return onChange(
+        match ||
+          options.reduce((best, o) =>
+            Math.abs(o[valueKey] - newValue) < Math.abs(best[valueKey] - newValue) ? o : best
+          )
+      )
+    }
+    onChange(newValue)
+  }
+
+  return <NumberInput value={value} onChange={handleChange} suffix={suffix} min={min} max={max} precision={0} {...props} />
+}

package/src/components/inputs/WheelPicker.native.js

@@ -0,0 +1,88 @@
+import React from 'react'
+
+import { Text } from '../text'
+import { View } from '../structure'
+import { useColors } from '../../theme'
+import { debounce } from '../../helpers/debounce'
+
+let QuidoneWheelPicker
+
+try {
+  QuidoneWheelPicker = require('@quidone/react-native-wheel-picker').default
+} catch {
+  QuidoneWheelPicker = null
+}
+
+export function WheelPicker({
+  value,
+  onChange,
+  options,
+  suffix,
+  range,
+  step = 1,
+  labelKey = 'label',
+  valueKey = 'value',
+  useRawOption,
+  formatLabel,
+  ...props
+}) {
+  const colors = useColors()
+  const handleChange = React.useMemo(() => debounce(onChange, 300), [onChange])
+
+  if (!!range || !options) {
+    const [from, to] = range || [0, 100]
+    const count = Math.floor((to - from) / step) + 1
+    options = Array.from({ length: count }, (_, i) => {
+      const v = from + i * step
+      return { [labelKey]: formatLabel ? formatLabel(v) : v, [valueKey]: v }
+    })
+  }
+
+  const data = React.useMemo(() => {
+    if (!options) return []
+    return options.map((opt) => ({
+      value: opt[valueKey],
+      label: String(opt[labelKey] ?? opt[valueKey]),
+    }))
+  }, [options, labelKey, valueKey])
+
+  if (!QuidoneWheelPicker) {
+    console.warn('@quidone/react-native-wheel-picker not installed.')
+    return null
+  }
+
+  const resolveValue = (item) => {
+    if (useRawOption) return options.find((o) => o[valueKey] === item.value)
+    return item.value
+  }
+
+  return (
+    <View relative hiddenOverflow>
+      {!!suffix && (
+        <View absoluteFill row centerV>
+          <View flex />
+          <View flex paddingL={20}>
+            <Text text2>{suffix}</Text>
+          </View>
+        </View>
+      )}
+      <QuidoneWheelPicker
+        data={data}
+        value={value}
+        itemTextStyle={{ color: colors.text }}
+        itemHeight={40}
+        overlayItemStyle={{
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderLeftWidth: 0,
+          borderRightWidth: 0,
+          borderColor: colors.divider,
+          opacity: 1,
+        }}
+        _onValueChanging={({ item }) => handleChange(resolveValue(item))}
+        onValueChanged={({ item }) => onChange(resolveValue(item))}
+        {...props}
+      />
+    </View>
+  )
+}

package/src/components/inputs/WheelPicker.web.js

@@ -0,0 +1 @@
+export { WheelPicker } from './WheelPicker.native'

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

@@ -0,0 +1,24 @@
+import { DayWheelPicker } from './DayWheelPicker'
+import { MonthWheelPicker } from './MonthWheelPicker'
+import { QuarterWheelPicker } from './QuarterWheelPicker'
+import { WeekWheelPicker } from './WeekWheelPicker'
+import { YearWheelPicker } from './YearWheelPicker'
+
+export function DateWheelPicker({ type, ...props }) {
+  switch (type) {
+    case 'year':
+      return <YearWheelPicker {...props} />
+
+    case 'quarter':
+      return <QuarterWheelPicker {...props} />
+
+    case 'month':
+      return <MonthWheelPicker {...props} />
+
+    case 'week':
+      return <WeekWheelPicker {...props} />
+
+    default:
+      return <DayWheelPicker {...props} />
+  }
+}

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

@@ -0,0 +1,48 @@
+import dayjs from 'dayjs'
+
+import { ClearLink } from '../../actions/ClearLink'
+import { View } from '../../structure'
+import { useColors } from '../../../theme'
+
+let DatePicker
+
+try {
+  DatePicker = require('@quidone/react-native-wheel-picker').DatePicker
+} catch {
+  DatePicker = null
+}
+
+export function DayWheelPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
+  const colors = useColors()
+  if (!DatePicker) {
+    console.warn('@quidone/react-native-wheel-picker not installed.')
+    return null
+  }
+
+  value = value ? dayjs(value) : dayjs()
+
+  return (
+    <View center height={40 * 5} overflow="hidden" relative>
+      <DatePicker
+        locale={'pt'}
+        date={value.format('YYYY-MM-DD')}
+        minDate={min ? dayjs(min).format('YYYY-MM-DD') : undefined}
+        maxDate={max ? dayjs(max).format('YYYY-MM-DD') : undefined}
+        onDateChanged={({ date }) => onChange(dayjs(date))}
+        itemTextStyle={{ color: colors.text }}
+        itemHeight={40}
+        overlayItemStyle={{
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderLeftWidth: 0,
+          borderRightWidth: 0,
+          borderColor: colors.divider,
+          opacity: 1,
+        }}
+        {...props}
+      />
+
+      <ClearLink hide={!allowClear} value={value} onChange={onChange} />
+    </View>
+  )
+}

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

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