@neko-os/ui 0.0.8 → 0.0.10

package/src/DynamicStyleTag.native.js

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

package/src/NekoUI.js

@@ -1,22 +1,39 @@
+import { DynamicStyleTag } from './DynamicStyleTag'
+import { I18nProvider } from './i18n'
 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 }) {
+export function NekoUI({ children, i18n, ...props }) {
   return (
     <ThemeHandler {...props}>
+      <DynamicStyleTag />
       <ResponsiveHandler>
         <PortalHandler>
           <ModalsHandler>
-            <NotificationsHandler>
-              <OverlayHandler>{children}</OverlayHandler>
-            </NotificationsHandler>
+            <I18nProvider i18n={i18n}>
+              <NotificationsHandler>
+                <OverlayHandler>
+                  {children}
+                  <FixedComponents />
+                </OverlayHandler>
+              </NotificationsHandler>
+            </I18nProvider>
           </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.web.js

@@ -0,0 +1,3 @@
+import { AbsAnimatedView as NativeAbsAnimatedView } from './AnimatedView.native'
+
+export const AbsAnimatedView = NativeAbsAnimatedView

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,3 @@
+import { AbsStaticList } from './StaticList'
+
+export const AbsFlatList = AbsStaticList

package/src/abstractions/FlatList.native.js

@@ -0,0 +1,36 @@
+import { FlatList } from 'react-native'
+
+export const AbsFlatList = ({
+  style: { height, width, ...style },
+  ItemSeparatorComponent,
+  Separator,
+  renderSeparator,
+  ListEmptyComponent,
+  Empty,
+  renderEmpty,
+  ListFooterComponent,
+  Footer,
+  renderFooter,
+  ListHeaderComponent,
+  Header,
+  renderHeader,
+  ...props
+}) => {
+  ItemSeparatorComponent = ItemSeparatorComponent || Separator || renderSeparator
+  ListEmptyComponent = ListEmptyComponent || Empty || renderEmpty
+  ListFooterComponent = ListFooterComponent || Footer || renderFooter
+  ListHeaderComponent = ListHeaderComponent || Header || renderHeader
+
+  return (
+    <FlatList
+      height={height}
+      width={width}
+      {...props}
+      ItemSeparatorComponent={ItemSeparatorComponent}
+      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/StaticList.js

@@ -0,0 +1,51 @@
+import React from 'react'
+
+import { AbsView } from './View'
+import { LazyAction } from '../components/helpers/LazyAction'
+
+const defaultRender = () => false
+
+export function AbsStaticList({
+  data,
+  renderItem,
+  ItemSeparatorComponent,
+  Separator,
+  renderSeparator,
+  ListEmptyComponent,
+  Empty,
+  renderEmpty,
+  ListFooterComponent,
+  Footer,
+  renderFooter,
+  ListHeaderComponent,
+  Header,
+  renderHeader,
+  keyExtractor,
+  onEndReached,
+  ...props
+}) {
+  ItemSeparatorComponent = ItemSeparatorComponent || Separator || renderSeparator || defaultRender
+  ListEmptyComponent = ListEmptyComponent || Empty || renderEmpty || 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)}>
+          {index !== 0 && <ItemSeparatorComponent />}
+          {renderItem({ item, index })}
+        </React.Fragment>
+      ))}
+
+      <LazyAction action={onEndReached} destroyOffScreen />
+
+      <ListFooterComponent />
+    </AbsView>
+  )
+}

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/abstractions/helpers/useSafeAreaInsets.js

@@ -0,0 +1,3 @@
+export const useSafeAreaInsets = () => {
+  return { top: 0, bottom: 0, left: 0, right: 0 }
+}

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

@@ -0,0 +1,3 @@
+import { useSafeAreaInsets as _useSafeAreaInsets } from 'react-native-safe-area-context'
+
+export const useSafeAreaInsets = _useSafeAreaInsets

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

@@ -5,8 +5,10 @@ import { Link } from './Link'
 import { Menu } from './menu/Menu'
 import { Popover } from '../structure/popover/Popover'
 import { View } from '../structure/View'
+import { useResponsiveValue } from '../../responsive'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
+// TODO: Refactor to use default values
 export function Dropdown({ items, ...rootProps }) {
   const [_, formattedProps] = pipe(
     useThemeComponentModifier('Dropdown')
@@ -21,7 +23,7 @@ export function Dropdown({ items, ...rootProps }) {
     // useFlexModifier
   )([{}, rootProps])
 
-  const {
+  let {
     onChange,
     label,
     trigger = 'click',
@@ -31,24 +33,40 @@ export function Dropdown({ items, ...rootProps }) {
     popoverProps,
     iconLabelProps,
     children,
+    placement,
+    gap,
+    useBottomDrawer,
     ...props
   } = formattedProps
 
+  useBottomDrawer = useResponsiveValue(useBottomDrawer || { native: true, sm: true, md: true })
+
   return (
     <View className="neko-dropdown" {...props}>
       <Popover
         useParentMinWidth
-        placement="bottomLeft"
+        placement={placement || 'bottomLeft'}
         trigger={trigger}
-        padding="xs"
-        useBottomDrawer={{ native: true, sm: true, md: true }}
+        padding={0}
+        // In case its web use the Drawer component
+        contentProps={{ padding: 0 }}
+        useBottomDrawer={useBottomDrawer}
         {...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}
+              linkPaddingH={useBottomDrawer ? 'md' : 'sm'}
+              linkMinHeight={useBottomDrawer ? 'xl' : 'md'}
+              withDivider={useBottomDrawer}
+            />
+          )
         }}
       >
         {children || (
@@ -59,6 +77,7 @@ export function Dropdown({ items, ...rootProps }) {
               strong={strong}
               color={color}
               invert
+              gap={gap}
               {...iconLabelProps}
             />
           </Link>

package/src/components/actions/FloatingButton.js

@@ -0,0 +1,87 @@
+import { pipe } from 'ramda'
+
+import { AbsTouchableOpacity } from '../../abstractions/TouchableOpacity'
+import { Icon } from '../presentation'
+import { Loading } from '../state'
+import { moveScale } from '../../theme/helpers/sizeScale'
+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'
+import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS =
+  ({ bottomInset }) =>
+  ([{ sizeCode }, { square }]) => {
+    sizeCode = moveScale(sizeCode, 1)
+
+    return {
+      absolute: true,
+      shadow: true,
+      bottom: 'md',
+      marginB: bottomInset,
+      right: 'md',
+      round: !square,
+      ration: 1,
+      padding: 'xxxs',
+      height: sizeCode,
+      width: sizeCode,
+      br: sizeCode,
+      border: 1,
+      center: true,
+      pointer: true,
+      hover: {
+        opacity: 0.7,
+      },
+    }
+  }
+
+export function FloatingButton({ useSafeArea = true, ...rootProps }) {
+  const insets = useSafeAreaInsets()
+  const bottomInset = useSafeArea ? insets.bottom : 0
+
+  let [{ loading, fontColor, color, sizeCode }, formattedProps] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('FloatingButton'),
+    useDefaultModifier(DEFAULT_PROPS({ bottomInset })),
+    useHoverConverter,
+    useCursorModifier,
+    useFullColorModifier,
+    useDisplayModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useFlexWrapperModifier,
+    useBackgroundModifier,
+    useBorderModifier
+  )([{}, rootProps])
+  sizeCode = moveScale(sizeCode, 1)
+
+  const { icon, iconProps, size, ...props } = formattedProps
+
+  let content = <Icon flex color={fontColor} size={sizeCode} name={icon} loading={loading} {...iconProps} />
+  if (loading) content = <Loading size={sizeCode} color={fontColor} />
+
+  return (
+    <AbsTouchableOpacity className="neko-floating-button neko-wave-click-effect" type="button" {...props}>
+      {content}
+    </AbsTouchableOpacity>
+  )
+}

package/src/components/actions/index.js

@@ -1,4 +1,5 @@
 export * from './Button'
+export * from './FloatingButton'
 export * from './Link'
 export * from './Pressable'
 export * from './Dropdown'

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

@@ -5,9 +5,11 @@ import tinycolor from 'tinycolor2'
 import { Divider } from '../../helpers/Separator'
 import { IconText } from '../../presentation/IconLabel'
 import { Link } from '../Link'
+import { List } from '../../list/FlatList'
 import { SubmenuWrapper } from './SubmenuWrapper'
 import { Text } from '../../text/Text'
 import { View } from '../../structure/View'
+import { moveScale } from '../../../theme/helpers/sizeScale'
 import { useColorConverter } from '../../../modifiers/colorConverter'
 import { useSizeConverter } from '../../../modifiers/sizeConverter'
 import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
@@ -15,7 +17,8 @@ import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
 function LinkItem({
   item,
   linkPaddingH = 'md',
-  linkPaddingV = 'sm',
+  linkPaddingV = 'xs',
+  linkMinHeight,
   handlePress,
   linkProps,
   activeIndex,
@@ -31,6 +34,7 @@ function LinkItem({
   if (!active && activeIndex >= 0) active = activeIndex === index
   if (!active && activeKey !== undefined) active = activeKey === item.key
   const bg = active && tinycolor(color).setAlpha(0.03).toString()
+  linkMinHeight = linkMinHeight || moveScale(sizeCode, 1)
 
   return (
     <SubmenuWrapper item={item} onChange={handlePress} activeKey={activeKey} color={color}>
@@ -39,10 +43,10 @@ function LinkItem({
         center
         paddingH={linkPaddingH}
         paddingV={linkPaddingV}
+        minHeight={linkMinHeight}
         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 }}
@@ -61,7 +65,7 @@ function DividerItem({ linkPaddingH = 'md', item }) {
   return (
     <>
       {content}
-      <Text size="xs" color="text4" paddingH={linkPaddingH || 'md'} strong {...item} />
+      <Text size="xs" color="text4" paddingV="xs" paddingH={linkPaddingH || 'md'} strong {...item} />
     </>
   )
 }
@@ -78,7 +82,7 @@ export function VerticalMenu(rootProps) {
     useThemeComponentModifier('VerticalMenu') //
   )([{}, rootProps])
 
-  let { gap = 'sm', items, onChange, onChangeIndex, ...props } = formattedProps
+  let { gap = 'sm', items, onChange, onChangeIndex, withDivider, ...props } = formattedProps
 
   const handlePress = React.useCallback(
     (item, index) => {
@@ -90,6 +94,27 @@ export function VerticalMenu(rootProps) {
     [onChange, onChangeIndex]
   )
 
+  return (
+    <View className="neko-vertical-menu" gap={gap} width="100%" {...props}>
+      <List
+        data={items}
+        keyExtractor={(item, index) => item.key || index}
+        divider={withDivider}
+        renderItem={({ item, index }) => (
+          <Item
+            key={item.key || index}
+            item={item}
+            handlePress={handlePress}
+            color={color}
+            sizeCode={sizeCode}
+            index={index}
+            {...props}
+          />
+        )}
+      />
+    </View>
+  )
+
   return (
     <View className="neko-vertical-menu" gap={gap} width="100%" {...props}>
       {items.map((item, index) => (

package/src/components/calendar/_helpers/calendarDays.js

@@ -1,7 +1,9 @@
+import dayjs from 'dayjs'
 import React from 'react'
 
 export function useCalendarDays(currentMonth) {
   return React.useMemo(() => {
+    if (!currentMonth?.isValid?.()) currentMonth = dayjs()
     const startWeekday = currentMonth.startOf('month').day()
     const daysInMonth = currentMonth.daysInMonth()
 

package/src/components/feedback/alerter.js

@@ -16,7 +16,7 @@ export function useAlerter() {
       footer: !hideClose && (
         <Button sm label={closeLabel || 'Close'} outline color="text_op40" onPress={onClose} fullW />
       ),
-      footerProps: { borderT: false },
+      footerProps: { borderT: false, paddingV: 'md' },
       width: width || 350,
     }))
   }

package/src/components/feedback/confirmer.js

@@ -12,7 +12,7 @@ function Footer({ cancelLabel, confirmLabel, onConfirm, type, onClose }) {
   const color = RESULT_TYPES[type]?.color || 'primary'
 
   return (
-    <View row gap="sm" centerV>
+    <View row gap="xs" centerV>
       <Button sm label={cancelLabel || 'Cancel'} outline color="text_op40" onPress={onClose} flex disabled={loading} />
       <Button
         disabled={loading}
@@ -55,7 +55,7 @@ export function useConfirmer() {
           onClose={onClose}
         />
       ),
-      footerProps: { borderT: false },
+      footerProps: { borderT: false, paddingV: 'md' },
       width: width || 350,
     }))
   }

package/src/components/helpers/ConditionalLazyRender.js

@@ -0,0 +1,6 @@
+import { LazyRender } from './LazyRender'
+
+export function ConditionalLazyRender({ children, ...props }) {
+  if (!props.delay && !props.whenVisible && !props.destroyOffScreen) return children
+  return <LazyRender {...props}>{children}</LazyRender>
+}