@neko-os/ui 0.0.8 → 0.0.10

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

@@ -15,11 +15,14 @@ export function Popover({
   parentWidth,
   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'
@@ -27,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,
@@ -41,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 },
@@ -63,15 +70,31 @@ 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 content={content} renderContent={renderContent} children={children} {...props} />
+    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 }
+  if (hover) childProps = { ref, onMouseEnter: show, onMouseLeave: onClose, disabled }
+  if (focus) childProps = { ref, onFocus: show, disabled }
 
   return React.cloneElement(child, childProps)
 }
@@ -87,7 +110,7 @@ function DrawerPopover({ children, content, renderContent, snapPoints, ...props
     <>
       {React.cloneElement(child, childProps)}
 
-      <BottomDrawer open={open} onClose={onClose} snapPoints={snapPoints}>
+      <BottomDrawer open={open} onClose={onClose} snapPoints={snapPoints} {...props}>
         {renderContent({ onClose })}
       </BottomDrawer>
     </>

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

@@ -13,6 +13,7 @@ export function Popover({
   placement = 'bottom',
   children,
   useBottomDrawer = {},
+  bottomDrawerProps = {},
   snapPoints,
   ...props
 }) {
@@ -59,7 +60,7 @@ export function Popover({
       <View ref={ref}>
         {children}
 
-        <BottomDrawer open={open} onClose={onClose} snapPoints={snapPoints}>
+        <BottomDrawer open={open} onClose={onClose} snapPoints={snapPoints} {...bottomDrawerProps}>
           {renderContent({ onClose: onClose })}
         </BottomDrawer>
       </View>
@@ -72,7 +73,7 @@ export function Popover({
 
       {open && (
         <Modal transparent visible={open} animationType="fade" onRequestClose={onClose}>
-          <View fullW flex fullH bg="bg_op50">
+          <View fullW flex fullH bg="backdrop_op50">
             <TouchableWithoutFeedback onPress={onClose}>
               <View style={{ flex: 1 }}>
                 {triggerRect && (

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/components/theme/ThemePicker.js

@@ -0,0 +1,49 @@
+import { mapObjIndexed, mergeDeepRight, values, pipe, filter } from 'ramda'
+
+import { DEFAULT_THEMES, useThemeHandler } from '../../theme'
+import { IconLabel } from '../presentation'
+import { Link } from '../actions'
+import { Picker } from '../inputs'
+import { ThemeThumb } from './ThemeThumb'
+
+export function ThemePicker({ onChange, onlyKeys, hideKeys }) {
+  const { activeThemeKey, setActiveThemeKey, themes, onChangeTheme } = useThemeHandler()
+
+  let options = pipe(
+    mergeDeepRight(DEFAULT_THEMES),
+    mapObjIndexed((obj, key) => ({ ...obj, value: key, key })),
+    values,
+    filter((item) => {
+      if (item.value === '_all') return false
+      if (onlyKeys && onlyKeys.includes(item.value)) return true
+      if (hideKeys && hideKeys.includes(item.value)) return false
+      return true
+    })
+  )(themes)
+
+  return (
+    <Picker
+      colSpan={12}
+      gap="lg"
+      value={activeThemeKey}
+      onChange={(key) => {
+        setActiveThemeKey(key)
+        onChangeTheme?.(key)
+        onChange?.(key)
+      }}
+      options={options}
+      renderOption={({ option, selected, onChange }) => (
+        <Link onPress={onChange} gap="xs">
+          <ThemeThumb value={option.value} />
+          <IconLabel
+            center
+            label={option.label}
+            icon={selected && 'checkbox-circle-fill'}
+            color={selected ? 'primary' : 'text3'}
+            strong
+          />
+        </Link>
+      )}
+    />
+  )
+}

package/src/components/theme/ThemePickerDrawer.js

@@ -0,0 +1,13 @@
+import { BottomDrawer } from '../structure'
+import { ScrollView } from '../list/ScrollView'
+import { ThemePicker } from './ThemePicker'
+
+export function ThemePickerDrawer({ open, onClose, onChange }) {
+  return (
+    <BottomDrawer open={open} onClose={onClose} maxWidth={550} snapPoints={['50%', '85%']}>
+      <ScrollView padding="md">
+        <ThemePicker onChange={onChange} />
+      </ScrollView>
+    </BottomDrawer>
+  )
+}

package/src/components/theme/ThemeStatusBar.js

@@ -0,0 +1,3 @@
+export function ThemeStatusBar() {
+  return false
+}

package/src/components/theme/ThemeStatusBar.native.js

@@ -0,0 +1,9 @@
+import { StatusBar } from 'react-native'
+
+import { useTheme } from '../../theme'
+
+export function ThemeStatusBar(props) {
+  const { isDark } = useTheme()
+
+  return <StatusBar {...props} style={isDark ? 'dark' : 'light'} />
+}

package/src/components/theme/ThemeThumb.js

@@ -0,0 +1,98 @@
+import { View } from '../structure'
+import { useFormattedTheme } from '../../theme/format/formatTheme'
+import { useResponsiveValue } from '../../responsive'
+import { useThemeHandler } from '../../theme'
+
+export function ThemeThumb({ value }) {
+  const { themes } = useThemeHandler()
+  const { colors, label } = useFormattedTheme(themes, value)
+  const isMobile = useResponsiveValue({ smd: true, df: false })
+
+  if (isMobile) {
+    return (
+      <View centerH>
+        <View
+          bg={colors.mainBG}
+          height={175}
+          fullW
+          br="md"
+          hiddenOverflow
+          border={2}
+          brColor={colors.divider}
+          maxWidth={100}
+        >
+          <View bg={colors.overlayBG} height={25} padding={8} row borderB brColor={colors.divider}>
+            <View width={25} fullH bg={colors.primary} br="xxs" />
+            <View flex />
+            <View ratio={1} fullH bg={colors.divider} round />
+          </View>
+
+          <View flex padding={6}>
+            <View br="md" bg={colors.overlayBG} flex gap={8} padding={8} border brColor={colors.divider}>
+              <View bg={colors.text2} height={4} br="xxs" />
+              <View bg={colors.text4} height={2} br="xxs" />
+              <View bg={colors.text4} height={2} br="xxs" />
+              <View bg={colors.text4} height={2} br="xxs" />
+              <View bg={colors.text4} height={2} br="xxs" />
+              <View bg={colors.text4} height={2} br="xxs" />
+
+              <View flex />
+
+              <View height={6} fullW bg={colors.primary} br="xxs" />
+            </View>
+          </View>
+
+          <View
+            bg={colors.overlayBG}
+            height={25}
+            padding={8}
+            row
+            borderT
+            brColor={colors.divider}
+            justify="space-around"
+            centerV
+          >
+            <View ratio={1} fullH bg={colors.divider} round />
+            <View ratio={1} fullH bg={colors.divider} round />
+            <View ratio={1} fullH bg={colors.divider} round />
+            <View ratio={1} fullH bg={colors.divider} round />
+            <View ratio={1} fullH bg={colors.divider} round />
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View bg={colors.mainBG} height={175} fullW br="md" hiddenOverflow border={2} brColor={colors.divider}>
+      <View bg={colors.overlayBG} height={25} paddingV={8} paddingH={12} row borderB brColor={colors.divider}>
+        <View width={25} bg={colors.primary} br="xxs" />
+        <View flex />
+        <View ratio={1} fullH bg={colors.text4} round />
+      </View>
+
+      <View row padding={12} paddingT={8} gap={6} flex>
+        <View br="xs" bg={colors.overlayBG} flex gap={6} padding={7} border brColor={colors.divider}>
+          <View bg={colors.text4} height={2} br="xxs" />
+          <View bg={colors.text4} height={2} br="xxs" />
+          <View bg={colors.text4} height={2} br="xxs" />
+          <View bg={colors.text4} height={2} br="xxs" />
+          <View bg={colors.text4} height={2} br="xxs" />
+        </View>
+        <View br="xs" bg={colors.overlayBG} flex={4} gap={8} padding={7} border brColor={colors.divider}>
+          <View bg={colors.text2} height={4} br="xxs" width={30} />
+          <View bg={colors.text4} height={2} br="xxs" width={'80%'} />
+          <View bg={colors.text4} height={2} br="xxs" width={'80%'} />
+          <View bg={colors.text4} height={2} br="xxs" width={'80%'} />
+          <View bg={colors.text4} height={2} br="xxs" width={'80%'} />
+          <View bg={colors.text4} height={2} br="xxs" width={'80%'} />
+          <View flex />
+          <View row toRight gap={6}>
+            <View width={25} height={8} bg={colors.text4} br="xxs" />
+            <View width={25} height={8} bg={colors.primary} br="xxs" />
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}

package/src/components/theme/index.js

@@ -0,0 +1,3 @@
+export * from './ThemePicker'
+export * from './ThemePickerDrawer'
+export * from './ThemeStatusBar'

package/src/helpers/index.js

@@ -1,3 +1,4 @@
 export * from './debounce'
 export * from './string'
 export * from './random'
+export * from './storage'

package/src/helpers/storage.js

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import { AbsStorage } from '../abstractions/helpers/storage'
+
+function set(key, value) {
+  return AbsStorage.set(key, JSON.stringify(value))
+}
+
+function setAsync(key, value) {
+  return AbsStorage.setAsync(key, JSON.stringify(value))
+}
+
+function get(key) {
+  const value = AbsStorage.get(key)
+  return formatStoragedValue(value)
+}
+
+function getAsync(key) {
+  return AbsStorage.setAsync(key).then((value) => {
+    return formatStoragedValue(value)
+  })
+}
+
+function formatStoragedValue(value) {
+  try {
+    if (!value) return value
+    value = JSON.parse(value)
+    if (value === 'undefined') return undefined
+    if (value === 'null') return undefined
+    return value
+  } catch (e) {
+    return value
+  }
+}
+
+function useState(key, defaultValue) {
+  const [value, setValue] = React.useState(get(key) || defaultValue)
+
+  const handleChange = (newValue) => {
+    set(key, newValue)
+    setValue(newValue)
+  }
+
+  return [value, handleChange]
+}
+
+export const Storage = {
+  ...AbsStorage,
+  set,
+  setAsync,
+  get,
+  getAsync,
+  useState,
+}

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, ''))