@neko-os/ui 0.0.2 → 0.0.4

package/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color: #213547;
+  background-color: #ffffff;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*,
+* * {
+  box-sizing: border-box;
+}
+
+#root,
+body {
+  margin: 0;
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+}
+
+.neko-wave-click-effect {
+  position: relative;
+  padding: 10px 20px;
+  background: #1677ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.neko-wave-click-effect:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border: 2px solid rgba(200, 200, 200, 0.5);
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.neko-wave-click-effect:active:after {
+  animation: wave-effect 0.4s ease-out;
+}
+
+.neko-wave-click-effect:hover {
+  opacity: 0.95;
+}
+
+@keyframes wave-effect {
+  0% {
+    opacity: 1;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.3);
+  }
+}

package/src/index.js

@@ -1,6 +1,9 @@
 // export * from './form'
 export * from './structure'
-//
-// export const View = 10
+export * from './actions'
+export * from './presentation'
+export * from './text'
+export * from './theme'
+export * from './NekoUI'
 
-export const version = 8
+export const version = 41

package/src/modifiers/background.js

@@ -0,0 +1,19 @@
+import { clearProps } from './_helpers'
+import { useGetColor } from '../theme/ThemeHandler'
+
+export function useBackgroundModifier(props) {
+  const getColor = useGetColor()
+  let { bg, background, backgroundColor, ...restProps } = props
+
+  backgroundColor = getColor(bg ?? background ?? backgroundColor)
+
+  const style = clearProps({ backgroundColor })
+
+  return {
+    ...restProps,
+    style: {
+      ...props.style,
+      ...style,
+    },
+  }
+}

package/src/modifiers/border.js

@@ -0,0 +1,53 @@
+import { clearProps } from './_helpers'
+import { useGetColor, useGetRadius } from '../theme/ThemeHandler'
+
+export function useBorderModifier(props) {
+  const getRadius = useGetRadius()
+  const getColor = useGetColor()
+  let {
+    br,
+    brT,
+    borderRadiusT,
+    brB,
+    borderRadiusB,
+    brL,
+    borderRadiusL,
+    brR,
+    borderRadiusR,
+    borderRadius,
+    borderStyle,
+    borderWidth,
+    borderColor,
+    brColor,
+    round,
+    ...restProps
+  } = props
+
+  if (round) br = 1000
+  const borderTopRightRadius = getRadius(brT ?? borderRadiusT ?? brR ?? borderRadiusR ?? borderRadius ?? br)
+  const borderTopLeftRadius = getRadius(brT ?? borderRadiusT ?? brL ?? borderRadiusL ?? borderRadius ?? br)
+  const borderBottomRightRadius = getRadius(brB ?? borderRadiusB ?? brR ?? borderRadiusR ?? borderRadius ?? br)
+  const borderBottomLeftRadius = getRadius(brB ?? borderRadiusB ?? brL ?? borderRadiusL ?? borderRadius ?? br)
+
+  if (!!borderColor || brColor) borderColor = getColor(brColor ?? borderColor)
+
+  borderStyle = borderStyle
+  if (!!borderWidth) borderStyle = 'solid'
+  const style = clearProps({
+    borderStyle,
+    borderTopRightRadius,
+    borderTopLeftRadius,
+    borderBottomRightRadius,
+    borderBottomLeftRadius,
+    borderColor,
+    borderWidth,
+  })
+
+  return {
+    ...restProps,
+    style: {
+      ...props.style,
+      ...style,
+    },
+  }
+}

package/src/modifiers/flexWrapper.js

@@ -1,12 +1,15 @@
 import { clearProps } from './_helpers'
+import { useGetSpace } from '../theme/ThemeHandler'
 
 export function useFlexWrapperModifier(props) {
-  const { justify, align, center, centerV, centerH, toRight, toBottom, direction, row, wrap, gap, ...restProps } = props
+  const getSpace = useGetSpace()
+  let { justify, align, center, centerV, centerH, toRight, toBottom, direction, row, wrap, gap, ...restProps } = props
 
   let justifyContent = justify
   let alignItems = align
   let flexDirection = direction || 'column'
   let flexWrap
+  gap = getSpace(gap)
 
   if (center) {
     justifyContent = 'center'

package/src/modifiers/fullColor.js.js

@@ -0,0 +1,30 @@
+import tinycolor from 'tinycolor2'
+
+import { useGetColor } from '../theme/ThemeHandler'
+
+export function useFullColorModifier(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'))
+
+  if (!!outline) {
+    bg = 'transparent'
+    textColor = color
+  } else if (bgObj.isDark() === textColorObj.isDark()) {
+    textColor = 'overlayBG'
+  }
+
+  return [
+    textColor,
+    {
+      ...restProps,
+      bg,
+      borderColor,
+    },
+  ]
+}

package/src/modifiers/margin.js

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

package/src/modifiers/padding.js

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

package/src/modifiers/shadow.js

@@ -0,0 +1,32 @@
+import { clearProps } from './_helpers'
+import { useGetColor } from '../theme/ThemeHandler'
+
+export function useShadowModifier(props) {
+  const getColor = useGetColor()
+  let { shadow, ...restProps } = props
+
+  let boxShadow, shadowRadius, shadowOffset, shadowOpacity, shadowColor, elevation
+  if (shadow === true) {
+    shadow = getColor('shadow')
+  } else if (!!shadow) {
+    shadow = getColor(shadow)
+  }
+  if (!!shadow) {
+    boxShadow = `0 1px 10px ${shadow}`
+    shadowRadius = 10
+    shadowOffset = { width: 0, height: 1 }
+    shadowOpacity = 1
+    elevation = 10
+    shadowColor = shadow
+  }
+
+  const style = clearProps({ boxShadow, shadowRadius, shadowOffset, shadowOpacity, shadowColor, elevation })
+
+  return {
+    ...restProps,
+    style: {
+      ...props.style,
+      ...style,
+    },
+  }
+}

package/src/modifiers/size.js

@@ -1,11 +1,43 @@
 import { clearProps } from './_helpers'
+import { useGetElementHeight } from '../theme/ThemeHandler'
 
 export function useSizeModifier(props) {
-  let { width, height, fullWidth, fullHeight, ...restProps } = props || {}
-  if (fullWidth) width = '100%'
-  if (fullHeight) height = '100%'
+  const getHeight = useGetElementHeight()
+  let {
+    width,
+    height,
+    minH,
+    minHeight,
+    maxH,
+    maxHeight,
+    minWidth,
+    minW,
+    maxWidth,
+    maxW,
+    fullWidth,
+    fullW,
+    fullHeight,
+    fullH,
+    ratio,
+    square,
+    ...restProps
+  } = props || {}
 
-  const style = clearProps({ height, width })
+  minHeight = getHeight(minHeight || minH)
+  minWidth = minWidth || minW
+
+  maxHeight = maxHeight || maxH
+  maxWidth = maxWidth || maxW
+
+  height = getHeight(height)
+
+  if (fullWidth || fullW) width = '100%'
+  if (fullHeight || fullH) height = '100%'
+
+  let aspectRatio = ratio
+  if (!!square) aspectRatio = 1
+
+  const style = clearProps({ height, width, minHeight, minHeight, maxHeight, maxWidth, aspectRatio })
 
   return {
     ...restProps,

package/src/modifiers/text.js

@@ -1,7 +1,29 @@
 import { clearProps } from './_helpers'
+import { mergePreset, useGetColor, useTexts } from '../theme/ThemeHandler'
 
-export function useTextModifier(props) {
-  let { opacity, bold, strong, fontWeight, italic, underline, lineHeight, align, center, toRight, ...restProps } = props
+export function useTextModifier({ size, ...props }) {
+  const getColor = useGetColor()
+  const texts = useTexts()
+
+  if (!size && !props.inherit) size = 'p'
+
+  let {
+    color,
+    opacity,
+    bold,
+    strong,
+    fontWeight,
+    weight,
+    italic,
+    underline,
+    lineHeight,
+    align,
+    center,
+    toRight,
+    inherit,
+    fontSize,
+    ...restProps
+  } = mergePreset(texts, size, props, 'p')
 
   let fontStyle
   if (italic) fontStyle = 'italic'
@@ -13,8 +35,11 @@ export function useTextModifier(props) {
   if (center) textAlign = 'center'
   if (toRight) textAlign = 'right'
 
+  fontWeight = fontWeight || weight
   if (bold || strong) fontWeight = 600
 
+  if (!inherit) color = getColor(color || 'text')
+
   const style = clearProps({
     fontWeight,
     fontStyle,
@@ -22,10 +47,10 @@ export function useTextModifier(props) {
     lineHeight,
     textAlign,
     opacity,
+    color,
+    fontSize,
   })
 
-  // TODO: Handle font sizes based on theme
-
   return {
     ...restProps,
     style: {

package/src/presentation/Icon.js

@@ -0,0 +1,14 @@
+import { AbsIcon } from '../abstractions/Icon'
+import { useGetColor, useMergeThemeComponent } from '../theme/ThemeHandler'
+
+export function Icon({ name, color, ...rootProps }) {
+  const getColor = useGetColor()
+  let props = useMergeThemeComponent('Icon', rootProps)
+
+  // props = pipe(
+  // useSizeModifier, //
+  // usePositionModifier,
+  // )(props)
+
+  return <AbsIcon className="neko-icon" name={name} color={getColor(color || 'text')} {...props} />
+}

package/src/presentation/Tag.js

@@ -0,0 +1,32 @@
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+import { moveScaleDown } from '../theme/helpers/sizeScale'
+import { useFullColorModifier } from '../modifiers/fullColor.js'
+import { useMergeThemeComponent } from '../theme/ThemeHandler'
+
+export function Tag(rootProps) {
+  let { label, style, textProps, size = 'md', ...props } = useMergeThemeComponent('Button', rootProps)
+  const oneSizeDown = moveScaleDown(size, 1)
+  const twoSizeDown = moveScaleDown(size, 2)
+  const threeSizeDown = moveScaleDown(size, 3)
+  const defaultProps = {
+    paddingH: twoSizeDown,
+    padding: threeSizeDown,
+    outline: true,
+    br: threeSizeDown,
+    borderWidth: 1,
+    color: 'primary',
+    center: true,
+  }
+  const [fontColor, formattedProps] = useFullColorModifier({ ...defaultProps, ...props, style })
+
+  return (
+    <View className="neko-tag" row>
+      <View className="neko-tag-inner" {...formattedProps}>
+        <Text strong center color={fontColor} size={oneSizeDown} {...textProps}>
+          {label}
+        </Text>
+      </View>
+    </View>
+  )
+}

package/src/presentation/index.js

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

package/src/structure/Card.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 { useFlexModifier } from '../modifiers/flex'
+import { useFlexWrapperModifier } from '../modifiers/flexWrapper'
+import { useMarginModifier } from '../modifiers/margin'
+import { useMergeThemeComponent } from '../theme/ThemeHandler'
+import { usePaddingModifier } from '../modifiers/padding'
+import { usePositionModifier } from '../modifiers/position'
+import { useShadowModifier } from '../modifiers/shadow'
+import { useSizeModifier } from '../modifiers/size'
+
+export function Card({ children, ...rootProps }) {
+  let props = useMergeThemeComponent('Card', rootProps)
+  const defaultProps = { padding: 'md', br: 'xlg', bg: 'overlayBG' }
+
+  props = pipe(
+    useSizeModifier, //
+    usePositionModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexWrapperModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )({ ...defaultProps, ...props })
+
+  return (
+    <AbsView className="neko-card" {...props}>
+      {children}
+    </AbsView>
+  )
+}

package/src/structure/View.js

@@ -1,22 +1,34 @@
 import { pipe } from 'ramda'
 
 import { AbsView } from '../abstractions/View'
+import { useBackgroundModifier } from '../modifiers/background'
+import { useBorderModifier } from '../modifiers/border'
 import { useFlexModifier } from '../modifiers/flex'
 import { useFlexWrapperModifier } from '../modifiers/flexWrapper'
 import { useMarginModifier } from '../modifiers/margin'
+import { useMergeThemeComponent } from '../theme/ThemeHandler'
 import { usePaddingModifier } from '../modifiers/padding'
 import { usePositionModifier } from '../modifiers/position'
+import { useShadowModifier } from '../modifiers/shadow'
 import { useSizeModifier } from '../modifiers/size'
 
-export function View({ children, ...props }) {
+export function View({ children, ...rootProps }) {
+  let props = useMergeThemeComponent('View', rootProps)
   props = pipe(
     useSizeModifier, //
     usePositionModifier,
     usePaddingModifier,
     useMarginModifier,
     useFlexWrapperModifier,
-    useFlexModifier
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
   )(props)
 
-  return <AbsView {...props}>{children}</AbsView>
+  return (
+    <AbsView className="neko-view" {...props}>
+      {children}
+    </AbsView>
+  )
 }

package/src/structure/index.js

@@ -1 +1,2 @@
 export * from './View'
+export * from './Card'

package/src/text/Text.js

@@ -0,0 +1,20 @@
+import { pipe } from 'ramda'
+
+import { AbsText } from '../abstractions/Text'
+import { useFlexModifier } from '../modifiers/flex'
+import { useMarginModifier } from '../modifiers/margin'
+import { usePaddingModifier } from '../modifiers/padding'
+import { useSizeModifier } from '../modifiers/size'
+import { useTextModifier } from '../modifiers/text'
+
+export function Text({ children, ...props }) {
+  props = pipe(
+    useSizeModifier, //
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useTextModifier
+  )(props)
+
+  return <AbsText {...props}>{children}</AbsText>
+}

package/src/text/index.js

@@ -0,0 +1 @@
+export * from './Text'

package/src/theme/ThemeHandler.js

@@ -1,10 +1,64 @@
+import { mergeDeepRight } from 'ramda'
 import React from 'react'
 
+import { DEFAULT_LIGHT_THEME } from './default/lightTheme'
+import { DEFAULT_THEMES } from './default/themes'
+import { useFormattedTheme } from './format/formatTheme'
+
 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 useSpaces = () => useTheme().spaces || {}
+const getSpace = (spaces, key) => spaces[key] || key
+export const useGetSpace = () => {
+  const spaces = useSpaces()
+  return (key) => getSpace(spaces, key)
+}
+
+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 useTexts = () => useTheme().texts || {}
+
+export function mergePreset(presets, key, props, defaultKey) {
+  if (!key) return props
+  const preset = presets[key] || presets[defaultKey]
+  return { ...props, ...preset }
+}
+
+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 useThemeComponents = () => useTheme().components || {}
+export function useThemeComponent(name) {
+  const components = useThemeComponents()
+  return components[name] || {}
+}
+export function useMergeThemeComponent(name, props) {
+  const themeProps = useThemeComponent(name)
+  return mergeDeepRight(themeProps, props)
+}
 
-export function ThemeHandler({ themes, children }) {
-  const value = {}
+export function ThemeHandler({ themes, initTheme, children }) {
+  const [activeThemeKey, setActiveThemeKey] = React.useState(initTheme || 'light')
+  const theme = useFormattedTheme(themes, activeThemeKey)
+  const value = { theme, themes, activeThemeKey, setActiveThemeKey }
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
 }

package/src/theme/default/base.js

@@ -0,0 +1,65 @@
+export const BASE_THEME = {
+  spaces: {
+    xxxsm: 1,
+    xxsm: 3,
+    xsm: 5,
+    sm: 10,
+    md: 15,
+    lg: 20,
+    xlg: 30,
+    xxlg: 40,
+    xxxlg: 50,
+  },
+
+  radius: {
+    xxxsm: 4,
+    xxsm: 5,
+    xsm: 5,
+    sm: 7,
+    md: 8,
+    lg: 10,
+    xlg: 12,
+    xxlg: 15,
+    xxxlg: 18,
+  },
+
+  // Buttons, inputs, tags
+  elementHeights: {
+    xsm: 20,
+    sm: 30,
+    md: 35,
+    lg: 50,
+    xlg: 60,
+  },
+
+  texts: {
+    h1: {
+      fontSize: 32,
+      strong: true,
+    },
+    h2: {
+      fontSize: 26,
+      strong: true,
+    },
+    h3: {
+      fontSize: 22,
+      strong: true,
+    },
+    h4: {
+      fontSize: 18,
+      strong: true,
+    },
+    h5: {
+      fontSize: 16,
+      strong: true,
+    },
+    h6: {
+      fontSize: 14,
+      strong: true,
+    },
+    p: { fontSize: 14 },
+    sm: { fontSize: 12 },
+    xsm: { fontSize: 10 },
+    xxsm: { fontSize: 8 },
+  },
+}