@codeleap/web 3.24.3 → 4.0.0

package/src/components/NumberIncrement/index.tsx

@@ -1,90 +1,45 @@
-/** @jsx jsx */
-import { jsx, CSSObject } from '@emotion/react'
 import * as React from 'react'
-import {
-  ComponentVariants,
-  yup,
-  useDefaultComponentStyle,
-  StylesOf,
-  PropsOf,
-  TypeGuards,
-  onUpdate,
-  useState,
-  useRef,
-  useValidate,
-  FormTypes,
-  IconPlaceholder,
-} from '@codeleap/common'
-import { View } from '../View'
-import { NumberIncrementPresets, NumberIncrementComposition } from './styles'
-import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
+import { TypeGuards, onUpdate, useState, useRef, useValidate } from '@codeleap/common'
+import { InputBase, selectInputBaseProps } from '../InputBase'
 import { Text } from '../Text'
-import {
-  PatternFormat,
-  PatternFormatProps as PFProps,
-  NumericFormat,
-  NumericFormatProps as NFProps,
-  NumberFormatBase,
-} from 'react-number-format'
-import { FormatInputValueFunction } from 'react-number-format/types/types'
+import { PatternFormat, NumericFormat, NumericFormatProps as NFProps, NumberFormatBase } from 'react-number-format'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { NumberIncrementProps } from './types'
+import { AnyRecord, AppIcon, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
 
+export * from './types'
 export * from './styles'
 
-export type NumberIncrementProps = Pick<
-  InputBaseProps,
-  'debugName' | 'disabled' | 'label'
-> & {
-  styles?: StylesOf<NumberIncrementComposition>
-  value: number
-  onValueChange: (value: number) => void
-  onChangeText?: (value: number) => void
-  validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
-  style?: PropsOf<typeof View>['style']
-  max?: number
-  min?: number
-  step?: number
-  editable?: boolean
-  prefix?: NFProps['prefix']
-  suffix?: NFProps['suffix']
-  separator?: NFProps['thousandSeparator']
-  format?: PFProps['format']
-  mask?: PFProps['mask']
-  hasSeparator?: boolean
-  _error?: string
-  formatter?: FormatInputValueFunction
-  placeholder?: string
-} & ComponentVariants<typeof NumberIncrementPresets>
-
 export const NumberIncrement = (props: NumberIncrementProps) => {
   const {
     inputBaseProps,
-    others,
-  } = selectInputBaseProps(props)
+    others: numberIncrementProps,
+  } = selectInputBaseProps({ ...NumberIncrement.defaultProps, ...props })
 
   const {
-    responsiveVariants = {},
-    variants = [],
-    style = {},
-    styles = {},
+    style,
     value,
     disabled,
     onValueChange,
     onChangeText,
-    max = 1000000000,
-    min = 0,
-    step = 1,
-    editable = true,
-    hasSeparator = false,
-    format = null,
-    mask = undefined,
+    max,
+    min,
+    step,
+    editable,
+    hasSeparator,
+    format,
+    mask,
     suffix,
-    separator = null,
+    separator,
     prefix,
     validate,
     _error,
-    formatter = null,
+    formatter,
     placeholder,
-  } = others
+  } = numberIncrementProps
+
+  const styles = useStylesFor(NumberIncrement.styleRegistryName, style)
 
   const [isFocused, setIsFocused] = useState(false)
 
@@ -110,16 +65,6 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
     return false
   }, [value])
 
-  const variantStyles = useDefaultComponentStyle<'u:NumberIncrement', typeof NumberIncrementPresets>(
-    'u:NumberIncrement',
-    {
-      responsiveVariants,
-      variants,
-      styles,
-      rootElement: 'wrapper',
-    },
-  )
-
   const onChange = (newValue: number) => {
     if (onValueChange) onValueChange?.(newValue)
     if (onChangeText) onChangeText?.(newValue)
@@ -143,19 +88,19 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
 
   const inputTextStyle = React.useMemo(() => {
     return [
-      variantStyles.input,
-      isFocused && variantStyles['input:focus'],
-      hasError && variantStyles['input:error'],
-      disabled && variantStyles['input:disabled'],
-    ]
+      styles.input,
+      isFocused ? styles['input:focus'] : null,
+      hasError ? styles['input:error'] : null,
+      disabled ? styles['input:disabled'] : null,
+    ].filter(Boolean)
   }, [disabled, isFocused, hasError])
 
   const placeholderStyles = [
-    variantStyles.placeholder,
-    isFocused && variantStyles['placeholder:focus'],
-    hasError && variantStyles['placeholder:error'],
-    disabled && variantStyles['placeholder:disabled'],
-  ]
+    styles.placeholder,
+    isFocused ? styles['placeholder:focus'] : null,
+    hasError ? styles['placeholder:error'] : null,
+    disabled ? styles['placeholder:disabled'] : null,
+  ].filter(Boolean)
 
   const handleBlur = React.useCallback(() => {
     if (TypeGuards.isNumber(max) && (value >= max)) {
@@ -224,28 +169,27 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
     <InputBase
       {...inputBaseProps}
       error={hasError ? errorMessage : null}
-      styles={{
-        ...variantStyles,
-        innerWrapper: [
-          variantStyles.innerWrapper,
-          editable && variantStyles['innerWrapper:cursor'],
-        ],
+      style={{
+        ...styles,
+        innerWrapper: {
+          ...styles.innerWrapper,
+          ...(editable ? styles['innerWrapper:cursor'] : {}),
+        },
       }}
       rightIcon={{
-        name: 'plus' as IconPlaceholder,
+        name: 'plus' as AppIcon,
         disabled: disabled || incrementDisabled,
         onPress: () => handleChange('increment'),
         component: 'button',
         ...inputBaseProps.rightIcon,
       }}
       leftIcon={{
-        name: 'minus' as IconPlaceholder,
+        name: 'minus' as AppIcon,
         disabled: disabled || decrementDisabled,
         onPress: () => handleChange('decrement'),
         component: 'button',
         ...inputBaseProps.leftIcon,
       }}
-      style={style}
       disabled={disabled}
       focused={isFocused}
       innerWrapperProps={{
@@ -261,10 +205,13 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
         <Input
           displayType='input'
           css={[
+            // @ts-expect-error
             ...inputTextStyle,
+            // @ts-expect-error
             {
               '&::placeholder': placeholderStyles,
             },
+            // @ts-expect-error
             {
               '&:focus': [
                 {
@@ -289,7 +236,29 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
           placeholder={placeholder}
           getInputRef={innerInputRef}
         />
-      ) : <Text text={String(value)} css={inputTextStyle} />}
+      ) : <Text text={String(value)} style={inputTextStyle} />}
     </InputBase>
   )
 }
+
+NumberIncrement.styleRegistryName = 'NumberIncrement'
+NumberIncrement.elements = [...InputBase.elements, 'input', 'placeholder']
+NumberIncrement.rootElement = 'wrapper'
+
+NumberIncrement.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return NumberIncrement as (props: StyledComponentProps<NumberIncrementProps, typeof styles>) => IJSX
+}
+
+NumberIncrement.defaultProps = {
+  max: 1000000000,
+  min: 0,
+  step: 1,
+  editable: true,
+  hasSeparator: false,
+  mask: undefined,
+  separator: null,
+  format: null,
+  formatter: null,
+} as Partial<NumberIncrementProps>
+
+WebStyleRegistry.registerComponent(NumberIncrement)

package/src/components/NumberIncrement/styles.ts

@@ -1,4 +1,3 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { InputBaseParts } from '../InputBase'
 
 export type NumberIncrementParts = InputBaseParts | 'input' | 'placeholder'
@@ -9,7 +8,3 @@ export type NumberIncrementComposition =
   | NumberIncrementParts
   | `${NumberIncrementParts}:${NumberIncrementStates}`
   | `innerWrapper:cursor`
-
-const createNumberIncrementStyle = createDefaultVariantFactory<NumberIncrementComposition>()
-
-export const NumberIncrementPresets = includePresets((styles) => createNumberIncrementStyle(() => ({ wrapper: styles })))

package/src/components/NumberIncrement/types.ts

@@ -0,0 +1,29 @@
+import { yup, FormTypes } from '@codeleap/common'
+import { NumberIncrementComposition } from './styles'
+import { InputBaseProps } from '../InputBase'
+import { PatternFormatProps as PFProps, NumericFormatProps as NFProps } from 'react-number-format'
+import { FormatInputValueFunction } from 'react-number-format/types/types'
+import { StyledProp } from '@codeleap/styles'
+
+export type NumberIncrementProps =
+  Pick<InputBaseProps, 'debugName' | 'disabled' | 'label'> &
+  {
+    value: number
+    onValueChange: (value: number) => void
+    onChangeText?: (value: number) => void
+    validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
+    style?: StyledProp<NumberIncrementComposition>
+    max?: number
+    min?: number
+    step?: number
+    editable?: boolean
+    prefix?: NFProps['prefix']
+    suffix?: NFProps['suffix']
+    separator?: NFProps['thousandSeparator']
+    format?: PFProps['format']
+    mask?: PFProps['mask']
+    hasSeparator?: boolean
+    _error?: string
+    formatter?: FormatInputValueFunction
+    placeholder?: string
+  }

package/src/components/Overlay/index.tsx

@@ -1,51 +1,53 @@
 import React from 'react'
-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 { Touchable } from '../Touchable'
+import { View } from '../View'
 import { usePopState } from '../../lib'
-
-export type OverlayProps<T extends NativeHTMLElement = 'div'> = {
-  visible?: boolean
-  styles?: StylesOf<OverlayComposition>
-  onPress?: TouchableProps<'div'>['onClick']
-} & ComponentVariants<typeof OverlayPresets> & Omit<ViewProps<T>, 'variants' | 'responsiveVariants'>
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { OverlayProps } from './types'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 
 export * from './styles'
+export * from './types'
 
-export const Overlay = <T extends NativeHTMLElement>(overlayProps:OverlayProps<T>) => {
-  const { 
-    visible, 
-    responsiveVariants, 
-    variants, 
-    styles, 
-    ...props 
-  } = overlayProps
+export const Overlay = (overlayProps: OverlayProps) => {
+  const {
+    visible,
+    style,
+    ...props
+  } = {
+    ...Overlay.defaultProps,
+    ...overlayProps,
+  }
 
-  const variantStyles = useDefaultComponentStyle('Overlay', {
-    variants,
-    responsiveVariants,
-    styles,
-  })
+  const styles = useStylesFor(Overlay.styleRegistryName, style)
 
-  usePopState(visible, props.onPress)
+  usePopState(visible, props?.onPress)
 
-  const Component = props.onClick || props.onPress ? Touchable : View
+  const isPressable = !!props?.onClick || !!props?.onPress
+  const Component = isPressable ? Touchable : View
 
   return (
-    // @ts-ignore
+    // @ts-expect-error
     <Component
-      css={[
+      {...props}
+      style={[
         { transition: 'opacity 0.2s ease' },
-        variantStyles.wrapper,
-        visible ? variantStyles['wrapper:visible'] : {},
+        styles.wrapper,
+        visible ? styles['wrapper:visible'] : null,
       ]}
-      {...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,8 +1,6 @@
-import { createDefaultVariantFactory, includePresets } from "@codeleap/common";
-import { ViewComposition } from "../View";
 
-export type OverlayComposition = ViewComposition
+type OverlayState = 'visible'
 
-const createOverlayStyle = createDefaultVariantFactory<OverlayComposition>()
+type OverlayParts = 'wrapper'
 
-export const OverlayPresets = includePresets((styles) => createOverlayStyle(() => ({ wrapper: styles })))
+export type OverlayComposition = OverlayParts | `${OverlayParts}:${OverlayState}`

package/src/components/Overlay/types.ts

@@ -0,0 +1,13 @@
+import { StyledProp } from '@codeleap/styles'
+import { ViewProps } from '../View'
+import { OverlayComposition } from './styles'
+import { AnyFunction } from '@codeleap/common'
+
+export type OverlayProps =
+  Omit<ViewProps, 'style'> &
+  {
+    debugName: string
+    visible?: boolean
+    style?: StyledProp<OverlayComposition>
+    onPress?: AnyFunction
+  }

package/src/components/Pager/index.tsx

@@ -1,68 +1,40 @@
-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 { 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 '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 type PagerRef = {
-  goTo: (page: number) => void
-}
+export * from './styles'
+export * from './types'
 
-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 = (params: DotsProps) => {
+  const { page, childArray, onPress, styles, dotsDisabled } = params
 
-const Dots = ({ page, childArray, onPress, variantStyles, dotsDisabled }: DotsProps) => {
   return (
-    <View style={variantStyles.dots}>
+    <View style={styles.dots}>
       {childArray.map((_, index) => {
         const isSelected = index === page
-        const css = [
-          variantStyles[isSelected ? 'dot:selected' : 'dot'],
-          dotsDisabled && variantStyles['dot:disabled'],
+
+        const style = [
+          styles.dot,
+          isSelected && styles['dot:selected'],
+          dotsDisabled && styles['dot:disabled'],
         ]
 
         return (
           <Touchable
             key={index}
             onPress={() => onPress?.(index)}
-            css={css}
+            style={style}
             disabled={dotsDisabled}
+            debugName='dots'
           />
         )
       })}
@@ -70,42 +42,31 @@ const Dots = ({ page, childArray, onPress, variantStyles, dotsDisabled }: DotsPr
   )
 }
 
-const PagerComponent = (
-  props: PagerProps,
-  ref: React.ForwardedRef<PagerRef>,
-) => {
+export const Pager = forwardRef<PagerRef, PagerProps>((props, ref) => {
   const sliderRef = useRef<Slider>()
+
   const {
-    styles,
     style,
-    variants,
     children,
-    renderPageWrapper,
-    responsiveVariants,
+    renderPageWrapper: PageWrapper,
     page,
-    dots = false,
-    dotsDisabled = false,
-    infinite = false,
-    disableSwipe = false,
+    dots,
+    dotsDisabled,
+    infinite,
+    disableSwipe,
     onChange,
     footer,
     dotsProps,
     pageWrapperProps,
     ...rest
-  } = props
-
-  const variantStyles = useDefaultComponentStyle<
-    'u:Pager',
-    typeof PagerPresets
-  >('u:Pager', {
-    variants,
-    responsiveVariants,
-    styles,
-    rootElement: 'wrapper',
-  })
+  } = {
+    ...Pager.defaultProps,
+    ...props,
+  }
+
+  const styles = useStylesFor(Pager.styleRegistryName, style)
 
   const childArray = React.Children.toArray(children)
-  const PageWrapper = renderPageWrapper || View
 
   const goTo = useCallback(
     (page: number) => {
@@ -124,7 +85,7 @@ const PagerComponent = (
   }, [page])
 
   return (
-    <View css={[variantStyles.wrapper, style]}>
+    <View style={styles.wrapper}>
       <Slider
         adaptiveHeight={true}
         {...rest}
@@ -138,9 +99,10 @@ const PagerComponent = (
       >
         {childArray.map((child, index) => {
           return (
+            // @ts-expect-error @verify
             <PageWrapper
               key={index}
-              css={variantStyles.pageWrapper}
+              style={styles.pageWrapper}
               {...pageWrapperProps}
             >
               {child}
@@ -149,24 +111,46 @@ const PagerComponent = (
         })}
       </Slider>
 
-      <View css={variantStyles.footerWrapper}>
+      <View style={styles.footerWrapper}>
         {footer}
 
-        {dots && (
+        {dots ? (
           <Dots
             page={page}
             onPress={onChange}
             childArray={childArray}
-            variantStyles={variantStyles}
+            styles={styles}
             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
 }
 
-export const Pager = forwardRef(PagerComponent)
+Pager.defaultProps = {
+  dots: false,
+  dotsDisabled: false,
+  infinite: false,
+  disableSwipe: false,
+  renderPageWrapper: View,
+} as Partial<PagerProps>
 
-export * from './styles'
+WebStyleRegistry.registerComponent(Pager)

package/src/components/Pager/styles.ts

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

package/src/components/Pager/types.ts

@@ -0,0 +1,35 @@
+import { StylesOf } from '@codeleap/common'
+import { Settings } from 'react-slick'
+import { PagerComposition } from './styles'
+import React, { ReactNode, ReactElement } from 'react'
+import { ViewProps } from '../View'
+import { ComponentCommonProps } from '../../types'
+import { StyledProp } from '@codeleap/styles'
+
+export type PagerRef = {
+  goTo: (page: number) => void
+}
+
+export type PagerProps =
+  Omit<Settings, 'style'> &
+  ComponentCommonProps &
+  {
+    style?: StyledProp<PagerComposition>
+    page?: number
+    children: ReactNode
+    onChange?: (page: number) => void
+    renderPageWrapper?: React.FC
+    footer?: ReactElement
+    dotsProps?: DotsProps
+    pageWrapperProps?: ViewProps
+    dotsDisabled?: boolean
+    disableSwipe?: boolean
+  }
+
+export type DotsProps =
+  Pick<PagerProps, 'page' | 'dotsDisabled'> &
+  {
+    childArray: ReactNode[]
+    onPress?: (index: number) => void
+    styles: StylesOf<PagerComposition>
+  }