@codeleap/web 3.25.0 → 3.25.2

package/src/components/Button/styles.ts

@@ -1,3 +1,4 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ActivityIndicatorComposition } from '../ActivityIndicator'
 
 export type ButtonStates = 'disabled' | 'selected'
@@ -11,3 +12,7 @@ export type ButtonParts =
   | `loader${Capitalize<ActivityIndicatorComposition>}`
 
 export type ButtonComposition = `${ButtonParts}:${ButtonStates}` | ButtonParts
+
+const createButtonStyle = createDefaultVariantFactory<ButtonComposition>()
+
+export const ButtonPresets = includePresets((styles) => createButtonStyle(() => ({ wrapper: styles })))

package/src/components/Checkbox/index.tsx

@@ -1,61 +1,93 @@
-import { InputBase, InputBaseDefaultOrder, selectInputBaseProps } from '../InputBase'
+/** @jsx jsx */
+import { jsx, CSSObject } from '@emotion/react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  StylesOf,
+  PropsOf,
+  IconPlaceholder,
+} from '@codeleap/common'
+import { View } from '../View'
+import { CheckboxPresets, CheckboxComposition } from './styles'
+import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps } from '../InputBase'
 import { useAnimatedVariantStyles } from '../..'
 import { Icon } from '../Icon'
 import { motion } from 'framer-motion'
-import { CheckboxProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { AnyRecord, AppIcon, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { CheckboxParts } from './styles'
-import { TypeGuards } from '@codeleap/common'
+import { ComponentCommonProps } from '../../types/utility'
 
 export * from './styles'
-export * from './types'
+
+/** * Checkbox */
+export type CheckboxProps = Pick<
+  InputBaseProps,
+  'debugName' | 'disabled' | 'label'
+> & ComponentCommonProps & {
+  styles?: StylesOf<CheckboxComposition>
+  /** prop */
+  value: boolean
+  /** prop */
+  onValueChange: (value: boolean) => void
+  style?: PropsOf<typeof View>['style']
+  /** prop */
+  checkboxOnLeft?: boolean
+  /** prop */
+  checkIcon?: IconPlaceholder
+} & ComponentVariants<typeof CheckboxPresets>
 
 const reversedOrder = [...InputBaseDefaultOrder].reverse()
 
+const defaultProps: Partial<CheckboxProps> = {
+  checkIcon: 'check' as IconPlaceholder,
+}
+
 export const Checkbox = (props: CheckboxProps) => {
   const {
     inputBaseProps,
-    others: checkboxProps,
-  } = selectInputBaseProps({
-    ...Checkbox.defaultProps,
-    ...props,
-  })
+    others,
+  } = selectInputBaseProps(props)
 
   const {
-    style,
+    responsiveVariants = {},
+    variants = [],
+    style = {},
+    styles = {},
     value,
     disabled,
     debugName,
     onValueChange,
     checkboxOnLeft,
     checkIcon,
-  } = checkboxProps
+  } = others
 
-  const styles = useStylesFor(Checkbox.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:Checkbox', typeof CheckboxPresets>('u:Checkbox', {
+    responsiveVariants,
+    variants,
+    styles,
+    rootElement: 'wrapper',
+  })
 
   const boxAnimation = useAnimatedVariantStyles({
-    variantStyles: styles,
+    variantStyles,
     animatedProperties: ['box:unchecked', 'box:disabled', 'box:checked', 'box:disabled-checked', 'box:disabled-unchecked'],
     updater: () => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? styles['box:disabled-checked'] : styles['box:disabled-unchecked']
+        disabledStyle = value ? variantStyles['box:disabled-checked'] : variantStyles['box:disabled-unchecked']
       }
-      const style = value ? styles['box:checked'] : styles['box:unchecked']
+      const style = value ? variantStyles['box:checked'] : variantStyles['box:unchecked']
 
       return {
         ...style,
         ...disabledStyle,
       }
+
     },
     dependencies: [value, disabled],
   })
 
   const checkmarkWrapperAnimation = useAnimatedVariantStyles({
-    variantStyles: styles,
+    variantStyles,
     animatedProperties: [
       'checkmarkWrapper:unchecked',
       'checkmarkWrapper:disabled',
@@ -67,87 +99,69 @@ export const Checkbox = (props: CheckboxProps) => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? styles['checkmarkWrapper:disabled-checked'] : styles['checkmarkWrapper:disabled-unchecked']
+        disabledStyle = value ? variantStyles['checkmarkWrapper:disabled-checked'] : variantStyles['checkmarkWrapper:disabled-unchecked']
       }
-      const style = value ? styles['checkmarkWrapper:checked'] : styles['checkmarkWrapper:unchecked']
+      const style = value ? variantStyles['checkmarkWrapper:checked'] : variantStyles['checkmarkWrapper:unchecked']
       return {
         ...style,
         ...disabledStyle,
       }
+
     },
     dependencies: [value, disabled],
   })
 
-  // @ts-expect-error __props is ICSS
-  const _checkboxOnLeft = checkboxOnLeft ?? styles?.__props?.checkboxOnLeft
+  const _checkboxOnLeft = checkboxOnLeft ?? variantStyles.__props?.checkboxOnLeft
 
   const handleChange = (e) => {
-    if (disabled) return
-    if (!TypeGuards.isFunction(onValueChange)) return
-
     const isSpaceBarClick = e?.keyCode === 32
-    const isEnterKey = e?.key === 'Enter'
-    const isClick = e?.type === 'click'
-
-    if (isClick || e?.keyCode === 13 || isSpaceBarClick || isEnterKey) {
-      onValueChange?.(!value)
-    }
-  }
-
-  const getStyles = (key: CheckboxParts) => mergeStyles([
-    styles[key],
-    disabled ? styles[key + ':disabled'] : null,
-  ])
-
-  const componentStyles = {
-    box: getStyles('box'),
-    checkmarkWrapper: getStyles('checkmarkWrapper'),
-    checkmark: getStyles('checkmark'),
+    if (disabled) return
+    if (onValueChange && (e?.type === 'click' || e?.keyCode === 13 || isSpaceBarClick || e?.key === 'Enter')) onValueChange?.(!value)
   }
 
-  return (
-    <InputBase
-      {...inputBaseProps}
-      debugName={debugName}
-      style={styles}
-      order={_checkboxOnLeft ? reversedOrder : InputBaseDefaultOrder}
+  return <InputBase
+    {...inputBaseProps}
+    debugName={debugName}
+    styles={{
+      ...variantStyles,
+      innerWrapper: [
+        variantStyles.innerWrapper,
+      ],
+    }}
+    order={_checkboxOnLeft ? reversedOrder : InputBaseDefaultOrder}
+    style={style}
+  >
+    <motion.div
+      css={[
+        variantStyles.box,
+        disabled && variantStyles['box:disabled'],
+      ]}
+      initial={false}
+      animate={boxAnimation}
+      transition={variantStyles['box:transition']}
+      onClick={handleChange}
+      onKeyDown={handleChange}
+      tabIndex={0}
     >
       <motion.div
-        style={componentStyles.box}
+        css={[
+          variantStyles.checkmarkWrapper,
+          disabled && variantStyles['checkmarkWrapper:disabled'],
+        ]}
         initial={false}
-        animate={boxAnimation}
-        transition={styles['box:transition']}
-        onClick={handleChange}
-        onKeyDown={handleChange}
-        tabIndex={0}
+        animate={checkmarkWrapperAnimation}
+        transition={variantStyles['checkmarkWrapper:transition']}
+
       >
-        <motion.div
-          style={componentStyles.checkmarkWrapper}
-          initial={false}
-          animate={checkmarkWrapperAnimation}
-          transition={styles['checkmarkWrapper:transition']}
-        >
-          <Icon
-            debugName={debugName}
-            name={checkIcon as AppIcon}
-            style={componentStyles.checkmark}
-          />
-        </motion.div>
+        <Icon
+          debugName={debugName}
+          name={checkIcon as any}
+          css={[variantStyles.checkmark, disabled && variantStyles['checkmark:disabled']]}
+          style={variantStyles.checkmark}
+        />
       </motion.div>
-    </InputBase>
-  )
+    </motion.div>
+  </InputBase>
 }
 
-Checkbox.styleRegistryName = 'Checkbox'
-Checkbox.elements = [...InputBase.elements, 'checkmarkWrapper', 'checkmark', 'box', '__props']
-Checkbox.rootElement = 'wrapper'
-
-Checkbox.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Checkbox as (props: StyledComponentProps<CheckboxProps, typeof styles>) => IJSX
-}
-
-Checkbox.defaultProps = {
-  checkIcon: 'check' as AppIcon,
-} as Partial<CheckboxProps>
-
-WebStyleRegistry.registerComponent(Checkbox)
+Checkbox.defaultProps = defaultProps

package/src/components/Checkbox/styles.ts

@@ -1,7 +1,7 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { InputBaseParts, InputBaseStates } from '../InputBase'
 
 type AnimatableParts = 'checkmarkWrapper' | 'box'
-
 export type CheckboxParts = InputBaseParts | AnimatableParts | 'checkmark'
 
 export type CheckboxAnimationStates = 'checked' | 'unchecked' | 'disabled-checked' | 'disabled-unchecked'
@@ -14,3 +14,7 @@ export type CheckboxComposition =
   | `${AnimatableParts}:transition`
   | `${AnimatableParts}:${CheckboxAnimationStates}`
   | '__props'
+
+const createCheckboxStyle = createDefaultVariantFactory<CheckboxComposition>()
+
+export const CheckboxPresets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })))

package/src/components/Collapse/index.tsx

@@ -1,49 +1,91 @@
-import { CollapseProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { motion } from 'framer-motion'
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
 
-export * from './styles'
-export * from './types'
+import { capitalize, StylesOf, TypeGuards } from '@codeleap/common'
+import { Scroll } from '../Scroll'
+import { View, ViewProps } from '../View'
+import { ElementType } from 'react'
+import { NativeHTMLElement } from '../../types'
 
-export const Collapse = (props: CollapseProps) => {
-  const {
-    open,
-    children,
-    style,
-    ...rest
-  } = {
-    ...Collapse.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(Collapse.styleRegistryName, style)
-
-  return (
-    <motion.div
-      initial={false}
-      animate={{ height: open ? 'auto' : 0, opacity: open ? 1 : 0 }}
-      transition={{ duration: 0.2 }}
-      {...rest}
-      style={{
-        ...styles.wrapper,
-        ...(open ? styles?.['wrapper:open'] : styles?.['wrapper:closed']),
-      }}
-    >
-      {children}
-    </motion.div>
-  )
+export type CollapseAxis = 'horizontal' | 'vertical'
+
+export type GetCollapseStylesArgs = {
+  direction?: CollapseAxis
+  value: string | number
+   animation?: string
+   scroll ?: boolean
 }
 
-Collapse.styleRegistryName = 'Collapse'
-Collapse.elements = ['wrapper']
-Collapse.rootElement = 'wrapper'
+type CollapseComposition = 'wrapper' | 'wrapper:open' |'wrapper:hidden'
+
+export function getCollapseStyles<
+    TCSS = React.CSSProperties,
+    Return extends Record<CollapseComposition, TCSS> = Record<CollapseComposition, TCSS>
+>(
+  args: GetCollapseStylesArgs,
+): Return {
+  const {
+    direction = 'vertical',
+    value,
+    animation = '0.3s ease',
+    scroll = false,
+
+  } = args
 
-Collapse.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Collapse as (props: StyledComponentProps<CollapseProps, typeof styles>) => IJSX
+  const dimension = direction === 'horizontal' ? 'width' : 'height'
+  const capitalizedDimension = capitalize(dimension)
+  const overflowOpen = scroll ? 'auto' : 'hidden'
+  const axis = direction === 'vertical' ? 'Y' : 'X'
+  return {
+    'wrapper:closed': {
+      [`max${capitalizedDimension}`]: '0px',
+      [`overflow${axis}`]: 'hidden',
+    },
+    'wrapper:open': {
+      [`max${capitalizedDimension}`]: TypeGuards.isString(value) ? value : `${value}px`,
+      [`overflow${axis}`]: overflowOpen,
+    },
+    wrapper: {
+      height: 'auto',
+      transition: `max-${dimension} ${animation}`,
+    },
+  } as unknown as Return
 }
 
-Collapse.defaultProps = {} as Partial<CollapseProps>
+export type CollapseProps<T extends NativeHTMLElement = 'div'> = ViewProps<T> & {
+    open: boolean
+    scroll?: boolean
+    size?: string | number
+    direction?: CollapseAxis
+    animation?: string
+    styles: StylesOf<CollapseComposition>
+}
+
+export const Collapse = ({
+  open,
+  size = 1000,
+  scroll = false,
+  children,
+  direction,
+  animation,
+  styles,
+  ...props
+}:CollapseProps) => {
+
+  const Component = scroll ? Scroll : View
+  const _styles = getCollapseStyles({
+    value: size,
+    direction,
+    animation,
+  })
+  // @ts-ignore
+  return <Component css={[
+    _styles.wrapper,
+    open ? _styles['wrapper:open'] : _styles['wrapper:closed'],
+    styles.wrapper,
+  ]} {...props}>
+    {children}
+  </Component>
+}
 
-WebStyleRegistry.registerComponent(Collapse)
+export * from './styles'

package/src/components/Collapse/styles.ts

@@ -1,5 +1,8 @@
-type CollapseState = 'open' | 'closed'
+import { createDefaultVariantFactory, includePresets } from "@codeleap/common"
+import { ViewComposition } from "../View"
 
-type CollapseParts = 'wrapper'
+export type CollapseComposition = ViewComposition
 
-export type CollapseComposition = CollapseParts | `${CollapseParts}:${CollapseState}`
+const createCollapseStyle = createDefaultVariantFactory<CollapseComposition>()
+
+export const CollapsePresets = includePresets((styles) => createCollapseStyle(() => ({ wrapper: styles })))

package/src/components/ColorPicker/index.tsx

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

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 type ColorPickerParts =
-  'wrapper' |
-  'picker' |
-  'dropdown' |
-  `dropdown:${ColorPickerState}` |
-  'dropdownInnerWrapper' |
-  'footerWrapper' |
-  'clearIcon' |
-  'confirmIcon'
-
-export type ColorPickerComposition = ColorPickerParts
+export const ColorPickerPresets = includePresets((styles) => createColorPickerStyle(() => ({ wrapper: styles })))