@neko-os/ui 0.0.12 → 0.1.0

package/src/components/structure/bottomDrawer/native/createDrawerScrollComponent.js

@@ -0,0 +1,131 @@
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated, {
+  useSharedValue,
+  useAnimatedScrollHandler,
+  useAnimatedRef,
+  scrollTo,
+  withSpring,
+  runOnJS,
+} from 'react-native-reanimated'
+import React from 'react'
+
+import { findClosestSnapPoint, clamp } from './utils'
+import { useDrawerContext } from './DrawerContext'
+
+export function createDrawerScrollComponent(Component) {
+  const AnimatedComponent = Animated.createAnimatedComponent(Component)
+
+  function DrawerScrollComponent({ ref, onScroll, ...props }) {
+    const {
+      translateY,
+      panRef,
+      normalizedSnapPoints,
+      SCREEN_HEIGHT,
+      maxSnapPoint,
+      minSnapPoint,
+      handleClose,
+      animationConfig,
+      snapIndex,
+    } = useDrawerContext()
+
+    const scrollRef = useAnimatedRef()
+    const scrollOffset = useSharedValue(0)
+    const prevTranslationY = useSharedValue(0)
+    const drawerMoved = useSharedValue(false)
+
+    React.useImperativeHandle(ref, () => scrollRef.current)
+
+    const maxPosition = SCREEN_HEIGHT - maxSnapPoint
+
+    const panGesture = React.useMemo(() => {
+      return Gesture.Pan()
+        .activeOffsetY([-10, 10])
+        .blocksExternalGesture(panRef)
+        .onStart(() => {
+          prevTranslationY.value = 0
+          drawerMoved.value = false
+        })
+        .onUpdate((event) => {
+          const delta = event.translationY - prevTranslationY.value
+          prevTranslationY.value = event.translationY
+
+          const currentY = translateY.value
+          const atMaxSnap = currentY <= maxPosition + 1
+          const atScrollTop = scrollOffset.value <= 0
+
+          if (drawerMoved.value) {
+            const newY = clamp(currentY + delta, maxPosition, SCREEN_HEIGHT)
+            translateY.value = newY
+            scrollTo(scrollRef, 0, 0, false)
+
+            if (newY <= maxPosition + 1 && delta < 0) {
+              drawerMoved.value = false
+            }
+          } else if (!atMaxSnap) {
+            drawerMoved.value = true
+            const newY = clamp(currentY + delta, maxPosition, SCREEN_HEIGHT)
+            translateY.value = newY
+            scrollTo(scrollRef, 0, 0, false)
+          } else if (atScrollTop && delta > 0) {
+            drawerMoved.value = true
+            const newY = clamp(currentY + delta, maxPosition, SCREEN_HEIGHT)
+            translateY.value = newY
+            scrollTo(scrollRef, 0, 0, false)
+          }
+        })
+        .onEnd((event) => {
+          if (!drawerMoved.value) return
+
+          const currentPosition = SCREEN_HEIGHT - translateY.value
+          const velocity = event.velocityY
+
+          const shouldClose =
+            !!handleClose &&
+            (velocity > 1500 ||
+              (velocity > 800 && currentPosition < minSnapPoint) ||
+              currentPosition < minSnapPoint * 0.35)
+
+          if (shouldClose) {
+            runOnJS(handleClose)()
+          } else {
+            const closestSnapIndex = findClosestSnapPoint(currentPosition, normalizedSnapPoints, velocity)
+            const targetSnapPoint = normalizedSnapPoints[closestSnapIndex]
+            translateY.value = withSpring(SCREEN_HEIGHT - targetSnapPoint, animationConfig)
+            snapIndex.value = closestSnapIndex
+          }
+        })
+    }, [panRef, maxPosition, normalizedSnapPoints, minSnapPoint, handleClose, animationConfig])
+
+    const nativeGesture = React.useMemo(() => Gesture.Native(), [])
+
+    const composedGesture = React.useMemo(
+      () => Gesture.Simultaneous(panGesture, nativeGesture),
+      [panGesture, nativeGesture]
+    )
+
+    const animatedScrollHandler = useAnimatedScrollHandler({
+      onScroll: (event) => {
+        scrollOffset.value = event.contentOffset.y
+        if (onScroll) {
+          runOnJS(onScroll)(event)
+        }
+      },
+    })
+
+    return (
+      <GestureDetector gesture={composedGesture}>
+        <AnimatedComponent
+          ref={scrollRef}
+          style={{ flex: 1 }}
+          onScroll={animatedScrollHandler}
+          scrollEventThrottle={16}
+          bounces={false}
+          overScrollMode="never"
+          {...props}
+        />
+      </GestureDetector>
+    )
+  }
+
+  return DrawerScrollComponent
+}

package/src/components/structure/drawer/Drawer.web.js

@@ -0,0 +1,3 @@
+import { BottomDrawer } from '../bottomDrawer/native/BottomDrawer'
+
+export const Drawer = BottomDrawer

package/src/components/structure/index.js

@@ -12,3 +12,5 @@ export * from './drawer'
 export * from './bottomDrawer'
 export * from './popover/Popover'
 export * from './Segment'
+export * from './TopBar'
+export * from './KeyboardAvoidingView'

package/src/components/text/DateText.js

@@ -0,0 +1,11 @@
+import { is } from 'ramda'
+import dayjs from 'dayjs'
+
+import { Text } from '../text'
+
+export function DateText({ format = 'DD MMM YYYY', value, children, ...props }) {
+  value = is(String, children) ? children : value
+  // TODO: Get format from i18n
+
+  return <Text {...props}>{dayjs(value).format(format)}</Text>
+}

package/src/components/text/index.js

@@ -1,2 +1,3 @@
 export * from './Text'
 export * from './VerticalText'
+export * from './DateText'

package/src/components/theme/ThemePicker.js

@@ -7,7 +7,7 @@ import { Picker } from '../inputs'
 import { ThemeThumb } from './ThemeThumb'
 
 export function ThemePicker({ onChange, onlyKeys, hideKeys }) {
-  const { activeThemeKey, setActiveThemeKey, themes, onChangeTheme } = useThemeHandler()
+  const { activeThemeKey, themes, onChangeTheme } = useThemeHandler()
 
   let options = pipe(
     mergeDeepRight(DEFAULT_THEMES),
@@ -27,7 +27,6 @@ export function ThemePicker({ onChange, onlyKeys, hideKeys }) {
       gap="lg"
       value={activeThemeKey}
       onChange={(key) => {
-        setActiveThemeKey(key)
         onChangeTheme?.(key)
         onChange?.(key)
       }}

package/src/helpers/index.js

@@ -2,3 +2,4 @@ export * from './debounce'
 export * from './string'
 export * from './random'
 export * from './storage'
+export * from './../abstractions/helpers/useSafeAreaInsets'

package/src/helpers/storage.js

@@ -2,22 +2,42 @@ import React from 'react'
 
 import { AbsStorage } from '../abstractions/helpers/storage'
 
+// Pub/Sub listener registry for cross-component sync
+const listeners = {}
+
+function notify(key, value) {
+  if (listeners[key]) {
+    listeners[key].forEach((cb) => cb(value))
+  }
+}
+
+function subscribe(key, cb) {
+  if (!listeners[key]) listeners[key] = []
+  listeners[key].push(cb)
+  return () => {
+    listeners[key] = listeners[key].filter((fn) => fn !== cb)
+  }
+}
+
 function set(key, value) {
-  return AbsStorage.set(key, JSON.stringify(value))
+  AbsStorage.set(key, JSON.stringify(value))
+  notify(key, value)
 }
 
 function setAsync(key, value) {
-  return AbsStorage.setAsync(key, JSON.stringify(value))
+  return AbsStorage.setAsync(key, JSON.stringify(value)).then(() => {
+    notify(key, value)
+  })
 }
 
-function get(key) {
+function get(key, defaultValue) {
   const value = AbsStorage.get(key)
-  return formatStoragedValue(value)
+  return formatStoragedValue(value) ?? defaultValue
 }
 
-function getAsync(key) {
-  return AbsStorage.setAsync(key).then((value) => {
-    return formatStoragedValue(value)
+function getAsync(key, defaultValue) {
+  return AbsStorage.getAsync(key).then((value) => {
+    return formatStoragedValue(value) ?? defaultValue
   })
 }
 
@@ -34,11 +54,14 @@ function formatStoragedValue(value) {
 }
 
 function useState(key, defaultValue) {
-  const [value, setValue] = React.useState(get(key) || defaultValue)
+  const [value, setValue] = React.useState(() => get(key) ?? defaultValue)
+
+  React.useEffect(() => {
+    return subscribe(key, setValue)
+  }, [key])
 
   const handleChange = (newValue) => {
     set(key, newValue)
-    setValue(newValue)
   }
 
   return [value, handleChange]

package/src/responsive/responsiveHooks.js

@@ -17,6 +17,12 @@ export function useGetResponsiveValue() {
       const isWeb = value?.web !== undefined && Platform.OS === 'web'
       if (isWeb) return value?.web
 
+      const isIOS = value?.ios !== undefined && Platform.OS === 'ios'
+      if (isIOS) return value?.ios
+
+      const isAndroid = value?.android !== undefined && Platform.OS === 'android'
+      if (isAndroid) return value?.android
+
       const isObj = is(Object, value)
 
       if (!isObj) return value

package/src/theme/ThemeHandler.js

@@ -57,18 +57,21 @@ export function ThemeHandler({ breakpoints, themes, initTheme, onChangeTheme, ch
   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 handleChangeTheme = (key) => {
+    setActiveThemeKey(key)
+    onChangeTheme?.(key)
+  }
+  const toggleTheme = () => handleChangeTheme(activeThemeKey === 'light' ? 'dark' : 'light')
   const theme = useFormattedTheme(themes, activeThemeKey)
 
   const value = {
     theme,
     themes,
     activeThemeKey,
-    setActiveThemeKey,
     toggleTheme,
     themePickerOpen,
     setThemePickerOpen,
-    onChangeTheme,
+    onChangeTheme: handleChangeTheme,
     openThemePicker,
     toggleTheme,
     breakpoints: breakpoints || DEFAULT_BREAKPOINTS,

package/src/theme/default/base.js

@@ -36,13 +36,25 @@ export const BASE_THEME = {
   },
 
   // Buttons, inputs, etc.
+  // elementHeights: {
+  // xxxs: 10,
+  // xxs: 15,
+  // xs: 20,
+  // sm: 30,
+  // md: 35,
+  // lg: 40,
+  // xl: 50,
+  // xxl: 60,
+  // xxxl: 70,
+  // },
+
   elementHeights: {
     xxxs: 10,
     xxs: 15,
-    xs: 20,
-    sm: 30,
-    md: 35,
-    lg: 40,
+    xs: 25,
+    sm: 35,
+    md: 40,
+    lg: 45,
     xl: 50,
     xxl: 60,
     xxxl: 70,

package/src/theme/default/blackTheme.js

@@ -16,6 +16,7 @@ export const DEFAULT_BLACK_THEME = mergeDeepRight(BASE_THEME, {
     overlayBG: '#000000',
     backdrop: '#1f1f1f',
     shadow: 'rgba(216, 210, 203, 0.1)',
+    transparent: 'rgba(0, 0, 0, 0)',
     divider: '#383E44',
 
     blue: '#4DA3FF',

package/src/theme/default/cyberpunkTheme.js

@@ -31,4 +31,14 @@ export const CYBERPUNK_DARK_THEME = mergeDeepRight(BASE_THEME, {
     lylac: '#B388FF',
     pink: '#FF80AB',
   },
+
+  components: {
+    Card: {
+      border: true,
+    },
+
+    Section: {
+      border: true,
+    },
+  },
 })

package/src/theme/default/darkTheme.js

@@ -15,6 +15,7 @@ export const DEFAULT_DARK_THEME = mergeDeepRight(BASE_THEME, {
     overlayBG: '#272D34',
     backdrop: '#383E44',
     shadow: 'rgba(216, 210, 203, 0.1)',
+    transparent: 'rgba(0, 0, 0, 0)',
     divider: '#383E44',
 
     blue: '#4DA3FF',

package/src/theme/default/hackerTheme.js

@@ -33,11 +33,25 @@ export const DEFAULT_MATRIX_THEME = mergeDeepRight(BASE_THEME, {
     pink: '#C51162',
   },
 
+  radius: {
+    xxxs: 0,
+    xxs: 1,
+    xs: 2,
+    sm: 3,
+    md: 4,
+    lg: 5,
+    xl: 6,
+    xxl: 7,
+    xxxl: 8,
+  },
+
   components: {
     Card: {
-      border: 1,
-      br: 5,
-      borderColor: 'divider',
+      border: true,
+    },
+
+    Section: {
+      border: true,
     },
   },
 })

package/src/theme/default/lightTheme.js

@@ -15,6 +15,7 @@ export const DEFAULT_LIGHT_THEME = mergeDeepRight(BASE_THEME, {
     overlayBG: '#FFFFFF',
     backdrop: '#383E44',
     shadow: 'rgba(39, 45, 52, 0.15)',
+    transparent: 'rgba(255, 255, 255, 0)',
     divider: '#e0e0e0',
 
     blue: '#4DA3FF',

package/src/theme/default/msdosTheme.js

@@ -34,21 +34,20 @@ export const DEFAULT_MSDOS_THEME = mergeDeepRight(BASE_THEME, {
   },
 
   radius: {
-    xxxs: 1,
-    xxs: 2,
-    xs: 3,
-    sm: 4,
-    md: 6,
-    lg: 8,
-    xl: 10,
-    xxl: 12,
-    xxxl: 14,
+    xxxs: 0,
+    xxs: 1,
+    xs: 2,
+    sm: 3,
+    md: 4,
+    lg: 5,
+    xl: 6,
+    xxl: 7,
+    xxxl: 8,
   },
 
   components: {
     Card: {
       border: 1,
-      br: 5,
       borderColor: 'divider',
     },
   },

package/src/theme/default/paperTheme.js

@@ -32,4 +32,14 @@ export const DEFAULT_PAPER_THEME = mergeDeepRight(BASE_THEME, {
     lylac: '#C7B7D4',
     pink: '#E4A1B2',
   },
+
+  components: {
+    Card: {
+      border: true,
+    },
+
+    Section: {
+      border: true,
+    },
+  },
 })