@neko-os/ui 0.0.4 → 0.0.6

package/src/abstractions/SafeAreaView.js

@@ -0,0 +1,3 @@
+import { AbsView } from './View'
+
+export const AbsSafeAreaView = AbsView

package/src/abstractions/SafeAreaView.native.js

@@ -0,0 +1,3 @@
+import { SafeAreaView } from 'react-native-safe-area-context'
+
+export const AbsSafeAreaView = SafeAreaView

package/src/abstractions/Switch.js

@@ -0,0 +1,97 @@
+import { useCallback } from 'react'
+
+export function AbsSwitch({
+  value = false,
+  onValueChange = () => {},
+  disabled = false,
+  trackColor = { false: '#767577', true: '#81b0ff' },
+  thumbColor,
+  height = 32,
+  style,
+  ...rest
+}) {
+  const isOn = !!value
+
+  const handleToggle = useCallback(() => {
+    if (disabled) return
+    onValueChange(!isOn)
+  }, [disabled, isOn, onValueChange])
+
+  const onKeyDown = useCallback(
+    (e) => {
+      if (disabled) return
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        onValueChange(!isOn)
+      }
+      if (e.key === 'ArrowLeft' && isOn) onValueChange(false)
+      if (e.key === 'ArrowRight' && !isOn) onValueChange(true)
+    },
+    [disabled, isOn, onValueChange]
+  )
+
+  const trackOff = (trackColor && trackColor.false) || '#76757750'
+  const trackOn = (trackColor && trackColor.true) || '#81b0ff'
+  const currentTrack = isOn ? trackOn : trackOff
+
+  const defaultThumb = '#ffffff'
+  const currentThumb = thumbColor || defaultThumb
+
+  const width = 1.7 * height
+  const padding = 2
+  const thumbSize = height - padding * 2
+  const translateX = isOn ? width - thumbSize - padding * 2 : 0
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isOn}
+      aria-disabled={disabled}
+      onClick={handleToggle}
+      onKeyDown={onKeyDown}
+      disabled={disabled}
+      style={{
+        WebkitTapHighlightColor: 'transparent',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        background: 'transparent',
+        border: 'none',
+        padding: 0,
+        margin: 0,
+        outline: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        ...style,
+      }}
+      {...rest}
+    >
+      <span
+        aria-hidden
+        style={{
+          position: 'relative',
+          width,
+          height,
+          borderRadius: height / 2,
+          backgroundColor: currentTrack,
+          transition: 'background-color 150ms ease',
+          _opacity: disabled ? 0.6 : 1,
+          display: 'inline-block',
+        }}
+      >
+        <span
+          style={{
+            position: 'absolute',
+            top: padding,
+            left: padding + translateX,
+            width: thumbSize,
+            height: thumbSize,
+            borderRadius: thumbSize / 2,
+            backgroundColor: currentThumb,
+            boxShadow: '0 1px 2px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.1)',
+            transition: 'left 150ms ease, background-color 150ms ease',
+          }}
+        />
+      </span>
+    </button>
+  )
+}

package/src/abstractions/Switch.native.js

@@ -0,0 +1,12 @@
+import { Switch as RNSwitch } from 'react-native'
+
+export function AbsSwitch({ height, style, ...props }) {
+  const baseHeight = 31
+  let transform = undefined
+  if (!!height) {
+    const scale = height / baseHeight
+    transform = [{ scaleX: scale }, { scaleY: scale }]
+  }
+
+  return <RNSwitch style={{ transform, ...style }} {...props} />
+}

package/src/abstractions/Table.js

@@ -0,0 +1,29 @@
+export function AbsTable({ children, style, ...props }) {
+  return (
+    <table
+      {...props}
+      style={{
+        ...style,
+        borderCollapse: 'separate',
+        borderSpacing: 0,
+        // orderCollapse: 'collapse',
+        // whiteSpace: 'nowrap',
+        width: '100%',
+      }}
+    >
+      <tbody>{children}</tbody>
+    </table>
+  )
+}
+
+export function AbsTableRow({ ...props }) {
+  return <tr {...props} />
+}
+
+export function AbsTableHeader({ ...props }) {
+  return <th {...props} />
+}
+
+export function AbsTableCol({ ...props }) {
+  return <td {...props} />
+}

package/src/abstractions/Table.native.js

@@ -0,0 +1,19 @@
+import { View } from 'react-native'
+
+export function AbsTable({ children, ...props }) {
+  return <View {...props}>{children}</View>
+}
+
+export function AbsTableRow({ style, ...props }) {
+  return <View {...props} style={[style, { flexDirection: 'row', flex: 1 }]} />
+}
+
+export function AbsTableHeader({ style, ...props }) {
+  if (!style.width && !style.minWidth && !style.flex) style.flex = 1
+  return <View {...props} style={[style]} />
+}
+
+export function AbsTableCol({ style, ...props }) {
+  if (!style.width && !style.minWidth && !style.flex) style.flex = 1
+  return <View {...props} style={style} />
+}

package/src/abstractions/Text.js

@@ -1,3 +1,14 @@
-export function AbsText(props) {
-  return <span {...props} />
+export function AbsText({ numberOfLines, style, ...props }) {
+  style = style || {}
+
+  const limitLinesStyle = !!numberOfLines
+    ? {
+        display: '-webkit-box',
+        WebkitLineClamp: numberOfLines,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+      }
+    : {}
+
+  return <span {...props} style={{ ...limitLinesStyle, ...style }} />
 }

package/src/abstractions/TextInput.js

@@ -0,0 +1,3 @@
+export function AbsTextInput(props) {
+  return <input type="text" {...props} />
+}

package/src/abstractions/TextInput.native.js

@@ -0,0 +1,5 @@
+import { TextInput } from 'react-native'
+
+export function AbsTextInput({ onChange, ...props }) {
+  return <TextInput onChangeText={onChange} {...props} />
+}

package/src/abstractions/TextInput.web.js

@@ -0,0 +1,5 @@
+import { TextInput } from 'react-native'
+
+export function AbsTextInput({ onChange, ...props }) {
+  return <TextInput onChangeText={onChange} {...props} />
+}

package/src/abstractions/TouchableOpacity.js

@@ -1,12 +1,4 @@
-import React from 'react'
-
-let AbsTouchableOpacity
-
-try {
-  const { Platform, TouchableOpacity: RNTouchableOpacity } = require('react-native')
-  AbsTouchableOpacity = (props) => <RNTouchableOpacity {...props} />
-} catch {
-  AbsTouchableOpacity = (props) => <button {...props} />
+export function AbsTouchableOpacity({ link, onPress, onClick, ...props }) {
+  const Component = link ? 'a' : 'button'
+  return <Component onClick={onClick || onPress} {...props} />
 }
-
-export { AbsTouchableOpacity }

package/src/abstractions/TouchableOpacity.native.js

@@ -0,0 +1,3 @@
+import { TouchableOpacity as RNTouchableOpacity } from 'react-native'
+
+export const AbsTouchableOpacity = RNTouchableOpacity

package/src/abstractions/TouchableOpacity.web.js

@@ -0,0 +1,3 @@
+import { TouchableOpacity as RNTouchableOpacity } from 'react-native'
+
+export const AbsTouchableOpacity = RNTouchableOpacity

package/src/abstractions/View.js

@@ -1,3 +1,3 @@
-export function AbsView(props) {
-  return <div {...props} />
+export function AbsView({ onPress, onClick, ...props }) {
+  return <div onClick={onClick || onPress} {...props} />
 }

package/src/abstractions/helpers/componentSize.js

@@ -0,0 +1,13 @@
+export function getElementSize(ref, callback) {
+  if (!ref.current) return
+
+  const el = ref.current
+  const rect = el.getBoundingClientRect()
+
+  callback({
+    width: el.offsetWidth,
+    height: el.offsetHeight,
+    x: rect.x + window.scrollX,
+    y: rect.y + window.scrollY,
+  })
+}

package/src/abstractions/helpers/componentSize.native.js

@@ -0,0 +1,12 @@
+import { UIManager, findNodeHandle } from 'react-native'
+
+export function getElementSize(ref, callback) {
+  if (!ref.current) return
+
+  const handle = findNodeHandle(ref.current)
+  if (handle) {
+    UIManager.measure(handle, (x, y, width, height) => {
+      callback({ width, height, x, y })
+    })
+  }
+}

package/src/abstractions/helpers/transformStyle.js

@@ -0,0 +1,8 @@
+export function formatTransform(transforms) {
+  return transforms
+    .map((t) => {
+      const [key, value] = Object.entries(t)[0]
+      return `${key}(${value})`
+    })
+    .join(' ')
+}

package/src/abstractions/helpers/transformStyle.native.js

@@ -0,0 +1,3 @@
+export function formatTransform(transforms) {
+  return transforms
+}

package/src/abstractions/helpers/windowWidth.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+export function useWindowWidth() {
+  const [width, setWidth] = React.useState(window.innerWidth)
+
+  React.useEffect(() => {
+    const handleResize = () => setWidth(window.innerWidth)
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return width
+}

package/src/abstractions/helpers/windowWidth.native.js

@@ -0,0 +1,6 @@
+import { useWindowDimensions } from 'react-native'
+
+export function useWindowWidth() {
+  const { width } = useWindowDimensions()
+  return width
+}

package/src/abstractions/helpers/windowWidth.web.js

@@ -0,0 +1,6 @@
+import { useWindowDimensions } from 'react-native'
+
+export function useWindowWidth() {
+  const { width } = useWindowDimensions()
+  return width
+}

package/src/components/actions/Breadcrumb.js

@@ -0,0 +1,47 @@
+import { pipe, omit } from 'ramda'
+
+import { IconLabel } from '../presentation/IconLabel'
+import { Link } from './Link'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Breadcrumb({ items, onChange, ...rootProps }) {
+  const [{ sizeCode }, props] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Breadcrumb')
+  )([{}, rootProps])
+
+  const gap = 'sm'
+
+  const handlePress = (item, index) => {
+    onChange?.(item, index)
+    item.onPress?.(index)
+    item.onClick?.(index)
+  }
+
+  return (
+    <View className="neko-breadcrumb" row gap={gap} centerV {...props}>
+      {items.map((item, index) => {
+        const active = index === items.length - 1
+
+        return (
+          <View row gap={gap} centerV key={item.key || index}>
+            <Link onPress={!active ? () => handlePress(item, index) : undefined}>
+              <IconLabel
+                color={active ? 'text' : 'text3'}
+                size={sizeCode}
+                moveIconSizeScale={-2}
+                strong={active}
+                {...omit(['onPress', 'onClick'], item)}
+              />
+            </Link>
+            {!active && <Text text4 label="/" size={moveScale(sizeCode, -1)} />}
+          </View>
+        )
+      })}
+    </View>
+  )
+}

package/src/components/actions/Button.js

@@ -0,0 +1,67 @@
+import { pipe } from 'ramda'
+
+import { AbsTouchableOpacity } from '../../abstractions/TouchableOpacity'
+import { IconLabel } from '../presentation/IconLabel'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useFullColorModifier } from '../../modifiers/fullColor'
+import { useMarginModifier } from '../../modifiers/margin'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { usePositionModifier } from '../../modifiers/position'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{ sizeCode }]) => ({
+  paddingH: sizeCode,
+  paddingV: 2,
+  height: sizeCode,
+  br: sizeCode,
+  border: 1,
+  center: true,
+})
+
+export function Button(rootProps) {
+  const [{ loading, fontColor, sizeCode }, formattedProps] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Button'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useFullColorModifier,
+    useDisplayModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useFlexWrapperModifier,
+    useBackgroundModifier,
+    useBorderModifier
+  )([{}, rootProps])
+
+  const { label, icon, textProps, iconProps, gap, invert, size, ...props } = formattedProps
+
+  return (
+    <AbsTouchableOpacity className="neko-button neko-wave-click-effect" type="button" {...props}>
+      <IconLabel
+        center
+        color={fontColor}
+        size={sizeCode}
+        label={label}
+        icon={icon}
+        gap={gap}
+        invert={invert}
+        textProps={{ strong: true, ...textProps }}
+        iconProps={iconProps}
+        loading={loading}
+      />
+    </AbsTouchableOpacity>
+  )
+}

package/src/components/actions/Dropdown.js

@@ -0,0 +1,68 @@
+import { pipe } from 'ramda'
+
+import { IconLabel } from '../presentation/IconLabel'
+import { Link } from './Link'
+import { Menu } from './menu/Menu'
+import { Popover } from '../structure/popover/Popover'
+import { View } from '../structure/View'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Dropdown({ items, ...rootProps }) {
+  const [_, formattedProps] = pipe(
+    useThemeComponentModifier('Dropdown')
+    // useColorConverter('primary'),
+    // useSizeModifier, //
+    // useFlexWrapperModifier,
+    // useDisplayModifier,
+    // useStateModifier,
+    // usePositionModifier,
+    // usePaddingModifier,
+    // useMarginModifier,
+    // useFlexModifier
+  )([{}, rootProps])
+
+  const {
+    onChange,
+    label,
+    trigger = 'click',
+    icon,
+    strong,
+    color,
+    popoverProps,
+    iconLabelProps,
+    children,
+    ...props
+  } = formattedProps
+
+  return (
+    <View className="neko-dropdown" {...props}>
+      <Popover
+        useParentMinWidth
+        placement="bottomLeft"
+        trigger={trigger}
+        padding="xs"
+        {...popoverProps}
+        renderContent={({ onClose }) => {
+          const handleChange = (...params) => {
+            if (onChange) onChange(...params)
+            onClose()
+          }
+          return <Menu vertical items={items} gap={0} onChange={handleChange} linkPaddingH="xs" />
+        }}
+      >
+        {children || (
+          <Link>
+            <IconLabel
+              label={label || '---'}
+              icon={icon || 'arrow-down-s-fill'}
+              strong={strong}
+              color={color}
+              invert
+              {...iconLabelProps}
+            />
+          </Link>
+        )}
+      </Popover>
+    </View>
+  )
+}

package/src/components/actions/Link.js

@@ -0,0 +1,52 @@
+import { pipe, is } from 'ramda'
+
+import { AbsTouchableOpacity } from '../../abstractions/TouchableOpacity'
+import { LoadingView } from '../state/LoadingView'
+import { Text } from '../text/Text'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useMarginModifier } from '../../modifiers/margin'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { usePositionModifier } from '../../modifiers/position'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Link({ label, children, href, target, ...rootProps }) {
+  const [{ loading, color: color }, props] = pipe(
+    useThemeComponentModifier('Link'),
+    useBackgroundModifier,
+    useColorConverter('primary'),
+    useAnimationModifier,
+    useSizeModifier, //
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useStateModifier,
+    useBorderModifier,
+    usePositionModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier
+  )([{}, rootProps])
+
+  if (!!label || is(String, children)) {
+    children = (
+      <Text color={color} {...props}>
+        {label || children}
+      </Text>
+    )
+  }
+
+  return (
+    <LoadingView active={loading} noWrapper replaceChildren>
+      <AbsTouchableOpacity className="neko-link" link target={target} href={!props.disabled && href} {...props}>
+        {children}
+      </AbsTouchableOpacity>
+    </LoadingView>
+  )
+}

package/src/components/actions/index.js

@@ -0,0 +1,5 @@
+export * from './Button'
+export * from './Link'
+export * from './Dropdown'
+export * from './Breadcrumb'
+export * from './menu/Menu'

package/src/components/actions/menu/HorizontalMenu.js

@@ -0,0 +1,96 @@
+import { omit, pipe } from 'ramda'
+import React from 'react'
+
+import { IconText } from '../../presentation/IconLabel'
+import { Link } from '../Link'
+import { SubmenuWrapper } from './SubmenuWrapper'
+import { View } from '../../structure/View'
+import { useColorConverter } from '../../../modifiers/colorConverter'
+import { useSizeConverter } from '../../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+function Item({
+  item,
+  linkPaddingH = 'md',
+  handlePress,
+  linkProps,
+  activeIndex,
+  activeKey,
+  activeColor = 'primary',
+  color,
+  sizeCode,
+  index,
+  ...props
+}) {
+  activeColor = activeColor || 'primary'
+  let { active, key, ...childProps } = omit(['onClick', 'onPress'], item)
+  if (!active && activeIndex >= 0) active = activeIndex === index
+  if (!active && activeKey !== undefined) active = activeKey === item.key
+
+  return (
+    <SubmenuWrapper
+      item={item}
+      onChange={handlePress}
+      activeKey={activeKey}
+      color={color}
+      placement="bottomRight"
+      hideIcon
+    >
+      <Link
+        key={key || index}
+        fullH
+        center
+        paddingH={linkPaddingH}
+        {...linkProps}
+        onPress={() => handlePress(item, index)}
+      >
+        <IconText
+          color={active ? activeColor : color}
+          fullH
+          marginT={3}
+          borderB={3}
+          borderColor={active ? activeColor : 'transparent'}
+          transition="border-color 0.6s ease"
+          size={sizeCode}
+          {...childProps}
+        />
+      </Link>
+    </SubmenuWrapper>
+  )
+}
+
+export function HorizontalMenu(rootProps) {
+  const [{ sizeCode, color }, formattedProps] = pipe(
+    useColorConverter(),
+    useSizeConverter('icons', 'md'),
+    useThemeComponentModifier('HorizontalMenu') //
+  )([{}, rootProps])
+
+  let { gap = 'sm', height = 50, items, onChange, onChangeIndex, ...props } = formattedProps
+
+  const handlePress = React.useCallback(
+    (item, index) => {
+      if (!!onChange) onChange(item, index)
+      if (!!onChangeIndex) onChangeIndex(index)
+      if (!!item.onPress) item.onPress()
+      if (!!item.onClick) item.onClick()
+    },
+    [onChange, onChangeIndex]
+  )
+
+  return (
+    <View className="neko-horizontal-menu" row gap={gap} height={height} centerV {...props}>
+      {items.map((item, index) => (
+        <Item
+          key={item.key || index}
+          item={item}
+          handlePress={handlePress}
+          color={color}
+          sizeCode={sizeCode}
+          index={index}
+          {...props}
+        />
+      ))}
+    </View>
+  )
+}

package/src/components/actions/menu/Menu.js

@@ -0,0 +1,7 @@
+import { HorizontalMenu } from './HorizontalMenu'
+import { VerticalMenu } from './VerticalMenu'
+
+export function Menu({ vertical, ...props }) {
+  if (!!vertical) return <VerticalMenu {...props} />
+  return <HorizontalMenu {...props} />
+}