@neko-os/ui 0.0.8 → 0.0.9

package/src/abstractions/BlurView.web.js

@@ -0,0 +1,39 @@
+import { AbsView } from './View'
+
+let AbsBlurView
+
+try {
+  const { BlurView } = require('expo-blur') || {}
+  AbsBlurView = ({ intensity, tint, disabledForAndroid, style, children, ...props }) => {
+    return (
+      <BlurView
+        intensity={intensity}
+        tint={tint}
+        style={[style, { overflow: 'hidden' }]}
+        experimentalBlurMethod={disabledForAndroid ? 'none' : 'dimezisBlurView'}
+      >
+        {children}
+      </BlurView>
+    )
+
+    // return (
+    // <AbsView style={[style, { overflow: 'hidden' }]} {...props}>
+    // <BlurView
+    // intensity={intensity}
+    // tint={tint}
+    // style={[style, { width: '100%' }]}
+    // experimentalBlurMethod={disabledForAndroid ? 'none' : 'dimezisBlurView'}
+    // >
+    // {children}
+    // </BlurView>
+    // </AbsView>
+    // )
+  }
+} catch {
+  AbsBlurView = (props) => {
+    console.warn('expo-blur not instaled.')
+    return <AbsView {...props} />
+  }
+}
+
+export { AbsBlurView }

package/src/abstractions/FlatList.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { AbsView } from './View'
+
+const defaultRender = () => false
+
+export function AbsFlatList({
+  data,
+  renderItem,
+  ListEmptyComponent,
+  Empty,
+  renderEmpty,
+  ListFooterComponent,
+  Footer,
+  renderFooter,
+  ListHeaderComponent,
+  Header,
+  renderHeader,
+  keyExtractor,
+  ...props
+}) {
+  ListEmptyComponent = ListEmptyComponent || Empty || defaultRender
+  ListFooterComponent = ListFooterComponent || Footer || renderFooter || defaultRender
+  ListHeaderComponent = ListHeaderComponent || Header || renderHeader || defaultRender
+  keyExtractor = keyExtractor || ((item, index) => index)
+  renderItem = renderItem || defaultRender
+
+  return (
+    <AbsView {...props}>
+      <ListHeaderComponent />
+
+      {!data?.length && <ListEmptyComponent />}
+      {data?.map?.((item, index) => (
+        <React.Fragment key={keyExtractor(item, index)}>{renderItem({ item, index })}</React.Fragment>
+      ))}
+
+      <ListFooterComponent />
+    </AbsView>
+  )
+}

package/src/abstractions/FlatList.native.js

@@ -0,0 +1,32 @@
+import { FlatList } from 'react-native'
+
+export const AbsFlatList = ({
+  style: { height, width, ...style },
+  ListEmptyComponent,
+  Empty,
+  renderEmpty,
+  ListFooterComponent,
+  Footer,
+  renderFooter,
+  ListHeaderComponent,
+  Header,
+  renderHeader,
+
+  ...props
+}) => {
+  ListEmptyComponent = ListEmptyComponent || Empty || defaultRender
+  ListFooterComponent = ListFooterComponent || Footer || renderFooter || defaultRender
+  ListHeaderComponent = ListHeaderComponent || Header || renderHeader || defaultRender
+
+  return (
+    <FlatList
+      height={height}
+      width={width}
+      {...props}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+      ListHeaderComponent={ListHeaderComponent}
+      contentContainerStyle={style}
+    />
+  )
+}

package/src/abstractions/FlatList.web.js

@@ -0,0 +1,3 @@
+import { AbsFlatList as NativeFlatList } from './FlatList.native'
+
+export const AbsFlatList = NativeFlatList

package/src/abstractions/ScrollView.web.js

@@ -0,0 +1,3 @@
+import { AbsScrollView as NativeAbsScrollView } from './ScrollView.native'
+
+export const AbsScrollView = NativeAbsScrollView

package/src/abstractions/Text.web.js

@@ -1,3 +1,18 @@
+// export const AbsText = ({ numberOfLines, style, ...props }) => {
+// style = style || {}
+
+// const limitLinesStyle = !!numberOfLines
+// ? {
+// display: '-webkit-box',
+// WebkitLineClamp: numberOfLines,
+// WebkitBoxOrient: 'vertical',
+// overflow: 'hidden',
+// }
+// : {}
+
+// return <AbsText {...props} style={[limitLinesStyle, style]} />
+// }
+
 import { Text as RNText } from 'react-native'
 
 export const AbsText = RNText

package/src/abstractions/helpers/storage.js

@@ -0,0 +1,32 @@
+function set(key, value) {
+  return localStorage.setItem(key, value)
+}
+
+function setAsync(key, value) {
+  return Promise.resulve(set(key, value))
+}
+
+function get(key) {
+  return localStorage.getItem(key)
+}
+
+function getAsync(key) {
+  return Promise.resulve(get(key))
+}
+
+function remove(key) {
+  return localStorage.removeItem(key)
+}
+
+function removeAsync(key) {
+  return Promise.resulve(remove(key))
+}
+
+export const AbsStorage = {
+  set,
+  setAsync,
+  get,
+  getAsync,
+  remove,
+  removeAsync,
+}

package/src/abstractions/helpers/storage.native.js

@@ -0,0 +1,34 @@
+let set = () => console.warn('expo-sqlite not installed. Neko Storage needs expo-sqlite to work properly')
+let setAsync = () => Promise.resolve(set())
+
+let get = () => console.warn('expo-sqlite not installed. Neko Storage needs expo-sqlite to work properly')
+let getAsync = () => Promise.resolve(get())
+
+let remove = () => console.warn('expo-sqlite not installed. Neko Storage needs expo-sqlite to work properly')
+let removeAsync = () => Promise.resolve(remove())
+
+try {
+  const StorageModule = require('expo-sqlite/kv-store')
+  if (StorageModule?.default) {
+    const Storage = StorageModule.default
+    set = Storage.setItemSync.bind(Storage)
+    setAsync = Storage.setItem.bind(Storage)
+
+    get = Storage.getItemSync.bind(Storage)
+    getAsync = Storage.getItem.bind(Storage)
+
+    remove = Storage.removeItemSync.bind(Storage)
+    removeAsync = Storage.removeItem.bind(Storage)
+  }
+} catch (e) {
+  console.log('expo-sqlite not available:', e)
+}
+
+export const AbsStorage = {
+  set,
+  setAsync,
+  get,
+  getAsync,
+  remove,
+  removeAsync,
+}

package/src/components/actions/Button.js

@@ -27,6 +27,7 @@ const DEFAULT_PROPS = ([{ sizeCode }]) => ({
   br: sizeCode,
   border: 1,
   center: true,
+  pointer: true,
   hover: {
     opacity: 0.7,
   },

package/src/components/actions/Dropdown.js

@@ -31,6 +31,8 @@ export function Dropdown({ items, ...rootProps }) {
     popoverProps,
     iconLabelProps,
     children,
+    placement,
+    gap,
     ...props
   } = formattedProps
 
@@ -38,17 +40,29 @@ export function Dropdown({ items, ...rootProps }) {
     <View className="neko-dropdown" {...props}>
       <Popover
         useParentMinWidth
-        placement="bottomLeft"
+        placement={placement || 'bottomLeft'}
         trigger={trigger}
         padding="xs"
         useBottomDrawer={{ native: true, sm: true, md: true }}
+        bottomDrawerProps={{
+          bg: 'mainBG',
+          contentProps: { bg: 'overlayBG', br: 'lg', margin: 'md' },
+        }}
         {...popoverProps}
         renderContent={({ onClose }) => {
           const handleChange = (...params) => {
             if (onChange) onChange(...params)
             onClose()
           }
-          return <Menu vertical items={items} onChange={handleChange} linkPaddingH="xs" />
+          return (
+            <Menu
+              vertical
+              items={items}
+              onChange={handleChange}
+              _linkPaddingV="lg"
+              _linkProps={{ borderB: true, padding: 'lg', borderL: 0, brColor: 'divider' }}
+            />
+          )
         }}
       >
         {children || (
@@ -59,6 +73,7 @@ export function Dropdown({ items, ...rootProps }) {
               strong={strong}
               color={color}
               invert
+              gap={gap}
               {...iconLabelProps}
             />
           </Link>

package/src/components/actions/menu/VerticalMenu.js

@@ -42,7 +42,7 @@ function LinkItem({
         marginR={3}
         borderL={3}
         marginV={-4}
-        borderColor={active ? activeColor : 'transparent'}
+        brColor={active ? activeColor : 'transparent'}
         bg={bg}
         transition="border-color 0.5s ease, background 0.3s ease"
         hover={{ br: 0 }}

package/src/components/index.js

@@ -12,3 +12,4 @@ export * from './table'
 export * from './feedback'
 export * from './calendar'
 export * from './list'
+export * from './theme'

package/src/components/layout/Layout.js

@@ -32,7 +32,7 @@ export function Layout({ children, ...rootProps }) {
 
   return (
     <LayoutContext.Provider value={value}>
-      <View className="neko-layout" bg="bg" flex relative {...rootProps} ref={layoutRef}>
+      <View className="neko-layout" bg="mainBG" flex relative {...rootProps} ref={layoutRef}>
         {children}
       </View>
     </LayoutContext.Provider>

package/src/components/list/FlatList.js

@@ -0,0 +1,54 @@
+import { pipe } from 'ramda'
+
+import { AbsFlatList } from '../../abstractions/FlatList'
+import { useAnimationModifier } from '../../modifiers/animation'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useMarginModifier } from '../../modifiers/margin'
+import { useOverflowModifier } from '../../modifiers/overflow'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { usePositionModifier } from '../../modifiers/position'
+import { useShadowModifier } from '../../modifiers/shadow'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([_, { horizontal }]) => {
+  const overflowKey = horizontal ? 'scrollX' : 'scrollY'
+
+  return {
+    [overflowKey]: true,
+    row: !!horizontal,
+  }
+}
+
+export function FlatList({ children, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('FlatList'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+  // useNormalView = useResponsiveValue(useNormalView)
+
+  return (
+    <AbsFlatList className="neko-flat-list" {...props}>
+      {children}
+    </AbsFlatList>
+  )
+}

package/src/components/list/index.js

@@ -1 +1,2 @@
 export * from './ScrollView'
+export * from './FlatList'

package/src/components/state/LoadingView.js

@@ -18,7 +18,16 @@ export function LoadingView({ active, children, size, color, replaceChildren, no
   return (
     <View className="neko-loading-view" relative {...props}>
       {children}
-      <View className="neko-laoding-view-overlay" bg="bg_op90" absolute top={0} left={0} right={0} bottom={0} center>
+      <View
+        className="neko-laoding-view-overlay"
+        bg="mainBG_op90"
+        absolute
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        center
+      >
         {loader}
       </View>
     </View>

package/src/components/structure/View.js

@@ -4,6 +4,7 @@ import { AbsView } from '../../abstractions/View'
 import { useAnimationModifier } from '../../modifiers/animation'
 import { useBackgroundModifier } from '../../modifiers/background'
 import { useBorderModifier } from '../../modifiers/border'
+import { useCursorModifier } from '../../modifiers/cursor'
 import { useDisplayModifier } from '../../modifiers/display'
 import { useFlexModifier } from '../../modifiers/flex'
 import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
@@ -21,6 +22,7 @@ export function View({ children, ...rootProps }) {
     useThemeComponentModifier('View'),
     useFlexWrapperModifier,
     useDisplayModifier,
+    useCursorModifier,
     useAnimationModifier,
     useStateModifier,
     useSizeModifier,

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

@@ -189,8 +189,21 @@ function InnerContent({
 
       <DrawerProvider value={contextValue}>
         <GestureDetector gesture={panGesture}>
-          <Animated.View style={[styles.container, { height: SCREEN_HEIGHT }, animatedSheetStyle]}>
-            <View flex bg="overlayBG" shadow paddingB={useSafeArea && bottomInset} borderRadiusT="xxxl" {...props}>
+          <Animated.View
+            style={[styles.container, { height: SCREEN_HEIGHT }, animatedSheetStyle]}
+            pointerEvents="box-none"
+          >
+            <View
+              flex
+              bg="overlayBG"
+              shadow
+              paddingB={useSafeArea && bottomInset}
+              borderRadiusT="xxxl"
+              marginL="auto"
+              marginR="auto"
+              fullW
+              {...props}
+            >
               <DrawerHandle hide={hideHandle} />
               <View flex {...contentProps}>
                 {children}

package/src/components/structure/popover/Popover.js

@@ -15,6 +15,7 @@ export function Popover({
   parentWidth,
   parentMinWidth,
   useBottomDrawer = {},
+  bottomDrawerProps = {},
   ...props
 }) {
   const shouldUseDrawer = useResponsiveValue(useBottomDrawer)
@@ -64,7 +65,15 @@ export function Popover({
   React.useEffect(() => () => onClose(), [])
 
   if (shouldUseDrawer) {
-    return <DrawerPopover content={content} renderContent={renderContent} children={children} {...props} />
+    return (
+      <DrawerPopover
+        content={content}
+        renderContent={renderContent}
+        children={children}
+        {...props}
+        {...bottomDrawerProps}
+      />
+    )
   }
 
   const child = React.Children.only(children)
@@ -87,7 +96,7 @@ function DrawerPopover({ children, content, renderContent, snapPoints, ...props
     <>
       {React.cloneElement(child, childProps)}
 
-      <BottomDrawer open={open} onClose={onClose} snapPoints={snapPoints}>
+      <BottomDrawer open={open} onClose={onClose} snapPoints={snapPoints} {...props}>
         {renderContent({ onClose })}
       </BottomDrawer>
     </>

package/src/components/structure/popover/Popover.native.js

@@ -13,6 +13,7 @@ export function Popover({
   placement = 'bottom',
   children,
   useBottomDrawer = {},
+  bottomDrawerProps = {},
   snapPoints,
   ...props
 }) {
@@ -59,7 +60,7 @@ export function Popover({
       <View ref={ref}>
         {children}
 
-        <BottomDrawer open={open} onClose={onClose} snapPoints={snapPoints}>
+        <BottomDrawer open={open} onClose={onClose} snapPoints={snapPoints} {...bottomDrawerProps}>
           {renderContent({ onClose: onClose })}
         </BottomDrawer>
       </View>
@@ -72,7 +73,7 @@ export function Popover({
 
       {open && (
         <Modal transparent visible={open} animationType="fade" onRequestClose={onClose}>
-          <View fullW flex fullH bg="bg_op50">
+          <View fullW flex fullH bg="backdrop_op50">
             <TouchableWithoutFeedback onPress={onClose}>
               <View style={{ flex: 1 }}>
                 {triggerRect && (

package/src/components/theme/ThemePicker.js

@@ -0,0 +1,49 @@
+import { mapObjIndexed, mergeDeepRight, values, pipe, filter } from 'ramda'
+
+import { DEFAULT_THEMES, 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, setActiveThemeKey, themes, onChangeTheme } = useThemeHandler()
+
+  let options = pipe(
+    mergeDeepRight(DEFAULT_THEMES),
+    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)
+
+  return (
+    <Picker
+      colSpan={12}
+      gap="lg"
+      value={activeThemeKey}
+      onChange={(key) => {
+        setActiveThemeKey(key)
+        onChangeTheme?.(key)
+        onChange?.(key)
+      }}
+      options={options}
+      renderOption={({ option, selected, onChange }) => (
+        <Link onPress={onChange} gap="xs">
+          <ThemeThumb value={option.value} />
+          <IconLabel
+            center
+            label={option.label}
+            icon={selected && 'checkbox-circle-fill'}
+            color={selected ? 'primary' : 'text3'}
+            strong
+          />
+        </Link>
+      )}
+    />
+  )
+}

package/src/components/theme/ThemePickerDrawer.js

@@ -0,0 +1,13 @@
+import { BottomDrawer } from '../structure'
+import { ScrollView } from '../list/ScrollView'
+import { ThemePicker } from './ThemePicker'
+
+export function ThemePickerDrawer({ open, onClose, onChange }) {
+  return (
+    <BottomDrawer open={open} onClose={onClose} maxWidth={550} snapPoints={['50%', '85%']}>
+      <ScrollView padding="md">
+        <ThemePicker onChange={onChange} />
+      </ScrollView>
+    </BottomDrawer>
+  )
+}

package/src/components/theme/ThemeStatusBar.js

@@ -0,0 +1,3 @@
+export function ThemeStatusBar() {
+  return false
+}

package/src/components/theme/ThemeStatusBar.native.js

@@ -0,0 +1,9 @@
+import { StatusBar } from 'react-native'
+
+import { useTheme } from '../../theme'
+
+export function ThemeStatusBar(props) {
+  const { isDark } = useTheme()
+
+  return <StatusBar {...props} style={isDark ? 'dark' : 'light'} />
+}

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'