@codeleap/web 3.25.0 → 3.25.2

package/src/components/Slider/index.tsx

@@ -1,8 +1,15 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
 import React from 'react'
-import { onMount, TypeGuards, useRef } from '@codeleap/common'
+
+import { ComponentVariants, onMount, PropsOf, TypeGuards, useDefaultComponentStyle, useRef } from '@codeleap/common'
+import { SliderComposition } from './styles'
+import { StylesOf } from '../../types'
 import { View } from '../View'
-import { InputBase, selectInputBaseProps } from '../InputBase'
+import { concatStyles, InputBaseProps, InputBase, selectInputBaseProps } from '../InputBase'
+import { SliderPresets } from './styles'
 import { Text } from '../Text'
+
 import {
   Root as SliderContainer,
   Track as SliderTrack,
@@ -10,13 +17,30 @@ 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 * from './types'
+
+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
+}
 
 const DefaultSliderTrackMark = (props: TrackMarkProps) => {
   const { style } = props
@@ -27,17 +51,17 @@ const DefaultSliderTrackMark = (props: TrackMarkProps) => {
     </React.Fragment>
   }
 
-  return <Text text={props.content} style={style} />
+  return <Text
+    text={props.content}
+    css={style}
+  />
 }
 
 export const Slider = (props: SliderProps) => {
   const {
     inputBaseProps,
     others,
-  } = selectInputBaseProps({
-    ...Slider.defaultProps,
-    ...props,
-  })
+  } = selectInputBaseProps(props)
 
   const {
     onValueChange,
@@ -45,24 +69,25 @@ export const Slider = (props: SliderProps) => {
     value: _value,
     label,
     debugName,
+    styles = {},
+    responsiveVariants = {},
     style,
     disabled,
+    variants,
     trackMarks,
-    trackMarkComponent: SliderTrackMark = DefaultSliderTrackMark,
-    max,
-    min,
-    defaultValue: defaultSliderValue,
-    indicatorLabel,
-    description,
-    minStepsBetweenThumbs,
-    step,
-    onPressThumbSetValue,
-    onPressThumb,
+    trackMarkComponent = DefaultSliderTrackMark,
+    defaultValue: defaultSliderValue = [],
+    max = 100,
+    min = 0,
+    indicatorLabel = null,
+    description = null,
+    minStepsBetweenThumbs = 0,
+    step = 1,
+    onPressThumbSetValue = false,
+    onPressThumb = null,
     ...sliderProps
   } = others
 
-  const styles = useStylesFor(Slider.styleRegistryName, style)
-
   const isUniqueValue = !TypeGuards.isArray(_value)
   const value = isUniqueValue ? [_value] : _value
 
@@ -77,41 +102,49 @@ 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 mergeStyles([
-      styles.thumb,
-      disabled && styles['thumb:disabled'],
+    return concatStyles([
+      variantStyles.thumb,
+      disabled && variantStyles['thumb:disabled'],
     ])
   }, [])
 
   const trackStyle = React.useMemo(() => {
-    return mergeStyles([
-      styles.track,
-      disabled && styles['track:disabled'],
-      styles.unselectedTrack,
-      disabled && styles['unselectedTrack:disabled'],
+    return concatStyles([
+      variantStyles.track,
+      disabled && variantStyles['track:disabled'],
+      variantStyles.unselectedTrack,
+      disabled && variantStyles['unselectedTrack:disabled'],
     ])
   }, [disabled])
 
   const selectedTrackStyle = React.useMemo(() => {
-    return mergeStyles([
-      styles.selectedTrack,
-      disabled && styles['selectedTrack:disabled'],
+    return concatStyles([
+      variantStyles.selectedTrack,
+      disabled && variantStyles['selectedTrack:disabled'],
     ])
   }, [disabled])
 
   const containerStyle = React.useMemo(() => {
-    return mergeStyles([
-      styles.sliderContainer,
-      disabled && styles['sliderContainer:disabled'],
+    return concatStyles([
+      variantStyles.sliderContainer,
+      disabled && variantStyles['sliderContainer:disabled'],
     ])
   }, [disabled])
 
@@ -125,17 +158,17 @@ export const Slider = (props: SliderProps) => {
   }, [trackMarksHaveContent])
 
   const trackMarkStyle = React.useMemo(() => {
-    return mergeStyles([
-      styles.trackMark,
-      disabled && styles['trackMark:disabled'],
+    return concatStyles([
+      variantStyles.trackMark,
+      disabled && variantStyles['trackMark:disabled'],
     ])
   }, [disabled])
 
   const trackMarkWrapperStyle = React.useMemo(() => {
-    return mergeStyles([
-      styles.trackMarkWrapper,
-      disabled && styles['trackMarkWrapper:disabled'],
-    ])
+    return [
+      variantStyles.trackMarkWrapper,
+      disabled && variantStyles['trackMarkWrapper:disabled'],
+    ]
   }, [disabled])
 
   const sliderLabel = React.useMemo(() => {
@@ -167,7 +200,12 @@ export const Slider = (props: SliderProps) => {
     <InputBase
       {...inputBaseProps}
       disabled={disabled}
-      style={styles}
+      styles={{
+        ...variantStyles,
+        innerWrapper: [
+          variantStyles.innerWrapper,
+        ],
+      }}
       labelAsRow
       description={sliderLabel}
     >
@@ -201,7 +239,7 @@ export const Slider = (props: SliderProps) => {
       </SliderContainer>
 
       {trackMarksProp ?
-        <View style={trackMarkWrapperStyle}>
+        <View css={trackMarkWrapperStyle}>
           {
             trackMarksProp.map((_, idx) => {
               let idxStyle = {}
@@ -209,9 +247,9 @@ export const Slider = (props: SliderProps) => {
               const relativeValue = Number(trackMarksProp[idx])
 
               if (idx === 0) {
-                idxStyle = styles.firstTrackMark
+                idxStyle = variantStyles.firstTrackMark
               } else if (idx === trackMarksProp.length - 1) {
-                idxStyle = styles.lastTrackMark
+                idxStyle = variantStyles.lastTrackMark
               } else {
                 const markerPosition = (relativeValue / max) * 100
 
@@ -223,7 +261,10 @@ export const Slider = (props: SliderProps) => {
                 }
               }
 
-              const style = mergeStyles([trackMarkStyle, idxStyle])
+              const style = [
+                trackMarkStyle,
+                idxStyle,
+              ]
 
               if (!trackMarksHaveContent) {
                 return <SliderTrackMark
@@ -251,37 +292,4 @@ export const Slider = (props: SliderProps) => {
   )
 }
 
-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)
+export * from './styles'

package/src/components/Slider/styles.ts

@@ -1,18 +1,11 @@
+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/Switch/index.tsx

@@ -1,48 +1,65 @@
-import React from 'react'
-import { InputBase, InputBaseDefaultOrder, selectInputBaseProps } from '../InputBase'
-import { useAnimatedVariantStyles } from '../../lib'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+/** @jsx jsx */
+import { jsx, CSSObject } from '@emotion/react'
+import * as React from 'react'
+import { ComponentVariants, useDefaultComponentStyle, StylesOf, PropsOf } from '@codeleap/common'
+import { View } from '../View'
+import { SwitchPresets, SwitchComposition } from './styles'
+import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps } from '../InputBase'
+import { useAnimatedVariantStyles } from '../..'
 import { motion } from 'framer-motion'
-import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { SwitchProps } from './types'
 
 export * from './styles'
-export * from './types'
+
+export type SwitchProps = Pick<
+  InputBaseProps,
+  'debugName' | 'disabled' | 'label'
+> & {
+  styles?: StylesOf<SwitchComposition>
+  value: boolean
+  onValueChange: (value: boolean) => void
+  onChange?: (value: boolean) => void
+  style?: PropsOf<typeof View>['style']
+  switchOnLeft?: boolean
+} & ComponentVariants<typeof SwitchPresets>
 
 const reversedOrder = [...InputBaseDefaultOrder].reverse()
 
 export const Switch = (props: SwitchProps) => {
   const {
     inputBaseProps,
-    others: switchProps,
-  } = selectInputBaseProps({
-    ...Switch.defaultProps,
-    ...props,
-  })
+    others,
+  } = selectInputBaseProps(props)
 
   const {
-    style,
+    responsiveVariants = {},
+    variants = [],
+    style = {},
+    styles = {},
     value,
     disabled,
     debugName,
     onValueChange,
     onChange,
     switchOnLeft,
-  } = switchProps
+  } = others
 
-  const styles = useStylesFor(Switch.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:Switch', typeof SwitchPresets>('u:Switch', {
+    responsiveVariants,
+    variants,
+    styles,
+    rootElement: 'wrapper',
+  })
 
   const trackAnimation = useAnimatedVariantStyles({
-    variantStyles: styles,
+    variantStyles,
     animatedProperties: ['track:off', 'track:disabled', 'track:on', 'track:disabled-on', 'track:disabled-off'],
     updater: () => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? styles['track:disabled-on'] : styles['track:disabled-off']
+        disabledStyle = value ? variantStyles['track:disabled-on'] : variantStyles['track:disabled-off']
       }
-      const style = value ? styles['track:on'] : styles['track:off']
+      const style = value ? variantStyles['track:on'] : variantStyles['track:off']
 
       return {
         ...style,
@@ -53,15 +70,15 @@ export const Switch = (props: SwitchProps) => {
   })
 
   const thumbAnimation = useAnimatedVariantStyles({
-    variantStyles: styles,
+    variantStyles,
     animatedProperties: ['thumb:off', 'thumb:disabled', 'thumb:on', 'thumb:disabled-off', 'thumb:disabled-on'],
     updater: () => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? styles['thumb:disabled-on'] : styles['thumb:disabled-off']
+        disabledStyle = value ? variantStyles['thumb:disabled-on'] : variantStyles['thumb:disabled-off']
       }
-      const style = value ? styles['thumb:on'] : styles['thumb:off']
+      const style = value ? variantStyles['thumb:on'] : variantStyles['thumb:off']
       return {
         ...style,
         ...disabledStyle,
@@ -70,11 +87,7 @@ export const Switch = (props: SwitchProps) => {
     dependencies: [value, disabled],
   })
 
-  // @ts-expect-error icss type
-  const _switchOnLeft = switchOnLeft ?? styles.__props?.switchOnLeft
-
-  const thumbStyles = mergeStyles([styles.thumb, disabled && styles['thumb:disabled']])
-  const trackStyles = mergeStyles([styles.track, disabled && styles['track:disabled']])
+  const _switchOnLeft = switchOnLeft ?? variantStyles.__props?.switchOnLeft
 
   const handleChange = (e) => {
     if (disabled) return
@@ -84,43 +97,41 @@ export const Switch = (props: SwitchProps) => {
     }
   }
 
-  return (
-    <InputBase
-      {...inputBaseProps}
-      debugName={debugName}
-      style={styles}
-      order={_switchOnLeft ? reversedOrder : InputBaseDefaultOrder}
-      disabled={disabled}
-      noError
+  return <InputBase
+    {...inputBaseProps}
+    debugName={debugName}
+    styles={{
+      ...variantStyles,
+      innerWrapper: [
+        variantStyles.innerWrapper,
+      ],
+    }}
+    order={_switchOnLeft ? reversedOrder : InputBaseDefaultOrder}
+    style={style}
+    disabled={disabled}
+    noError
+  >
+    <motion.div
+      css={[
+        variantStyles.track,
+        disabled && variantStyles['track:disabled'],
+      ]}
+      initial={false}
+      animate={trackAnimation}
+      transition={variantStyles['track:transition']}
+      onClick={handleChange}
+      onKeyDown={handleChange}
+      tabIndex={0}
     >
       <motion.div
-        style={trackStyles}
+        css={[
+          variantStyles.thumb,
+          disabled && variantStyles['thumb:disabled'],
+        ]}
         initial={false}
-        animate={trackAnimation}
-        transition={styles['track:transition']}
-        onClick={handleChange}
-        onKeyDown={handleChange}
-        tabIndex={0}
-      >
-        <motion.div
-          style={thumbStyles}
-          initial={false}
-          animate={thumbAnimation}
-          transition={styles['thumb:transition']}
-        />
-      </motion.div>
-    </InputBase>
-  )
+        animate={thumbAnimation}
+        transition={variantStyles['thumb:transition']}
+      />
+    </motion.div>
+  </InputBase>
 }
-
-Switch.styleRegistryName = 'Switch'
-Switch.elements = [...InputBase.elements, 'track', 'thumb', '__props']
-Switch.rootElement = 'wrapper'
-
-Switch.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Switch as (props: StyledComponentProps<SwitchProps, typeof styles>) => IJSX
-}
-
-Switch.defaultProps = {} as Partial<SwitchProps>
-
-WebStyleRegistry.registerComponent(Switch)

package/src/components/Switch/styles.ts

@@ -1,7 +1,8 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { InputBaseParts, InputBaseStates } from '../InputBase'
 
 type AnimatableParts = 'track' | 'thumb'
-export type SwitchParts = InputBaseParts | AnimatableParts
+export type SwitchParts = InputBaseParts | AnimatableParts 
 
 export type SwitchAnimationStates = 'on' | 'off' | 'disabled-on' | 'disabled-off'
 
@@ -13,3 +14,7 @@ export type SwitchComposition =
   | `${AnimatableParts}:transition`
   | `${AnimatableParts}:${SwitchAnimationStates}`
   | '__props'
+
+const createSwitchStyle = createDefaultVariantFactory<SwitchComposition>()
+
+export const SwitchPresets = includePresets((styles) => createSwitchStyle(() => ({ wrapper: styles })))

package/src/components/Tag/index.tsx

@@ -1,24 +1,35 @@
 import React from 'react'
-import { TypeGuards } from '@codeleap/common'
-import { TagParts } from './styles'
+import { TypeGuards, useDefaultComponentStyle, useNestedStylesByKey } from '@codeleap/common'
+import { TagParts, TagPresets } from './styles'
 import { TagProps } from './types'
 import { Icon } from '../Icon'
 import { Text } from '../Text'
 import { Touchable } from '../Touchable'
 import { View } from '../View'
 import { Badge } from '../Badge'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, mergeStyles, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
 
 export * from './styles'
 export * from './types'
 
+const defaultProps: Partial<TagProps> = {
+  debugName: 'Tag component',
+  disabled: false,
+}
+
 export const Tag = (props: TagProps) => {
+  const allProps = {
+    ...Tag.defaultProps,
+    ...props,
+  }
+
   const {
+    variants,
     rightComponent,
     leftComponent,
+    responsiveVariants,
+    styles,
     style,
+    css,
     leftIcon,
     text,
     textProps,
@@ -33,14 +44,16 @@ export const Tag = (props: TagProps) => {
     onPress,
     disabled,
     ...touchableProps
-  } = {
-    ...Tag.defaultProps,
-    ...props,
-  }
+  } = allProps
 
-  const styles = useStylesFor(Tag.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:Tag', typeof TagPresets>('u:Tag', {
+    variants,
+    responsiveVariants,
+    styles,
+  })
 
-  const compositionStyles = useCompositionStyles(['rightBadge', 'leftBadge'], styles)
+  const leftBadgeStyles = useNestedStylesByKey('leftBadge', variantStyles)
+  const rightBadgeStyles = useNestedStylesByKey('rightBadge', variantStyles)
 
   const isPressable = TypeGuards.isFunction(onPress)
 
@@ -48,24 +61,29 @@ export const Tag = (props: TagProps) => {
 
   const wrapperProps = isPressable ? { onPress, ...touchableProps } : touchableProps
 
-  const getStylesByKey = (styleKey: TagParts) => mergeStyles([
-    styles?.[styleKey],
-    isPressable && styles[`${styleKey}:pressable`],
-    disabled && styles[`${styleKey}:disabled`],
+  const getStylesByKey = (styleKey: TagParts) => ([
+    variantStyles?.[styleKey],
+    isPressable && variantStyles[`${styleKey}:pressable`],
+    disabled && variantStyles[`${styleKey}:disabled`],
   ])
 
-  const wrapperStyles = React.useMemo(() => getStylesByKey('wrapper'), [styles, disabled, isPressable, style])
-  const textStyles = React.useMemo(() => getStylesByKey('text'), [styles, disabled, isPressable])
-  const leftIconStyles = React.useMemo(() => getStylesByKey('leftIcon'), [styles, disabled, isPressable])
-  const rightIconStyles = React.useMemo(() => getStylesByKey('rightIcon'), [styles, disabled, isPressable])
+  const wrapperStyles = React.useMemo(() => ([
+    getStylesByKey('wrapper'),
+    css,
+    style,
+  ]), [variantStyles, disabled, isPressable, style])
+
+  const textStyles = React.useMemo(() => getStylesByKey('text'), [variantStyles, disabled, isPressable])
+  const leftIconStyles = React.useMemo(() => getStylesByKey('leftIcon'), [variantStyles, disabled, isPressable])
+  const rightIconStyles = React.useMemo(() => getStylesByKey('rightIcon'), [variantStyles, disabled, isPressable])
 
   return (
-    <Wrapper disabled={disabled} {...wrapperProps} style={wrapperStyles}>
+    <Wrapper css={wrapperStyles} disabled={disabled} {...wrapperProps}>
       {leftComponent}
       {leftBadge && (
         <Badge
           debugName={`${touchableProps?.debugName}:leftBadge`}
-          style={compositionStyles.leftBadge}
+          styles={leftBadgeStyles}
           badge={leftBadge}
           disabled={disabled}
           {...leftBadgeProps}
@@ -74,19 +92,19 @@ export const Tag = (props: TagProps) => {
       {!TypeGuards.isNil(leftIcon) && (
         <Icon
           debugName={`${touchableProps?.debugName}:leftIcon`}
-          style={leftIconStyles}
+          css={leftIconStyles}
           name={leftIcon}
           {...leftIconProps}
         />
       )}
 
-      {TypeGuards.isString(text) ? <Text text={text} style={textStyles} {...textProps} /> : text}
+      {TypeGuards.isString(text) ? <Text text={text} css={textStyles} {...textProps} /> : text}
       {children}
 
       {!TypeGuards.isNil(rightIcon) && (
         <Icon
           debugName={`${touchableProps?.debugName}:rightIcon`}
-          style={rightIconStyles}
+          css={rightIconStyles}
           name={rightIcon}
           {...rightIconProps}
         />
@@ -94,7 +112,7 @@ export const Tag = (props: TagProps) => {
       {rightBadge && (
         <Badge
           debugName={`${touchableProps?.debugName}:rightBadge`}
-          style={compositionStyles.rightBadge}
+          styles={rightBadgeStyles}
           badge={rightBadge}
           disabled={disabled}
           {...rightBadgeProps}
@@ -105,17 +123,4 @@ export const Tag = (props: TagProps) => {
   )
 }
 
-Tag.styleRegistryName = 'Tag'
-Tag.elements = ['wrapper', 'text', 'leftIcon', 'rightIcon', 'leftBadge', 'rightBadge']
-Tag.rootElement = 'wrapper'
-
-Tag.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Tag as (props: StyledComponentProps<TagProps, typeof styles>) => IJSX
-}
-
-Tag.defaultProps = {
-  debugName: 'Tag component',
-  disabled: false,
-} as Partial<TagProps>
-
-WebStyleRegistry.registerComponent(Tag)
+Tag.defaultProps = defaultProps