@neko-os/ui 0.0.4 → 0.0.5

package/src/abstractions/HiddenInput.native.js

@@ -0,0 +1,3 @@
+export function AbsHiddenInput() {
+  return false
+}

package/src/abstractions/Icon.js

@@ -20,7 +20,29 @@ export function AbsIcon({ name, ...props }) {
     }
   }, [])
 
-  if (loading) return false
+  if (loading) {
+    return (
+      <div
+        style={{
+          height: props.size,
+          width: props.size,
+          borderRadius: props.size,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <div
+          style={{
+            height: props.size / 3,
+            width: props.size / 3,
+            borderRadius: props.size,
+            backgroundColor: props.color,
+          }}
+        />
+      </div>
+    )
+  }
 
   return <Component {...props} />
 }

package/src/abstractions/Icon.native.js

@@ -1,2 +1,11 @@
-import RmIcon from 'react-native-remix-icon'
-export const AbsIcon = RmIcon
+let AbsIcon
+
+try {
+  const RmIcon = require('react-native-remix-icon')?.default
+  console.log(RmIcon)
+  AbsIcon = (props) => <RmIcon {...props} />
+} catch {
+  AbsIcon = () => false
+}
+
+export { AbsIcon }

package/src/abstractions/Icon.web.js

@@ -1,2 +1,11 @@
-import RmIcon from 'react-native-remix-icon'
-export const AbsIcon = RmIcon
+let AbsIcon
+
+try {
+  const RmIcon = require('react-native-remix-icon')?.default
+  console.log(RmIcon)
+  AbsIcon = (props) => <RmIcon {...props} />
+} catch {
+  AbsIcon = () => false
+}
+
+export { AbsIcon }

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/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/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/windowWidth.native.js

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

package/src/abstractions/windowWidth.web.js

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

package/src/components/actions/Button.js

@@ -0,0 +1,62 @@
+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 { 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 { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{ sizeCode }]) => ({
+  paddingH: sizeCode,
+  paddingV: 2,
+  height: sizeCode,
+  br: sizeCode,
+  borderWidth: 1,
+  center: true,
+})
+
+export function Button(rootProps) {
+  const [{ fontColor, sizeCode }, formattedProps] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Button'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useFullColorModifier,
+    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" {...props}>
+      <IconLabel
+        center
+        color={fontColor}
+        size={sizeCode}
+        label={label}
+        icon={icon}
+        gap={gap}
+        invert={invert}
+        textProps={{ strong: true, ...textProps }}
+        iconProps={iconProps}
+      />
+    </AbsTouchableOpacity>
+  )
+}

package/src/components/actions/Link.js

@@ -0,0 +1,39 @@
+import { pipe, is } from 'ramda'
+
+import { AbsTouchableOpacity } from '../../abstractions/TouchableOpacity'
+import { Text } from '../text/Text'
+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 { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Link({ label, children, onPress, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('Link'),
+    useSizeModifier, //
+    useDisplayModifier, //
+    usePositionModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexWrapperModifier,
+    useFlexModifier
+  )([{}, rootProps])
+
+  if (!!label || is(String, children)) {
+    children = (
+      <Text primary {...props}>
+        {label || children}
+      </Text>
+    )
+  }
+
+  return (
+    <AbsTouchableOpacity className="neko-link" link onPress={!!props.disabled ? undefined : onPress} {...props}>
+      {children}
+    </AbsTouchableOpacity>
+  )
+}

package/src/{actions → components/actions}/index.js

@@ -1 +1,2 @@
 export * from './Button'
+export * from './Link'

package/src/{form → components/form}/FormItem.js

@@ -1,7 +1,7 @@
-import { Text } from 'react-native'
 import React from 'react'
 
 import { FormGroup, useRelativePath } from './FormGroup'
+import { Text } from '../text/Text'
 import { useFormInstance } from './Form'
 
 export function FormItem({ name, relative, children }) {
@@ -28,7 +28,7 @@ export function FormItem({ name, relative, children }) {
   return (
     <FormGroup name={listPath}>
       {childWithProps}
-      {error && <Text style={{ color: 'red' }}>{error}</Text>}
+      {error && <Text color="red">{error}</Text>}
     </FormGroup>
   )
 }

package/src/{form → components/form}/FormList.js

@@ -1,7 +1,7 @@
-import { Text } from 'react-native'
 import React from 'react'
 
 import { FormGroup, useRelativePath } from './FormGroup'
+import { Text } from '../text/Text'
 import { useFormInstance } from './Form'
 
 const FormListContext = React.createContext(null)
@@ -81,7 +81,7 @@ export function FormList({ name, relative, children }) {
         {typeof children === 'function'
           ? children(fields, actions)
           : React.cloneElement(React.Children.only(children), { fields, ...actions })}
-        {error && <Text style={{ color: 'red' }}>{error}</Text>}
+        {error && <Text color="red">{error}</Text>}
       </FormListContext.Provider>
     </FormGroup>
   )

package/src/{form → components/form}/index.js

@@ -4,3 +4,4 @@ export * from './FormList'
 export * from './FormWrapperComponent'
 export * from './FormGroup'
 export * from './useForm'
+export * from './inputs'

package/src/components/form/inputs/Checkbox.js

@@ -0,0 +1,42 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AbsHiddenInput } from '../../../abstractions/HiddenInput'
+import { ContentLabel } from '../../presentation/ContentLabel'
+import { Link } from '../../actions/Link'
+import { View } from '../../structure/View'
+import { useColorConverter } from '../../../modifiers/colorConverter'
+import { useSizeConverter } from '../../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+export function Checkbox({ value, onChange, disabled, ...rootProps }) {
+  const [{ size, sizeCode, color }, props] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Checkbox') //
+  )([{}, rootProps])
+
+  const [checked, setChecked] = React.useState(value)
+
+  const toggle = () => {
+    if (!!disabled) return
+    setChecked(!checked)
+    if (onChange) onChange(!checked)
+  }
+
+  return (
+    <Link onPress={toggle} className="neko-checkbox" disabled={disabled}>
+      <AbsHiddenInput checked={checked} onChange={toggle} type="checkbox" disabled={disabled} />
+      <ContentLabel
+        size={sizeCode}
+        gap={8}
+        content={
+          <View height={size * 0.75} ratio={1} borderWidth={2} padding={3} borderColor={color} br={3} center>
+            {checked && <View bg={color} br={2} flex fullW fullH />}
+          </View>
+        }
+        {...props}
+      />
+    </Link>
+  )
+}

package/src/components/form/inputs/Radio.js

@@ -0,0 +1,42 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AbsHiddenInput } from '../../../abstractions/HiddenInput'
+import { ContentLabel } from '../../presentation/ContentLabel'
+import { Link } from '../../actions/Link'
+import { View } from '../../structure/View'
+import { useColorConverter } from '../../../modifiers/colorConverter'
+import { useSizeConverter } from '../../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+export function Radio({ value, onChange, disabled, ...rootProps }) {
+  const [{ size, sizeCode, color }, props] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Radio') //
+  )([{}, rootProps])
+
+  const [checked, setChecked] = React.useState(value)
+
+  const toggle = () => {
+    if (!!disabled) return
+    setChecked(!checked)
+    if (onChange) onChange(!checked)
+  }
+
+  return (
+    <Link onPress={toggle} className="neko-radio" disabled={disabled}>
+      <AbsHiddenInput checked={checked} onChange={toggle} type="radio" disabled={disabled} />
+      <ContentLabel
+        size={sizeCode}
+        gap={8}
+        content={
+          <View height={size * 0.75} ratio={1} borderWidth={2} padding={3} borderColor={color} br={size} center>
+            {checked && <View bg={color} br={size} flex fullW fullH />}
+          </View>
+        }
+        {...props}
+      />
+    </Link>
+  )
+}

package/src/components/form/inputs/Switch.js

@@ -0,0 +1,44 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AbsSwitch } from '../../../abstractions/Switch'
+import { ContentLabel } from '../../presentation/ContentLabel'
+import { useColorConverter } from '../../../modifiers/colorConverter'
+import { useSizeConverter } from '../../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+export function Switch({ value, onChange, disabled, ...rootProps }) {
+  const [{ size, sizeCode, color }, props] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Switch') //
+  )([{}, rootProps])
+
+  const [checked, setChecked] = React.useState(value)
+
+  const toggle = () => {
+    if (!!disabled) return
+    setChecked(!checked)
+    if (onChange) onChange(!checked)
+  }
+
+  return (
+    <ContentLabel
+      className="neko-checkbox"
+      size={sizeCode}
+      gap={8}
+      disabled={disabled}
+      content={
+        <AbsSwitch
+          color={color}
+          value={checked}
+          onValueChange={toggle}
+          trackColor={{ true: color }}
+          disabled={disabled}
+          height={size * 0.75}
+        />
+      }
+      {...props}
+    />
+  )
+}

package/src/components/form/inputs/index.js

@@ -0,0 +1,3 @@
+export * from './Checkbox'
+export * from './Radio'
+export * from './Switch'

package/src/components/helpers/Responsive.js

@@ -0,0 +1,18 @@
+import { useResponsiveValue } from '../../helpers/responsive'
+
+export function ResponsiveRender(props) {
+  const value = useResponsiveValue(props) || props.df
+  return typeof value === 'function' ? value() : value
+}
+
+export function HideOn({ children, ...props }) {
+  const hide = useResponsiveValue(props)
+  if (!!hide) return false
+  return children
+}
+
+export function ShowOn({ children, ...props }) {
+  const show = useResponsiveValue(props)
+  if (!show) return false
+  return children
+}

package/src/components/helpers/Separator.js

@@ -0,0 +1,49 @@
+import { pipe } from 'ramda'
+
+import { AbsView } from '../../abstractions/View'
+import { View } from '../structure/View'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useMarginModifier } from '../../modifiers/margin'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useSizeModifier } from '../../modifiers/size'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{ size, sizeCode }, { withLine }]) => ({
+  height: withLine ? 2 * size : size,
+  br: sizeCode,
+  center: true,
+})
+
+export function Separator(rootProps) {
+  const [{ color }, formattedProps] = pipe(
+    useColorConverter('divider'),
+    useSizeConverter('spaces', 'md'),
+    useThemeComponentModifier('Separator'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useSizeModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useFlexWrapperModifier
+  )([{}, rootProps])
+
+  const { withLine, lineProps, lineWidth, lineHeight = 1, ...props } = formattedProps
+
+  return (
+    <AbsView className="neko-separator" {...props}>
+      {!!withLine && (
+        <View
+          bg={color}
+          br={lineHeight}
+          height={lineHeight}
+          fullW
+          maxWidth={lineWidth}
+          className="neko-separator-line"
+          {...lineProps}
+        />
+      )}
+    </AbsView>
+  )
+}

package/src/components/helpers/index.js

@@ -0,0 +1,2 @@
+export * from './Separator'
+export * from './Responsive'

package/src/components/index.js

@@ -0,0 +1,6 @@
+export * from './actions'
+export * from './form'
+export * from './presentation'
+export * from './structure'
+export * from './text'
+export * from './helpers'

package/src/components/presentation/ContentLabel.js

@@ -0,0 +1,25 @@
+import { pipe } from 'ramda'
+
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function ContentLabel(rootProps) {
+  const [{ color }, formattedProps] = pipe(
+    useColorConverter(),
+    useThemeComponentModifier('ContentLabel') //
+  )([{}, rootProps])
+
+  const { label, content, textProps, size = 'md', invert, gap = 5, ...props } = formattedProps
+
+  return (
+    <View className="neko-content-label" row gap={gap} centerV {...props}>
+      {!invert && content}
+      <Text color={color} size={size} {...textProps}>
+        {label}
+      </Text>
+      {!!invert && content}
+    </View>
+  )
+}

package/src/components/presentation/Icon.js

@@ -0,0 +1,20 @@
+import { pipe } from 'ramda'
+
+import { AbsIcon } from '../../abstractions/Icon'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useMarginModifier } from '../../modifiers/margin'
+import { usePositionModifier } from '../../modifiers/position'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Icon({ name, ...rootProps }) {
+  const [{ size, color }, props] = pipe(
+    useSizeConverter('icons', 'md'),
+    useColorConverter('text'),
+    useThemeComponentModifier('Icon'),
+    usePositionModifier, //
+    useMarginModifier
+  )([{}, rootProps])
+
+  return <AbsIcon className="neko-icon" name={name} color={color} size={size} {...props} />
+}