@neko-os/ui 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neko-os/ui",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "author": "Christian Storch <ccstorch@gmail.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -22,6 +22,7 @@
   },
   "peerDependencies": {
     "@remixicon/react": "^4.6.0",
+    "expo-linear-gradient": "~14.1.5",
     "dayjs": "*",
     "ramda": "^0.31.3",
     "react": "*",
@@ -32,10 +33,14 @@
     "react-native-web": "*",
     "react-native-safe-area-context": "*"
   },
+  "peerDependenciesMeta": {
+    "react-native-safe-area-context": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "dayjs": "^1.11.18",
+    "dayjs": "1.11.18",
     "prop-types": "^15.8.1",
-    "react-native-safe-area-context": "^5.6.1",
     "react-native-web": "^0.21.0",
     "tinycolor2": "^1.6.0"
   },

package/src/NekoUI.js

@@ -1,19 +1,34 @@
+import { ModalsHandler } from './components/structure/modal/handler/ModalsHandler'
 import { NotificationsHandler } from './components/feedback/notifications/NotificationsHandler'
 import { OverlayHandler } from './components/structure/overlay/OverlayHandler'
 import { PortalHandler } from './components/helpers/PortalHandler'
 import { ResponsiveHandler } from './responsive/ResponsiveHandler'
 import { ThemeHandler } from './theme/ThemeHandler'
+import { ThemePickerDrawer } from './components/theme'
+import { useThemeHandler } from './theme'
 
 export function NekoUI({ children, ...props }) {
   return (
     <ThemeHandler {...props}>
       <ResponsiveHandler>
         <PortalHandler>
-          <NotificationsHandler>
-            <OverlayHandler>{children}</OverlayHandler>
-          </NotificationsHandler>
+          <ModalsHandler>
+            <NotificationsHandler>
+              <OverlayHandler>
+                {children}
+                <FixedComponents />
+              </OverlayHandler>
+            </NotificationsHandler>
+          </ModalsHandler>
         </PortalHandler>
       </ResponsiveHandler>
     </ThemeHandler>
   )
 }
+
+// TODO: Move to ModalRouter when its ready
+function FixedComponents() {
+  const { themePickerOpen, setThemePickerOpen } = useThemeHandler()
+
+  return <ThemePickerDrawer open={themePickerOpen} onClose={() => setThemePickerOpen(false)} />
+}

package/src/abstractions/ActivityIndicator.native.js

@@ -1,6 +1,6 @@
-import tinycolor from 'tinycolor2'
-import { Animated, Easing } from 'react-native'
+import { Animated, Easing, Platform } from 'react-native'
 import React from 'react'
+import tinycolor from 'tinycolor2'
 
 export function AbsActivityIndicator({ size = 20, color, style }) {
   const spinValue = React.useRef(new Animated.Value(0)).current
@@ -12,7 +12,7 @@ export function AbsActivityIndicator({ size = 20, color, style }) {
         toValue: 1,
         duration: 1000,
         easing: Easing.linear,
-        useNativeDriver: true,
+        useNativeDriver: Platform.OS !== 'web',
       })
     )
     spinAnimation.start()
@@ -26,7 +26,6 @@ export function AbsActivityIndicator({ size = 20, color, style }) {
 
   const borderWidth = size / 8
 
-  console.log(color, bg)
   return (
     <Animated.View
       style={{

package/src/abstractions/ActivityIndicator.web.js

@@ -0,0 +1,43 @@
+import tinycolor from 'tinycolor2'
+import { Animated, Easing } from 'react-native'
+import React from 'react'
+
+export function AbsActivityIndicator({ size = 20, color, style }) {
+  const spinValue = React.useRef(new Animated.Value(0)).current
+  const bg = tinycolor(color).setAlpha(0.2).toString()
+
+  React.useEffect(() => {
+    const spinAnimation = Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: false,
+      })
+    )
+    spinAnimation.start()
+    return () => spinAnimation.stop()
+  }, [spinValue])
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  })
+
+  const borderWidth = size / 8
+
+  return (
+    <Animated.View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        borderWidth: borderWidth,
+        borderColor: `${bg}`,
+        borderTopColor: color,
+        transform: [{ rotate: spin }],
+        ...style,
+      }}
+    />
+  )
+}

package/src/abstractions/AnimatedView.js

@@ -1,3 +1,3 @@
-export function AbsAnimatedView({ children, style, ...props }) {
-  return <div style={style}>{children}</div>
-}
+import { AbsView } from './View'
+
+export const AbsAnimatedView = AbsView

package/src/abstractions/BlurView.js

@@ -0,0 +1,43 @@
+import { AbsView } from './View'
+
+const tintMap = {
+  light: 'rgba(255,255,255,0.3)',
+  dark: 'rgba(0,0,0,0.3)',
+  default: 'rgba(255,255,255,0.2)',
+  extraLight: 'rgba(255,255,255,0.5)',
+  regular: 'rgba(255,255,255,0.3)',
+  prominent: 'rgba(255,255,255,0.7)',
+  systemUltraThinMaterial: 'rgba(255,255,255,0.1)',
+  systemThinMaterial: 'rgba(255,255,255,0.2)',
+  systemMaterial: 'rgba(255,255,255,0.3)',
+  systemThickMaterial: 'rgba(255,255,255,0.4)',
+  systemChromeMaterial: 'rgba(255,255,255,0.5)',
+  systemUltraThinMaterialLight: 'rgba(255,255,255,0.1)',
+  systemThinMaterialLight: 'rgba(255,255,255,0.2)',
+  systemMaterialLight: 'rgba(255,255,255,0.3)',
+  systemThickMaterialLight: 'rgba(255,255,255,0.4)',
+  systemChromeMaterialLight: 'rgba(255,255,255,0.5)',
+  systemUltraThinMaterialDark: 'rgba(0,0,0,0.1)',
+  systemThinMaterialDark: 'rgba(0,0,0,0.2)',
+  systemMaterialDark: 'rgba(0,0,0,0.3)',
+  systemThickMaterialDark: 'rgba(0,0,0,0.4)',
+  systemChromeMaterialDark: 'rgba(0,0,0,0.5)',
+}
+
+export const AbsBlurView = ({ tint, intensity, style, ...props }) => {
+  const blurPx = Math.round((intensity / 100) * 25)
+  let backgroundColor = tintMap[tint] || tintMap.default
+
+  return (
+    <AbsView
+      {...props}
+      style={{
+        width: '100%',
+        backgroundColor,
+        ...style,
+        backdropFilter: `blur(${blurPx}px)`,
+        WebkitBackdropFilter: `blur(${blurPx}px)`,
+      }}
+    />
+  )
+}

package/src/abstractions/BlurView.native.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/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/GradientView.js

@@ -0,0 +1,5 @@
+import { AbsView } from './View'
+
+export const AbsGradientView = ({ colors, style, ...props }) => {
+  return <AbsView {...props} style={{ ...style }} />
+}

package/src/abstractions/GradientView.native.js

@@ -0,0 +1,32 @@
+import { AbsView } from './View'
+
+function angleToPoints(angle) {
+  const a = (angle % 360) * (Math.PI / 180)
+  const x = Math.cos(a)
+  const y = Math.sin(a)
+
+  // Normaliza de [-1, 1] para [0, 1]
+  return {
+    start: { x: 0.5 - x / 2, y: 0.5 - y / 2 },
+    end: { x: 0.5 + x / 2, y: 0.5 + y / 2 },
+  }
+}
+
+let AbsGradientView
+
+try {
+  const { LinearGradient } = require('expo-linear-gradient') || {}
+  AbsGradientView = ({ angle = 45, colors, ...props }) => {
+    const { start, end } = angleToPoints(angle)
+
+    if (!colors?.length) return <AbsView {...props} />
+    return <LinearGradient start={start} end={end} colors={colors} {...props} />
+  }
+} catch {
+  AbsGradientView = (props) => {
+    console.warn('expo-linear-gradient not instaled.')
+    return <AbsView {...props} />
+  }
+}
+
+export { AbsGradientView }

package/src/abstractions/Icon.native.js

@@ -2,10 +2,12 @@ let AbsIcon
 
 try {
   const RmIcon = require('react-native-remix-icon')?.default
-  console.log(RmIcon)
   AbsIcon = (props) => <RmIcon {...props} />
 } catch {
-  AbsIcon = () => false
+  AbsIcon = () => {
+    console.warn('react-native-remix-icon not instaled.')
+    return false
+  }
 }
 
 export { AbsIcon }

package/src/abstractions/ImageBackground.js

@@ -0,0 +1,17 @@
+export function AbsImageBackground({ src, resizeMode = 'cover', style, ...props }) {
+  const objectFitMap = {
+    cover: 'cover',
+    contain: 'contain',
+    stretch: 'fill',
+    center: 'none',
+  }
+
+  const objectFit = objectFitMap[resizeMode] || 'cover'
+
+  return (
+    <div
+      style={{ backgroundSize: objectFit, backgroundPosition: 'center', backgroundImage: `url(${src})`, ...style }}
+      {...props}
+    />
+  )
+}

package/src/abstractions/ImageBackground.native.js

@@ -0,0 +1,27 @@
+import { pick } from 'ramda'
+import { ImageBackground as RNImageBackground } from 'react-native'
+
+import { AbsView } from './View'
+
+const allBorderRadiusProps = [
+  'borderRadius',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  'borderTopStartRadius',
+  'borderTopEndRadius',
+  'borderBottomStartRadius',
+  'borderBottomEndRadius',
+]
+
+export function AbsImageBackground({ src, source, resizeMode = 'cover', style, children, ...props }) {
+  if (!source && !!src) source = { uri: src }
+  const imageStyle = pick(allBorderRadiusProps, style)
+
+  return (
+    <RNImageBackground source={source} resizeMode={resizeMode} style={style} imageStyle={imageStyle} {...props}>
+      {children}
+    </RNImageBackground>
+  )
+}

package/src/abstractions/ImageBackground.web.js

@@ -0,0 +1,7 @@
+import { ImageBackground as RNImageBackground } from 'react-native'
+
+export function AbsImageBackground({ src, source, resizeMode = 'cover', ...props }) {
+  if (!source && !!src) source = { uri: src }
+
+  return <RNImageBackground source={source} resizeMode={resizeMode} {...props} />
+}

package/src/abstractions/Pressable.js

@@ -0,0 +1,4 @@
+export function AbsPressable({ link, onPress, onClick, ...props }) {
+  const Component = link ? 'a' : 'button'
+  return <Component onClick={onClick || onPress} {...props} />
+}

package/src/abstractions/Pressable.native.js

@@ -0,0 +1,3 @@
+import { Pressable as RNPressable } from 'react-native'
+
+export const AbsPressable = RNPressable

package/src/abstractions/Pressable.web.js

@@ -0,0 +1,3 @@
+import { Pressable as RNPressable } from 'react-native'
+
+export const AbsPressable = RNPressable

package/src/abstractions/ScrollView.js

@@ -0,0 +1,3 @@
+import { AbsView } from './View'
+
+export const AbsScrollView = AbsView

package/src/abstractions/ScrollView.native.js

@@ -0,0 +1,5 @@
+import { ScrollView } from 'react-native'
+
+export const AbsScrollView = ({ style: { height, width, ...style }, ...props }) => {
+  return <ScrollView height={height} width={width} {...props} contentContainerStyle={style} />
+}

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/TextInput.js

@@ -1,3 +1,3 @@
-export function AbsTextInput(props) {
-  return <input type="text" {...props} />
+export function AbsTextInput({ onChange, ...props }) {
+  return <input type="text" onChange={(e) => onChange?.(e?.target?.value, e)} {...props} />
 }

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

@@ -5,11 +5,13 @@ import { IconLabel } from '../presentation/IconLabel'
 import { useBackgroundModifier } from '../../modifiers/background'
 import { useBorderModifier } from '../../modifiers/border'
 import { useColorConverter } from '../../modifiers/colorConverter'
+import { useCursorModifier } from '../../modifiers/cursor'
 import { useDefaultModifier } from '../../modifiers/default'
 import { useDisplayModifier } from '../../modifiers/display'
 import { useFlexModifier } from '../../modifiers/flex'
 import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
 import { useFullColorModifier } from '../../modifiers/fullColor'
+import { useHoverConverter } from '../../modifiers/hover'
 import { useMarginModifier } from '../../modifiers/margin'
 import { usePaddingModifier } from '../../modifiers/padding'
 import { usePositionModifier } from '../../modifiers/position'
@@ -25,6 +27,10 @@ const DEFAULT_PROPS = ([{ sizeCode }]) => ({
   br: sizeCode,
   border: 1,
   center: true,
+  pointer: true,
+  hover: {
+    opacity: 0.7,
+  },
 })
 
 export function Button(rootProps) {
@@ -33,6 +39,8 @@ export function Button(rootProps) {
     useSizeConverter('elementHeights', 'md'),
     useThemeComponentModifier('Button'),
     useDefaultModifier(DEFAULT_PROPS),
+    useHoverConverter,
+    useCursorModifier,
     useFullColorModifier,
     useDisplayModifier,
     useStateModifier,

package/src/components/actions/Dropdown.js

@@ -31,6 +31,8 @@ export function Dropdown({ items, ...rootProps }) {
     popoverProps,
     iconLabelProps,
     children,
+    placement,
+    gap,
     ...props
   } = formattedProps
 
@@ -38,16 +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} gap={0} onChange={handleChange} linkPaddingH="xs" />
+          return (
+            <Menu
+              vertical
+              items={items}
+              onChange={handleChange}
+              _linkPaddingV="lg"
+              _linkProps={{ borderB: true, padding: 'lg', borderL: 0, brColor: 'divider' }}
+            />
+          )
         }}
       >
         {children || (
@@ -58,6 +73,7 @@ export function Dropdown({ items, ...rootProps }) {
               strong={strong}
               color={color}
               invert
+              gap={gap}
               {...iconLabelProps}
             />
           </Link>