@codeleap/web 3.25.0 → 3.25.2

package/src/components/SectionFilters/index.tsx

@@ -1,19 +1,18 @@
 /* eslint-disable max-len */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react'
-import { TypeGuards, useCallback, useMemo, useConditionalState } from '@codeleap/common'
-import { ItemOptionProps, ItemProps, OnPressOptionProps, OptionProps, SectionFiltersProps, SectionFilterFooterProps } from './types'
+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 { 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,
@@ -50,21 +49,24 @@ const ItemOption = (props: OptionProps) => {
   return (
     <Button
       debugName='Item option'
-      text={String(option?.label)}
+      text={option?.label}
       onPress={onPress}
       selected={isItemSelected}
+      styles={styles}
       {...buttonProps}
-      style={styles}
     />
   )
 }
 
 export const SectionFilters = (props: SectionFiltersProps) => {
+
   const {
     data,
     onSelectItem,
     renderFooterComponent,
-    style,
+    responsiveVariants,
+    variants,
+    styles,
     applyFilterButtonProps,
     clearFilterButtonProps,
     applyButtonText,
@@ -75,9 +77,19 @@ export const SectionFilters = (props: SectionFiltersProps) => {
     ...props,
   }
 
-  const styles = useStylesFor(SectionFilters.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:SectionFilters', typeof SectionFilterPresets>(
+    'u:SectionFilters',
+    {
+      responsiveVariants,
+      variants,
+      styles,
+      rootElement: 'wrapper',
+    },
+  )
 
-  const compositionStyles = useCompositionStyles(['itemOptionButton', 'clearButton', 'applyButton'], styles)
+  const applyButtonStyles = getNestedStylesByKey('applyButton', variantStyles)
+  const clearButtonStyles = getNestedStylesByKey('clearButton', variantStyles)
+  const itemOptionButtonStyles = getNestedStylesByKey('itemOptionButton', variantStyles)
 
   const [_selectedItems, _setSelectedItems] = useConditionalState(props?.selectedItems, props?.setSelectedItems, { initialValue: {}})
   const [_draft, _setDraft] = useConditionalState(props?.draftItems, props?.setDraftItems, { initialValue: {}})
@@ -86,6 +98,7 @@ 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) => {
@@ -129,6 +142,7 @@ export const SectionFilters = (props: SectionFiltersProps) => {
   }, [_draft, onSelectItem])
 
   const renderItem = useCallback((item: ItemProps) => {
+
     const {
       showDescriptionLabel = true,
     } = item
@@ -139,6 +153,7 @@ 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
       }
@@ -148,7 +163,7 @@ export const SectionFilters = (props: SectionFiltersProps) => {
           option={option}
           item={item}
           selectedItems={_draft}
-          styles={{ ...compositionStyles?.itemOptionButton }}
+          styles={itemOptionButtonStyles}
           onPress={() => onPressOption({ option, item, canSelectMultiple, hasMultipleOptions })}
           canSelectMultiple={canSelectMultiple}
         />
@@ -156,9 +171,9 @@ export const SectionFilters = (props: SectionFiltersProps) => {
     }
 
     return (
-      <View style={styles.optionWrapper}>
-        {showDescriptionLabel && description ? <Text style={styles.label} text={`${description}`} /> : null}
-        <View style={styles.optionInnerWrapper}>
+      <View style={variantStyles.optionWrapper}>
+        {showDescriptionLabel ? <Text style={variantStyles.label} text={description} /> : null}
+        <View style={variantStyles.optionInnerWrapper}>
           {hasMultipleOptions ? (
             item?.options?.map?.((option) => <Option option={option} />)
           ) : (
@@ -173,26 +188,26 @@ export const SectionFilters = (props: SectionFiltersProps) => {
       </View>
     )
 
-  }, [_draft, styles, compositionStyles?.itemOptionButton])
+  }, [_draft, variantStyles, itemOptionButtonStyles])
 
   const DefaultFooter = ({ onApply, onClear, shouldDisableActions }: SectionFilterFooterProps) => {
     return (
-      <View style={styles.footerWrapper}>
+      <View style={variantStyles.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>
     )
@@ -211,14 +226,10 @@ export const SectionFilters = (props: SectionFiltersProps) => {
 
   const Footer = renderFooterComponent || DefaultFooter
 
-  if (!data?.length) {
-    return null
-  }
-
   return (
-    <View style={styles.wrapper}>
-      <View style={styles.innerWrapper}>
-        {isEmpty ? null : data?.map((item) => renderItem(item))}
+    <View style={variantStyles.wrapper}>
+      <View style={variantStyles.innerWrapper}>
+        {isEmpty ? null : data.map((item) => renderItem(item))}
       </View>
 
       <Footer
@@ -230,30 +241,8 @@ 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 } from '@codeleap/common'
+import { ButtonComposition, createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
 export type SectionFiltersComposition =
   'wrapper' |
@@ -10,3 +10,7 @@ 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,12 +1,11 @@
-import { ButtonComposition, ButtonProps } from '../Button'
-import { StylesOf } from '@codeleap/common'
-import { SectionFiltersComposition } from './styles'
-import { StyledProp } from '@codeleap/styles'
+import { Button, ButtonComposition } from '../Button'
+import { ComponentVariants, PropsOf, StylesOf } from '@codeleap/common'
+import { SectionFiltersComposition, SectionFilterPresets } from './styles'
 
 export type ItemOptionProps = {
-  label?: string | number
+  label?: string
   value: string | number
-  itemProps?: Omit<ButtonProps, 'debugName'>
+  itemProps?: Omit<PropsOf<typeof Button>, 'debugName'>
 }
 
 export type OnPressOptionProps = {
@@ -18,13 +17,13 @@ export type OnPressOptionProps = {
 
 export type ItemProps = {
   id: string | number
-  label?: string | number
+  label?: string
   canSelectMultiple?: boolean
   descriptionLabel?: string
   showDescriptionLabel?: boolean
   options?: ItemOptionProps[]
-  itemProps?: Omit<ButtonProps, 'debugName'>
-  selectedItemProps?: Omit<ButtonProps, 'debugName'>
+  itemProps?: Omit<PropsOf<typeof Button>, 'debugName'>
+  selectedItemProps?: Omit<PropsOf<typeof Button>, 'debugName'>
 }
 
 export type onSelectItemProps = {
@@ -53,18 +52,18 @@ export type SectionFiltersProps = {
   onClearItems?: ClearFunction
   onApplyItems?: ApplyFunction
   renderFooterComponent?: (props: SectionFilterFooterProps) => JSX.Element
-  applyFilterButtonProps?: Omit<ButtonProps, 'debugName'>
-  clearFilterButtonProps?: Omit<ButtonProps, 'debugName'>
+  applyFilterButtonProps?: Omit<PropsOf<typeof Button>, 'debugName'>
+  clearFilterButtonProps?: Omit<PropsOf<typeof Button>, 'debugName'>
   filterOnOptionPress?: boolean
   applyButtonText?: string
   clearButtonText?: string
-  style?: StyledProp<SectionFiltersComposition>
-}
+  styles?: StylesOf<SectionFiltersComposition>
+} & ComponentVariants<typeof SectionFilterPresets>
 
 export type OptionProps = {
   option: ItemOptionProps
   item: ItemProps
-  styles: StylesOf<ButtonComposition>
+  styles: Partial<StylesOf<ButtonComposition>>
   selectedItems: object
   onPress: () => void
   canSelectMultiple: boolean

package/src/components/SegmentedControl/SegmentedControlOption.tsx

@@ -0,0 +1,84 @@
+/** @jsx jsx */
+import { CSSObject, jsx } from '@emotion/react'
+
+import React, { forwardRef } from 'react'
+import { PropsOf, IconPlaceholder } from '@codeleap/common'
+import { StylesOf } from '../../types'
+import { Text } from '../Text'
+import { Touchable } from '../Touchable'
+import { SegmentedControlComposition } from './styles'
+import { Icon, IconProps } from '../Icon'
+
+type OptionRef = PropsOf<typeof Touchable>['ref']
+
+export type SegmentedControlOptionProps = PropsOf<typeof Touchable> & {
+  selected?: boolean
+  label: string
+  variantStyles?: StylesOf<SegmentedControlComposition>
+  value?: any
+  textProps?: Omit<PropsOf<typeof Text>, 'key'>
+  iconProps?: Partial<IconProps>
+  icon?: IconPlaceholder
+  ref?: OptionRef
+}
+
+const SegmentedControlOptionCP = (props: SegmentedControlOptionProps, ref: OptionRef) => {
+  const {
+    selected,
+    onPress,
+    style,
+    variantStyles = {},
+    iconProps = {},
+    label,
+    icon,
+    textProps,
+    disabled,
+    ...touchableProps
+  } = props
+
+
+  const iconStyles = {
+    ...variantStyles.icon as object,
+    ...(selected ? variantStyles['icon:selected'] as object : {}),
+    ...(disabled ? variantStyles['icon:disabled'] as object : {}),
+  }
+
+  return (
+    <Touchable
+      key={touchableProps.key}
+      ref={ref}
+      css={[
+        variantStyles.button,
+        selected && variantStyles['button:selected'],
+        disabled && variantStyles['button:disabled'],
+        style as any,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+      {...touchableProps}
+    >
+      {
+        !!icon && (
+          <Icon
+            debugName={touchableProps?.debugName}
+            name={icon}
+            style={iconStyles}
+            {...iconProps}
+          />
+        )
+      }
+      <Text
+        text={label}
+        debugName={touchableProps?.debugName}
+        css={[
+          variantStyles.text,
+          selected && variantStyles['text:selected'],
+          disabled && variantStyles['text:disabled'],
+        ]}
+        {...textProps}
+      />
+    </Touchable>
+  )
+}
+
+export const SegmentedControlOption = forwardRef(SegmentedControlOptionCP) as ((props: SegmentedControlOptionProps) => JSX.Element)

package/src/components/SegmentedControl/index.tsx

@@ -1,80 +1,80 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View } from '../View'
-import { useRef, TypeGuards } from '@codeleap/common'
+import { SegmentedControlOption } from './SegmentedControlOption'
+import { ComponentVariants, useDefaultComponentStyle, PropsOf, IconPlaceholder, StylesOf, useRef, TypeGuards } from '@codeleap/common'
+import { SegmentedControlPresets } from './styles'
 import { Text } from '../Text'
-import { motion, AnimationProps } from 'framer-motion'
-import { useAnimatedVariantStyles } from '../../lib'
-import { SegmentedControlOptionProps, SegmentedControlProps } from './types'
 import { Touchable } from '../Touchable'
-import { Icon } from '../Icon'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
+import { SegmentedControlComposition } from './styles'
+import { motion, MotionProps, AnimationProps, ForwardRefComponent } from 'framer-motion'
+import { useAnimatedVariantStyles } from '../../lib'
+import { IconProps } from '../Icon'
 
-export * from './styles'
-export * from './types'
+export type SegmentedControlOptionProps<T = string> = {
+  label: string
+  value: T
+  icon?: IconPlaceholder
+}
 
-const Option = forwardRef<HTMLButtonElement, SegmentedControlOptionProps>((props, ref) => {
-  const {
-    selected,
-    onPress,
-    styles,
-    iconProps = {},
-    label,
-    icon,
-    largestWidth,
-    textProps,
-    disabled,
-    ...touchableProps
-  } = props
+export type SegmentedControlProps<T = string> = ComponentVariants<typeof SegmentedControlPresets> & {
 
-  const iconStyles = mergeStyles([
-    styles.icon,
-    (selected ? styles['icon:selected'] : null),
-    (disabled ? styles['icon:disabled'] : null),
-  ])
+  /** options that the segmented control will receive */
+  options : SegmentedControlOptionProps[]
 
-  return (
-    <Touchable
-      key={touchableProps.key}
-      ref={ref as unknown as React.Ref<HTMLButtonElement>}
-      onPress={onPress}
-      disabled={disabled}
-      {...touchableProps}
-      style={{
-        ...styles.button,
-        ...(selected ? styles['button:selected'] : {}),
-        ...(disabled ? styles['button:disabled'] : {}),
-        width: largestWidth?.width,
-      }}
-    >
-      {!!icon ? (
-        <Icon
-          debugName={touchableProps?.debugName}
-          name={icon}
-          {...iconProps}
-          style={iconStyles}
-        />
-      ) : null}
-      <Text
-        text={label}
-        debugName={touchableProps?.debugName}
-        {...textProps}
-        style={{
-          ...styles.text,
-          ...(selected ? styles['text:selected'] : {}),
-          ...(disabled ? styles['text:disabled'] : {}),
-        }}
-      />
-    </Touchable>
-  )
-})
+  /** the value of the segmented control */
+  value?: T
+
+  /**  all styles from the segmented control */
+  styles?: StylesOf<SegmentedControlComposition>
+
+  /**  view style */
+  style?: PropsOf<typeof View>['style']
+
+  /**  prop to control when te value of the segmented control changes */
+  onValueChange?: (v: any) => void
+
+  /**  motion div props */
+  bubbleProps?: React.HTMLAttributes<HTMLDivElement> & MotionProps
+
+  /** label that will be shown above the segmented control */
+  label?: string
+
+  /** * all the touchable props */
+  touchableProps?: Partial<PropsOf<typeof Touchable>>
+
+  debugName?: string
+  disabled?: boolean
+  animationProps?: AnimationProps
+  transitionDuration?: number
+  RenderAnimatedView?: ForwardRefComponent<HTMLDivElement, any>
+  textProps?: Omit<PropsOf<typeof Text>, 'key'>
+  iconProps?: Partial<IconProps>
+  debounce?: number
+  debounceEnabled?: boolean
+}
+
+const defaultProps: Partial<SegmentedControlProps> = {
+  animationProps: {},
+  transitionDuration: 0.2,
+  disabled: false,
+  RenderAnimatedView: motion.div,
+  debounce: 1000,
+  debounceEnabled: true,
+}
 
 export const SegmentedControl = (props: SegmentedControlProps) => {
+  const allProps = {
+    ...SegmentedControl.defaultProps,
+    ...props,
+  }
+
   const {
     label,
     options,
+    styles = {},
     value,
+    variants = [],
+    responsiveVariants = {},
     onValueChange,
     style,
     bubbleProps,
@@ -82,18 +82,22 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
     transitionDuration,
     disabled,
     RenderAnimatedView: Bubble,
-    textProps,
-    iconProps,
+    textProps = {},
+    iconProps = {},
     debugName,
     debounce,
     debounceEnabled,
     ...rest
-  } = {
-    ...SegmentedControl.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(SegmentedControl.styleRegistryName, style)
+  } = allProps
+
+  const variantStyles = useDefaultComponentStyle<'u:SegmentedControl', typeof SegmentedControlPresets>(
+    'u:SegmentedControl',
+    {
+      variants,
+      responsiveVariants,
+      styles,
+    },
+  )
 
   const currentOptionIdx = React.useMemo(() => {
     return options?.findIndex(o => o?.value === value) || 0
@@ -109,7 +113,7 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
   }, [maxDivWidthRef.current])
 
   const bubbleAnimation = useAnimatedVariantStyles({
-    variantStyles: styles,
+    variantStyles,
     animatedProperties: [],
     updater: () => {
       'worklet'
@@ -126,21 +130,21 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
   })
 
   const selectedBubbleStyles = [
-    styles.selectedBubble,
-    disabled && styles['selectedBubble:disabled'],
+    variantStyles.selectedBubble,
+    disabled && variantStyles['selectedBubble:disabled'],
     largestWidth,
   ]
 
   const onSelectTab = (option: SegmentedControlOptionProps, e?: React.KeyboardEvent<HTMLButtonElement>) => {
     if (!e || e?.keyCode === 13 || e?.key === 'Enter') {
       if (!debounceEnabled || !TypeGuards.isNumber(debounce)) {
-        onValueChange?.(option?.value)
+        onValueChange(option.value)
         return
       }
 
       if (sectionPressedRef.current !== null) return
 
-      onValueChange?.(option?.value)
+      onValueChange(option.value)
       sectionPressedRef.current = setTimeout(() => {
         clearTimeout(sectionPressedRef.current)
         sectionPressedRef.current = null
@@ -151,18 +155,17 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
   }
 
   return (
-    <View {...rest} style={styles.wrapper}>
-      {label ? <Text text={label} style={[styles.label, disabled && styles['label:disabled']]} /> : null}
-      <View style={[styles.innerWrapper, disabled && styles['innerWrapper:disabled']]}>
+    <View css={[variantStyles.wrapper, style]} {...rest}>
+      {label && <Text text={label} css={[variantStyles.label, disabled && variantStyles['label:disabled']]} />}
+      <View css={[variantStyles.innerWrapper, disabled && variantStyles['innerWrapper:disabled']]}>
         <Bubble
-          // @ts-expect-error
           css={selectedBubbleStyles}
           animate={bubbleAnimation}
           initial={false}
           {...bubbleProps}
         />
         {options.map((o, idx) => (
-          <Option
+          <SegmentedControlOption
             ref={(ref) => {
               if (ref && ref.offsetWidth > maxDivWidthRef.current) {
                 maxDivWidthRef.current = ref.offsetWidth
@@ -176,11 +179,11 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
             key={idx}
             icon={o.icon}
             selected={value === o.value}
-            styles={styles}
+            variantStyles={variantStyles}
+            style={largestWidth}
             disabled={disabled}
             textProps={textProps}
             iconProps={iconProps}
-            largestWidth={largestWidth}
             tabIndex={0}
             {...props?.touchableProps}
           />
@@ -190,31 +193,6 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
   )
 }
 
-SegmentedControl.styleRegistryName = 'SegmentedControl'
-
-SegmentedControl.elements = [
-  'wrapper',
-  'innerWrapper',
-  'selectedBubble',
-  'text',
-  'icon',
-  'button',
-  'label',
-]
-
-SegmentedControl.rootElement = 'wrapper'
-
-SegmentedControl.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return SegmentedControl as (props: StyledComponentProps<SegmentedControlProps, typeof styles>) => IJSX
-}
-
-SegmentedControl.defaultProps = {
-  animationProps: {},
-  transitionDuration: 0.2,
-  disabled: false,
-  RenderAnimatedView: motion.div,
-  debounce: 1000,
-  debounceEnabled: true,
-} as Partial<SegmentedControlProps>
+export * from './styles'
 
-WebStyleRegistry.registerComponent(SegmentedControl)
+SegmentedControl.defaultProps = defaultProps

package/src/components/SegmentedControl/styles.ts

@@ -1,12 +1,26 @@
+import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
+
 export type SegmentedControlStates = 'selected' | 'disabled'
 
 type SegmentedControlParts =
-  'wrapper' |
-  'innerWrapper' |
-  'selectedBubble' |
-  'text' |
-  'icon' |
-  'button' |
-  `label`
+'selectedBubble' |
+'wrapper' |
+'innerWrapper' |
+'text' |
+'icon' |
+'button' |
+`label`
 
 export type SegmentedControlComposition = SegmentedControlParts | `${SegmentedControlParts}:${SegmentedControlStates}`
+
+export type SegmentedControlStylesGen<TCSS = any> =
+  StylesOf<
+    Exclude<SegmentedControlComposition, 'buttonFeedback'>
+  >
+
+const createSegmentedControlStyle = createDefaultVariantFactory<
+SegmentedControlComposition,
+SegmentedControlStylesGen
+>()
+
+export const SegmentedControlPresets = includePresets((style) => createSegmentedControlStyle(() => ({ wrapper: style })))