@codeleap/web 3.25.0 → 3.25.2

package/src/components/Overlay/index.tsx

@@ -1,53 +1,51 @@
 import React from 'react'
-import { Touchable } from '../Touchable'
-import { View } from '../View'
+import {
+  ComponentVariants,
+  StylesOf,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { Touchable, TouchableProps } from '../Touchable'
+import { View, ViewProps } from '../View'
+import { OverlayComposition, OverlayPresets } from './styles'
+import { NativeHTMLElement } from '../../types'
 import { usePopState } from '../../lib'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { OverlayProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+
+export type OverlayProps<T extends NativeHTMLElement = 'div'> = {
+  visible?: boolean
+  styles?: StylesOf<OverlayComposition>
+  onPress?: TouchableProps<'div'>['onClick']
+} & ComponentVariants<typeof OverlayPresets> & Omit<ViewProps<T>, 'variants' | 'responsiveVariants'>
 
 export * from './styles'
-export * from './types'
 
-export const Overlay = (overlayProps: OverlayProps) => {
-  const {
-    visible,
-    style,
-    ...props
-  } = {
-    ...Overlay.defaultProps,
-    ...overlayProps,
-  }
+export const Overlay = <T extends NativeHTMLElement>(overlayProps:OverlayProps<T>) => {
+  const { 
+    visible, 
+    responsiveVariants, 
+    variants, 
+    styles, 
+    ...props 
+  } = overlayProps
 
-  const styles = useStylesFor(Overlay.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle('Overlay', {
+    variants,
+    responsiveVariants,
+    styles,
+  })
 
-  usePopState(visible, props?.onPress)
+  usePopState(visible, props.onPress)
 
-  const isPressable = !!props?.onClick || !!props?.onPress
-  const Component = isPressable ? Touchable : View
+  const Component = props.onClick || props.onPress ? Touchable : View
 
   return (
-    // @ts-expect-error
+    // @ts-ignore
     <Component
-      {...props}
-      style={[
+      css={[
         { transition: 'opacity 0.2s ease' },
-        styles.wrapper,
-        visible ? styles['wrapper:visible'] : null,
+        variantStyles.wrapper,
+        visible ? variantStyles['wrapper:visible'] : {},
       ]}
+      {...props}
     />
   )
 }
-
-Overlay.styleRegistryName = 'Overlay'
-Overlay.elements = ['wrapper']
-Overlay.rootElement = 'wrapper'
-
-Overlay.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Overlay as (props: StyledComponentProps<OverlayProps, typeof styles>) => IJSX
-}
-
-Overlay.defaultProps = {} as Partial<OverlayProps>
-
-WebStyleRegistry.registerComponent(Overlay)

package/src/components/Overlay/styles.ts

@@ -1,6 +1,8 @@
+import { createDefaultVariantFactory, includePresets } from "@codeleap/common";
+import { ViewComposition } from "../View";
 
-type OverlayState = 'visible'
+export type OverlayComposition = ViewComposition
 
-type OverlayParts = 'wrapper'
+const createOverlayStyle = createDefaultVariantFactory<OverlayComposition>()
 
-export type OverlayComposition = OverlayParts | `${OverlayParts}:${OverlayState}`
+export const OverlayPresets = includePresets((styles) => createOverlayStyle(() => ({ wrapper: styles })))

package/src/components/Pager/index.tsx

@@ -1,40 +1,68 @@
-import { onUpdate } from '@codeleap/common'
-import Slider from 'react-slick'
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react'
-import { View } from '../View'
-import { Touchable } from '../Touchable'
-import { DotsProps, PagerProps, PagerRef } from './types'
-import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import {
+  ComponentVariants,
+  StylesOf,
+  onUpdate,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import Slider, { Settings } from 'react-slick'
+import { PagerComposition, PagerPresets } from './styles'
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  ReactNode,
+  ReactElement,
+  CSSProperties,
+} from 'react'
 
 import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
+import { View, ViewProps } from '../View'
+import { Touchable } from '../Touchable'
+import { ComponentCommonProps } from '../../types'
 
-export * from './styles'
-export * from './types'
+export type PagerRef = {
+  goTo: (page: number) => void
+}
 
-const Dots = (params: DotsProps) => {
-  const { page, childArray, onPress, styles, dotsDisabled } = params
+export type PagerProps = Settings &
+  ComponentVariants<typeof PagerPresets> & {
+    styles?: StylesOf<PagerComposition>
+    page?: number
+    style?: CSSProperties
+    children: ReactNode
+    onChange?: (page: number) => void
+    renderPageWrapper?: React.FC
+    footer?: ReactElement
+    dotsProps?: DotsProps
+    pageWrapperProps?: ViewProps<'div'>
+    dotsDisabled?:boolean
+    disableSwipe?: boolean
+  } & ComponentCommonProps
+
+type DotsProps = Pick<PagerProps, 'page' | 'dotsDisabled'> & {
+  childArray: ReactNode[]
+  onPress?: (index: number) => void
+  variantStyles: StylesOf<PagerComposition>
+}
 
+const Dots = ({ page, childArray, onPress, variantStyles, dotsDisabled }: DotsProps) => {
   return (
-    <View style={styles.dots}>
+    <View style={variantStyles.dots}>
       {childArray.map((_, index) => {
         const isSelected = index === page
-
-        const style = [
-          styles.dot,
-          isSelected && styles['dot:selected'],
-          dotsDisabled && styles['dot:disabled'],
+        const css = [
+          variantStyles[isSelected ? 'dot:selected' : 'dot'],
+          dotsDisabled && variantStyles['dot:disabled'],
         ]
 
         return (
           <Touchable
             key={index}
             onPress={() => onPress?.(index)}
-            style={style}
+            css={css}
             disabled={dotsDisabled}
-            debugName='dots'
           />
         )
       })}
@@ -42,31 +70,42 @@ const Dots = (params: DotsProps) => {
   )
 }
 
-export const Pager = forwardRef<PagerRef, PagerProps>((props, ref) => {
+const PagerComponent = (
+  props: PagerProps,
+  ref: React.ForwardedRef<PagerRef>,
+) => {
   const sliderRef = useRef<Slider>()
-
   const {
+    styles,
     style,
+    variants,
     children,
-    renderPageWrapper: PageWrapper,
+    renderPageWrapper,
+    responsiveVariants,
     page,
-    dots,
-    dotsDisabled,
-    infinite,
-    disableSwipe,
+    dots = false,
+    dotsDisabled = false,
+    infinite = false,
+    disableSwipe = false,
     onChange,
     footer,
     dotsProps,
     pageWrapperProps,
     ...rest
-  } = {
-    ...Pager.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(Pager.styleRegistryName, style)
+  } = props
+
+  const variantStyles = useDefaultComponentStyle<
+    'u:Pager',
+    typeof PagerPresets
+  >('u:Pager', {
+    variants,
+    responsiveVariants,
+    styles,
+    rootElement: 'wrapper',
+  })
 
   const childArray = React.Children.toArray(children)
+  const PageWrapper = renderPageWrapper || View
 
   const goTo = useCallback(
     (page: number) => {
@@ -85,7 +124,7 @@ export const Pager = forwardRef<PagerRef, PagerProps>((props, ref) => {
   }, [page])
 
   return (
-    <View style={styles.wrapper}>
+    <View css={[variantStyles.wrapper, style]}>
       <Slider
         adaptiveHeight={true}
         {...rest}
@@ -99,10 +138,9 @@ export const Pager = forwardRef<PagerRef, PagerProps>((props, ref) => {
       >
         {childArray.map((child, index) => {
           return (
-            // @ts-expect-error @verify
             <PageWrapper
               key={index}
-              style={styles.pageWrapper}
+              css={variantStyles.pageWrapper}
               {...pageWrapperProps}
             >
               {child}
@@ -111,46 +149,24 @@ export const Pager = forwardRef<PagerRef, PagerProps>((props, ref) => {
         })}
       </Slider>
 
-      <View style={styles.footerWrapper}>
+      <View css={variantStyles.footerWrapper}>
         {footer}
 
-        {dots ? (
+        {dots && (
           <Dots
             page={page}
             onPress={onChange}
             childArray={childArray}
-            styles={styles}
+            variantStyles={variantStyles}
             dotsDisabled={dotsDisabled}
             {...dotsProps}
           />
-        ) : null}
+        )}
       </View>
     </View>
   )
-}) as StyledComponentWithProps<PagerProps>
-
-Pager.styleRegistryName = 'Pager'
-
-Pager.elements = [
-  'wrapper',
-  'dot',
-  'dots',
-  'pageWrapper',
-  'footerWrapper',
-]
-
-Pager.rootElement = 'wrapper'
-
-Pager.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Pager as (props: StyledComponentProps<PagerProps, typeof styles>) => IJSX
 }
 
-Pager.defaultProps = {
-  dots: false,
-  dotsDisabled: false,
-  infinite: false,
-  disableSwipe: false,
-  renderPageWrapper: View,
-} as Partial<PagerProps>
+export const Pager = forwardRef(PagerComponent)
 
-WebStyleRegistry.registerComponent(Pager)
+export * from './styles'

package/src/components/Pager/styles.ts

@@ -1,8 +1,14 @@
-
-type Dots = 'dot' | 'dot:selected' | 'dot:disabled' | 'dots'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
 export type PagerComposition =
   | 'wrapper'
+  | 'dot'
+  | 'dot:selected'
+  | 'dots'
   | 'pageWrapper'
   | 'footerWrapper'
-  | Dots
+
+const createPagerStyle = createDefaultVariantFactory<PagerComposition>()
+
+export const PagerPresets = includePresets((styles) => createPagerStyle(() => ({ wrapper: styles })),
+)

package/src/components/Progress/Bar/index.tsx

@@ -1,24 +1,42 @@
-import { TypeGuards } from '@codeleap/common'
+import { ProgressBarPresets } from './styles'
+import { TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
 import { Root, Indicator } from '@radix-ui/react-progress'
 import { Icon, Text, View } from '../../components'
 import { ProgressBarProps } from './types'
 import { formatProgress as _formatProgress } from '../utils'
-import { WebStyleRegistry } from '../../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
-import { useStylesFor } from '../../../lib/hooks/useStylesFor'
 
 export * from './types'
 export * from './styles'
 
+const defaultProps: Partial<ProgressBarProps> = {
+  progress: 0,
+  variants: [],
+  responsiveVariants: {},
+  styles: {},
+  textProps: {},
+  progressIndicatorProps: {},
+  progressRootProps: {},
+  showProgress: false,
+  formatProgress: _formatProgress,
+}
+
 export const ProgressBar = (props: ProgressBarProps) => {
+  const allProps = {
+    ...ProgressBar.defaultProps,
+    ...props,
+  }
+
   const {
     progress,
-    style,
+    variants,
+    responsiveVariants,
+    styles,
     debugName,
     formatProgress,
     progressIndicatorProps,
     progressRootProps,
     showProgress,
+
     leftIcon,
     leftIconProps,
     rightIcon,
@@ -30,88 +48,75 @@ export const ProgressBar = (props: ProgressBarProps) => {
     rightText,
     rightTextProps,
     ...rest
-  } = {
-    ...ProgressBar.defaultProps,
-    ...props,
-  }
+  } = allProps
 
-  const styles = useStylesFor(ProgressBar.styleRegistryName, style)
-
-  const leftIconStyles = mergeStyles([styles.icon, styles.leftIcon])
-  const rightIconStyles = mergeStyles([styles.icon, styles.rightIcon])
-
-  const leftTextStyles = mergeStyles([styles.text, styles.leftText])
-  const rightTextStyles = mergeStyles([styles.text, styles.rightText])
+  const variantStyles = useDefaultComponentStyle<
+    'u:ProgressBar',
+    typeof ProgressBarPresets
+  >('u:ProgressBar', {
+    variants,
+    responsiveVariants,
+    styles,
+  })
 
   return (
-    <View debugName={debugName} {...rest} style={styles.wrapper}>
+    <View css={variantStyles.wrapper} debugName={debugName} {...rest}>
       {!TypeGuards.isNil(leftIcon) ? (
         <Icon
           name={leftIcon}
+          style={{ ...variantStyles.icon, ...variantStyles.leftIcon }}
           debugName={`leftIcon-${debugName}`}
           {...leftIconProps}
-          style={leftIconStyles}
         />
       ) : null}
       {TypeGuards.isString(leftText) ? (
         <Text
           text={leftText}
+          css={[variantStyles.text, variantStyles.leftText]}
           {...leftTextProps}
-          style={leftTextStyles}
         />
-      ) : leftText}
-
+      ) : (
+        leftText
+      )}
       <Root
-        // @ts-expect-error
-        css={styles.progress}
+        css={variantStyles.progress}
         value={progress}
         {...progressRootProps}
       >
         <Indicator
-          css={{ ...styles.indicator, transform: `translateX(-${100 - progress}%)` }}
+          css={[
+            variantStyles.indicator,
+            { transform: `translateX(-${100 - progress}%)` },
+          ]}
           {...progressIndicatorProps}
         />
       </Root>
-
       {TypeGuards.isString(text) || showProgress ? (
         <Text
+          style={variantStyles.text}
           text={showProgress ? formatProgress(progress) : text}
           {...textProps}
-          style={styles.text}
         />
       ) : text}
-
       {!TypeGuards.isNil(rightIcon) ? (
         <Icon
           name={rightIcon}
+          style={{ ...variantStyles.icon, ...variantStyles.rightIcon }}
           debugName={`rightIcon-${debugName}`}
           {...rightIconProps}
-          style={rightIconStyles}
         />
       ) : null}
       {TypeGuards.isString(rightText) ? (
         <Text
           text={rightText}
+          css={[variantStyles.text, variantStyles.rightText]}
           {...rightTextProps}
-          style={rightTextStyles}
         />
-      ) : rightText}
+      ) : (
+        rightText
+      )}
     </View>
   )
 }
 
-ProgressBar.styleRegistryName = 'ProgressBar'
-ProgressBar.elements = ['wrapper', 'progress', 'indicator', 'text', 'icon', 'leftIcon', 'leftText', 'rightIcon', 'rightText']
-ProgressBar.rootElement = 'wrapper'
-
-ProgressBar.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return ProgressBar as (props: StyledComponentProps<ProgressBarProps, typeof styles>) => IJSX
-}
-
-ProgressBar.defaultProps = {
-  progress: 0,
-  showProgress: false,
-  formatProgress: _formatProgress,
-} as Partial<ProgressBarProps>
-
-WebStyleRegistry.registerComponent(ProgressBar)
+ProgressBar.defaultProps = defaultProps

package/src/components/Progress/Bar/styles.tsx

@@ -0,0 +1,7 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type ProgressBarComposition = 'wrapper' | 'progress' | 'indicator' | 'text' | 'icon' | 'leftIcon' | 'leftText' | 'rightIcon' | 'rightText'
+
+const createProgressBarStyle = createDefaultVariantFactory<ProgressBarComposition>()
+
+export const ProgressBarPresets = includePresets((styles) => createProgressBarStyle(() => ({ wrapper: styles })))

package/src/components/Progress/Bar/types.tsx

@@ -0,0 +1,30 @@
+import { ComponentVariants, IconPlaceholder, PropsOf, StylesOf } from '@codeleap/common'
+import { ProgressBarComposition, ProgressBarPresets } from './styles'
+import {
+  ProgressProps,
+  ProgressIndicatorProps,
+} from '@radix-ui/react-progress'
+import { IconProps, View, TextProps as _TextProps } from '../../components'
+import { ProgressPropsRoot } from '..'
+import { ElementType } from 'react'
+
+type TextProps = _TextProps<ElementType>
+
+export type ProgressBarProps = ComponentVariants<typeof ProgressBarPresets> &
+  Omit<PropsOf<typeof View>, 'variants' | 'responsiveVariants' | 'styles'> &
+  ProgressPropsRoot & {
+    styles?: StylesOf<ProgressBarComposition>
+    progressIndicatorProps?: ProgressIndicatorProps
+    progressRootProps?: ProgressProps
+
+    leftIcon?: IconPlaceholder
+    leftIconProps?: Partial<IconProps>
+    rightIcon?: IconPlaceholder
+    rightIconProps?: Partial<IconProps>
+    text?: string
+    textProps?: Partial<TextProps>
+    leftText?: TextProps['text'] | JSX.Element
+    leftTextProps?: Partial<TextProps>
+    rightText?: TextProps['text'] | JSX.Element
+    rightTextProps?: Partial<TextProps>
+  }