@neko-os/ui 0.2.2 → 0.3.0

package/src/components/structure/Affix.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { View } from './View'
+
+export function Affix({ children, shadow, offsetTop, offsetBottom, ...props }) {
+  const [isFloating, setIsFloating] = React.useState(false)
+  const sentinelRef = React.useRef()
+
+  React.useEffect(() => {
+    const sentinel = sentinelRef.current
+    if (!sentinel) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsFloating(!entry.isIntersecting),
+      { threshold: [1] }
+    )
+    observer.observe(sentinel)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <>
+      <div ref={sentinelRef} style={{ height: 0 }} />
+      <View
+        sticky
+        top={offsetBottom === undefined ? (offsetTop || 0) : undefined}
+        bottom={offsetBottom}
+        shadow={shadow && isFloating}
+        {...props}
+      >
+        {children}
+      </View>
+    </>
+  )
+}

package/src/components/structure/Affix.native.js

@@ -0,0 +1,3 @@
+export function Affix({ children }) {
+  return children
+}

package/src/components/structure/Card.js

@@ -19,6 +19,7 @@ const DEFAULT_PROPS = {
   br: 'xl',
   bg: 'overlayBG',
   hiddenOverflow: true,
+  border: 'overlayDivider',
 }
 
 export function Card({ children, ...rootProps }) {

package/src/components/structure/TopBar.js

@@ -1,12 +1,24 @@
+import { pipe } from 'ramda'
+
 import { Text } from '../text'
 import { View } from './View'
+import { useDefaultModifier } from '../../modifiers/default'
 import { useResponsiveConverter } from '../../modifiers/responsiveConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
 
+const DEFAULT_PROPS = {
+  borderB: 'overlayDivider',
+}
+
 export function TopBar({ right, left, WrapperView, children, ...rootProps }) {
   const { top: safeTop } = useSafeAreaInsets()
 
-  const [_, props] = useResponsiveConverter([])([{}, rootProps])
+  const [_, props] = pipe(
+    useThemeComponentModifier('TopBar'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useResponsiveConverter([])
+  )([{}, rootProps])
   let { useSafeArea = true, title, subtitle } = props
 
   const hasContent = !!title || !!subtitle || !!children || !!right || !!left
@@ -16,7 +28,7 @@ export function TopBar({ right, left, WrapperView, children, ...rootProps }) {
   return (
     <WrapperView paddingT={useSafeArea && safeTop} {...props}>
       {!!hasContent && (
-        <View minH="md" centerV row paddingH="md" paddingV="sm" gap="sm" fullW>
+        <View minH="xxl" centerV row paddingH="md" paddingV="sm" gap="sm" fullW>
           <View flex={1} toLeft>
             {left}
           </View>

package/src/components/structure/index.js

@@ -1,4 +1,5 @@
 export * from './Accordion'
+export * from './Affix'
 export * from './AccordionGroup'
 export * from './View'
 export * from './GradientView'

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

@@ -10,8 +10,9 @@ const OverlayContext = React.createContext(null)
 export const useOverlay = () => React.useContext(OverlayContext)
 
 export const useRegisterOverlay = (opts = {}) => {
-  const { unmountOnClose } = opts
+  const { unmountOnClose, onOpenChange } = opts
   const timeout = React.useRef(null)
+  const wasOpen = React.useRef(false)
   const { overlays, setOverlays } = useOverlay()
   const randomId = React.useMemo(() => genRandonId(), [])
   const overlay = overlays[randomId] || {}
@@ -20,12 +21,19 @@ export const useRegisterOverlay = (opts = {}) => {
   const removeOverlay = () => setOverlays((data) => dissoc(randomId, data))
   const stopDelayedClosing = () => !!timeout?.current && clearTimeout(timeout.current)
 
+  const isOpen = !!overlay.open
+  React.useEffect(() => {
+    if (wasOpen.current && !isOpen) onOpenChange?.(false)
+    wasOpen.current = isOpen
+  }, [isOpen])
+
   React.useEffect(() => {
     return () => removeOverlay()
   }, [])
 
   const onOpen = ({ content, triggerRect, placement, options = {} }) => {
     stopDelayedClosing()
+    onOpenChange?.(true)
     mergeOverlay({ open: true, content, triggerRect, placement, ...options })
   }
 

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

@@ -18,11 +18,16 @@ export function Popover({
   bottomDrawerProps = {},
   watch,
   disabled,
+  startsOpen,
+  onOpenChange,
   ...props
 }) {
   const shouldUseDrawer = useResponsiveValue(useBottomDrawer)
   const ref = React.useRef(null)
-  const { onOpen, onUpdate, onClose, onFastClose, stopDelayedClosing } = useRegisterOverlay({ unmountOnClose })
+  const { onOpen, onUpdate, onClose, onFastClose, stopDelayedClosing } = useRegisterOverlay({
+    unmountOnClose,
+    onOpenChange,
+  })
 
   const click = trigger === 'click'
   const hover = trigger === 'hover'
@@ -68,7 +73,10 @@ export function Popover({
     })
   }
 
-  React.useEffect(() => () => onClose(), [])
+  React.useEffect(() => {
+    if (startsOpen && ref.current) show()
+    return () => onClose()
+  }, [])
 
   React.useEffect(() => {
     if (!ref.current || !watch) return
@@ -84,6 +92,7 @@ export function Popover({
         content={content}
         renderContent={renderContent}
         children={children}
+        onOpenChange={onOpenChange}
         {...props}
         {...bottomDrawerProps}
       />
@@ -99,12 +108,20 @@ export function Popover({
   return React.cloneElement(child, childProps)
 }
 
-function DrawerPopover({ children, content, renderContent, snapPoints, ...props }) {
+function DrawerPopover({ children, content, renderContent, snapPoints, onOpenChange, ...props }) {
   const [open, setOpen] = React.useState(false)
-  const onClose = () => setOpen(false)
+  const onClose = () => {
+    setOpen(false)
+    onOpenChange?.(false)
+  }
 
   const child = React.Children.only(children)
-  let childProps = { onClick: () => setOpen(true) }
+  let childProps = {
+    onClick: () => {
+      setOpen(true)
+      onOpenChange?.(true)
+    },
+  }
 
   return (
     <>

package/src/components/table/DataTable.js

@@ -35,11 +35,16 @@ export function DataTable({ data, columns, rowKey = 'key', stickyHeader, grid, .
   return (
     <Table {...props}>
       <TableHeaderRow sticky={stickyHeader}>
-        {columns.map(({ key, ...column }, index) => {
+        {columns.map((rawColumn, index) => {
+          const { key, render, renderHeader, field, label, ...column } = rawColumn
           const headerProps = { ...column, size: sizeCode }
           if (!column.borderR && columns.length - 1 > index && grid) headerProps.borderR = true
 
-          return <TableHeader key={column.key} {...headerProps} />
+          return (
+            <TableHeader key={key} {...headerProps}>
+              {renderHeader ? renderHeader(rawColumn) : label}
+            </TableHeader>
+          )
         })}
       </TableHeaderRow>
 

package/src/components/table/Table.js

@@ -18,10 +18,11 @@ const TableContext = React.createContext(null)
 export const useTable = () => React.useContext(TableContext) || {}
 
 const DEFAULT_PROPS = {
-  br: 'md', //
+  br: 'xxl', //
   overflow: 'scroll',
   width: '100%',
   relative: true,
+  border: 'overlayDivider',
 }
 
 export function Table({ children, ...rootProps }) {

package/src/components/tabs/ActiveTabContent.js

@@ -7,7 +7,10 @@ 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 Content = React.useMemo(
+    () => item.render || item.renderContent || item.Content,
+    [item.renderContent, item.Content]
+  )
   const [open, setOpen] = React.useState(active)
 
   React.useEffect(() => {

package/src/components/text/DateText.js

@@ -1,11 +1,24 @@
 import { is } from 'ramda'
 import dayjs from 'dayjs'
+import relativeTime from 'dayjs/esm/plugin/relativeTime'
 
 import { Text } from '../text'
 
-export function DateText({ format = 'DD MMM YYYY', value, children, ...props }) {
+dayjs.extend(relativeTime)
+
+export function DateText({ format = 'DD MMM YYYY', fromNow, withFromNow, value, children, ...props }) {
   value = is(String, children) ? children : value
+  if (!value) return false
   // TODO: Get format from i18n
 
-  return <Text {...props}>{dayjs(value).format(format)}</Text>
+  const date = dayjs(value)
+  const formattedValue = fromNow ? date.fromNow() : date.format(format)
+  const suffix = withFromNow ? ` (${date.fromNow()})` : ''
+
+  return (
+    <Text {...props}>
+      {formattedValue}
+      {suffix}
+    </Text>
+  )
 }

package/src/modifiers/border.js

@@ -1,9 +1,17 @@
 import { clearProps, flattenStyle } from './_helpers'
-import { useGetColor, useGetRadius } from '../theme/ThemeHandler'
+import { useGetColor, useGetRadius, useTheme } from '../theme/ThemeHandler'
+
+function resolveBorderWidth(value, theme) {
+  const base = theme.baseBorderWidth ?? 1
+  if (value === 'overlayDivider') return theme.useOverlayDivider ? base : 0
+  if (value === true) return base
+  return value
+}
 
 export function useBorderModifier([values, props]) {
   const getRadius = useGetRadius()
   const getColor = useGetColor()
+  const theme = useTheme()
   let {
     br,
     brT,
@@ -34,13 +42,11 @@ export function useBorderModifier([values, props]) {
   const borderBottomRightRadius = getRadius(brB ?? borderRadiusB ?? brR ?? borderRadiusR ?? borderRadius ?? br)
   const borderBottomLeftRadius = getRadius(brB ?? borderRadiusB ?? brL ?? borderRadiusL ?? borderRadius ?? br)
 
-  borderStyle = borderStyle
-
-  if (border === true) border = 1
-  if (borderT === true) borderT = 1
-  if (borderR === true) borderR = 1
-  if (borderB === true) borderB = 1
-  if (borderL === true) borderL = 1
+  border = resolveBorderWidth(border, theme)
+  borderT = resolveBorderWidth(borderT, theme)
+  borderR = resolveBorderWidth(borderR, theme)
+  borderB = resolveBorderWidth(borderB, theme)
+  borderL = resolveBorderWidth(borderL, theme)
   const borderTopWidth = borderT || border || 0
   const borderBottomWidth = borderB || border || 0
   const borderLeftWidth = borderL || border || 0
@@ -48,7 +54,7 @@ export function useBorderModifier([values, props]) {
   const hasBorder = borderTopWidth || borderBottomWidth || borderLeftWidth || borderRightWidth
 
   if (!!hasBorder) {
-    borderStyle = 'solid'
+    if (!borderStyle) borderStyle = 'solid'
     if (!borderColor && !brColor) brColor = 'divider'
   }
 

package/src/modifiers/fullColor.js

@@ -5,13 +5,13 @@ import { useGetColor } from '../theme/ThemeHandler'
 
 export function useFullColorModifier([
   { color, ...values },
-  { outline, contrastTolerance, fill, bg: forcedBG, ...props },
+  { outline, contrastTolerance, fill, bg: forcedBG, borderColor: explicitBorderColor, ...props },
 ]) {
   const getColor = useGetColor()
 
   let bg = color
   const bgObj = tinycolor(getColor(bg))
-  let borderColor = color
+  let borderColor = explicitBorderColor ?? color
   let fontColor = 'text'
 
   if (!!outline && fill !== true) {

package/src/modifiers/size.js

@@ -1,8 +1,9 @@
 import { Platform } from '../abstractions/Platform'
 import { clearProps, flattenStyle } from './_helpers'
-import { useGetElementHeight } from '../theme/ThemeHandler'
+import { useGetElementHeight, useTheme } from '../theme/ThemeHandler'
 
 export function useSizeModifier([values, props]) {
+  const theme = useTheme()
   const getHeight = useGetElementHeight()
   let {
     width,
@@ -26,11 +27,13 @@ export function useSizeModifier([values, props]) {
     ...restProps
   } = props || {}
 
-  minHeight = getHeight(minHeight || minH)
-  minWidth = getHeight(minWidth || minW)
+  minHeight = getHeight(minHeight ?? minH)
+  minWidth = getHeight(minWidth ?? minW)
 
-  maxHeight = getHeight(maxHeight || maxH)
-  maxWidth = getHeight(maxWidth || maxW)
+  maxHeight = getHeight(maxHeight ?? maxH)
+
+  maxWidth = maxWidth ?? maxW
+  maxWidth = maxWidth === 'base' ? theme.baseMaxWidth : getHeight(maxWidth || maxW)
 
   height = getHeight(height)
   width = getHeight(width)

package/src/theme/default/base.js

@@ -1,4 +1,6 @@
 export const BASE_THEME = {
+  baseMaxWidth: 1800,
+
   spaces: {
     xxxs: 1,
     xxs: 3,

package/src/theme/default/hackerTheme.js

@@ -4,6 +4,7 @@ import { BASE_THEME } from './base'
 
 export const DEFAULT_MATRIX_THEME = mergeDeepRight(BASE_THEME, {
   label: 'Hacker',
+  useOverlayDivider: true,
 
   colors: {
     primary: '#00FF41',
@@ -51,14 +52,4 @@ export const DEFAULT_MATRIX_THEME = mergeDeepRight(BASE_THEME, {
     xxl: 7,
     xxxl: 8,
   },
-
-  components: {
-    Card: {
-      border: true,
-    },
-
-    Section: {
-      border: true,
-    },
-  },
 })

package/src/theme/default/paperTheme.js

@@ -4,6 +4,7 @@ import { BASE_THEME } from './base'
 
 export const DEFAULT_PAPER_THEME = mergeDeepRight(BASE_THEME, {
   label: 'Paper',
+  useOverlayDivider: true,
 
   colors: {
     primary: '#5A5A5A',
@@ -32,18 +33,4 @@ export const DEFAULT_PAPER_THEME = mergeDeepRight(BASE_THEME, {
     lylac: '#C7B7D4',
     pink: '#E4A1B2',
   },
-
-  components: {
-    Card: {
-      border: true,
-    },
-
-    Section: {
-      border: true,
-    },
-
-    TopBar: {
-      borderB: true,
-    },
-  },
 })

package/src/theme/format/colorsVariations.js

@@ -10,7 +10,7 @@ export function generateColorVariants(colors) {
     result[key] = value
 
     variations.forEach((amount) => {
-      if (amount <= 60) {
+      if (amount <= 40) {
         const lightenSignal = !isDark ? '-' : '+'
         const darkenSignal = isDark ? '-' : '+'
         result[`${key}${lightenSignal}${amount}`] = tinycolor(value).lighten(amount).toString()

package/src/theme/helpers/colorScale.js

@@ -2,7 +2,8 @@ import { omit, keys } from 'ramda'
 
 import { DEFAULT_DARK_THEME } from '../default/darkTheme'
 
-const SCALE = keys(DEFAULT_DARK_THEME.colors)
+const EXCLUDED_KEYS = ['shadow', 'transparent']
+const SCALE = keys(DEFAULT_DARK_THEME.colors).filter((k) => !EXCLUDED_KEYS.includes(k))
 
 export function getColorFromProps({ color, ...props }, defaultValue) {
   if (!!color) return [color, props]