@neko-os/ui 0.0.13 → 0.2.0

package/src/components/modals/router/ModalRoute.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react'
+
+import { useModalsRouterContext } from './ModalsRouterContext'
+
+export function ModalRoute({ name, component, type = 'modal', ...containerProps }) {
+  const { registerRoute, unregisterRoute } = useModalsRouterContext()
+
+  useEffect(() => {
+    if (!name || !registerRoute) return
+    registerRoute(name, { component, type, containerProps })
+    return () => unregisterRoute?.(name)
+  }, [name])
+
+  return null
+}

package/src/components/modals/router/ModalsRouter.js

@@ -0,0 +1,120 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+
+import { BottomDrawer } from '../bottomDrawer'
+import { Drawer } from '../drawer'
+import { Modal } from '../modal/Modal'
+import { ModalRouteContext, ModalsRouterContext, ModalsStackContext } from './ModalsRouterContext'
+
+const CONTAINERS = {
+  modal: Modal,
+  drawer: Drawer,
+  bottomDrawer: BottomDrawer,
+}
+
+export function ModalsRouter({ children }) {
+  const [stack, setStack] = useState([])
+  const [renderStack, setRenderStack] = useState([])
+  const [containerOverrides, setContainerOverrides] = useState({})
+  const keyRef = useRef(0)
+  const routesRef = useRef({})
+
+  const registerRoute = useCallback((name, config) => {
+    routesRef.current[name] = config
+  }, [])
+
+  const unregisterRoute = useCallback((name) => {
+    delete routesRef.current[name]
+  }, [])
+
+  const updateContainerProps = useCallback((key, props) => {
+    setContainerOverrides((prev) => ({
+      ...prev,
+      [key]: { ...prev[key], ...props },
+    }))
+  }, [])
+
+  const push = useCallback((path, params) => {
+    const key = ++keyRef.current
+    const entry = { key, path, params }
+    setStack((prev) => [...prev, entry])
+    setRenderStack((prev) => [...prev, { ...entry, open: true }])
+  }, [])
+
+  const closeByKey = useCallback((key) => {
+    setStack((prev) => prev.filter((e) => e.key !== key))
+    setRenderStack((prev) => prev.map((e) => (e.key === key ? { ...e, open: false } : e)))
+    setTimeout(() => {
+      setRenderStack((prev) => prev.filter((e) => e.key !== key))
+    }, 600)
+  }, [])
+
+  const goBack = useCallback(() => {
+    setStack((prev) => {
+      if (prev.length === 0) return prev
+      const last = prev[prev.length - 1]
+      setRenderStack((rs) => rs.map((e) => (e.key === last.key ? { ...e, open: false } : e)))
+      setTimeout(() => {
+        setRenderStack((rs) => rs.filter((e) => e.key !== last.key))
+      }, 600)
+      return prev.slice(0, -1)
+    })
+  }, [])
+
+  const closeAll = useCallback(() => {
+    setStack([])
+    setRenderStack((prev) => {
+      const closing = prev.map((e) => ({ ...e, open: false }))
+      setTimeout(() => {
+        setRenderStack([])
+      }, 600)
+      return closing
+    })
+  }, [])
+
+  // Static — never changes, so consumers like useModalsNavigation
+  // and ModalRoute don't re-render when the stack changes
+  const actionsValue = useMemo(
+    () => ({ push, goBack, closeAll, registerRoute, unregisterRoute }),
+    [push, goBack, closeAll, registerRoute, unregisterRoute]
+  )
+
+  // Dynamic — only useAllModalsParams subscribes to this
+  const stackValue = useMemo(() => ({ stack }), [stack])
+
+  // Nest modals inside each other so each RN Modal presents from
+  // the previous modal's view controller (required for iOS stacking).
+  // Context providers go INSIDE Container children so they survive
+  // the Portal teleport on web (Portal re-mounts content at PortalHandler level).
+  const nestedModals = renderStack.reduceRight((inner, entry) => {
+    const route = routesRef.current[entry.path]
+    if (!route) return inner
+
+    const Container = CONTAINERS[route.type] || Modal
+    const Component = route.component
+
+    const overrides = containerOverrides[entry.key]
+    const updateContainer = (props) => updateContainerProps(entry.key, props)
+
+    return (
+      <Container key={entry.key} open={entry.open} onClose={() => closeByKey(entry.key)} {...route.containerProps} {...overrides}>
+        <ModalsRouterContext.Provider value={actionsValue}>
+          <ModalsStackContext.Provider value={stackValue}>
+            <ModalRouteContext.Provider value={{ params: entry.params, path: entry.path, key: entry.key, updateContainer }}>
+              <Component />
+              {inner}
+            </ModalRouteContext.Provider>
+          </ModalsStackContext.Provider>
+        </ModalsRouterContext.Provider>
+      </Container>
+    )
+  }, null)
+
+  return (
+    <ModalsRouterContext.Provider value={actionsValue}>
+      <ModalsStackContext.Provider value={stackValue}>
+        {children}
+        {nestedModals}
+      </ModalsStackContext.Provider>
+    </ModalsRouterContext.Provider>
+  )
+}

package/src/components/modals/router/ModalsRouterContext.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+// Static context — actions that never change (push, goBack, etc.)
+const ModalsRouterContext = React.createContext(null)
+export const useModalsRouterContext = () => React.useContext(ModalsRouterContext) || {}
+export { ModalsRouterContext }
+
+// Dynamic context — stack data that changes on push/goBack
+const ModalsStackContext = React.createContext(null)
+export const useModalsStackContext = () => React.useContext(ModalsStackContext) || {}
+export { ModalsStackContext }
+
+// Per-entry context — params for each rendered modal
+const ModalRouteContext = React.createContext(null)
+export const useModalRouteContext = () => React.useContext(ModalRouteContext) || {}
+export { ModalRouteContext }

package/src/components/modals/router/index.js

@@ -0,0 +1,6 @@
+export { ModalsRouter } from './ModalsRouter'
+export { ModalRoute } from './ModalRoute'
+export { useModalsNavigation } from './useModalsNavigation'
+export { useModalParams } from './useModalParams'
+export { useAllModalsParams } from './useAllModalsParams'
+export { useUpdateModalContainer } from './useUpdateModalContainer'

package/src/components/modals/router/useAllModalsParams.js

@@ -0,0 +1,6 @@
+import { useModalsStackContext } from './ModalsRouterContext'
+
+export function useAllModalsParams() {
+  const { stack } = useModalsStackContext()
+  return (stack || []).map(({ path, params, key }) => ({ path, params, key }))
+}

package/src/components/modals/router/useModalParams.js

@@ -0,0 +1,6 @@
+import { useModalRouteContext } from './ModalsRouterContext'
+
+export function useModalParams() {
+  const { params } = useModalRouteContext()
+  return params || {}
+}

package/src/components/modals/router/useModalsNavigation.js

@@ -0,0 +1,6 @@
+import { useModalsRouterContext } from './ModalsRouterContext'
+
+export function useModalsNavigation() {
+  const { push, goBack, closeAll } = useModalsRouterContext()
+  return { push, goBack, closeAll }
+}

package/src/components/modals/router/useUpdateModalContainer.js

@@ -0,0 +1,6 @@
+import { useModalRouteContext } from './ModalsRouterContext'
+
+export function useUpdateModalContainer() {
+  const { updateContainer } = useModalRouteContext()
+  return updateContainer
+}

package/src/components/presentation/Avatar.js

@@ -54,7 +54,7 @@ export function Avatar(rootProps) {
     useOverflowModifier
   )([{}, rootProps])
 
-  let { initials, name, icon, src, invert, textProps, iconProps, ...props } = formattedProps
+  let { initials, name, icon, src, invert, textProps, iconProps, iconSize, ...props } = formattedProps
   initials = initials || getInitials(name)
 
   let content = (
@@ -66,7 +66,7 @@ export function Avatar(rootProps) {
       icon={icon}
       invert={invert}
       textProps={{ strong: true, ...textProps }}
-      iconProps={iconProps}
+      iconProps={{ size: iconSize, ...iconProps }}
     />
   )
   if (!!src) content = <Image br={0} src={src} width={sizeCode} height={sizeCode} />

package/src/components/presentation/AvatarLabel.js

@@ -26,6 +26,7 @@ export function AvatarLabel(rootProps) {
     avatarProps,
     moveAvatarSizeScale,
     avatarSize,
+    iconSize,
     ...props
   } = formattedProps
   const hasAvatar = !!name || !!initials || !!src
@@ -47,6 +48,7 @@ export function AvatarLabel(rootProps) {
           dynamicColor={dynamicColor}
           square={square}
           marginH={2}
+          iconSize={iconSize}
           {...avatarProps}
         />
       }

package/src/components/presentation/LabelValue.js

@@ -4,11 +4,12 @@ import { IconLabel } from './IconLabel'
 import { Text } from '../text/Text'
 import { View } from '../structure/View'
 import { moveScale } from '../../theme/helpers/sizeScale'
+import { useColorConverter } from '../../modifiers/colorConverter'
 import { useDefaultModifier } from '../../modifiers/default'
 import { useSizeConverter } from '../../modifiers/sizeConverter'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
-const DEFAULT_PROPS = ([{ sizeCode }, { vertical, spread }]) => {
+const DEFAULT_PROPS = ([{ sizeCode, color }, { vertical, spread }]) => {
   return {
     row: !vertical,
     centerV: !vertical,
@@ -17,7 +18,7 @@ const DEFAULT_PROPS = ([{ sizeCode }, { vertical, spread }]) => {
     labelProps: {
       size: moveScale(sizeCode, !vertical ? 0 : -2),
       moveIconSizeScale: !vertical ? -1 : -2,
-      color: 'text3',
+      color: color || 'text3',
     },
     valueProps: {
       size: sizeCode,
@@ -28,17 +29,18 @@ const DEFAULT_PROPS = ([{ sizeCode }, { vertical, spread }]) => {
 
 export function LabelValue({ children, ...rootProps }) {
   const [{ sizeCode, color }, formattedProps] = pipe(
-    // useColorConverter(),
+    useColorConverter(),
     useSizeConverter('elementHeights', 'md'),
     useThemeComponentModifier('Labelvalue'), //
     useDefaultModifier(DEFAULT_PROPS)
   )([{}, rootProps])
 
-  const { icon, label, iconColor, labelProps, value, valueProps, vertical, spread, ...props } = formattedProps
+  const { icon, label, iconColor, labelProps, value, valueColor, valueProps, vertical, spread, ...props } =
+    formattedProps
   let separator = !vertical && !spread ? ':' : ''
 
   let content = children || value
-  if (is(String, value)) content = <Text label={value} {...valueProps} />
+  if (is(String, value)) content = <Text label={value} color={valueColor || color} {...valueProps} />
 
   return (
     <View className="neko-label-value" {...props}>

package/src/components/presentation/Result.js

@@ -46,11 +46,11 @@ export function Result({
     <View className="neko-result" center padding="lg" {...props}>
       {!!icon && <Icon name={icon} color={iconColor} size={42} primary {...iconProps} />}
       {!!icon && <Divider height={10} />}
-      <Text h4 {...textProps} {...titleProps}>
+      <Text h4 center {...textProps} {...titleProps}>
         {title}
       </Text>
       {!!description && (
-        <Text text3 sm marginT="sm" {...textProps} {...descriptionProps}>
+        <Text text3 sm marginT="sm" center {...textProps} {...descriptionProps}>
           {description}
         </Text>
       )}

package/src/components/presentation/Tooltip.js

@@ -10,7 +10,7 @@ import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 export function Tooltip(rootProps) {
   const [{ loading, fontColor, sizeCode }, formattedProps] = pipe(
     useColorConverter('overlayBG'),
-    useSizeConverter('text', 'md'),
+    useSizeConverter('text', 'sm'),
     useThemeComponentModifier('Tooltip'),
     useFullColorModifier
   )([{}, rootProps])

package/src/components/sections/Section.js

@@ -0,0 +1,50 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { Divider } from '../helpers/Separator'
+import { Text } from '../text'
+import { View } from '../structure'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  marginH: 'md',
+  bg: 'overlayBG',
+  br: 'md',
+  titleProps: {
+    strong: true,
+    text4: true,
+    sm: true,
+    marginB: 'sm',
+    paddingH: 'md',
+  },
+  dividerProps: {
+    line: true,
+    height: 1,
+  },
+}
+
+export function Section({ children, title, ...rootProps }) {
+  const [{}, formattedProps] = pipe(
+    useThemeComponentModifier('Section'), //
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { titleProps, dividerProps, ...props } = formattedProps
+
+  const childArray = React.Children.toArray(children)
+
+  return (
+    <View>
+      {!!title && <Text marginH={props.marginH} {...titleProps} label={title} />}
+      <View className="neko-section" {...props}>
+        {childArray.map((child, i) => (
+          <React.Fragment key={child.key}>
+            {child}
+            {i < childArray.length - 1 && <Divider {...dividerProps} />}
+          </React.Fragment>
+        ))}
+      </View>
+    </View>
+  )
+}

package/src/components/sections/SectionItem.js

@@ -0,0 +1,24 @@
+import { pipe } from 'ramda'
+
+import { LabelValue } from '../presentation'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  paddingH: 'md',
+  paddingV: 'sm',
+  minH: 'md',
+}
+
+export function SectionItem({ ...rootProps }) {
+  const [{ color }, formattedProps] = pipe(
+    useColorConverter(),
+    useThemeComponentModifier('SectionItem'), //
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { ...props } = formattedProps
+
+  return <LabelValue spread className="neko-section-item" color={color} {...props} />
+}

package/src/components/sections/SectionItemDropdown.js

@@ -0,0 +1,68 @@
+import { pipe } from 'ramda'
+
+import { IconLabel } from '../presentation'
+import { Link } from '../actions'
+import { Menu } from '../actions/menu/Menu'
+import { Popover } from '../structure/popover/Popover'
+import { ScrollView } from '../list'
+import { SectionItem } from './SectionItem'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useResponsiveValue } from '../../responsive'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  paddingV: 'sm',
+  minH: 'md',
+  icon: 'arrow-down-s-fill',
+}
+
+export function SectionItemDropdown({ children, value, valueLabel, items, onChange, ...rootProps }) {
+  const [{ color }, formattedProps] = pipe(
+    useColorConverter(),
+    useThemeComponentModifier('SectionItemDropdown'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  let { icon, iconLabelProps, trigger = 'click', placement, popoverProps, useBottomDrawer, ...props } = formattedProps
+
+  useBottomDrawer = useResponsiveValue(useBottomDrawer || { native: true, sm: true, md: true })
+
+  return (
+    <Popover
+      useParentMinWidth
+      placement={placement || 'bottomRight'}
+      trigger={trigger}
+      padding={0}
+      contentProps={{ padding: 0 }}
+      useBottomDrawer={useBottomDrawer}
+      {...popoverProps}
+      renderContent={({ onClose }) => {
+        const handleChange = (...params) => {
+          if (onChange) onChange(...params)
+          onClose()
+        }
+        return (
+          <ScrollView>
+            <Menu
+              vertical
+              items={items}
+              onChange={handleChange}
+              linkPaddingH={useBottomDrawer ? 'md' : 'sm'}
+              linkMinHeight={useBottomDrawer ? 'xl' : 'md'}
+              withDivider={useBottomDrawer}
+            />
+          </ScrollView>
+        )
+      }}
+    >
+      <Link className="neko-section-item-dropdown">
+        <SectionItem color={color} {...props}>
+          {children || (
+            <IconLabel gap={2} invert color={color} {...iconLabelProps} label={valueLabel || value} icon={icon} />
+          )}
+        </SectionItem>
+      </Link>
+    </Popover>
+  )
+}

package/src/components/sections/SectionItemLink.js

@@ -0,0 +1,33 @@
+import { pipe } from 'ramda'
+
+import { IconLabel } from '../presentation'
+import { Link } from '../actions'
+import { SectionItem } from './SectionItem'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  icon: 'md',
+  paddingV: 'sm',
+  minH: 'md',
+  icon: 'arrow-right-s-line',
+}
+
+export function SectionItemLink({ children, value, onPress, ...rootProps }) {
+  const [{ color }, formattedProps] = pipe(
+    useColorConverter(),
+    useThemeComponentModifier('SectionItemLink'), //
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { icon, iconLabelProps, ...props } = formattedProps
+
+  return (
+    <Link className="neko-section-item-link" onPress={onPress}>
+      <SectionItem color={color} {...props}>
+        {children || <IconLabel gap={2} invert color={color} {...iconLabelProps} label={value} icon={icon} />}
+      </SectionItem>
+    </Link>
+  )
+}

package/src/components/sections/index.js

@@ -0,0 +1,4 @@
+export * from './Section'
+export * from './SectionItem'
+export * from './SectionItemDropdown'
+export * from './SectionItemLink'

package/src/components/state/StatePresenter.js

@@ -0,0 +1,41 @@
+import { Loading } from './Loading'
+import { Result } from '../presentation'
+import { View } from '../structure'
+
+export function StatePresenter({
+  loading,
+  error,
+  empty,
+  errorTitle = 'Something went wrong',
+  errorDescription,
+  emptyTitle = 'No results',
+  emptyDescription,
+  children,
+  ...props
+}) {
+  if (loading) {
+    return (
+      <View flex center {...props}>
+        <Loading />
+      </View>
+    )
+  }
+
+  if (error) {
+    return (
+      <View flex center {...props}>
+        <Result type="error" title={errorTitle} description={errorDescription || error.message} />
+      </View>
+    )
+  }
+
+  if (empty) {
+    return (
+      <View flex center {...props}>
+        <Result type="empty" title={emptyTitle} description={emptyDescription} />
+      </View>
+    )
+  }
+
+  return children
+}

package/src/components/state/index.js

@@ -1,2 +1,3 @@
 export * from './Loading'
 export * from './LoadingView'
+export * from './StatePresenter'

package/src/components/structure/BlurView.js

@@ -25,6 +25,7 @@ const DEFAULT_PROPS =
     const isDark = tinycolor(colors?.overlayBG || colors?.bg).isDark()
 
     return {
+      width: 'auto',
       tint: isDark ? 'dark' : 'light',
     }
   }

package/src/components/structure/KeyboardAvoidingView.js

@@ -0,0 +1,52 @@
+import { pipe } from 'ramda'
+
+import { AbsKeyboardAvoidingView } from '../../abstractions/KeyboardAvoidingView'
+import { Platform } from '../../abstractions/Platform'
+import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useCursorModifier } from '../../modifiers/cursor'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useMarginModifier } from '../../modifiers/margin'
+import { useOverflowModifier } from '../../modifiers/overflow'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { usePositionModifier } from '../../modifiers/position'
+import { useShadowModifier } from '../../modifiers/shadow'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function KeyboardAvoidingView({ children, keyboardVerticalOffset = 0, ...rootProps }) {
+  const { bottom } = useSafeAreaInsets()
+
+  const [_, props] = pipe(
+    useThemeComponentModifier('KeyboardAvoidingView'),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useCursorModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsKeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      keyboardVerticalOffset={keyboardVerticalOffset + bottom}
+      {...props}
+    >
+      {children}
+    </AbsKeyboardAvoidingView>
+  )
+}

package/src/components/structure/TopBar.js

@@ -0,0 +1,45 @@
+import { Text } from '../text'
+import { View } from './View'
+import { useResponsiveConverter } from '../../modifiers/responsiveConverter'
+import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
+
+export function TopBar({ right, left, WrapperView, children, ...rootProps }) {
+  const { top: safeTop } = useSafeAreaInsets()
+
+  const [_, props] = useResponsiveConverter([])([{}, rootProps])
+  let { useSafeArea = true, title, subtitle } = props
+
+  const hasContent = !!title || !!subtitle || !!children || !!right || !!left
+
+  WrapperView = WrapperView || View
+
+  return (
+    <WrapperView paddingT={useSafeArea && safeTop} {...props}>
+      {!!hasContent && (
+        <View minH="md" centerV row paddingH="md" paddingV="sm" gap="sm" fullW>
+          <View flex={1} toLeft>
+            {left}
+          </View>
+
+          <View center flex={3}>
+            {children || (
+              <Text center h6 numberOfLines={1}>
+                {title}
+              </Text>
+            )}
+
+            {subtitle && (
+              <Text center xs numberOfLines={1}>
+                {subtitle}
+              </Text>
+            )}
+          </View>
+
+          <View flex={1} toRight>
+            {right}
+          </View>
+        </View>
+      )}
+    </WrapperView>
+  )
+}

package/src/components/structure/index.js

@@ -7,8 +7,7 @@ export * from './SafeAreaView'
 export * from './Card'
 export * from './Row'
 export * from './Col'
-export * from './modal'
-export * from './drawer'
-export * from './bottomDrawer'
 export * from './popover/Popover'
 export * from './Segment'
+export * from './TopBar'
+export * from './KeyboardAvoidingView'

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

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { BottomDrawer } from '../bottomDrawer'
+import { BottomDrawer } from '../../modals/bottomDrawer'
 import { PopoverContent } from './PopoverContent'
 import { useRegisterOverlay } from '../overlay/OverlayHandler'
 import { useResponsiveValue } from '../../../responsive'

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

@@ -1,7 +1,7 @@
 import { Modal, TouchableWithoutFeedback } from 'react-native'
 import React from 'react'
 
-import { BottomDrawer } from '../bottomDrawer'
+import { BottomDrawer } from '../../modals/bottomDrawer'
 import { PopoverContent } from './PopoverContent'
 import { View } from '../View'
 import { calculatePosition } from '../overlay/calculatePosition'