@codeleap/web 3.24.2 → 3.25.0

package/src/components/Progress/Circle/types.ts

@@ -1,32 +1,20 @@
-import { ComponentVariants, IconPlaceholder, PropsOf, StylesOf } from '@codeleap/common'
-import {
-  IconProps,
-  ProgressCircleComposition,
-  ProgressCirclePresets,
-  View,
-  TextProps as _TextProps,
-} from '../../components'
+import { PropsOf } from '@codeleap/common'
+import { IconProps, ProgressCircleComposition, ViewProps, TextProps } from '../../components'
 import { ProgressPropsRoot } from '..'
 import { CircularProgressbarWithChildren, buildStyles } from 'react-circular-progressbar'
-import { ElementType } from 'react'
+import { AppIcon, StyledProp } from '@codeleap/styles'
 
-type TextProps = _TextProps<ElementType>
-
-export type ProgressCircleProps = Omit<
-  PropsOf<typeof View>,
-  'styles' | 'variants' | 'children'
-> &
-  ComponentVariants<typeof ProgressCirclePresets> &
-  ProgressPropsRoot & {
-    styles?: StylesOf<ProgressCircleComposition>
+export type ProgressCircleProps =
+  Omit<ViewProps, 'style'> &
+  Omit<ProgressPropsRoot, 'style'> &
+  {
+    style?: StyledProp<ProgressCircleComposition>
     circleProps?: PropsOf<typeof CircularProgressbarWithChildren>
     circleStyles?: Parameters<typeof buildStyles>[0]
     children?: React.ReactNode
     size?: number
-
-    text?: TextProps['text'] | JSX.Element
+    text?: string | JSX.Element
     textProps?: Partial<TextProps>
-
-    icon?: IconPlaceholder
+    icon?: AppIcon
     iconProps?: Partial<IconProps>
   }

package/src/components/RadioInput/index.tsx

@@ -1,47 +1,19 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-
-import React, { ReactNode } from 'react'
+import React from 'react'
 import { Text } from '../Text'
 import { Touchable } from '../Touchable'
-import {
-  ComponentVariants,
-  FormTypes,
-  StylesOf,
-  TypeGuards,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
+import { TypeGuards } from '@codeleap/common'
 import { View } from '../View'
-import { RadioInputComposition, RadioInputPresets } from './styles'
-import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
+import { InputBase, selectInputBaseProps } from '../InputBase'
+import { RadioOptionProps, RadioInputProps } from './types'
+import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { RadioInputComposition } from './styles'
 
 export * from './styles'
+export * from './types'
 
-type WrapperProps = InputBaseProps
-
-type RadioOption<T> = FormTypes.Options<T>[number] & {
-  disabled?: boolean
-}
-
-export type RadioGroupProps<T extends string|number> = WrapperProps & {
-  options: RadioOption<T>[]
-  value: T
-  onValueChange(value: T): void
-  label: ReactNode
-  styles?: StylesOf<RadioInputComposition>
-} & ComponentVariants<typeof RadioInputPresets>
-
-type OptionProps<T extends string|number> = {
-  item: RadioOption<T>
-  selected: boolean
-  onSelect(): void
-  styles?: StylesOf<RadioInputComposition>
-  debugName?: string
-  disabled?: boolean
-  separator?: boolean
-}
-
-const Option = <T extends string|number>(props: OptionProps<T>) => {
+const Option = <T extends string | number>(props: RadioOptionProps<T>) => {
   const {
     debugName,
     item,
@@ -52,107 +24,89 @@ const Option = <T extends string|number>(props: OptionProps<T>) => {
     separator = false,
   } = props
 
-  const isDisabled = disabled || item.disabled
-
-  const getStyle = (key) => {
-    if (isDisabled && selected) {
-      return styles[`${key}:selectedDisabled`]
-    }
-    if (isDisabled) {
-      return styles[`${key}:disabled`]
-    }
-    if (selected) {
-      return styles[`${key}:selected`]
-    }
-    return styles[key]
-  }
+  const isDisabled = disabled || item?.disabled
 
-  const label = TypeGuards.isString(item.label) ? <Text
-    css={[
-      styles.optionLabel,
-      getStyle('optionLabel'),
-    ]}
-    text={item.label}
-  /> : item.label
-
-  return <React.Fragment>
-    <Touchable
-      debugName={`${debugName} option ${item.value}`}
-      css={[
-        styles.optionWrapper,
-        getStyle('optionWrapper'),
-      ]}
-      onPress={onSelect}
-      disabled={isDisabled}
-    >
-      <View
-        css={[
-          styles.optionIndicator,
-          getStyle('optionIndicator'),
-        ]}
+  const getStyle = (key: RadioInputComposition) => {
+    let style = null
+
+    if (isDisabled && selected) style = styles[`${key}:selectedDisabled`]
+    else if (isDisabled) style = styles[`${key}:disabled`]
+    else if (selected) style = styles[`${key}:selected`]
 
+    return mergeStyles([styles[key], style])
+  }
+
+  return (
+    <React.Fragment>
+      <Touchable
+        debugName={`${debugName} option ${item.value}`}
+        style={getStyle('optionWrapper')}
+        onPress={onSelect}
+        disabled={isDisabled}
       >
-        <View
-          css={[
-            styles.optionIndicatorInner,
-            getStyle('optionIndicatorInner'),
-          ]}
-        />
-      </View>
-      {label}
+        <View style={getStyle('optionIndicator')}>
+          <View style={getStyle('optionIndicatorInner')} />
+        </View>
 
-    </Touchable>
-    {separator && <View style={styles.optionSeparator} />}
-  </React.Fragment>
+        {TypeGuards.isString(item.label) ? <Text style={getStyle('optionLabel')} text={item.label} /> : item.label}
+      </Touchable>
+
+      {separator ? <View style={styles.optionSeparator} /> : null}
+    </React.Fragment>
+  )
 }
 
-export const RadioGroup = <T extends string|number>(
-  props: RadioGroupProps<T>,
-) => {
+export const RadioInput = <T extends string | number>(props: RadioInputProps<T>) => {
   const {
     inputBaseProps,
-    others,
-  } = selectInputBaseProps(props)
+    others: radioInputProps,
+  } = selectInputBaseProps({
+    ...RadioInput.defaultProps,
+    ...props,
+  })
 
   const {
     options,
     value,
     onValueChange,
-    responsiveVariants = {},
-    variants = [],
-    styles,
+    style,
     disabled,
     debugName,
-  } = others
+  } = radioInputProps
 
-  const variantStyles = useDefaultComponentStyle<'u:RadioInput', typeof RadioInputPresets>('u:RadioInput', {
-    responsiveVariants,
-    variants,
-    styles,
-  })
+  const styles = useStylesFor(RadioInput.styleRegistryName, style)
+
+  return (
+    <InputBase
+      {...inputBaseProps}
+      disabled={disabled}
+      style={styles}
+      debugName={debugName}
+    >
+      {options?.map((item, idx) => (
+        <Option
+          debugName={debugName}
+          item={item}
+          key={idx}
+          disabled={disabled}
+          styles={styles}
+          selected={value === item?.value}
+          onSelect={() => onValueChange(item?.value)}
+          separator={idx < options?.length - 1}
+        />
+      ))}
+    </InputBase>
+  )
+}
 
-  return <InputBase
-    {...inputBaseProps}
-    disabled={disabled}
-    styles={{
-      ...variantStyles,
-      innerWrapper: [
-        variantStyles.innerWrapper,
-      ],
-    }}
-    debugName={debugName}
-  >
-    {options?.map((item, idx) => (
-      <Option
-        debugName={debugName}
-        item={item}
-        key={idx}
-        disabled={disabled}
-        styles={variantStyles}
-        selected={value === item.value}
-        onSelect={() => onValueChange(item.value)}
-        separator={idx < options.length - 1}
-      />
-    ))}
-  </InputBase>
+RadioInput.styleRegistryName = 'RadioInput'
+RadioInput.elements = [...InputBase.elements, 'option']
+RadioInput.rootElement = 'wrapper'
+
+RadioInput.withVariantTypes = <S extends AnyRecord, T extends string | number>(styles: S) => {
+  return RadioInput as (props: StyledComponentProps<RadioInputProps<T>, typeof styles>) => IJSX
 }
+
+RadioInput.defaultProps = {} as Partial<RadioInputProps<string | number>>
+
+WebStyleRegistry.registerComponent(RadioInput)

package/src/components/RadioInput/styles.ts

@@ -1,4 +1,3 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { IconLessInputBaseParts } from '../InputBase'
 
 type OptionParts = 'wrapper' | 'label' | 'indicator' | 'indicatorInner' | 'separator'
@@ -7,8 +6,3 @@ type OptionStates = 'selected' | 'disabled' | 'selectedDisabled'
 type OptionComposition = `${OptionParts}:${OptionStates}` | OptionParts
 
 export type RadioInputComposition = IconLessInputBaseParts | `${IconLessInputBaseParts}:disabled` | `option${Capitalize<OptionComposition>}`
-
-const createRadioStyle =
-  createDefaultVariantFactory<RadioInputComposition>()
-
-export const RadioInputPresets = includePresets(style => createRadioStyle(() => ({ wrapper: style })))

package/src/components/RadioInput/types.ts

@@ -0,0 +1,29 @@
+import { FormTypes, StylesOf } from '@codeleap/common'
+import { InputBaseProps } from '../InputBase'
+import { ReactNode } from 'react'
+import { StyledProp } from '@codeleap/styles'
+import { RadioInputComposition } from './styles'
+
+type WrapperProps = InputBaseProps
+
+type RadioOption<T> = FormTypes.Options<T>[number] & {
+  disabled?: boolean
+}
+
+export type RadioInputProps<T extends string|number> = Omit<WrapperProps, 'style'> & {
+  options: RadioOption<T>[]
+  value: T
+  onValueChange(value: T): void
+  label: ReactNode
+  style?: StyledProp<RadioInputComposition>
+}
+
+export type RadioOptionProps<T extends string|number> = {
+  item: RadioOption<T>
+  selected: boolean
+  onSelect(): void
+  styles?: StylesOf<RadioInputComposition>
+  debugName?: string
+  disabled?: boolean
+  separator?: boolean
+}

package/src/components/SearchInput/index.tsx

@@ -1,14 +1,14 @@
-import { AnyFunction, IconPlaceholder, TypeGuards } from '@codeleap/common'
 import React, { useState } from 'react'
 import { TextInput, TextInputProps } from '../TextInput'
-import { ComponentWithDefaultProps } from '../../types/utility'
+import { AnyFunction, TypeGuards } from '@codeleap/common'
+import { AppIcon } from '@codeleap/styles'
 
 export type SearchInputProps = {
   placeholder: string
   clearable?: boolean
   debugName: string
-  clearIcon?: IconPlaceholder
-  searchIcon?: IconPlaceholder
+  clearIcon?: AppIcon
+  searchIcon?: AppIcon
   debounce?: number
   onSearchChange: (search: string) => void
   onTypingChange?: (isTyping: boolean) => void
@@ -17,7 +17,7 @@ export type SearchInputProps = {
   defaultValue?: string
 } & Partial<TextInputProps>
 
-export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props) => {
+export const SearchInput = (props: SearchInputProps) => {
   const {
     debugName,
     onSearchChange,
@@ -30,7 +30,7 @@ export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props)
     debounce,
     value,
     onValueChange,
-    defaultValue = '',
+    defaultValue,
     ...rest
   } = {
     ...SearchInput.defaultProps,
@@ -44,7 +44,6 @@ export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props)
 
   const handleChangeSearch = (value: string) => {
     setSearch(value)
-
     if (TypeGuards.isNil(debounce)) {
       onSearchChange?.(value)
     } else {
@@ -92,6 +91,7 @@ export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props)
 SearchInput.defaultProps = {
   debounce: null,
   clearable: true,
-  clearIcon: 'x' as IconPlaceholder,
-  searchIcon: 'search' as IconPlaceholder,
-}
+  clearIcon: 'x' as AppIcon,
+  searchIcon: 'search' as AppIcon,
+  defaultValue: '',
+} as Partial<SearchInputProps>

package/src/components/SectionFilters/index.tsx

@@ -1,18 +1,19 @@
 /* eslint-disable max-len */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react'
-import { TypeGuards, getNestedStylesByKey, useCallback, useDefaultComponentStyle, useMemo, useConditionalState } from '@codeleap/common'
-import { SectionFilterPresets } from './styles'
-import { ItemOptionProps, ItemProps, OnPressOptionProps, OptionProps, SectionFiltersProps, SectionFilterFooterProps, onSelectItemProps } from './types'
+import { TypeGuards, useCallback, useMemo, useConditionalState } from '@codeleap/common'
+import { ItemOptionProps, ItemProps, OnPressOptionProps, OptionProps, SectionFiltersProps, SectionFilterFooterProps } from './types'
 import { View } from '../View'
 import { Text } from '../Text'
 import { Button } from '../Button'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
 
 export * from './styles'
 export * from './types'
 
 const ItemOption = (props: OptionProps) => {
-
   const {
     option,
     item,
@@ -49,24 +50,21 @@ const ItemOption = (props: OptionProps) => {
   return (
     <Button
       debugName='Item option'
-      text={option?.label}
+      text={String(option?.label)}
       onPress={onPress}
       selected={isItemSelected}
-      styles={styles}
       {...buttonProps}
+      style={styles}
     />
   )
 }
 
 export const SectionFilters = (props: SectionFiltersProps) => {
-
   const {
     data,
     onSelectItem,
     renderFooterComponent,
-    responsiveVariants,
-    variants,
-    styles,
+    style,
     applyFilterButtonProps,
     clearFilterButtonProps,
     applyButtonText,
@@ -77,19 +75,9 @@ export const SectionFilters = (props: SectionFiltersProps) => {
     ...props,
   }
 
-  const variantStyles = useDefaultComponentStyle<'u:SectionFilters', typeof SectionFilterPresets>(
-    'u:SectionFilters',
-    {
-      responsiveVariants,
-      variants,
-      styles,
-      rootElement: 'wrapper',
-    },
-  )
+  const styles = useStylesFor(SectionFilters.styleRegistryName, style)
 
-  const applyButtonStyles = getNestedStylesByKey('applyButton', variantStyles)
-  const clearButtonStyles = getNestedStylesByKey('clearButton', variantStyles)
-  const itemOptionButtonStyles = getNestedStylesByKey('itemOptionButton', variantStyles)
+  const compositionStyles = useCompositionStyles(['itemOptionButton', 'clearButton', 'applyButton'], styles)
 
   const [_selectedItems, _setSelectedItems] = useConditionalState(props?.selectedItems, props?.setSelectedItems, { initialValue: {}})
   const [_draft, _setDraft] = useConditionalState(props?.draftItems, props?.setDraftItems, { initialValue: {}})
@@ -98,7 +86,6 @@ export const SectionFilters = (props: SectionFiltersProps) => {
   const shouldDisableActions = Object.keys(_draft)?.length === 0 && Object.keys(_selectedItems)?.length === 0
 
   const onPressOption = useCallback((params: OnPressOptionProps) => {
-
     const { item, option, canSelectMultiple, hasMultipleOptions } = params
 
     _setDraft((state) => {
@@ -142,7 +129,6 @@ export const SectionFilters = (props: SectionFiltersProps) => {
   }, [_draft, onSelectItem])
 
   const renderItem = useCallback((item: ItemProps) => {
-
     const {
       showDescriptionLabel = true,
     } = item
@@ -153,7 +139,6 @@ export const SectionFilters = (props: SectionFiltersProps) => {
     const description = TypeGuards.isString(item?.descriptionLabel) ? item?.descriptionLabel : item?.label
 
     const Option = ({ option }: { option: ItemOptionProps}) => {
-
       if (TypeGuards.isNil(item?.id)) {
         return null
       }
@@ -163,7 +148,7 @@ export const SectionFilters = (props: SectionFiltersProps) => {
           option={option}
           item={item}
           selectedItems={_draft}
-          styles={itemOptionButtonStyles}
+          styles={{ ...compositionStyles?.itemOptionButton }}
           onPress={() => onPressOption({ option, item, canSelectMultiple, hasMultipleOptions })}
           canSelectMultiple={canSelectMultiple}
         />
@@ -171,9 +156,9 @@ export const SectionFilters = (props: SectionFiltersProps) => {
     }
 
     return (
-      <View style={variantStyles.optionWrapper}>
-        {showDescriptionLabel ? <Text style={variantStyles.label} text={description} /> : null}
-        <View style={variantStyles.optionInnerWrapper}>
+      <View style={styles.optionWrapper}>
+        {showDescriptionLabel && description ? <Text style={styles.label} text={`${description}`} /> : null}
+        <View style={styles.optionInnerWrapper}>
           {hasMultipleOptions ? (
             item?.options?.map?.((option) => <Option option={option} />)
           ) : (
@@ -188,26 +173,26 @@ export const SectionFilters = (props: SectionFiltersProps) => {
       </View>
     )
 
-  }, [_draft, variantStyles, itemOptionButtonStyles])
+  }, [_draft, styles, compositionStyles?.itemOptionButton])
 
   const DefaultFooter = ({ onApply, onClear, shouldDisableActions }: SectionFilterFooterProps) => {
     return (
-      <View style={variantStyles.footerWrapper}>
+      <View style={styles.footerWrapper}>
         <Button
-          styles={applyButtonStyles}
           text={applyButtonText}
           debugName={`Section Filters Footer - Apply items`}
           onPress={onApply}
           disabled={shouldDisableActions}
           {...applyFilterButtonProps}
+          style={compositionStyles?.applyButton}
         />
         <Button
-          styles={clearButtonStyles}
           text={clearButtonText}
           debugName={`Section Filters Footer - Apply items`}
           onPress={onClear}
           disabled={shouldDisableActions}
           {...clearFilterButtonProps}
+          style={compositionStyles?.clearButton}
         />
       </View>
     )
@@ -226,10 +211,14 @@ export const SectionFilters = (props: SectionFiltersProps) => {
 
   const Footer = renderFooterComponent || DefaultFooter
 
+  if (!data?.length) {
+    return null
+  }
+
   return (
-    <View style={variantStyles.wrapper}>
-      <View style={variantStyles.innerWrapper}>
-        {isEmpty ? null : data.map((item) => renderItem(item))}
+    <View style={styles.wrapper}>
+      <View style={styles.innerWrapper}>
+        {isEmpty ? null : data?.map((item) => renderItem(item))}
       </View>
 
       <Footer
@@ -241,8 +230,30 @@ export const SectionFilters = (props: SectionFiltersProps) => {
   )
 }
 
+SectionFilters.styleRegistryName = 'SectionFilters'
+
+SectionFilters.elements = [
+  'wrapper',
+  'innerWrapper',
+  'label',
+  'optionWrapper',
+  'optionInnerWrapper',
+  'itemOptionButton',
+  'footerWrapper',
+  'applyButton',
+  'clearButton',
+]
+
+SectionFilters.rootElement = 'wrapper'
+
+SectionFilters.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return SectionFilters as (props: StyledComponentProps<SectionFiltersProps, typeof styles>) => IJSX
+}
+
 SectionFilters.defaultProps = {
   applyButtonText: 'Filter',
   clearButtonText: 'Clear',
   filterOnOptionPress: false,
 }
+
+WebStyleRegistry.registerComponent(SectionFilters)

package/src/components/SectionFilters/styles.ts

@@ -1,4 +1,4 @@
-import { ButtonComposition, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ButtonComposition } from '@codeleap/common'
 
 export type SectionFiltersComposition =
   'wrapper' |
@@ -10,7 +10,3 @@ export type SectionFiltersComposition =
   'footerWrapper' |
   `applyButton${Capitalize<ButtonComposition>}` |
   `clearButton${Capitalize<ButtonComposition>}`
-
-const createSectionFiltersStyle = createDefaultVariantFactory<SectionFiltersComposition>()
-
-export const SectionFilterPresets = includePresets((styles) => createSectionFiltersStyle(() => ({ wrapper: styles })))

package/src/components/SectionFilters/types.ts

@@ -1,11 +1,12 @@
-import { Button, ButtonComposition } from '../Button'
-import { ComponentVariants, PropsOf, StylesOf } from '@codeleap/common'
-import { SectionFiltersComposition, SectionFilterPresets } from './styles'
+import { ButtonComposition, ButtonProps } from '../Button'
+import { StylesOf } from '@codeleap/common'
+import { SectionFiltersComposition } from './styles'
+import { StyledProp } from '@codeleap/styles'
 
 export type ItemOptionProps = {
-  label?: string
+  label?: string | number
   value: string | number
-  itemProps?: Omit<PropsOf<typeof Button>, 'debugName'>
+  itemProps?: Omit<ButtonProps, 'debugName'>
 }
 
 export type OnPressOptionProps = {
@@ -17,13 +18,13 @@ export type OnPressOptionProps = {
 
 export type ItemProps = {
   id: string | number
-  label?: string
+  label?: string | number
   canSelectMultiple?: boolean
   descriptionLabel?: string
   showDescriptionLabel?: boolean
   options?: ItemOptionProps[]
-  itemProps?: Omit<PropsOf<typeof Button>, 'debugName'>
-  selectedItemProps?: Omit<PropsOf<typeof Button>, 'debugName'>
+  itemProps?: Omit<ButtonProps, 'debugName'>
+  selectedItemProps?: Omit<ButtonProps, 'debugName'>
 }
 
 export type onSelectItemProps = {
@@ -52,18 +53,18 @@ export type SectionFiltersProps = {
   onClearItems?: ClearFunction
   onApplyItems?: ApplyFunction
   renderFooterComponent?: (props: SectionFilterFooterProps) => JSX.Element
-  applyFilterButtonProps?: Omit<PropsOf<typeof Button>, 'debugName'>
-  clearFilterButtonProps?: Omit<PropsOf<typeof Button>, 'debugName'>
+  applyFilterButtonProps?: Omit<ButtonProps, 'debugName'>
+  clearFilterButtonProps?: Omit<ButtonProps, 'debugName'>
   filterOnOptionPress?: boolean
   applyButtonText?: string
   clearButtonText?: string
-  styles?: StylesOf<SectionFiltersComposition>
-} & ComponentVariants<typeof SectionFilterPresets>
+  style?: StyledProp<SectionFiltersComposition>
+}
 
 export type OptionProps = {
   option: ItemOptionProps
   item: ItemProps
-  styles: Partial<StylesOf<ButtonComposition>>
+  styles: StylesOf<ButtonComposition>
   selectedItems: object
   onPress: () => void
   canSelectMultiple: boolean