@neko-os/ui 0.0.4 → 0.0.6

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/overflow.js

@@ -0,0 +1,23 @@
+import { clearProps } from './_helpers'
+
+export function useOverflowModifier([values, props]) {
+  let { hiddenOverflow, scroll, scrollY, scrollX, overflow, overflowY, overflowX, ...restProps } = props
+
+  if (hiddenOverflow) overflow = 'hidden'
+  if (scroll) overflow = 'scroll'
+  if (scrollY) overflowY = 'scroll'
+  if (scrollX) overflowX = 'scroll'
+
+  const style = clearProps({ overflow, overflowY, overflowX })
+
+  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,18 +1,29 @@
+import { Platform } from '../abstractions/Platform'
 import { clearProps } from './_helpers'
 
-export function usePositionModifier(props) {
-  let { position, absolute, relative, top, bottom, left, right, ...restProps } = props
+export function usePositionModifier([values, props]) {
+  let { position, absolute, relative, fixed, sticky, top, bottom, left, right, zIndex, ...restProps } = props
 
+  if (!zIndex && !!absolute) zIndex = 10
   if (absolute) position = 'absolute'
   if (relative) position = 'relative'
+  if (fixed) position = 'fixed'
+  if (sticky) position = 'sticky'
 
-  const style = clearProps({ position, top, bottom, left, right })
+  if (Platform.OS !== 'web' && ['fixed', 'sticky'].includes(position)) {
+    position = 'absolute'
+  }
+
+  const style = clearProps({ position, top, bottom, left, right, zIndex })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/responsiveConverter.js

@@ -0,0 +1,19 @@
+import { curry } from 'ramda'
+import React from 'react'
+
+import { useGetResponsiveValue } from '../responsive/responsiveHooks'
+
+export const useResponsiveConverter = curry(function (keys, [values, props]) {
+  const getValue = useGetResponsiveValue()
+
+  return React.useMemo(() => {
+    const formattedProps = Object.keys(props).reduce((acc, k) => {
+      let v = props[k]
+      if (!keys?.length || keys.includes(k)) v = getValue(v)
+      acc[k] = v
+      return acc
+    }, {})
+
+    return [values, formattedProps]
+  }, [getValue])
+})

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,
@@ -20,16 +20,22 @@ export function useSizeModifier(props) {
     fullH,
     ratio,
     square,
+    span,
+    parentSpan,
     ...restProps
   } = props || {}
 
   minHeight = getHeight(minHeight || minH)
-  minWidth = minWidth || minW
+  minWidth = getHeight(minWidth || minW)
 
-  maxHeight = maxHeight || maxH
-  maxWidth = maxWidth || maxW
+  maxHeight = getHeight(maxHeight || maxH)
+  maxWidth = getHeight(maxWidth || maxW)
 
   height = getHeight(height)
+  width = getHeight(width)
+
+  span = span ?? parentSpan
+  if (span) width = (span / 24) * 100 + '%'
 
   if (fullWidth || fullW) width = '100%'
   if (fullHeight || fullH) height = '100%'
@@ -37,10 +43,13 @@ export function useSizeModifier(props) {
   let aspectRatio = ratio
   if (!!square) aspectRatio = 1
 
-  const style = clearProps({ height, width, minHeight, minHeight, maxHeight, maxWidth, aspectRatio })
+  const style = clearProps({ height, width, minHeight, minHeight, maxHeight, minWidth, maxWidth, aspectRatio })
 
-  return {
-    ...restProps,
-    style: { ...props.style, ...style },
-  }
+  return [
+    values,
+    {
+      ...restProps,
+      style: { ...props.style, ...style },
+    },
+  ]
 }

package/src/modifiers/sizeConverter.js

@@ -0,0 +1,12 @@
+import { getSizeFromProps } from '../theme/helpers/sizeScale'
+import { useGetThemeValue } from '../theme/ThemeHandler'
+
+export function useSizeConverter(groupKey, defaultValue) {
+  const getSizeValue = useGetThemeValue(groupKey)
+
+  return ([values, props]) => {
+    const [sizeCode, formattedProps] = getSizeFromProps(props, defaultValue)
+    const size = getSizeValue(sizeCode)
+    return [{ ...values, size, sizeCode }, formattedProps]
+  }
+}

package/src/modifiers/state.js

@@ -0,0 +1,33 @@
+import { clearProps } from './_helpers'
+
+export function useStateModifier([values, props]) {
+  let { disabled, loading, onClick, onPress, onChange, ...restProps } = props
+
+  let cursor = props.style
+  let opacity = props.opacity
+
+  if (!!disabled) {
+    opacity = 0.3
+    onChange = undefined
+    cursor = 'not-allowed'
+  }
+  if (!!disabled || !!loading) {
+    onPress = undefined
+    onClick = undefined
+  }
+
+  const style = clearProps({ opacity, cursor })
+  const newProps = clearProps({ onPress, onClick, onChange })
+
+  return [
+    { disabled, loading, ...values },
+    {
+      ...newProps,
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
+    },
+  ]
+}

package/src/modifiers/text.js

@@ -1,14 +1,14 @@
 import { clearProps } from './_helpers'
-import { mergePreset, useGetColor, useTexts } from '../theme/ThemeHandler'
+import { mergePreset } from '../theme/helpers/mergePreset'
+import { useGetColor, useTexts } from '../theme/ThemeHandler'
 
-export function useTextModifier({ size, ...props }) {
+export function useTextModifier([{ color, textCode, ...values }, { ...props }]) {
   const getColor = useGetColor()
   const texts = useTexts()
 
-  if (!size && !props.inherit) size = 'p'
+  if (!textCode && !props.inherit) textCode = 'p'
 
   let {
-    color,
     opacity,
     bold,
     strong,
@@ -23,7 +23,7 @@ export function useTextModifier({ size, ...props }) {
     inherit,
     fontSize,
     ...restProps
-  } = mergePreset(texts, size, props, 'p')
+  } = mergePreset(texts, textCode, props, 'p')
 
   let fontStyle
   if (italic) fontStyle = 'italic'
@@ -38,8 +38,6 @@ export function useTextModifier({ size, ...props }) {
   fontWeight = fontWeight || weight
   if (bold || strong) fontWeight = 600
 
-  if (!inherit) color = getColor(color || 'text')
-
   const style = clearProps({
     fontWeight,
     fontStyle,
@@ -51,11 +49,14 @@ export function useTextModifier({ size, ...props }) {
     fontSize,
   })
 
-  return {
-    ...restProps,
-    style: {
-      ...props.style,
-      ...style,
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
     },
-  }
+  ]
 }

package/src/modifiers/textConverter.js

@@ -0,0 +1,12 @@
+import { getTextFromProps } from '../theme/helpers/textScale'
+import { useGetThemeValue } from '../theme/ThemeHandler'
+
+export function useTextConverter(defaultValue) {
+  const getTextValue = useGetThemeValue('texts')
+
+  return ([values, props]) => {
+    const [textCode, formattedProps] = getTextFromProps(props, defaultValue)
+    const text = getTextValue(textCode)
+    return [{ ...values, text, textCode }, formattedProps]
+  }
+}

package/src/modifiers/themeComponent.js

@@ -0,0 +1,11 @@
+import { mergeDeepRight } from 'ramda'
+import { useThemeComponent } from '../theme/ThemeHandler'
+
+export function useThemeComponentModifier(componentName) {
+  const themeProps = useThemeComponent(componentName)
+
+  return ([values, props]) => {
+    props = mergeDeepRight(themeProps, props)
+    return [values, props]
+  }
+}

package/src/responsive/ResponsiveHandler.js

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { useBreakpoints } from '../theme/ThemeHandler'
+import { useWindowWidth } from '../abstractions/helpers/windowWidth'
+
+const ResponsiveContext = React.createContext(null)
+
+export const useResponsive = () => React.useContext(ResponsiveContext)
+
+export function ResponsiveHandler({ children }) {
+  const width = useWindowWidth()
+
+  const breakpoints = useBreakpoints()
+
+  const screen = React.useMemo(() => {
+    if (!breakpoints?.length) return false
+    for (let i = 0; i < breakpoints.length; i++) {
+      if (width < breakpoints[i].value) {
+        return breakpoints[i].name
+      }
+    }
+    return breakpoints[breakpoints.length - 1]?.name
+  }, [width, breakpoints])
+
+  const value = React.useMemo(() => ({ width, screen }), [width, screen])
+
+  return <ResponsiveContext.Provider value={value}>{children}</ResponsiveContext.Provider>
+}

package/src/responsive/index.js

@@ -0,0 +1,2 @@
+export * from './responsiveHooks'
+export * from './ResponsiveHandler'

package/src/responsive/responsiveHooks.js

@@ -0,0 +1,54 @@
+import { is } from 'ramda'
+import React from 'react'
+
+import { useBreakpoints } from '../theme/ThemeHandler'
+import { useResponsive } from '../responsive/ResponsiveHandler'
+
+export function useGetResponsiveValue() {
+  const breakpoints = useBreakpoints()
+  const { width, screen } = useResponsive()
+
+  return React.useCallback(
+    (value) => {
+      const isObj = is(Object, value)
+
+      if (!isObj) 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
+    },
+    [screen]
+  )
+}
+
+export function useResponsiveValue(value) {
+  const getValue = useGetResponsiveValue()
+
+  const isObj = is(Object, value)
+  const valueWatch = isObj ? Object.keys(value).map((k) => `${k}:${value[k]}`) : [value]
+
+  return React.useMemo(() => getValue(value), [getValue, ...valueWatch])
+}

package/src/theme/ThemeHandler.js

@@ -2,50 +2,48 @@ import { mergeDeepRight } from 'ramda'
 import React from 'react'
 
 import { DEFAULT_LIGHT_THEME } from './default/lightTheme'
-import { DEFAULT_THEMES } from './default/themes'
+import { getThemeValue } from './helpers/relatedScales'
 import { useFormattedTheme } from './format/formatTheme'
 
+const DEFAULT_BREAKPOINTS = [
+  { name: 'sm', value: 768 },
+  { name: 'md', value: 1024 },
+  { name: 'lg', value: 1440 },
+  { name: 'xl', value: 10000 },
+]
+
 const ThemeContext = React.createContext(null)
 export const useThemeHandler = () => React.useContext(ThemeContext) || {}
-export const useTheme = () => useThemeHandler().theme || DEFAULT_LIGHT_THEME
 
-export const useColors = () => useTheme().colors || {}
-const getColor = (colors, key) => colors[key] || key
-export const useGetColor = () => {
-  const colors = useColors()
-  return (key) => getColor(colors, key)
-}
+export const useBreakpoints = () => useThemeHandler()?.breakpoints || DEFAULT_BREAKPOINTS
 
-export const useSpaces = () => useTheme().spaces || {}
-const getSpace = (spaces, key) => spaces[key] || key
-export const useGetSpace = () => {
-  const spaces = useSpaces()
-  return (key) => getSpace(spaces, key)
+export const useTheme = (groupKey) => {
+  const theme = useThemeHandler().theme || DEFAULT_LIGHT_THEME
+  if (!groupKey) return theme
+  return theme?.[groupKey] || {}
 }
 
-export const useRadius = () => useTheme().radius || {}
-const getRadius = (radius, key) => radius[key] || key
-export const useGetRadius = () => {
-  const radius = useRadius()
-  return (key) => getRadius(radius, key)
+export const useGetThemeValue = (groupKey) => {
+  const group = useTheme(groupKey)
+  return (key) => getThemeValue(group, key)
 }
 
-export const useTexts = () => useTheme().texts || {}
+export const useColors = () => useTheme('colors')
+export const useGetColor = () => useGetThemeValue('colors')
 
-export function mergePreset(presets, key, props, defaultKey) {
-  if (!key) return props
-  const preset = presets[key] || presets[defaultKey]
-  return { ...props, ...preset }
-}
+export const useSpaces = () => useTheme('spaces')
+export const useGetSpace = () => useGetThemeValue('spaces')
 
-export const useElementHeights = () => useTheme().elementHeights || {}
-const getElementHeight = (elementHeights, key) => elementHeights[key] || key
-export const useGetElementHeight = () => {
-  const elementHeights = useElementHeights()
-  return (key) => getElementHeight(elementHeights, key)
-}
+export const useRadius = () => useTheme('radius')
+export const useGetRadius = () => useGetThemeValue('radius')
+
+export const useElementHeights = () => useTheme('elementHeights')
+export const useGetElementHeight = () => useGetThemeValue('elementHeights')
+
+export const useTexts = () => useTheme('texts')
+export const useGetText = () => useGetThemeValue('text')
 
-export const useThemeComponents = () => useTheme().components || {}
+export const useThemeComponents = () => useTheme('components')
 export function useThemeComponent(name) {
   const components = useThemeComponents()
   return components[name] || {}
@@ -55,10 +53,10 @@ export function useMergeThemeComponent(name, props) {
   return mergeDeepRight(themeProps, props)
 }
 
-export function ThemeHandler({ themes, initTheme, children }) {
+export function ThemeHandler({ breakpoints, themes, initTheme, children }) {
   const [activeThemeKey, setActiveThemeKey] = React.useState(initTheme || 'light')
   const theme = useFormattedTheme(themes, activeThemeKey)
-  const value = { theme, themes, activeThemeKey, setActiveThemeKey }
+  const value = { theme, themes, activeThemeKey, setActiveThemeKey, breakpoints: breakpoints || DEFAULT_BREAKPOINTS }
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
 }

package/src/theme/default/base.js

@@ -1,35 +1,47 @@
 export const BASE_THEME = {
   spaces: {
-    xxxsm: 1,
-    xxsm: 3,
-    xsm: 5,
+    xxxs: 1,
+    xxs: 3,
+    xs: 5,
     sm: 10,
     md: 15,
     lg: 20,
-    xlg: 30,
-    xxlg: 40,
-    xxxlg: 50,
+    xl: 30,
+    xxl: 40,
+    xxxl: 50,
   },
 
   radius: {
-    xxxsm: 4,
-    xxsm: 5,
-    xsm: 5,
+    xxxs: 4,
+    xxs: 5,
+    xs: 5,
     sm: 7,
     md: 8,
     lg: 10,
-    xlg: 12,
-    xxlg: 15,
-    xxxlg: 18,
+    xl: 12,
+    xxl: 15,
+    xxxl: 18,
   },
 
-  // Buttons, inputs, tags
+  icons: {
+    xxxs: 10,
+    xxs: 12,
+    xs: 14,
+    sm: 16,
+    md: 18,
+    lg: 22,
+    xl: 26,
+    xxl: 28,
+    xxxl: 32,
+  },
+
+  // Buttons, inputs, etc.
   elementHeights: {
-    xsm: 20,
+    xs: 20,
     sm: 30,
     md: 35,
     lg: 50,
-    xlg: 60,
+    xl: 60,
   },
 
   texts: {
@@ -59,7 +71,7 @@ export const BASE_THEME = {
     },
     p: { fontSize: 14 },
     sm: { fontSize: 12 },
-    xsm: { fontSize: 10 },
-    xxsm: { fontSize: 8 },
+    xs: { fontSize: 10 },
+    xxs: { fontSize: 8 },
   },
 }

package/src/theme/default/cyberpunkTheme.js

@@ -12,6 +12,7 @@ export const CYBERPUNK_DARK_THEME = mergeDeepRight(BASE_THEME, {
     bg: '#0A0A0F',
     overlayBG: '#14141F',
     shadow: 'rgba(39, 45, 52, 0.6)',
+    divider: 'rgba(255,255,255, 0.2)',
 
     blue: '#00E5FF',
     yellow: '#FFD600',

package/src/theme/default/darkTheme.js

@@ -11,7 +11,8 @@ export const DEFAULT_DARK_THEME = mergeDeepRight(BASE_THEME, {
 
     bg: '#383E44',
     overlayBG: '#272D34',
-    shadow: 'rgba(39, 45, 52, 0.6)',
+    shadow: 'rgba(216, 210, 203, 0.1)',
+    divider: '#383E44',
 
     blue: '#4DA3FF',
     yellow: '#FFD93B',

package/src/theme/default/deepWoodsTheme.js

@@ -12,6 +12,7 @@ export const DEEP_WOODS_DARK_THEME = mergeDeepRight(BASE_THEME, {
     bg: '#0D1B14',
     overlayBG: '#16281F',
     shadow: 'rgba(39, 45, 52, 0.6)',
+    divider: 'rgba(255,255,255, 0.2)',
 
     blue: '#64B5F6',
     yellow: '#FBC02D',

package/src/theme/default/forestTheme.js

@@ -12,6 +12,7 @@ export const FOREST_MIST_THEME = mergeDeepRight(BASE_THEME, {
     bg: '#E9F5EC',
     overlayBG: '#FFFFFF',
     shadow: 'rgba(39, 45, 52, 0.15)',
+    divider: 'rgba(0,0,0, 0.1)',
 
     blue: '#2563EB',
     yellow: '#F59E0B',