@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/lib/components/Primitives/PrimitiveTextArea.tsx

@@ -0,0 +1,398 @@
+import React, { forwardRef } from 'react'
+import styled, { css, type CSSObject } from 'styled-components'
+import { FOUNDATION_THEME } from '../../tokens'
+
+type StateStyles = {
+    _hover?: PrimitiveTextareaProps
+    _focus?: PrimitiveTextareaProps
+    _active?: PrimitiveTextareaProps
+    _disabled?: PrimitiveTextareaProps
+    _visited?: PrimitiveTextareaProps
+    _focusVisible?: PrimitiveTextareaProps
+    _focusWithin?: PrimitiveTextareaProps
+    _focusActive?: PrimitiveTextareaProps
+}
+
+type PrimitiveTextareaProps = StateStyles & {
+    color?: CSSObject['color']
+
+    // Positioning
+    position?: CSSObject['position']
+    inset?: CSSObject['inset']
+    top?: CSSObject['top']
+    right?: CSSObject['right']
+    bottom?: CSSObject['bottom']
+    left?: CSSObject['left']
+    zIndex?: CSSObject['zIndex']
+    pointerEvents?: CSSObject['pointerEvents']
+    opacity?: CSSObject['opacity']
+
+    // Padding
+    padding?: CSSObject['padding']
+    paddingTop?: CSSObject['paddingTop']
+    paddingBottom?: CSSObject['paddingBottom']
+    paddingLeft?: CSSObject['paddingLeft']
+    paddingRight?: CSSObject['paddingRight']
+    paddingX?: CSSObject['padding']
+    paddingY?: CSSObject['padding']
+    paddingInlineStart?: CSSObject['paddingInlineStart']
+    paddingInlineEnd?: CSSObject['paddingInlineEnd']
+
+    // Margin
+    margin?: CSSObject['margin']
+    marginTop?: CSSObject['marginTop']
+    marginBottom?: CSSObject['marginBottom']
+    marginLeft?: CSSObject['marginLeft']
+    marginRight?: CSSObject['marginRight']
+    marginX?: CSSObject['margin']
+    marginY?: CSSObject['margin']
+
+    // Layout / Flexbox
+    display?: CSSObject['display']
+    flexDirection?: CSSObject['flexDirection']
+    justifyContent?: CSSObject['justifyContent']
+    alignItems?: CSSObject['alignItems']
+    flexWrap?: CSSObject['flexWrap']
+    flexGrow?: CSSObject['flexGrow']
+    flexShrink?: CSSObject['flexShrink']
+    flexBasis?: CSSObject['flexBasis']
+    gap?: CSSObject['gap']
+    rowGap?: CSSObject['rowGap']
+    columnGap?: CSSObject['columnGap']
+    alignContent?: CSSObject['alignContent']
+    alignSelf?: CSSObject['alignSelf']
+    justifySelf?: CSSObject['justifySelf']
+
+    // Border Radius
+    borderRadius?: CSSObject['borderRadius']
+    borderTopLeftRadius?: CSSObject['borderTopLeftRadius']
+    borderTopRightRadius?: CSSObject['borderTopRightRadius']
+    borderBottomLeftRadius?: CSSObject['borderBottomLeftRadius']
+    borderBottomRightRadius?: CSSObject['borderBottomRightRadius']
+
+    // Outline
+    outline?: CSSObject['outline']
+    outlineColor?: CSSObject['outlineColor']
+    outlineWidth?: CSSObject['outlineWidth']
+    outlineStyle?: CSSObject['outlineStyle']
+    outlineOffset?: CSSObject['outlineOffset']
+
+    // Sizing
+    width?: CSSObject['width']
+    height?: CSSObject['height']
+    minWidth?: CSSObject['minWidth']
+    minHeight?: CSSObject['minHeight']
+    maxWidth?: CSSObject['maxWidth']
+    maxHeight?: CSSObject['maxHeight']
+
+    // Background
+    backgroundColor?: CSSObject['backgroundColor']
+
+    // Border
+    border?: CSSObject['border']
+    borderTop?: CSSObject['borderTop']
+    borderBottom?: CSSObject['borderBottom']
+    borderLeft?: CSSObject['borderLeft']
+    borderRight?: CSSObject['borderRight']
+    boxShadow?: CSSObject['boxShadow']
+
+    // Overflow
+    overflow?: CSSObject['overflow']
+    overflowX?: CSSObject['overflowX']
+    overflowY?: CSSObject['overflowY']
+
+    // Shortcuts
+    contentCentered?: boolean
+
+    // Cursor
+    cursor?: CSSObject['cursor']
+
+    // Transition
+    transition?: CSSObject['transition']
+    transitionProperty?: CSSObject['transitionProperty']
+    transitionDuration?: CSSObject['transitionDuration']
+    transitionTimingFunction?: CSSObject['transitionTimingFunction']
+    transitionDelay?: CSSObject['transitionDelay']
+
+    // Placeholder
+    placeholderStyles?: CSSObject
+
+    // Resize
+    resize?: CSSObject['resize']
+
+    // Font
+    fontFamily?: CSSObject['fontFamily']
+    fontSize?: CSSObject['fontSize']
+    fontWeight?: CSSObject['fontWeight']
+}
+
+const blockedProps = [
+    // Similar blocked list as input
+
+    'padding',
+    'paddingTop',
+    'paddingBottom',
+    'paddingLeft',
+    'paddingRight',
+    'paddingX',
+    'paddingY',
+    'paddingInlineStart',
+    'paddingInlineEnd',
+    'margin',
+    'marginTop',
+    'marginBottom',
+    'marginLeft',
+    'marginRight',
+    'marginX',
+    'marginY',
+    'display',
+    'flexDirection',
+    'justifyContent',
+    'alignItems',
+    'flexWrap',
+    'flexGrow',
+    'flexShrink',
+    'flexBasis',
+    'gap',
+    'rowGap',
+    'columnGap',
+    'alignContent',
+    'alignSelf',
+    'justifySelf',
+    'borderRadius',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomLeftRadius',
+    'borderBottomRightRadius',
+    'width',
+    'height',
+    'minWidth',
+    'minHeight',
+    'maxWidth',
+    'maxHeight',
+    'contentCentered',
+    'backgroundColor',
+    'border',
+    'borderTop',
+    'borderBottom',
+    'borderLeft',
+    'borderRight',
+    'boxShadow',
+    'cursor',
+    'overflow',
+    'overflowX',
+    'overflowY',
+    'position',
+    'inset',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'zIndex',
+    'pointerEvents',
+    'opacity',
+    'transition',
+    'transitionProperty',
+    'transitionDuration',
+    'transitionTimingFunction',
+    'transitionDelay',
+    '_hover',
+    '_focus',
+    '_active',
+    '_disabled',
+    '_visited',
+    '_focusVisible',
+    'placeholderStyles',
+    'resize',
+    'fontFamily',
+    'fontSize',
+    'fontWeight',
+]
+
+const stateToSelector: Record<keyof StateStyles, string> = {
+    _hover: '&:hover',
+    _focus: '&:focus',
+    _focusVisible: '&:focus-visible',
+    _focusWithin: '&:focus-within',
+    _active: '&:active',
+    _disabled: '&:disabled',
+    _visited: '&:visited',
+    _focusActive: '&:focus-active',
+}
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
+    PrimitiveTextareaProps
+
+const getStyles = (props: PrimitiveTextareaProps): CSSObject => {
+    const styles: CSSObject = {}
+
+    if (props.color !== undefined) styles.color = props.color
+    if (props.position !== undefined) styles.position = props.position
+    if (props.inset !== undefined) styles.inset = props.inset
+    if (props.top !== undefined) styles.top = props.top
+    if (props.right !== undefined) styles.right = props.right
+    if (props.bottom !== undefined) styles.bottom = props.bottom
+    if (props.left !== undefined) styles.left = props.left
+    if (props.zIndex !== undefined) styles.zIndex = props.zIndex
+    if (props.pointerEvents !== undefined)
+        styles.pointerEvents = props.pointerEvents
+    if (props.opacity !== undefined) styles.opacity = props.opacity
+    if (props.fontFamily !== undefined) styles.fontFamily = props.fontFamily
+    if (props.fontSize !== undefined) styles.fontSize = props.fontSize
+    if (props.fontWeight !== undefined) styles.fontWeight = props.fontWeight
+
+    if (props.contentCentered) {
+        styles.display = props.display ?? 'flex'
+        styles.justifyContent = props.justifyContent ?? 'center'
+        styles.alignItems = props.alignItems ?? 'center'
+    } else {
+        if (props.display !== undefined) styles.display = props.display
+        if (props.justifyContent !== undefined)
+            styles.justifyContent = props.justifyContent
+        if (props.alignItems !== undefined) styles.alignItems = props.alignItems
+    }
+
+    if (props.width !== undefined) styles.width = props.width
+    if (props.height !== undefined) styles.height = props.height
+
+    if (props.padding !== undefined) styles.padding = props.padding
+    if (props.paddingTop !== undefined) styles.paddingTop = props.paddingTop
+    if (props.paddingBottom !== undefined)
+        styles.paddingBottom = props.paddingBottom
+    if (props.paddingLeft !== undefined) styles.paddingLeft = props.paddingLeft
+    if (props.paddingRight !== undefined)
+        styles.paddingRight = props.paddingRight
+    if (props.paddingInlineStart !== undefined)
+        styles.paddingInlineStart = props.paddingInlineStart
+    if (props.paddingInlineEnd !== undefined)
+        styles.paddingInlineEnd = props.paddingInlineEnd
+    if (props.paddingX !== undefined) {
+        styles.paddingLeft = props.paddingX
+        styles.paddingRight = props.paddingX
+    }
+    if (props.paddingY !== undefined) {
+        styles.paddingTop = props.paddingY
+        styles.paddingBottom = props.paddingY
+    }
+
+    if (props.margin !== undefined) styles.margin = props.margin
+    if (props.marginTop !== undefined) styles.marginTop = props.marginTop
+    if (props.marginBottom !== undefined)
+        styles.marginBottom = props.marginBottom
+    if (props.marginLeft !== undefined) styles.marginLeft = props.marginLeft
+    if (props.marginRight !== undefined) styles.marginRight = props.marginRight
+    if (props.marginX !== undefined) {
+        styles.marginLeft = props.marginX
+        styles.marginRight = props.marginX
+    }
+    if (props.marginY !== undefined) {
+        styles.marginTop = props.marginY
+        styles.marginBottom = props.marginY
+    }
+
+    if (props.borderRadius !== undefined)
+        styles.borderRadius = props.borderRadius
+    if (props.borderTopLeftRadius !== undefined)
+        styles.borderTopLeftRadius = props.borderTopLeftRadius
+    if (props.borderTopRightRadius !== undefined)
+        styles.borderTopRightRadius = props.borderTopRightRadius
+    if (props.borderBottomLeftRadius !== undefined)
+        styles.borderBottomLeftRadius = props.borderBottomLeftRadius
+    if (props.borderBottomRightRadius !== undefined)
+        styles.borderBottomRightRadius = props.borderBottomRightRadius
+
+    if (props.minWidth !== undefined) styles.minWidth = props.minWidth
+    if (props.minHeight !== undefined) styles.minHeight = props.minHeight
+    if (props.maxWidth !== undefined) styles.maxWidth = props.maxWidth
+    if (props.maxHeight !== undefined) styles.maxHeight = props.maxHeight
+
+    if (props.backgroundColor !== undefined)
+        styles.backgroundColor = props.backgroundColor
+
+    if (props.border !== undefined) styles.border = props.border
+    if (props.borderTop !== undefined) styles.borderTop = props.borderTop
+    if (props.borderBottom !== undefined)
+        styles.borderBottom = props.borderBottom
+    if (props.borderLeft !== undefined) styles.borderLeft = props.borderLeft
+    if (props.borderRight !== undefined) styles.borderRight = props.borderRight
+    if (props.boxShadow !== undefined) {
+        styles.boxShadow = props.boxShadow
+    } else {
+        // Set default to enable smooth transitions
+        styles.boxShadow = '0 0 0 0 transparent'
+    }
+
+    if (props.overflow !== undefined) styles.overflow = props.overflow
+    if (props.overflowX !== undefined) styles.overflowX = props.overflowX
+    if (props.overflowY !== undefined) styles.overflowY = props.overflowY
+
+    if (props.cursor !== undefined) styles.cursor = props.cursor
+
+    if (props.resize !== undefined) styles.resize = props.resize
+
+    if (props.transition !== undefined) styles.transition = props.transition
+    if (props.transitionProperty !== undefined)
+        styles.transitionProperty = props.transitionProperty
+    if (props.transitionDuration !== undefined)
+        styles.transitionDuration = props.transitionDuration
+    if (props.transitionTimingFunction !== undefined)
+        styles.transitionTimingFunction = props.transitionTimingFunction
+    if (props.transitionDelay !== undefined)
+        styles.transitionDelay = props.transitionDelay
+
+    styles.scrollPadding = 6
+    styles.scrollbarWidth = 'thin'
+    styles.scrollbarColor = `${FOUNDATION_THEME.colors.gray[300]} transparent`
+
+    return styles
+}
+
+const StyledTextarea = styled.textarea.withConfig({
+    shouldForwardProp: (prop) => !blockedProps.includes(prop),
+})<TextareaProps>((props) => {
+    const base = getStyles(props)
+
+    const stateStyles = Object.entries(stateToSelector).reduce(
+        (acc, [key, selector]) => {
+            const stateProps = props[key as keyof StateStyles]
+            if (stateProps) {
+                acc[selector] = getStyles(stateProps)
+            }
+            return acc
+        },
+        {} as CSSObject
+    )
+
+    const placeholderStyle = props.placeholderStyles
+        ? {
+              '&::placeholder': props.placeholderStyles,
+              '&::-webkit-input-placeholder': props.placeholderStyles,
+              '&::-moz-placeholder': props.placeholderStyles,
+              '&:-ms-input-placeholder': props.placeholderStyles,
+              '&:-moz-placeholder': props.placeholderStyles,
+          }
+        : {}
+
+    const outline: CSSObject = {
+        '&:focus-visible': {
+            outline: 'none !important',
+        },
+    }
+
+    return css({
+        ...base,
+        ...placeholderStyle,
+        ...stateStyles,
+        ...outline,
+    })
+})
+
+const PrimitiveTextarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+    (props, ref) => {
+        return <StyledTextarea {...props} ref={ref} />
+    }
+)
+
+PrimitiveTextarea.displayName = 'PrimitiveTextarea'
+
+export default PrimitiveTextarea

package/lib/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,300 @@
+import React, { useMemo } from 'react'
+import Block from '../Primitives/Block/Block'
+import Text from '../Text/Text'
+import { ProgressBarSize, ProgressBarVariant, ProgressBarType } from './types'
+import type { ProgressBarProps } from './types'
+import type { ProgressBarTokenType } from './progressbar.tokens'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import {
+    clampValue,
+    calculatePercentage,
+    extractAriaProps,
+    generateDefaultAriaLabel,
+    getCircularDimensions,
+    calculateCircularStroke,
+} from './utils'
+import { FOUNDATION_THEME } from '../../tokens'
+
+type ProgressBarInternalProps = {
+    value: number
+    min: number
+    max: number
+    ariaLabel?: string
+    ariaLabelledby?: string
+    showLabel: boolean
+    tokens: ProgressBarTokenType
+}
+
+const CircularProgressBar: React.FC<
+    ProgressBarInternalProps & {
+        size: ProgressBarSize
+        type: ProgressBarType
+    }
+> = ({
+    value,
+    size,
+    type,
+    tokens,
+    showLabel,
+    ariaLabel,
+    ariaLabelledby,
+    min,
+    max,
+}) => {
+    const clampedValue = useMemo(
+        () => clampValue(value, min, max),
+        [value, min, max]
+    )
+    const percentage = useMemo(
+        () => calculatePercentage(value, min, max),
+        [value, min, max]
+    )
+
+    const { circularSize, strokeWidth, radius, center, circumference } =
+        useMemo(() => getCircularDimensions(size, tokens), [size, tokens])
+
+    const { strokeDasharray, strokeDashoffset, dashArray } = useMemo(
+        () =>
+            calculateCircularStroke(
+                type === ProgressBarType.SEGMENTED ? 'segmented' : 'solid',
+                circumference,
+                percentage
+            ),
+        [type, circumference, percentage]
+    )
+
+    return (
+        <Block
+            position="relative"
+            display="inline-flex"
+            alignItems="center"
+            justifyContent="center"
+            width={circularSize}
+            height={circularSize}
+            role="progressbar"
+            aria-valuenow={clampedValue}
+            aria-valuemin={min}
+            aria-valuemax={max}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledby}
+        >
+            <svg
+                width={circularSize}
+                height={circularSize}
+                style={{ transform: 'rotate(-90deg)' }}
+                aria-hidden="true"
+            >
+                <circle
+                    cx={center}
+                    cy={center}
+                    r={radius}
+                    fill="none"
+                    stroke={tokens.circular.background[type]}
+                    strokeWidth={strokeWidth}
+                    strokeDasharray={
+                        type === ProgressBarType.SEGMENTED
+                            ? dashArray
+                            : undefined
+                    }
+                />
+                <circle
+                    data-id={tokens.circular.stroke[type]}
+                    cx={center}
+                    cy={center}
+                    r={radius}
+                    fill="none"
+                    stroke={tokens.circular.stroke[type]}
+                    strokeWidth={strokeWidth}
+                    strokeDasharray={strokeDasharray}
+                    strokeDashoffset={strokeDashoffset}
+                    strokeLinecap={
+                        type === ProgressBarType.SOLID ? 'round' : 'butt'
+                    }
+                    style={{
+                        transition: 'stroke-dashoffset 0.3s ease-in-out',
+                    }}
+                />
+            </svg>
+            {showLabel && (
+                <Block
+                    position="absolute"
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                    data-element="progress-bar-value-now"
+                    data-id={`${Math.round(percentage)}%`}
+                >
+                    <Text
+                        as="span"
+                        fontSize={tokens.label.fontSize}
+                        fontWeight={tokens.label.fontWeight}
+                        color={tokens.label.color}
+                        aria-hidden="true"
+                    >
+                        {Math.round(percentage)}%
+                    </Text>
+                </Block>
+            )}
+        </Block>
+    )
+}
+
+const LinearProgressBar: React.FC<
+    ProgressBarInternalProps & {
+        size: ProgressBarSize
+        variant: Exclude<ProgressBarVariant, ProgressBarVariant.CIRCULAR>
+    }
+> = ({
+    value,
+    size,
+    variant,
+    tokens,
+    showLabel,
+    ariaLabel,
+    ariaLabelledby,
+    min,
+    max,
+}) => {
+    const clampedValue = useMemo(
+        () => clampValue(value, min, max),
+        [value, min, max]
+    )
+    const percentage = useMemo(
+        () => calculatePercentage(value, min, max),
+        [value, min, max]
+    )
+
+    const containerHeight = tokens.linear.height[size]
+    const fillBackgroundColor = tokens.linear.fill.backgroundColor[variant]
+    const fillBorderRadius = tokens.linear.fill.borderRadius[variant]
+    const emptyBackgroundColor = tokens.linear.empty.backgroundColor[variant]
+    const containerBorderRadius = tokens.linear.borderRadius[variant]
+
+    return (
+        <Block
+            display="flex"
+            alignItems="center"
+            gap={FOUNDATION_THEME.unit[8]}
+            width="100%"
+            role="progressbar"
+            aria-valuenow={clampedValue}
+            aria-valuemin={min}
+            aria-valuemax={max}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledby}
+        >
+            <Block
+                width="100%"
+                height={containerHeight}
+                display="flex"
+                flexGrow={1}
+                borderRadius={containerBorderRadius}
+                overflow="hidden"
+                backgroundColor={
+                    variant === ProgressBarVariant.SOLID
+                        ? emptyBackgroundColor
+                        : 'transparent'
+                }
+                aria-hidden="true"
+            >
+                <Block
+                    data-id={fillBackgroundColor}
+                    height="100%"
+                    backgroundColor={fillBackgroundColor}
+                    borderRadius={fillBorderRadius}
+                    style={{
+                        width: `${percentage}%`,
+                        transition: tokens.transition,
+                    }}
+                />
+                {variant === ProgressBarVariant.SEGMENTED && (
+                    <Block
+                        height="100%"
+                        data-id={emptyBackgroundColor}
+                        backgroundColor={emptyBackgroundColor}
+                        backgroundImage={
+                            tokens.linear.empty.backgroundImage.segmented
+                        }
+                        backgroundSize={
+                            tokens.linear.empty.backgroundSize.segmented
+                        }
+                        style={{
+                            width: `${100 - percentage}%`,
+                        }}
+                    />
+                )}
+            </Block>
+
+            {showLabel && (
+                <Block
+                    flexShrink={0}
+                    data-element="progress-bar-value-now"
+                    data-id={`${Math.round(percentage)}%`}
+                >
+                    <Text
+                        as="span"
+                        fontWeight={tokens.label.fontWeight}
+                        color={tokens.label.color}
+                        fontSize={tokens.label.fontSize}
+                        aria-hidden="true"
+                    >
+                        {Math.round(percentage)}%
+                    </Text>
+                </Block>
+            )}
+        </Block>
+    )
+}
+
+const ProgressBar: React.FC<ProgressBarProps> = ({
+    value,
+    size = ProgressBarSize.MEDIUM,
+    variant = ProgressBarVariant.SOLID,
+    type = ProgressBarType.SOLID,
+    showLabel = false,
+    min = 0,
+    max = 100,
+    ...rest
+}) => {
+    const progressBarToken =
+        useResponsiveTokens<ProgressBarTokenType>('PROGRESS_BAR')
+
+    const {
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+        restProps,
+    } = extractAriaProps(rest)
+
+    const defaultAriaLabel = useMemo(() => {
+        if (ariaLabel || ariaLabelledby) return ariaLabel
+        return generateDefaultAriaLabel(value, min, max)
+    }, [value, min, max, ariaLabel, ariaLabelledby])
+
+    const sharedProps: ProgressBarInternalProps = {
+        value,
+        min,
+        max,
+        ariaLabel: defaultAriaLabel,
+        ariaLabelledby,
+        showLabel,
+        tokens: progressBarToken,
+    }
+
+    if (variant === ProgressBarVariant.CIRCULAR) {
+        return (
+            <Block {...restProps} data-progressbar="progressbar">
+                <CircularProgressBar {...sharedProps} size={size} type={type} />
+            </Block>
+        )
+    }
+
+    return (
+        <Block {...restProps} data-progressbar="progressbar">
+            <LinearProgressBar {...sharedProps} size={size} variant={variant} />
+        </Block>
+    )
+}
+
+ProgressBar.displayName = 'ProgressBar'
+
+export default ProgressBar