@codeleap/web 3.24.3 → 3.25.0

package/src/components/SegmentedControl/index.tsx

@@ -1,80 +1,80 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { View } from '../View'
-import { SegmentedControlOption } from './SegmentedControlOption'
-import { ComponentVariants, useDefaultComponentStyle, PropsOf, IconPlaceholder, StylesOf, useRef, TypeGuards } from '@codeleap/common'
-import { SegmentedControlPresets } from './styles'
+import { useRef, TypeGuards } from '@codeleap/common'
 import { Text } from '../Text'
-import { Touchable } from '../Touchable'
-import { SegmentedControlComposition } from './styles'
-import { motion, MotionProps, AnimationProps, ForwardRefComponent } from 'framer-motion'
+import { motion, AnimationProps } from 'framer-motion'
 import { useAnimatedVariantStyles } from '../../lib'
-import { IconProps } from '../Icon'
-
-export type SegmentedControlOptionProps<T = string> = {
-  label: string
-  value: T
-  icon?: IconPlaceholder
-}
-
-export type SegmentedControlProps<T = string> = ComponentVariants<typeof SegmentedControlPresets> & {
-
-  /** options that the segmented control will receive */
-  options : SegmentedControlOptionProps[]
-
-  /** 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
+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'
 
-  /** label that will be shown above the segmented control */
-  label?: string
+export * from './styles'
+export * from './types'
 
-  /** * all the touchable props */
-  touchableProps?: Partial<PropsOf<typeof Touchable>>
+const Option = forwardRef<HTMLButtonElement, SegmentedControlOptionProps>((props, ref) => {
+  const {
+    selected,
+    onPress,
+    styles,
+    iconProps = {},
+    label,
+    icon,
+    largestWidth,
+    textProps,
+    disabled,
+    ...touchableProps
+  } = props
 
-  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 iconStyles = mergeStyles([
+    styles.icon,
+    (selected ? styles['icon:selected'] : null),
+    (disabled ? styles['icon:disabled'] : null),
+  ])
 
-const defaultProps: Partial<SegmentedControlProps> = {
-  animationProps: {},
-  transitionDuration: 0.2,
-  disabled: false,
-  RenderAnimatedView: motion.div,
-  debounce: 1000,
-  debounceEnabled: true,
-}
+  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>
+  )
+})
 
 export const SegmentedControl = (props: SegmentedControlProps) => {
-  const allProps = {
-    ...SegmentedControl.defaultProps,
-    ...props,
-  }
-
   const {
     label,
     options,
-    styles = {},
     value,
-    variants = [],
-    responsiveVariants = {},
     onValueChange,
     style,
     bubbleProps,
@@ -82,22 +82,18 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
     transitionDuration,
     disabled,
     RenderAnimatedView: Bubble,
-    textProps = {},
-    iconProps = {},
+    textProps,
+    iconProps,
     debugName,
     debounce,
     debounceEnabled,
     ...rest
-  } = allProps
-
-  const variantStyles = useDefaultComponentStyle<'u:SegmentedControl', typeof SegmentedControlPresets>(
-    'u:SegmentedControl',
-    {
-      variants,
-      responsiveVariants,
-      styles,
-    },
-  )
+  } = {
+    ...SegmentedControl.defaultProps,
+    ...props,
+  }
+
+  const styles = useStylesFor(SegmentedControl.styleRegistryName, style)
 
   const currentOptionIdx = React.useMemo(() => {
     return options?.findIndex(o => o?.value === value) || 0
@@ -113,7 +109,7 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
   }, [maxDivWidthRef.current])
 
   const bubbleAnimation = useAnimatedVariantStyles({
-    variantStyles,
+    variantStyles: styles,
     animatedProperties: [],
     updater: () => {
       'worklet'
@@ -130,21 +126,21 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
   })
 
   const selectedBubbleStyles = [
-    variantStyles.selectedBubble,
-    disabled && variantStyles['selectedBubble:disabled'],
+    styles.selectedBubble,
+    disabled && styles['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
@@ -155,17 +151,18 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
   }
 
   return (
-    <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']]}>
+    <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']]}>
         <Bubble
+          // @ts-expect-error
           css={selectedBubbleStyles}
           animate={bubbleAnimation}
           initial={false}
           {...bubbleProps}
         />
         {options.map((o, idx) => (
-          <SegmentedControlOption
+          <Option
             ref={(ref) => {
               if (ref && ref.offsetWidth > maxDivWidthRef.current) {
                 maxDivWidthRef.current = ref.offsetWidth
@@ -179,11 +176,11 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
             key={idx}
             icon={o.icon}
             selected={value === o.value}
-            variantStyles={variantStyles}
-            style={largestWidth}
+            styles={styles}
             disabled={disabled}
             textProps={textProps}
             iconProps={iconProps}
+            largestWidth={largestWidth}
             tabIndex={0}
             {...props?.touchableProps}
           />
@@ -193,6 +190,31 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
   )
 }
 
-export * from './styles'
+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>
 
-SegmentedControl.defaultProps = defaultProps
+WebStyleRegistry.registerComponent(SegmentedControl)

package/src/components/SegmentedControl/styles.ts

@@ -1,26 +1,12 @@
-import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
-
 export type SegmentedControlStates = 'selected' | 'disabled'
 
 type SegmentedControlParts =
-'selectedBubble' |
-'wrapper' |
-'innerWrapper' |
-'text' |
-'icon' |
-'button' |
-`label`
+  'wrapper' |
+  'innerWrapper' |
+  'selectedBubble' |
+  '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 })))

package/src/components/SegmentedControl/types.ts

@@ -0,0 +1,44 @@
+import React from 'react'
+import { StylesOf } from '@codeleap/common'
+import { TextProps } from '../Text'
+import { TouchableProps } from '../Touchable'
+import { SegmentedControlComposition } from './styles'
+import { MotionProps, AnimationProps, ForwardRefComponent } from 'framer-motion'
+import { IconProps } from '../Icon'
+import { AppIcon, StyledProp } from '@codeleap/styles'
+
+export type SegmentedControlProps<T = string> = {
+  options: SegmentedControlOptionProps[]
+  value?: T
+  style?: StyledProp<SegmentedControlComposition>
+  onValueChange?: (v: any) => void
+  bubbleProps?: React.HTMLAttributes<HTMLDivElement> & MotionProps
+  label?: string
+  touchableProps?: Partial<TouchableProps>
+  debugName?: string
+  disabled?: boolean
+  animationProps?: AnimationProps
+  transitionDuration?: number
+  RenderAnimatedView?: ForwardRefComponent<HTMLDivElement, any>
+  textProps?: TextProps
+  iconProps?: Partial<IconProps>
+  debounce?: number
+  debounceEnabled?: boolean
+}
+
+export type OptionRef = TouchableProps['ref']
+
+export type SegmentedControlOptionProps =
+  TouchableProps &
+  {
+    selected?: boolean
+    label: string
+    styles?: StylesOf<SegmentedControlComposition>
+    value?: any
+    textProps?: TextProps
+    iconProps?: Partial<IconProps>
+    icon?: AppIcon
+    largestWidth?: {
+      width: number
+    }
+  }

package/src/components/Select/index.tsx

@@ -1,7 +1,5 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
 import React, { useRef, forwardRef, useImperativeHandle } from 'react'
-import { FormTypes, useValidate, useState, TypeGuards, onUpdate, IconPlaceholder, useEffect } from '@codeleap/common'
+import { FormTypes, useValidate, useState, TypeGuards, onUpdate, useEffect } from '@codeleap/common'
 import _Select, { components, MenuListProps, MenuProps, MultiValueProps, NoticeProps } from 'react-select'
 import Async from 'react-select/async'
 import { useSelectStyles } from './styles'
@@ -13,14 +11,25 @@ import { View } from '../View'
 import { ActivityIndicator } from '../ActivityIndicator'
 import { CSSInterpolation } from '@emotion/css'
 import { Icon } from '../Icon'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { AnyRecord, AppIcon, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
 
 export * from './styles'
 export * from './types'
 
 const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption) => JSX.Element }) => {
-  const { isSelected, optionsStyles, label, selectedIcon, component = null, itemProps = {} as TCustomOption['itemProps'], isFocused, debugName } = props
-
-  const styles = optionsStyles({ isSelected, isFocused, baseStyles: (itemProps?.styles ?? {}) })
+  const {
+    isSelected,
+    optionsStyles,
+    label,
+    selectedIcon,
+    component = null,
+    itemProps = {} as TCustomOption['itemProps'],
+    isFocused,
+    debugName,
+  } = props
+
+  const styles = optionsStyles({ isSelected, isFocused, baseStyles: (itemProps?.style ?? {}) })
 
   let _Component = null
 
@@ -32,7 +41,7 @@ const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption
         rightIcon={isSelected && selectedIcon}
         debugName={debugName}
         {...itemProps}
-        styles={styles}
+        style={styles}
       />
     )
   } else {
@@ -41,14 +50,13 @@ const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption
 
   return (
     <components.Option {...props}>
-      <_Component {...props} styles={styles} />
+      <_Component {...props} style={styles} />
     </components.Option>
   )
 }
 
 const CustomMenu = (props: MenuProps & { Footer: () => JSX.Element }) => {
   const { Footer, children } = props
-
   return <React.Fragment>
     <components.Menu {...props}>
       {children}
@@ -59,7 +67,6 @@ const CustomMenu = (props: MenuProps & { Footer: () => JSX.Element }) => {
 
 const CustomMenuList = (props: MenuListProps & { defaultStyles: { wrapper: React.CSSProperties } }) => {
   const { children, defaultStyles } = props
-
   return (
     <components.MenuList {...props}>
       <View style={defaultStyles.wrapper}>
@@ -70,13 +77,13 @@ const CustomMenuList = (props: MenuListProps & { defaultStyles: { wrapper: React
 }
 
 const DefaultPlaceholder = (props: PlaceholderProps) => {
-  const { text: TextPlaceholder, defaultStyles, icon: _IconPlaceholder, debugName } = props
+  const { text: TextPlaceholder, defaultStyles, icon: _IconPlaceholder, image, debugName } = props
 
   const _Text = () => {
     if (TypeGuards.isNil(TextPlaceholder)) return null
 
     if (TypeGuards.isString(TextPlaceholder)) {
-      return <Text debugName={debugName} text={TextPlaceholder} css={[defaultStyles.text]} />
+      return <Text debugName={debugName} text={TextPlaceholder} style={defaultStyles.text} />
     } else if (React.isValidElement(TextPlaceholder)) {
       return TextPlaceholder as JSX.Element
     } else if (TypeGuards.isFunction(TextPlaceholder)) {
@@ -85,10 +92,14 @@ const DefaultPlaceholder = (props: PlaceholderProps) => {
   }
 
   const _Image = () => {
-    if (TypeGuards.isNil(_IconPlaceholder)) return null
+    if (TypeGuards.isNil(_IconPlaceholder) && TypeGuards.isNil(image)) return null
+
+    if (TypeGuards.isString(image)) {
+      return <img src={image} css={defaultStyles.icon} />
+    }
 
     if (TypeGuards.isString(_IconPlaceholder)) {
-      return <Icon debugName={debugName} name={_IconPlaceholder as IconPlaceholder} forceStyle={defaultStyles.icon as React.CSSProperties} />
+      return <Icon debugName={debugName} name={_IconPlaceholder as AppIcon} forceStyle={defaultStyles.icon as React.CSSProperties} />
     } else if (React.isValidElement(_IconPlaceholder)) {
       // @ts-ignore
       return <View style={defaultStyles.icon}>
@@ -111,7 +122,7 @@ const LoadingIndicator = (props: LoadingIndicatorProps) => {
   const { defaultStyles, debugName } = props
 
   return (
-    <View css={[defaultStyles.wrapper]}>
+    <View style={defaultStyles.wrapper}>
       <ActivityIndicator debugName={debugName} />
     </View>
   )
@@ -143,38 +154,16 @@ const CustomMultiValue = (props: MultiValueProps & { defaultStyles: { text: CSSI
   // @ts-ignore
   const text = getMultiValue(selectProps?.value, separator, { searchable })
 
-  return <Text text={text} css={[defaultStyles.text]} />
+  return <Text text={text} style={defaultStyles.text} />
 }
 
 const defaultFormatPlaceholderNoItems = (props: PlaceholderProps & { text: string }) => {
   return props.text + `"${props.selectProps.inputValue}"`
 }
 
-const defaultProps: Partial<SelectProps> = {
-  PlaceholderComponent: DefaultPlaceholder,
-  PlaceholderNoItemsComponent: DefaultPlaceholder,
-  LoadingIndicatorComponent: LoadingIndicator,
-  noItemsText: 'No results for ',
-  noItemsIcon: 'placeholderNoItems-select',
-  placeholderText: 'Search items',
-  placeholderIcon: 'placeholder-select',
-  showDropdownIcon: true,
-  placeholder: 'Select',
-  clearable: false,
-  formatPlaceholderNoItems: defaultFormatPlaceholderNoItems,
-  selectedIcon: 'check',
-  searchable: false,
-  separatorMultiValue: ', ',
-  itemProps: {} as ButtonProps,
-  loadingIndicatorSize: 20,
-  options: [],
-  loadInitialValue: false,
-  loadingMessage: 'loading...',
-}
-
 export const Select = forwardRef<HTMLInputElement, SelectProps>(
-  <T extends string | number = string, Multi extends boolean = false>
-    (props: SelectProps<T, Multi>, inputRef: React.ForwardedRef<HTMLInputElement>) => {
+ <T extends string | number = string, Multi extends boolean = false>
+  (props: SelectProps<T, Multi>, inputRef: React.ForwardedRef<HTMLInputElement>) => {
 
     type Option = FormTypes.Option<T>
 
@@ -187,9 +176,8 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
     })
 
     const {
-      variants,
       validate,
-      styles,
+      style,
       debugName,
       onValueChange,
       options,
@@ -207,8 +195,10 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
       LoadingIndicatorComponent,
       noItemsText,
       noItemsIcon,
+      noItemsImage,
       placeholderText,
       placeholderIcon,
+      placeholderImage,
       showDropdownIcon,
       placeholder,
       clearable,
@@ -263,13 +253,14 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
 
     const {
       reactSelectStyles,
-      variantStyles,
+      styles,
       optionsStyles,
       placeholderStyles,
       loadingStyles,
       inputMultiValueStyles,
       menuWrapperStyles,
-    } = useSelectStyles(props, {
+      // @ts-expect-error @verify
+    } = useSelectStyles({ ...props, styleRegistryName: Select.styleRegistryName }, {
       error: !!hasError,
       focused: isFocused,
       disabled: isDisabled,
@@ -344,7 +335,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
       focused: isFocused,
       error: !!hasError,
       disabled: isDisabled,
-      variantStyles,
+      styles,
       debugName: debugName,
     }
 
@@ -352,16 +343,17 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
       const hasInputValue = !!props.selectProps.inputValue
       const styles = placeholderStyles[hasInputValue ? 'noItems' : 'empty']
       const icon = hasInputValue ? noItemsIcon : placeholderIcon
+      const image = hasInputValue ? noItemsImage : placeholderImage
 
       const placeholderProps = {
         ...props,
         ...componentProps,
         icon,
+        image,
         defaultStyles: styles,
       }
 
       if (!hasInputValue) {
-
         return <PlaceholderComponent {...placeholderProps} text={placeholderText} />
       } else {
         const _Text = TypeGuards.isString(noItemsText) ? formatPlaceholderNoItems({ ...placeholderProps, text: noItemsText }) : noItemsText
@@ -397,12 +389,12 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
         debugName={debugName}
         error={hasError ? errorMessage : null}
         focused={isFocused}
-        styles={{
-          ...variantStyles,
-          innerWrapper: [
-            variantStyles.innerWrapper,
-            searchable && variantStyles['innerWrapper:searchable'],
-          ],
+        style={{
+          ...styles,
+          innerWrapper: {
+            ...styles.innerWrapper,
+            ...(searchable ? styles['innerWrapper:searchable'] : {}),
+          },
         }}
         innerWrapperProps={{
           ...(inputBaseProps.innerWrapperProps || {}),
@@ -418,8 +410,6 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
           tabSelectsValue={false}
           tabIndex={0}
           backspaceRemovesValue={true}
-          // escapeRemoves={true}
-          // deleteRemoves={true}
           {...otherProps}
           {..._props}
           onKeyDown={isFocused ? handleKeyDown : null}
@@ -477,6 +467,52 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
         />
       </InputBase>
     )
-  })
+ }) as StyledComponentWithProps<SelectProps>
+
+Select.styleRegistryName = 'Select'
+
+Select.elements = [
+  ...InputBase.elements,
+  'item',
+  'listPortal',
+  'listHeader',
+  'listWrapper',
+  'list',
+  'inputContainer',
+  'input',
+  'placeholder',
+  'value',
+  'valueMultiple',
+  'valueWrapper',
+  'clearIcon',
+  'dropdownIcon',
+]
+
+Select.rootElement = 'wrapper'
+
+Select.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Select as (props: StyledComponentProps<SelectProps, typeof styles>) => IJSX
+}
+
+Select.defaultProps = {
+  PlaceholderComponent: DefaultPlaceholder,
+  PlaceholderNoItemsComponent: DefaultPlaceholder,
+  LoadingIndicatorComponent: LoadingIndicator,
+  noItemsText: 'No results for ',
+  placeholderText: 'Search items',
+  placeholderIcon: 'search',
+  showDropdownIcon: true,
+  placeholder: 'Select',
+  clearable: false,
+  formatPlaceholderNoItems: defaultFormatPlaceholderNoItems,
+  selectedIcon: 'check',
+  searchable: false,
+  separatorMultiValue: ', ',
+  itemProps: {} as ButtonProps,
+  loadingIndicatorSize: 20,
+  options: [],
+  loadInitialValue: false,
+  loadingMessage: 'loading...',
+} as Partial<SelectProps>
 
-Select.defaultProps = defaultProps
+WebStyleRegistry.registerComponent(Select)