@codeleap/web 3.25.0 → 3.25.3

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

@@ -1,81 +1,99 @@
-import { CircularProgressbarWithChildren, buildStyles } from 'react-circular-progressbar'
-import { TypeGuards } from '@codeleap/common'
+import {
+  CircularProgressbarWithChildren,
+  buildStyles,
+} from 'react-circular-progressbar'
+import { View, Text, Icon } from '../../components'
+import { TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { ProgressCirclePresets } from './styles'
 import { ProgressCircleProps } from './types'
 import { formatProgress as _formatProgress } from '../utils'
 import { useMemo } from '@codeleap/common'
-import { useStylesFor } from '../../../lib/hooks/useStylesFor'
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
-import { WebStyleRegistry } from '../../../lib/WebStyleRegistry'
-import { Text } from '../../Text'
-import { Icon } from '../../Icon'
-import { View } from '../../View'
-import { CSSProperties } from 'react'
 
 export * from './styles'
 export * from './types'
 
+const defaultProps: Partial<ProgressCircleProps> = {
+  progress: 0,
+  variants: [],
+  responsiveVariants: {},
+  styles: {},
+  showProgress: false,
+  formatProgress: _formatProgress,
+  size: null,
+}
+
 export const ProgressCircle = (props: ProgressCircleProps) => {
+  const allProps = {
+    ...ProgressCircle.defaultProps,
+    ...props,
+  }
+
   const {
     text,
     progress,
     icon,
     iconProps,
+    variants,
+    styles,
     debugName,
     showProgress,
+    responsiveVariants,
     circleProps,
     children,
     formatProgress,
     circleStyles,
-    style,
     textProps,
     size: propSize,
     ...rest
-  } = {
-    ...ProgressCircle.defaultProps,
-    ...props,
-  }
+  } = allProps
 
-  const styles = useStylesFor(ProgressCircle.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<
+    'u:ProgressCircle',
+    typeof ProgressCirclePresets
+  >('u:ProgressCircle', {
+    variants,
+    responsiveVariants,
+    styles,
+    rootElement: 'wrapper',
+  })
 
   const wrapperSize = useMemo(() => {
     if (TypeGuards.isNumber(propSize)) return propSize
-    // @ts-expect-error icss type
-    const value = styles.circle?.size ?? styles.circle?.width ?? styles.circle?.height
+    const { size, width, height } = variantStyles.circle
+    const value = size ?? width ?? height
     return value ?? 0
-  }, [styles.circle])
-
-  const lineStyle = styles.line as CSSProperties
+  }, [variantStyles.circle])
 
   return (
-    <View debugName={debugName} {...rest} style={styles.wrapper}>
+    <View debugName={debugName} css={variantStyles.wrapper} {...rest}>
       <CircularProgressbarWithChildren
         value={progress}
+        css={[
+          variantStyles.circle,
+          { width: wrapperSize, height: wrapperSize },
+        ]}
         styles={buildStyles({
-          pathColor: lineStyle?.borderColor,
-          trailColor: lineStyle?.backgroundColor,
+          pathColor: variantStyles.line?.borderColor,
+          trailColor: variantStyles.line?.backgroundColor,
           strokeLinecap: 'butt',
           ...circleStyles,
         })}
         {...circleProps}
-        // @ts-expect-error
-        css={[styles.circle, { width: wrapperSize, height: wrapperSize }]}
       >
         {children}
-
         {!TypeGuards.isNil(icon) ? (
           <Icon
             name={icon}
+            style={variantStyles.icon}
             debugName={`innerIcon-${debugName}`}
             {...iconProps}
-            style={styles.icon}
           />
         ) : null}
-
         {TypeGuards.isString(text) || showProgress ? (
           <Text
+            style={variantStyles.text}
             text={showProgress ? formatProgress(progress) : String(text)}
             {...textProps}
-            style={styles.text}
           />
         ) : text}
       </CircularProgressbarWithChildren>
@@ -83,19 +101,4 @@ export const ProgressCircle = (props: ProgressCircleProps) => {
   )
 }
 
-ProgressCircle.styleRegistryName = 'ProgressCircle'
-ProgressCircle.elements = ['wrapper', 'line', 'circle', 'text', 'icon', 'text']
-ProgressCircle.rootElement = 'wrapper'
-
-ProgressCircle.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return ProgressCircle as (props: StyledComponentProps<ProgressCircleProps, typeof styles>) => IJSX
-}
-
-ProgressCircle.defaultProps = {
-  progress: 0,
-  showProgress: false,
-  formatProgress: _formatProgress,
-  size: null,
-} as Partial<ProgressCircleProps>
-
-WebStyleRegistry.registerComponent(ProgressCircle)
+ProgressCircle.defaultProps = defaultProps

package/src/components/Progress/Circle/styles.ts

@@ -1 +1,8 @@
-export type ProgressCircleComposition = 'wrapper' | 'line' | 'circle' | 'text' | 'icon'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import 'react-circular-progressbar/dist/styles.css'
+
+export type ProgressCircleComposition = 'wrapper' | 'line' | 'circle' | 'text' | 'icon' | 'text'
+
+const createProgressCircleStyle = createDefaultVariantFactory<ProgressCircleComposition>()
+
+export const ProgressCirclePresets = includePresets((styles) => createProgressCircleStyle(() => ({ wrapper: styles })))

package/src/components/Progress/Circle/types.ts

@@ -1,20 +1,32 @@
-import { PropsOf } from '@codeleap/common'
-import { IconProps, ProgressCircleComposition, ViewProps, TextProps } from '../../components'
+import { ComponentVariants, IconPlaceholder, PropsOf, StylesOf } from '@codeleap/common'
+import {
+  IconProps,
+  ProgressCircleComposition,
+  ProgressCirclePresets,
+  View,
+  TextProps as _TextProps,
+} from '../../components'
 import { ProgressPropsRoot } from '..'
 import { CircularProgressbarWithChildren, buildStyles } from 'react-circular-progressbar'
-import { AppIcon, StyledProp } from '@codeleap/styles'
+import { ElementType } from 'react'
 
-export type ProgressCircleProps =
-  Omit<ViewProps, 'style'> &
-  Omit<ProgressPropsRoot, 'style'> &
-  {
-    style?: StyledProp<ProgressCircleComposition>
+type TextProps = _TextProps<ElementType>
+
+export type ProgressCircleProps = Omit<
+  PropsOf<typeof View>,
+  'styles' | 'variants' | 'children'
+> &
+  ComponentVariants<typeof ProgressCirclePresets> &
+  ProgressPropsRoot & {
+    styles?: StylesOf<ProgressCircleComposition>
     circleProps?: PropsOf<typeof CircularProgressbarWithChildren>
     circleStyles?: Parameters<typeof buildStyles>[0]
     children?: React.ReactNode
     size?: number
-    text?: string | JSX.Element
+
+    text?: TextProps['text'] | JSX.Element
     textProps?: Partial<TextProps>
-    icon?: AppIcon
+
+    icon?: IconPlaceholder
     iconProps?: Partial<IconProps>
   }

package/src/components/RadioInput/index.tsx

@@ -1,19 +1,47 @@
-import React from 'react'
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
+import React, { ReactNode } from 'react'
 import { Text } from '../Text'
 import { Touchable } from '../Touchable'
-import { TypeGuards } from '@codeleap/common'
+import {
+  ComponentVariants,
+  FormTypes,
+  StylesOf,
+  TypeGuards,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
 import { View } from '../View'
-import { InputBase, selectInputBaseProps } from '../InputBase'
-import { RadioOptionProps, RadioInputProps } from './types'
-import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { RadioInputComposition } from './styles'
+import { RadioInputComposition, RadioInputPresets } from './styles'
+import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
 
 export * from './styles'
-export * from './types'
 
-const Option = <T extends string | number>(props: RadioOptionProps<T>) => {
+type WrapperProps = InputBaseProps
+
+type RadioOption<T> = FormTypes.Options<T>[number] & {
+  disabled?: boolean
+}
+
+export type RadioGroupProps<T extends string|number> = WrapperProps & {
+  options: RadioOption<T>[]
+  value: T
+  onValueChange(value: T): void
+  label: ReactNode
+  styles?: StylesOf<RadioInputComposition>
+} & ComponentVariants<typeof RadioInputPresets>
+
+type OptionProps<T extends string|number> = {
+  item: RadioOption<T>
+  selected: boolean
+  onSelect(): void
+  styles?: StylesOf<RadioInputComposition>
+  debugName?: string
+  disabled?: boolean
+  separator?: boolean
+}
+
+const Option = <T extends string|number>(props: OptionProps<T>) => {
   const {
     debugName,
     item,
@@ -24,89 +52,107 @@ const Option = <T extends string | number>(props: RadioOptionProps<T>) => {
     separator = false,
   } = props
 
-  const isDisabled = disabled || item?.disabled
-
-  const getStyle = (key: RadioInputComposition) => {
-    let style = null
-
-    if (isDisabled && selected) style = styles[`${key}:selectedDisabled`]
-    else if (isDisabled) style = styles[`${key}:disabled`]
-    else if (selected) style = styles[`${key}:selected`]
-
-    return mergeStyles([styles[key], style])
+  const isDisabled = disabled || item.disabled
+
+  const getStyle = (key) => {
+    if (isDisabled && selected) {
+      return styles[`${key}:selectedDisabled`]
+    }
+    if (isDisabled) {
+      return styles[`${key}:disabled`]
+    }
+    if (selected) {
+      return styles[`${key}:selected`]
+    }
+    return styles[key]
   }
 
-  return (
-    <React.Fragment>
-      <Touchable
-        debugName={`${debugName} option ${item.value}`}
-        style={getStyle('optionWrapper')}
-        onPress={onSelect}
-        disabled={isDisabled}
-      >
-        <View style={getStyle('optionIndicator')}>
-          <View style={getStyle('optionIndicatorInner')} />
-        </View>
+  const label = TypeGuards.isString(item.label) ? <Text
+    css={[
+      styles.optionLabel,
+      getStyle('optionLabel'),
+    ]}
+    text={item.label}
+  /> : item.label
+
+  return <React.Fragment>
+    <Touchable
+      debugName={`${debugName} option ${item.value}`}
+      css={[
+        styles.optionWrapper,
+        getStyle('optionWrapper'),
+      ]}
+      onPress={onSelect}
+      disabled={isDisabled}
+    >
+      <View
+        css={[
+          styles.optionIndicator,
+          getStyle('optionIndicator'),
+        ]}
 
-        {TypeGuards.isString(item.label) ? <Text style={getStyle('optionLabel')} text={item.label} /> : item.label}
-      </Touchable>
+      >
+        <View
+          css={[
+            styles.optionIndicatorInner,
+            getStyle('optionIndicatorInner'),
+          ]}
+        />
+      </View>
+      {label}
 
-      {separator ? <View style={styles.optionSeparator} /> : null}
-    </React.Fragment>
-  )
+    </Touchable>
+    {separator && <View style={styles.optionSeparator} />}
+  </React.Fragment>
 }
 
-export const RadioInput = <T extends string | number>(props: RadioInputProps<T>) => {
+export const RadioGroup = <T extends string|number>(
+  props: RadioGroupProps<T>,
+) => {
   const {
     inputBaseProps,
-    others: radioInputProps,
-  } = selectInputBaseProps({
-    ...RadioInput.defaultProps,
-    ...props,
-  })
+    others,
+  } = selectInputBaseProps(props)
 
   const {
     options,
     value,
     onValueChange,
-    style,
+    responsiveVariants = {},
+    variants = [],
+    styles,
     disabled,
     debugName,
-  } = radioInputProps
-
-  const styles = useStylesFor(RadioInput.styleRegistryName, style)
-
-  return (
-    <InputBase
-      {...inputBaseProps}
-      disabled={disabled}
-      style={styles}
-      debugName={debugName}
-    >
-      {options?.map((item, idx) => (
-        <Option
-          debugName={debugName}
-          item={item}
-          key={idx}
-          disabled={disabled}
-          styles={styles}
-          selected={value === item?.value}
-          onSelect={() => onValueChange(item?.value)}
-          separator={idx < options?.length - 1}
-        />
-      ))}
-    </InputBase>
-  )
-}
+  } = others
 
-RadioInput.styleRegistryName = 'RadioInput'
-RadioInput.elements = [...InputBase.elements, 'option']
-RadioInput.rootElement = 'wrapper'
+  const variantStyles = useDefaultComponentStyle<'u:RadioInput', typeof RadioInputPresets>('u:RadioInput', {
+    responsiveVariants,
+    variants,
+    styles,
+  })
 
-RadioInput.withVariantTypes = <S extends AnyRecord, T extends string | number>(styles: S) => {
-  return RadioInput as (props: StyledComponentProps<RadioInputProps<T>, typeof styles>) => IJSX
+  return <InputBase
+    {...inputBaseProps}
+    disabled={disabled}
+    styles={{
+      ...variantStyles,
+      innerWrapper: [
+        variantStyles.innerWrapper,
+      ],
+    }}
+    debugName={debugName}
+  >
+    {options?.map((item, idx) => (
+      <Option
+        debugName={debugName}
+        item={item}
+        key={idx}
+        disabled={disabled}
+        styles={variantStyles}
+        selected={value === item.value}
+        onSelect={() => onValueChange(item.value)}
+        separator={idx < options.length - 1}
+      />
+    ))}
+  </InputBase>
 }
-
-RadioInput.defaultProps = {} as Partial<RadioInputProps<string | number>>
-
-WebStyleRegistry.registerComponent(RadioInput)

package/src/components/RadioInput/styles.ts

@@ -1,3 +1,4 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { IconLessInputBaseParts } from '../InputBase'
 
 type OptionParts = 'wrapper' | 'label' | 'indicator' | 'indicatorInner' | 'separator'
@@ -6,3 +7,8 @@ type OptionStates = 'selected' | 'disabled' | 'selectedDisabled'
 type OptionComposition = `${OptionParts}:${OptionStates}` | OptionParts
 
 export type RadioInputComposition = IconLessInputBaseParts | `${IconLessInputBaseParts}:disabled` | `option${Capitalize<OptionComposition>}`
+
+const createRadioStyle =
+  createDefaultVariantFactory<RadioInputComposition>()
+
+export const RadioInputPresets = includePresets(style => createRadioStyle(() => ({ wrapper: style })))

package/src/components/Scroll/index.tsx

@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import {
+  ElementType,
+  forwardRef,
+  ReactElement,
+  Ref,
+} from 'react'
+import { NativeHTMLElement } from '../../types'
+import { View, ViewProps } from '../View'
+
+export const ScrollCP = <T extends NativeHTMLElement = 'div'>(
+  props: ViewProps<T>,
+  ref: Ref<any>,
+) => {
+
+  return (
+    // @ts-ignore
+    <View
+      {...props}
+      ref={ref}
+      scroll
+    />
+
+  )
+}
+
+export * from './styles'
+
+export const Scroll = forwardRef(ScrollCP) as <T extends NativeHTMLElement = 'div'>(
+  props: ViewProps<T>
+) => JSX.Element

package/src/components/Scroll/styles.ts

@@ -0,0 +1,8 @@
+import { createDefaultVariantFactory, includePresets } from "@codeleap/common";
+import { ViewComposition } from "../View";
+
+export type ScrollCompostion = ViewComposition
+
+const createScrollStyle = createDefaultVariantFactory<ScrollCompostion>()
+
+export const ScrollPresets = includePresets((styles) => createScrollStyle(() => ({ wrapper: styles })))

package/src/components/SearchInput/index.tsx

@@ -1,14 +1,14 @@
+import { AnyFunction, IconPlaceholder, TypeGuards } from '@codeleap/common'
 import React, { useState } from 'react'
 import { TextInput, TextInputProps } from '../TextInput'
-import { AnyFunction, TypeGuards } from '@codeleap/common'
-import { AppIcon } from '@codeleap/styles'
+import { ComponentWithDefaultProps } from '../../types/utility'
 
 export type SearchInputProps = {
   placeholder: string
   clearable?: boolean
   debugName: string
-  clearIcon?: AppIcon
-  searchIcon?: AppIcon
+  clearIcon?: IconPlaceholder
+  searchIcon?: IconPlaceholder
   debounce?: number
   onSearchChange: (search: string) => void
   onTypingChange?: (isTyping: boolean) => void
@@ -17,7 +17,7 @@ export type SearchInputProps = {
   defaultValue?: string
 } & Partial<TextInputProps>
 
-export const SearchInput = (props: SearchInputProps) => {
+export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props) => {
   const {
     debugName,
     onSearchChange,
@@ -30,7 +30,7 @@ export const SearchInput = (props: SearchInputProps) => {
     debounce,
     value,
     onValueChange,
-    defaultValue,
+    defaultValue = '',
     ...rest
   } = {
     ...SearchInput.defaultProps,
@@ -44,6 +44,7 @@ export const SearchInput = (props: SearchInputProps) => {
 
   const handleChangeSearch = (value: string) => {
     setSearch(value)
+
     if (TypeGuards.isNil(debounce)) {
       onSearchChange?.(value)
     } else {
@@ -91,7 +92,6 @@ export const SearchInput = (props: SearchInputProps) => {
 SearchInput.defaultProps = {
   debounce: null,
   clearable: true,
-  clearIcon: 'x' as AppIcon,
-  searchIcon: 'search' as AppIcon,
-  defaultValue: '',
-} as Partial<SearchInputProps>
+  clearIcon: 'x' as IconPlaceholder,
+  searchIcon: 'search' as IconPlaceholder,
+}