@codeleap/web 3.24.2 → 3.25.0

package/src/components/ColorPicker/index.tsx

@@ -1,87 +1,115 @@
-/* eslint-disable max-len */
 import React, { useCallback } from 'react'
-import { ActionIcon, Collapse, ColorPickerPresets, View } from '../components'
+import { ActionIcon, Collapse, View } from '../components'
 import { HexColorPicker } from 'react-colorful'
-import { useBooleanToggle, useDefaultComponentStyle, useState } from '@codeleap/common'
-import { ColorPickerProps, ColorTypes } from './types'
+import { TypeGuards, useConditionalState, useState } from '@codeleap/common'
+import { ColorPickerProps, ColorTypes, ColorPickerFooterProps } from './types'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { AnyRecord, AppIcon, IJSX, StyledComponentProps } from '@codeleap/styles'
 
 export * from './styles'
 export * from './types'
 
-const defaultProps = {
-  pickerComponent: (props) => <HexColorPicker {...props}/>,
-  icon: 'edit',
-  clearIcon: 'trash',
-  confirmIcon: 'check',
-  showFooter: true,
+const DefaultFooter = (props: ColorPickerFooterProps) => {
+  const { styles, clearIcon, handleClear, confirmIcon, handleConfirmation } = props
+
+  return (
+    <View style={styles.footerWrapper}>
+      <ActionIcon
+        debugName='ColorPicker footer trash'
+        name={clearIcon}
+        onPress={handleClear}
+        style={styles.clearIcon}
+      />
+      <ActionIcon
+        debugName='ColorPicker footer check'
+        name={confirmIcon}
+        onPress={handleConfirmation}
+        style={styles.confirmIcon}
+      />
+    </View>
+  )
 }
 
 export const ColorPicker = (props: ColorPickerProps) => {
   const {
-    isPlain = false,
+    isPlain,
     initialColor,
     showFooter,
     icon,
+    style,
     clearIcon,
     confirmIcon,
-    variants = [],
-    styles = {},
-    responsiveVariants = {},
     onConfirm,
     onClear,
-    closeOnConfirm = true,
+    closeOnConfirm,
     pickerComponent: PickerComponent,
     openPickerComponent: OpenPickerComponent,
-    footerComponent: FooterComponent = null,
+    footerComponent: FooterComponent,
     openPickerProps,
-  } = props
-  const [visible, toggle] = useBooleanToggle(false)
-  const [color, setColor] = useState<ColorTypes>(initialColor)
+  } = {
+    ...ColorPicker.defaultProps,
+    ...props,
+  }
+
+  const styles = useStylesFor(ColorPicker.styleRegistryName, style)
 
-  const variantStyles = useDefaultComponentStyle<'u:ColorPicker', typeof ColorPickerPresets>('u:ColorPicker', {
-    variants,
-    styles,
-    responsiveVariants,
-  })
+  const [visible, toggle] = useConditionalState(props?.visible, props?.toggle, { initialValue: false })
+
+  const [color, setColor] = useState<ColorTypes>(initialColor)
 
-  const handleConfirmation = useCallback(() => {
+  const handleConfirmation = useCallback((color: ColorTypes) => {
     onConfirm?.(color)
-    closeOnConfirm && toggle(false)
-  }, [color])
+    if (closeOnConfirm) toggle(false)
+  }, [])
 
-  const handleClear = useCallback(() => {
+  const handleClear = useCallback((initialColor: ColorTypes) => {
     setColor(initialColor)
-    onClear?.()
-  }, [initialColor])
-
-  const Footer = useCallback(() => (
-    <View style={variantStyles.footerWrapper}>
-      <ActionIcon debugName='ColorPicker footer trash' name={clearIcon} onPress={handleClear} styles={variantStyles.footerButton} />
-      <ActionIcon debugName='ColorPicker footer check' name={confirmIcon} onPress={handleConfirmation} styles={variantStyles.footerButton} />
-    </View>
-  ), [clearIcon, confirmIcon, handleClear, handleConfirmation])
+    if (TypeGuards.isFunction(onClear)) onClear?.()
+  }, [])
 
   // Dragging to change the color in any other way does not seem to work for some reason.
-  const picker = <View style={variantStyles.picker}><PickerComponent color={color} onChange={setColor} /></View>
+  const picker = <View style={styles.picker}><PickerComponent color={color} onChange={setColor} /></View>
 
-  const _footer = !!showFooter && FooterComponent ? <FooterComponent color={color} handleConfirmation={handleConfirmation} handleClear={handleClear}/> : <Footer/>
-  const openColorPickerBtn = !!OpenPickerComponent ? <OpenPickerComponent color={color} visible={visible} toggle={toggle}/> : <ActionIcon onPress={toggle} icon={icon} {...openPickerProps}/>
+  const openColorPickerBtn = !!OpenPickerComponent ? (
+    <OpenPickerComponent
+      color={color}
+      visible={visible}
+      toggle={() => toggle(!visible)}
+    />
+  ) : (
+    <ActionIcon
+      onPress={() => toggle(!visible)}
+      icon={icon}
+      {...openPickerProps}
+    />
+  )
 
   return (
-    <View style={variantStyles.wrapper}>
+    <View style={styles.wrapper}>
       {isPlain ? picker : (
         <>
           {openColorPickerBtn}
           <Collapse
             open={visible}
-            styles={{ wrapper: [
-              variantStyles.dropdown,
-              visible && variantStyles['dropdown:open'],
-            ] }}
+            style={[
+              styles.dropdown,
+              visible && styles['dropdown:open'],
+            ]}
           >
-            <View style={variantStyles.dropdownInnerWrapper}>
+            <View style={styles.dropdownInnerWrapper}>
               {picker}
-              {_footer}
+
+              {showFooter ? (
+                <FooterComponent
+                  color={color}
+                  handleConfirmation={() => handleConfirmation(color)}
+                  handleClear={() => handleClear(initialColor)}
+                  styles={styles}
+                  clearIcon={clearIcon}
+                  confirmIcon={confirmIcon}
+                />
+              ) : null}
             </View>
           </Collapse>
         </>
@@ -90,4 +118,23 @@ export const ColorPicker = (props: ColorPickerProps) => {
   )
 }
 
-ColorPicker.defaultProps = defaultProps
+ColorPicker.styleRegistryName = 'ColorPicker'
+ColorPicker.elements = ['wrapper', 'picker', 'dropdown', 'dropdownInnerWrapper', 'footerWrapper', 'clearIcon', 'confirmIcon']
+ColorPicker.rootElement = 'wrapper'
+
+ColorPicker.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return ColorPicker as (props: StyledComponentProps<ColorPickerProps, typeof styles>) => IJSX
+}
+
+ColorPicker.defaultProps = {
+  pickerComponent: (props) => <HexColorPicker {...props} />,
+  footerComponent: DefaultFooter,
+  icon: 'edit' as AppIcon,
+  clearIcon: 'trash' as AppIcon,
+  confirmIcon: 'check' as AppIcon,
+  showFooter: true,
+  isPlain: false,
+  closeOnConfirm: true,
+} as Partial<ColorPickerProps>
+
+WebStyleRegistry.registerComponent(ColorPicker)

package/src/components/ColorPicker/styles.ts

@@ -1,13 +1,13 @@
-import { PartialComponentStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
-import { ActionIconComposition } from '../ActionIcon'
-
 type ColorPickerState = 'open'
-export type ColorPickerParts = 'wrapper' | 'picker' | 'dropdown' | `dropdown:${ColorPickerState}` | 'dropdownInnerWrapper' | 'footerWrapper'
-
-export type ColorPickerComposition = {
-  footerButton?: PartialComponentStyle<ActionIconComposition, any>
-} & {[x in ColorPickerParts]?: any}
-
-const createColorPickerStyle = createDefaultVariantFactory<'', ColorPickerComposition>()
 
-export const ColorPickerPresets = includePresets((styles) => createColorPickerStyle(() => ({ wrapper: styles })))
+export type ColorPickerParts =
+  'wrapper' |
+  'picker' |
+  'dropdown' |
+  `dropdown:${ColorPickerState}` |
+  'dropdownInnerWrapper' |
+  'footerWrapper' |
+  'clearIcon' |
+  'confirmIcon'
+
+export type ColorPickerComposition = ColorPickerParts

package/src/components/ColorPicker/types.ts

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

package/src/components/CropPicker/index.tsx

@@ -1,117 +1,115 @@
-import React, { forwardRef } from 'react'
-import {
-  getNestedStylesByKey,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
-import { CropPickerPresets } from './styles'
+import React, { forwardRef, Ref } from 'react'
+import { StyledComponentWithProps, useCompositionStyles } from '@codeleap/styles'
 import { CropPickerProps } from './types'
-import { useCropPicker } from './useCropPicker'
-import { Modal, Button, FileInput, FileInputRef, LoadingOverlay } from '../components'
+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'
 
 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: CropPickerProps, ref) => {
-    const allProps = {
-      // @ts-ignore
-      ...CropPicker.defaultProps,
-      ...props,
-    }
+export const CropPicker = forwardRef<FileInputRef, CropPickerProps>((props, ref) => {
+  const {
+    onFileSelect,
+    targetCrop,
+    modalProps,
+    title,
+    confirmButton,
+    debugName,
+    handle,
+    withLoading,
+    style,
+    confirmButtonProps,
+    ...fileInputProps
+  } = {
+    ...CropPicker.defaultProps,
+    ...props,
+  }
 
-    const {
-      onFileSelect,
-      targetCrop,
-      variants = [],
-      responsiveVariants = {},
-      styles = {},
-      modalProps = {},
-      title = 'Crop Image',
-      confirmButton = 'Confirm Crop',
-      debugName,
-      handle,
-      withLoading = false,
-      ...fileInputProps
-    } = allProps
+  const {
+    onConfirmCrop,
+    onFilesReturned,
+    onClose,
+    fileInputRef,
+    visible,
+    image,
+    crop,
+    setRelativeCrop,
+    isLoading,
+    handleCropChange,
+  } = handle || useCropPicker({ onFileSelect, ref: ref as unknown as Ref<FileInputRef>, ...targetCrop })
 
-    const {
-      onConfirmCrop,
-      onFilesReturned,
-      onClose,
-      fileInputRef,
-      visible,
-      image,
-      crop,
-      setRelativeCrop,
-      isLoading,
-      handleCropChange,
-    } = handle || useCropPicker({ onFileSelect, ref, ...targetCrop })
+  const styles = useStylesFor(CropPicker.styleRegistryName, style)
 
-    const variantStyles = useDefaultComponentStyle<
-      'u:CropPicker',
-      typeof CropPickerPresets
-    >('u:CropPicker', {
-      variants,
-      responsiveVariants,
-      styles,
-    })
+  const composition = useCompositionStyles(['confirmButton', 'modal'], styles)
 
-    const buttonStyles = getNestedStylesByKey('confirmButton', variantStyles)
-    const modalStyles = getNestedStylesByKey('modal', variantStyles)
+  return (
+    <>
+      <FileInput
+        // @ts-ignore
+        ref={fileInputRef}
+        onChange={(files) => onFilesReturned(files)}
+        {...fileInputProps}
+      />
 
-    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}
+      <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]}
             />
-          }
-          {...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>
-      </>
-    )
-  },
-)
+          </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>
 
-export const CropPicker = React.memo(_CropPicker)
+WebStyleRegistry.registerComponent(CropPicker)

package/src/components/CropPicker/styles.ts

@@ -1,4 +1,3 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ButtonComposition } from '../Button'
 import { ModalComposition } from '../Modal'
 
@@ -7,9 +6,3 @@ 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,30 +1,25 @@
-import { AnyRef, ComponentVariants } from '@codeleap/common'
-import { FileInputProps, FileInputRef } from '../FileInput'
-import { CropPickerComposition, CropPickerPresets } from './styles'
-import { StylesOf } from '../../types'
+import { StyledProp } from '@codeleap/styles'
+import { FileInputProps } from '../FileInput'
+import { CropPickerComposition } from './styles'
 import { ReactCropProps } from 'react-image-crop'
 import { ModalProps } from '../Modal'
-import { useCropPicker } from './useCropPicker'
+import { useCropPicker } from '../../lib'
+import { ButtonProps } from '../Button'
 
 export type BaseCropProps = Partial<ReactCropProps>
 
-export type CropPickerProps = Partial<FileInputProps> &
-  ComponentVariants<typeof CropPickerPresets> & {
-    styles?: StylesOf<CropPickerComposition>
-    style?: React.CSSProperties
+export type CropPickerProps =
+  Partial<FileInputProps> &
+  {
+    style?: StyledProp<CropPickerComposition>
     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/components/DatePicker/{defaultComponents → components}/Header.tsx

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

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

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