@codeleap/web 6.2.3 → 6.8.0

package/src/components/Checkbox/styles.ts

@@ -1,16 +1,4 @@
-import { InputBaseParts, InputBaseStates } from '../InputBase'
+import { FieldParts } from '../Field'
 
-type AnimatableParts = 'checkmarkWrapper' | 'box'
-
-export type CheckboxParts = InputBaseParts | AnimatableParts | 'checkmark'
-
-export type CheckboxAnimationStates = 'checked' | 'unchecked' | 'disabled-checked' | 'disabled-unchecked'
-
-export type CheckboxStates = InputBaseStates
-
-export type CheckboxComposition =
-  | CheckboxParts
-  | `${CheckboxParts}:${CheckboxStates}`
-  | `${AnimatableParts}:transition`
-  | `${AnimatableParts}:${CheckboxAnimationStates}`
-  | '__props'
+type CheckboxParts = FieldParts | 'box' | 'checkmarkWrapper' | 'checkmark'
+export type CheckboxComposition = CheckboxParts

package/src/components/Checkbox/types.ts

@@ -1,17 +1,31 @@
 import { CheckboxComposition } from './styles'
-import { InputBaseProps } from '../InputBase'
-import { ComponentCommonProps } from '../../types'
-import { AppIcon, StyledProp } from '@codeleap/styles'
+import { FieldProps } from '../Field'
+import { FieldStateContext } from '../Field/styles'
+import { AppIcon, ICSS, StyleProp } from '@codeleap/styles'
 import { BooleanField } from '@codeleap/form'
 
+export interface CheckboxStyleDef {
+  __internal: Record<CheckboxComposition, ICSS>
+}
+
+/** Extends `FieldStateContext` with the checkbox-position flag used for style variants. */
+export interface CheckboxFieldContext extends FieldStateContext {
+  checkboxOnLeft?: boolean
+}
+
+/**
+ * Props for `Checkbox`.
+ * `checkboxOnLeft` repositions the tick box before the label; exposed as a context flag so variant styles can react.
+ * `checkIcon` overrides the icon rendered inside the tick box (defaults to `'check'`).
+ */
 export type CheckboxProps =
-  Pick<InputBaseProps, 'disabled' | 'label'> &
-  ComponentCommonProps &
-  {
-    style?: StyledProp<CheckboxComposition>
+  Pick<FieldProps, 'label' | 'helper' | 'leftSection' | 'rightSection'> & {
+    style?: StyleProp<CheckboxComposition, keyof CheckboxStyleDef>
     checkboxOnLeft?: boolean
     checkIcon?: AppIcon
     field?: BooleanField<any>
     value?: boolean
     onValueChange?: (value: boolean) => void
+    disabled?: boolean
+    debugName?: string
   }

package/src/components/Collapse/index.tsx

@@ -7,6 +7,10 @@ import { motion } from 'motion/react'
 export * from './styles'
 export * from './types'
 
+/**
+ * Animates a content region between zero height (collapsed) and its natural height (expanded) using Framer Motion.
+ * Fully controlled — pass `open` from the caller; the component owns no toggle state of its own.
+ */
 export const Collapse = (props: CollapseProps) => {
   const {
     open,
@@ -27,7 +31,6 @@ export const Collapse = (props: CollapseProps) => {
       transition={{ duration: 0.2 }}
       {...rest}
       style={open ? styles?.['wrapper:open'] : styles?.['wrapper:closed']}
-      // @ts-expect-error css type
       css={[styles.wrapper, open ? styles?.['wrapper:open'] : styles?.['wrapper:closed']]}
     >
       {children}

package/src/components/Collapse/types.ts

@@ -1,11 +1,14 @@
-import { StyledProp } from '@codeleap/styles'
+import { StyleProp, StyledProp } from '@codeleap/styles'
 import { MotionProps } from 'motion/react'
 import { CollapseComposition } from './styles'
 
+export interface CollapseStyleDef {}
+
 export type CollapseProps =
   Omit<MotionProps, 'style'> &
   {
+    /** Controls expanded (`true`) or collapsed (`false`) state; the component is fully controlled. */
     open: boolean
-    style?: StyledProp<CollapseComposition>
+    style?: StyleProp<CollapseComposition, keyof CollapseStyleDef>
     children?: React.ReactNode
   }

package/src/components/ColorPicker/index.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback } from 'react'
-import { ActionIcon, Collapse, View } from '../components'
+import { Button } from '../Button'
+import { Collapse } from '../Collapse'
+import { View } from '../View'
 import { HexColorPicker } from 'react-colorful'
 import { TypeGuards } from '@codeleap/types'
 import { useConditionalState, useState } from '@codeleap/hooks'
@@ -16,13 +18,13 @@ const DefaultFooter = (props: ColorPickerFooterProps) => {
 
   return (
     <View style={styles.footerWrapper}>
-      <ActionIcon
+      <Button
         debugName='ColorPicker footer trash'
         name={clearIcon}
         onPress={handleClear}
         style={styles.clearIcon}
       />
-      <ActionIcon
+      <Button
         debugName='ColorPicker footer check'
         name={confirmIcon}
         onPress={handleConfirmation}
@@ -32,6 +34,11 @@ const DefaultFooter = (props: ColorPickerFooterProps) => {
   )
 }
 
+/**
+ * Color selection control that wraps any `react-colorful` picker in either an inline (`isPlain`) or collapsible-dropdown layout with optional confirm/clear footer actions.
+ * Internal color state is initialised from `initialColor`; `onConfirm` fires only when the user explicitly confirms (not on every picker drag).
+ * Uses: `Button`, `Collapse`, `View`
+ */
 export const ColorPicker = (props: ColorPickerProps) => {
   const {
     isPlain,
@@ -79,7 +86,7 @@ export const ColorPicker = (props: ColorPickerProps) => {
       toggle={() => toggle(!visible)}
     />
   ) : (
-    <ActionIcon
+    <Button
       onPress={() => toggle(!visible)}
       icon={icon}
       {...openPickerProps}

package/src/components/ColorPicker/types.ts

@@ -1,10 +1,14 @@
 import React from 'react'
-import { ActionIconProps, ColorPickerComposition } from '../components'
-import { AppIcon, ICSS, StyledProp } from '@codeleap/styles'
+import { ButtonProps, ColorPickerComposition } from '../components'
+import { AppIcon, ICSS, StyleProp, StyledProp } from '@codeleap/styles'
 import { RgbColor, RgbaColor, HslColor, HsvColor, HslaColor, HsvaColor } from 'react-colorful'
 
+export interface ColorPickerStyleDef {}
+
+/** Union of all `react-colorful` color-object types plus a plain CSS hex/string. */
 export type ColorTypes = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor | string
 
+/** Props injected into the footer renderer by `ColorPicker`. */
 export type ColorPickerFooterProps = Pick<ColorPickerProps, 'confirmIcon' | 'clearIcon'> & {
   color?: ColorTypes
   handleConfirmation: (value: ColorTypes) => void
@@ -12,14 +16,22 @@ export type ColorPickerFooterProps = Pick<ColorPickerProps, 'confirmIcon' | 'cle
   styles: Record<ColorPickerComposition, ICSS>
 }
 
+/** Props injected into the custom open-picker trigger renderer by `ColorPicker`. */
 export type ColorPickerPickerProps = {
   color: ColorTypes
   visible: boolean
   toggle: (v?: boolean) => void
 }
 
+/**
+ * Props for `ColorPicker`.
+ * In the default (dropdown) mode a `Button` trigger opens a `Collapse` panel containing the picker; set `isPlain` to render the picker inline with no toggle.
+ * `visible`/`toggle` allow external control of the dropdown state; omit them for fully internal state.
+ * `pickerComponent` defaults to `HexColorPicker`; replace it with any `react-colorful` picker or a custom component.
+ * Confirmation and clear are handled by `footerComponent` (defaults to `DefaultFooter`); set `showFooter={false}` to hide it.
+ */
 export type ColorPickerProps = {
-  style?: StyledProp<ColorPickerComposition>
+  style?: StyleProp<ColorPickerComposition, keyof ColorPickerStyleDef>
   isPlain?: boolean
   closeOnConfirm?: boolean
   initialColor?: ColorTypes
@@ -27,7 +39,7 @@ export type ColorPickerProps = {
   icon?: AppIcon
   clearIcon?: AppIcon
   confirmIcon?: AppIcon
-  openPickerProps?: ActionIconProps
+  openPickerProps?: ButtonProps
   onConfirm?: (color: ColorTypes) => void
   onClear?: () => void
   openPickerComponent?: (props: ColorPickerPickerProps) => React.ReactElement

package/src/components/CropPicker/hooks.ts

@@ -0,0 +1,182 @@
+import { useMemo } from 'react'
+import { WebInputFile } from '@codeleap/types'
+import { useCallback, useEffect, useState } from 'react'
+import { Crop } from 'react-image-crop'
+import { calculateProportionalDimensions, cropImage, readImage } from './utils'
+
+export type UseCropPicker = {
+  /** Source image file to load into the crop editor. */
+  file: File
+  /** Enforced aspect ratio for the crop selection; omit to allow free-form cropping. */
+  aspect?: number
+  /** Minimum crop width in pixels; defaults to 100. */
+  minWidth?: number
+  /** Minimum crop height in pixels; defaults to 100. */
+  minHeight?: number
+  /** Called with the cropped `WebInputFile` on confirm, or `null` when the user cancels. */
+  onCrop?: (croppedFile: WebInputFile | null) => void
+}
+
+/**
+ * Manages crop state for a `CropPicker`, including image loading, crop selection with minimum-size enforcement, confirm/cancel handlers, and display-size calculation.
+ * Pass the return value to `CropPicker` via the `handle` prop.
+ */
+export function useCropPicker({
+  aspect,
+  minWidth: minW,
+  minHeight: minH,
+  file,
+  onCrop,
+}: UseCropPicker) {
+  const [image, setImage] = useState<HTMLImageElement>(null)
+  const [crop, setCrop] = useState<Crop>()
+  const [relativeCrop, setRelativeCrop] = useState<Crop>()
+
+  const [imageDimensions, setImageDimensions] = useState<{
+    naturalWidth: number
+    naturalHeight: number
+    displayWidth: number
+    displayHeight: number
+    aspectRatio: number
+  } | null>(null)
+
+  const cleanup = () => {
+    setRelativeCrop(null)
+    setCrop(undefined)
+    setImageDimensions(null)
+    setTimeout(() => setImage(null), 500)
+  }
+
+  const handleConfirmCrop = async () => {
+    const [preview, croppedBlob] = await cropImage(image, relativeCrop)
+
+    const newImage: WebInputFile = {
+      file: new File([croppedBlob], 'cropped.jpg', {
+        type: 'image/jpeg',
+        lastModified: Date.now(),
+      }),
+      preview,
+    }
+
+    onCrop(newImage)
+
+    setTimeout(() => cleanup())
+  }
+
+  const handleCancelCrop = () => {
+    onCrop(null)
+
+    setTimeout(() => cleanup())
+  }
+
+  const loadFile = useCallback(async (toReadFile: File) => {
+    const imageData = await readImage(toReadFile)
+    const { naturalWidth, naturalHeight } = imageData
+
+    const dimensions = calculateProportionalDimensions(naturalWidth, naturalHeight)
+
+    setImageDimensions(dimensions)
+
+    const targetAspect = aspect || dimensions.aspectRatio
+    const imageAspect = dimensions.aspectRatio
+
+    let initialCrop: Crop
+
+    if (aspect) {
+      const v =
+        imageAspect >= targetAspect
+          ? {
+            width: ((naturalHeight * targetAspect) / naturalWidth) * 100,
+            height: 100,
+          }
+          : {
+            width: 100,
+            height: (naturalWidth / targetAspect / naturalHeight) * 100,
+          }
+
+      initialCrop = {
+        ...v,
+        x: (100 - v.width) / 2,
+        y: (100 - v.height) / 2,
+        unit: '%' as const,
+      }
+    } else {
+      initialCrop = {
+        width: 100,
+        height: 100,
+        x: 0,
+        y: 0,
+        unit: '%' as const,
+      }
+    }
+
+    setCrop(initialCrop)
+    setRelativeCrop(initialCrop)
+    setImage(imageData)
+  }, [])
+
+  const getMinDimensions = useCallback(() => {
+    if (!imageDimensions) return { minWidth: minW ?? 100, minHeight: minH ?? 100 }
+
+    const targetAspect = aspect || imageDimensions.aspectRatio
+    const calculatedMinWidth = (minW ?? 100) * targetAspect
+    const calculatedMinHeight = minH ?? 100
+
+    return {
+      minWidth: Math.max(calculatedMinWidth, 50),
+      minHeight: Math.max(calculatedMinHeight, 50),
+    }
+  }, [aspect, imageDimensions, minW, minH])
+
+  const handleCropChange = useCallback((newCrop: Crop) => {
+    if (!imageDimensions) {
+      setCrop(newCrop)
+      return
+    }
+
+    const { minWidth, minHeight } = getMinDimensions()
+
+    setCrop({
+      ...newCrop,
+      width: newCrop.width < minWidth ? minWidth : newCrop.width,
+      height: newCrop.height < minHeight ? minHeight : newCrop.height,
+    })
+  }, [imageDimensions, getMinDimensions])
+
+  const containerStyles = useMemo(() => {
+    if (!imageDimensions) return {}
+
+    return {
+      width: imageDimensions.displayWidth,
+      height: imageDimensions.displayHeight,
+      maxWidth: '90vw',
+      maxHeight: '70vh',
+      margin: '0 auto',
+    }
+  }, [imageDimensions])
+
+  const imageStyles = useMemo(() => {
+    if (!imageDimensions) return {}
+
+    return {
+      width: imageDimensions.displayWidth,
+      height: imageDimensions.displayHeight,
+      objectFit: 'contain' as const,
+    }
+  }, [imageDimensions])
+
+  useEffect(() => {
+    loadFile(file)
+  }, [])
+
+  return {
+    containerStyles,
+    imageStyles,
+    handleCropChange,
+    handleConfirmCrop,
+    handleCancelCrop,
+    setRelativeCrop,
+    crop,
+    image,
+  }
+}

package/src/components/CropPicker/index.tsx

@@ -1,116 +1,79 @@
-import React, { forwardRef, Ref } from 'react'
-import { StyledComponentWithProps, useCompositionStyles } from '@codeleap/styles'
-import { CropPickerProps } from './types'
-import { useCropPicker } from '../../lib'
+import React from 'react'
+import { StyledComponentProps, AnyRecord, IJSX, useCompositionStyles } from '@codeleap/styles'
 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 { View } from '../View'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { CropPickerProps } from './types'
 
-const ReactCrop: React.ElementType = require('react-image-crop').Component
 
 import 'react-image-crop/dist/ReactCrop.css'
+const ReactCrop: React.ElementType = require('react-image-crop').Component
 
 export * from './styles'
 export * from './types'
+export * from './hooks'
 
+/**
+ * Image crop editor that wraps react-image-crop and delegates all crop state to a `useCropPicker` handle.
+ * Renders a loading spinner while the image is being decoded; renders nothing when `handle` is not provided.
+ */
 export const CropPicker = (props: CropPickerProps) => {
   const {
-    onFileSelect,
-    targetCrop,
-    modalProps,
-    title,
-    confirmButton,
-    debugName,
-    handle,
-    withLoading,
     style,
-    confirmButtonProps,
-    ref,
-    ...fileInputProps
+    handle,
+    reactCrop,
+    aspect,
+    children,
   } = {
     ...CropPicker.defaultProps,
     ...props,
   }
 
+  const styles = useStylesFor(CropPicker.styleRegistryName, style)
+  const compositionStyles = useCompositionStyles(['indicator'], styles)
+
+  if (!handle) return null
+
   const {
-    onConfirmCrop,
-    onFilesReturned,
-    onClose,
-    fileInputRef,
-    visible,
     image,
     crop,
     setRelativeCrop,
-    isLoading,
     handleCropChange,
-  } = handle || useCropPicker({ onFileSelect, ref: ref as unknown as Ref<FileInputRef>, ...targetCrop })
-
-  const styles = useStylesFor(CropPicker.styleRegistryName, style)
-
-  const composition = useCompositionStyles(['confirmButton', 'modal'], styles)
+  } = handle
 
   return (
-    <>
-      <FileInput
-        // @ts-ignore
-        ref={fileInputRef}
-        onChange={(files) => onFilesReturned(files)}
-        {...fileInputProps}
-      />
-
-      <Modal
-        visible={visible}
-        toggle={onClose}
-        title={title}
-        footer={
-          <Button
-            text={confirmButton}
-            style={composition?.confirmButton}
-            onPress={onConfirmCrop}
-            debugName={debugName}
-            {...confirmButtonProps}
+    <View style={styles.wrapper}>
+      {!image?.src ? (
+        <ActivityIndicator style={compositionStyles.indicator} debugName='CropPickerLoading' />
+      ) : (
+        <ReactCrop
+          {...reactCrop}
+          crop={crop}
+          onChange={handleCropChange}
+          onComplete={(_, relCrop) => setRelativeCrop(relCrop)}
+          style={styles.crop}
+          aspect={aspect ?? reactCrop?.aspect}
+        >
+          <img
+            src={image.src}
+            // @ts-ignore
+            css={[styles?.image]}
           />
-        }
-        {...modalProps}
-        style={composition?.modal}
-      >
-        {!!image?.src ? (
-          <ReactCrop
-            crop={crop}
-            onChange={handleCropChange}
-            onComplete={(_, relCrop) => setRelativeCrop(relCrop)}
-            {...targetCrop}
-            style={styles.previewSize}
-          >
-            <img
-              src={image?.src}
-              // @ts-ignore
-              css={[styles.cropPreview, styles.previewSize]}
-            />
-          </ReactCrop>
-        ) : null}
-        {withLoading ? <LoadingOverlay debugName='CropPicker' visible={isLoading} /> : null}
-      </Modal>
-    </>
+        </ReactCrop>
+      )}
+      {children}
+    </View>
   )
 }
 
 CropPicker.styleRegistryName = 'CropPicker'
-CropPicker.elements = ['previewSize', 'cropPreview', 'confirmButton', 'modal']
-CropPicker.rootElement = 'previewSize'
-
+CropPicker.elements = ['crop', 'image', 'wrapper', 'indicator']
+CropPicker.rootElement = 'crop'
 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>
+CropPicker.defaultProps = {} as Partial<CropPickerProps>
 
 WebStyleRegistry.registerComponent(CropPicker)

package/src/components/CropPicker/styles.ts

@@ -1,8 +1,7 @@
-import { ButtonComposition } from '../Button'
-import { ModalComposition } from '../Modal'
+import { ActivityIndicatorComposition } from '../ActivityIndicator'
 
 export type CropPickerComposition =
-  | 'cropPreview'
-  | 'previewSize'
-  | `confirmButton${Capitalize<ButtonComposition>}`
-  | `modal${Capitalize<ModalComposition>}`
+  | 'crop'
+  | 'image'
+  | 'wrapper'
+  | `indicator${Capitalize<ActivityIndicatorComposition>}`

package/src/components/CropPicker/types.ts

@@ -1,27 +1,25 @@
-import { StyledProp } from '@codeleap/styles'
-import { FileInputProps, FileInputRef } from '../FileInput'
+import { StyleProp, StyledProp } from '@codeleap/styles'
+import { FileInputRef } from '../FileInput'
+import type { ReactCropProps } from 'react-image-crop'
 import { CropPickerComposition } from './styles'
-import { ReactCropProps } from 'react-image-crop'
-import { ModalProps } from '../Modal'
-import { useCropPicker } from '../../lib'
-import { ButtonProps } from '../Button'
+import React from 'react'
+import { useCropPicker } from './hooks'
 import { RefObject } from 'react'
 
-export type BaseCropProps = Partial<ReactCropProps>
+type NativeCropProps = Omit<ReactCropProps, 'crop' | 'onChange' | 'onComplete' | 'style'>
+
+export interface CropPickerStyleDef {}
 
 export type CropPickerProps =
-  Partial<FileInputProps> &
   {
-    style?: StyledProp<CropPickerComposition>
-    targetCrop?: BaseCropProps
-    modalProps?: Partial<ModalProps>
-    title?: string
-    confirmButton?: string
     debugName: string
+    style?: StyleProp<CropPickerComposition, keyof CropPickerStyleDef>
+    /** Return value of `useCropPicker`; the component renders nothing when omitted. */
     handle?: ReturnType<typeof useCropPicker>
-    withLoading?: boolean
-    confirmButtonProps?: Partial<ButtonProps>
+    /** Enforced aspect ratio forwarded to react-image-crop; takes precedence over `reactCrop.aspect`. */
+    aspect?: number
+    /** Additional props forwarded directly to the underlying `ReactCrop` element (excluding `crop`, `onChange`, `onComplete`, and `style`). */
+    reactCrop?: NativeCropProps
+    children?: React.ReactNode
     ref?: RefObject<FileInputRef | null>
   }
-
-export type ImageReading = HTMLImageElement