@neko-os/ui 0.0.9 → 0.0.11

package/src/components/structure/Segment.js

@@ -0,0 +1,51 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { View } from './View'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{ sizeCode }]) => ({
+  row: true,
+  justify: 'stretch',
+  br: sizeCode,
+  // overflow: 'hidden',
+})
+
+export function Segment({ children, ...rootProps }) {
+  const [{ sizeCode }, formattedProps] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Segment'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { br, ...props } = formattedProps
+  const size = children?.length
+
+  return (
+    <View className="neko-segment" {...props}>
+      {React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child)) return child
+        const isFirst = index === 0
+        const isLast = size - 1 === index
+
+        const childProps = child.props || {}
+        const newProps = {
+          brL: br,
+          brR: br,
+          size: sizeCode,
+        }
+
+        if (!isLast) {
+          newProps.brR = 0
+        }
+        if (!isFirst) {
+          newProps.brL = 0
+        }
+
+        return React.cloneElement(child, newProps)
+      })}
+    </View>
+  )
+}

package/src/components/structure/bottomDrawer/native/BottomDrawer.js

@@ -53,7 +53,10 @@ function InnerContent({
   const snapIndex = useSharedValue(0)
   const velocityY = useSharedValue(0)
 
-  const normalizedSnapPoints = React.useMemo(() => normalizeSnapPoints(snapPoints, SCREEN_HEIGHT), [snapPoints])
+  const normalizedSnapPoints = React.useMemo(
+    () => normalizeSnapPoints(snapPoints, SCREEN_HEIGHT, bottomInset),
+    [snapPoints, useSafeArea]
+  )
   const maxSnapPoint = React.useMemo(() => Math.max(...normalizedSnapPoints), [normalizedSnapPoints])
   const minSnapPoint = React.useMemo(() => Math.min(...normalizedSnapPoints), [normalizedSnapPoints])
 

package/src/components/structure/bottomDrawer/native/utils.js

@@ -1,27 +1,32 @@
-export function normalizeSnapPoints(snapPoints, screenHeight) {
+import { is } from 'ramda'
+
+export function normalizeSnapPoints(snapPoints, screenHeight, bottomInset) {
   return snapPoints.map((point) => {
     if (typeof point === 'string' && point.endsWith('%')) {
-      const percentage = parseFloat(point) / 100;
-      return screenHeight * percentage;
+      const percentage = parseFloat(point) / 100
+      return screenHeight * percentage
+    }
+    if (is(Number, point)) {
+      point = point + bottomInset
     }
-    return point;
-  });
+    return point
+  })
 }
 
 export function findClosestSnapPoint(currentPosition, snapPoints, velocity = 0) {
-  'worklet';
+  'worklet'
   // Reduced velocity impact for more stable snapping
-  const velocityImpact = velocity * 0.03;
-  const adjustedPosition = currentPosition + velocityImpact;
+  const velocityImpact = velocity * 0.03
+  const adjustedPosition = currentPosition + velocityImpact
 
-  let closestIndex = 0;
-  let minDistance = Math.abs(snapPoints[0] - adjustedPosition);
+  let closestIndex = 0
+  let minDistance = Math.abs(snapPoints[0] - adjustedPosition)
 
   for (let i = 1; i < snapPoints.length; i++) {
-    const distance = Math.abs(snapPoints[i] - adjustedPosition);
+    const distance = Math.abs(snapPoints[i] - adjustedPosition)
     if (distance < minDistance) {
-      minDistance = distance;
-      closestIndex = i;
+      minDistance = distance
+      closestIndex = i
     }
   }
 
@@ -30,29 +35,31 @@ export function findClosestSnapPoint(currentPosition, snapPoints, velocity = 0)
 
   // Bias towards opening more when swiping up very fast
   if (velocity < -1500 && closestIndex < snapPoints.length - 1) {
-    closestIndex++;
+    closestIndex++
   }
   // Bias towards closing when swiping down very fast
   else if (velocity > 1500 && closestIndex > 0) {
-    closestIndex--;
+    closestIndex--
   }
 
   // Add hysteresis: prefer staying at current position unless moved significantly
   // This prevents accidental snap point changes
   if (snapPoints.length > 1) {
-    const currentSnapDistance = minDistance;
+    const currentSnapDistance = minDistance
     // Require at least 20% of the distance between snap points to change
-    const snapPointSpacing = Math.abs(snapPoints[Math.min(closestIndex + 1, snapPoints.length - 1)] - snapPoints[closestIndex]);
+    const snapPointSpacing = Math.abs(
+      snapPoints[Math.min(closestIndex + 1, snapPoints.length - 1)] - snapPoints[closestIndex]
+    )
     if (currentSnapDistance < snapPointSpacing * 0.2) {
       // Stay at current snap point unless moved significantly
-      return closestIndex;
+      return closestIndex
     }
   }
 
-  return closestIndex;
+  return closestIndex
 }
 
 export function clamp(value, min, max) {
-  'worklet';
-  return Math.min(Math.max(value, min), max);
-}
+  'worklet'
+  return Math.min(Math.max(value, min), max)
+}

package/src/components/structure/bottomDrawer/web/BottomDrawer.js

@@ -1,3 +1,5 @@
 import { Drawer } from '../../drawer'
 
-export const BottomDrawer = (props) => <Drawer height={400} {...props} />
+export const BottomDrawer = ({ snapPoints, contentProps, ...props }) => {
+  return <Drawer height={snapPoints?.[0] || 400} contentProps={{ padding: 0, ...contentProps }} {...props} />
+}

package/src/components/structure/index.js

@@ -11,3 +11,4 @@ export * from './modal'
 export * from './drawer'
 export * from './bottomDrawer'
 export * from './popover/Popover'
+export * from './Segment'

package/src/components/structure/overlay/OverlayHandler.js

@@ -29,6 +29,11 @@ export const useRegisterOverlay = (opts = {}) => {
     mergeOverlay({ open: true, content, triggerRect, placement, ...options })
   }
 
+  const onUpdate = ({ content, options = {} }) => {
+    if (!overlay.open) return
+    mergeOverlay({ content, ...options })
+  }
+
   const onClose = () => {
     stopDelayedClosing()
     timeout.current = setTimeout(() => {
@@ -41,7 +46,7 @@ export const useRegisterOverlay = (opts = {}) => {
     !!unmountOnClose ? removeOverlay() : closeOverlay()
   }
 
-  return { onOpen, onClose, onFastClose, stopDelayedClosing }
+  return { onOpen, onClose, onUpdate, onFastClose, stopDelayedClosing }
 }
 
 export function OverlayHandler({ children }) {

package/src/components/structure/popover/Popover.js

@@ -16,11 +16,13 @@ export function Popover({
   parentMinWidth,
   useBottomDrawer = {},
   bottomDrawerProps = {},
+  watch,
+  disabled,
   ...props
 }) {
   const shouldUseDrawer = useResponsiveValue(useBottomDrawer)
   const ref = React.useRef(null)
-  const { onOpen, onClose, onFastClose, stopDelayedClosing } = useRegisterOverlay({ unmountOnClose })
+  const { onOpen, onUpdate, onClose, onFastClose, stopDelayedClosing } = useRegisterOverlay({ unmountOnClose })
 
   const click = trigger === 'click'
   const hover = trigger === 'hover'
@@ -28,13 +30,24 @@ export function Popover({
 
   renderContent = renderContent || (() => content)
 
-  const show = (e) => {
-    if (e && e.stopPropagation) e.stopPropagation()
+  const buildContent = () => (
+    <PopoverContent
+      placement={placement}
+      width={parentWidth ? ref.current?.getBoundingClientRect()?.width : undefined}
+      minWidth={parentMinWidth ? ref.current?.getBoundingClientRect()?.width : undefined}
+      {...props}
+      onMouseEnter={hover ? stopDelayedClosing : undefined}
+      onMouseLeave={hover ? onClose : undefined}
+    >
+      {renderContent({ onClose: onFastClose })}
+    </PopoverContent>
+  )
+
+  const computeTriggerRect = () => {
     const rect = ref.current.getBoundingClientRect()
     const scrollX = window.scrollX || window.pageXOffset
     const scrollY = window.scrollY || window.pageYOffset
-
-    const triggerRect = {
+    return {
       left: rect.left + scrollX,
       right: rect.right + scrollX,
       top: rect.top + scrollY,
@@ -42,20 +55,13 @@ export function Popover({
       width: rect.width,
       height: rect.height,
     }
+  }
 
+  const show = (e) => {
+    if (e && e.stopPropagation) e.stopPropagation()
+    const triggerRect = computeTriggerRect()
     onOpen({
-      content: (
-        <PopoverContent
-          placement={placement}
-          width={parentWidth ? rect.width : undefined}
-          minWidth={parentMinWidth ? rect.width : undefined}
-          {...props}
-          onMouseEnter={hover ? stopDelayedClosing : undefined}
-          onMouseLeave={hover ? onClose : undefined}
-        >
-          {renderContent({ onClose: onFastClose })}
-        </PopoverContent>
-      ),
+      content: buildContent(),
       triggerRect,
       placement,
       options: { dismissOnClickOutside: click || focus },
@@ -64,6 +70,14 @@ export function Popover({
 
   React.useEffect(() => () => onClose(), [])
 
+  React.useEffect(() => {
+    if (!ref.current || !watch) return
+    onUpdate({
+      content: buildContent(),
+      options: { dismissOnClickOutside: click || focus },
+    })
+  }, watch)
+
   if (shouldUseDrawer) {
     return (
       <DrawerPopover
@@ -79,8 +93,8 @@ export function Popover({
   const child = React.Children.only(children)
   let childProps = { ref, onClick: show }
 
-  if (hover) childProps = { ref, onMouseEnter: show, onMouseLeave: onClose }
-  if (focus) childProps = { ref, onFocus: show }
+  if (hover) childProps = { ref, onMouseEnter: show, onMouseLeave: onClose, disabled }
+  if (focus) childProps = { ref, onFocus: show, disabled }
 
   return React.cloneElement(child, childProps)
 }

package/src/components/structure/popover/Popover_BU.js

@@ -0,0 +1,157 @@
+import React from 'react'
+
+import { BottomDrawer } from '../bottomDrawer'
+import { PopoverContent } from './PopoverContent'
+import { useRegisterOverlay } from '../overlay/OverlayHandler'
+import { useResponsiveValue } from '../../../responsive'
+
+export function Popover({
+  renderContent,
+  content,
+  trigger = 'hover',
+  placement = 'bottom',
+  unmountOnClose,
+  children,
+  parentWidth,
+  parentMinWidth,
+  useBottomDrawer = {},
+  bottomDrawerProps = {},
+  watch,
+  ...props
+}) {
+  const shouldUseDrawer = useResponsiveValue(useBottomDrawer)
+  const ref = React.useRef(null)
+  const { onOpen, onUpdate, onClose, onFastClose, stopDelayedClosing } = useRegisterOverlay({ unmountOnClose })
+
+  const click = trigger === 'click'
+  const hover = trigger === 'hover'
+  const focus = trigger === 'focus'
+
+  renderContent = renderContent || (() => content)
+
+  const buildContent = () => (
+    <PopoverContent
+      placement={placement}
+      width={parentWidth ? ref.current?.getBoundingClientRect()?.width : undefined}
+      minWidth={parentMinWidth ? ref.current?.getBoundingClientRect()?.width : undefined}
+      {...props}
+      onMouseEnter={hover ? stopDelayedClosing : undefined}
+      onMouseLeave={hover ? onClose : undefined}
+    >
+      {renderContent({ onClose: onFastClose })}
+    </PopoverContent>
+  )
+
+  const computeTriggerRect = () => {
+    const rect = ref.current.getBoundingClientRect()
+    const scrollX = window.scrollX || window.pageXOffset
+    const scrollY = window.scrollY || window.pageYOffset
+    return {
+      left: rect.left + scrollX,
+      right: rect.right + scrollX,
+      top: rect.top + scrollY,
+      bottom: rect.bottom + scrollY,
+      width: rect.width,
+      height: rect.height,
+    }
+  }
+
+  const show = (e) => {
+    if (e && e.stopPropagation) e.stopPropagation()
+    const triggerRect = computeTriggerRect()
+    onOpen({
+      content: buildContent(),
+      triggerRect,
+      placement,
+      options: { dismissOnClickOutside: click || focus },
+    })
+  }
+
+  React.useEffect(() => () => onClose(), [])
+
+  // 🔑 re-render do portal quando `watch` (ex.: search) mudar
+  React.useEffect(() => {
+    if (!ref.current) return
+    const triggerRect = computeTriggerRect()
+    onUpdate({
+      content: buildContent(),
+      triggerRect,
+      placement,
+      options: { dismissOnClickOutside: click || focus },
+    })
+  }, [watch, renderContent])
+
+  // const show = (e) => {
+  // if (e && e.stopPropagation) e.stopPropagation()
+  // const rect = ref.current.getBoundingClientRect()
+  // const scrollX = window.scrollX || window.pageXOffset
+  // const scrollY = window.scrollY || window.pageYOffset
+
+  // const triggerRect = {
+  // left: rect.left + scrollX,
+  // right: rect.right + scrollX,
+  // top: rect.top + scrollY,
+  // bottom: rect.bottom + scrollY,
+  // width: rect.width,
+  // height: rect.height,
+  // }
+
+  // onOpen({
+  // content: () => (
+  // <PopoverContent
+  // placement={placement}
+  // width={parentWidth ? rect.width : undefined}
+  // minWidth={parentMinWidth ? rect.width : undefined}
+  // {...props}
+  // onMouseEnter={hover ? stopDelayedClosing : undefined}
+  // onMouseLeave={hover ? onClose : undefined}
+  // >
+  // {renderContent({ onClose: onFastClose })}
+  // </PopoverContent>
+  // ),
+  // triggerRect,
+  // placement,
+  // options: { dismissOnClickOutside: click || focus },
+  // })
+  // }
+
+  // React.useEffect(() => () => onClose(), [])
+
+  if (shouldUseDrawer) {
+    return (
+      <DrawerPopover
+        content={content}
+        renderContent={renderContent}
+        children={children}
+        {...props}
+        {...bottomDrawerProps}
+      />
+    )
+  }
+
+  const child = React.Children.only(children)
+  let childProps = { ref, onClick: show }
+
+  if (hover) childProps = { ref, onMouseEnter: show, onMouseLeave: onClose }
+  if (focus) childProps = { ref, onFocus: show }
+
+  return React.cloneElement(child, childProps)
+}
+
+function DrawerPopover({ children, content, renderContent, snapPoints, ...props }) {
+  const [open, setOpen] = React.useState(false)
+  const onClose = () => setOpen(false)
+
+  const child = React.Children.only(children)
+  let childProps = { onClick: () => setOpen(true) }
+
+  return (
+    <>
+      {React.cloneElement(child, childProps)}
+
+      <BottomDrawer open={open} onClose={onClose} snapPoints={snapPoints} {...props}>
+        {renderContent({ onClose })}
+      </BottomDrawer>
+    </>
+  )
+}

package/src/components/tabs/ActiveTabContent.js

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import { AnimatedView } from '../animations'
+import { View } from '../structure'
+import { useTabs } from './TabsHandler'
+
+const duration = 100
+
+function Item({ item, active, ...props }) {
+  const Content = React.useMemo(() => item.renderContent || item.Content, [item.renderContent, item.Content])
+  const [open, setOpen] = React.useState(active)
+
+  React.useEffect(() => {
+    if (!!active) {
+      setTimeout(() => setOpen(true), duration)
+    } else {
+      setOpen(active)
+    }
+  }, [active])
+
+  return (
+    <AnimatedView open={open} fade={{ duration }} flex display={!open && 'none'} {...props}>
+      <Content />
+    </AnimatedView>
+  )
+}
+
+export function ActiveTabContent({ lazy, unmountOnClose }) {
+  const { activeKey, items } = useTabs()
+  if (!items?.length) return false
+
+  return items.map((item) => (
+    <Item key={item.key} item={item} active={item.key === activeKey} lazy={lazy} unmountOnClose={unmountOnClose} />
+  ))
+}

package/src/components/tabs/TabsHandler.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const TabsContext = React.createContext(null)
+export const useTabs = () => React.useContext(TabsContext) || {}
+
+export function TabsHandler({ children, items, initialKey }) {
+  const [activeKey, setActiveKey] = React.useState(initialKey || items?.[0]?.key)
+
+  const activeTab = React.useMemo(() => {
+    return items?.find((item) => item.key === activeKey)
+  }, [activeKey])
+
+  const value = { items, onChange: setActiveKey, activeKey, activeTab }
+
+  return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>
+}

package/src/components/tabs/TabsMenu.js

@@ -0,0 +1,15 @@
+import { Menu } from '../actions'
+import { SegmentedPicker } from '../inputs'
+import { useTabs } from './TabsHandler'
+
+export function TabsMenu(props) {
+  const { activeKey, items, onChange } = useTabs()
+
+  return <Menu items={items} activeKey={activeKey} onChange={({ key }) => onChange(key)} {...props} />
+}
+
+export function TabsSegmentedMenu(props) {
+  const { activeKey, items, onChange } = useTabs()
+
+  return <SegmentedPicker options={items} valueKey="key" value={activeKey} onChange={onChange} {...props} />
+}

package/src/components/tabs/index.js

@@ -0,0 +1,3 @@
+export * from './TabsHandler'
+export * from './TabsMenu'
+export * from './ActiveTabContent'

package/src/helpers/string.js

@@ -1,4 +1,19 @@
-import { adjust, compose, defaultTo, head, join, juxt, map, pipe, replace, split, tail, toLower, toUpper } from 'ramda'
+import {
+  adjust,
+  compose,
+  defaultTo,
+  head,
+  join,
+  juxt,
+  map,
+  pipe,
+  replace,
+  split,
+  tail,
+  toLower,
+  toUpper,
+  trim,
+} from 'ramda'
 
 export const removeSpecialChars = replace(/[^a-zA-Z ,0-9]/g, '')
 
@@ -55,3 +70,5 @@ export const truncate = truncateString
 export const slugify = (text) => {
   return toSnakeCase(text)
 }
+
+export const normalizeString = pipe(toLower, trim, (str) => str.normalize('NFD').replace(/[\u0300-\u036f]/g, ''))

package/src/i18n/I18n.js

@@ -0,0 +1,97 @@
+export class I18n {
+  constructor(options = {}) {
+    this.language = options.language || 'en'
+    this.fallback = options.fallback || 'en'
+    this.onChangeLanguage = options.onChangeLanguage
+    this.resources = options.resources || {}
+    this.loader = options.loader
+  }
+
+  addResources(lang, ns, data) {
+    if (!this.resources[lang]) this.resources[lang] = {}
+    this.resources[lang][ns] = { ...this.resources[lang][ns], ...data }
+  }
+
+  changeLanguage(lang) {
+    this.language = lang
+    this.onChangeLanguage?.(lang)
+  }
+
+  async tAsync(key, opts = {}) {
+    const { ns = 'common' } = opts
+    if (!this.resources[this.language]?.[ns] && this.loader) {
+      await this._loadNamespace(this.language, ns)
+    }
+    return this.t(key, opts)
+  }
+
+  t(key, opts = {}) {
+    let { ns = 'common', context, ...vars } = opts
+    const count = vars?.count
+    if (key.includes(':')) {
+      const splittedKey = key.split(':')
+      ns = splittedKey[0]
+      key = splittedKey[1]
+    }
+    const langData = this.resources[this.language]?.[ns]
+    let value = this._resolveKey(langData, key, count, context)
+    if (context) console.log(context, value)
+
+    if (!value) {
+      const fallbackData = this.resources[this.fallback]?.[ns]
+      value = this._resolveKey(fallbackData, key, count, context) || key
+    }
+
+    return this._interpolate(value, vars)
+  }
+
+  async _loadNamespace(lang, ns) {
+    if (!this.loader) return
+    const data = await this.loader(lang, ns)
+    this.addResources(lang, ns, data)
+  }
+
+  _resolveKey(nsData, key, count, context) {
+    if (!nsData) return null
+
+    // Support for nested keys like "a.b.c"
+    const parts = key.split('.')
+    const basePath = parts.slice(0, -1)
+    const baseKey = parts[parts.length - 1]
+    const parent = basePath.reduce((acc, part) => (acc ? acc[part] : undefined), nsData) || nsData
+
+    if (!parent) return null
+
+    // Support for context (e.g., gender) - tries key_context
+    if (context) {
+      const contextKey = `${baseKey}_${context}`
+      if (parent[contextKey] != null) {
+        return parent[contextKey]
+      }
+    }
+
+    // Support for pluralization - tries key_one for singular
+    if (typeof count === 'number') {
+      if (count === 0) {
+        const singularKey = `${baseKey}_zero`
+        if (parent[singularKey] != null) {
+          return parent[singularKey]
+        }
+      }
+      if (count === 1) {
+        const singularKey = `${baseKey}_one`
+        if (parent[singularKey] != null) {
+          return parent[singularKey]
+        }
+      }
+    }
+
+    // Return the base key
+    return parent[baseKey]
+  }
+
+  _interpolate(str, vars) {
+    if (typeof str !== 'string') return str
+    return str.replace(/\{\{(.*?)\}\}/g, (_, v) => vars[v.trim()] ?? '')
+  }
+}

package/src/i18n/I18nProvider.js

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { I18n } from './I18n'
+
+const I18nContext = React.createContext()
+
+export function I18nProvider({ children, i18n, config }) {
+  const i18nRef = React.useRef(i18n || new I18n(config))
+  const [v, setVersion] = React.useState(0)
+
+  const forceUpdate = React.useCallback(() => setVersion((v) => v + 1), [])
+
+  const changeLanguage = React.useCallback(
+    (lang) => {
+      i18nRef.current.changeLanguage(lang)
+      forceUpdate()
+    },
+    [forceUpdate]
+  )
+
+  const value = React.useMemo(
+    () => ({
+      t: (...args) => i18nRef.current.t(...args),
+      i18n: i18nRef.current,
+      v,
+      language: i18nRef.current.language,
+      changeLanguage,
+    }),
+    [v, forceUpdate, changeLanguage]
+  )
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>
+}
+
+export function useTranslation(namespace) {
+  const ctx = React.useContext(I18nContext)
+  if (!ctx) throw new Error('useTranslation must be used inside <I18nProvider>')
+  const t = (key, opts = {}) => ctx?.t?.(key, { ns: namespace, ...opts })
+  return { ...ctx, t }
+}

package/src/i18n/index.js

@@ -0,0 +1,2 @@
+export * from './I18nProvider'
+export * from './I18n'