@neko-os/ui 0.0.5 → 0.0.7

package/src/components/layout/LayoutHeader.js

@@ -0,0 +1,69 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AbsView } from '../../abstractions/View'
+import { getElementSize } from '../../abstractions/helpers/componentSize'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useLayout } from './Layout'
+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 { useSizeModifier } from '../../modifiers/size'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{}, { sticky }]) => ({
+  bg: 'overlayBG',
+  fullW: true,
+  row: true,
+  centerV: true,
+  padding: 'md',
+  top: 0,
+  left: 0,
+  right: 0,
+  zIndex: sticky ? 90 : undefined,
+})
+
+export function LayoutHeader({ children, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('LayoutHeader'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useSizeModifier, //
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexWrapperModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  const { registerHeader, unregisterHeader } = useLayout()
+  const headerRef = React.useRef(null)
+  const headerHeightRef = React.useRef(null)
+
+  React.useLayoutEffect(() => {
+    if (headerRef.current && !!rootProps.sticky) {
+      getElementSize(headerRef, ({ height }) => {
+        headerHeightRef.current = height
+        registerHeader?.(height)
+      })
+      return () => unregisterHeader?.(headerHeightRef.current)
+    }
+  }, [])
+
+  return (
+    <>
+      <AbsView className="neko-layout-header" {...props} ref={headerRef}>
+        {children}
+      </AbsView>
+    </>
+  )
+}

package/src/components/layout/LayoutSider.js

@@ -0,0 +1,64 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AbsView } from '../../abstractions/View'
+import { getElementSize } from '../../abstractions/helpers/componentSize'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useLayout } from './Layout'
+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 { useSizeModifier } from '../../modifiers/size'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS =
+  (layoutSize, headerSpace) =>
+  ([{}, { sticky }]) => ({
+    top: headerSpace || 0,
+    bottom: 0,
+    maxHeight: !!sticky ? '100vh' : undefined,
+    paddingB: !!sticky ? headerSpace : undefined,
+  })
+
+export function LayoutSider({ children, ...rootProps }) {
+  const { layoutSize, layoutHeaderSpace, registerSider, unregisterHeader } = useLayout()
+
+  const [_, props] = pipe(
+    useThemeComponentModifier('LayoutSider'),
+    useDefaultModifier(DEFAULT_PROPS(layoutSize, layoutHeaderSpace)),
+    useSizeModifier, //
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexWrapperModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  const siderRef = React.useRef(null)
+  const [siderWidth, setSiderWidth] = React.useState(rootProps.width || 0)
+
+  React.useLayoutEffect(() => {
+    getElementSize(siderRef, ({ width }) => setSiderWidth(width))
+  }, [])
+
+  return (
+    <>
+      {rootProps.fixed && (
+        <AbsView className="neko-layout-sider-empty-space" style={{ width: siderWidth, height: '100%' }} />
+      )}
+      <AbsView className="neko-layout-sider" {...props} ref={siderRef}>
+        {children}
+      </AbsView>
+    </>
+  )
+}

package/src/components/layout/index.js

@@ -0,0 +1,4 @@
+export * from './Layout'
+export * from './LayoutHeader'
+export * from './LayoutSider'
+export * from './LayoutContent'

package/src/components/presentation/Avatar.js

@@ -0,0 +1,79 @@
+import { pipe } from 'ramda'
+
+import { AbsView } from '../../abstractions/View'
+import { IconLabel } from './IconLabel'
+import { Image } from './Image'
+import { getDynamicColor } from '../../theme/helpers/dynamicColor'
+import { getInitials } from '../../helpers'
+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 { 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 { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{ sizeCode }, { round, square, src, dynamicColor, color }]) => {
+  return {
+    padding: !!src ? undefined : 1,
+    height: sizeCode,
+    width: sizeCode,
+    ratio: 1,
+    br: !!square ? moveScale(sizeCode, -2) || sizeCode : undefined,
+    round: !square,
+    center: true,
+    border: !!src ? undefined : 1,
+    overflow: 'hidden',
+    color: dynamicColor !== undefined ? getDynamicColor(dynamicColor) : color,
+  }
+}
+
+export function Avatar(rootProps) {
+  const [{ fontColor, sizeCode }, formattedProps] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('Avatar'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useColorConverter('text3'),
+    useFullColorModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useFlexWrapperModifier,
+    useBackgroundModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useBorderModifier,
+    useShadowModifier,
+    useOverflowModifier
+  )([{}, rootProps])
+
+  let { initials, name, icon, src, invert, textProps, iconProps, ...props } = formattedProps
+  initials = initials || getInitials(name)
+
+  let content = (
+    <IconLabel
+      center
+      color={fontColor}
+      size={sizeCode}
+      label={!icon && initials}
+      icon={icon}
+      invert={invert}
+      textProps={{ strong: true, ...textProps }}
+      iconProps={iconProps}
+    />
+  )
+  if (!!src) content = <Image br={0} src={src} width={sizeCode} height={sizeCode} />
+
+  return (
+    <AbsView className="neko-avatar" {...props}>
+      {content}
+    </AbsView>
+  )
+}

package/src/components/presentation/AvatarLabel.js

@@ -0,0 +1,58 @@
+import { pipe } from 'ramda'
+
+import { Avatar } from './Avatar'
+import { ContentLabel } from './ContentLabel'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function AvatarLabel(rootProps) {
+  const [{ sizeCode, color }, formattedProps] = pipe(
+    useColorConverter(),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('AvatarLabel') //
+  )([{}, rootProps])
+
+  const {
+    icon,
+    label,
+    name,
+    initials,
+    src,
+    avatarColor,
+    square,
+    dynamicColor,
+    avatarProps,
+    moveAvatarSizeScale,
+    avatarSize,
+    ...props
+  } = formattedProps
+  const hasAvatar = !!name || !!initials || !!src
+
+  return (
+    <ContentLabel
+      className="neko-avatar-label"
+      label={label || name}
+      color={color}
+      size={sizeCode}
+      content={
+        <Avatar
+          name={name || label}
+          initials={initials}
+          icon={icon}
+          src={src}
+          size={avatarSize || moveScale(sizeCode, moveAvatarSizeScale || -1)}
+          color={avatarColor || color}
+          dynamicColor={dynamicColor}
+          square={square}
+          marginH={2}
+          {...avatarProps}
+        />
+      }
+      {...props}
+    />
+  )
+}
+
+export const AvatarText = AvatarLabel

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

@@ -1,24 +1,42 @@
 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 }, formattedProps] = pipe(
+  const [{ color, sizeCode }, formattedProps] = pipe(
     useColorConverter(),
+    useSizeConverter('elementHeights', 'md'),
     useThemeComponentModifier('ContentLabel') //
   )([{}, rootProps])
 
-  const { label, content, textProps, size = 'md', invert, gap = 5, ...props } = formattedProps
+  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} centerV {...props}>
+    <View className="neko-content-label" row gap={gap || AUTO_GAP_SCALE[sizeCode] || 5} centerV {...props}>
       {!invert && content}
-      <Text color={color} size={size} {...textProps}>
-        {label}
-      </Text>
+      {!!label && (
+        <Text color={color} size={sizeCode} strong={strong} {...textProps}>
+          {label}
+        </Text>
+      )}
       {!!invert && content}
     </View>
   )

package/src/components/presentation/IconLabel.js

@@ -2,6 +2,7 @@ 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'
@@ -13,14 +14,23 @@ export function IconLabel(rootProps) {
     useThemeComponentModifier('IconLabel') //
   )([{}, rootProps])
 
-  const { icon, iconProps, ...props } = formattedProps
+  const { icon, iconProps, iconColor, iconSize, moveIconSizeScale, ...props } = formattedProps
 
   return (
     <ContentLabel
       className="neko-icon-label"
       color={color}
       size={sizeCode}
-      content={!!icon && <Icon name={icon} size={sizeCode} color={color} {...iconProps} />}
+      content={
+        !!icon && (
+          <Icon
+            name={icon}
+            size={iconSize || moveScale(sizeCode, moveIconSizeScale || -1)}
+            color={iconColor || color}
+            {...iconProps}
+          />
+        )
+      }
       {...props}
     />
   )

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>
+  )
+}