@neko-os/ui 0.0.4 → 0.0.6

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

@@ -0,0 +1,32 @@
+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'
+import { useSizeModifier } from '../../modifiers/size'
+import { useTextConverter } from '../../modifiers/textConverter'
+import { useTextModifier } from '../../modifiers/text'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Text({ children, label, ...rootProps }) {
+  const [_, props] = pipe(
+    useColorConverter('text'),
+    useTextConverter('p'),
+    useThemeComponentModifier('Text'),
+    useAnimationModifier,
+    useDisplayModifier,
+    useSizeModifier, //
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useTextModifier
+  )([{}, rootProps])
+
+  return <AbsText {...props}>{children || label}</AbsText>
+}
+
+export const Title = Text

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

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

package/src/helpers/index.js

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

package/src/helpers/options.js

@@ -0,0 +1,65 @@
+import { is, propEq } from 'ramda'
+import React from 'react'
+
+function formatOptions(options) {
+  if (!options?.length) return options
+  return options.map((option) => {
+    if (is(String, option) || is(Number, option)) {
+      return { label: option, value: option }
+    }
+    return option
+  })
+}
+
+export function useOptions(optionsOrFetch, { limit } = {}) {
+  const isLazy = !is(Array, optionsOrFetch)
+  const [loading, setLoading] = React.useState(isLazy)
+  const [options, setOptions] = React.useState([])
+  const [page, setPage] = React.useState(1)
+  const [done, setDone] = React.useState(!isLazy)
+
+  const isFirstLoad = page === 1 && !options?.length && loading
+  const isRefetching = page === 1 && !!options.length && loading
+  const isFetchingMore = page > 1 && !!options.length && loading
+
+  const handleGetOptions = (page = 1) => {
+    setDone(false)
+    setPage(page)
+    setLoading(true)
+    optionsOrFetch(optionsOrFetch, page)
+      .then((result) => {
+        if (result?.length < limit) setDone(true)
+        let newOptions = []
+        if (page > 1) newOptions = options
+        setOptions([...newOptions, ...result])
+      })
+      .finally(() => setLoading(false))
+  }
+
+  const fetchMore = () => {
+    const newPage = (page || 1) + 1
+    handleGetOptions(newPage)
+  }
+
+  React.useEffect(() => {
+    if (isLazy) handleGetOptions()
+  }, [limit])
+
+  return {
+    options: formatOptions(isLazy ? options : optionsOrFetch),
+    handleGetOptions,
+    fetchMore,
+    done,
+    page,
+    done,
+    limit,
+    loading,
+    isFirstLoad,
+    isRefetching,
+    isFetchingMore,
+  }
+}
+
+export function findOptionByValue(options, value) {
+  return options.find(propEq('value', value))
+}

package/src/helpers/random.js

@@ -0,0 +1,5 @@
+export function genRandonId(length = 30) {
+  return Math.random()
+    .toString(36)
+    .substring(2, 2 + length)
+}

package/src/index.css

@@ -25,6 +25,12 @@ body {
   min-height: 100vh;
 }
 
+a,
+button {
+  cursor: pointer;
+  text-decoration: none;
+}
+
 .neko-wave-click-effect {
   position: relative;
   padding: 10px 20px;
@@ -66,3 +72,12 @@ body {
     transform: scale(1.3);
   }
 }
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/index.js

@@ -1,9 +1,7 @@
-// export * from './form'
-export * from './structure'
-export * from './actions'
-export * from './presentation'
-export * from './text'
+export * from './helpers'
+export * from './components'
 export * from './theme'
+export * from './responsive'
 export * from './NekoUI'
 
 export const version = 41

package/src/modifiers/alignConverter.js

@@ -0,0 +1,11 @@
+export function useAlignConverter(defaultValue) {
+  return ([values, props]) => {
+    let align = props.align
+    if (!align && props.center) align = 'center'
+    if (!align && props.toRight) align = 'right'
+    if (!align && props.toLeft) align = 'left'
+    if (!align) align = defaultValue
+
+    return [{ align }, { ...props, align }]
+  }
+}

package/src/modifiers/animation.js

@@ -0,0 +1,18 @@
+import { clearProps } from './_helpers'
+
+export function useAnimationModifier([values, props]) {
+  let { transition, ...restProps } = props
+
+  const style = clearProps({ transition })
+
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
+    },
+  ]
+}