@neko-os/ui 0.0.5 → 0.0.7

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>
+  )
+}

package/src/components/table/Pagination.js

@@ -0,0 +1,128 @@
+import { range, is, pipe } from 'ramda'
+import React from 'react'
+
+import { Button } from '../actions/Button'
+import { View } from '../structure/View'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+
+function getPageIndexes(pages, value, maxVisible = 5) {
+  if (pages <= maxVisible) {
+    return Array.from({ length: pages }, (_, i) => ({
+      label: i + 1,
+      value: i + 1,
+    }))
+  }
+
+  const middle = Math.floor(maxVisible / 2)
+  let start = value - middle
+  let end = value + middle
+
+  if (start < 1) {
+    start = 1
+    end = maxVisible
+  }
+
+  if (end > pages) {
+    end = pages
+    start = pages - maxVisible + 1
+  }
+
+  const range = Array.from({ length: end - start + 1 }, (_, i) => start + i)
+
+  const result = []
+
+  if (start > 1) {
+    if (start === 2) {
+      result.push({ label: 1, value: 1 })
+    } else {
+      result.push({ label: '...', value: start - 1 })
+    }
+  }
+
+  result.push(...range.map((p) => ({ label: p, value: p })))
+
+  if (end < pages) {
+    if (end === pages - 1) {
+      result.push({ label: pages, value: pages })
+    } else {
+      result.push({ label: '...', value: end + 1 })
+    }
+  }
+
+  return result
+}
+
+function Item({ active, ...props }) {
+  return (
+    <Button
+      size="sm"
+      ratio={1}
+      color={active ? 'primary' : 'transparent'}
+      textProps={{ color: !active && 'text3' }}
+      iconProps={{ color: !active && 'text3' }}
+      {...props}
+    />
+  )
+}
+
+export function Pagination({
+  total = 0,
+  itemsPerPage = 10,
+  pages,
+  maxVisible = 5,
+  value,
+  initialValue = 1,
+  onChange,
+  ...rootProps
+}) {
+  const [{ sizeCode }, props] = pipe(
+    useSizeConverter('padding', 'md') //
+  )([{}, rootProps])
+  const size = moveScale(sizeCode, -1)
+
+  pages = pages || Math.ceil(total / itemsPerPage)
+
+  const [localValue, setLocalValue] = React.useState(initialValue)
+  value = value || localValue || initialValue
+  const handleChange = (v) => {
+    setLocalValue(v)
+    onChange?.(v)
+  }
+
+  const pageIndexes = getPageIndexes(pages, value, maxVisible)
+
+  return (
+    <View className="neko-pagination" row gap="xxs" {...props}>
+      <Item
+        icon="arrow-left-s-line"
+        disabled={value === 1}
+        onPress={() => handleChange(value - 1)}
+        size={size}
+        {...props}
+      />
+
+      {pageIndexes.map((item) => {
+        return (
+          <Item
+            key={item.value}
+            active={value === item.value}
+            onPress={() => handleChange(item.value)}
+            label={item.label}
+            disabled={is(String, item.value)}
+            size={size}
+            {...props}
+          />
+        )
+      })}
+
+      <Item
+        icon="arrow-right-s-line"
+        disabled={value === pages}
+        onPress={() => handleChange(value + 1)}
+        size={size}
+        {...props}
+      />
+    </View>
+  )
+}

package/src/components/table/Table.js

@@ -0,0 +1,65 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AbsTable } from '../../abstractions/Table'
+import { AbsView } from '../../abstractions/View'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useMarginModifier } from '../../modifiers/margin'
+import { useOverflowModifier } from '../../modifiers/overflow'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { useShadowModifier } from '../../modifiers/shadow'
+import { useSizeModifier } from '../../modifiers/size'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const TableContext = React.createContext(null)
+export const useTable = () => React.useContext(TableContext) || {}
+
+const DEFAULT_PROPS = {
+  br: 'md', //
+  overflow: 'scroll',
+  width: '100%',
+  relative: true,
+}
+
+export function Table({ children, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('Table'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useDisplayModifier,
+    useSizeModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  const scrollRef = React.useRef()
+  const [scrolledToMaxLeft, setScrolledToMaxLeft] = React.useState(true)
+  const [scrolledToMaxRight, setScrolledToMaxRight] = React.useState(false)
+
+  React.useEffect(() => {
+    const el = scrollRef.current
+    if (!el || !el.addEventListener) return
+
+    const onScroll = () => {
+      setScrolledToMaxLeft(el.scrollLeft === 0)
+      setScrolledToMaxRight(el.scrollLeft + el.clientWidth >= el.scrollWidth - 1)
+    }
+
+    el.addEventListener('scroll', onScroll)
+    return () => el.removeEventListener('scroll', onScroll)
+  }, [])
+
+  return (
+    <TableContext.Provider value={{ scrolledToMaxLeft, scrolledToMaxRight }}>
+      <AbsView {...props} className="neko-table-wrapper" ref={scrollRef}>
+        <AbsTable className="neko-table">{children}</AbsTable>
+      </AbsView>
+    </TableContext.Provider>
+  )
+}

package/src/components/table/TableCol.js

@@ -0,0 +1,67 @@
+import { pipe, is } from 'ramda'
+
+import { AbsTableCol } from '../../abstractions/Table'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+import { useAlignConverter } from '../../modifiers/alignConverter'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useDisplayModifier } from '../../modifiers/display'
+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 { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useSizeModifier } from '../../modifiers/size'
+import { useTable } from './Table'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS =
+  ({ scrolledToMaxLeft, scrolledToMaxRight }) =>
+  ([{ sizeCode }, { sticky, left, right }]) => ({
+    bg: 'overlayBG',
+    paddingH: ['xxxs', 'xxs', 'xs'].includes(sizeCode) ? 'sm' : sizeCode,
+    paddingV: sizeCode,
+    borderB: true, //
+    margin: 0,
+    borderR: left !== undefined && !!sticky && !scrolledToMaxLeft,
+    borderL: right !== undefined && !!sticky && !scrolledToMaxRight,
+  })
+
+export function TableCol({ label, children, strong, color, colSpan, rowSpan, ...rootProps }) {
+  const { scrolledToMaxLeft, scrolledToMaxRight } = useTable()
+
+  const [{ sizeCode, align }, { style, ...props }] = pipe(
+    useAlignConverter('left'),
+    useSizeConverter('padding', 'md'),
+    useThemeComponentModifier('TableCol'),
+    useDefaultModifier(DEFAULT_PROPS({ scrolledToMaxLeft, scrolledToMaxRight })),
+    useDisplayModifier,
+    usePositionModifier,
+    useSizeModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  if (!!label || is(String, children) || is(Number, children)) {
+    children = (
+      <Text strong={!!strong} color={color} size={sizeCode} align={align}>
+        {label || children}
+      </Text>
+    )
+  }
+
+  return (
+    <AbsTableCol className="neko-table-col" style={style} colSpan={colSpan} rowSpan={rowSpan}>
+      <View className="neko-table-col-content" fullW fullH align={align} centerV {...props}>
+        {children}
+      </View>
+    </AbsTableCol>
+  )
+}

package/src/components/table/TableHeader.js

@@ -0,0 +1,69 @@
+import { pipe, is } from 'ramda'
+
+import { AbsTableHeader } from '../../abstractions/Table'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useAlignConverter } from '../../modifiers/alignConverter'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useDisplayModifier } from '../../modifiers/display'
+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 { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useSizeModifier } from '../../modifiers/size'
+import { useTable } from './Table'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS =
+  ({ scrolledToMaxLeft, scrolledToMaxRight }) =>
+  ([{ sizeCode }, { sticky, left, right }]) => ({
+    bg: 'overlayBG',
+    paddingH: ['xxxs', 'xxs', 'xs'].includes(sizeCode) ? 'sm' : sizeCode,
+    paddingV: moveScale(sizeCode, -1),
+    borderB: true,
+    margin: 0,
+    borderR: left !== undefined && !!sticky && !scrolledToMaxLeft,
+    borderL: right !== undefined && !!sticky && !scrolledToMaxRight,
+  })
+
+export function TableHeader({ children, label, colSpan, rowSpan, ...rootProps }) {
+  const { scrolledToMaxLeft, scrolledToMaxRight } = useTable()
+
+  const [{ sizeCode, align }, { style, ...props }] = pipe(
+    useAlignConverter('left'),
+    useSizeConverter('padding', 'md'),
+    useThemeComponentModifier('TableHeader'),
+    useDefaultModifier(DEFAULT_PROPS({ scrolledToMaxLeft, scrolledToMaxRight })),
+    useDisplayModifier,
+    usePositionModifier,
+    useSizeModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  if (!!label || is(String, children)) {
+    console.log(sizeCode, moveScale(sizeCode, -1))
+    children = (
+      <Text strong text3 fullW block align={align} size={moveScale(sizeCode, -1)}>
+        {label || children}
+      </Text>
+    )
+  }
+
+  return (
+    <AbsTableHeader className="neko-table-header" style={style} colSpan={colSpan} rowSpan={rowSpan}>
+      <View className="neko-table-header-content" fullW fullH align={align} centerV {...props}>
+        {children}
+      </View>
+    </AbsTableHeader>
+  )
+}

package/src/components/table/TableHeaderRow.js

@@ -0,0 +1,31 @@
+import { pipe } from 'ramda'
+
+import { AbsTableRow } from '../../abstractions/Table'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useOverflowModifier } from '../../modifiers/overflow'
+import { usePositionModifier } from '../../modifiers/position'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  top: 0,
+  zIndex: 40,
+}
+
+export function TableHeaderRow({ children, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('TableHeaderRow'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useDisplayModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    useBackgroundModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsTableRow className="neko-table-header-row" {...props}>
+      {children}
+    </AbsTableRow>
+  )
+}

package/src/components/table/TableRow.js

@@ -0,0 +1,30 @@
+import { pipe } from 'ramda'
+
+import { AbsTableRow } from '../../abstractions/Table'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useOverflowModifier } from '../../modifiers/overflow'
+import { usePositionModifier } from '../../modifiers/position'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  // bg: 'green',
+}
+
+export function TableRow({ children, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('TableRow'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useDisplayModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    useBackgroundModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsTableRow className="neko-table-row" {...props}>
+      {children}
+    </AbsTableRow>
+  )
+}

package/src/components/table/index.js

@@ -0,0 +1,7 @@
+export * from './Table'
+export * from './TableRow'
+export * from './TableHeaderRow'
+export * from './TableHeader'
+export * from './TableCol'
+export * from './DataTable'
+export * from './Pagination'

package/src/components/text/Text.js

@@ -1,7 +1,9 @@
 import { pipe } from 'ramda'
 
 import { AbsText } from '../../abstractions/Text'
+import { useAnimationModifier } from '../../modifiers/animation'
 import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDisplayModifier } from '../../modifiers/display'
 import { useFlexModifier } from '../../modifiers/flex'
 import { useMarginModifier } from '../../modifiers/margin'
 import { usePaddingModifier } from '../../modifiers/padding'
@@ -15,6 +17,8 @@ export function Text({ children, label, ...rootProps }) {
     useColorConverter('text'),
     useTextConverter('p'),
     useThemeComponentModifier('Text'),
+    useAnimationModifier,
+    useDisplayModifier,
     useSizeModifier, //
     usePaddingModifier,
     useMarginModifier,

package/src/components/text/VerticalText.js

@@ -0,0 +1,29 @@
+import { pipe } from 'ramda'
+
+import { AbsText } from '../../abstractions/Text'
+import { VerticalView } from '../helpers/VerticalView'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useTextConverter } from '../../modifiers/textConverter'
+import { useTextModifier } from '../../modifiers/text'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function VerticalText({ children, label, invert, ...rootProps }) {
+  const [_, { style, ...props }] = pipe(
+    useColorConverter('text'),
+    useTextConverter('p'),
+    useThemeComponentModifier('VerticalText'),
+    useTextModifier
+  )([{}, rootProps])
+
+  return (
+    <VerticalView invert={invert} {...props}>
+      <AbsText
+        style={{
+          ...style,
+        }}
+      >
+        {children || label}
+      </AbsText>
+    </VerticalView>
+  )
+}

package/src/components/text/index.js

@@ -1 +1,2 @@
 export * from './Text'
+export * from './VerticalText'

package/src/helpers/debounce.js

@@ -0,0 +1,9 @@
+export function debounce(action, time = 550) {
+  let timer
+  return (...params) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      action.apply(this, params)
+    }, time)
+  }
+}