@neko-os/ui 0.2.3 → 0.4.0

package/src/components/inputs/upload/Upload.native.js

@@ -0,0 +1,154 @@
+import React, { useState, useCallback } from 'react'
+
+import { BottomDrawer } from '../../modals/bottomDrawer'
+import { Icon } from '../../presentation/Icon'
+import { Link } from '../../actions/Link'
+import { Text } from '../../text/Text'
+import { View } from '../../structure/View'
+import { useUploadState } from './useUploadState'
+
+let ImagePicker
+try {
+  ImagePicker = require('expo-image-picker')
+} catch {}
+
+let DocumentPicker
+try {
+  DocumentPicker = require('expo-document-picker')
+} catch {}
+
+function acceptsImages(accept) {
+  if (!accept) return true
+  return accept.includes('image/') || accept.includes('image/*')
+}
+
+function needsFilePicker(accept) {
+  if (!accept) return true
+  const parts = accept.split(',').map((s) => s.trim())
+  return parts.some((p) => !p.startsWith('image/'))
+}
+
+function normalizeImageResult(asset) {
+  return {
+    uri: asset.uri,
+    name: asset.fileName || asset.uri.split('/').pop(),
+    type: asset.mimeType || asset.type || 'image/jpeg',
+    size: asset.fileSize || asset.filesize,
+    width: asset.width,
+    height: asset.height,
+  }
+}
+
+function normalizeDocumentResult(doc) {
+  return {
+    uri: doc.uri,
+    name: doc.name,
+    type: doc.mimeType || doc.type,
+    size: doc.size,
+  }
+}
+
+function getMediaTypes(accept) {
+  if (!accept) return undefined
+  if (accept.includes('video/') && !accept.includes('image/')) return ['videos']
+  if (accept.includes('image/') && !accept.includes('video/')) return ['images']
+  if (accept.includes('video/') && accept.includes('image/')) return ['images', 'videos']
+  return undefined
+}
+
+export function Upload({ children, onChange, onUpload, value: valueProp, accept, multiple = false, maxCount, disabled = false, ...props }) {
+  const { value, addFiles, remove } = useUploadState({ onUpload, onChange, multiple, maxCount, value: valueProp })
+  const [open, setOpen] = useState(false)
+
+  const handlePress = useCallback(() => {
+    if (disabled) return
+    setOpen(true)
+  }, [disabled])
+
+  const handleCamera = useCallback(async () => {
+    setOpen(false)
+    if (!ImagePicker) return
+    const permission = await ImagePicker.requestCameraPermissionsAsync()
+    if (!permission.granted) return
+    const result = await ImagePicker.launchCameraAsync({
+      allowsMultipleSelection: multiple,
+      selectionLimit: maxCount || 0,
+      mediaTypes: getMediaTypes(accept),
+    })
+    if (result.canceled) return
+    addFiles(result.assets.map(normalizeImageResult))
+  }, [multiple, maxCount, accept, addFiles])
+
+  const handleLibrary = useCallback(async () => {
+    setOpen(false)
+    if (!ImagePicker) return
+    const permission = await ImagePicker.requestMediaLibraryPermissionsAsync()
+    if (!permission.granted) return
+    const result = await ImagePicker.launchImageLibraryAsync({
+      allowsMultipleSelection: multiple,
+      selectionLimit: maxCount || 0,
+      mediaTypes: getMediaTypes(accept),
+    })
+    if (result.canceled) return
+    addFiles(result.assets.map(normalizeImageResult))
+  }, [multiple, maxCount, accept, addFiles])
+
+  const handleFiles = useCallback(async () => {
+    setOpen(false)
+    if (!DocumentPicker) return
+    const result = await DocumentPicker.getDocumentAsync({
+      multiple,
+      type: accept || '*/*',
+    })
+    if (result.canceled) return
+    addFiles(result.assets.map(normalizeDocumentResult))
+  }, [multiple, accept, addFiles])
+
+  const showCamera = acceptsImages(accept)
+  const showLibrary = acceptsImages(accept)
+  const showFiles = needsFilePicker(accept)
+
+  const isRenderFn = typeof children === 'function'
+
+  return (
+    <>
+      {isRenderFn ? (
+        <View {...props}>
+          {children({ value, remove, isDragging: false, open: handlePress })}
+        </View>
+      ) : (
+        <Link onPress={handlePress} disabled={disabled} {...props}>
+          {children}
+        </Link>
+      )}
+      <BottomDrawer open={open} onClose={() => setOpen(false)} snapPoints={[200]}>
+        <View padding="md" gap="xs">
+          {showCamera && (
+            <Link onPress={handleCamera}>
+              <View row gap="md" padding="sm" centerV>
+                <Icon name="camera-line" />
+                <Text>Camera</Text>
+              </View>
+            </Link>
+          )}
+          {showLibrary && (
+            <Link onPress={handleLibrary}>
+              <View row gap="md" padding="sm" centerV>
+                <Icon name="image-line" />
+                <Text>Photo Library</Text>
+              </View>
+            </Link>
+          )}
+          {showFiles && (
+            <Link onPress={handleFiles}>
+              <View row gap="md" padding="sm" centerV>
+                <Icon name="file-line" />
+                <Text>Files</Text>
+              </View>
+            </Link>
+          )}
+        </View>
+      </BottomDrawer>
+    </>
+  )
+}

package/src/components/inputs/upload/useUploadState.js

@@ -0,0 +1,143 @@
+import { useState, useRef, useCallback } from 'react'
+
+function toArray(val) {
+  if (!val) return []
+  return Array.isArray(val) ? val : [val]
+}
+
+export function useUploadState({ onUpload, onChange, multiple, maxCount, value: valueProp }) {
+  const [inFlight, setInFlight] = useState([])
+  const [committed, setCommitted] = useState(null)
+  const idRef = useRef(0)
+  const genRef = useRef(0)
+
+  const isControlled = valueProp !== undefined
+  const externalValue = isControlled ? valueProp : committed
+  const externalArray = toArray(externalValue)
+
+  const externalArrayRef = useRef(externalArray)
+  externalArrayRef.current = externalArray
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+  const inFlightRef = useRef(inFlight)
+  inFlightRef.current = inFlight
+
+  const value = multiple
+    ? [...externalArray, ...inFlight]
+    : (inFlight[0] || externalArray[0] || null)
+
+  const addFiles = useCallback(
+    (normalizedFiles) => {
+      if (!normalizedFiles?.length) return
+
+      if (!onUpload) {
+        if (!multiple) {
+          const entry = { ...normalizedFiles[0], _id: ++idRef.current }
+          if (!isControlled) setCommitted(entry)
+          onChangeRef.current?.(entry)
+        } else {
+          let files = normalizedFiles
+          if (maxCount) {
+            const available = maxCount - externalArrayRef.current.length
+            if (available <= 0) return
+            files = files.slice(0, available)
+          }
+          const entries = files.map((file) => ({ ...file, _id: ++idRef.current }))
+          if (!isControlled) {
+            setCommitted((prev) => {
+              const next = [...toArray(prev), ...entries]
+              onChangeRef.current?.(next)
+              return next
+            })
+          } else {
+            onChangeRef.current?.([...externalArrayRef.current, ...entries])
+          }
+        }
+        return
+      }
+
+      if (!multiple) {
+        const gen = ++genRef.current
+        const file = normalizedFiles[0]
+        const _id = ++idRef.current
+        const entry = { ...file, _id, status: 'uploading' }
+
+        setInFlight([entry])
+
+        onUpload(file)
+          .then((result) => {
+            if (genRef.current !== gen) return
+            const done = { ...entry, ...result, status: 'done' }
+            setInFlight([])
+            if (!isControlled) setCommitted(done)
+            onChangeRef.current?.(done)
+          })
+          .catch((error) => {
+            if (genRef.current !== gen) return
+            setInFlight((prev) =>
+              prev.map((f) => (f._id === _id ? { ...f, status: 'error', error } : f))
+            )
+          })
+        return
+      }
+
+      // Multi mode
+      let files = normalizedFiles
+      if (maxCount) {
+        const available = maxCount - externalArrayRef.current.length - inFlightRef.current.length
+        if (available <= 0) return
+        files = files.slice(0, available)
+      }
+
+      const entries = files.map((file) => ({
+        ...file,
+        _id: ++idRef.current,
+        status: 'uploading',
+      }))
+
+      setInFlight((prev) => [...prev, ...entries])
+
+      entries.forEach((entry, i) => {
+        onUpload(files[i])
+          .then((result) => {
+            const done = { ...entry, ...result, status: 'done' }
+            setInFlight((prev) => prev.filter((f) => f._id !== entry._id))
+            if (!isControlled) {
+              setCommitted((prev) => {
+                const next = [...toArray(prev), done]
+                onChangeRef.current?.(next)
+                return next
+              })
+            } else {
+              onChangeRef.current?.([...externalArrayRef.current, done])
+            }
+          })
+          .catch((error) => {
+            setInFlight((prev) =>
+              prev.map((f) => (f._id === entry._id ? { ...f, status: 'error', error } : f))
+            )
+          })
+      })
+    },
+    [onUpload, multiple, maxCount, isControlled]
+  )
+
+  const remove = useCallback(
+    (file) => {
+      if (!file) return
+
+      setInFlight((prev) => prev.filter((f) => f._id !== file._id))
+
+      const ext = externalArrayRef.current
+      if (ext.some((f) => f._id === file._id)) {
+        const next = ext.filter((f) => f._id !== file._id)
+        const val = multiple ? next : next[0] || null
+        if (!isControlled) setCommitted(val)
+        onChangeRef.current?.(val)
+      }
+    },
+    [multiple, isControlled]
+  )
+
+  return { value, addFiles, remove }
+}

package/src/components/layout/LayoutHeader.js

@@ -23,6 +23,7 @@ const DEFAULT_PROPS = ([{}, { sticky }]) => ({
   row: true,
   centerV: true,
   padding: 'md',
+  borderB: 'overlayDivider',
   top: 0,
   left: 0,
   right: 0,

package/src/components/presentation/AvatarLabel.js

@@ -44,8 +44,8 @@ export function AvatarLabel(rootProps) {
           icon={icon}
           src={src}
           size={avatarSize || moveScale(sizeCode, moveAvatarSizeScale || -1)}
-          color={avatarColor || color}
           dynamicColor={dynamicColor}
+          {...(!dynamicColor && { color: avatarColor || color })}
           square={square}
           marginH={2}
           iconSize={iconSize}

package/src/components/presentation/AvatarsGroup.js

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { Avatar } from './Avatar'
+import { View } from '../structure/View'
+import { useGetElementHeight } from '../../theme'
+
+export function AvatarsGroup({ maxCount, size = 'md', overlap, children, ...props }) {
+  const getSize = useGetElementHeight()
+  const sizeValue = getSize(size)
+  overlap = overlap || Math.round(sizeValue * 0.6)
+
+  const items = React.Children.toArray(children).filter(React.isValidElement)
+  const visibleItems = maxCount ? items.slice(0, maxCount) : items
+  const overflowCount = maxCount ? items.length - maxCount : 0
+
+  return (
+    <View row centerV>
+      {visibleItems.map((child, index) => (
+        <View key={child.key || index} style={index > 0 ? { marginLeft: -overlap } : undefined}>
+          {React.cloneElement(child, { size, border: 1, borderColor: 'overlayBG', ...props })}
+        </View>
+      ))}
+      {overflowCount > 0 && (
+        <View style={{ marginLeft: -overlap }}>
+          <Avatar name={`+${overflowCount}`} size={size} color="text4" border borderColor="overlayBG" />
+        </View>
+      )}
+    </View>
+  )
+}

package/src/components/presentation/Badge.js

@@ -77,12 +77,13 @@ function Badge(rootProps) {
 
 function BadgeWrapper({ children, dot, ...props }) {
   if (!children) return <Badge dot={dot} {...props} />
-  if (!props.value && !props.label && !props.icon) return children
+  const hasContent = props.value || props.label || props.icon || (dot && props.value === undefined)
+  if (!hasContent) return children
 
   return (
     <View className="neko-badge-wrapper" relative>
       {children}
-      <Badge {...props} dot={dot} absolute top={dot ? -2 : -8} right={dot ? -5 : -12} />
+      <Badge dot={dot} absolute top={dot ? -2 : -8} right={dot ? -5 : -12} {...props} />
     </View>
   )
 }

package/src/components/presentation/ContentLabel.js

@@ -32,7 +32,7 @@ export function ContentLabel(rootProps) {
   return (
     <View className="neko-content-label" row gap={gap || AUTO_GAP_SCALE[sizeCode] || 5} centerV {...props}>
       {!invert && content}
-      {!!label && (
+      {label != null && label != false && label !== '' && (
         <Text color={color} size={sizeCode} strong={strong} {...textProps}>
           {label}
         </Text>

package/src/components/presentation/IconLabel.js

@@ -24,6 +24,7 @@ export function IconLabel(rootProps) {
       content={
         !!icon && (
           <Icon
+            center
             name={icon}
             size={iconSize || moveScale(sizeCode, moveIconSizeScale || -1)}
             color={iconColor || color}

package/src/components/presentation/Progress.js

@@ -0,0 +1,20 @@
+import { pipe } from 'ramda'
+
+import { View } from '../structure/View'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+export function Progress({ value, target = 100, bg = 'divider', height = 8, ...rootProps }) {
+  const [{ color }, props] = pipe(
+    useColorConverter('primary'),
+    useThemeComponentModifier('Progress') //
+  )([{}, rootProps])
+
+  const pct = Math.max(0, Math.min(100, ((value || 0) / target) * 100))
+
+  return (
+    <View className="neko-progress" fullW height={height} bg={bg} br={height} hiddenOverflow relative {...props}>
+      <View absolute top={0} bottom={0} left={0} bg={color} width={`${pct}%`} br={height} />
+    </View>
+  )
+}

package/src/components/presentation/index.js

@@ -1,12 +1,14 @@
 export * from './Tag'
 export * from './Icon'
 export * from './IconLabel'
+export * from './Progress'
 export * from './Result'
 export * from './ResultBar'
 export * from './Tooltip'
 export * from './Badge'
 export * from './Avatar'
 export * from './AvatarLabel'
+export * from './AvatarsGroup'
 export * from './Image'
 export * from './ImageBackground'
 export * from './LabelValue'

package/src/components/sections/Section.js

@@ -8,9 +8,9 @@ import { useDefaultModifier } from '../../modifiers/default'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
 const DEFAULT_PROPS = {
-  marginH: 'md',
   bg: 'overlayBG',
   br: 'md',
+  border: 'overlayDivider',
   titleProps: {
     strong: true,
     text4: true,

package/src/components/sections/SectionItemLink.js

@@ -14,7 +14,7 @@ const DEFAULT_PROPS = {
   icon: 'arrow-right-s-line',
 }
 
-export function SectionItemLink({ children, value, onPress, ...rootProps }) {
+export function SectionItemLink({ children, value, onPress, loading, ...rootProps }) {
   const [{ color }, formattedProps] = pipe(
     useColorConverter(),
     useThemeComponentModifier('SectionItemLink'), //
@@ -26,7 +26,9 @@ export function SectionItemLink({ children, value, onPress, ...rootProps }) {
   return (
     <Link className="neko-section-item-link" onPress={onPress}>
       <SectionItem color={color} {...props}>
-        {children || <IconLabel gap={2} invert color={color} {...iconLabelProps} label={value} icon={icon} />}
+        {children || (
+          <IconLabel gap={2} invert color={color} loading={loading} {...iconLabelProps} label={value} icon={icon} />
+        )}
       </SectionItem>
     </Link>
   )

package/src/components/steps/ActiveStepContent.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { useSteps } from './StepsHandler'
+
+export function ActiveStepContent() {
+  const { activeStep } = useSteps()
+
+  const Content = React.useMemo(
+    () => activeStep.render || activeStep.renderContent || activeStep.Content,
+    [activeStep.renderContent, activeStep.Content]
+  )
+
+  if (!Content) return false
+
+  return <Content />
+}

package/src/components/steps/StepsHandler.js

@@ -0,0 +1,53 @@
+import React from 'react'
+
+const StepsContext = React.createContext(null)
+export const useSteps = () => React.useContext(StepsContext) || {}
+
+export function StepsHandler({ children, items, onSubmit, onValidateStep, onStepChange, resetMaxIndexOnNavigate }) {
+  const [activeIndex, setActiveIndex] = React.useState(0)
+  const [maxIndexReleased, setMaxIndexReleased] = React.useState(0)
+  const [loading, setLoading] = React.useState(false)
+  const activeStep = items[activeIndex]
+  const isLastStep = activeIndex === items.length - 1
+
+  const moveToIndex = async (index) => {
+    const shouldValidate = index > activeIndex
+    if (shouldValidate) {
+      setLoading(true)
+      try {
+        let result = await Promise.resolve(onValidateStep?.())
+        if (result === false) return
+        result = await Promise.resolve(activeStep?.onValidate?.())
+        if (result === false) return
+      } catch {
+        return
+      } finally {
+        setLoading(false)
+      }
+      await Promise.resolve(onStepChange?.())
+    }
+
+    if (index === items.length) onSubmit?.()
+    const nextStep = items[index]
+    if (!nextStep) return
+    setActiveIndex(index)
+    if (index > maxIndexReleased || !!resetMaxIndexOnNavigate) setMaxIndexReleased(index)
+  }
+
+  const moveToNextStep = () => moveToIndex(activeIndex + 1)
+  const moveToPrevStep = () => moveToIndex(activeIndex - 1)
+
+  const value = {
+    items,
+    moveToIndex,
+    activeIndex,
+    activeStep,
+    maxIndexReleased,
+    loading,
+    isLastStep,
+    moveToNextStep,
+    moveToPrevStep,
+  }
+
+  return <StepsContext.Provider value={value}>{children}</StepsContext.Provider>
+}

package/src/components/steps/StepsMenu.js

@@ -0,0 +1,14 @@
+import { Menu } from '../actions'
+import { useSteps } from './StepsHandler'
+
+export function StepsMenu(props) {
+  const { activeIndex, items, moveToIndex, maxIndexReleased } = useSteps()
+  const formattedItems = items.map((item, index) => ({
+    ...item,
+    disabled: maxIndexReleased < index,
+  }))
+
+  return (
+    <Menu items={formattedItems} activeIndex={activeIndex} onChangeIndex={(index) => moveToIndex(index)} {...props} />
+  )
+}

package/src/components/steps/StepsNavigation.js

@@ -0,0 +1,37 @@
+import { Button } from '../actions'
+import { View } from '../structure'
+import { useSteps } from './StepsHandler'
+
+export function StepsReturnButton(props) {
+  const { activeIndex, moveToPrevStep } = useSteps()
+  if (activeIndex === 0) return null
+
+  return <Button label="Back" outline icon="arrow-left-line" onPress={moveToPrevStep} text4 {...props} />
+}
+
+export function StepsSubmitButton({ loading: propLoading, ...props }) {
+  const { isLastStep, moveToNextStep, loading } = useSteps()
+  const label = isLastStep ? 'Submit' : 'Next'
+  const icon = isLastStep ? 'checkbox-circle-line' : 'arrow-right-line'
+
+  return (
+    <Button
+      label={label}
+      outline={!isLastStep}
+      icon={icon}
+      onPress={moveToNextStep}
+      loading={propLoading || loading}
+      invert
+      {...props}
+    />
+  )
+}
+
+export function StepsNavigation({ submitProps, returnProps, ...props }) {
+  return (
+    <View row centerV toRight {...props} gap="sm">
+      <StepsReturnButton {...props} {...returnProps} />
+      <StepsSubmitButton {...props} {...submitProps} />
+    </View>
+  )
+}

package/src/components/steps/index.js

@@ -0,0 +1,4 @@
+export * from './StepsHandler'
+export * from './StepsMenu'
+export * from './ActiveStepContent'
+export * from './StepsNavigation'

package/src/components/structure/Affix.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { View } from './View'
+
+export function Affix({ children, shadow, offsetTop, offsetBottom, ...props }) {
+  const [isFloating, setIsFloating] = React.useState(false)
+  const sentinelRef = React.useRef()
+
+  React.useEffect(() => {
+    const sentinel = sentinelRef.current
+    if (!sentinel) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsFloating(!entry.isIntersecting),
+      { threshold: [1] }
+    )
+    observer.observe(sentinel)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <>
+      <div ref={sentinelRef} style={{ height: 0 }} />
+      <View
+        sticky
+        top={offsetBottom === undefined ? (offsetTop || 0) : undefined}
+        bottom={offsetBottom}
+        shadow={shadow && isFloating}
+        {...props}
+      >
+        {children}
+      </View>
+    </>
+  )
+}

package/src/components/structure/Affix.native.js

@@ -0,0 +1,3 @@
+export function Affix({ children }) {
+  return children
+}

package/src/components/structure/Card.js

@@ -19,6 +19,7 @@ const DEFAULT_PROPS = {
   br: 'xl',
   bg: 'overlayBG',
   hiddenOverflow: true,
+  border: 'overlayDivider',
 }
 
 export function Card({ children, ...rootProps }) {

package/src/components/structure/TopBar.js

@@ -1,12 +1,24 @@
+import { pipe } from 'ramda'
+
 import { Text } from '../text'
 import { View } from './View'
+import { useDefaultModifier } from '../../modifiers/default'
 import { useResponsiveConverter } from '../../modifiers/responsiveConverter'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
 
+const DEFAULT_PROPS = {
+  borderB: 'overlayDivider',
+}
+
 export function TopBar({ right, left, WrapperView, children, ...rootProps }) {
   const { top: safeTop } = useSafeAreaInsets()
 
-  const [_, props] = useResponsiveConverter([])([{}, rootProps])
+  const [_, props] = pipe(
+    useThemeComponentModifier('TopBar'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useResponsiveConverter([])
+  )([{}, rootProps])
   let { useSafeArea = true, title, subtitle } = props
 
   const hasContent = !!title || !!subtitle || !!children || !!right || !!left

package/src/components/structure/index.js

@@ -1,4 +1,5 @@
 export * from './Accordion'
+export * from './Affix'
 export * from './AccordionGroup'
 export * from './View'
 export * from './GradientView'