@neko-os/ui 0.0.3 → 0.0.5

package/src/components/presentation/IconLabel.js

@@ -0,0 +1,29 @@
+import { pipe } from 'ramda'
+
+import { ContentLabel } from './ContentLabel'
+import { Icon } from './Icon'
+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, ...props } = formattedProps
+
+  return (
+    <ContentLabel
+      className="neko-icon-label"
+      color={color}
+      size={sizeCode}
+      content={!!icon && <Icon name={icon} size={sizeCode} color={color} {...iconProps} />}
+      {...props}
+    />
+  )
+}
+
+export const IconText = IconLabel

package/src/components/presentation/Tag.js

@@ -0,0 +1,72 @@
+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 }]) => {
+  const oneSizeDown = moveScale(sizeCode, -1)
+  const twoSizeDown = moveScale(sizeCode, -2)
+  const threeSizeDown = moveScale(sizeCode, -3)
+
+  return {
+    paddingH: twoSizeDown,
+    padding: threeSizeDown,
+    outline: true,
+    br: threeSizeDown,
+    borderWidth: 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 { label, icon, textProps, iconProps, gap, invert, ...props } = formattedProps
+
+  return (
+    <View className="neko-tag" row>
+      <AbsView className="neko-tag-inner" {...props}>
+        <IconLabel
+          center
+          color={fontColor}
+          size={moveScale(sizeCode, -1)}
+          label={label}
+          icon={icon}
+          gap={gap}
+          invert={invert}
+          textProps={{ strong: true, ...textProps }}
+          iconProps={iconProps}
+        />
+      </AbsView>
+    </View>
+  )
+}

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

@@ -1,2 +1,3 @@
 export * from './Tag'
 export * from './Icon'
+export * from './IconLabel'

package/src/components/structure/Card.js

@@ -0,0 +1,42 @@
+import { pipe } from 'ramda'
+
+import { AbsView } from '../../abstractions/View'
+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 { useMarginModifier } from '../../modifiers/margin'
+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 = {
+  padding: 'md', //
+  br: 'xlg',
+  bg: 'overlayBG',
+}
+
+export function Card({ children, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('Card'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useSizeModifier, //
+    usePositionModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexWrapperModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsView className="neko-card" {...props}>
+      {children}
+    </AbsView>
+  )
+}

package/src/components/structure/View.js

@@ -0,0 +1,36 @@
+import { pipe } from 'ramda'
+
+import { AbsView } from '../../abstractions/View'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+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 { useShadowModifier } from '../../modifiers/shadow'
+import { useSizeModifier } from '../../modifiers/size'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function View({ children, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('View'),
+    useDisplayModifier, //
+    useSizeModifier, //
+    usePositionModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexWrapperModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+
+  return (
+    <AbsView className="neko-view" {...props}>
+      {children}
+    </AbsView>
+  )
+}

package/src/components/text/Text.js

@@ -0,0 +1,28 @@
+import { pipe } from 'ramda'
+
+import { AbsText } from '../../abstractions/Text'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useMarginModifier } from '../../modifiers/margin'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { useSizeModifier } from '../../modifiers/size'
+import { useTextConverter } from '../../modifiers/textConverter'
+import { useTextModifier } from '../../modifiers/text'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Text({ children, label, ...rootProps }) {
+  const [_, props] = pipe(
+    useColorConverter('text'),
+    useTextConverter('p'),
+    useThemeComponentModifier('Text'),
+    useSizeModifier, //
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useTextModifier
+  )([{}, rootProps])
+
+  return <AbsText {...props}>{children || label}</AbsText>
+}
+
+export const Title = Text

package/src/helpers/index.js

@@ -0,0 +1,2 @@
+export * from './responsive'
+export * from './string'

package/src/helpers/responsive.js

@@ -0,0 +1,54 @@
+import { is } from 'ramda'
+
+import { useBreakpoints } from '../theme/ThemeHandler'
+import { useWindowWidth } from '../abstractions/windowWidth'
+
+export function useResponsiveScreen() {
+  const breakpoints = useBreakpoints()
+  const width = useWindowWidth()
+  if (!breakpoints?.length) return false
+
+  // Find which breakpoint range we're in
+  for (let i = 0; i < breakpoints.length; i++) {
+    if (width < breakpoints[i].value) {
+      return breakpoints[i].name
+    }
+  }
+
+  // If width is greater than all breakpoints, return the last one
+  return breakpoints[breakpoints.length - 1]?.name
+}
+
+export function useResponsiveValue(value) {
+  const breakpoints = useBreakpoints()
+  const width = useWindowWidth()
+  const screen = useResponsiveScreen()
+
+  if (!is(Object, value)) return value
+
+  if (value[screen]) return value[screen]
+
+  const keys = Object.keys(value)
+  for (let k of keys) {
+    const match = k.match(/^(\w+)([du])$/)
+    if (!match) continue
+
+    const bpName = match[1]
+    const mode = match[2]
+
+    const bpIndex = breakpoints.findIndex((b) => b.name === bpName)
+    if (bpIndex === -1) continue
+
+    // For "up", use the lower boundary of the range (previous breakpoint value)
+    // For "down", use the upper boundary of the range (current breakpoint value)
+    if (mode === 'u') {
+      const lowerBound = bpIndex > 0 ? breakpoints[bpIndex - 1].value : 0
+      if (width >= lowerBound) return value[k]
+    }
+    if (mode === 'd') {
+      if (width < breakpoints[bpIndex].value) return value[k]
+    }
+  }
+
+  return value?.df
+}

package/src/index.css

@@ -25,6 +25,11 @@ body {
   min-height: 100vh;
 }
 
+a,
+button {
+  cursor: pointer;
+}
+
 .neko-wave-click-effect {
   position: relative;
   padding: 10px 20px;

package/src/index.js

@@ -1,8 +1,5 @@
-// export * from './form'
-export * from './structure'
-export * from './actions'
-export * from './presentation'
-export * from './text'
+export * from './helpers'
+export * from './components'
 export * from './theme'
 export * from './NekoUI'
 

package/src/modifiers/background.js

@@ -1,7 +1,7 @@
 import { clearProps } from './_helpers'
 import { useGetColor } from '../theme/ThemeHandler'
 
-export function useBackgroundModifier(props) {
+export function useBackgroundModifier([values, props]) {
   const getColor = useGetColor()
   let { bg, background, backgroundColor, ...restProps } = props
 
@@ -9,11 +9,14 @@ export function useBackgroundModifier(props) {
 
   const style = clearProps({ backgroundColor })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/border.js

@@ -1,7 +1,7 @@
 import { clearProps } from './_helpers'
 import { useGetColor, useGetRadius } from '../theme/ThemeHandler'
 
-export function useBorderModifier(props) {
+export function useBorderModifier([values, props]) {
   const getRadius = useGetRadius()
   const getColor = useGetColor()
   let {
@@ -43,11 +43,14 @@ export function useBorderModifier(props) {
     borderWidth,
   })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/colorConverter.js

@@ -0,0 +1,13 @@
+import { getColorFromProps } from '../theme/helpers/colorScale'
+import { useGetColor } from '../theme/ThemeHandler'
+
+export function useColorConverter(defaultValue) {
+  const getColor = useGetColor()
+
+  return ([values, props]) => {
+    const [colorCode, formattedProps] = getColorFromProps(props, defaultValue)
+    const color = getColor(colorCode)
+
+    return [{ ...values, color, colorCode }, formattedProps]
+  }
+}

package/src/modifiers/default.js

@@ -0,0 +1,9 @@
+import { mergeDeepRight, is } from 'ramda'
+
+export function useDefaultModifier(defaultPropsOrFunc) {
+  return ([values, props]) => {
+    const defaultProps =
+      (is(Function, defaultPropsOrFunc) ? defaultPropsOrFunc([values, props]) : defaultPropsOrFunc) || {}
+    return [values, mergeDeepRight(defaultProps, props)]
+  }
+}

package/src/modifiers/display.js

@@ -0,0 +1,24 @@
+import { clearProps } from './_helpers'
+
+export function useDisplayModifier([values, props]) {
+  let { cursor, opacity, disabled, hidden, display, ...restProps } = props
+
+  if (!!hidden) display = 'hidden'
+  if (!!disabled) {
+    opacity = opacity || 0.4
+    cursor = 'not-allowed'
+  }
+
+  const style = clearProps({ display, opacity, cursor })
+
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
+    },
+  ]
+}

package/src/modifiers/flex.js

@@ -1,17 +1,20 @@
 import { clearProps } from './_helpers'
 
-export function useFlexModifier(props) {
+export function useFlexModifier([values, props]) {
   let { flex, ...restProps } = props
 
   if (flex === true) flex = 1
 
   const style = clearProps({ flex })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/flexWrapper.js

@@ -1,7 +1,7 @@
 import { clearProps } from './_helpers'
 import { useGetSpace } from '../theme/ThemeHandler'
 
-export function useFlexWrapperModifier(props) {
+export function useFlexWrapperModifier([values, props]) {
   const getSpace = useGetSpace()
   let { justify, align, center, centerV, centerH, toRight, toBottom, direction, row, wrap, gap, ...restProps } = props
 
@@ -15,9 +15,9 @@ export function useFlexWrapperModifier(props) {
     justifyContent = 'center'
     alignItems = 'center'
   } else {
-    if (centerV) justifyContent = 'center'
+    if (centerH) justifyContent = 'center'
     if (toBottom) justifyContent = 'flex-end'
-    if (centerH) alignItems = 'center'
+    if (centerV) alignItems = 'center'
     if (toRight) alignItems = 'flex-end'
   }
 
@@ -33,11 +33,14 @@ export function useFlexWrapperModifier(props) {
     gap,
   })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/{fullColor.js.js → fullColor.js}

@@ -2,27 +2,26 @@ import tinycolor from 'tinycolor2'
 
 import { useGetColor } from '../theme/ThemeHandler'
 
-export function useFullColorModifier(props) {
+export function useFullColorModifier([{ color, ...values }, { outline, ...props }]) {
   const getColor = useGetColor()
-  let { color, outline, ...restProps } = props
 
   let bg = color
   const bgObj = tinycolor(getColor(bg))
   let borderColor = color
-  let textColor = 'text'
-  let textColorObj = tinycolor(getColor('text'))
+  let fontColor = 'text'
+  let fontColorObj = tinycolor(getColor('text'))
 
   if (!!outline) {
     bg = 'transparent'
-    textColor = color
-  } else if (bgObj.isDark() === textColorObj.isDark()) {
-    textColor = 'overlayBG'
+    fontColor = color
+  } else if (bgObj.isDark() === fontColorObj.isDark()) {
+    fontColor = 'overlayBG'
   }
 
   return [
-    textColor,
+    { ...values, fontColor },
     {
-      ...restProps,
+      ...props,
       bg,
       borderColor,
     },

package/src/modifiers/logger.js

@@ -0,0 +1,6 @@
+export function useLoggerModifier(key) {
+  return ([values, props]) => {
+    console.log(key, values, props)
+    return [values, props]
+  }
+}

package/src/modifiers/margin.js

@@ -1,7 +1,7 @@
 import { clearProps } from './_helpers'
 import { useGetSpace } from '../theme/ThemeHandler'
 
-export function useMarginModifier(props) {
+export function useMarginModifier([values, props]) {
   const getSpace = useGetSpace()
   const { marginT, marginB, marginL, marginR, marginV, marginH, margin, ...restProps } = props
 
@@ -12,11 +12,14 @@ export function useMarginModifier(props) {
 
   const style = clearProps({ marginTop, marginBottom, marginRight, marginLeft })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/padding.js

@@ -1,7 +1,7 @@
 import { clearProps } from './_helpers'
 import { useGetSpace } from '../theme/ThemeHandler'
 
-export function usePaddingModifier(props) {
+export function usePaddingModifier([values, props]) {
   const getSpace = useGetSpace()
   const { paddingT, paddingB, paddingL, paddingR, paddingV, paddingH, padding, ...restProps } = props
 
@@ -12,11 +12,14 @@ export function usePaddingModifier(props) {
 
   const style = clearProps({ paddingTop, paddingBottom, paddingRight, paddingLeft })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/position.js

@@ -1,6 +1,6 @@
 import { clearProps } from './_helpers'
 
-export function usePositionModifier(props) {
+export function usePositionModifier([values, props]) {
   let { position, absolute, relative, top, bottom, left, right, ...restProps } = props
 
   if (absolute) position = 'absolute'
@@ -8,11 +8,14 @@ export function usePositionModifier(props) {
 
   const style = clearProps({ position, top, bottom, left, right })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/shadow.js

@@ -1,7 +1,7 @@
 import { clearProps } from './_helpers'
 import { useGetColor } from '../theme/ThemeHandler'
 
-export function useShadowModifier(props) {
+export function useShadowModifier([values, props]) {
   const getColor = useGetColor()
   let { shadow, ...restProps } = props
 
@@ -22,11 +22,14 @@ export function useShadowModifier(props) {
 
   const style = clearProps({ boxShadow, shadowRadius, shadowOffset, shadowOpacity, shadowColor, elevation })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/size.js

@@ -1,7 +1,7 @@
 import { clearProps } from './_helpers'
 import { useGetElementHeight } from '../theme/ThemeHandler'
 
-export function useSizeModifier(props) {
+export function useSizeModifier([values, props]) {
   const getHeight = useGetElementHeight()
   let {
     width,
@@ -39,8 +39,11 @@ export function useSizeModifier(props) {
 
   const style = clearProps({ height, width, minHeight, minHeight, maxHeight, maxWidth, aspectRatio })
 
-  return {
-    ...restProps,
-    style: { ...props.style, ...style },
-  }
+  return [
+    values,
+    {
+      ...restProps,
+      style: { ...props.style, ...style },
+    },
+  ]
 }