@neko-os/ui 0.0.4 → 0.0.6

package/src/components/structure/Card.js

@@ -0,0 +1,45 @@
+import { pipe } from 'ramda'
+
+import { AbsView } from '../../abstractions/View'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+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'
+import { useSizeModifier } from '../../modifiers/size'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  padding: 'md', //
+  br: 'xl',
+  bg: 'overlayBG',
+  hiddenOverflow: true,
+}
+
+export function Card({ children, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('Card'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useSizeModifier, //
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexWrapperModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsView className="neko-card" {...props}>
+      {children}
+    </AbsView>
+  )
+}

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

@@ -0,0 +1,42 @@
+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'),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsView className="neko-view" {...props}>
+      {children}
+    </AbsView>
+  )
+}

package/src/components/structure/index.js

@@ -0,0 +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
+}

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

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import { PopoverContent } from './PopoverContent'
+import { useRegisterOverlay } from '../overlay/OverlayHandler'
+
+export function Popover({
+  renderContent,
+  content,
+  trigger = 'hover',
+  placement = 'bottom',
+  unmountOnClose,
+  children,
+  parentWidth,
+  parentMinWidth,
+  ...props
+}) {
+  const ref = React.useRef(null)
+  const { onOpen, onClose, onFastClose, stopDelayedClosing } = useRegisterOverlay({ unmountOnClose })
+
+  const click = trigger === 'click'
+  const hover = trigger === 'hover'
+  const focus = trigger === 'focus'
+
+  renderContent = renderContent || (() => content)
+
+  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 },
+    })
+  }
+
+  React.useEffect(() => () => onClose(), [])
+
+  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, onBlur: onClose }
+
+  return React.cloneElement(child, childProps)
+}

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

@@ -0,0 +1,75 @@
+import { Modal, TouchableWithoutFeedback } from 'react-native'
+import React from 'react'
+
+import { PopoverContent } from './PopoverContent'
+import { View } from '../View'
+import { calculatePosition } from '../overlay/calculatePosition'
+
+export function Popover({ content, placement = 'bottom', children, ...props }) {
+  const ref = React.useRef(null)
+  const [visible, setVisible] = React.useState(false)
+  const [triggerRect, setTriggerRect] = React.useState(null)
+  const [position, setPosition] = React.useState(null)
+
+  const show = () => {
+    if (ref.current) {
+      ref.current.measureInWindow((x, y, width, height) => {
+        setTriggerRect({
+          left: x,
+          top: y,
+          right: x + width,
+          bottom: y + height,
+          width,
+          height,
+        })
+        setVisible(true)
+      })
+    }
+  }
+
+  const hide = () => {
+    setVisible(false)
+    setTriggerRect(null)
+    setPosition(null)
+  }
+
+  return (
+    <>
+      <View ref={ref}>
+        {React.cloneElement(React.Children.only(children), {
+          onPress: show,
+        })}
+      </View>
+
+      {visible && (
+        <Modal transparent visible={visible} animationType="fade" onRequestClose={hide}>
+          <View fullW flex fullH bg="bg_op50">
+            <TouchableWithoutFeedback onPress={hide}>
+              <View style={{ flex: 1 }}>
+                {triggerRect && (
+                  <View
+                    style={{
+                      position: 'absolute',
+                      top: position?.y ?? -9999,
+                      left: position?.x ?? -9999,
+                    }}
+                    onLayout={(e) => {
+                      const { width, height } = e.nativeEvent.layout
+                      const popoverRect = { width, height }
+                      const pos = calculatePosition(triggerRect, popoverRect, placement, 8)
+                      setPosition(pos)
+                    }}
+                  >
+                    <PopoverContent placement={placement} {...props}>
+                      {content}
+                    </PopoverContent>
+                  </View>
+                )}
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
+        </Modal>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,18 @@
+import { Card } from '../Card'
+
+export function PopoverContent({ children, placement = 'bottom', ...props }) {
+  return (
+    <Card
+      shadow
+      padding="sm"
+      br="sm"
+      className="neko-popover-content"
+      bg="overlayBG"
+      border
+      borderColor="divider_op40"
+      {...props}
+    >
+      {children}
+    </Card>
+  )
+}

package/src/components/table/DataTable.js

@@ -0,0 +1,57 @@
+import { pipe } from 'ramda'
+
+import { Table } from '..'
+import { TableCol } from './TableCol'
+import { TableHeader } from './TableHeader'
+import { TableHeaderRow } from './TableHeaderRow'
+import { TableRow } from './TableRow'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+
+function RowItem({ record, columns, size, grid }) {
+  return (
+    <TableRow>
+      {columns.map(({ render, field, key, label, ...column }, index) => {
+        render = render || ((v) => v)
+        const value = record[field]
+
+        const colProps = { ...column, size }
+        if (!column.borderR && columns.length - 1 > index && grid) colProps.borderR = true
+
+        return (
+          <TableCol key={key} {...colProps}>
+            {render(value, record)}
+          </TableCol>
+        )
+      })}
+    </TableRow>
+  )
+}
+
+export function DataTable({ data, columns, rowKey = 'key', stickyHeader, grid, ...props }) {
+  const [{ sizeCode }, _] = pipe(
+    useSizeConverter('padding', 'md') //
+  )([{}, props])
+
+  return (
+    <Table {...props}>
+      <TableHeaderRow sticky={stickyHeader}>
+        {columns.map(({ key, ...column }, index) => {
+          const headerProps = { ...column, size: sizeCode }
+          if (!column.borderR && columns.length - 1 > index && grid) headerProps.borderR = true
+
+          return <TableHeader key={column.key} {...headerProps} />
+        })}
+      </TableHeaderRow>
+
+      {data.map((record, index) => (
+        <RowItem
+          key={record[rowKey] || record?.id || index}
+          columns={columns}
+          record={record}
+          size={sizeCode}
+          grid={grid}
+        />
+      ))}
+    </Table>
+  )
+}