@codeleap/web 6.2.3 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "6.2.3",
+  "version": "6.3.0",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -9,14 +9,14 @@
   },
   "license": "UNLICENSED",
   "devDependencies": {
-    "@codeleap/config": "6.2.3",
-    "@codeleap/hooks": "6.2.3",
-    "@codeleap/i18n": "6.2.3",
-    "@codeleap/logger": "6.2.3",
-    "@codeleap/query": "6.2.3",
-    "@codeleap/types": "6.2.3",
-    "@codeleap/utils": "6.2.3",
-    "@codeleap/store": "6.2.3"
+    "@codeleap/config": "6.3.0",
+    "@codeleap/hooks": "6.3.0",
+    "@codeleap/i18n": "6.3.0",
+    "@codeleap/logger": "6.3.0",
+    "@codeleap/query": "6.3.0",
+    "@codeleap/types": "6.3.0",
+    "@codeleap/utils": "6.3.0",
+    "@codeleap/store": "6.3.0"
   },
   "scripts": {
     "build": "tsc --build",
@@ -47,14 +47,14 @@
     "uuid": "13.0.0"
   },
   "peerDependencies": {
-    "@codeleap/types": "6.2.3",
-    "@codeleap/utils": "6.2.3",
-    "@codeleap/hooks": "6.2.3",
-    "@codeleap/i18n": "6.2.3",
-    "@codeleap/query": "6.2.3",
-    "@codeleap/logger": "6.2.3",
-    "@codeleap/styles": "6.2.3",
-    "@codeleap/store": "6.2.3",
+    "@codeleap/types": "6.3.0",
+    "@codeleap/utils": "6.3.0",
+    "@codeleap/hooks": "6.3.0",
+    "@codeleap/i18n": "6.3.0",
+    "@codeleap/query": "6.3.0",
+    "@codeleap/logger": "6.3.0",
+    "@codeleap/styles": "6.3.0",
+    "@codeleap/store": "6.3.0",
     "@emotion/react": "11.14.0",
     "@reach/router": "^1.3.4",
     "dayjs": "1.11.18",

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "6.2.3",
+  "version": "6.3.0",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/CropPicker/components/CropPickerFooter.tsx

@@ -0,0 +1,39 @@
+import { ICSS } from '@codeleap/styles'
+import { Button, ButtonComposition } from '../../Button'
+import { View } from '../../View'
+import { AnyFunction, StylesOf } from '@codeleap/types'
+
+export type CropPickerFooterProps = {
+  footerStyle: ICSS
+  confirmStyles: StylesOf<ButtonComposition>
+  cancelStyles: StylesOf<ButtonComposition>
+  onConfirmCrop: AnyFunction
+  onCancelCrop: AnyFunction
+}
+
+export const CropPickerFooter = (props: CropPickerFooterProps) => {
+  const {
+    footerStyle,
+    confirmStyles,
+    cancelStyles,
+    onConfirmCrop,
+    onCancelCrop,
+  } = props
+
+  return (
+    <View style={footerStyle}>
+      <Button
+        text={'Cancel'}
+        onPress={onCancelCrop}
+        debugName={'cropModal:cancel'}
+        style={cancelStyles}
+      />
+      <Button
+        text={'Confirm'}
+        onPress={onConfirmCrop}
+        debugName={'cropModal:confirm'}
+        style={confirmStyles}
+      />
+    </View>
+  )
+}

package/src/components/CropPicker/hooks.ts

@@ -0,0 +1,173 @@
+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 = {
+  file: File
+  aspect?: number
+  minWidth?: number
+  minHeight?: number
+  onCrop?: (croppedFile: WebInputFile | null) => void
+}
+
+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,88 @@
-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'
-
-const ReactCrop: React.ElementType = require('react-image-crop').Component
+import { View } from '../View'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { CropPickerFooter } from './components/CropPickerFooter'
+import { CropPickerProps } from './types'
 
 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'
+export * from './components/CropPickerFooter'
 
 export const CropPicker = (props: CropPickerProps) => {
   const {
-    onFileSelect,
-    targetCrop,
-    modalProps,
-    title,
-    confirmButton,
-    debugName,
-    handle,
-    withLoading,
     style,
-    confirmButtonProps,
-    ref,
-    ...fileInputProps
+    handle,
+    reactCrop,
+    aspect,
+    children,
+    FooterComponent,
   } = {
     ...CropPicker.defaultProps,
     ...props,
   }
 
+  const styles = useStylesFor(CropPicker.styleRegistryName, style)
+  const compositionStyles = useCompositionStyles(['indicator', 'confirm', 'cancel'], 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)
+    handleConfirmCrop,
+    handleCancelCrop,
+  } = handle
 
-  const composition = useCompositionStyles(['confirmButton', 'modal'], styles)
+  if (!image?.src) return <View style={styles.loadingWrapper}><ActivityIndicator style={compositionStyles.indicator} debugName='CropPickerLoading' /></View>
 
   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}
-          />
-        }
-        {...modalProps}
-        style={composition?.modal}
+      <ReactCrop
+        {...reactCrop}
+        crop={crop}
+        onChange={handleCropChange}
+        onComplete={(_, relCrop) => setRelativeCrop(relCrop)}
+        style={styles.crop}
+        aspect={aspect ?? reactCrop?.aspect}
       >
-        {!!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>
+        <img
+          src={image.src}
+          // @ts-ignore
+          css={[styles?.image]}
+        />
+      </ReactCrop>
+
+      {children}
+
+      <FooterComponent
+        footerStyle={styles.footer}
+        confirmStyles={compositionStyles.confirm}
+        cancelStyles={compositionStyles.cancel}
+        onConfirmCrop={handleConfirmCrop}
+        onCancelCrop={handleCancelCrop}
+      />
     </>
   )
 }
 
 CropPicker.styleRegistryName = 'CropPicker'
-CropPicker.elements = ['previewSize', 'cropPreview', 'confirmButton', 'modal']
-CropPicker.rootElement = 'previewSize'
-
+CropPicker.elements = ['crop', 'image', 'footer', 'confirm', 'cancel', 'indicator', 'loadingWrapper']
+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,
+  FooterComponent: CropPickerFooter,
 } as Partial<CropPickerProps>
 
 WebStyleRegistry.registerComponent(CropPicker)

package/src/components/CropPicker/styles.ts

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

package/src/components/CropPicker/types.ts

@@ -1,27 +1,22 @@
 import { StyledProp } from '@codeleap/styles'
-import { FileInputProps, FileInputRef } from '../FileInput'
+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'
+import { CropPickerFooterProps } from './components/CropPickerFooter'
 
-export type BaseCropProps = Partial<ReactCropProps>
+type NativeCropProps = Omit<ReactCropProps, 'crop' | 'onChange' | 'onComplete' | 'style'>
 
 export type CropPickerProps =
-  Partial<FileInputProps> &
   {
-    style?: StyledProp<CropPickerComposition>
-    targetCrop?: BaseCropProps
-    modalProps?: Partial<ModalProps>
-    title?: string
-    confirmButton?: string
+    FooterComponent?: React.ComponentType<Partial<CropPickerFooterProps>>
     debugName: string
+    style?: StyledProp<CropPickerComposition>
     handle?: ReturnType<typeof useCropPicker>
-    withLoading?: boolean
-    confirmButtonProps?: Partial<ButtonProps>
+    aspect?: number
+    reactCrop?: NativeCropProps
+    children?: React.ReactNode
     ref?: RefObject<FileInputRef | null>
   }
-
-export type ImageReading = HTMLImageElement

package/src/components/CropPicker/utils.ts

@@ -0,0 +1,95 @@
+import { Crop } from 'react-image-crop'
+
+export function readImage(file: File | Blob): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.onload = () => {
+      const image = new Image()
+      image.onload = () => resolve(image)
+      image.onerror = () => reject(new Error('Failed to load image'))
+      image.src = reader.result as string
+    }
+
+    reader.onerror = () => reject(new Error('Failed to read file'))
+    reader.readAsDataURL(file)
+  })
+}
+
+export async function cropImage(
+  image: HTMLImageElement,
+  crop: Crop,
+): Promise<[string, Blob]> {
+  if (!crop.width || !crop.height) {
+    throw new Error('Invalid crop dimensions')
+  }
+
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d', { willReadFrequently: true })
+
+  if (!ctx) {
+    throw new Error('Could not get canvas 2d context')
+  }
+
+  const scaleX = image.naturalWidth / 100
+  const scaleY = image.naturalHeight / 100
+
+  canvas.width = crop.width * scaleX
+  canvas.height = crop.height * scaleY
+
+  ctx.drawImage(
+    image,
+    crop.x * scaleX,
+    crop.y * scaleY,
+    canvas.width,
+    canvas.height,
+    0,
+    0,
+    canvas.width,
+    canvas.height,
+  )
+
+  try {
+    const blob = await new Promise<Blob>((resolve, reject) => {
+      canvas.toBlob(
+        blob => blob ? resolve(blob) : reject(new Error('Canvas is empty')),
+        'image/png',
+        1,
+      )
+    })
+
+    const croppedImage = await readImage(blob)
+
+    return [croppedImage.src, blob]
+  } catch (error) {
+    throw new Error(`Failed to crop image: ${error instanceof Error ? error.message : String(error)}`)
+  }
+}
+
+export const calculateProportionalDimensions = (naturalWidth: number, naturalHeight: number) => {
+  const aspectRatio = naturalWidth / naturalHeight
+
+  const maxWidth = 600
+  const maxHeight = 400
+
+  let displayWidth = naturalWidth
+  let displayHeight = naturalHeight
+
+  if (displayHeight > maxHeight) {
+    displayHeight = maxHeight
+    displayWidth = displayHeight * aspectRatio
+  }
+
+  if (displayWidth > maxWidth) {
+    displayWidth = maxWidth
+    displayHeight = displayWidth / aspectRatio
+  }
+
+  return {
+    naturalWidth,
+    naturalHeight,
+    displayWidth: Math.round(displayWidth),
+    displayHeight: Math.round(displayHeight),
+    aspectRatio,
+  }
+}

package/src/components/View/index.tsx

@@ -1,5 +1,5 @@
 import { TypeGuards } from '@codeleap/types'
-import React, { ElementType } from 'react'
+import { ElementType } from 'react'
 import { motion } from 'motion/react'
 import { ViewProps } from './types'
 import { getTestId } from '../../lib/utils/test'

package/src/lib/hooks/index.ts

@@ -15,6 +15,5 @@ export * from './useWindowFocus'
 export * from './useWindowSize'
 export * from './useKeydown'
 export * from './useRefresh'
-export * from './useCropPicker'
 export * from './useFileInput'
 export * from './useStylesFor'

package/dist/lib/hooks/useCropPicker.d.ts

@@ -1,36 +0,0 @@
-import { WebInputFile } from '@codeleap/types';
-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>;
-};
-type ImageType = 'png' | 'jpeg' | 'webp';
-export declare function readImage(file: File | Blob): Promise<ImageReading>;
-export declare function cropImage(image: ImageReading, crop: Crop, type: ImageType): Promise<[string, Blob]>;
-export declare function useCropPicker({ onFileSelect, ref, aspect, minWidth: minW, minHeight: minH, }: UseCropPickerProps): {
-    onCancel: () => Promise<void>;
-    onResolved: (files: WebInputFile[]) => void;
-    cleanup: () => void;
-    onConfirmCrop: (imageType?: ImageType) => Promise<void>;
-    onFilesReturned: (event: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
-    onClose: () => void;
-    fileInputRef: import("react").RefObject<FileInputRef>;
-    visible: boolean;
-    toggle: (value?: boolean) => void;
-    image: HTMLImageElement;
-    setImage: import("react").Dispatch<import("react").SetStateAction<HTMLImageElement>>;
-    crop: Crop;
-    setCrop: import("react").Dispatch<import("react").SetStateAction<Crop>>;
-    relativeCrop: Crop;
-    setRelativeCrop: import("react").Dispatch<import("react").SetStateAction<Crop>>;
-    isLoading: boolean;
-    croppedPromise: {
-        _await: () => Promise<WebInputFile[]>;
-        resolve: (value: WebInputFile[]) => Promise<void>;
-        reject: (err: any) => Promise<void>;
-    };
-    handleCropChange: (newCrop: Crop) => void;
-};
-export {};