@codeleap/web 3.24.2 → 3.25.0

package/src/components/PaginationButtons/index.tsx

@@ -0,0 +1,173 @@
+import { TypeGuards } from '@codeleap/common'
+import { View } from '../View'
+import { Button } from '../Button'
+import { useMediaQuery, usePagination, useStylesFor, WebStyleRegistry } from '../../lib'
+import { PaginationButtonsProps } from './types'
+import { AnyRecord, AppIcon, AppTheme, IJSX, StyledComponentProps, Theme, useCompositionStyles, useTheme } from '@codeleap/styles'
+
+export * from './styles'
+export * from './types'
+
+export const PaginationButtons = (props: PaginationButtonsProps) => {
+  const allProps = {
+    ...PaginationButtons.defaultProps,
+    ...props,
+  }
+
+  const {
+    shouldAbbreviate,
+    displayLeftArrow,
+    displayRightArrow,
+    disabled,
+    style,
+    itemProps,
+    controlLeftIconName,
+    controlRightIconName,
+    leftArrowButtonProps,
+    rightArrowButtonProps,
+    abbreviationSymbol,
+    isMobile,
+    ...paginationProps
+  } = allProps
+
+  const theme = useTheme(store => store?.current) as AppTheme<Theme>
+
+  const { boundaries = 2 } = paginationProps
+
+  const query = theme?.media?.down('tabletSmall' as never)
+
+  const _isMobile = useMediaQuery(query, { getInitialValueInEffect: false })
+  const isMobileQuery = TypeGuards.isBoolean(isMobile) ? isMobile : _isMobile
+
+  const centeredElementIndex = isMobileQuery ? 3 : boundaries + 1
+
+  const {
+    range,
+    first,
+    next,
+    previous,
+    setPage,
+    page,
+    status,
+  } = usePagination({
+    abbreviationSymbol,
+    isMobile: isMobileQuery,
+    displayLeftArrow,
+    displayRightArrow,
+    shouldAbbreviate,
+    ...paginationProps,
+  })
+
+  const styles = useStylesFor(PaginationButtons.styleRegistryName, style)
+
+  const compositionStyles = useCompositionStyles(['button', 'arrowLeftButton', 'arrowRightButton'], styles)
+
+  const fetchPreviousPage = () => {
+    props?.onFetchPreviousPage?.()
+    previous?.()
+  }
+
+  const fetchNextPage = () => {
+    props?.onFetchNextPage?.()
+    next?.()
+  }
+
+  const fetchPage = (page: number) => {
+    setPage?.(page)
+  }
+
+  const onPressItem = ({ item, isArrowLeft, isArrowRight }: { item: string | number; isArrowLeft: boolean; isArrowRight: boolean }) => {
+    if (item === abbreviationSymbol) {
+      return null
+    }
+
+    if (isArrowLeft) {
+      if (displayLeftArrow) {
+        return fetchPreviousPage()
+      } else {
+        return first()
+      }
+    }
+
+    if (displayRightArrow && isArrowRight) {
+      return fetchNextPage()
+    }
+
+    props?.onPressItem?.(item)
+    fetchPage(Number(item))
+  }
+
+  return (
+    <View style={styles.wrapper}>
+      {displayLeftArrow ? (
+        <Button
+          icon={controlLeftIconName}
+          onPress={() => onPressItem({ item: null, isArrowLeft: true, isArrowRight: false })}
+          {...leftArrowButtonProps}
+          style={compositionStyles.arrowLeftButton}
+        />
+      ) : null}
+
+      {range?.map?.((item, index) => {
+        if (props?.renderItem) {
+          return props?.renderItem?.(item, index)
+        }
+
+        let selected = null
+
+        switch (status) {
+          case 'initial':
+            selected = page === index + 1
+            break
+          case 'abreviated':
+            selected = index === centeredElementIndex - 1
+            break
+          case 'end':
+            selected = page - (Number(item) - index) === index
+        }
+
+        return (
+          <Button
+            text={String(item)}
+            selected={selected}
+            onPress={() => onPressItem({ item, isArrowLeft: false, isArrowRight: false })}
+            disabled={disabled}
+            {...itemProps}
+            style={compositionStyles.button}
+          />
+        )
+
+      })}
+
+      {displayRightArrow ? (
+        <Button
+          icon={controlRightIconName}
+          onPress={() => onPressItem({ item: null, isArrowLeft: false, isArrowRight: true })}
+          {...rightArrowButtonProps}
+          style={compositionStyles.arrowRightButton}
+        />
+      ) : null}
+    </View>
+  )
+}
+
+PaginationButtons.styleRegistryName = 'PaginationButtons'
+PaginationButtons.elements = ['wrapper', 'button', 'arrowLeftButton', 'arrowRightButton']
+PaginationButtons.rootElement = 'wrapper'
+
+PaginationButtons.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return PaginationButtons as (props: StyledComponentProps<PaginationButtonsProps, typeof styles>) => IJSX
+}
+
+PaginationButtons.defaultProps = {
+  shouldAbbreviate: true,
+  displayLeftArrow: true,
+  displayRightArrow: true,
+  disabled: false,
+  isMobile: null,
+  abbreviationSymbol: '...',
+  controlLeftIconName: 'chevron-left' as AppIcon,
+  controlRightIconName: 'chevron-right' as AppIcon,
+} as Partial<PaginationButtonsProps>
+
+WebStyleRegistry.registerComponent(PaginationButtons)

package/src/components/PaginationButtons/styles.ts

@@ -0,0 +1,7 @@
+import { ButtonComposition } from '../Button'
+
+export type PaginationButtonsComposition =
+    'wrapper' |
+    `button${Capitalize<ButtonComposition>}` |
+    `arrowLeftButton${Capitalize<ButtonComposition>}` |
+    `arrowRightButton${Capitalize<ButtonComposition>}`

package/src/components/PaginationButtons/types.ts

@@ -0,0 +1,26 @@
+import { AnyFunction } from '@codeleap/common'
+import { PaginationButtonsComposition } from './styles'
+import { ButtonProps } from '../Button'
+import { PaginationParams } from '../../lib'
+import { AppIcon, StyledProp } from '@codeleap/styles'
+
+export type PaginationButtonsProps =
+  PaginationParams &
+  {
+    onFetchNextPage?: AnyFunction
+    onFetchPreviousPage?: AnyFunction
+    renderItem?: (item: string | number, index: number) => JSX.Element
+    onPressItem?: (item: string | number) => void
+    shouldAbbreviate?: boolean
+    abbreviationSymbol?: string
+    disabled?: boolean
+    displayLeftArrow?: boolean
+    displayRightArrow?: boolean
+    isMobile?: boolean
+    itemProps?: Partial<ButtonProps>
+    controlLeftIconName?: AppIcon
+    controlRightIconName?: AppIcon
+    leftArrowButtonProps?: Partial<ButtonProps>
+    rightArrowButtonProps?: Partial<ButtonProps>
+    style?: StyledProp<PaginationButtonsComposition>
+  }

package/src/components/PaginationIndicator/index.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { TypeGuards } from '@codeleap/common'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { Text } from '../Text'
+import { View } from '../View'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { PaginationIndicatorProps } from './types'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { AnyRecord, IJSX, StyledComponentProps, useNestedStylesByKey } from '@codeleap/styles'
+
+export * from './styles'
+export * from './types'
+
+export const PaginationIndicator = (props: PaginationIndicatorProps) => {
+  const {
+    hasMore,
+    isFetching,
+    noMoreItemsText,
+    activityIndicator,
+    style,
+    indicatorProps,
+    debugName,
+  } = {
+    ...PaginationIndicator.defaultProps,
+    ...props,
+  }
+
+  const styles = useStylesFor(PaginationIndicator.styleRegistryName, style)
+
+  const loaderStyles = useNestedStylesByKey('loader', styles)
+
+  if (isFetching) {
+    return activityIndicator || (
+      <View style={styles.wrapper}>
+        <ActivityIndicator debugName={debugName} {...indicatorProps} style={loaderStyles} />
+      </View>
+    )
+  }
+
+  if (!hasMore) {
+    if (TypeGuards.isString(noMoreItemsText) || TypeGuards.isNumber(noMoreItemsText)) {
+      return (
+        <View style={styles.wrapper}>
+          <Text
+            debugName={debugName}
+            style={styles.text}
+            text={String(noMoreItemsText)}
+          />
+        </View>
+      )
+    }
+
+    return noMoreItemsText
+  }
+
+  return null
+}
+
+PaginationIndicator.styleRegistryName = 'PaginationIndicator'
+PaginationIndicator.elements = ['wrapper', 'text', 'loader']
+PaginationIndicator.rootElement = 'wrapper'
+
+PaginationIndicator.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return PaginationIndicator as (props: StyledComponentProps<PaginationIndicatorProps, typeof styles>) => IJSX
+}
+
+PaginationIndicator.defaultProps = {} as Partial<PaginationIndicatorProps>
+
+WebStyleRegistry.registerComponent(PaginationIndicator)

package/src/components/PaginationIndicator/styles.ts

@@ -0,0 +1,3 @@
+import { ActivityIndicatorComposition } from '../ActivityIndicator'
+
+export type PaginationIndicatorComposition = 'text' | `loader${Capitalize<ActivityIndicatorComposition>}` | 'wrapper'

package/src/components/PaginationIndicator/types.ts

@@ -0,0 +1,18 @@
+import React from 'react'
+import { ActivityIndicatorProps } from '../ActivityIndicator'
+import { TextProps } from '../Text'
+import { ComponentCommonProps } from '../../types'
+import { PaginationIndicatorComposition } from './styles'
+import { StyledProp } from '@codeleap/styles'
+
+export type PaginationIndicatorProps =
+  ComponentCommonProps & 
+  {
+    isFetching?: boolean
+    noMoreItemsText: JSX.Element | string | number
+    hasMore?: boolean
+    activityIndicator?: JSX.Element
+    style?: StyledProp<PaginationIndicatorComposition>
+    indicatorProps?: Partial<ActivityIndicatorProps>
+    textProps?: Partial<TextProps<'p'>>
+  }

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

@@ -1,42 +1,24 @@
-import { ProgressBarPresets } from './styles'
-import { TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { TypeGuards } 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,
-    variants,
-    responsiveVariants,
-    styles,
+    style,
     debugName,
     formatProgress,
     progressIndicatorProps,
     progressRootProps,
     showProgress,
-
     leftIcon,
     leftIconProps,
     rightIcon,
@@ -48,75 +30,88 @@ export const ProgressBar = (props: ProgressBarProps) => {
     rightText,
     rightTextProps,
     ...rest
-  } = allProps
+  } = {
+    ...ProgressBar.defaultProps,
+    ...props,
+  }
 
-  const variantStyles = useDefaultComponentStyle<
-    'u:ProgressBar',
-    typeof ProgressBarPresets
-  >('u:ProgressBar', {
-    variants,
-    responsiveVariants,
-    styles,
-  })
+  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])
 
   return (
-    <View css={variantStyles.wrapper} debugName={debugName} {...rest}>
+    <View debugName={debugName} {...rest} style={styles.wrapper}>
       {!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
-        css={variantStyles.progress}
+        // @ts-expect-error
+        css={styles.progress}
         value={progress}
         {...progressRootProps}
       >
         <Indicator
-          css={[
-            variantStyles.indicator,
-            { transform: `translateX(-${100 - progress}%)` },
-          ]}
+          css={{ ...styles.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.defaultProps = defaultProps
+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)

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

@@ -0,0 +1,10 @@
+export type ProgressBarComposition =
+  'wrapper' |
+  'progress' |
+  'indicator' |
+  'text' |
+  'icon' |
+  'leftIcon' |
+  'leftText' |
+  'rightIcon' |
+  'rightText'

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

@@ -0,0 +1,26 @@
+import { ProgressBarComposition } from './styles'
+import { ProgressProps, ProgressIndicatorProps } from '@radix-ui/react-progress'
+import { ProgressPropsRoot } from '..'
+import { AppIcon, StyledProp } from '@codeleap/styles'
+import { TextProps } from '../../Text/types'
+import { IconProps } from '../../Icon/types'
+import { ViewProps } from '../../View'
+
+export type ProgressBarProps =
+  Omit<ViewProps, 'style'> &
+  Omit<ProgressPropsRoot, 'style'> & 
+  {
+    style?: StyledProp<ProgressBarComposition>
+    progressIndicatorProps?: ProgressIndicatorProps
+    progressRootProps?: ProgressProps
+    leftIcon?: AppIcon
+    leftIconProps?: Partial<IconProps>
+    rightIcon?: AppIcon
+    rightIconProps?: Partial<IconProps>
+    text?: string
+    textProps?: Partial<TextProps>
+    leftText?: TextProps['text'] | JSX.Element
+    leftTextProps?: Partial<TextProps>
+    rightText?: TextProps['text'] | JSX.Element
+    rightTextProps?: Partial<TextProps>
+  }

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

@@ -1,99 +1,81 @@
-import {
-  CircularProgressbarWithChildren,
-  buildStyles,
-} from 'react-circular-progressbar'
-import { View, Text, Icon } from '../../components'
-import { TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
-import { ProgressCirclePresets } from './styles'
+import { CircularProgressbarWithChildren, buildStyles } from 'react-circular-progressbar'
+import { TypeGuards } from '@codeleap/common'
 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
-  } = allProps
+  } = {
+    ...ProgressCircle.defaultProps,
+    ...props,
+  }
 
-  const variantStyles = useDefaultComponentStyle<
-    'u:ProgressCircle',
-    typeof ProgressCirclePresets
-  >('u:ProgressCircle', {
-    variants,
-    responsiveVariants,
-    styles,
-    rootElement: 'wrapper',
-  })
+  const styles = useStylesFor(ProgressCircle.styleRegistryName, style)
 
   const wrapperSize = useMemo(() => {
     if (TypeGuards.isNumber(propSize)) return propSize
-    const { size, width, height } = variantStyles.circle
-    const value = size ?? width ?? height
+    // @ts-expect-error icss type
+    const value = styles.circle?.size ?? styles.circle?.width ?? styles.circle?.height
     return value ?? 0
-  }, [variantStyles.circle])
+  }, [styles.circle])
+
+  const lineStyle = styles.line as CSSProperties
 
   return (
-    <View debugName={debugName} css={variantStyles.wrapper} {...rest}>
+    <View debugName={debugName} {...rest} style={styles.wrapper}>
       <CircularProgressbarWithChildren
         value={progress}
-        css={[
-          variantStyles.circle,
-          { width: wrapperSize, height: wrapperSize },
-        ]}
         styles={buildStyles({
-          pathColor: variantStyles.line?.borderColor,
-          trailColor: variantStyles.line?.backgroundColor,
+          pathColor: lineStyle?.borderColor,
+          trailColor: lineStyle?.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>
@@ -101,4 +83,19 @@ export const ProgressCircle = (props: ProgressCircleProps) => {
   )
 }
 
-ProgressCircle.defaultProps = defaultProps
+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)

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

@@ -1,8 +1 @@
-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 })))
+export type ProgressCircleComposition = 'wrapper' | 'line' | 'circle' | 'text' | 'icon'