@neko-os/ui 0.0.7 → 0.0.9

package/src/components/inputs/MaskInput.js

@@ -0,0 +1,67 @@
+import React from 'react'
+
+import { TextInput } from './TextInput'
+
+function removeMask(value, mask = '') {
+  let result = ''
+
+  for (let i = 0; i < mask.length; i++) {
+    const maskChar = mask[i]
+    const valueChar = value[i]
+
+    if (!valueChar) break
+
+    if (maskChar === 'A' && /[A-Za-z]/.test(valueChar)) {
+      result += valueChar
+    } else if (maskChar === '9' && /\d/.test(valueChar)) {
+      result += valueChar
+    }
+  }
+
+  return result
+}
+
+function applyMask(value, mask) {
+  const clean = value.replace(/[^0-9A-Za-z]/g, '')
+  let result = ''
+  let index = 0
+
+  for (let i = 0; i < mask.length; i++) {
+    if (index >= clean.length) break
+    const char = mask[i]
+
+    if (char === '9' && /[0-9]/.test(clean[index])) {
+      result += clean[index]
+      index++
+    } else if (char === 'A' && /[A-Za-z]/.test(clean[index])) {
+      result += clean[index].toUpperCase()
+      index++
+    } else if (char === '9' || char === 'A') {
+      index++
+      i--
+    } else {
+      result += char
+    }
+  }
+
+  return result
+}
+
+export function MaskInput({ value = '', onChange, mask = '', useRawValue, ...props }) {
+  const [localValue, setLocalValue] = React.useState(applyMask(value, mask))
+
+  const handleChange = React.useCallback(
+    (text) => {
+      const masked = applyMask(text, mask)
+      onChange?.(useRawValue ? removeMask(masked, mask) : masked)
+      setLocalValue(masked)
+    },
+    [mask, onChange]
+  )
+
+  React.useEffect(() => {
+    setLocalValue(applyMask(value, mask))
+  }, [value])
+
+  return <TextInput value={localValue} onChange={handleChange} {...props} />
+}

package/src/components/inputs/TextInput.js

@@ -2,7 +2,7 @@ import { AbsTextInput } from '../../abstractions/TextInput'
 import { InputWrapper } from './InputWrapper'
 import { useColors } from '../../theme/ThemeHandler'
 
-export function TextInput({ value, ...props }) {
+export function TextInput({ onChange, ...props }) {
   const colors = useColors()
 
   const STYLE = {
@@ -16,7 +16,7 @@ export function TextInput({ value, ...props }) {
 
   return (
     <InputWrapper {...props}>
-      <AbsTextInput style={STYLE} placeholderTextColor={colors.text_op30} {...props} value={value} />
+      <AbsTextInput style={STYLE} placeholderTextColor={colors.text_op30} {...props} onChange={onChange} />
     </InputWrapper>
   )
 }

package/src/components/inputs/_DateInput.native.js

@@ -0,0 +1,89 @@
+import React from 'react'
+import advancedFormat from 'dayjs/esm/plugin/advancedFormat'
+import dayjs from 'dayjs'
+import weekOfYear from 'dayjs/esm/plugin/weekOfYear'
+
+dayjs.extend(advancedFormat)
+dayjs.extend(weekOfYear)
+
+import { DatePicker } from './datePicker/DatePicker'
+import { MaskInput } from './MaskInput'
+import { Popover } from '../structure/popover/Popover'
+import { isValidDate } from '../calendar/_helpers/dateDisabled'
+
+export function getDateInputDefaultFormat(type) {
+  switch (type) {
+    case 'year':
+      return 'YYYY'
+    case 'quarter':
+      return 'YYYY-Q'
+    case 'month':
+      return 'YYYY-MM'
+    case 'week':
+      return 'YYYY-ww'
+    default:
+      return 'YYYY-MM-DD'
+  }
+}
+
+export function DateInput({ value, onChange, min, max, onCheckDisabled, placement, type = 'day', format, ...props }) {
+  format = format || getDateInputDefaultFormat(type)
+  const [inputValue, setInputValue] = React.useState('')
+  const [localValue, setLocalValue] = React.useState(value)
+
+  value = value || localValue
+
+  const validations = { min, max, onCheckDisabled }
+
+  const handleChange = (v) => {
+    if (!isValidDate(v, format, validations)) return
+    v = !!v ? dayjs(v) : null
+    setLocalValue(v)
+    onChange?.(v)
+  }
+
+  const handleChangeInput = (v) => {
+    setInputValue(v)
+    if (!isValidDate(v, format, validations)) return
+    handleChange(v)
+  }
+
+  const onBlur = () => {
+    if (isValidDate(inputValue, format, validations)) return
+    handleChange(null)
+    setInputValue('')
+  }
+
+  React.useEffect(() => {
+    setInputValue(!!value ? dayjs(value).format(format) : '')
+  }, [value])
+
+  return false
+  return (
+    <Popover
+      trigger="click"
+      placement={placement || 'bottomLeft'}
+      renderContent={({ onClose }) => (
+        <DatePicker
+          value={value}
+          onChange={(v) => {
+            handleChange(v)
+            onClose()
+          }}
+          {...validations}
+          type={type}
+        />
+      )}
+    >
+      <MaskInput
+        value={inputValue}
+        onChange={handleChangeInput}
+        suffixIcon="calendar-line"
+        suffixIconColor="text4"
+        onBlur={onBlur}
+        mask={format.replace(/[DMYQwW]/gi, '9')}
+        {...props}
+      />
+    </Popover>
+  )
+}

package/src/components/inputs/datePicker/DatePicker.js

@@ -0,0 +1,24 @@
+import { DayPicker } from './DayPicker'
+import { MonthPicker } from './MonthPicker'
+import { QuarterPicker } from './QuarterPicker'
+import { WeekPicker } from './WeekPicker'
+import { YearPicker } from './YearPicker'
+
+export function DatePicker({ type, ...props }) {
+  switch (type) {
+    case 'year':
+      return <YearPicker {...props} />
+
+    case 'quarter':
+      return <QuarterPicker {...props} />
+
+    case 'month':
+      return <MonthPicker {...props} />
+
+    case 'week':
+      return <WeekPicker {...props} />
+
+    default:
+      return <DayPicker {...props} />
+  }
+}

package/src/components/inputs/datePicker/DayPicker.js

@@ -0,0 +1,65 @@
+import React from 'react'
+import dayjs from 'dayjs'
+
+import { CalendarNav } from '../../calendar/CalendarNav'
+import { Col } from '../../structure/Col'
+import { Grid } from '../../structure/Row'
+import { Link } from '../../actions/Link'
+import { Text } from '../../text/Text'
+import { View } from '../../structure/View'
+import { WeekDaysBar } from '../../calendar/WeekDaysBar'
+import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
+import { useCalendarDays } from '../../calendar/_helpers/calendarDays'
+
+export function DayPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
+  if (!!value) value = dayjs(value)
+  const [localValue, setLocalValue] = React.useState(value)
+
+  React.useEffect(() => {
+    setLocalValue(value)
+  }, [value])
+
+  value = value === undefined ? localValue : value
+
+  const handleChange = (v) => {
+    setLocalValue(v)
+    onChange?.(v)
+  }
+
+  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value).startOf('month'))
+
+  const { cells } = useCalendarDays(currentMonth)
+
+  return (
+    <View className="neko-day-picker" width={275} {...props}>
+      <CalendarNav value={currentMonth} onChange={setCurrentMonth} />
+      <WeekDaysBar />
+
+      <Grid className="neko-day-picker-days" colSpan={24 / 7} gap="sm">
+        {cells.map((day, i) => {
+          const dateVal = currentMonth.date(day)
+          const isActive = !!value && !!day && dateVal.isSame(value, 'day')
+          const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
+
+          return (
+            <Col key={day ? dateVal.format('YYYYMMDD') : i} className="day-cell" center>
+              <Link
+                ratio={1}
+                fullW
+                center
+                br="md"
+                onPress={() => !!day && handleChange(dateVal)}
+                bg={isActive && 'primary'}
+                disabled={disabled}
+              >
+                <Text sm text2 center strong={isActive}>
+                  {day || ''}
+                </Text>
+              </Link>
+            </Col>
+          )
+        })}
+      </Grid>
+    </View>
+  )
+}

package/src/components/inputs/datePicker/MonthPicker.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import dayjs from 'dayjs'
+
+import { CalendarNav } from '../../calendar/CalendarNav'
+import { Col } from '../../structure/Col'
+import { Divider } from '../../helpers'
+import { Grid } from '../../structure/Row'
+import { Link } from '../../actions/Link'
+import { Text } from '../../text/Text'
+import { View } from '../../structure/View'
+import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
+
+const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+
+export function MonthPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
+  const [localValue, setLocalValue] = React.useState(value)
+  value = value === undefined ? localValue : value
+
+  React.useEffect(() => {
+    setLocalValue(value)
+  }, [value?.month?.(), value?.year?.()])
+
+  const handleChange = (v) => {
+    const newValue = v.startOf('month')
+    setLocalValue(newValue)
+    onChange?.(newValue)
+  }
+
+  const [currentYear, setCurrentYear] = React.useState(() => dayjs(value).startOf('year'))
+
+  return (
+    <View className="neko-day-picker" width={275} {...props}>
+      <CalendarNav value={currentYear} onChange={setCurrentYear} level="year" />
+      <Divider />
+
+      <Grid colSpan={8} gap="xs">
+        {months.map((month) => {
+          const dateVal = currentYear.month(month)
+          const isActive = !!value && dateVal.isSame(value, 'week')
+          const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
+
+          return (
+            <Col key={month}>
+              <Link
+                fullW
+                br="md"
+                padding="sm"
+                onPress={() => handleChange(dateVal)}
+                bg={isActive && 'primary'}
+                disabled={disabled}
+              >
+                <Text text2={!isActive} strong={isActive} center>
+                  {dateVal.format('MMM')}
+                </Text>
+              </Link>
+            </Col>
+          )
+        })}
+      </Grid>
+    </View>
+  )
+}

package/src/components/inputs/datePicker/QuarterPicker.js

@@ -0,0 +1,65 @@
+import React from 'react'
+import dayjs from 'dayjs'
+import quarterOfYear from 'dayjs/esm/plugin/quarterOfYear'
+
+import { CalendarNav } from '../../calendar/CalendarNav'
+import { Col } from '../../structure/Col'
+import { Divider } from '../../helpers'
+import { Grid } from '../../structure/Row'
+import { Link } from '../../actions/Link'
+import { Text } from '../../text/Text'
+import { View } from '../../structure/View'
+import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
+
+dayjs.extend(quarterOfYear)
+
+const quarters = [1, 2, 3, 4]
+
+export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
+  const [localValue, setLocalValue] = React.useState(value)
+  value = value === undefined ? localValue : value
+
+  React.useEffect(() => {
+    setLocalValue(value)
+  }, [value?.quarter?.(), value?.year?.()])
+
+  const handleChange = (v) => {
+    const newValue = v.startOf('quarter')
+    setLocalValue(newValue)
+    onChange?.(newValue)
+  }
+
+  const [currentYear, setCurrentYear] = React.useState(() => dayjs(value).startOf('year'))
+
+  return (
+    <View className="neko-day-picker" width={275} {...props}>
+      <CalendarNav value={currentYear} onChange={setCurrentYear} level="year" />
+      <Divider />
+
+      <Grid colSpan={6} gap="xs">
+        {quarters.map((quarter) => {
+          const dateVal = currentYear.quarter(quarter)
+          const isActive = !!value && dateVal.isSame(value, 'week')
+          const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
+
+          return (
+            <Col key={quarter}>
+              <Link
+                fullW
+                br="md"
+                padding="sm"
+                onPress={() => handleChange(dateVal)}
+                bg={isActive && 'primary'}
+                disabled={disabled}
+              >
+                <Text text2={!isActive} strong={isActive} center>
+                  Q{dateVal.quarter()}
+                </Text>
+              </Link>
+            </Col>
+          )
+        })}
+      </Grid>
+    </View>
+  )
+}

package/src/components/inputs/datePicker/WeekPicker.js

@@ -0,0 +1,74 @@
+import { splitEvery, identity } from 'ramda'
+import React from 'react'
+import dayjs from 'dayjs'
+
+import { CalendarNav } from '../../calendar/CalendarNav'
+import { Col } from '../../structure/Col'
+import { Link } from '../../actions/Link'
+import { Row } from '../../structure/Row'
+import { Text } from '../../text/Text'
+import { View } from '../../structure/View'
+import { WeekDaysBar } from '../../calendar/WeekDaysBar'
+import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
+import { useCalendarDays } from '../../calendar/_helpers/calendarDays'
+
+export function WeekPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
+  const [localValue, setLocalValue] = React.useState(value)
+  value = value === undefined ? localValue : value
+
+  React.useEffect(() => {
+    setLocalValue(value)
+  }, [value?.day?.(), value?.month?.(), value?.year?.()])
+
+  const handleChange = (v) => {
+    const newValue = v.startOf('week')
+    setLocalValue(newValue)
+    onChange?.(newValue)
+  }
+
+  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value).startOf('month'))
+
+  const { cells } = useCalendarDays(currentMonth)
+  const weeks = splitEvery(7, cells)
+
+  return (
+    <View className="neko-day-picker" width={275} {...props}>
+      <CalendarNav value={currentMonth} onChange={setCurrentMonth} />
+      <WeekDaysBar />
+
+      <View colSpan={24 / 7} gap="sm">
+        {weeks.map((week, wi) => {
+          const firstDay = week.find(identity)
+          const dateVal = currentMonth.date(firstDay)
+          const isActive = !!value && !!firstDay && dateVal.isSame(value, 'week')
+          const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
+
+          return (
+            <Link
+              key={firstDay ? dateVal.format('YYYYMMDD') : wi}
+              fullW
+              br="md"
+              onPress={() => !!firstDay && handleChange(dateVal)}
+              bg={isActive && 'primary'}
+              disabled={disabled}
+            >
+              <Row colSpan={24 / 7} gap="sm">
+                {week.map((day, i) => {
+                  const dateVal = currentMonth.date(day)
+
+                  return (
+                    <Col key={day ? dateVal.format('YYYYMMDD') : i} className="day-cell" center ratio={1}>
+                      <Text sm text2 center strong={isActive}>
+                        {day || ''}
+                      </Text>
+                    </Col>
+                  )
+                })}
+              </Row>
+            </Link>
+          )
+        })}
+      </View>
+    </View>
+  )
+}

package/src/components/inputs/datePicker/YearPicker.js

@@ -0,0 +1,67 @@
+import { range } from 'ramda'
+import React from 'react'
+import dayjs from 'dayjs'
+
+import { CalendarNav } from '../../calendar/CalendarNav'
+import { Col } from '../../structure/Col'
+import { Divider } from '../../helpers'
+import { Grid } from '../../structure/Row'
+import { Link } from '../../actions/Link'
+import { Text } from '../../text/Text'
+import { View } from '../../structure/View'
+import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
+
+export function YearPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
+  const [localValue, setLocalValue] = React.useState(value)
+  value = value === undefined ? localValue : value
+
+  React.useEffect(() => {
+    setLocalValue(value)
+  }, [value?.year?.()])
+
+  const handleChange = (v) => {
+    const newValue = v.startOf('year')
+    setLocalValue(newValue)
+    onChange?.(newValue)
+  }
+
+  const [currentDecade, setCurrentDecade] = React.useState(() => {
+    const year = dayjs(value).year()
+    const decadeStartYear = Math.floor(year / 10) * 10
+    return dayjs().year(decadeStartYear).startOf('year')
+  })
+
+  const years = range(currentDecade.year(), currentDecade.year() + 10)
+
+  return (
+    <View className="neko-day-picker" width={275} {...props}>
+      <CalendarNav value={currentDecade} onChange={setCurrentDecade} level="decade" />
+      <Divider />
+
+      <Grid colSpan={12} gap="xs">
+        {years.map((year) => {
+          const dateVal = currentDecade.year(year)
+          const isActive = !!value && dateVal.isSame(value, 'week')
+          const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
+
+          return (
+            <Col key={year}>
+              <Link
+                fullW
+                br="md"
+                padding="sm"
+                onPress={() => handleChange(dateVal)}
+                bg={isActive && 'primary'}
+                disabled={disabled}
+              >
+                <Text text2={!isActive} strong={isActive} center>
+                  {dateVal.year()}
+                </Text>
+              </Link>
+            </Col>
+          )
+        })}
+      </Grid>
+    </View>
+  )
+}

package/src/components/inputs/index.js

@@ -3,4 +3,8 @@ export * from './Radio'
 export * from './Switch'
 export * from './InputWrapper'
 export * from './TextInput'
+export * from './LinkInput'
+export * from './MaskInput'
+export * from './DateInput'
+export * from './datePicker/DatePicker'
 export * from './Picker'

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

@@ -0,0 +1,58 @@
+import { pipe } from 'ramda'
+
+import { AbsScrollView } from '../../abstractions/ScrollView'
+import { View } from '../structure/View'
+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 { useResponsiveValue } from '../../responsive'
+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 ScrollView({ children, useNormalView, ...rootProps }) {
+  const [_, props] = pipe(
+    useThemeComponentModifier('ScrollView'),
+    useDefaultModifier(DEFAULT_PROPS),
+    useFlexWrapperModifier,
+    useDisplayModifier,
+    useAnimationModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    useOverflowModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useBackgroundModifier,
+    useBorderModifier,
+    useShadowModifier
+  )([{}, rootProps])
+  useNormalView = useResponsiveValue(useNormalView)
+
+  if (useNormalView) return <View {...rootProps}>{children}</View>
+
+  return (
+    <AbsScrollView className="neko-scroll-view" {...props}>
+      {children}
+    </AbsScrollView>
+  )
+}

package/src/components/list/index.js

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