@codeleap/web 3.15.0 → 3.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.15.0",
+  "version": "3.15.1",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -20,6 +20,7 @@
     "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
   },
   "dependencies": {
+    "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-slider": "1.1.1",
     "@radix-ui/react-tooltip": "^1.0.6",
     "framer-motion": "^10.10.0",
@@ -27,6 +28,7 @@
     "masonic": "^3.7.0",
     "rc-slider": "^9.7.5",
     "react-autosize-textarea": "^7.1.0",
+    "react-circular-progressbar": "^2.1.0",
     "react-dropzone": "^14.2.3",
     "react-image-crop": "^10.1.8",
     "react-input-mask": "^2.0.4",

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

@@ -0,0 +1,122 @@
+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'
+
+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,
+    debugName,
+    formatProgress,
+    progressIndicatorProps,
+    progressRootProps,
+    showProgress,
+
+    leftIcon,
+    leftIconProps,
+    rightIcon,
+    rightIconProps,
+    text,
+    textProps,
+    leftText,
+    leftTextProps,
+    rightText,
+    rightTextProps,
+    ...rest
+  } = allProps
+
+  const variantStyles = useDefaultComponentStyle<
+    'u:ProgressBar',
+    typeof ProgressBarPresets
+  >('u:ProgressBar', {
+    variants,
+    responsiveVariants,
+    styles,
+  })
+
+  return (
+    <View css={variantStyles.wrapper} debugName={debugName} {...rest}>
+      {!TypeGuards.isNil(leftIcon) ? (
+        <Icon
+          name={leftIcon}
+          style={{ ...variantStyles.icon, ...variantStyles.leftIcon }}
+          debugName={`leftIcon-${debugName}`}
+          {...leftIconProps}
+        />
+      ) : null}
+      {TypeGuards.isString(leftText) ? (
+        <Text
+          text={leftText}
+          css={[variantStyles.text, variantStyles.leftText]}
+          {...leftTextProps}
+        />
+      ) : (
+        leftText
+      )}
+      <Root
+        css={variantStyles.progress}
+        value={progress}
+        {...progressRootProps}
+      >
+        <Indicator
+          css={[
+            variantStyles.indicator,
+            { transform: `translateX(-${100 - progress}%)` },
+          ]}
+          {...progressIndicatorProps}
+        />
+      </Root>
+      {TypeGuards.isString(text) || showProgress ? (
+        <Text
+          style={variantStyles.text}
+          text={showProgress ? formatProgress(progress) : text}
+          {...textProps}
+        />
+      ) : text}
+      {!TypeGuards.isNil(rightIcon) ? (
+        <Icon
+          name={rightIcon}
+          style={{ ...variantStyles.icon, ...variantStyles.rightIcon }}
+          debugName={`rightIcon-${debugName}`}
+          {...rightIconProps}
+        />
+      ) : null}
+      {TypeGuards.isString(rightText) ? (
+        <Text
+          text={rightText}
+          css={[variantStyles.text, variantStyles.rightText]}
+          {...rightTextProps}
+        />
+      ) : (
+        rightText
+      )}
+    </View>
+  )
+}
+
+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>
+  }

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

@@ -0,0 +1,104 @@
+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'
+
+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,
+    textProps,
+    size: propSize,
+    ...rest
+  } = allProps
+
+  const variantStyles = useDefaultComponentStyle<
+    'u:ProgressCircle',
+    typeof ProgressCirclePresets
+  >('u:ProgressCircle', {
+    variants,
+    responsiveVariants,
+    styles,
+    rootElement: 'wrapper',
+  })
+
+  const wrapperSize = useMemo(() => {
+    if (TypeGuards.isNumber(propSize)) return propSize
+    const { size, width, height } = variantStyles.circle
+    const value = size ?? width ?? height
+    return value ?? 0
+  }, [variantStyles.circle])
+
+  return (
+    <View debugName={debugName} css={variantStyles.wrapper} {...rest}>
+      <CircularProgressbarWithChildren
+        value={progress}
+        css={[
+          variantStyles.circle,
+          { width: wrapperSize, height: wrapperSize },
+        ]}
+        styles={buildStyles({
+          pathColor: variantStyles.line?.borderColor,
+          trailColor: variantStyles.line?.backgroundColor,
+          strokeLinecap: 'butt',
+          ...circleStyles,
+        })}
+        {...circleProps}
+      >
+        {children}
+        {!TypeGuards.isNil(icon) ? (
+          <Icon
+            name={icon}
+            style={variantStyles.icon}
+            debugName={`innerIcon-${debugName}`}
+            {...iconProps}
+          />
+        ) : null}
+        {TypeGuards.isString(text) || showProgress ? (
+          <Text
+            style={variantStyles.text}
+            text={showProgress ? formatProgress(progress) : text}
+            {...textProps}
+          />
+        ) : text}
+      </CircularProgressbarWithChildren>
+    </View>
+  )
+}
+
+ProgressCircle.defaultProps = defaultProps

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,32 @@
+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 { ElementType } from 'react'
+
+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?: TextProps['text'] | JSX.Element
+    textProps?: Partial<TextProps>
+
+    icon?: IconPlaceholder
+    iconProps?: Partial<IconProps>
+  }

package/src/components/Progress/index.tsx

@@ -0,0 +1,10 @@
+export * from './Bar'
+export * from './Circle'
+
+export type ProgressPropsRoot = {
+  progress: number
+  style?: React.CSSProperties
+  showProgress?: boolean
+  debugName?: string
+  formatProgress?: (progress: number) => string
+}

package/src/components/Progress/utils.ts

@@ -0,0 +1,3 @@
+export function formatProgress(value) {
+  return `${value.toFixed(value % 1 != 0 && !isNaN(value % 1) ? 2 : 0)}%`
+}

package/src/components/components.ts

@@ -31,6 +31,8 @@ export * from './EmptyPlaceholder'
 export * from './Grid'
 export * from './Badge'
 export * from './CropPicker'
-export * from './defaultStyles'
 export * from './Dropzone'
+export * from './Progress'
 export * from './Tag'
+
+export * from './defaultStyles'