@codeleap/web 5.8.20 → 6.0.1

package/src/components/Carousel/index.tsx

@@ -0,0 +1,230 @@
+import { onUpdate } from '@codeleap/hooks'
+import React, { forwardRef, useCallback, useImperativeHandle, useEffect, useState, useMemo } from 'react'
+import useEmblaCarousel from 'embla-carousel-react'
+import Autoplay from 'embla-carousel-autoplay'
+import type { EmblaCarouselType } from 'embla-carousel'
+import { View } from '../View'
+import { Touchable } from '../Touchable'
+import { DotsProps, CarouselProps, CarouselRef } from './types'
+import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+
+export * from './styles'
+export * from './types'
+
+const Dots = (params: DotsProps) => {
+  const { page, childArray, onPress, styles, dotsDisabled } = params
+
+  return (
+    <View style={styles.dots}>
+      {childArray.map((_, index) => {
+        const isSelected = index === page
+
+        const style = [
+          styles.dot,
+          isSelected && styles['dot:selected'],
+          dotsDisabled && styles['dot:disabled'],
+        ]
+
+        return (
+          <Touchable
+            key={index}
+            onPress={() => onPress?.(index)}
+            style={style}
+            disabled={dotsDisabled}
+            debugName='dots'
+          />
+        )
+      })}
+    </View>
+  )
+}
+
+export const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
+  const {
+    style,
+    children,
+    renderSlideWrapper: SlideWrapper,
+    page,
+    dots,
+    dotsDisabled,
+    infinite,
+    disableSwipe,
+    onChange,
+    footer,
+    dotsProps,
+    slideWrapperProps,
+    autoplay,
+    autoplayDelay,
+    spaceBetween,
+    slidesPerView,
+    ...rest
+  } = {
+    ...Carousel.defaultProps,
+    ...props,
+  }
+
+  const styles = useStylesFor(Carousel.styleRegistryName, style)
+  const childArray = React.Children.toArray(children)
+
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  const plugins = useMemo(() => {
+    const pluginList = []
+    if (autoplay) {
+      pluginList.push(Autoplay({ delay: autoplayDelay, stopOnInteraction: false }))
+    }
+    return pluginList
+  }, [autoplay, autoplayDelay])
+
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    {
+      loop: infinite,
+      dragFree: false,
+      containScroll: 'trimSnaps',
+      align: 'start',
+      slidesToScroll: 1,
+      ...(disableSwipe && { watchDrag: false }),
+    },
+    plugins,
+  )
+
+  const goTo = useCallback(
+    (index: number) => {
+      if (emblaApi) {
+        emblaApi.scrollTo(index)
+      }
+    },
+    [emblaApi],
+  )
+
+  const next = useCallback(() => {
+    if (emblaApi) {
+      emblaApi.scrollNext()
+    }
+  }, [emblaApi])
+
+  const prev = useCallback(() => {
+    if (emblaApi) {
+      emblaApi.scrollPrev()
+    }
+  }, [emblaApi])
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      goTo,
+      next,
+      prev,
+      emblaApi,
+    }),
+    [goTo, next, prev, emblaApi],
+  )
+
+  useEffect(() => {
+    if (!emblaApi) return
+
+    const onSelect = () => {
+      const index = emblaApi.selectedScrollSnap()
+      setCurrentIndex(index)
+      onChange?.(index)
+    }
+
+    emblaApi.on('select', onSelect)
+    onSelect()
+
+    return () => {
+      emblaApi.off('select', onSelect)
+    }
+  }, [emblaApi, onChange])
+
+  onUpdate(() => {
+    if (page !== undefined && page !== currentIndex && emblaApi) {
+      goTo(page)
+    }
+  }, [page])
+
+  return (
+    <View style={styles.wrapper}>
+      <View
+        ref={emblaRef}
+        style={{
+          overflow: 'hidden',
+        }}
+      >
+        <View
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            gap: spaceBetween,
+          }}
+        >
+          {childArray.map((child, index) => {
+            return (
+              <View
+                key={index}
+                style={{
+                  flex: slidesPerView === 1 ? '0 0 100%' : slidesPerView === 'auto' ? '0 0 auto' : `0 0 ${100 / slidesPerView}%`,
+                  minWidth: 0,
+                }}
+              >
+                <SlideWrapper
+                  style={styles.slideWrapper}
+                  {...slideWrapperProps}
+                >
+                  {child}
+                </SlideWrapper>
+              </View>
+            )
+          })}
+        </View>
+      </View>
+
+      <View style={styles.footerWrapper}>
+        {footer}
+
+        {dots ? (
+          <Dots
+            page={currentIndex}
+            onPress={goTo}
+            childArray={childArray}
+            styles={styles}
+            dotsDisabled={dotsDisabled}
+            {...dotsProps}
+          />
+        ) : null}
+      </View>
+    </View>
+  )
+}) as StyledComponentWithProps<CarouselProps>
+
+Carousel.styleRegistryName = 'Carousel'
+
+Carousel.elements = [
+  'wrapper',
+  'dot',
+  'dots',
+  'slideWrapper',
+  'footerWrapper',
+]
+
+Carousel.rootElement = 'wrapper'
+
+Carousel.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Carousel as (props: StyledComponentProps<CarouselProps, typeof styles>) => IJSX
+}
+
+Carousel.defaultProps = {
+  dots: false,
+  dotsDisabled: false,
+  infinite: false,
+  disableSwipe: false,
+  renderSlideWrapper: View,
+  autoplay: false,
+  autoplayDelay: 3000,
+  spaceBetween: 0,
+  slidesPerView: 1,
+} as Partial<CarouselProps>
+
+WebStyleRegistry.registerComponent(Carousel)

package/src/components/{Pager → Carousel}/styles.ts

@@ -1,8 +1,8 @@
 
 type Dots = 'dot' | 'dot:selected' | 'dot:disabled' | 'dots'
 
-export type PagerComposition =
+export type CarouselComposition =
   | 'wrapper'
-  | 'pageWrapper'
+  | 'slideWrapper'
   | 'footerWrapper'
   | Dots

package/src/components/Carousel/types.ts

@@ -0,0 +1,41 @@
+import { StylesOf } from '@codeleap/types'
+import { CarouselComposition } from './styles'
+import React, { ReactNode, ReactElement } from 'react'
+import { ViewProps } from '../View'
+import { ComponentCommonProps } from '../../types'
+import { StyledProp } from '@codeleap/styles'
+
+export type CarouselRef = {
+  goTo: (index: number) => void
+  next: () => void
+  prev: () => void
+}
+
+export type CarouselProps =
+  ComponentCommonProps &
+  {
+    style?: StyledProp<CarouselComposition>
+    page?: number
+    children: ReactNode
+    onChange?: (index: number) => void
+    renderSlideWrapper?: any
+    footer?: ReactElement
+    dotsProps?: DotsProps
+    slideWrapperProps?: ViewProps
+    dotsDisabled?: boolean
+    disableSwipe?: boolean
+    dots?: boolean
+    infinite?: boolean
+    autoplay?: boolean
+    autoplayDelay?: number
+    spaceBetween?: number
+    slidesPerView?: number | 'auto'
+  }
+
+export type DotsProps =
+  Pick<CarouselProps, 'page' | 'dotsDisabled'> &
+  {
+    childArray: ReactNode[]
+    onPress?: (index: number) => void
+    styles: StylesOf<CarouselComposition>
+  }

package/src/components/Checkbox/index.tsx

@@ -1,7 +1,7 @@
 import { InputBase, InputBaseDefaultOrder, selectInputBaseProps } from '../InputBase'
 import { useAnimatedVariantStyles } from '../..'
 import { Icon } from '../Icon'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import { CheckboxProps } from './types'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { AnyRecord, AppIcon, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'

package/src/components/Collapse/index.tsx

@@ -2,7 +2,7 @@ import { CollapseProps } from './types'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 
 export * from './styles'
 export * from './types'

package/src/components/Collapse/types.ts

@@ -1,5 +1,5 @@
 import { StyledProp } from '@codeleap/styles'
-import { MotionProps } from 'framer-motion'
+import { MotionProps } from 'motion/react'
 import { CollapseComposition } from './styles'
 
 export type CollapseProps =

package/src/components/ColorPicker/types.ts

@@ -30,9 +30,9 @@ export type ColorPickerProps = {
   openPickerProps?: ActionIconProps
   onConfirm?: (color: ColorTypes) => void
   onClear?: () => void
-  openPickerComponent?: (props: ColorPickerPickerProps) => JSX.Element
-  pickerComponent?: (props: any) => JSX.Element
-  footerComponent?: (props: ColorPickerFooterProps) => JSX.Element
+  openPickerComponent?: (props: ColorPickerPickerProps) => React.ReactElement
+  pickerComponent?: (props: any) => React.ReactElement
+  footerComponent?: (props: ColorPickerFooterProps) => React.ReactElement
   visible?: boolean
   toggle?: React.Dispatch<React.SetStateAction<boolean>>
   children?: React.ReactNode

package/src/components/CropPicker/index.tsx

@@ -17,7 +17,7 @@ import 'react-image-crop/dist/ReactCrop.css'
 export * from './styles'
 export * from './types'
 
-export const CropPicker = forwardRef<FileInputRef, CropPickerProps>((props, ref) => {
+export const CropPicker = (props: CropPickerProps) => {
   const {
     onFileSelect,
     targetCrop,
@@ -29,6 +29,7 @@ export const CropPicker = forwardRef<FileInputRef, CropPickerProps>((props, ref)
     withLoading,
     style,
     confirmButtonProps,
+    ref,
     ...fileInputProps
   } = {
     ...CropPicker.defaultProps,
@@ -87,7 +88,7 @@ export const CropPicker = forwardRef<FileInputRef, CropPickerProps>((props, ref)
           >
             <img
               src={image?.src}
-              // @ts-expect-error
+              // @ts-ignore
               css={[styles.cropPreview, styles.previewSize]}
             />
           </ReactCrop>
@@ -96,7 +97,7 @@ export const CropPicker = forwardRef<FileInputRef, CropPickerProps>((props, ref)
       </Modal>
     </>
   )
-}) as StyledComponentWithProps<CropPickerProps>
+}
 
 CropPicker.styleRegistryName = 'CropPicker'
 CropPicker.elements = ['previewSize', 'cropPreview', 'confirmButton', 'modal']

package/src/components/CropPicker/types.ts

@@ -1,10 +1,11 @@
 import { StyledProp } from '@codeleap/styles'
-import { FileInputProps } from '../FileInput'
+import { FileInputProps, FileInputRef } from '../FileInput'
 import { CropPickerComposition } from './styles'
 import { ReactCropProps } from 'react-image-crop'
 import { ModalProps } from '../Modal'
 import { useCropPicker } from '../../lib'
 import { ButtonProps } from '../Button'
+import { RefObject } from 'react'
 
 export type BaseCropProps = Partial<ReactCropProps>
 
@@ -20,6 +21,7 @@ export type CropPickerProps =
     handle?: ReturnType<typeof useCropPicker>
     withLoading?: boolean
     confirmButtonProps?: Partial<ButtonProps>
+    ref?: RefObject<FileInputRef | null>
   }
 
 export type ImageReading = HTMLImageElement

package/src/components/DatePicker/components/OuterInput.tsx

@@ -1,7 +1,7 @@
 import { TextInput } from '../../components'
 import { DatePickerProps } from '../types'
 
-export const OuterInput: DatePickerProps['outerInputComponent'] = ({ hideInput, ...props }) => {
+export const OuterInput: DatePickerProps['outerInputComponent'] = ({ hideInput, onChange, value, ...props }) => {
   if (hideInput) {
     return null
   }
@@ -9,18 +9,9 @@ export const OuterInput: DatePickerProps['outerInputComponent'] = ({ hideInput,
   return (
     <TextInput
       debugName='DatePicker - OuterInputComponent'
-      masking={{
-        type: 'custom',
-        options: {
-          mask: 'xx/xx/xxxx',
-          placeholder: props.placeholder,
-          formatChars: {
-            x: '[0123456789]',
-          },
-          maskChar: '',
-        },
-      }}
       {...props}
+      value={value}
+      onChangeText={onChange}
     />
   )
 }

package/src/components/DatePicker/index.tsx

@@ -1,11 +1,13 @@
 import { useCallback, useConditionalState } from '@codeleap/hooks'
 import { View } from '../components'
 import { DatePickerProps } from './types'
-import ReactDatePicker from 'react-datepicker'
+import { DatePicker as ReactDatePicker } from 'react-datepicker'
 import { DayContent, Header, OuterInput, YearContent } from './components'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
+import { useInputBase } from '../InputBase/useInputBase'
+import { fields } from '@codeleap/form'
 
 export * from './styles'
 export * from './types'
@@ -16,6 +18,7 @@ export function DatePicker(props: DatePickerProps) {
     hideInput,
     value,
     onValueChange,
+    field,
     style,
     defaultValue,
     outerInputComponent: OuterInputComponent,
@@ -47,44 +50,49 @@ export function DatePicker(props: DatePickerProps) {
   const [visible, toggle] = useConditionalState(providedVisible, providedToggle, { initialValue: false })
   const [yearShow, setYearShow] = useConditionalState(providedYearShow, providedSetYearShow, { initialValue: false })
 
+  const {
+    inputValue,
+    onInputValueChange,
+  } = useInputBase(field, fields.date, { value, onValueChange })
+
   const DayContentComponent = useCallback(({ day, date }) => {
     return (
       <DayContent
         day={day}
         date={date}
         {...providedDayProps}
-        value={value}
+        value={inputValue}
         minDate={minDate}
         maxDate={maxDate}
         component={dayComponent}
         styles={styles}
       />
     )
-  }, [value])
+  }, [inputValue])
 
   const YearContentComponent = useCallback(({ year }) => {
     return (
       <YearContent
         year={year}
         {...providedYearProps}
-        value={value}
+        value={inputValue}
         component={yearComponent}
         styles={styles}
       />
     )
-  }, [value])
+  }, [inputValue])
 
   return (
     <View style={styles.wrapper}>
       <ReactDatePicker
-        onChange={onValueChange}
+        onChange={(date) => onInputValueChange(date as any)}
+        selected={inputValue}
         open={visible}
-        selected={value}
         todayButton={null}
         shouldCloseOnSelect={false}
-        openToDate={defaultValue ?? value}
+        openToDate={defaultValue ?? inputValue}
         dateFormat='dd/MM/yyyy'
-        formatWeekDay={(t) => t[0]}
+        formatWeekDay={(day) => day.charAt(0)}
         calendarStartDay={1}
         placeholderText={otherProps?.placeholder}
         disabled={disabled}
@@ -130,7 +138,7 @@ export function DatePicker(props: DatePickerProps) {
           if (date.getFullYear() < startDate.getFullYear() || date.getFullYear() > maxDate.getFullYear()) return false
           return true
         }}
-        {...datePickerProps}
+        {...datePickerProps as any}
       />
     </View>
   )

package/src/components/DatePicker/types.ts

@@ -1,8 +1,9 @@
-import { StylesOf } from '@codeleap/types'
-import { ReactDatePickerCustomHeaderProps, ReactDatePickerProps } from 'react-datepicker'
+import { AnyFunction, StylesOf } from '@codeleap/types'
+import { ReactDatePickerCustomHeaderProps, DatePickerProps as ReactDatePickerProps } from 'react-datepicker'
 import { ActionIconProps, TextInputProps } from '../components'
 import { DatePickerComposition, DatePickerHeaderComposition } from './styles'
 import { StyledProp } from '@codeleap/styles'
+import { DateField } from '@codeleap/form'
 
 export type DatePickerOuterInputProps = TextInputProps & {
   valueLabel: React.ReactNode
@@ -12,6 +13,7 @@ export type DatePickerOuterInputProps = TextInputProps & {
 export type DatePickerHeaderComponent = Omit<ReactDatePickerCustomHeaderProps, 'styles'> & {
   styles?: StylesOf<DatePickerHeaderComposition>
   formatHeaderTitle?: (date: Date) => string
+  setYearShow?: AnyFunction
 }
 
 export type DatePickerArrowProps = Partial<ActionIconProps> & {
@@ -38,7 +40,7 @@ type RootDatePickerProps = 'startDate' | 'minDate' | 'maxDate'
 
 export type DatePickerProps =
   Omit<Partial<Pick<Partial<ReactDatePickerProps>, RootDatePickerProps>>, 'style'> &
-  Omit<TextInputProps, 'defaultValue' | 'style'> &
+  Omit<TextInputProps, 'defaultValue' | 'style' | 'value' | 'onValueChange'> &
   {
     style?: StyledProp<DatePickerComposition>
     hideInput?: boolean
@@ -56,6 +58,7 @@ export type DatePickerProps =
     toggle?: () => void
     yearShow?: boolean
     setYearShow?: () => void
-    value: Date
-    onValueChange: (date: Date) => void
+    value?: Date
+    onValueChange?: (value: Date) => void
+    field?: DateField<any>
   }

package/src/components/Dropzone/index.tsx

@@ -109,7 +109,7 @@ const FilePreview = (props: DropzoneFilePreviewProps) => {
   )
 }
 
-export const Dropzone = forwardRef<DropzoneRef, DropzoneProps>((props, ref) => {
+export const Dropzone = (props: DropzoneProps) => {
   const {
     icon,
     placeholder,
@@ -126,6 +126,7 @@ export const Dropzone = forwardRef<DropzoneRef, DropzoneProps>((props, ref) => {
     children,
     FilePreviewComponent,
     style,
+    ref,
     ...rest
   } = {
     ...Dropzone.defaultProps,
@@ -221,7 +222,7 @@ export const Dropzone = forwardRef<DropzoneRef, DropzoneProps>((props, ref) => {
         <input {...getInputProps() as HTMLProps<HTMLInputElement>} />
       </View>
     </View>)
-}) as StyledComponentWithProps<DropzoneProps>
+}
 
 Dropzone.styleRegistryName = 'Dropzone'
 

package/src/components/Dropzone/types.ts

@@ -3,6 +3,7 @@ import { DropzoneComposition } from './styles'
 import { DropzoneOptions, FileRejection, DropzoneRef as ReactDropzoneRef } from 'react-dropzone'
 import { ActionIconComposition } from '../ActionIcon'
 import { AppIcon, StyledProp } from '@codeleap/styles'
+import { RefObject } from 'react'
 
 export type DropzoneFile = File
 
@@ -23,7 +24,8 @@ export type DropzoneProps =
     fileRightIcon?: AppIcon
     fileLeftIcon?: AppIcon
     withImagePreview?: boolean
-    FilePreviewComponent?: (props: DropzoneInnerFilePreviewProps) => JSX.Element
+    FilePreviewComponent?: (props: DropzoneInnerFilePreviewProps) => React.ReactElement
+    ref?: RefObject<DropzoneRef | null>
   }
 
 export type DropzoneFilePreviewProps =

package/src/components/EmptyPlaceholder/types.ts

@@ -20,12 +20,12 @@ export type EmptyPlaceholderProps =
     itemName?: string
     title?: React.ReactElement | string
     description?: React.ReactElement | string
-    icon?: AppIcon | ((props: EmptyPlaceholderProps) => JSX.Element)
+    icon?: AppIcon | ((props: EmptyPlaceholderProps) => React.ReactElement)
     image?: string
     imageProps?: ImgHTMLAttributes<HTMLImageElement>
     loading?: boolean
     style?: StyledProp<EmptyPlaceholderComposition>
-    renderEmpty?: (props: RenderEmptyProps) => JSX.Element
+    renderEmpty?: (props: RenderEmptyProps) => React.ReactElement
     wrapperProps?: ViewProps
     imageWrapperProps?: ViewProps
     indicatorProps?: Partial<ActivityIndicatorProps>

package/src/components/FileInput/index.tsx

@@ -5,20 +5,21 @@ import { FileInputProps, FileInputRef } from './types'
 
 export * from './types'
 
-export const FileInput = forwardRef<FileInputRef, FileInputProps>((props, ref) => {
+export const FileInput = (props: FileInputProps) => {
   const inputRef = useRef<HTMLInputElement>(null)
 
   const {
     onFileSelect,
     autoClear,
     onChange,
+    ref,
     ...inputProps
   } = {
     ...FileInput.defaultProps,
     ...props,
   }
 
-  const resolveWithFile = useRef<(file: WebInputFile[]) => any>()
+  const resolveWithFile = useRef<(file: WebInputFile[]) => any>(undefined)
 
   const clearInput = useCallback(() => {
     if (!inputRef.current) return
@@ -66,7 +67,7 @@ export const FileInput = forwardRef<FileInputRef, FileInputProps>((props, ref) =
       onChange={handleChange}
     />
   )
-})
+}
 
 FileInput.defaultProps = {
   autoClear: true,

package/src/components/FileInput/types.ts

@@ -1,5 +1,6 @@
 import { WebInputFile } from '@codeleap/types'
 import { HTMLProps } from '../../types'
+import { RefObject } from 'react'
 
 export type FileInputRef = {
   openFilePicker: () => Promise<WebInputFile[]>
@@ -11,4 +12,5 @@ export type FileInputProps =
   {
     onFileSelect?: (files: WebInputFile[]) => void
     autoClear?: boolean
+    ref?: RefObject<FileInputRef | null>
   }

package/src/components/InputBase/useInputBase.ts

@@ -14,7 +14,7 @@ export function useInputBase<V,  T extends Field<V, any, any, unknown> = Field<V
 
   const hasInternalState = useMemo(() => TypeGuards.isFunction(onValueChange) && !TypeGuards.isNil(value), [])
 
-  const wrapperRef = useRef<HTMLDivElement>()
+  const wrapperRef = useRef<HTMLDivElement>(undefined)
 
   const innerInputRef = useRef<HTMLInputElement>(null)
 

package/src/components/InputBase/utils.ts

@@ -1,6 +1,6 @@
 import { IconState, IconStyles, InputBaseKey, InputBaseProps, OmitDiff } from './types'
 
-export function selectInputBaseProps<T extends Omit<InputBaseProps, 'style'>>(props: T): {
+export function selectInputBaseProps<T extends Omit<InputBaseProps, 'style' | 'ref'>>(props: T): {
   inputBaseProps: InputBaseProps
   others: OmitDiff<T, T>
 } {