@neko-os/ui 0.0.7 → 0.0.9

package/src/components/theme/ThemeThumb.js

@@ -0,0 +1,98 @@
+import { View } from '../structure'
+import { useFormattedTheme } from '../../theme/format/formatTheme'
+import { useResponsiveValue } from '../../responsive'
+import { useThemeHandler } from '../../theme'
+
+export function ThemeThumb({ value }) {
+  const { themes } = useThemeHandler()
+  const { colors, label } = useFormattedTheme(themes, value)
+  const isMobile = useResponsiveValue({ smd: true, df: false })
+
+  if (isMobile) {
+    return (
+      <View centerH>
+        <View
+          bg={colors.mainBG}
+          height={175}
+          fullW
+          br="md"
+          hiddenOverflow
+          border={2}
+          brColor={colors.divider}
+          maxWidth={100}
+        >
+          <View bg={colors.overlayBG} height={25} padding={8} row borderB brColor={colors.divider}>
+            <View width={25} fullH bg={colors.primary} br="xxs" />
+            <View flex />
+            <View ratio={1} fullH bg={colors.divider} round />
+          </View>
+
+          <View flex padding={6}>
+            <View br="md" bg={colors.overlayBG} flex gap={8} padding={8} border brColor={colors.divider}>
+              <View bg={colors.text2} height={4} br="xxs" />
+              <View bg={colors.text4} height={2} br="xxs" />
+              <View bg={colors.text4} height={2} br="xxs" />
+              <View bg={colors.text4} height={2} br="xxs" />
+              <View bg={colors.text4} height={2} br="xxs" />
+              <View bg={colors.text4} height={2} br="xxs" />
+
+              <View flex />
+
+              <View height={6} fullW bg={colors.primary} br="xxs" />
+            </View>
+          </View>
+
+          <View
+            bg={colors.overlayBG}
+            height={25}
+            padding={8}
+            row
+            borderT
+            brColor={colors.divider}
+            justify="space-around"
+            centerV
+          >
+            <View ratio={1} fullH bg={colors.divider} round />
+            <View ratio={1} fullH bg={colors.divider} round />
+            <View ratio={1} fullH bg={colors.divider} round />
+            <View ratio={1} fullH bg={colors.divider} round />
+            <View ratio={1} fullH bg={colors.divider} round />
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View bg={colors.mainBG} height={175} fullW br="md" hiddenOverflow border={2} brColor={colors.divider}>
+      <View bg={colors.overlayBG} height={25} paddingV={8} paddingH={12} row borderB brColor={colors.divider}>
+        <View width={25} bg={colors.primary} br="xxs" />
+        <View flex />
+        <View ratio={1} fullH bg={colors.text4} round />
+      </View>
+
+      <View row padding={12} paddingT={8} gap={6} flex>
+        <View br="xs" bg={colors.overlayBG} flex gap={6} padding={7} border brColor={colors.divider}>
+          <View bg={colors.text4} height={2} br="xxs" />
+          <View bg={colors.text4} height={2} br="xxs" />
+          <View bg={colors.text4} height={2} br="xxs" />
+          <View bg={colors.text4} height={2} br="xxs" />
+          <View bg={colors.text4} height={2} br="xxs" />
+        </View>
+        <View br="xs" bg={colors.overlayBG} flex={4} gap={8} padding={7} border brColor={colors.divider}>
+          <View bg={colors.text2} height={4} br="xxs" width={30} />
+          <View bg={colors.text4} height={2} br="xxs" width={'80%'} />
+          <View bg={colors.text4} height={2} br="xxs" width={'80%'} />
+          <View bg={colors.text4} height={2} br="xxs" width={'80%'} />
+          <View bg={colors.text4} height={2} br="xxs" width={'80%'} />
+          <View bg={colors.text4} height={2} br="xxs" width={'80%'} />
+          <View flex />
+          <View row toRight gap={6}>
+            <View width={25} height={8} bg={colors.text4} br="xxs" />
+            <View width={25} height={8} bg={colors.primary} br="xxs" />
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}

package/src/components/theme/index.js

@@ -0,0 +1,3 @@
+export * from './ThemePicker'
+export * from './ThemePickerDrawer'
+export * from './ThemeStatusBar'

package/src/helpers/index.js

@@ -1,3 +1,4 @@
 export * from './debounce'
 export * from './string'
 export * from './random'
+export * from './storage'

package/src/helpers/storage.js

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import { AbsStorage } from '../abstractions/helpers/storage'
+
+function set(key, value) {
+  return AbsStorage.set(key, JSON.stringify(value))
+}
+
+function setAsync(key, value) {
+  return AbsStorage.setAsync(key, JSON.stringify(value))
+}
+
+function get(key) {
+  const value = AbsStorage.get(key)
+  return formatStoragedValue(value)
+}
+
+function getAsync(key) {
+  return AbsStorage.setAsync(key).then((value) => {
+    return formatStoragedValue(value)
+  })
+}
+
+function formatStoragedValue(value) {
+  try {
+    if (!value) return value
+    value = JSON.parse(value)
+    if (value === 'undefined') return undefined
+    if (value === 'null') return undefined
+    return value
+  } catch (e) {
+    return value
+  }
+}
+
+function useState(key, defaultValue) {
+  const [value, setValue] = React.useState(get(key) || defaultValue)
+
+  const handleChange = (newValue) => {
+    set(key, newValue)
+    setValue(newValue)
+  }
+
+  return [value, handleChange]
+}
+
+export const Storage = {
+  ...AbsStorage,
+  set,
+  setAsync,
+  get,
+  getAsync,
+  useState,
+}

package/src/modifiers/animations/animatedEffects.js

@@ -3,6 +3,7 @@ import React from 'react'
 
 import { useApplyStyles } from '../applyStyles'
 import { useFadeEffect } from './fadeEffect'
+import { useScaleEffect } from './scaleEffect'
 import { useSlideEffect } from './slideEffect'
 
 export function useAnimatedEffects([values, { open, onClose, lazy = false, unmountOnClose = false, ...props }]) {
@@ -41,6 +42,7 @@ export function useAnimatedEffects([values, { open, onClose, lazy = false, unmou
   return pipe(
     useFadeEffect, //
     useSlideEffect,
+    useScaleEffect,
     useApplyStyles({ transition: transitions.join(',') })
   )([
     {

package/src/modifiers/animations/animatedEffects.native.js

@@ -3,6 +3,7 @@ import { useSharedValue } from 'react-native-reanimated'
 import React from 'react'
 
 import { useFadeEffect } from './fadeEffect'
+import { useScaleEffect } from './scaleEffect'
 import { useSlideEffect } from './slideEffect'
 
 export function useAnimatedEffects([values, { open = true, onClose, lazy = false, unmountOnClose = false, ...props }]) {
@@ -32,7 +33,8 @@ export function useAnimatedEffects([values, { open = true, onClose, lazy = false
 
   return pipe(
     useFadeEffect, //
-    useSlideEffect
+    useSlideEffect,
+    useScaleEffect
   )([
     {
       ...values,

package/src/modifiers/animations/fadeEffect.js

@@ -16,10 +16,12 @@ export function useFadeEffect([values, { fade, ...props }]) {
     if (!fade) return
 
     if (open) {
-      // setOpacity(0)
+      setOpacity(0)
 
       requestAnimationFrame(() => {
-        setOpacity(1)
+        requestAnimationFrame(() => {
+          setOpacity(1)
+        })
       })
     } else {
       setOpacity(0)

package/src/modifiers/animations/scaleEffect.js

@@ -0,0 +1,45 @@
+import React from 'react'
+
+const DEFAULT_EFFECT = { duration: 300, initialScale: 0 }
+
+export function useScaleEffect([values, { scale, ...props }]) {
+  if (scale === true) scale = DEFAULT_EFFECT
+  if (!!scale) scale = { ...DEFAULT_EFFECT, ...scale }
+  const { duration, initialScale } = scale || {}
+  const { open, useRegisterEffect, useAddTransition } = values
+  const [transform, setTransform] = React.useState(`scale(${initialScale})`)
+
+  useRegisterEffect(scale)
+  useAddTransition(scale, `transform ${duration}ms ease-in-out`)
+
+  React.useEffect(() => {
+    if (!scale) return
+
+    if (open) {
+      setTransform(`scale(${initialScale})`)
+
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setTransform('scale(1)')
+        })
+      })
+    } else {
+      setTransform(`scale(${initialScale})`)
+    }
+  }, [open])
+
+  if (!scale) return [values, props]
+
+  const style = { transform }
+
+  return [
+    values,
+    {
+      ...props,
+      style: {
+        ...props.style,
+        ...style,
+      },
+    },
+  ]
+}

package/src/modifiers/animations/scaleEffect.native.js

@@ -0,0 +1,33 @@
+import { useSharedValue, withTiming, useAnimatedStyle } from 'react-native-reanimated'
+import React from 'react'
+
+const DEFAULT_EFFECT = { duration: 300, initialScale: 0 }
+
+export function useScaleEffect([values, { scale, ...props }]) {
+  if (scale === true) scale = DEFAULT_EFFECT
+  if (!!scale) scale = { ...DEFAULT_EFFECT, ...scale }
+  const { duration, initialScale } = scale || {}
+  const { open, useRegisterEffect } = values
+  const scaleValue = useSharedValue(initialScale)
+
+  useRegisterEffect(scale)
+
+  React.useEffect(() => {
+    if (!scale) return
+
+    if (open) {
+      scaleValue.value = initialScale
+      scaleValue.value = withTiming(1, { duration })
+    } else {
+      scaleValue.value = withTiming(initialScale, { duration })
+    }
+  }, [open])
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return { transform: [{ scale: scaleValue.value }] }
+  })
+
+  if (!scale) return [values, props]
+
+  return [values, { ...props, animatedStyles: [...props.animatedStyles, animatedStyle] }]
+}

package/src/modifiers/animations/slideEffect.js

@@ -37,7 +37,9 @@ export function useSlideEffect([values, { slide, ...props }]) {
       setTransform(initialValue)
 
       requestAnimationFrame(() => {
-        setTransform('translateY(0)')
+        requestAnimationFrame(() => {
+          setTransform('translateY(0)')
+        })
       })
     } else {
       setTransform(initialValue)

package/src/modifiers/background.js

@@ -1,16 +1,28 @@
+import { is } from 'ramda'
+
 import { clearProps } from './_helpers'
 import { useGetColor } from '../theme/ThemeHandler'
 
 export function useBackgroundModifier([values, props]) {
   const getColor = useGetColor()
-  let { bg, background, backgroundColor, ...restProps } = props
+  let { bg, colors, background, backgroundColor, ...restProps } = props
+  let gradientColors = []
+
+  if (is(Array, bg) || !!colors?.length) {
+    colors = colors || bg || []
+    gradientColors = colors.map(getColor)
+    const angle = restProps.angle || 45
+    background = `linear-gradient(${angle}deg, ${gradientColors.join(', ')})`
+  } else {
+    backgroundColor = getColor(bg ?? background ?? backgroundColor)
+  }
 
-  backgroundColor = getColor(bg ?? background ?? backgroundColor)
+  const pointerEvents = props.pointerEvents
 
-  const style = clearProps({ backgroundColor })
+  const style = clearProps({ background, backgroundColor, pointerEvents })
 
   return [
-    values,
+    { gradientColors, ...values },
     {
       ...restProps,
       style: {

package/src/modifiers/cursor.js

@@ -0,0 +1,21 @@
+import { clearProps } from './_helpers'
+
+export function useCursorModifier([values, props]) {
+  let { pointer, cursor, move, ...restProps } = props
+
+  if (pointer === true) cursor = 'pointer'
+  if (move === true) cursor = 'move'
+
+  const style = clearProps({ cursor })
+
+  return [
+    values,
+    {
+      ...restProps,
+      style: {
+        ...props.style,
+        ...style,
+      },
+    },
+  ]
+}

package/src/modifiers/display.js

@@ -1,13 +1,13 @@
 import { clearProps } from './_helpers'
 
 export function useDisplayModifier([values, props]) {
-  let { cursor, opacity, hidden, display, inline, block, ...restProps } = props
+  let { opacity, hidden, display, inline, block, ...restProps } = props
 
   if (!!hidden) display = 'hidden'
   if (!!inline) display = 'inline'
   if (!!block) display = 'block'
 
-  const style = clearProps({ display, opacity, cursor })
+  const style = clearProps({ display, opacity })
 
   return [
     values,

package/src/modifiers/fullColor.js

@@ -3,7 +3,7 @@ import tinycolor from 'tinycolor2'
 import { getContrastColor } from '../theme/helpers/contrastColor'
 import { useGetColor } from '../theme/ThemeHandler'
 
-export function useFullColorModifier([{ color, ...values }, { outline, fill, ...props }]) {
+export function useFullColorModifier([{ color, ...values }, { outline, contrastTolerance, fill, ...props }]) {
   const getColor = useGetColor()
 
   let bg = color
@@ -15,7 +15,7 @@ export function useFullColorModifier([{ color, ...values }, { outline, fill, ...
     bg = 'transparent'
     fontColor = color
   } else {
-    fontColor = getContrastColor(bgObj, [getColor('text'), getColor('overlayBG')])
+    fontColor = getContrastColor(bgObj, [getColor('overlayBG'), getColor('text')], contrastTolerance)
   }
 
   return [

package/src/modifiers/hover.js

@@ -0,0 +1,28 @@
+import React from 'react'
+
+export function useHoverConverter([values, props]) {
+  const [isHover, setIsHover] = React.useState(false)
+  let { hover, onMouseEnter, onMouseLeave, ...restProps } = props
+
+  const handleMouseEnter = () => {
+    setIsHover(true)
+    onMouseEnter?.()
+  }
+
+  const handleMouseLeave = () => {
+    setIsHover(false)
+    onMouseLeave?.()
+  }
+
+  if (!isHover) hover = {}
+
+  return [
+    { ...values, isHover },
+    {
+      ...restProps,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ...hover,
+    },
+  ]
+}

package/src/modifiers/position.js

@@ -2,14 +2,35 @@ import { Platform } from '../abstractions/Platform'
 import { clearProps } from './_helpers'
 
 export function usePositionModifier([values, props]) {
-  let { position, absolute, relative, fixed, sticky, top, bottom, left, right, zIndex, ...restProps } = props
+  let {
+    position,
+    absolute,
+    absoluteFill,
+    fixedFill,
+    relative,
+    fixed,
+    sticky,
+    top,
+    bottom,
+    left,
+    right,
+    zIndex,
+    ...restProps
+  } = props
 
   if (!zIndex && !!absolute) zIndex = 10
-  if (absolute) position = 'absolute'
+  if (absolute || absoluteFill) position = 'absolute'
   if (relative) position = 'relative'
-  if (fixed) position = 'fixed'
+  if (fixed || fixedFill) position = 'fixed'
   if (sticky) position = 'sticky'
 
+  if (absoluteFill || fixedFill) {
+    top = 0
+    bottom = 0
+    left = 0
+    right = 0
+  }
+
   if (Platform.OS !== 'web' && ['fixed', 'sticky'].includes(position)) {
     position = 'absolute'
   }

package/src/modifiers/size.js

@@ -1,3 +1,4 @@
+import { Platform } from '../abstractions/Platform'
 import { clearProps } from './_helpers'
 import { useGetElementHeight } from '../theme/ThemeHandler'
 
@@ -38,7 +39,7 @@ export function useSizeModifier([values, props]) {
   if (span) width = (span / 24) * 100 + '%'
 
   if (fullWidth || fullW) width = '100%'
-  if (fullHeight || fullH) height = '100%'
+  if ((fullHeight || fullH) && Platform.OS === 'web') height = '100%'
 
   let aspectRatio = ratio
   if (!!square) aspectRatio = 1

package/src/modifiers/state.js

@@ -3,7 +3,7 @@ import { clearProps } from './_helpers'
 export function useStateModifier([values, props]) {
   let { disabled, loading, onClick, onPress, onChange, ...restProps } = props
 
-  let cursor = props.style
+  let cursor = undefined
   let opacity = props.opacity
 
   if (!!disabled) {

package/src/responsive/responsiveHooks.js

@@ -1,6 +1,7 @@
 import { is } from 'ramda'
 import React from 'react'
 
+import { Platform } from '../abstractions/Platform'
 import { useBreakpoints } from '../theme/ThemeHandler'
 import { useResponsive } from '../responsive/ResponsiveHandler'
 
@@ -10,6 +11,12 @@ export function useGetResponsiveValue() {
 
   return React.useCallback(
     (value) => {
+      const isNative = value?.native !== undefined && Platform.OS !== 'web'
+      if (isNative) return value?.native
+
+      const isWeb = value?.web !== undefined && Platform.OS === 'web'
+      if (isWeb) return value?.web
+
       const isObj = is(Object, value)
 
       if (!isObj) return value

package/src/theme/ThemeHandler.js

@@ -53,10 +53,26 @@ export function useMergeThemeComponent(name, props) {
   return mergeDeepRight(themeProps, props)
 }
 
-export function ThemeHandler({ breakpoints, themes, initTheme, children }) {
+export function ThemeHandler({ breakpoints, themes, initTheme, onChangeTheme, children }) {
+  const [themePickerOpen, setThemePickerOpen] = React.useState(false)
+  const openThemePicker = () => setThemePickerOpen(true)
   const [activeThemeKey, setActiveThemeKey] = React.useState(initTheme || 'light')
+  const toggleTheme = () => setActiveThemeKey(activeThemeKey === 'light' ? 'dark' : 'light')
   const theme = useFormattedTheme(themes, activeThemeKey)
-  const value = { theme, themes, activeThemeKey, setActiveThemeKey, breakpoints: breakpoints || DEFAULT_BREAKPOINTS }
+
+  const value = {
+    theme,
+    themes,
+    activeThemeKey,
+    setActiveThemeKey,
+    toggleTheme,
+    themePickerOpen,
+    setThemePickerOpen,
+    onChangeTheme,
+    openThemePicker,
+    toggleTheme,
+    breakpoints: breakpoints || DEFAULT_BREAKPOINTS,
+  }
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
 }

package/src/theme/default/base.js

@@ -46,27 +46,27 @@ export const BASE_THEME = {
 
   texts: {
     h1: {
-      fontSize: 32,
+      fontSize: 35,
       strong: true,
     },
     h2: {
-      fontSize: 26,
+      fontSize: 28,
       strong: true,
     },
     h3: {
-      fontSize: 22,
+      fontSize: 26,
       strong: true,
     },
     h4: {
-      fontSize: 18,
+      fontSize: 22,
       strong: true,
     },
     h5: {
-      fontSize: 16,
+      fontSize: 18,
       strong: true,
     },
     h6: {
-      fontSize: 14,
+      fontSize: 16,
       strong: true,
     },
     p: { fontSize: 14 },

package/src/theme/default/blackTheme.js

@@ -0,0 +1,35 @@
+import { mergeDeepRight } from 'ramda'
+
+import { BASE_THEME } from './base'
+
+export const DEFAULT_BLACK_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Pitch Black',
+
+  colors: {
+    primary: '#818DF9',
+    text: '#FFFFFF',
+    text2: '#E0E0E0',
+    text3: '#B0B0B0',
+    text4: '#8A8A8A',
+
+    mainBG: '#0f0f0f',
+    overlayBG: '#000000',
+    backdrop: '#1f1f1f',
+    shadow: 'rgba(216, 210, 203, 0.1)',
+    divider: '#383E44',
+
+    blue: '#4DA3FF',
+    yellow: '#FFD93B',
+    green: '#4CAF50',
+    purple: '#9B59B6',
+    orange: '#FF7F50',
+    cyan: '#00BCD4',
+    red: '#E74C3C',
+    navy: '#34495E',
+    indigo: '#5C6BC0',
+    gray: '#9E9E9E',
+    brown: '#8D6E63',
+    lylac: '#B39DDB',
+    pink: '#F48FB1',
+  },
+})

package/src/theme/default/cyberpunkTheme.js

@@ -2,6 +2,8 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const CYBERPUNK_DARK_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Cyberpunk',
+
   colors: {
     primary: '#FCEE09',
     text: '#FFFFFF',
@@ -9,8 +11,9 @@ export const CYBERPUNK_DARK_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#8C8C8C',
     text4: '#666666',
 
-    bg: '#0A0A0F',
+    mainBG: '#14141F',
     overlayBG: '#14141F',
+    backdrop: '#0A0A0F',
     shadow: 'rgba(39, 45, 52, 0.6)',
     divider: 'rgba(255,255,255, 0.2)',
 

package/src/theme/default/darkTheme.js

@@ -2,6 +2,8 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const DEFAULT_DARK_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Dark',
+
   colors: {
     primary: '#818DF9',
     text: '#FFFFFF',
@@ -9,8 +11,9 @@ export const DEFAULT_DARK_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#B0B0B0',
     text4: '#8A8A8A',
 
-    bg: '#383E44',
+    mainBG: '#383E44',
     overlayBG: '#272D34',
+    backdrop: '#383E44',
     shadow: 'rgba(216, 210, 203, 0.1)',
     divider: '#383E44',
 

package/src/theme/default/deepWoodsTheme.js

@@ -2,15 +2,18 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const DEEP_WOODS_DARK_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Deep Woods',
+
   colors: {
     primary: '#4CAF50',
-    text: '#F0F8F2',
+    text: '#C8E6C9',
     text2: '#C8E6C9',
     text3: '#A5D6A7',
     text4: '#81C784',
 
-    bg: '#0D1B14',
+    mainBG: '#0D1B14',
     overlayBG: '#16281F',
+    backdrop: '#0D1B14',
     shadow: 'rgba(39, 45, 52, 0.6)',
     divider: 'rgba(255,255,255, 0.2)',