@neko-os/ui 0.4.0 → 0.5.0

package/src/components/keyboard/index.js

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

package/src/components/modals/bottomDrawer/native/BottomDrawer.js

@@ -4,6 +4,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
+  useAnimatedKeyboard,
+  KeyboardState,
   withSpring,
   runOnJS,
 } from 'react-native-reanimated'
@@ -27,6 +29,7 @@ function InnerContent({
   enableOverScroll = true,
   enableHandlePanningGesture = true,
   enableContentPanningGesture = true,
+  keyboardBehavior = 'interactive',
   animationConfig = {
     damping: 50,
     stiffness: 500,
@@ -44,6 +47,7 @@ function InnerContent({
   const bottomInset = useSafeArea ? insets.bottom : 0
 
   const colors = useColors()
+  const keyboard = useAnimatedKeyboard()
 
   const translateY = useSharedValue(SCREEN_HEIGHT)
   const snapIndex = useSharedValue(0)
@@ -122,11 +126,9 @@ function InnerContent({
         const currentPosition = SCREEN_HEIGHT - translateY.value
         const shouldClose =
           !!handleClose &&
-          (
-            velocityY.value > 1500 ||
+          (velocityY.value > 1500 ||
             (velocityY.value > 800 && currentPosition < minSnapPoint) ||
-            currentPosition < minSnapPoint * 0.35
-          )
+            currentPosition < minSnapPoint * 0.35)
 
         if (shouldClose) {
           runOnJS(handleClose)()
@@ -148,10 +150,28 @@ function InnerContent({
     handleClose,
   ])
 
+  const topInset = insets.top
   const animatedSheetStyle = useAnimatedStyle(() => {
-    const currentHeight = SCREEN_HEIGHT - translateY.value
+    let kbShift = 0
+
+    const kbVisible = keyboard.state.value === KeyboardState.OPEN || keyboard.state.value === KeyboardState.OPENING
+    if (keyboardBehavior !== 'none' && kbVisible) {
+      const kbHeight = keyboard.height.value
+
+      if (keyboardBehavior === 'interactive') {
+        // Shift up by keyboard height, but don't go above safe area
+        const maxShift = Math.max(0, translateY.value - topInset)
+        kbShift = Math.min(kbHeight, maxShift)
+      } else if (keyboardBehavior === 'extend') {
+        // Snap to fill available space above keyboard
+        kbShift = Math.max(0, translateY.value - topInset)
+      }
+    }
+
+    const adjustedY = translateY.value - kbShift
+    const currentHeight = SCREEN_HEIGHT - adjustedY
     return {
-      transform: [{ translateY: translateY.value }],
+      transform: [{ translateY: adjustedY }],
       maxHeight: currentHeight,
     }
   })
@@ -200,6 +220,7 @@ function InnerContent({
               marginR="auto"
               fullW
               {...props}
+              minH={minSnapPoint}
             >
               <DrawerHandle hide={hideHandle} />
               <View flex {...contentProps}>

package/src/components/presentation/LabelValue.js

@@ -18,7 +18,7 @@ const DEFAULT_PROPS = ([{ sizeCode, color }, { vertical, spread }]) => {
     labelProps: {
       size: moveScale(sizeCode, !vertical ? 0 : -2),
       moveIconSizeScale: !vertical ? -1 : -2,
-      color: color || 'text3',
+      color: color || 'text2',
     },
     valueProps: {
       size: sizeCode,

package/src/components/presentation/Result.js

@@ -2,6 +2,7 @@ import { Divider } from '../helpers/Separator'
 import { Icon } from './Icon'
 import { Text } from '../text/Text'
 import { View } from '../structure/View'
+import { useResponsiveValue } from '../../responsive'
 
 export const RESULT_TYPES = {
   error: {
@@ -23,6 +24,12 @@ export const RESULT_TYPES = {
     icon: 'information-2-fill',
     color: 'blue',
   },
+
+  empty: {
+    icon: 'inbox-line',
+    color: 'text4',
+    opacity: 0.7,
+  },
 }
 
 export function Result({
@@ -41,12 +48,13 @@ export function Result({
   const typeProps = RESULT_TYPES[type] || {}
   icon = icon || typeProps.icon
   iconColor = iconColor || typeProps.color || 'primary'
+  const size = useResponsiveValue({ lgu: 'h4', df: 'h5' })
 
   return (
-    <View className="neko-result" center padding="lg" {...props}>
+    <View className="neko-result" center padding="lg" opacity={typeProps.opacity} {...props}>
       {!!icon && <Icon name={icon} color={iconColor} size={42} primary {...iconProps} />}
       {!!icon && <Divider height={10} />}
-      <Text h4 center {...textProps} {...titleProps}>
+      <Text size={size} center color="text2" {...textProps} {...titleProps}>
         {title}
       </Text>
       {!!description && (

package/src/components/structure/KeyboardAvoidingView.js

@@ -1,6 +1,7 @@
 import { pipe } from 'ramda'
 
 import { AbsKeyboardAvoidingView } from '../../abstractions/KeyboardAvoidingView'
+import { AbsKeyboardDismissView } from '../../abstractions/KeyboardDismissView'
 import { Platform } from '../../abstractions/Platform'
 import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
 import { useAnimationModifier } from '../../modifiers/animation'
@@ -19,7 +20,7 @@ import { useSizeModifier } from '../../modifiers/size'
 import { useStateModifier } from '../../modifiers/state'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
-export function KeyboardAvoidingView({ children, keyboardVerticalOffset = 0, ...rootProps }) {
+export function KeyboardAvoidingView({ children, keyboardVerticalOffset = 0, dismissOnTap = true, ...rootProps }) {
   const { bottom } = useSafeAreaInsets()
 
   const [_, props] = pipe(
@@ -46,7 +47,13 @@ export function KeyboardAvoidingView({ children, keyboardVerticalOffset = 0, ...
       keyboardVerticalOffset={keyboardVerticalOffset + bottom}
       {...props}
     >
-      {children}
+      {dismissOnTap ? (
+        <AbsKeyboardDismissView style={{ flex: 1 }}>
+          {children}
+        </AbsKeyboardDismissView>
+      ) : (
+        children
+      )}
     </AbsKeyboardAvoidingView>
   )
 }

package/src/components/theme/ThemePicker.js

@@ -1,25 +1,20 @@
-import { mapObjIndexed, mergeDeepRight, values, pipe, filter } from 'ramda'
+import { mapObjIndexed, values, pipe, reject, propEq } from 'ramda'
 
-import { DEFAULT_THEMES, useThemeHandler } from '../../theme'
+import { useAllThemes, useThemeHandler } from '../../theme'
 import { IconLabel } from '../presentation'
 import { Link } from '../actions'
 import { Picker } from '../inputs'
 import { ThemeThumb } from './ThemeThumb'
 
-export function ThemePicker({ onChange, onlyKeys, hideKeys }) {
-  const { activeThemeKey, themes, onChangeTheme } = useThemeHandler()
+export function ThemePicker({ onChange }) {
+  const { activeThemeKey, onChangeTheme } = useThemeHandler()
+  const allThemes = useAllThemes()
 
-  let options = pipe(
-    mergeDeepRight(DEFAULT_THEMES),
+  const options = pipe(
     mapObjIndexed((obj, key) => ({ ...obj, value: key, key })),
     values,
-    filter((item) => {
-      if (item.value === '_all') return false
-      if (onlyKeys && onlyKeys.includes(item.value)) return true
-      if (hideKeys && hideKeys.includes(item.value)) return false
-      return true
-    })
-  )(themes)
+    reject(propEq('_all', 'value'))
+  )(allThemes)
 
   return (
     <Picker

package/src/components/theme/ThemeThumb.js

@@ -4,7 +4,7 @@ import { useResponsiveValue } from '../../responsive'
 import { useThemeHandler } from '../../theme'
 
 export function ThemeThumb({ value }) {
-  const { themes } = useThemeHandler()
+  const { rawThemesParam: themes } = useThemeHandler()
   const { colors, label } = useFormattedTheme(themes, value)
   const isMobile = useResponsiveValue({ smd: true, df: false })
 

package/src/theme/ThemeHandler.js

@@ -1,7 +1,8 @@
-import { mergeDeepRight } from 'ramda'
+import { keys, mergeDeepRight, omit, pick, pickBy } 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'
 
@@ -52,8 +53,33 @@ export function useMergeThemeComponent(name, props) {
   const themeProps = useThemeComponent(name)
   return mergeDeepRight(themeProps, props)
 }
+export function useAllThemes() {
+  const { disableDefaultThemes, enableOnlyThemes, rawThemesParam } = useThemeHandler()
+  const themes = rawThemesParam || {}
+  const themesParamKeys = keys(themes)
 
-export function ThemeHandler({ breakpoints, themes, initTheme, onChangeTheme, children }) {
+  let allThemes = mergeDeepRight(DEFAULT_THEMES, themes)
+  if (disableDefaultThemes === true) {
+    allThemes = pickBy((_, key) => themesParamKeys.includes(key), allThemes)
+  } else if (disableDefaultThemes?.length) {
+    allThemes = omit(disableDefaultThemes, allThemes)
+  }
+  if (enableOnlyThemes?.length) {
+    allThemes = pick(enableOnlyThemes, allThemes)
+  }
+
+  return allThemes
+}
+
+export function ThemeHandler({
+  breakpoints,
+  themes,
+  initTheme,
+  onChangeTheme,
+  children,
+  disableDefaultThemes,
+  enableOnlyThemes,
+}) {
   const [themePickerOpen, setThemePickerOpen] = React.useState(false)
   const openThemePicker = () => setThemePickerOpen(true)
   const [activeThemeKey, setActiveThemeKey] = React.useState(initTheme || 'light')
@@ -66,7 +92,9 @@ export function ThemeHandler({ breakpoints, themes, initTheme, onChangeTheme, ch
 
   const value = {
     theme,
-    themes,
+    rawThemesParam: themes,
+    disableDefaultThemes,
+    enableOnlyThemes,
     activeThemeKey,
     toggleTheme,
     themePickerOpen,