@codeleap/web 3.24.2 → 3.25.0

package/src/components/Select/styles.ts

@@ -1,9 +1,11 @@
-import { capitalize, createDefaultVariantFactory, FormTypes, getNestedStylesByKey, includePresets, useDefaultComponentStyle } from '@codeleap/common'
+import { capitalize, FormTypes } from '@codeleap/common'
+import { useNestedStylesByKey } from '@codeleap/styles'
 import { CSSInterpolation } from '@emotion/css'
 import { CSSObjectWithLabel, GroupBase, StylesConfig } from 'react-select'
 import { ButtonParts as _ButtonParts } from '../Button'
 import { InputBaseParts } from '../InputBase'
-import { SelectProps } from './types'
+import { SelectProps, UseSelectStylesProps } from './types'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
 
 type ButtonParts = _ButtonParts
 
@@ -43,57 +45,38 @@ export type SelectState = 'error' | 'focus' | 'disabled'
 
 export type SelectComposition = SelectParts | `${SelectParts}:${SelectState}` | SelectStatefulParts
 
-const createSelectStyle = createDefaultVariantFactory<SelectComposition>()
-
-export const SelectPresets = includePresets((styles) => createSelectStyle(() => ({ wrapper: styles })))
-
 export type ComponentState = {
   error?: boolean
   focused?: boolean
   disabled?: boolean
 }
 
-export type OptionState = { 
+export type OptionState = {
   isSelected: boolean
   isFocused: boolean
-  baseStyles: SelectProps['itemProps']['styles'] 
+  baseStyles: SelectProps['itemProps']['style']
 }
 
-export function useSelectStyles<T, Multi extends boolean>(props: SelectProps<T, Multi>, state: ComponentState) {
-  const {
-    responsiveVariants = {},
-    variants,
-    styles,
-  } = props
-
-  const {
-    error,
-    focused,
-    disabled,
-  } = state
-
-  const variantStyles = useDefaultComponentStyle<'u:Select', typeof SelectPresets>(
-    'u:Select',
-    {
-      responsiveVariants,
-      variants,
-      styles,
-    },
-  )
+export function useSelectStyles<T, Multi extends boolean>(props: UseSelectStylesProps, state: ComponentState) {
+  const { style } = props
+
+  const { error, focused, disabled } = state
+
+  const styles = useStylesFor(props?.styleRegistryName, style)
 
   const stylesKey = (key: SelectParts | SelectStatefulParts, _styles: CSSObjectWithLabel = {}) => ({
     ..._styles,
-    ...variantStyles[key],
-    ...(focused ? variantStyles[key + ':focus'] : {}),
-    ...(disabled ? variantStyles[key + ':disabled'] : {}),
-    ...(error ? variantStyles[key + ':error'] : {}),
+    ...styles[key],
+    ...(focused ? styles[key + ':focus'] : {}),
+    ...(disabled ? styles[key + ':disabled'] : {}),
+    ...(error ? styles[key + ':error'] : {}),
   })
 
-  const optionNestedStyles = getNestedStylesByKey('item', variantStyles)
+  const optionNestedStyles = useNestedStylesByKey('item', styles)
 
   const optionStyleKey = (
     key: ButtonParts | `${ButtonParts}:${ItemState}`,
-    state: OptionState
+    state: OptionState,
   ) => {
     return {
       ...stylesKey(`item${capitalize(key)}` as any),
@@ -169,7 +152,7 @@ export function useSelectStyles<T, Multi extends boolean>(props: SelectProps<T,
   }
 
   return {
-    variantStyles,
+    styles,
     reactSelectStyles,
     optionsStyles,
     placeholderStyles,

package/src/components/Select/types.ts

@@ -1,13 +1,13 @@
-import { ComponentVariants, FormTypes, StylesOf, yup } from '@codeleap/common'
+import { FormTypes, yup } from '@codeleap/common'
 import { CSSInterpolation } from '@emotion/css'
-import { CSSObject } from '@emotion/react'
 import { MutableRefObject } from 'react'
 import { GroupBase, NoticeProps, OptionProps, Props } from 'react-select'
 import { AsyncProps } from 'react-select/async'
 import { ComponentCommonProps } from '../../types'
 import { ButtonProps } from '../Button'
 import { InputBaseProps } from '../InputBase'
-import { SelectPresets, SelectComposition, OptionState } from './styles'
+import { SelectComposition, OptionState } from './styles'
+import { StyledProp } from '@codeleap/styles'
 
 type SelectValue<T, Multi extends boolean> = Multi extends true ? T[] : T
 
@@ -26,20 +26,20 @@ type DynamicSelectProps<T, Multi extends boolean> =
     Props<FormTypes.Option<T>, Multi, GroupBase<FormTypes.Option<T>>>
   >)
 
-export type ReactSelectProps<T, Multi extends boolean = false> = Omit<InputBaseProps, 'styles' | 'variants'> &{
+export type ReactSelectProps<T, Multi extends boolean = false> = Omit<InputBaseProps, 'style'> & {
   options: FormTypes.Options<T>
   value: SelectValue<T, Multi>
   onValueChange?: (value: SelectValue<T, Multi>) => void
   multiple?: Multi
   validate?: FormTypes.ValidatorWithoutForm<SelectValue<T, Multi>> | yup.SchemaOf<SelectValue<T, Multi>>
-  styles?: StylesOf<SelectComposition>
+  style?: StyledProp<SelectComposition>
 } & DynamicSelectProps<T, Multi>
 
 export type ComponentPartProps = {
   focused: boolean
   error: boolean
   disabled: boolean
-  variantStyles: Record<SelectComposition, React.CSSProperties>
+  styles: Record<SelectComposition, React.CSSProperties>
 }
 
 export type TCustomOption = OptionProps & ComponentPartProps & ComponentCommonProps & {
@@ -59,6 +59,7 @@ export type PlaceholderProps = NoticeProps & ComponentPartProps & {
     icon: CSSInterpolation
   }
   icon: SelectPlaceholderElement
+  image: HTMLImageElement['src']
 } & ComponentCommonProps
 
 export type LoadingIndicatorProps = NoticeProps & {
@@ -71,7 +72,6 @@ export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWit
     debugName?: string
     clearable?: boolean
     closeOnSelect?: boolean
-    css?: CSSObject
     focused?: boolean
     _error?: string
     renderItem?: (props: TCustomOption) => JSX.Element
@@ -81,8 +81,10 @@ export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWit
     LoadingIndicatorComponent?: (props: LoadingIndicatorProps) => JSX.Element
     noItemsText?: SelectPlaceholderElement
     noItemsIcon?: SelectPlaceholderElement
+    noItemsImage?: PlaceholderProps['image']
     placeholderText?: SelectPlaceholderElement
     placeholderIcon?: SelectPlaceholderElement
+    placeholderImage?: PlaceholderProps['image']
     showDropdownIcon?: boolean
     formatPlaceholderNoItems?: (props: PlaceholderProps & { text: string }) => string
     selectedIcon?: string
@@ -96,12 +98,15 @@ export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWit
     limit?: number
     loadInitialValue?: boolean
     loadingMessage?: string
-    selectedOption?: { label: FormTypes.Label; value: T; } | SelectValue<T, Multi>
+    selectedOption?: { label: FormTypes.Label; value: T } | SelectValue<T, Multi>
     selectRef?: MutableRefObject<any>
-    setSelectedOption?: (value: { label: FormTypes.Label; value: T; } | SelectValue<T, Multi>) => void
+    setSelectedOption?: (value: { label: FormTypes.Label; value: T } | SelectValue<T, Multi>) => void
   } & Omit<
     ReactSelectProps<T, Multi>,
     'isSearchable' | 'isClearable' | 'isDisabled' | 'loadingMessage' | 'filterOption' |
     'isLoading' | 'menuPortalTarget' | 'closeMenuOnSelect' | 'isMulti'>
-    & ComponentVariants<typeof SelectPresets>
 >
+
+export type UseSelectStylesProps = SelectProps & {
+  styleRegistryName: string
+}

package/src/components/Slider/index.tsx

@@ -1,15 +1,8 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
 import React from 'react'
-
-import { ComponentVariants, onMount, PropsOf, TypeGuards, useDefaultComponentStyle, useRef } from '@codeleap/common'
-import { SliderComposition } from './styles'
-import { StylesOf } from '../../types'
+import { onMount, TypeGuards, useRef } from '@codeleap/common'
 import { View } from '../View'
-import { concatStyles, InputBaseProps, InputBase, selectInputBaseProps } from '../InputBase'
-import { SliderPresets } from './styles'
+import { InputBase, selectInputBaseProps } from '../InputBase'
 import { Text } from '../Text'
-
 import {
   Root as SliderContainer,
   Track as SliderTrack,
@@ -17,30 +10,13 @@ import {
   Range as SliderRange,
   SliderProps as PrimitiveSliderProps,
 } from '@radix-ui/react-slider'
+import { SliderProps, TrackMarkProps } from './types'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 
 export * from './styles'
-
-export type SliderProps = Partial<Omit<PrimitiveSliderProps, 'value' | 'onValueChange'>> & Pick<InputBaseProps, 'disabled' | 'debugName' | 'description' | 'label'> & {
-  indicatorLabel?: {
-    order?: number[]
-    separator?: string
-    transformer?: (value: number[], defaultValue: PrimitiveSliderProps['defaultValue']) => string
-  }
-  value: number | number[]
-  onValueChange: (val: number | number[]) => void
-  styles?: StylesOf<SliderComposition>
-  style?: PropsOf<typeof View>['style']
-  trackMarks?: Record<number, string>
-  trackMarkComponent?: React.ComponentType<TrackMarkProps>
-  onPressThumbSetValue?: boolean
-  onPressThumb?: (value: number | number[], thumbIndex: number) => void
-} & ComponentVariants<typeof SliderPresets>
-
-export type TrackMarkProps = {
-  index: number
-  content?: string | React.ReactNode
-  style?: any
-}
+export * from './types'
 
 const DefaultSliderTrackMark = (props: TrackMarkProps) => {
   const { style } = props
@@ -51,17 +27,17 @@ const DefaultSliderTrackMark = (props: TrackMarkProps) => {
     </React.Fragment>
   }
 
-  return <Text
-    text={props.content}
-    css={style}
-  />
+  return <Text text={props.content} style={style} />
 }
 
 export const Slider = (props: SliderProps) => {
   const {
     inputBaseProps,
     others,
-  } = selectInputBaseProps(props)
+  } = selectInputBaseProps({
+    ...Slider.defaultProps,
+    ...props,
+  })
 
   const {
     onValueChange,
@@ -69,25 +45,24 @@ export const Slider = (props: SliderProps) => {
     value: _value,
     label,
     debugName,
-    styles = {},
-    responsiveVariants = {},
     style,
     disabled,
-    variants,
     trackMarks,
-    trackMarkComponent = DefaultSliderTrackMark,
-    defaultValue: defaultSliderValue = [],
-    max = 100,
-    min = 0,
-    indicatorLabel = null,
-    description = null,
-    minStepsBetweenThumbs = 0,
-    step = 1,
-    onPressThumbSetValue = false,
-    onPressThumb = null,
+    trackMarkComponent: SliderTrackMark = DefaultSliderTrackMark,
+    max,
+    min,
+    defaultValue: defaultSliderValue,
+    indicatorLabel,
+    description,
+    minStepsBetweenThumbs,
+    step,
+    onPressThumbSetValue,
+    onPressThumb,
     ...sliderProps
   } = others
 
+  const styles = useStylesFor(Slider.styleRegistryName, style)
+
   const isUniqueValue = !TypeGuards.isArray(_value)
   const value = isUniqueValue ? [_value] : _value
 
@@ -102,49 +77,41 @@ export const Slider = (props: SliderProps) => {
     }
   })
 
-  const SliderTrackMark = trackMarkComponent
-
   const handleChange: SliderProps['onValueChange'] = (newValue: Array<number>) => {
-    onValueChange(isUniqueValue ? newValue?.[0] : newValue)
+    onValueChange?.(isUniqueValue ? newValue?.[0] : newValue)
   }
 
   const handleValueCommit = (newValue: Array<number>) => {
     onValueCommit?.(newValue)
   }
 
-  const variantStyles = useDefaultComponentStyle<'u:Slider', typeof SliderPresets>('u:Slider', {
-    responsiveVariants,
-    variants,
-    styles,
-  })
-
   const thumbStyle = React.useMemo(() => {
-    return concatStyles([
-      variantStyles.thumb,
-      disabled && variantStyles['thumb:disabled'],
+    return mergeStyles([
+      styles.thumb,
+      disabled && styles['thumb:disabled'],
     ])
   }, [])
 
   const trackStyle = React.useMemo(() => {
-    return concatStyles([
-      variantStyles.track,
-      disabled && variantStyles['track:disabled'],
-      variantStyles.unselectedTrack,
-      disabled && variantStyles['unselectedTrack:disabled'],
+    return mergeStyles([
+      styles.track,
+      disabled && styles['track:disabled'],
+      styles.unselectedTrack,
+      disabled && styles['unselectedTrack:disabled'],
     ])
   }, [disabled])
 
   const selectedTrackStyle = React.useMemo(() => {
-    return concatStyles([
-      variantStyles.selectedTrack,
-      disabled && variantStyles['selectedTrack:disabled'],
+    return mergeStyles([
+      styles.selectedTrack,
+      disabled && styles['selectedTrack:disabled'],
     ])
   }, [disabled])
 
   const containerStyle = React.useMemo(() => {
-    return concatStyles([
-      variantStyles.sliderContainer,
-      disabled && variantStyles['sliderContainer:disabled'],
+    return mergeStyles([
+      styles.sliderContainer,
+      disabled && styles['sliderContainer:disabled'],
     ])
   }, [disabled])
 
@@ -158,17 +125,17 @@ export const Slider = (props: SliderProps) => {
   }, [trackMarksHaveContent])
 
   const trackMarkStyle = React.useMemo(() => {
-    return concatStyles([
-      variantStyles.trackMark,
-      disabled && variantStyles['trackMark:disabled'],
+    return mergeStyles([
+      styles.trackMark,
+      disabled && styles['trackMark:disabled'],
     ])
   }, [disabled])
 
   const trackMarkWrapperStyle = React.useMemo(() => {
-    return [
-      variantStyles.trackMarkWrapper,
-      disabled && variantStyles['trackMarkWrapper:disabled'],
-    ]
+    return mergeStyles([
+      styles.trackMarkWrapper,
+      disabled && styles['trackMarkWrapper:disabled'],
+    ])
   }, [disabled])
 
   const sliderLabel = React.useMemo(() => {
@@ -200,12 +167,7 @@ export const Slider = (props: SliderProps) => {
     <InputBase
       {...inputBaseProps}
       disabled={disabled}
-      styles={{
-        ...variantStyles,
-        innerWrapper: [
-          variantStyles.innerWrapper,
-        ],
-      }}
+      style={styles}
       labelAsRow
       description={sliderLabel}
     >
@@ -239,7 +201,7 @@ export const Slider = (props: SliderProps) => {
       </SliderContainer>
 
       {trackMarksProp ?
-        <View css={trackMarkWrapperStyle}>
+        <View style={trackMarkWrapperStyle}>
           {
             trackMarksProp.map((_, idx) => {
               let idxStyle = {}
@@ -247,9 +209,9 @@ export const Slider = (props: SliderProps) => {
               const relativeValue = Number(trackMarksProp[idx])
 
               if (idx === 0) {
-                idxStyle = variantStyles.firstTrackMark
+                idxStyle = styles.firstTrackMark
               } else if (idx === trackMarksProp.length - 1) {
-                idxStyle = variantStyles.lastTrackMark
+                idxStyle = styles.lastTrackMark
               } else {
                 const markerPosition = (relativeValue / max) * 100
 
@@ -261,10 +223,7 @@ export const Slider = (props: SliderProps) => {
                 }
               }
 
-              const style = [
-                trackMarkStyle,
-                idxStyle,
-              ]
+              const style = mergeStyles([trackMarkStyle, idxStyle])
 
               if (!trackMarksHaveContent) {
                 return <SliderTrackMark
@@ -292,4 +251,37 @@ export const Slider = (props: SliderProps) => {
   )
 }
 
-export * from './styles'
+Slider.styleRegistryName = 'Slider'
+
+Slider.elements = [
+  ...InputBase.elements,
+  'thumb',
+  'track',
+  'selectedTrack',
+  'unselectedTrack',
+  'trackMark',
+  'firstTrackMark',
+  'lastTrackMark',
+  'trackMarkWrapper',
+  'sliderContainer',
+]
+
+Slider.rootElement = 'wrapper'
+
+Slider.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Slider as (props: StyledComponentProps<SliderProps, typeof styles>) => IJSX
+}
+
+Slider.defaultProps = {
+  max: 100,
+  min: 0,
+  minStepsBetweenThumbs: 0,
+  defaultValue: [],
+  indicatorLabel: null,
+  description: null,
+  step: 1,
+  onPressThumbSetValue: false,
+  onPressThumb: null,
+} as Partial<SliderProps>
+
+WebStyleRegistry.registerComponent(Slider)

package/src/components/Slider/styles.ts

@@ -1,11 +1,18 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { IconLessInputBaseParts, InputBaseParts, InputBaseStates } from '../InputBase'
 
-type SliderParts = InputBaseParts | 'thumb' | 'track' | 'selectedTrack' | 'unselectedTrack' | 'trackMark' | 'firstTrackMark' | 'lastTrackMark' | 'trackMarkWrapper' | 'sliderContainer' | IconLessInputBaseParts
+type SliderParts =
+	InputBaseParts |
+	'thumb' |
+	'track' |
+	'selectedTrack' |
+	'unselectedTrack' |
+	'trackMark' |
+	'firstTrackMark' |
+	'lastTrackMark' |
+	'trackMarkWrapper' |
+	'sliderContainer' |
+	IconLessInputBaseParts
+
 type SliderStates = Exclude<InputBaseStates, 'focus'>
 
 export type SliderComposition = `${SliderParts}:${SliderStates}` | SliderParts
-
-const createSliderStyle = createDefaultVariantFactory<SliderComposition>()
-
-export const SliderPresets = includePresets((styles) => createSliderStyle(() => ({ wrapper: styles })))

package/src/components/Slider/types.ts

@@ -0,0 +1,29 @@
+import { StyledProp } from '@codeleap/styles'
+import { InputBaseProps } from '../InputBase'
+import { SliderComposition } from './styles'
+import { SliderProps as PrimitiveSliderProps } from '@radix-ui/react-slider'
+import { CSSProperties } from 'react'
+
+export type SliderProps = 
+  Partial<Omit<PrimitiveSliderProps, 'value' | 'onValueChange' | 'style'>> &
+  Pick<InputBaseProps, 'disabled' | 'debugName' | 'description' | 'label'> & 
+  {
+    indicatorLabel?: {
+      order?: number[]
+      separator?: string
+      transformer?: (value: number[], defaultValue: PrimitiveSliderProps['defaultValue']) => string
+    }
+    value: number | number[]
+    onValueChange: (val: number | number[]) => void
+    style?: StyledProp<SliderComposition>
+    trackMarks?: Record<number, string>
+    trackMarkComponent?: React.ComponentType<TrackMarkProps>
+    onPressThumbSetValue?: boolean
+    onPressThumb?: (value: number | number[], thumbIndex: number) => void
+  }
+
+export type TrackMarkProps = {
+  index: number
+  content?: string | React.ReactNode
+  style?: CSSProperties
+}