@neko-os/ui 0.0.4 → 0.0.6

package/src/components/presentation/Badge.js

@@ -0,0 +1,90 @@
+import { pipe } from 'ramda'
+
+import { AbsView } from '../../abstractions/View'
+import { IconLabel } from './IconLabel'
+import { View } from '../structure/View'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+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 { useShadowModifier } from '../../modifiers/shadow'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useSizeModifier } from '../../modifiers/size'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DOT_SIZE = 8
+const DEFAULT_PROPS = ([{ sizeCode }, { dot, br }]) => {
+  sizeCode = !!dot ? DOT_SIZE : undefined
+
+  return {
+    paddingH: !dot && 5,
+    height: sizeCode,
+    minWidth: sizeCode,
+    round: br !== undefined ? false : true,
+    center: true,
+    border: 1,
+  }
+}
+
+function Badge(rootProps) {
+  const [{ fontColor, sizeCode }, formattedProps] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('spaces', 'md'),
+    useThemeComponentModifier('Badge'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useFullColorModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useFlexWrapperModifier,
+    useBackgroundModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  let { label, value, dot, icon, invert, textProps, iconProps, limit = 99, ...props } = formattedProps
+  if (!!value && value > limit) label = `${limit}+`
+  label = label || value
+
+  let content = (
+    <IconLabel
+      center
+      color={fontColor}
+      size={moveScale(sizeCode, -2)}
+      label={label}
+      icon={icon}
+      invert={invert}
+      textProps={{ strong: true, ...textProps }}
+      iconProps={iconProps}
+    />
+  )
+
+  if (!!dot) content = false
+
+  return (
+    <AbsView className="neko-badge" {...props}>
+      {content}
+    </AbsView>
+  )
+}
+
+function BadgeWrapper({ children, dot, ...props }) {
+  if (!children) return <Badge dot={dot} {...props} />
+  if (!props.value && !props.label && !props.icon) return children
+
+  return (
+    <View className="neko-badge-wrapper" relative>
+      {children}
+      <Badge {...props} dot={dot} absolute top={dot ? -2 : -8} right={dot ? -5 : -12} />
+    </View>
+  )
+}
+
+export { BadgeWrapper as Badge }

package/src/components/presentation/ContentLabel.js

@@ -0,0 +1,43 @@
+import { pipe } from 'ramda'
+
+import { Loading } from '../state/Loading'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const AUTO_GAP_SCALE = {
+  xxxs: 5,
+  xxs: 5,
+  xs: 5,
+  sm: 5,
+  md: 6,
+  lg: 7,
+  xl: 8,
+  xxl: 9,
+  xxxl: 10,
+}
+
+export function ContentLabel(rootProps) {
+  const [{ color, sizeCode }, formattedProps] = pipe(
+    useColorConverter(),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('ContentLabel') //
+  )([{}, rootProps])
+
+  let { loading, label, content, textProps, invert, gap, strong, ...props } = formattedProps
+  if (!!loading) content = <Loading size={sizeCode} color={color} />
+
+  return (
+    <View className="neko-content-label" row gap={gap || AUTO_GAP_SCALE[sizeCode] || 5} centerV {...props}>
+      {!invert && content}
+      {!!label && (
+        <Text color={color} size={sizeCode} strong={strong} {...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} />
+}

package/src/components/presentation/IconLabel.js

@@ -0,0 +1,39 @@
+import { pipe } from 'ramda'
+
+import { ContentLabel } from './ContentLabel'
+import { Icon } from './Icon'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function IconLabel(rootProps) {
+  const [{ sizeCode, color }, formattedProps] = pipe(
+    useColorConverter(),
+    useSizeConverter('icons', 'md'),
+    useThemeComponentModifier('IconLabel') //
+  )([{}, rootProps])
+
+  const { icon, iconProps, iconColor, iconSize, moveIconSizeScale, ...props } = formattedProps
+
+  return (
+    <ContentLabel
+      className="neko-icon-label"
+      color={color}
+      size={sizeCode}
+      content={
+        !!icon && (
+          <Icon
+            name={icon}
+            size={iconSize || moveScale(sizeCode, moveIconSizeScale || -1)}
+            color={iconColor || color}
+            {...iconProps}
+          />
+        )
+      }
+      {...props}
+    />
+  )
+}
+
+export const IconText = IconLabel

package/src/components/presentation/Image.js

@@ -0,0 +1,33 @@
+import { pipe } from 'ramda'
+
+import { AbsImage } from '../../abstractions/Image'
+import { useBorderModifier } from '../../modifiers/border'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useMarginModifier } from '../../modifiers/margin'
+import { usePositionModifier } from '../../modifiers/position'
+import { useShadowModifier } from '../../modifiers/shadow'
+import { useSizeModifier } from '../../modifiers/size'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  width: '100%',
+  br: 'md',
+}
+
+export function Image({ name, ...rootProps }) {
+  const [{ size, color }, props] = pipe(
+    useThemeComponentModifier('Image'),
+    useDefaultModifier(DEFAULT_PROPS),
+    usePositionModifier, //
+    useMarginModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useFlexModifier,
+    useMarginModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return <AbsImage className="neko-image" name={name} color={color} size={size} {...props} />
+}

package/src/components/presentation/LabelValue.js

@@ -0,0 +1,49 @@
+import { pipe, is } from 'ramda'
+
+import { IconLabel } from './IconLabel'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{ sizeCode }, { vertical, spread }]) => {
+  return {
+    row: !vertical,
+    centerV: !vertical,
+    justify: !!spread && 'space-between',
+    gap: !vertical ? moveScale(sizeCode, -1) : 0,
+    labelProps: {
+      size: moveScale(sizeCode, !vertical ? 0 : -2),
+      moveIconSizeScale: !vertical ? -1 : -2,
+      color: 'text3',
+    },
+    valueProps: {
+      size: sizeCode,
+      align: spread && 'right',
+    },
+  }
+}
+
+export function LabelValue({ children, ...rootProps }) {
+  const [{ sizeCode, color }, formattedProps] = pipe(
+    // useColorConverter(),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Labelvalue'), //
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { icon, label, iconColor, labelProps, value, valueProps, vertical, spread, ...props } = formattedProps
+  let separator = !vertical && !spread ? ':' : ''
+
+  let content = children || value
+  if (is(String, value)) content = <Text label={value} {...valueProps} />
+
+  return (
+    <View className="neko-label-value" {...props}>
+      <IconLabel label={label + separator} icon={icon} iconColor={iconColor} {...labelProps} />
+      {content}
+    </View>
+  )
+}

package/src/components/presentation/Result.js

@@ -0,0 +1,60 @@
+import { Divider } from '../helpers/Separator'
+import { Icon } from './Icon'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+
+export const RESULT_TYPES = {
+  error: {
+    icon: 'close-circle-fill',
+    color: 'red',
+  },
+
+  success: {
+    icon: 'checkbox-circle-fill',
+    color: 'green',
+  },
+
+  warning: {
+    icon: 'error-warning-fill',
+    color: 'yellow',
+  },
+
+  info: {
+    icon: 'information-2-fill',
+    color: 'blue',
+  },
+}
+
+export function Result({
+  type,
+  icon,
+  iconColor,
+  title,
+  description,
+  footer,
+  titleProps,
+  descriptionProps,
+  textProps,
+  iconProps,
+  ...props
+}) {
+  const typeProps = RESULT_TYPES[type] || {}
+  icon = icon || typeProps.icon
+  iconColor = iconColor || typeProps.color || 'primary'
+
+  return (
+    <View className="neko-result" center padding="lg" {...props}>
+      <Icon name={icon} color={iconColor} size={42} primary {...iconProps} />
+      <Divider height={10} />
+      <Text h3 {...textProps} {...titleProps}>
+        {title}
+      </Text>
+      {!!description && (
+        <Text text3 sm {...textProps} {...descriptionProps}>
+          {description}
+        </Text>
+      )}
+      {!!footer && <View marginT="lg">{footer}</View>}
+    </View>
+  )
+}

package/src/components/presentation/ResultBar.js

@@ -0,0 +1,56 @@
+import { Card } from '../structure/Card'
+import { Icon } from './Icon'
+import { RESULT_TYPES } from './Result'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+
+export function ResultBar({
+  type,
+  icon,
+  iconColor,
+  title,
+  description,
+  rightContent,
+  titleProps,
+  descriptionProps,
+  textProps,
+  iconProps,
+  ...props
+}) {
+  const typeProps = RESULT_TYPES[type] || {}
+  icon = icon || typeProps.icon
+  iconColor = iconColor || typeProps.color || 'primary'
+  const bg = typeProps.color ? typeProps.color + '_op10' : 'overlayBG'
+  const brColor = typeProps.color && typeProps.color + '_op30'
+
+  return (
+    <Card
+      className="neko-result"
+      row
+      gap="sm"
+      center
+      padding="sm"
+      br="sm"
+      bg={bg}
+      border
+      borderColor={brColor}
+      centerV
+      fullW
+      {...props}
+    >
+      {!!icon && <Icon name={icon} color={iconColor} size="lg" primary {...iconProps} />}
+
+      <View flex>
+        <Text sm strong {...textProps} {...titleProps}>
+          {title}
+        </Text>
+        {!!description && (
+          <Text text3 xs {...textProps} {...descriptionProps}>
+            {description}
+          </Text>
+        )}
+      </View>
+      {rightContent}
+    </Card>
+  )
+}

package/src/components/presentation/Tag.js

@@ -0,0 +1,69 @@
+import { pipe } from 'ramda'
+
+import { AbsView } from '../../abstractions/View'
+import { IconLabel } from './IconLabel'
+import { View } from '../structure/View'
+import { moveScale } from '../../theme/helpers/sizeScale'
+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 }]) => {
+  return {
+    paddingH: moveScale(sizeCode, -2),
+    padding: moveScale(sizeCode, -4),
+    outline: true,
+    br: 'xxxs',
+    border: 1,
+    center: true,
+  }
+}
+
+export function Tag(rootProps) {
+  const [{ fontColor, sizeCode }, formattedProps] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Tag'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useFullColorModifier,
+    useSizeModifier,
+    usePositionModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useFlexWrapperModifier,
+    useBackgroundModifier,
+    useBorderModifier
+  )([{}, rootProps])
+
+  const { loading, disabled, label, icon, textProps, iconProps, gap, invert, ...props } = formattedProps
+
+  return (
+    <View className="neko-tag" row disabled={disabled}>
+      <AbsView className="neko-tag-inner" {...props}>
+        <IconLabel
+          center
+          color={fontColor}
+          size={moveScale(sizeCode, -2)}
+          label={label}
+          icon={icon}
+          gap={gap}
+          invert={invert}
+          textProps={{ strong: true, ...textProps }}
+          iconProps={iconProps}
+          loading={loading}
+        />
+      </AbsView>
+    </View>
+  )
+}

package/src/components/presentation/Tooltip.js

@@ -0,0 +1,43 @@
+import { pipe } from 'ramda'
+
+import { IconLabel } from './IconLabel'
+import { Popover } from '../structure/popover/Popover'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useFullColorModifier } from '../../modifiers/fullColor'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Tooltip(rootProps) {
+  const [{ loading, fontColor, sizeCode }, formattedProps] = pipe(
+    useColorConverter('overlayBG'),
+    useSizeConverter('text', 'md'),
+    useThemeComponentModifier('Tooltip'),
+    useFullColorModifier
+  )([{}, rootProps])
+
+  const { label, icon, textProps, iconProps, gap, invert, children, ...props } = formattedProps
+  if (!label && !icon) return children
+
+  return (
+    <Popover
+      className="neko-tooltip"
+      {...props}
+      content={
+        <IconLabel
+          center
+          color={fontColor}
+          size={sizeCode}
+          label={label}
+          icon={icon}
+          gap={gap}
+          invert={invert}
+          textProps={textProps}
+          iconProps={iconProps}
+          loading={loading}
+        />
+      }
+    >
+      {children}
+    </Popover>
+  )
+}

package/src/components/presentation/index.js

@@ -0,0 +1,11 @@
+export * from './Tag'
+export * from './Icon'
+export * from './IconLabel'
+export * from './Result'
+export * from './ResultBar'
+export * from './Tooltip'
+export * from './Badge'
+export * from './Avatar'
+export * from './AvatarLabel'
+export * from './Image'
+export * from './LabelValue'

package/src/components/state/Loading.js

@@ -0,0 +1,20 @@
+import { pipe } from 'ramda'
+
+import { AbsActivityIndicator } from '../../abstractions/ActivityIndicator'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useMarginModifier } from '../../modifiers/margin'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Loading({ ...rootProps }) {
+  const [{ color, size }, props] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('icons', 'md'),
+    useThemeComponentModifier('Loading'),
+    usePaddingModifier,
+    useMarginModifier
+  )([{}, rootProps])
+
+  return <AbsActivityIndicator className="neko-loader" size={size} color={color} {...props} />
+}

package/src/components/state/LoadingView.js

@@ -0,0 +1,28 @@
+import { Loading } from './Loading'
+import { View } from '../structure/View'
+
+export function LoadingView({ active, children, size, color, replaceChildren, noWrapper, ...props }) {
+  if (!active && !!noWrapper) return children
+  if (!active) return <View {...props}>{children}</View>
+
+  const loader = <Loading size={size} color={color} />
+  if (!!replaceChildren && !!noWrapper) return loader
+  if (!!replaceChildren) {
+    return (
+      <View {...props} center>
+        {loader}
+      </View>
+    )
+  }
+
+  return (
+    <View className="neko-loading-view" relative {...props}>
+      {children}
+      <View className="neko-laoding-view-overlay" bg="bg_op90" absolute top={0} left={0} right={0} bottom={0} center>
+        {loader}
+      </View>
+    </View>
+  )
+}
+
+export const LoadingWrapper = LoadingView

package/src/components/state/index.js

@@ -0,0 +1,2 @@
+export * from './Loading'
+export * from './LoadingView'

package/src/components/structure/Accordion.js

@@ -0,0 +1,69 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AbsView } from '../../abstractions/View'
+import { Card } from './Card'
+import { Icon } from '../presentation/Icon'
+import { Link } from '../actions/Link'
+import { Text } from '../text/Text'
+import { View } from './View'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  padding: 0,
+  br: 'xl',
+  bg: 'overlayBG',
+  hiddenOverflow: true,
+}
+
+export function Accordion({ children, title, open, onChange, ...rootProps }) {
+  const [{ sizeCode }, formattedProps] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Accordion'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { contentProps, titleProps, headerProps, initOpen, ...props } = formattedProps
+
+  const [localOpen, setLocalOpen] = React.useState(initOpen)
+  open = open === undefined ? localOpen : open
+
+  const toggle = () => {
+    setLocalOpen(!open)
+    onChange?.(!open)
+  }
+
+  return (
+    <Card {...props}>
+      <Link
+        padding={sizeCode}
+        row
+        gap={moveScale(sizeCode, -2)}
+        borderB={open ? props.border || true : open}
+        borderColor={props.borderColor}
+        centerV
+        {...headerProps}
+        onPress={toggle}
+      >
+        <Icon name={!!open ? 'arrow-down-s-line' : 'arrow-right-s-line'} />
+        <Text flex {...titleProps}>
+          {title}
+        </Text>
+      </Link>
+      {!!open && (
+        <View padding={sizeCode} {...contentProps}>
+          {children}
+        </View>
+      )}
+    </Card>
+  )
+
+  return (
+    <AbsView className="neko-accordion" {...props}>
+      {children}
+    </AbsView>
+  )
+}

package/src/components/structure/AccordionGroup.js

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import { Accordion } from './Accordion'
+import { Card } from './Card'
+
+export function AccordionsGroup({ items, contentProps, titleProps, headerProps, initOpen, open, onChange, ...props }) {
+  const [localOpen, setLocalOpen] = React.useState(initOpen)
+  open = open === undefined ? localOpen : open
+
+  const handleChange = (key) => {
+    const v = open === key ? null : key
+    setLocalOpen(v)
+    onChange?.(v)
+  }
+
+  if (!items?.length) return false
+
+  const sharedProps = { contentProps, titleProps, headerProps }
+
+  return (
+    <Card padding={0} {...props}>
+      {items.map(({ key, ...item }, index) => (
+        <Accordion
+          key={key || index}
+          {...sharedProps}
+          {...item}
+          br={0}
+          borderB={index < items.length - 1}
+          open={!!open && open === key}
+          onChange={() => handleChange(key)}
+        />
+      ))}
+    </Card>
+  )
+}