@neko-os/ui 0.0.7 → 0.0.9

package/src/components/structure/modal/Modal.js

@@ -0,0 +1,84 @@
+import { pipe } from 'ramda'
+
+import { AnimatedView } from '../../animations/AnimatedView'
+import { ModalBackdrop } from './ModalBackdrop'
+import { ModalContent } from './ModalContent'
+import { ModalFooter } from './ModalFooter'
+import { ModalHeader } from './ModalHeader'
+import { Portal } from '../../helpers/Portal'
+import { useDefaultModifier } from '../../../modifiers/default'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{}, { position }]) => {
+  let radiusKey = 'br'
+  let height = undefined
+  if (position === 'bottom') {
+    radiusKey = 'borderRadiusT'
+    height = '95%'
+  } else if (position === 'top') {
+    radiusKey = 'borderRadiusB'
+    height = '95%'
+  } else if (position === 'right') {
+    radiusKey = 'borderRadiusL'
+    height = '100%'
+  } else if (position === 'left') {
+    radiusKey = 'borderRadiusR'
+    height = '100%'
+  }
+
+  return {
+    maxWidth: '100%',
+    maxHeight: !position && '95%',
+    height,
+    scale: !position,
+    fade: !!position,
+    slide: position && { from: position },
+    [radiusKey]: 'xl',
+    bg: 'overlayBG',
+    overflow: 'hidden',
+    shadow: true,
+  }
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  width = 500,
+  children,
+  header,
+  footer,
+  noLayout,
+  disableOutsideClick,
+  ...rootProps
+}) {
+  const [{}, formattedProps] = pipe(
+    useThemeComponentModifier('Modal'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { contentProps, headerProps, footerProps, position, ...props } = formattedProps
+
+  let content = children
+  if (!noLayout) {
+    content = (
+      <>
+        <ModalHeader title={title} onClose={onClose} {...headerProps}>
+          {header}
+        </ModalHeader>
+        <ModalContent {...contentProps}>{children}</ModalContent>
+        <ModalFooter {...footerProps}>{footer}</ModalFooter>
+      </>
+    )
+  }
+
+  return (
+    <Portal>
+      <ModalBackdrop open={open} onClose={!disableOutsideClick && onClose} position={position}>
+        <AnimatedView className="neko-modal" open={open} width={width} {...props} onPress={(e) => e.stopPropagation()}>
+          {content}
+        </AnimatedView>
+      </ModalBackdrop>
+    </Portal>
+  )
+}

package/src/components/structure/modal/Modal.native.js

@@ -0,0 +1,83 @@
+import { Modal as RNModal, ScrollView } from 'react-native'
+import { pipe } from 'ramda'
+
+import { ModalBackdrop } from './ModalBackdrop'
+import { ModalContent } from './ModalContent'
+import { ModalFooter } from './ModalFooter'
+import { ModalHeader } from './ModalHeader'
+import { Pressable } from '../../actions/Pressable'
+import { View } from '../View'
+import { useDefaultModifier } from '../../../modifiers/default'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  maxWidth: '90%',
+  maxHeight: '90%',
+  scale: true,
+  br: 'xl',
+  bg: 'overlayBG',
+  overflow: 'hidden',
+  shadow: true,
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  width = 500,
+  children,
+  header,
+  footer,
+  noLayout,
+  disableOutsideClick,
+  ...rootProps
+}) {
+  const [{}, formattedProps] = pipe(
+    useThemeComponentModifier('Modal'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { contentProps, headerProps, footerProps, ...props } = formattedProps
+
+  let content = children
+  if (!noLayout) {
+    content = (
+      <>
+        <ModalHeader title={title} onClose={onClose} {...headerProps}>
+          {header}
+        </ModalHeader>
+        <ScrollView>
+          <ModalContent {...contentProps}>{children}</ModalContent>
+        </ScrollView>
+        <ModalFooter {...footerProps}>{footer}</ModalFooter>
+      </>
+    )
+  }
+
+  return (
+    <RNModal
+      animationType="fade"
+      transparent
+      visible={open}
+      onRequestClose={onClose}
+      allowSwipeDismissal
+      navigationBarTranslucent
+      statusBarTranslucent
+    >
+      <ModalBackdrop open={open} useSimpleView>
+        <Pressable
+          onPress={!disableOutsideClick ? onClose : undefined}
+          absolute
+          top={0}
+          left={0}
+          right={0}
+          bottom={0}
+          pointerEvents="box-only"
+        />
+        <View width={width} {...props} zIndex={10}>
+          {content}
+        </View>
+      </ModalBackdrop>
+    </RNModal>
+  )
+}

package/src/components/structure/modal/ModalBackdrop.js

@@ -0,0 +1,58 @@
+import { pipe } from 'ramda'
+import React from 'react'
+
+import { AnimatedView } from '../../animations/AnimatedView'
+import { SafeAreaView } from '../SafeAreaView'
+import { useDefaultModifier } from '../../../modifiers/default'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{}, { position }]) => {
+  let justify = 'center'
+  let align = 'center'
+  if (position === 'bottom') {
+    justify = 'flex-end'
+  } else if (position === 'top') {
+    justify = 'flex-top'
+  } else if (position === 'left') {
+    align = 'flex-start'
+  } else if (position === 'right') {
+    align = 'flex-end'
+  }
+
+  return {
+    fixed: true,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justify,
+    align,
+    lazy: true,
+    unmountOnClose: true,
+    fade: true,
+    zIndex: 500,
+    bg: 'backdrop_op70',
+  }
+}
+
+export function ModalBackdrop({ open, onClose, children, useSimpleView, ...rootProps }) {
+  const modalRef = React.useRef()
+  const [{}, props] = pipe(
+    useThemeComponentModifier('ModalBackdrop'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  if (useSimpleView) {
+    return (
+      <SafeAreaView className="neko-modal-backdrop" {...props}>
+        {children}
+      </SafeAreaView>
+    )
+  }
+
+  return (
+    <AnimatedView open={open} className="neko-modal-backdrop" onPress={onClose} {...props}>
+      {children}
+    </AnimatedView>
+  )
+}

package/src/components/structure/modal/ModalContent.js

@@ -0,0 +1,28 @@
+import { pipe } from 'ramda'
+
+import { View } from '../View'
+import { useDefaultModifier } from '../../../modifiers/default'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  fullW: true,
+  flex: true,
+  // fullH: true,
+  scrollY: true,
+  padding: 'md',
+}
+
+export function ModalContent({ children, ...rootProps }) {
+  const [{}, props] = pipe(
+    useThemeComponentModifier('ModalContent'), //
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  if (!children) return false
+
+  return (
+    <View className="neko-modal-content" {...props}>
+      {children}
+    </View>
+  )
+}

package/src/components/structure/modal/ModalFooter.js

@@ -0,0 +1,31 @@
+import { pipe } from 'ramda'
+
+import { View } from '../View'
+import { moveScale } from '../../../theme/helpers/sizeScale'
+import { useDefaultModifier } from '../../../modifiers/default'
+import { useSizeConverter } from '../../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{ sizeCode }, _]) => ({
+  borderT: true,
+  paddingH: sizeCode,
+  paddingV: moveScale(sizeCode, -2),
+  minHeight: moveScale(sizeCode, 1),
+  centerV: true,
+})
+
+export function ModalFooter({ children, ...rootProps }) {
+  const [{}, props] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('ModalFooter'), //
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  if (!children) return false
+
+  return (
+    <View className="neko-modal-footer" {...props}>
+      {children}
+    </View>
+  )
+}

package/src/components/structure/modal/ModalHeader.js

@@ -0,0 +1,50 @@
+import { pipe } from 'ramda'
+
+import { Icon } from '../../presentation/Icon'
+import { Link } from '../../actions/Link'
+import { Text } from '../../text/Text'
+import { View } from '../View'
+import { moveScale } from '../../../theme/helpers/sizeScale'
+import { useDefaultModifier } from '../../../modifiers/default'
+import { useSizeConverter } from '../../../modifiers/sizeConverter'
+import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = ([{ sizeCode }, _]) => ({
+  centerV: true,
+  paddingH: sizeCode,
+  paddingV: moveScale(sizeCode, -2),
+  minHeight: moveScale(sizeCode, 1),
+  gap: 'md',
+  borderB: true,
+  justify: 'space-between',
+
+  titleProps: {
+    strong: true,
+  },
+})
+
+export function ModalHeader({ onClose, title, children, ...rootProps }) {
+  const [{}, formattedProps] = pipe(
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('ModalHeader'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { titleProps, ...props } = formattedProps
+
+  if (!title && !children) return false
+
+  return (
+    <View className="neko-modal-header" {...props} row>
+      {title && <Text {...titleProps}>{title}</Text>}
+
+      {children}
+
+      {!!onClose && (
+        <Link onPress={onClose} padding="sm" marginR={-10}>
+          <Icon name="close-line" />
+        </Link>
+      )}
+    </View>
+  )
+}

package/src/components/structure/modal/handler/ModalsHandler.js

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import { Modal } from '../Modal'
+import { useResponsiveValue } from '../../../../responsive/responsiveHooks'
+
+const ModalsContext = React.createContext(null)
+
+export const useModals = () => React.useContext(ModalsContext) || {}
+
+let idCounter = 0
+
+export function useModalOpener() {
+  const { add, remove, close } = useModals()
+  const open = (init) => {
+    const key = ++idCounter
+
+    const onClose = () => close(key)
+    const params = { onClose, key }
+
+    const data = init(params)
+
+    add(key, { onClose, ...data, open: true })
+    return params
+  }
+
+  return {
+    open,
+  }
+}
+
+export function ModalsHandler({ children }) {
+  const width = useResponsiveValue({ sm: '100%', df: 400 })
+  const [modals, setModals] = React.useState([])
+
+  const add = React.useCallback((key, data) => {
+    setModals((prev) => [...prev, { key, ...data }])
+  }, [])
+
+  const remove = React.useCallback((key) => {
+    setModals((prev) => prev.filter((p) => p.key !== key))
+  }, [])
+
+  const close = React.useCallback((key) => {
+    setModals((items) => items.map((i) => (i.key === key ? { ...i, open: false } : i)))
+    setTimeout(() => remove(key), 600)
+  }, [])
+
+  const value = React.useMemo(() => ({ add, remove, close }), [add, remove, close])
+
+  return (
+    <ModalsContext.Provider value={value}>
+      {children}
+
+      {modals?.map?.(({ key, content, ...item }) => (
+        <Modal key={key} {...item}>
+          {content}
+        </Modal>
+      ))}
+    </ModalsContext.Provider>
+  )
+}

package/src/components/structure/modal/index.js

@@ -0,0 +1,6 @@
+export * from './handler/ModalsHandler'
+export * from './Modal'
+export * from './ModalContent'
+export * from './ModalHeader'
+export * from './ModalFooter'
+export * from './ModalBackdrop'

package/src/components/structure/overlay/OverlayWrapper.js

@@ -43,7 +43,7 @@ export function OverlayWrapper({ children, triggerRect, placement, onClickOutsid
       top={pos.y}
       left={pos.x}
       zIndex={9999}
-      pointerEvents="none"
+      ointerEvents="none"
       {...props}
     >
       {children}

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

@@ -1,7 +1,9 @@
 import React from 'react'
 
+import { BottomDrawer } from '../bottomDrawer'
 import { PopoverContent } from './PopoverContent'
 import { useRegisterOverlay } from '../overlay/OverlayHandler'
+import { useResponsiveValue } from '../../../responsive'
 
 export function Popover({
   renderContent,
@@ -12,8 +14,11 @@ export function Popover({
   children,
   parentWidth,
   parentMinWidth,
+  useBottomDrawer = {},
+  bottomDrawerProps = {},
   ...props
 }) {
+  const shouldUseDrawer = useResponsiveValue(useBottomDrawer)
   const ref = React.useRef(null)
   const { onOpen, onClose, onFastClose, stopDelayedClosing } = useRegisterOverlay({ unmountOnClose })
 
@@ -53,17 +58,47 @@ export function Popover({
       ),
       triggerRect,
       placement,
-      options: { dismissOnClickOutside: !!click },
+      options: { dismissOnClickOutside: click || focus },
     })
   }
 
   React.useEffect(() => () => onClose(), [])
 
+  if (shouldUseDrawer) {
+    return (
+      <DrawerPopover
+        content={content}
+        renderContent={renderContent}
+        children={children}
+        {...props}
+        {...bottomDrawerProps}
+      />
+    )
+  }
+
   const child = React.Children.only(children)
   let childProps = { ref, onClick: show }
 
   if (hover) childProps = { ref, onMouseEnter: show, onMouseLeave: onClose }
-  if (focus) childProps = { ref, onFocus: show, onBlur: onClose }
+  if (focus) childProps = { ref, onFocus: show }
 
   return React.cloneElement(child, childProps)
 }
+
+function DrawerPopover({ children, content, renderContent, snapPoints, ...props }) {
+  const [open, setOpen] = React.useState(false)
+  const onClose = () => setOpen(false)
+
+  const child = React.Children.only(children)
+  let childProps = { onClick: () => setOpen(true) }
+
+  return (
+    <>
+      {React.cloneElement(child, childProps)}
+
+      <BottomDrawer open={open} onClose={onClose} snapPoints={snapPoints} {...props}>
+        {renderContent({ onClose })}
+      </BottomDrawer>
+    </>
+  )
+}

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

@@ -1,17 +1,35 @@
 import { Modal, TouchableWithoutFeedback } from 'react-native'
 import React from 'react'
 
+import { BottomDrawer } from '../bottomDrawer'
 import { PopoverContent } from './PopoverContent'
 import { View } from '../View'
 import { calculatePosition } from '../overlay/calculatePosition'
+import { useResponsiveValue } from '../../../responsive'
 
-export function Popover({ content, placement = 'bottom', children, ...props }) {
+export function Popover({
+  content,
+  renderContent,
+  placement = 'bottom',
+  children,
+  useBottomDrawer = {},
+  bottomDrawerProps = {},
+  snapPoints,
+  ...props
+}) {
+  const shouldUseDrawer = useResponsiveValue(useBottomDrawer)
   const ref = React.useRef(null)
-  const [visible, setVisible] = React.useState(false)
+  const [open, setOpen] = React.useState(false)
   const [triggerRect, setTriggerRect] = React.useState(null)
   const [position, setPosition] = React.useState(null)
 
-  const show = () => {
+  renderContent = renderContent || (() => content)
+
+  const onOpen = () => {
+    if (shouldUseDrawer) {
+      setOpen(true)
+      return
+    }
     if (ref.current) {
       ref.current.measureInWindow((x, y, width, height) => {
         setTriggerRect({
@@ -22,29 +40,41 @@ export function Popover({ content, placement = 'bottom', children, ...props }) {
           width,
           height,
         })
-        setVisible(true)
+        setOpen(true)
       })
     }
   }
 
-  const hide = () => {
-    setVisible(false)
+  const onClose = () => {
+    setOpen(false)
     setTriggerRect(null)
     setPosition(null)
   }
 
-  return (
-    <>
+  children = React.cloneElement(React.Children.only(children), {
+    onPress: onOpen,
+  })
+
+  if (shouldUseDrawer) {
+    return (
       <View ref={ref}>
-        {React.cloneElement(React.Children.only(children), {
-          onPress: show,
-        })}
+        {children}
+
+        <BottomDrawer open={open} onClose={onClose} snapPoints={snapPoints} {...bottomDrawerProps}>
+          {renderContent({ onClose: onClose })}
+        </BottomDrawer>
       </View>
+    )
+  }
+
+  return (
+    <>
+      <View ref={ref}>{children}</View>
 
-      {visible && (
-        <Modal transparent visible={visible} animationType="fade" onRequestClose={hide}>
-          <View fullW flex fullH bg="bg_op50">
-            <TouchableWithoutFeedback onPress={hide}>
+      {open && (
+        <Modal transparent visible={open} animationType="fade" onRequestClose={onClose}>
+          <View fullW flex fullH bg="backdrop_op50">
+            <TouchableWithoutFeedback onPress={onClose}>
               <View style={{ flex: 1 }}>
                 {triggerRect && (
                   <View
@@ -61,7 +91,7 @@ export function Popover({ content, placement = 'bottom', children, ...props }) {
                     }}
                   >
                     <PopoverContent placement={placement} {...props}>
-                      {content}
+                      {renderContent({ onClose: onClose })}
                     </PopoverContent>
                   </View>
                 )}

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'} />
+}