@codeleap/web 6.2.3 → 6.8.0

package/src/components/CropPicker/utils.ts

@@ -0,0 +1,104 @@
+import { Crop } from 'react-image-crop'
+
+/** Reads a `File` or `Blob` as a data-URL and resolves with a loaded `HTMLImageElement`. */
+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)
+  })
+}
+
+/**
+ * Renders the specified percentage-unit `crop` region of `image` onto an off-screen canvas and returns a `[dataURL, Blob]` tuple.
+ * The output blob is always `image/png` at quality 1.
+ */
+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)}`)
+  }
+}
+
+/**
+ * Scales natural image dimensions down to fit within a 600×400 display budget while preserving aspect ratio.
+ * Returns both the original natural dimensions and the calculated display dimensions.
+ */
+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/DatePicker/index.tsx

@@ -1,171 +1,118 @@
-import { useCallback, useConditionalState } from '@codeleap/hooks'
-import { View } from '../components'
-import { DatePickerProps } from './types'
-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 { useRef } from 'react'
+import { Popover } from 'react-aria-components'
+import { CalendarDate, getLocalTimeZone } from '@internationalized/date'
+import { useConditionalState } from '@codeleap/hooks'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { fields } from '@codeleap/form'
+import { View } from '../View'
+import { Calendar } from '../Calendar'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { useFieldInput } from '../Field'
+import { DatePickerProps } from './types'
 
 export * from './styles'
 export * from './types'
-export * from './components'
 
+function dateToCalendarDate(date: Date | null | undefined): CalendarDate | null {
+  if (!date) return null
+  return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
+}
+
+function calendarDateToDate(cal: CalendarDate): Date {
+  return cal.toDate(getLocalTimeZone())
+}
+
+function defaultFormatDate(date: Date): string {
+  return date.toLocaleDateString(undefined, { day: '2-digit', month: '2-digit', year: 'numeric' })
+}
+
+/**
+ * Date selection control that pairs a fully custom trigger element with a `react-aria-components` `Popover` containing a `Calendar`.
+ * Converts native `Date` values to/from `@internationalized/date` `CalendarDate` for the calendar; closes the popover after a date is selected.
+ * Uses: `View`, `Calendar`
+ */
 export function DatePicker(props: DatePickerProps) {
   const {
-    hideInput,
     value,
     onValueChange,
     field,
     style,
     defaultValue,
-    outerInputComponent: OuterInputComponent,
-    headerComponent: HeaderComponent,
-    headerProps: _headerProps,
-    dayComponent,
-    dayProps: providedDayProps,
-    yearComponent,
-    yearProps: providedYearProps,
-    datePickerProps,
+    renderTrigger,
+    calendarProps,
     minDate,
     maxDate,
-    startDate,
     disabled,
     visible: providedVisible,
     toggle: providedToggle,
-    yearShow: providedYearShow,
-    setYearShow: providedSetYearShow,
-    ...otherProps
-  } = {
-    ...DatePicker.defaultProps,
-    ...props,
-  }
+    formatDate,
+    label,
+    helper,
+    placeholder,
+    forceError,
+  } = { ...DatePicker.defaultProps, ...props }
 
   const styles = useStylesFor(DatePicker.styleRegistryName, style)
+  const triggerRef = useRef<HTMLElement | null>(null)
+  const [isOpen, setIsOpen] = useConditionalState(providedVisible, providedToggle, { initialValue: false })
 
-  const compositionStyles = useCompositionStyles(['outerInput', 'header'], styles)
+  const { inputValue, onInputValueChange, validation } = useFieldInput(field, fields.date, { value, onValueChange })
 
-  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 hasError = validation?.showError || !!forceError
+  const errorMessage = validation?.message || forceError
 
-  const DayContentComponent = useCallback(({ day, date }) => {
-    return (
-      <DayContent
-        day={day}
-        date={date}
-        {...providedDayProps}
-        value={inputValue}
-        minDate={minDate}
-        maxDate={maxDate}
-        component={dayComponent}
-        styles={styles}
-      />
-    )
-  }, [inputValue])
+  const formattedValue = inputValue ? (formatDate ?? defaultFormatDate)(inputValue) : ''
 
-  const YearContentComponent = useCallback(({ year }) => {
-    return (
-      <YearContent
-        year={year}
-        {...providedYearProps}
-        value={inputValue}
-        component={yearComponent}
-        styles={styles}
-      />
-    )
-  }, [inputValue])
+  const handleCalendarChange = (date: CalendarDate) => {
+    onInputValueChange(calendarDateToDate(date) as any)
+    setIsOpen(false)
+  }
 
   return (
     <View style={styles.wrapper}>
-      <ReactDatePicker
-        onChange={(date) => onInputValueChange(date as any)}
-        selected={inputValue}
-        open={visible}
-        todayButton={null}
-        shouldCloseOnSelect={false}
-        openToDate={defaultValue ?? inputValue}
-        dateFormat='dd/MM/yyyy'
-        formatWeekDay={(day) => day.charAt(0)}
-        calendarStartDay={1}
-        placeholderText={otherProps?.placeholder}
-        disabled={disabled}
-        renderDayContents={(day, date) => (
-          <DayContentComponent day={day} date={date} />
-        )}
-        customInput={
-          <OuterInputComponent
-            style={compositionStyles.outerInput}
-            focused={visible}
-            hideInput={hideInput}
-            {...otherProps}
-          />
-        }
-        renderCustomHeader={(headerProps) => (
-          <HeaderComponent
-            styles={compositionStyles.header}
-            setYearShow={setYearShow}
-            prevYearButtonDisabled={yearShow}
-            nextYearButtonDisabled={yearShow}
-            {...headerProps}
-            {..._headerProps}
-          />
-        )}
-        onFocus={() => toggle(true)}
-        onSelect={() => (yearShow ? setYearShow(false) : toggle(false))}
-        onClickOutside={() => {
-          toggle(false)
-          setYearShow(false)
-        }}
-        minDate={minDate}
-        maxDate={maxDate}
-        endDate={maxDate}
-        startDate={startDate}
-        onYearChange={() => setYearShow(false)}
-        yearItemNumber={maxDate.getFullYear() - minDate.getFullYear()}
-        showYearPicker={yearShow}
-        renderYearContent={(year) => {
-          if (year < startDate.getFullYear() || year > maxDate.getFullYear()) return null
-          return <YearContentComponent year={year} />
-        }}
-        filterDate={(date) => {
-          if (date.getFullYear() < startDate.getFullYear() || date.getFullYear() > maxDate.getFullYear()) return false
-          return true
-        }}
-        {...datePickerProps as any}
-      />
+      {renderTrigger?.({
+        ref: triggerRef,
+        value: inputValue ?? null,
+        formattedValue,
+        isOpen,
+        onPress: () => setIsOpen(!isOpen),
+        disabled: !!disabled,
+        style: (styles as any).trigger,
+        label,
+        placeholder,
+        helper,
+        error: hasError ? errorMessage : undefined,
+        hasValue: !!inputValue,
+      })}
+      <Popover
+        triggerRef={triggerRef}
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        css={(styles as any).popover}
+      >
+        <Calendar
+          value={dateToCalendarDate(inputValue) ?? undefined}
+          onChange={handleCalendarChange}
+          minValue={dateToCalendarDate(minDate) ?? undefined}
+          maxValue={dateToCalendarDate(maxDate) ?? undefined}
+          defaultValue={dateToCalendarDate(defaultValue) ?? undefined}
+          {...calendarProps}
+        />
+      </Popover>
     </View>
   )
 }
 
 DatePicker.styleRegistryName = 'DatePicker'
-
-DatePicker.elements = [
-  'wrapper',
-  'day',
-  'year',
-  'outerInput',
-  'header',
-]
-
+DatePicker.elements = ['wrapper', 'popover', 'trigger']
 DatePicker.rootElement = 'wrapper'
-
 DatePicker.withVariantTypes = <S extends AnyRecord>(styles: S) => {
   return DatePicker as (props: StyledComponentProps<DatePickerProps, typeof styles>) => IJSX
 }
-
 DatePicker.defaultProps = {
   minDate: new Date(1910, 0, 1),
   maxDate: new Date(),
-  startDate: new Date(1923, 0, 1),
-  outerInputComponent: OuterInput,
-  headerComponent: Header,
   disabled: false,
 } as Partial<DatePickerProps>
 

package/src/components/DatePicker/styles.ts

@@ -1,23 +1,3 @@
-import { ActionIconComposition } from '../ActionIcon'
-import { TextInputComposition } from '../TextInput'
+export type DatePickerParts = 'wrapper' | 'popover' | 'trigger'
 
-export type DatePickerStates = ':selected' | ':disabled' | ''
-
-export type DatePickerParts =
-  | 'wrapper'
-  | `dayWrapper${DatePickerStates}`
-  | `day${DatePickerStates}`
-  | `yearWrapper${DatePickerStates}`
-  | `year${DatePickerStates}`
-
-export type DatePickerHeaderComposition =
-  | 'wrapper'
-  | 'buttonsWrapper'
-  | `prevButton${Capitalize<ActionIconComposition>}`
-  | `nextButton${Capitalize<ActionIconComposition>}`
-  | 'title'
-
-export type DatePickerComposition =
-  | DatePickerParts
-  | `outerInput${Capitalize<TextInputComposition>}`
-  | `header${Capitalize<DatePickerHeaderComposition>}`
+export type DatePickerComposition = DatePickerParts

package/src/components/DatePicker/types.ts

@@ -1,64 +1,52 @@
-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 React from 'react'
+import { CalendarProps } from '../Calendar'
+import { DatePickerComposition } from './styles'
+import { StyleProp } from '@codeleap/styles'
 import { DateField } from '@codeleap/form'
+import { FieldExternalProps } from '../Field'
 
-export type DatePickerOuterInputProps = TextInputProps & {
-  valueLabel: React.ReactNode
-  hideInput?: boolean
-}
-
-export type DatePickerHeaderComponent = Omit<ReactDatePickerCustomHeaderProps, 'styles'> & {
-  styles?: StylesOf<DatePickerHeaderComposition>
-  formatHeaderTitle?: (date: Date) => string
-  setYearShow?: AnyFunction
-}
+export interface DatePickerStyleDef {}
 
-export type DatePickerArrowProps = Partial<ActionIconProps> & {
-  direction: 'left' | 'right'
+/** Props injected into the custom trigger renderer provided via `DatePicker`'s `renderTrigger`. */
+export type DatePickerTriggerRenderProps = {
+  ref: React.RefObject<HTMLElement | null>
+  value: Date | null
+  formattedValue: string
+  isOpen: boolean
+  onPress: () => void
+  disabled: boolean
+  style?: any
+  label?: React.ReactNode
+  placeholder?: string
+  helper?: React.ReactNode
+  /** Error message string when validation fails or `forceError` is set; `undefined` otherwise. */
+  error?: string
+  hasValue: boolean
 }
 
-export type DayComponentProps = {
-  day: string | number
-  value?: Date
-  date: Date
+/**
+ * Props for `DatePicker`.
+ * `renderTrigger` is required to provide the element that opens the calendar popover; the render prop receives a `ref` that must be forwarded to the trigger element for popover positioning.
+ * Dates are converted between native `Date` and `@internationalized/date` `CalendarDate` internally; `minDate` defaults to `1910-01-01` and `maxDate` to today.
+ * `visible`/`toggle` enable external control of the popover state.
+ * Accepts `label`, `helper`, `leftSection`, `rightSection`, `wrapperRef`, `boxRef` via `FieldExternalProps`; all are forwarded to `renderTrigger` so the trigger can display them.
+ * `forceError` bypasses field validation and passes an error string unconditionally to the trigger.
+ */
+export type DatePickerProps = FieldExternalProps & {
+  style?: StyleProp<DatePickerComposition, keyof DatePickerStyleDef>
+  value?: Date | null
+  onValueChange?: (value: Date) => void
+  field?: DateField<any>
+  defaultValue?: Date
+  minDate?: Date
+  maxDate?: Date
   disabled?: boolean
-  selected?: boolean
-  styles?: DatePickerProps['style']
+  visible?: boolean
+  toggle?: (value: boolean) => void
+  renderTrigger?: (props: DatePickerTriggerRenderProps) => React.ReactNode
+  calendarProps?: Partial<CalendarProps>
+  formatDate?: (date: Date) => string
+  debugName?: string
+  placeholder?: string
+  forceError?: string
 }
-
-export type YearComponentProps = {
-  year: string | number
-  value: Date
-  selected?: boolean
-  styles: DatePickerProps['style']
-}
-
-type RootDatePickerProps = 'startDate' | 'minDate' | 'maxDate'
-
-export type DatePickerProps =
-  Omit<Partial<Pick<Partial<ReactDatePickerProps>, RootDatePickerProps>>, 'style'> &
-  Omit<TextInputProps, 'defaultValue' | 'style' | 'value' | 'onValueChange'> &
-  {
-    style?: StyledProp<DatePickerComposition>
-    hideInput?: boolean
-    outerInputComponent?: React.ComponentType<Partial<DatePickerOuterInputProps>>
-    headerComponent?: React.ComponentType<Partial<DatePickerHeaderComponent>>
-    headerProps?: Partial<DatePickerHeaderComponent>
-    dayComponent?: React.ComponentType<Partial<DayComponentProps>>
-    dayProps?: Partial<DayComponentProps>
-    yearComponent?: React.ComponentType<Partial<YearComponentProps>>
-    yearProps?: Partial<YearComponentProps>
-    formatDate?: (date: Date | string) => React.ReactNode
-    datePickerProps?: Omit<Partial<ReactDatePickerProps>, 'customInput' | 'renderCustomHeader' | RootDatePickerProps>
-    defaultValue?: Date
-    visible?: boolean
-    toggle?: () => void
-    yearShow?: boolean
-    setYearShow?: () => void
-    value?: Date
-    onValueChange?: (value: Date) => void
-    field?: DateField<any>
-  }