@codeleap/web 3.25.0 → 3.25.2

package/src/components/ColorPicker/types.ts

@@ -1,39 +1,25 @@
 import React from 'react'
-import { ActionIconProps, ColorPickerComposition } from '../components'
-import { AppIcon, ICSS, StyledProp } from '@codeleap/styles'
+import { ActionIconProps, IconProps } from '../components'
 import { RgbColor, RgbaColor, HslColor, HsvColor, HslaColor, HsvaColor } from 'react-colorful'
+import { ComponentVariants } from '@codeleap/common'
+import { ColorPickerComposition, ColorPickerPresets } from './styles'
 
 export type ColorTypes = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor | string
 
-export type ColorPickerFooterProps = Pick<ColorPickerProps, 'confirmIcon' | 'clearIcon'> & {
-  color?: ColorTypes
-  handleConfirmation: (value: ColorTypes) => void
-  handleClear: (value: ColorTypes) => void
-  styles: Record<ColorPickerComposition, ICSS>
-}
-
-export type ColorPickerPickerProps = {
-  color: ColorTypes
-  visible: boolean
-  toggle: (v?: boolean) => void
-}
-
-export type ColorPickerProps = {
-  style?: StyledProp<ColorPickerComposition>
+export type ColorPickerProps = React.PropsWithChildren<{
+  styles?: ColorPickerComposition
+  style?: React.CSSProperties
   isPlain?: boolean
   closeOnConfirm?: boolean
   initialColor?: ColorTypes
   showFooter?: boolean
-  icon?: AppIcon
-  clearIcon?: AppIcon
-  confirmIcon?: AppIcon
+  icon?: IconProps['name']
+  clearIcon?: IconProps['name']
+  confirmIcon?: IconProps['name']
   openPickerProps?: ActionIconProps
   onConfirm?: (color: ColorTypes) => void
   onClear?: () => void
-  openPickerComponent?: (props: ColorPickerPickerProps) => JSX.Element
+  openPickerComponent?: (props: { color: ColorTypes; visible: boolean; toggle: (v?: boolean) => void }) => JSX.Element
   pickerComponent?: (props: any) => JSX.Element
-  footerComponent?: (props: ColorPickerFooterProps) => JSX.Element
-  visible?: boolean
-  toggle?: React.Dispatch<React.SetStateAction<boolean>>
-  children?: React.ReactNode
-}
+  footerComponent?: (props: {color: ColorTypes; handleConfirmation: () => void; handleClear: () => void}) => JSX.Element
+} & ComponentVariants<typeof ColorPickerPresets>>

package/src/components/CropPicker/index.tsx

@@ -1,115 +1,119 @@
-import React, { forwardRef, Ref } from 'react'
-import { StyledComponentWithProps, useCompositionStyles } from '@codeleap/styles'
+import React, { forwardRef } from 'react'
+import {
+  getNestedStylesByKey,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { CropPickerPresets } from './styles'
 import { CropPickerProps } from './types'
-import { useCropPicker } from '../../lib'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { FileInput, FileInputRef } from '../FileInput'
-import { Modal } from '../Modal'
-import { Button } from '../Button'
-import { LoadingOverlay } from '../LoadingOverlay'
+import { useCropPicker } from './useCropPicker'
+import { Modal, Button, FileInput, FileInputRef, LoadingOverlay } from '../components'
 
 const ReactCrop: React.ElementType = require('react-image-crop').Component
-
 import 'react-image-crop/dist/ReactCrop.css'
 
 export * from './styles'
 export * from './types'
+export * from './utils'
+export * from './useCropPicker'
 
-export const CropPicker = forwardRef<FileInputRef, CropPickerProps>((props, ref) => {
-  const {
-    onFileSelect,
-    targetCrop,
-    modalProps,
-    title,
-    confirmButton,
-    debugName,
-    handle,
-    withLoading,
-    style,
-    confirmButtonProps,
-    ...fileInputProps
-  } = {
-    ...CropPicker.defaultProps,
-    ...props,
-  }
+export const _CropPicker = forwardRef<FileInputRef, CropPickerProps>(
+  (props: CropPickerProps, ref) => {
+    const allProps = {
+      // @ts-ignore
+      ...CropPicker.defaultProps,
+      ...props,
+    }
 
-  const {
-    onConfirmCrop,
-    onFilesReturned,
-    onClose,
-    fileInputRef,
-    visible,
-    image,
-    crop,
-    setRelativeCrop,
-    isLoading,
-    handleCropChange,
-  } = handle || useCropPicker({ onFileSelect, ref: ref as unknown as Ref<FileInputRef>, ...targetCrop })
+    const {
+      onFileSelect,
+      targetCrop,
+      variants = [],
+      responsiveVariants = {},
+      styles = {},
+      modalProps = {},
+      title = 'Crop Image',
+      confirmButton = 'Confirm Crop',
+      debugName,
+      handle,
+      withLoading = false,
+      confirmButtonProps,
+      ...fileInputProps
+    } = allProps
 
-  const styles = useStylesFor(CropPicker.styleRegistryName, style)
+    const {
+      onConfirmCrop,
+      onFilesReturned,
+      onClose,
+      fileInputRef,
+      visible,
+      image,
+      crop,
+      setRelativeCrop,
+      isLoading,
+      handleCropChange,
+    } = handle || useCropPicker({ onFileSelect, ref, ...targetCrop })
 
-  const composition = useCompositionStyles(['confirmButton', 'modal'], styles)
+    const variantStyles = useDefaultComponentStyle<
+      'u:CropPicker',
+      typeof CropPickerPresets
+    >('u:CropPicker', {
+      variants,
+      responsiveVariants,
+      styles,
+    })
 
-  return (
-    <>
-      <FileInput
-        // @ts-ignore
-        ref={fileInputRef}
-        onChange={(files) => onFilesReturned(files)}
-        {...fileInputProps}
-      />
+    const buttonStyles = getNestedStylesByKey('confirmButton', variantStyles)
+    const modalStyles = getNestedStylesByKey('modal', variantStyles)
 
-      <Modal
-        visible={visible}
-        toggle={onClose}
-        title={title}
-        footer={
-          <Button
-            text={confirmButton}
-            style={composition?.confirmButton}
-            onPress={onConfirmCrop}
-            debugName={debugName}
-            {...confirmButtonProps}
-          />
-        }
-        {...modalProps}
-        style={composition?.modal}
-      >
-        {!!image?.src ? (
-          <ReactCrop
-            crop={crop}
-            onChange={handleCropChange}
-            onComplete={(_, relCrop) => setRelativeCrop(relCrop)}
-            {...targetCrop}
-            style={styles.previewSize}
-          >
-            <img
-              src={image?.src}
-              // @ts-expect-error
-              css={[styles.cropPreview, styles.previewSize]}
+    return (
+      <>
+        <FileInput
+          ref={fileInputRef}
+          onChange={(files) => onFilesReturned(files)}
+          {...fileInputProps}
+        />
+        <Modal
+          visible={visible}
+          toggle={onClose}
+          title={title}
+          styles={modalStyles}
+          footer={
+            <Button
+              text={confirmButton}
+              styles={buttonStyles}
+              onPress={onConfirmCrop}
+              debugName={debugName}
+              {...confirmButtonProps}
             />
-          </ReactCrop>
-        ) : null}
-        {withLoading ? <LoadingOverlay debugName='CropPicker' visible={isLoading} /> : null}
-      </Modal>
-    </>
-  )
-}) as StyledComponentWithProps<CropPickerProps>
-
-CropPicker.styleRegistryName = 'CropPicker'
-CropPicker.elements = ['previewSize', 'cropPreview', 'confirmButton', 'modal']
-CropPicker.rootElement = 'previewSize'
-
-CropPicker.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return CropPicker as (props: StyledComponentProps<CropPickerProps, typeof styles>) => IJSX
-}
-
-CropPicker.defaultProps = {
-  title: 'Crop Image',
-  confirmButton: 'Confirm Crop',
-  withLoading: false,
-} as Partial<CropPickerProps>
+          }
+          {...modalProps}
+        >
+          {!!image?.src && (
+            <ReactCrop
+              crop={crop}
+              onChange={handleCropChange}
+              onComplete={(_, relCrop) => setRelativeCrop(relCrop)}
+              style={variantStyles.previewSize}
+              {...targetCrop}
+            >
+              <img
+                src={image?.src}
+                css={[variantStyles.cropPreview, variantStyles.previewSize]}
+              />
+            </ReactCrop>
+          )}
+          {
+            withLoading ? (
+              <LoadingOverlay
+                debugName='CropPicker'
+                visible={isLoading}
+              />
+            ) : null
+          }
+        </Modal>
+      </>
+    )
+  },
+)
 
-WebStyleRegistry.registerComponent(CropPicker)
+export const CropPicker = React.memo(_CropPicker)

package/src/components/CropPicker/styles.ts

@@ -1,3 +1,4 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ButtonComposition } from '../Button'
 import { ModalComposition } from '../Modal'
 
@@ -6,3 +7,9 @@ export type CropPickerComposition =
   | 'previewSize'
   | `confirmButton${Capitalize<ButtonComposition>}`
   | `modal${Capitalize<ModalComposition>}`
+
+const createCropPickerStyle =
+  createDefaultVariantFactory<CropPickerComposition>()
+
+export const CropPickerPresets = includePresets((style) => createCropPickerStyle(() => ({ modalWrapper: style })),
+)

package/src/components/CropPicker/types.ts

@@ -1,25 +1,34 @@
-import { StyledProp } from '@codeleap/styles'
-import { FileInputProps } from '../FileInput'
-import { CropPickerComposition } from './styles'
+import { AnyRef, ComponentVariants } from '@codeleap/common'
+import { FileInputProps, FileInputRef } from '../FileInput'
+import { CropPickerComposition, CropPickerPresets } from './styles'
+import { StylesOf } from '../../types'
 import { ReactCropProps } from 'react-image-crop'
 import { ModalProps } from '../Modal'
-import { useCropPicker } from '../../lib'
+import { useCropPicker } from './useCropPicker'
 import { ButtonProps } from '../Button'
 
+export type CropImageType = 'png' | 'jpeg' | 'webp'
+
 export type BaseCropProps = Partial<ReactCropProps>
 
-export type CropPickerProps =
-  Partial<FileInputProps> &
-  {
-    style?: StyledProp<CropPickerComposition>
+export type CropPickerProps = Partial<FileInputProps> &
+  ComponentVariants<typeof CropPickerPresets> & {
+    styles?: StylesOf<CropPickerComposition>
+    style?: React.CSSProperties
     targetCrop?: BaseCropProps
     modalProps?: Partial<ModalProps>
     title?: string
     confirmButton?: string
     debugName: string
     handle?: ReturnType<typeof useCropPicker>
+    ref: AnyRef<HTMLElement>
     withLoading?: boolean
     confirmButtonProps?: Partial<ButtonProps>
   }
 
 export type ImageReading = HTMLImageElement
+
+export type UseCropPickerProps = Partial<ReactCropProps> & {
+  onFileSelect: FileInputProps['onFileSelect']
+  ref: React.MutableRefObject<FileInputRef> | React.Ref<FileInputRef>
+}

package/src/{lib/hooks/useCropPicker.ts → components/CropPicker/useCropPicker.tsx}

@@ -7,63 +7,10 @@ import {
   useRef,
   useState,
 } from '@codeleap/common'
-import { ImageReading } from '../../components/CropPicker'
-import { FileInputProps, FileInputRef } from '../../components/FileInput'
-import { Crop, ReactCropProps } from 'react-image-crop'
-
-export type UseCropPickerProps = Partial<ReactCropProps> & {
-  onFileSelect: FileInputProps['onFileSelect']
-  ref: React.MutableRefObject<FileInputRef> | React.Ref<FileInputRef>
-}
-
-export function readImage(file: File | Blob): Promise<ImageReading> {
-  const reader = new FileReader()
-  return new Promise<ImageReading>((resolve) => {
-    reader.onload = () => {
-      const image = new Image()
-      image.onload = () => resolve(image)
-      image.src = reader.result as string
-    }
-    reader.readAsDataURL(file)
-  })
-}
-
-export function cropImage(image: ImageReading, crop: Crop): Promise<[string, Blob]> {
-  const canvas = document.createElement('canvas')
-  const ctx = canvas.getContext('2d', { alpha: true })
-
-  if (!ctx) throw new Error('No 2d context')
-
-  canvas.width = image.naturalWidth * (crop.width / 100)
-  canvas.height = image.naturalHeight * (crop.height / 100)
-
-  const x = image.naturalWidth * (crop.x / 100)
-  const y = image.naturalHeight * (crop.y / 100)
-
-  ctx.drawImage(
-    image,
-    x,
-    y,
-    canvas.width,
-    canvas.height,
-    0,
-    0,
-    canvas.width,
-    canvas.height,
-  )
-
-  return new Promise<[string, Blob]>((resolve, reject) => {
-    canvas.toBlob(blob => {
-      if (!blob) {
-        reject(new Error('Canvas is empty'))
-        return
-      }
-      readImage(blob).then(cropped => {
-        resolve([cropped.src, blob])
-      }).catch(reject)
-    }, 'image/png')
-  })
-}
+import { CropImageType, ImageReading, UseCropPickerProps } from './types'
+import { Crop } from 'react-image-crop'
+import { cropImage, readImage } from './utils'
+import { FileInputRef } from '../FileInput'
 
 export function useCropPicker({
   onFileSelect,
@@ -93,9 +40,9 @@ export function useCropPicker({
     setTimeout(() => setImage(null), 500)
   }
 
-  const onConfirmCrop = async () => {
+  const onConfirmCrop = async (imageType: CropImageType = 'jpeg') => {
     setIsLoading(true)
-    const [preview, croppedFile] = await cropImage(image, relativeCrop)
+    const [preview, croppedFile] = await cropImage(image, relativeCrop, imageType)
     onResolved([
       {
         file: new File([croppedFile], 'cropped.jpg'),
@@ -114,15 +61,15 @@ export function useCropPicker({
     const { naturalWidth, naturalHeight } = imageData
     const imageAspect = naturalWidth / naturalHeight
     const v =
-        imageAspect >= aspect
-          ? {
-            width: ((naturalHeight * aspect) / naturalWidth) * 100,
-            height: 100,
-          }
-          : {
-            width: 100,
-            height: (naturalWidth / aspect / naturalHeight) * 100,
-          }
+      imageAspect >= aspect
+        ? {
+          width: ((naturalHeight * aspect) / naturalWidth) * 100,
+          height: 100,
+        }
+        : {
+          width: 100,
+          height: (naturalWidth / aspect / naturalHeight) * 100,
+        }
     const initialCrop: Crop = {
       ...v,
       x: (100 - v.width) / 2,

package/src/components/CropPicker/utils.ts

@@ -0,0 +1,51 @@
+import { Crop } from 'react-image-crop'
+import { CropImageType, ImageReading } from './types'
+
+export function readImage(file: File | Blob): Promise<ImageReading> {
+  const reader = new FileReader()
+  return new Promise<ImageReading>((resolve) => {
+    reader.onload = () => {
+      const image = new Image()
+      image.onload = () => resolve(image)
+      image.src = reader.result as string
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
+export function cropImage(image: ImageReading, crop: Crop, type: CropImageType): Promise<[string, Blob]> {
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d', { alpha: true })
+
+  if (!ctx) throw new Error('No 2d context')
+
+  canvas.width = image.naturalWidth * (crop.width / 100)
+  canvas.height = image.naturalHeight * (crop.height / 100)
+
+  const x = image.naturalWidth * (crop.x / 100)
+  const y = image.naturalHeight * (crop.y / 100)
+
+  ctx.drawImage(
+    image,
+    x,
+    y,
+    canvas.width,
+    canvas.height,
+    0,
+    0,
+    canvas.width,
+    canvas.height,
+  )
+
+  return new Promise<[string, Blob]>((resolve, reject) => {
+    canvas.toBlob(blob => {
+      if (!blob) {
+        reject(new Error('Canvas is empty'))
+        return
+      }
+      readImage(blob).then(cropped => {
+        resolve([cropped.src, blob])
+      }).catch(reject)
+    }, `image/${type}`)
+  })
+}

package/src/components/DatePicker/{components → defaultComponents}/Header.tsx

@@ -1,13 +1,20 @@
-import { TypeGuards } from '@codeleap/common'
+import {
+  IconPlaceholder,
+  TypeGuards,
+  getNestedStylesByKey,
+} from '@codeleap/common'
 import { ActionIcon, Text, View } from '../../components'
 import { DatePickerArrowProps, DatePickerHeaderComponent } from '../types'
 import { format, getYear } from 'date-fns'
-import { AppIcon, useCompositionStyles } from '@codeleap/styles'
 
-export const ArrowLabel = ({ name, direction, ...props }: DatePickerArrowProps) => {
+export const ArrowLabel: React.FC<DatePickerArrowProps> = ({
+  name,
+  direction,
+  ...props
+}) => {
   return (
     <ActionIcon
-      name={name ?? (`chevron-${direction}` as AppIcon)}
+      name={name ?? (`chevron-${direction}` as IconPlaceholder)}
       debugName={'Calendar arrowLabel'}
       {...props}
     />
@@ -37,14 +44,15 @@ export const Header = (props: DatePickerHeaderComponent) => {
     ? formatHeaderTitle(date)
     : `${month} ${year}`
 
-  const compositionStyles = useCompositionStyles(['prevButton', 'nextButton'], styles)
+  const prevArrow = getNestedStylesByKey('prevButton', styles)
+  const nextArrow = getNestedStylesByKey('nextButton', styles)
 
   return (
     <View style={styles.wrapper}>
       <View style={styles.buttonsWrapper}>
         <ArrowLabel
           direction='left'
-          style={compositionStyles.prevButton}
+          styles={prevArrow}
           onPress={decreaseYear}
           disabled={prevYearButtonDisabled}
         />
@@ -55,7 +63,7 @@ export const Header = (props: DatePickerHeaderComponent) => {
         />
         <ArrowLabel
           direction='right'
-          style={compositionStyles.nextButton}
+          styles={nextArrow}
           onPress={increaseYear}
           disabled={nextYearButtonDisabled}
         />
@@ -63,13 +71,13 @@ export const Header = (props: DatePickerHeaderComponent) => {
       <View style={styles.buttonsWrapper}>
         <ArrowLabel
           direction='left'
-          style={compositionStyles.prevButton}
+          styles={prevArrow}
           onPress={decreaseMonth}
           disabled={prevMonthButtonDisabled}
         />
         <ArrowLabel
           direction='right'
-          style={compositionStyles.nextButton}
+          styles={nextArrow}
           onPress={increaseMonth}
           disabled={nextMonthButtonDisabled}
         />

package/src/components/DatePicker/{components → defaultComponents}/OuterInput.tsx

@@ -1,12 +1,13 @@
 import { TextInput } from '../../components'
 import { DatePickerProps } from '../types'
 
-export const OuterInput: DatePickerProps['outerInputComponent'] = ({ valueLabel, focused, hideInput, ...props }) => {
-  if (hideInput) {
-    return null
-  }
-
-  return (
+export const OuterInput: DatePickerProps['outerInputComponent'] = ({
+  valueLabel,
+  focused,
+  hideInput,
+  ...props
+}) => {
+  return hideInput ? null : (
     <TextInput
       validate={!focused && props?.validate}
       debugName='DatePicker - OuterInputComponent'