@codeleap/web 2.4.6 → 3.0.2

package/src/components/Select/styles.ts

@@ -0,0 +1,179 @@
+import { capitalize, createDefaultVariantFactory, FormTypes, getNestedStylesByKey, includePresets, useDefaultComponentStyle } from '@codeleap/common'
+import { CSSInterpolation } from '@emotion/css'
+import { CSSObjectWithLabel, GroupBase, StylesConfig } from 'react-select'
+import { ButtonParts as _ButtonParts } from '../Button'
+import { InputBaseParts } from '../InputBase'
+import { LoadingOverlayComposition } from '../LoadingOverlay'
+import { SelectProps } from './types'
+
+type ButtonParts = Exclude<_ButtonParts, `loading${Capitalize<LoadingOverlayComposition>}` | 'badgeText' | 'badgeWrapper'>
+
+export type ItemParts = `item${Capitalize<ButtonParts>}`
+
+export type SelectParts =
+  InputBaseParts
+  | ItemParts
+  | 'listPortal'
+  | 'listHeader'
+  | 'listWrapper'
+  | 'list'
+  | 'inputContainer'
+  | 'input'
+  | 'placeholder'
+  | 'value'
+  | 'valueMultiple'
+  | 'valueWrapper'
+  | 'clearIcon'
+  | 'dropdownIcon'
+
+type ItemState = 'focused' | 'selected' | 'selectedFocused'
+
+export type SelectStatefulParts =
+  `${ItemParts}:${ItemState}`
+  | 'listPlaceholder'
+  | 'listPlaceholderIcon'
+  | 'listPlaceholderText'
+  | 'listPlaceholderNoItems'
+  | 'listPlaceholderNoItemsIcon'
+  | 'listPlaceholderNoItemsText'
+  | 'itemsWrapper'
+  | 'loadingIndicator'
+  | 'innerWrapper:searchable'
+
+export type SelectState = 'error' | 'focus' | 'disabled'
+
+export type SelectComposition = SelectParts | `${SelectParts}:${SelectState}` | SelectStatefulParts
+
+const createSelectStyle = createDefaultVariantFactory<SelectComposition>()
+
+export const SelectPresets = includePresets((styles) => createSelectStyle(() => ({ wrapper: styles })))
+
+export type ComponentState = {
+  error?: boolean
+  focused?: boolean
+  disabled?: boolean
+}
+
+export type OptionState = { 
+  isSelected: boolean
+  isFocused: boolean
+  baseStyles: SelectProps['itemProps']['styles'] 
+}
+
+export function useSelectStyles<T, Multi extends boolean>(props: SelectProps<T, Multi>, state: ComponentState) {
+  const {
+    variants,
+    styles,
+  } = props
+
+  const {
+    error,
+    focused,
+    disabled,
+  } = state
+
+  const variantStyles = useDefaultComponentStyle<'u:Select', typeof SelectPresets>(
+    'u:Select',
+    {
+      variants,
+      styles,
+    },
+  )
+
+  const stylesKey = (key: SelectParts | SelectStatefulParts, _styles: CSSObjectWithLabel = {}) => ({
+    ..._styles,
+    ...variantStyles[key],
+    ...(focused ? variantStyles[key + ':focus'] : {}),
+    ...(disabled ? variantStyles[key + ':disabled'] : {}),
+    ...(error ? variantStyles[key + ':error'] : {}),
+  })
+
+  const optionNestedStyles = getNestedStylesByKey('item', variantStyles)
+
+  const optionStyleKey = (
+    key: ButtonParts | `${ButtonParts}:${ItemState}`,
+    state: OptionState
+  ) => {
+    return {
+      ...stylesKey(`item${capitalize(key)}` as any),
+      ...(state?.isSelected ? optionNestedStyles[`${key}:selected`] : {}),
+      ...(state?.isFocused ? optionNestedStyles[`${key}:focused`] : {}),
+      ...(state?.isFocused && state?.isSelected ? optionNestedStyles[`${key}:selectedFocused`] : {}),
+      ...(state.baseStyles?.[key] as React.CSSProperties),
+    }
+  }
+
+  const optionsStyles = (state: OptionState): Record<ButtonParts, CSSInterpolation> => ({
+    wrapper: optionStyleKey('wrapper', state),
+    rightIcon: optionStyleKey('rightIcon', state),
+    text: optionStyleKey('text', state),
+    leftIcon: optionStyleKey('leftIcon', state),
+    icon: optionStyleKey('icon', state),
+    inner: optionStyleKey('inner', state),
+  })
+
+  const placeholderStyles = {
+    empty: {
+      wrapper: stylesKey('listPlaceholder'),
+      icon: stylesKey('listPlaceholderIcon'),
+      text: stylesKey('listPlaceholderText'),
+    },
+    noItems: {
+      wrapper: stylesKey('listPlaceholderNoItems'),
+      icon: stylesKey('listPlaceholderNoItemsIcon'),
+      text: stylesKey('listPlaceholderNoItemsText'),
+    },
+  }
+
+  const loadingStyles = {
+    wrapper: stylesKey('loadingIndicator'),
+  }
+
+  const inputMultiValueStyles = {
+    text: stylesKey('valueMultiple'),
+  }
+
+  const menuWrapperStyles = {
+    wrapper: stylesKey('itemsWrapper'),
+  }
+
+  const reactSelectStyles: StylesConfig<FormTypes.Option<T>, Multi, GroupBase<FormTypes.Option<T>>> = {
+    container: (baseStyles) => stylesKey('inputContainer', baseStyles),
+    control: () => stylesKey('inputContainer'),
+    menuPortal: (baseStyles) => stylesKey('listPortal', baseStyles),
+    menu: (baseStyles) => stylesKey('listWrapper', baseStyles),
+    menuList: (baseStyles) => stylesKey('list', baseStyles),
+    group: () => ({}),
+    indicatorSeparator: () => ({}),
+    groupHeading: (baseStyles) => stylesKey('listHeader', baseStyles),
+    clearIndicator: () => ({
+      ...stylesKey('iconIcon'),
+      ...stylesKey('clearIcon'),
+    }),
+    dropdownIndicator: () => ({
+      ...stylesKey('iconIcon'),
+      ...stylesKey('dropdownIcon'),
+    }),
+    indicatorsContainer: (baseStyles) => baseStyles,
+    input: (baseStyles) => stylesKey('input', baseStyles),
+    loadingIndicator: () => ({}),
+    loadingMessage: () => ({}),
+    multiValue: () => ({}),
+    multiValueLabel: () => ({}),
+    noOptionsMessage: () => ({}),
+    option: () => ({}),
+    placeholder: () => stylesKey('placeholder'),
+    singleValue: (baseStyles) => stylesKey('value', baseStyles),
+    valueContainer: (baseStyles) => stylesKey('valueWrapper', baseStyles),
+  }
+
+  return {
+    variantStyles,
+    reactSelectStyles,
+    optionsStyles,
+    placeholderStyles,
+    loadingStyles,
+    inputMultiValueStyles,
+    menuWrapperStyles,
+  }
+}

package/src/components/Select/types.ts

@@ -0,0 +1,100 @@
+import { ComponentVariants, FormTypes, StylesOf, yup } from "@codeleap/common"
+import { CSSInterpolation } from '@emotion/css'
+import { CSSObject } from "@emotion/react"
+import { GroupBase, NoticeProps, OptionProps, Props } from "react-select"
+import { AsyncProps } from "react-select/async"
+import { ButtonProps } from '../Button'
+import { InputBaseProps } from "../InputBase"
+import { SelectPresets,SelectComposition, OptionState } from "./styles"
+
+type SelectValue<T,Multi extends boolean> = Multi extends true ? T[] : T
+
+type OmitWithValues<T> =  Omit<T, 'options' | 'value' | 'isMulti' | 'loadOptions'|'styles'>
+
+type DynamicSelectProps<T, Multi extends boolean> = 
+  ({
+    loadOptions?: (search: string) => Promise<FormTypes.Options<T>> 
+    defaultValues?: FormTypes.Options<T>
+  } &  OmitWithValues<
+    AsyncProps<FormTypes.Option<T>, Multi, GroupBase<FormTypes.Option<T>>>
+  >) | 
+  ({
+    loadOptions?: never
+  } & OmitWithValues<
+    Props<FormTypes.Option<T>, Multi, GroupBase<FormTypes.Option<T>>>
+  >)
+ 
+export type ReactSelectProps<T, Multi extends boolean = false> = Omit<InputBaseProps , 'styles' | 'variants'> &{
+  options: FormTypes.Options<T>
+  value: SelectValue<T,Multi>
+  onValueChange?: (value: SelectValue<T,Multi>) => void
+  multiple?: Multi
+  validate?: FormTypes.ValidatorWithoutForm<SelectValue<T,Multi>> | yup.SchemaOf<SelectValue<T,Multi>>
+  styles?: StylesOf<SelectComposition>
+} & DynamicSelectProps<T, Multi>
+
+export type ComponentPartProps = {
+  focused: boolean
+  error: boolean
+  disabled: boolean
+  variantStyles: Record<SelectComposition, React.CSSProperties>
+}
+
+export type TCustomOption = OptionProps & ComponentPartProps & { 
+  optionsStyles: (state: OptionState) => OptionState['baseStyles']
+  selectedIcon?: string
+  itemProps?: ButtonProps
+  styles?: OptionState['baseStyles']
+}
+
+type SelectPlaceholderElement = string | ((props: PlaceholderProps) => JSX.Element) | null
+
+export type PlaceholderProps = NoticeProps & ComponentPartProps & { 
+  text: SelectPlaceholderElement
+  defaultStyles: {
+    wrapper: CSSInterpolation
+    text: CSSInterpolation
+    icon: CSSInterpolation
+  }
+  icon: SelectPlaceholderElement
+}
+
+export type LoadingIndicatorProps = NoticeProps & { 
+  defaultStyles: { wrapper: CSSInterpolation }
+  size?: number
+}
+
+export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWithChildren<
+  {
+    debugName?: string
+    clearable?: boolean
+    closeOnSelect?: boolean
+    css?: CSSObject
+    focused?: boolean
+    _error?: string
+    renderItem?: (props: TCustomOption) => JSX.Element
+    FooterComponent?: () => JSX.Element
+    PlaceholderComponent?: (props: PlaceholderProps) => JSX.Element
+    PlaceholderNoItemsComponent?: (props: PlaceholderProps) => JSX.Element
+    LoadingIndicatorComponent?: (props: LoadingIndicatorProps) => JSX.Element
+    noItemsText?: SelectPlaceholderElement
+    noItemsIcon?: SelectPlaceholderElement
+    placeholderText?: SelectPlaceholderElement
+    placeholderIcon?: SelectPlaceholderElement
+    showDropdownIcon?: boolean
+    formatPlaceholderNoItems?: (props: PlaceholderProps & { text: string }) => string
+    selectedIcon?: string
+    onLoadOptionsError?: (error: any) => void
+    loadOptionsOnMount?: boolean
+    searchable?: boolean
+    separatorMultiValue?: string
+    filterItems?: Props['filterOption']
+    itemProps?: ButtonProps
+    loadingIndicatorSize?: number
+    limit?: number
+  } & Omit<
+    ReactSelectProps<T, Multi>, 
+    'isSearchable' | 'isClearable' | 'isDisabled' | 'loadingMessage' | 'filterOption' |
+    'isLoading' | 'menuPortalTarget' | 'closeMenuOnSelect' | 'isMulti'> 
+    & ComponentVariants<typeof SelectPresets>
+>

package/src/components/Slider/index.tsx

@@ -0,0 +1,303 @@
+import * as React from 'react'
+import { ComponentVariants, onMount, PropsOf, TypeGuards, useDefaultComponentStyle, useRef } from '@codeleap/common'
+import { SliderComposition } from './styles'
+import { StylesOf } from '../../types'
+import { View } from '../View'
+import { concatStyles, InputBaseProps, InputBase, selectInputBaseProps } from '../InputBase'
+import { SliderPresets } from './styles'
+import { Text } from '../Text'
+
+import { 
+  Root as SliderContainer, 
+  Track as SliderTrack, 
+  Thumb as SliderThumb, 
+  Range as SliderRange,
+  SliderProps as PrimitiveSliderProps
+} from '@radix-ui/react-slider'
+
+export * from './styles'
+
+export type SliderProps = Partial<Omit<PrimitiveSliderProps, 'value' | 'onValueChange'>> & Pick<InputBaseProps, 'disabled' | 'debugName' | 'description' | 'label'> & {
+  debounce?: number | null
+  indicatorLabel?: {
+    order?: number[]
+    separator?: string
+    transformer?: (value: number[], defaultValue: PrimitiveSliderProps['defaultValue']) => string
+  }
+  value: number[]
+  onValueChange: (val: number[]) => void
+  variants?: ComponentVariants<typeof SliderPresets>['variants']
+  styles?: StylesOf<SliderComposition>
+  style?: PropsOf<typeof View>['style']
+  trackMarks?: Record<number, string>
+  trackMarkComponent?: React.ComponentType<TrackMarkProps>
+}
+
+export type TrackMarkProps = {
+  index: number
+  content?: string | React.ReactNode
+  style?: any
+}
+
+const DefaultSliderTrackMark = (props: TrackMarkProps) => {
+  const { index, content, style } = props
+
+  if(!TypeGuards.isString(props.content)){
+    return <>
+      {props.content}
+    </>
+  }
+
+  return <Text 
+    text={props.content}
+    css={style}
+  />
+}
+
+export const Slider = (props: SliderProps) => {
+  const {
+    inputBaseProps,
+    others
+  } = selectInputBaseProps(props)
+
+  const {
+    debounce = null,
+    onValueChange,
+    value,
+    label,
+    debugName,
+    styles = {},
+    style,
+    disabled,
+    variants,
+    trackMarks,
+    trackMarkComponent = DefaultSliderTrackMark,
+    defaultValue: _defaultValue = [],
+    max = 100,
+    min = 0,
+    indicatorLabel = null,
+    description = null,
+    minStepsBetweenThumbs = 8,
+    step = 1,
+    ...sliderProps
+  } = others
+
+  const defaultValueRef = useRef<PrimitiveSliderProps['defaultValue']>(_defaultValue)
+  const defaultValue = defaultValueRef.current
+
+  onMount(() => {
+    if (_defaultValue?.length <= 0) {
+      defaultValueRef.current = value
+    }
+  })
+
+  const SliderTrackMark = trackMarkComponent
+
+  const currentThumbRef = useRef(null)
+
+  const handleChange: SliderProps['onValueChange'] = (newValue) => {
+    if (newValue.length <= 1) {
+      onValueChange(newValue)
+      return
+    }
+
+    const copyValue = [...value]
+
+    const i = currentThumbRef.current
+    const _newValue = newValue[currentThumbRef.current]
+
+    const hasLeftThumb = i !== 0
+    const hasRightThumb = i + 1 < newValue.length
+
+    const previousThumbValue = hasLeftThumb ? (copyValue[i -1] + minStepsBetweenThumbs) : null
+    const nextThumbValue = hasRightThumb ? (copyValue[i + 1] - minStepsBetweenThumbs) : null
+
+    if (previousThumbValue && _newValue <= previousThumbValue) {
+      copyValue[i] = previousThumbValue
+    } else if (nextThumbValue && _newValue >= nextThumbValue) {
+      copyValue[i] = nextThumbValue
+    } else {
+      copyValue[i] = _newValue
+    }
+
+    onValueChange(copyValue)
+  }
+
+  const variantStyles = useDefaultComponentStyle<'u:Slider', typeof SliderPresets>('u:Slider', {
+    variants,
+    styles,
+  })
+
+  const thumbStyle = React.useMemo(() => {
+    return concatStyles([
+      variantStyles.thumb,
+      disabled && variantStyles['thumb:disabled'],
+    ])
+  }, []) 
+
+  const trackStyle = React.useMemo(() => {
+    return concatStyles([
+      variantStyles.track,
+      disabled && variantStyles['track:disabled'],
+      variantStyles.unselectedTrack,
+      disabled && variantStyles['unselectedTrack:disabled'],
+    ])  
+  }, [disabled]) 
+
+  const selectedTrackStyle = React.useMemo(() => {
+    return concatStyles([
+      variantStyles.selectedTrack,
+      disabled && variantStyles['selectedTrack:disabled'],
+    ])  
+  }, [disabled])
+  
+  const containerStyle = React.useMemo(() => {
+    return concatStyles([
+      variantStyles.sliderContainer,
+      disabled && variantStyles['sliderContainer:disabled'],
+    ])
+  }, [disabled])
+
+  const trackMarksHaveContent = !(TypeGuards.isArray(trackMarks) || TypeGuards.isNil(trackMarks))
+
+  const trackMarksProp = React.useMemo(() => {
+    if(!trackMarksHaveContent){
+      return trackMarks
+    }
+    return Object.keys(trackMarks).map((key) => Number(key))
+  },[trackMarksHaveContent])
+
+  const trackMarkStyle = React.useMemo(() => {
+    return concatStyles([
+      variantStyles.trackMark,
+      disabled && variantStyles['trackMark:disabled'],
+    ])
+  }, [disabled])
+
+  const trackMarkWrapperStyle = React.useMemo(() => {
+    return [
+      variantStyles.trackMarkWrapper,
+      disabled && variantStyles['trackMarkWrapper:disabled'],
+    ]
+  }, [disabled])
+
+  const sliderLabel = React.useMemo(() => {
+    if (TypeGuards.isNil(indicatorLabel) || !indicatorLabel?.order && !indicatorLabel?.transformer) {
+      return description
+    }
+
+    if (TypeGuards.isFunction(indicatorLabel?.transformer)) {
+      const str = indicatorLabel?.transformer(value, defaultValue)
+      return str
+    } else if (TypeGuards.isArray(indicatorLabel?.order)) {
+      let str = ''
+
+      indicatorLabel?.order?.forEach((idx, i) => {
+        const valueLabel = value[idx]
+        
+        if (TypeGuards.isNil(valueLabel)) return
+  
+        str = i === 0 ? String(valueLabel) : `${str}${indicatorLabel?.separator ?? ' - '}${valueLabel}`
+      })
+  
+      return str
+    } else {
+      return description
+    }
+  }, [value])
+
+  return (
+    <InputBase
+      {...inputBaseProps}
+      disabled={disabled}
+      styles={{
+        ...variantStyles,
+        innerWrapper: [
+          variantStyles.innerWrapper,
+        ],
+      }}
+      labelAsRow
+      description={sliderLabel}
+    >
+      <SliderContainer
+        {...sliderProps}
+        step={step}
+        minStepsBetweenThumbs={minStepsBetweenThumbs}
+        style={containerStyle}
+        defaultValue={defaultValue}
+        value={value}
+        onValueCommit={() => null}
+        onValueChange={handleChange}
+        min={min}
+        max={max}
+        disabled={disabled}
+      >
+        <SliderTrack style={trackStyle}>
+          <SliderRange style={selectedTrackStyle} />
+        </SliderTrack>
+
+        {defaultValue.map((_thumbValue, i) => (
+          <SliderThumb 
+            key={i} 
+            style={thumbStyle}
+            onClick={() => currentThumbRef.current = i}
+            onMouseEnter={() => currentThumbRef.current = i}
+          />
+        ))}
+      </SliderContainer>
+
+      {trackMarksProp ?
+          <View css={trackMarkWrapperStyle}>
+            {
+              trackMarksProp.map((_, idx) => {
+                let idxStyle = {}
+
+                const relativeValue = Number(trackMarksProp[idx])
+    
+                if(idx === 0){
+                  idxStyle = variantStyles.firstTrackMark
+                } else if(idx === trackMarksProp.length - 1){
+                  idxStyle = variantStyles.lastTrackMark
+                } else {
+                  const markerPosition = (relativeValue / max) * 100
+
+                  idxStyle = { 
+                    position: 'absolute', 
+                    left: `${markerPosition}%`, 
+                    top: '50%', 
+                    transform: `translate(-50%, -50%)`,
+                  }
+                }
+
+                const style = [
+                  trackMarkStyle,
+                  idxStyle,
+                ]
+    
+                if (!trackMarksHaveContent){
+                  return <SliderTrackMark
+                    index={idx} 
+                    style={style}
+                    key={idx}
+                  />
+                }
+                
+                const content = trackMarks[relativeValue]
+            
+                return (
+                  <SliderTrackMark
+                    index={idx} 
+                    content={content}
+                    style={style} 
+                    key={idx}
+                  />
+                )
+              })
+            }
+          </View>
+        : null}
+    </InputBase>    
+  )
+}
+
+export * from './styles'

package/src/components/Slider/styles.ts

@@ -0,0 +1,11 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { IconLessInputBaseParts, InputBaseParts, InputBaseStates } from '../InputBase'
+
+type SliderParts = InputBaseParts | 'thumb' | 'track' | 'selectedTrack' | 'unselectedTrack' | 'trackMark' | 'firstTrackMark' | 'lastTrackMark' | 'trackMarkWrapper' | 'sliderContainer' | IconLessInputBaseParts
+type SliderStates = Exclude<InputBaseStates, 'focus'>
+
+export type SliderComposition = `${SliderParts}:${SliderStates}` | SliderParts
+
+const createSliderStyle = createDefaultVariantFactory<SliderComposition>()
+
+export const SliderPresets = includePresets((styles) => createSliderStyle(() => ({ wrapper: styles })))