@neko-os/ui 0.0.5 → 0.0.6

package/src/components/presentation/Tag.js

@@ -19,16 +19,12 @@ import { useSizeModifier } from '../../modifiers/size'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
 const DEFAULT_PROPS = ([{ sizeCode }]) => {
-  const oneSizeDown = moveScale(sizeCode, -1)
-  const twoSizeDown = moveScale(sizeCode, -2)
-  const threeSizeDown = moveScale(sizeCode, -3)
-
   return {
-    paddingH: twoSizeDown,
-    padding: threeSizeDown,
+    paddingH: moveScale(sizeCode, -2),
+    padding: moveScale(sizeCode, -4),
     outline: true,
-    br: threeSizeDown,
-    borderWidth: 1,
+    br: 'xxxs',
+    border: 1,
     center: true,
   }
 }
@@ -50,21 +46,22 @@ export function Tag(rootProps) {
     useBorderModifier
   )([{}, rootProps])
 
-  const { label, icon, textProps, iconProps, gap, invert, ...props } = formattedProps
+  const { loading, disabled, label, icon, textProps, iconProps, gap, invert, ...props } = formattedProps
 
   return (
-    <View className="neko-tag" row>
+    <View className="neko-tag" row disabled={disabled}>
       <AbsView className="neko-tag-inner" {...props}>
         <IconLabel
           center
           color={fontColor}
-          size={moveScale(sizeCode, -1)}
+          size={moveScale(sizeCode, -2)}
           label={label}
           icon={icon}
           gap={gap}
           invert={invert}
           textProps={{ strong: true, ...textProps }}
           iconProps={iconProps}
+          loading={loading}
         />
       </AbsView>
     </View>

package/src/components/presentation/Tooltip.js

@@ -0,0 +1,43 @@
+import { pipe } from 'ramda'
+
+import { IconLabel } from './IconLabel'
+import { Popover } from '../structure/popover/Popover'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useFullColorModifier } from '../../modifiers/fullColor'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Tooltip(rootProps) {
+  const [{ loading, fontColor, sizeCode }, formattedProps] = pipe(
+    useColorConverter('overlayBG'),
+    useSizeConverter('text', 'md'),
+    useThemeComponentModifier('Tooltip'),
+    useFullColorModifier
+  )([{}, rootProps])
+
+  const { label, icon, textProps, iconProps, gap, invert, children, ...props } = formattedProps
+  if (!label && !icon) return children
+
+  return (
+    <Popover
+      className="neko-tooltip"
+      {...props}
+      content={
+        <IconLabel
+          center
+          color={fontColor}
+          size={sizeCode}
+          label={label}
+          icon={icon}
+          gap={gap}
+          invert={invert}
+          textProps={textProps}
+          iconProps={iconProps}
+          loading={loading}
+        />
+      }
+    >
+      {children}
+    </Popover>
+  )
+}

package/src/components/presentation/index.js

@@ -1,3 +1,11 @@
 export * from './Tag'
 export * from './Icon'
 export * from './IconLabel'
+export * from './Result'
+export * from './ResultBar'
+export * from './Tooltip'
+export * from './Badge'
+export * from './Avatar'
+export * from './AvatarLabel'
+export * from './Image'
+export * from './LabelValue'

package/src/components/state/Loading.js

@@ -0,0 +1,20 @@
+import { pipe } from 'ramda'
+
+import { AbsActivityIndicator } from '../../abstractions/ActivityIndicator'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useMarginModifier } from '../../modifiers/margin'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Loading({ ...rootProps }) {
+  const [{ color, size }, props] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('icons', 'md'),
+    useThemeComponentModifier('Loading'),
+    usePaddingModifier,
+    useMarginModifier
+  )([{}, rootProps])
+
+  return <AbsActivityIndicator className="neko-loader" size={size} color={color} {...props} />
+}

package/src/components/state/LoadingView.js

@@ -0,0 +1,28 @@
+import { Loading } from './Loading'
+import { View } from '../structure/View'
+
+export function LoadingView({ active, children, size, color, replaceChildren, noWrapper, ...props }) {
+  if (!active && !!noWrapper) return children
+  if (!active) return <View {...props}>{children}</View>
+
+  const loader = <Loading size={size} color={color} />
+  if (!!replaceChildren && !!noWrapper) return loader
+  if (!!replaceChildren) {
+    return (
+      <View {...props} center>
+        {loader}
+      </View>
+    )
+  }
+
+  return (
+    <View className="neko-loading-view" relative {...props}>
+      {children}
+      <View className="neko-laoding-view-overlay" bg="bg_op90" absolute top={0} left={0} right={0} bottom={0} center>
+        {loader}
+      </View>
+    </View>
+  )
+}
+
+export const LoadingWrapper = LoadingView

package/src/components/state/index.js

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

package/src/components/structure/Accordion.js

@@ -0,0 +1,69 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AbsView } from '../../abstractions/View'
+import { Card } from './Card'
+import { Icon } from '../presentation/Icon'
+import { Link } from '../actions/Link'
+import { Text } from '../text/Text'
+import { View } from './View'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  padding: 0,
+  br: 'xl',
+  bg: 'overlayBG',
+  hiddenOverflow: true,
+}
+
+export function Accordion({ children, title, open, onChange, ...rootProps }) {
+  const [{ sizeCode }, formattedProps] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Accordion'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { contentProps, titleProps, headerProps, initOpen, ...props } = formattedProps
+
+  const [localOpen, setLocalOpen] = React.useState(initOpen)
+  open = open === undefined ? localOpen : open
+
+  const toggle = () => {
+    setLocalOpen(!open)
+    onChange?.(!open)
+  }
+
+  return (
+    <Card {...props}>
+      <Link
+        padding={sizeCode}
+        row
+        gap={moveScale(sizeCode, -2)}
+        borderB={open ? props.border || true : open}
+        borderColor={props.borderColor}
+        centerV
+        {...headerProps}
+        onPress={toggle}
+      >
+        <Icon name={!!open ? 'arrow-down-s-line' : 'arrow-right-s-line'} />
+        <Text flex {...titleProps}>
+          {title}
+        </Text>
+      </Link>
+      {!!open && (
+        <View padding={sizeCode} {...contentProps}>
+          {children}
+        </View>
+      )}
+    </Card>
+  )
+
+  return (
+    <AbsView className="neko-accordion" {...props}>
+      {children}
+    </AbsView>
+  )
+}

package/src/components/structure/AccordionGroup.js

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import { Accordion } from './Accordion'
+import { Card } from './Card'
+
+export function AccordionsGroup({ items, contentProps, titleProps, headerProps, initOpen, open, onChange, ...props }) {
+  const [localOpen, setLocalOpen] = React.useState(initOpen)
+  open = open === undefined ? localOpen : open
+
+  const handleChange = (key) => {
+    const v = open === key ? null : key
+    setLocalOpen(v)
+    onChange?.(v)
+  }
+
+  if (!items?.length) return false
+
+  const sharedProps = { contentProps, titleProps, headerProps }
+
+  return (
+    <Card padding={0} {...props}>
+      {items.map(({ key, ...item }, index) => (
+        <Accordion
+          key={key || index}
+          {...sharedProps}
+          {...item}
+          br={0}
+          borderB={index < items.length - 1}
+          open={!!open && open === key}
+          onChange={() => handleChange(key)}
+        />
+      ))}
+    </Card>
+  )
+}

package/src/components/structure/Card.js

@@ -7,6 +7,7 @@ import { useDefaultModifier } from '../../modifiers/default'
 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'
@@ -15,8 +16,9 @@ import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
 const DEFAULT_PROPS = {
   padding: 'md', //
-  br: 'xlg',
+  br: 'xl',
   bg: 'overlayBG',
+  hiddenOverflow: true,
 }
 
 export function Card({ children, ...rootProps }) {
@@ -25,6 +27,7 @@ export function Card({ children, ...rootProps }) {
     useDefaultModifier(DEFAULT_PROPS),
     useSizeModifier, //
     usePositionModifier,
+    useOverflowModifier,
     usePaddingModifier,
     useMarginModifier,
     useFlexWrapperModifier,

package/src/components/structure/Col.js

@@ -0,0 +1,22 @@
+import { pipe } from 'ramda'
+
+import { View } from './View'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useResponsiveConverter } from '../../modifiers/responsiveConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {}
+
+export function Col({ children, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('Col'), //
+    useResponsiveConverter([]),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  return (
+    <View className="neko-col" {...props}>
+      {children}
+    </View>
+  )
+}

package/src/components/structure/Row.js

@@ -0,0 +1,42 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AbsView } from '../../abstractions/View'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useGridModifier } from '../../modifiers/grid'
+import { useMarginModifier } from '../../modifiers/margin'
+import { usePositionModifier } from '../../modifiers/position'
+import { useResponsiveConverter } from '../../modifiers/responsiveConverter'
+import { useSizeModifier } from '../../modifiers/size'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Row({ children, ...rootProps }) {
+  const [{ childPaddingProps }, { colSpan, ...props }] = pipe(
+    useThemeComponentModifier('Row'),
+    useResponsiveConverter([]),
+    useGridModifier,
+    useSizeModifier, //
+    usePositionModifier,
+    useFlexWrapperModifier,
+    useFlexModifier,
+    useMarginModifier
+  )([{}, rootProps])
+
+  // Memoiza os children clonados para evitar recriação se childPaddingProps não mudar
+  const clonedChildren = React.useMemo(
+    () =>
+      React.Children.map(children, (child) =>
+        React.isValidElement(child) ? React.cloneElement(child, { parentSpan: colSpan, ...childPaddingProps }) : child
+      ),
+    [children, childPaddingProps]
+  )
+
+  return (
+    <AbsView className="neko-row" {...props}>
+      {clonedChildren}
+    </AbsView>
+  )
+}
+
+export const Grid = Row

package/src/components/structure/SafeAreaView.js

@@ -0,0 +1,42 @@
+import { pipe } from 'ramda'
+
+import { AbsSafeAreaView } from '../../abstractions/SafeAreaView'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+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 SafeAreaView({ children, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('SafeAreaView'),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsSafeAreaView className="neko-safe-area-view" {...props}>
+      {children}
+    </AbsSafeAreaView>
+  )
+}

package/src/components/structure/View.js

@@ -1,27 +1,33 @@
 import { pipe } from 'ramda'
 
 import { AbsView } from '../../abstractions/View'
+import { useAnimationModifier } from '../../modifiers/animation'
 import { useBackgroundModifier } from '../../modifiers/background'
 import { useBorderModifier } from '../../modifiers/border'
 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 View({ children, ...rootProps }) {
   const [_, props] = pipe(
     useThemeComponentModifier('View'),
-    useDisplayModifier, //
-    useSizeModifier, //
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
     usePositionModifier,
+    useOverflowModifier,
     usePaddingModifier,
     useMarginModifier,
-    useFlexWrapperModifier,
     useFlexModifier,
     useBackgroundModifier,
     useBorderModifier,

package/src/components/structure/index.js

@@ -1,2 +1,8 @@
+export * from './Accordion'
+export * from './AccordionGroup'
 export * from './View'
+export * from './SafeAreaView'
 export * from './Card'
+export * from './Row'
+export * from './Col'
+export * from './popover/Popover'

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

@@ -0,0 +1,70 @@
+import { toPairs, dissoc } from 'ramda'
+import React from 'react'
+
+import { OverlayWrapper } from './OverlayWrapper'
+import { Text } from '../../text/Text'
+import { genRandonId } from '../../../helpers/random'
+
+const OverlayContext = React.createContext(null)
+
+export const useOverlay = () => React.useContext(OverlayContext)
+
+export const useRegisterOverlay = (opts = {}) => {
+  const { unmountOnClose } = opts
+  const timeout = React.useRef(null)
+  const { overlays, setOverlays } = useOverlay()
+  const randomId = React.useMemo(() => genRandonId(), [])
+  const overlay = overlays[randomId] || {}
+  const mergeOverlay = (value) => setOverlays((data) => ({ ...data, [randomId]: { ...overlay, ...value } }))
+  const closeOverlay = () => mergeOverlay({ open: false })
+  const removeOverlay = () => setOverlays((data) => dissoc(randomId, data))
+  const stopDelayedClosing = () => !!timeout?.current && clearTimeout(timeout.current)
+
+  React.useEffect(() => {
+    return () => removeOverlay()
+  }, [])
+
+  const onOpen = ({ content, triggerRect, placement, options = {} }) => {
+    stopDelayedClosing()
+    mergeOverlay({ open: true, content, triggerRect, placement, ...options })
+  }
+
+  const onClose = () => {
+    stopDelayedClosing()
+    timeout.current = setTimeout(() => {
+      !!unmountOnClose ? removeOverlay() : closeOverlay()
+    }, 250)
+  }
+
+  const onFastClose = () => {
+    stopDelayedClosing()
+    !!unmountOnClose ? removeOverlay() : closeOverlay()
+  }
+
+  return { onOpen, onClose, onFastClose, stopDelayedClosing }
+}
+
+export function OverlayHandler({ children }) {
+  const [overlays, setOverlays] = React.useState({})
+
+  return (
+    <OverlayContext.Provider value={{ overlays, setOverlays }}>
+      {children}
+
+      {toPairs(overlays).map(([key, overlay]) => {
+        const handleClickOutside = () => setTimeout(() => setOverlays((data) => dissoc(key, data)), 100)
+        return (
+          <OverlayWrapper
+            key={key}
+            triggerRect={overlay.triggerRect}
+            placement={overlay.placement}
+            onClickOutside={overlay.dismissOnClickOutside ? handleClickOutside : null}
+            display={!overlay.open && 'none'}
+          >
+            {overlay.content}
+          </OverlayWrapper>
+        )
+      })}
+    </OverlayContext.Provider>
+  )
+}

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

@@ -0,0 +1,6 @@
+export const useOverlay = () => ({})
+
+// Not needed for native since components like Popover handle their own modals
+export function OverlayHandler({ children }) {
+  return children
+}

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

@@ -0,0 +1,52 @@
+import React from 'react'
+import { View } from '../View'
+import { calculatePosition } from './calculatePosition'
+import { smartPlacement } from './smartPlacement' // você cria esse helper
+
+export function OverlayWrapper({ children, triggerRect, placement, onClickOutside, ...props }) {
+  const overlayRef = React.useRef(null)
+  const [pos, setPos] = React.useState({ x: -9999, y: -9999 })
+
+  React.useLayoutEffect(() => {
+    if (overlayRef.current && triggerRect) {
+      const rect = overlayRef.current.getBoundingClientRect()
+      const popoverRect = { width: rect.width, height: rect.height }
+
+      const safePlacement = smartPlacement(triggerRect, popoverRect, placement)
+      setPos(calculatePosition(triggerRect, popoverRect, safePlacement))
+    }
+  }, [triggerRect, placement, children])
+
+  React.useEffect(() => {
+    if (onClickOutside) {
+      const handleClickOutside = (event) => {
+        if (overlayRef.current && !overlayRef.current.contains(event.target)) {
+          onClickOutside()
+        }
+      }
+      const timer = setTimeout(() => {
+        document.addEventListener('mousedown', handleClickOutside, true)
+      }, 10)
+
+      return () => {
+        clearTimeout(timer)
+        document.removeEventListener('mousedown', handleClickOutside, true)
+      }
+    }
+  }, [onClickOutside])
+
+  return (
+    <View
+      ref={overlayRef}
+      className="neko-overlay-wrapper"
+      absolute
+      top={pos.y}
+      left={pos.x}
+      zIndex={9999}
+      pointerEvents="none"
+      {...props}
+    >
+      {children}
+    </View>
+  )
+}

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

@@ -0,0 +1,29 @@
+export function calculatePosition(triggerRect, popoverRect, placement, gap = 2) {
+  const { left, right, top, bottom, width, height } = triggerRect
+  const pw = popoverRect?.width || 0
+  const ph = popoverRect?.height || 0
+
+  const positions = {
+    // Top
+    top: { x: left + width / 2 - pw / 2, y: top - ph - gap },
+    topLeft: { x: left, y: top - ph - gap },
+    topRight: { x: right - pw, y: top - ph - gap },
+
+    // Bottom
+    bottom: { x: left + width / 2 - pw / 2, y: bottom + gap },
+    bottomLeft: { x: left, y: bottom + gap },
+    bottomRight: { x: right - pw, y: bottom + gap },
+
+    // Left
+    left: { x: left - pw - gap, y: top + height / 2 - ph / 2 },
+    leftTop: { x: left - pw - gap, y: top },
+    leftBottom: { x: left - pw - gap, y: bottom - ph },
+
+    // Right
+    right: { x: right + gap, y: top + height / 2 - ph / 2 },
+    rightTop: { x: right + gap, y: top },
+    rightBottom: { x: right + gap, y: bottom - ph },
+  }
+
+  return positions[placement] || positions.bottom
+}

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

@@ -0,0 +1,32 @@
+export function smartPlacement(triggerRect, popoverRect, placement) {
+  const scrollX = window.scrollX || window.pageXOffset
+  const scrollY = window.scrollY || window.pageYOffset
+  const screenWidth = window.innerWidth
+  const screenHeight = window.innerHeight
+
+  const viewportRect = {
+    left: triggerRect.left - scrollX,
+    right: triggerRect.right - scrollX,
+    top: triggerRect.top - scrollY,
+    bottom: triggerRect.bottom - scrollY,
+  }
+
+  const fitsRight = viewportRect.right + popoverRect.width <= screenWidth
+  const fitsLeft = viewportRect.left - popoverRect.width >= 0
+  const fitsBottom = viewportRect.bottom + popoverRect.height <= screenHeight
+  const fitsTop = viewportRect.top - popoverRect.height >= 0
+
+  if (placement.startsWith('right') && !fitsRight && fitsLeft) return placement.replace('right', 'left')
+  if (placement.endsWith('Right') && !fitsLeft && fitsRight) return placement.replace('Right', 'Left')
+
+  if (placement.startsWith('left') && !fitsLeft && fitsRight) return placement.replace('left', 'right')
+  if (placement.endsWith('Left') && !fitsRight && fitsLeft) return placement.replace('Left', 'Right')
+
+  if (placement.startsWith('bottom') && !fitsBottom && fitsTop) return placement.replace('bottom', 'top')
+  if (placement.endsWith('Bottom') && !fitsTop && fitsBottom) return placement.replace('Bottom', 'Top')
+
+  if (placement.startsWith('top') && !fitsTop && fitsBottom) return placement.replace('top', 'bottom')
+  if (placement.endsWith('Top') && !fitsBottom && fitsTop) return placement.replace('Top', 'Bottom')
+
+  return placement
+}