@codeleap/web 6.3.0 → 7.0.0

package/src/components/InputBase/types.ts

@@ -1,42 +0,0 @@
-import { StylesOf } from '@codeleap/types'
-import { InputBaseComposition } from './styles'
-import { ActionIconComposition, ActionIconProps } from '../ActionIcon'
-
-type OrderedParts = 'label' | 'description' | 'innerWrapper' | 'error'
-
-export type InputBaseProps = React.PropsWithChildren<{
-  label?: React.ReactNode
-  error?: React.ReactNode
-  leftIcon?: ActionIconProps
-  rightIcon?: ActionIconProps
-  wrapper?: React.FC<any>
-  wrapperProps?: any
-  innerWrapper?: React.FC<any>
-  innerWrapperProps?: any
-  style?: StylesOf<InputBaseComposition>
-  description?: React.ReactNode
-  debugName?: string
-  focused?: boolean
-  disabled?: boolean
-  order?: OrderedParts[]
-  labelAsRow?: boolean
-  noError?: boolean
-  innerWrapperRef?: React.MutableRefObject<HTMLDivElement | null>
-  ref?: React.MutableRefObject<HTMLDivElement>
-}>
-
-export type OmitDiff<T1, T2> = {
-  [K in Exclude<keyof T1, keyof T2>]: T1[K]
-} & {
-  [K in keyof T2]: T2[K]
-}
-
-export type InputBaseKey = keyof InputBaseProps
-
-export type IconStyles = StylesOf<ActionIconComposition>
-
-export type IconState = {
-  focused: boolean
-  hasError: boolean
-  disabled: boolean
-}

package/src/components/InputBase/useInputBasePartialStyles.ts

@@ -1,37 +0,0 @@
-import { CSSProperties, useMemo } from 'react'
-
-export function useInputBasePartialStyles<C extends string, S extends Record<string, boolean>>(
-  styles: Record<C, CSSProperties>,
-  styleKeys: Array<C | [C, boolean]>,
-  states: S,
-) {
-  return useMemo(() => {
-    return styleKeys.reduce((acc, value) => {
-      const [key, overrideWithDefault] = Array.isArray(value) ? value : [value, true]
-
-      const result = Object.entries(states).reduce((acc, [state, is]) => {
-        if (!is) return acc
-
-        const style = styles?.[`${key}:${state}` as C]
-
-        if (!style) return acc
-
-        return {
-          ...acc,
-          ...styles[`${key}:${state}` as C]
-        }
-      }, {})
-
-      if (overrideWithDefault && !!styles?.[key]) {
-        acc[key] = {
-          ...styles[key],
-          ...result,
-        }
-      } else {
-        acc[key] = result
-      }
-
-      return acc
-    }, {} as Record<C, CSSProperties>)
-  }, [states])
-}

package/src/components/InputBase/utils.ts

@@ -1,84 +0,0 @@
-import { IconState, IconStyles, InputBaseKey, InputBaseProps, OmitDiff } from './types'
-
-export function selectInputBaseProps<T extends Omit<InputBaseProps, 'style' | 'ref'>>(props: T): {
-  inputBaseProps: InputBaseProps
-  others: OmitDiff<T, T>
-} {
-  const varList:InputBaseKey[] = [
-    'label',
-    'error',
-    'innerWrapper',
-    'leftIcon',
-    'rightIcon',
-    'description',
-    'wrapper',
-    'children',
-    'innerWrapperProps',
-    'wrapperProps',
-    'disabled',
-  ]
-
-  const copy = { ...props }
-
-  const result = varList.reduce((acc, key) => {
-    // @ts-ignore
-    acc[key] = copy[key]
-
-    return acc
-  }, {} as InputBaseProps)
-
-  return { inputBaseProps: result, others: copy as OmitDiff<T, T> }
-}
-
-export const getIconStyles = (obj: IconStyles, state: IconState) => ({
-  icon: {
-    ...obj.icon,
-    ...(state.focused && obj['icon:focus']),
-    ...(state.hasError && obj['icon:error']),
-  },
-  'icon:disabled': {
-    ...(state.disabled && obj['icon:disabled']),
-  },
-  touchableWrapper: {
-    ...obj.touchableWrapper,
-    ...(state.focused && obj['touchableWrapper:focus']),
-    ...(state.hasError && obj['touchableWrapper:error']),
-  },
-  'touchableWrapper:disabled': {
-    ...(state.disabled && obj['touchableWrapper:disabled']),
-  },
-})
-
-export function concatStyles(unstyles: Record<number, {}> = {}) {
-  let styles = {}
-
-  Object.values(unstyles || {}).forEach(style => {
-    if (style) {
-      styles = {
-        ...styles,
-        ...style,
-      }
-    }
-  })
-
-  return styles
-}
-
-export const iconStylesOf = (baseStyles: IconStyles, styles: IconStyles) => ({
-  icon: {
-    ...baseStyles.icon,
-    ...styles.icon,
-  },
-  'icon:disabled': {
-    ...baseStyles['icon:disabled'],
-    ...styles['icon:disabled'],
-  },
-  touchableWrapper: {
-    ...baseStyles.touchableWrapper,
-    ...styles.touchableWrapper,
-  },
-  'touchableWrapper:disabled': {
-    ...baseStyles['touchableWrapper:disabled'],
-    ...styles['touchableWrapper:disabled'],
-  },
-})

package/src/components/SegmentedControl/index.tsx

@@ -1,223 +0,0 @@
-import React, { forwardRef } from 'react'
-import { View } from '../View'
-import { TypeGuards } from '@codeleap/types'
-import { useRef } from '@codeleap/hooks'
-
-import { Text } from '../Text'
-import { motion, TargetAndTransition } from 'motion/react'
-import { useAnimatedVariantStyles } from '../../lib'
-import { SegmentedControlOptionProps, SegmentedControlProps } from './types'
-import { Touchable } from '../Touchable'
-import { Icon } from '../Icon'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
-
-export * from './styles'
-export * from './types'
-
-const Option = (props: SegmentedControlOptionProps) => {
-  const {
-    selected,
-    onPress,
-    styles,
-    iconProps = {},
-    label,
-    icon,
-    largestWidth,
-    textProps,
-    disabled,
-    ref,
-    ...touchableProps
-  } = props
-
-  const iconStyles = mergeStyles([
-    styles.icon,
-    (selected ? styles['icon:selected'] : null),
-    (disabled ? styles['icon:disabled'] : null),
-  ])
-
-  return (
-    <Touchable
-      key={touchableProps.key as any}
-      ref={ref as unknown as React.Ref<HTMLButtonElement>}
-      onPress={onPress}
-      disabled={disabled}
-      {...touchableProps}
-      style={{
-        ...styles.button,
-        ...(selected ? styles['button:selected'] : {}),
-        ...(disabled ? styles['button:disabled'] : {}),
-        width: largestWidth?.width,
-      }}
-    >
-      {!!icon ? (
-        <Icon
-          debugName={touchableProps?.debugName}
-          name={icon}
-          {...iconProps}
-          style={iconStyles}
-        />
-      ) : null}
-      <Text
-        text={label}
-        debugName={touchableProps?.debugName}
-        {...textProps}
-        style={{
-          ...styles.text,
-          ...(selected ? styles['text:selected'] : {}),
-          ...(disabled ? styles['text:disabled'] : {}),
-        }}
-      />
-    </Touchable>
-  )
-}
-
-export const SegmentedControl = (props: SegmentedControlProps) => {
-  const {
-    label,
-    options,
-    value,
-    onValueChange,
-    style,
-    bubbleProps,
-    animationProps,
-    transitionDuration,
-    disabled,
-    RenderAnimatedView: Bubble,
-    textProps,
-    iconProps,
-    debugName,
-    debounce,
-    debounceEnabled,
-    ...rest
-  } = {
-    ...SegmentedControl.defaultProps,
-    ...props,
-  }
-
-  const styles = useStylesFor(SegmentedControl.styleRegistryName, style)
-
-  const currentOptionIdx = React.useMemo(() => {
-    return options?.findIndex(o => o?.value === value) || 0
-  }, [value])
-
-  const maxDivWidthRef = useRef(null)
-  const sectionPressedRef = useRef(null)
-
-  const largestWidth = React.useMemo(() => {
-    return {
-      width: maxDivWidthRef.current,
-    }
-  }, [maxDivWidthRef.current])
-
-  const bubbleAnimation = useAnimatedVariantStyles({
-    variantStyles: styles,
-    animatedProperties: [],
-    updater: () => {
-      'worklet'
-      return {
-        translateX: currentOptionIdx * largestWidth.width,
-        transition: {
-          ease: 'easeInOut',
-          duration: transitionDuration,
-        },
-        ...animationProps,
-      } as TargetAndTransition
-    },
-    dependencies: [currentOptionIdx, largestWidth.width],
-  })
-
-  const selectedBubbleStyles = [
-    styles.selectedBubble,
-    disabled && styles['selectedBubble:disabled'],
-    largestWidth,
-  ]
-
-  const onSelectTab = (option: SegmentedControlOptionProps, e?: React.KeyboardEvent<HTMLButtonElement>) => {
-    if (!e || e?.keyCode === 13 || e?.key === 'Enter') {
-      if (!debounceEnabled || !TypeGuards.isNumber(debounce)) {
-        onValueChange?.(option?.value)
-        return
-      }
-
-      if (sectionPressedRef.current !== null) return
-
-      onValueChange?.(option?.value)
-      sectionPressedRef.current = setTimeout(() => {
-        clearTimeout(sectionPressedRef.current)
-        sectionPressedRef.current = null
-      }, debounce)
-    } else {
-      return null
-    }
-  }
-
-  return (
-    <View {...rest} style={styles.wrapper}>
-      {label ? <Text text={label} style={[styles.label, disabled && styles['label:disabled']]} /> : null}
-      <View style={[styles.innerWrapper, disabled && styles['innerWrapper:disabled']]}>
-        <Bubble
-          // @ts-expect-error
-          css={selectedBubbleStyles}
-          animate={bubbleAnimation}
-          initial={false}
-          {...bubbleProps}
-        />
-        {options.map((o, idx) => (
-          <Option
-            ref={(ref) => {
-              if (ref && ref.offsetWidth > maxDivWidthRef.current) {
-                maxDivWidthRef.current = ref.offsetWidth
-              }
-            }}
-            debugName={debugName}
-            label={o.label}
-            value={o.value}
-            onPress={() => onSelectTab(o)}
-            onKeyDown={(e) => onSelectTab(o, e)}
-            key={idx}
-            icon={o.icon}
-            selected={value === o.value}
-            styles={styles}
-            disabled={disabled}
-            textProps={textProps}
-            iconProps={iconProps}
-            largestWidth={largestWidth}
-            tabIndex={0}
-            {...props?.touchableProps}
-          />
-        ))}
-      </View>
-    </View>
-  )
-}
-
-SegmentedControl.styleRegistryName = 'SegmentedControl'
-
-SegmentedControl.elements = [
-  'wrapper',
-  'innerWrapper',
-  'selectedBubble',
-  'text',
-  'icon',
-  'button',
-  'label',
-]
-
-SegmentedControl.rootElement = 'wrapper'
-
-SegmentedControl.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return SegmentedControl as (props: StyledComponentProps<SegmentedControlProps, typeof styles>) => IJSX
-}
-
-SegmentedControl.defaultProps = {
-  animationProps: {},
-  transitionDuration: 0.2,
-  disabled: false,
-  RenderAnimatedView: motion.div,
-  debounce: 1000,
-  debounceEnabled: true,
-} as Partial<SegmentedControlProps>
-
-WebStyleRegistry.registerComponent(SegmentedControl)

package/src/components/SegmentedControl/styles.ts

@@ -1,12 +0,0 @@
-export type SegmentedControlStates = 'selected' | 'disabled'
-
-type SegmentedControlParts =
-  'wrapper' |
-  'innerWrapper' |
-  'selectedBubble' |
-  'text' |
-  'icon' |
-  'button' |
-  `label`
-
-export type SegmentedControlComposition = SegmentedControlParts | `${SegmentedControlParts}:${SegmentedControlStates}`

package/src/components/SegmentedControl/types.ts

@@ -1,44 +0,0 @@
-import React from 'react'
-import { StylesOf } from '@codeleap/types'
-import { TextProps } from '../Text'
-import { TouchableProps } from '../Touchable'
-import { SegmentedControlComposition } from './styles'
-import { MotionProps, TargetAndTransition, ForwardRefComponent } from 'motion/react'
-import { IconProps } from '../Icon'
-import { AppIcon, StyledProp } from '@codeleap/styles'
-
-export type SegmentedControlProps<T = string> = {
-  options: SegmentedControlOptionProps[]
-  value?: T
-  style?: StyledProp<SegmentedControlComposition>
-  onValueChange?: (v: any) => void
-  bubbleProps?: React.HTMLAttributes<HTMLDivElement> & MotionProps
-  label?: string
-  touchableProps?: Partial<TouchableProps>
-  debugName?: string
-  disabled?: boolean
-  animationProps?: TargetAndTransition
-  transitionDuration?: number
-  RenderAnimatedView?: ForwardRefComponent<HTMLDivElement, any>
-  textProps?: TextProps
-  iconProps?: Partial<IconProps>
-  debounce?: number
-  debounceEnabled?: boolean
-}
-
-export type OptionRef = TouchableProps['ref']
-
-export type SegmentedControlOptionProps =
-  TouchableProps &
-  {
-    selected?: boolean
-    label: string
-    styles?: StylesOf<SegmentedControlComposition>
-    value?: any
-    textProps?: TextProps
-    iconProps?: Partial<IconProps>
-    icon?: AppIcon
-    largestWidth?: {
-      width: number
-    }
-  }

package/src/components/VirtualList/context.tsx

@@ -1,93 +0,0 @@
-import { useVirtualizer } from '@tanstack/react-virtual'
-import { useRef, useCallback, use, createContext } from 'react'
-import { VirtualListProps, VirtualListContextValue } from './types'
-
-const VirtualListContext = createContext<VirtualListContextValue<any> | null>(null)
-
-export function VirtualListProvider<T>(listProps: React.PropsWithChildren<VirtualListProps<T>>) {
-  const {
-    children,
-    estimateSize,
-    data,
-    hasNextPage,
-    fetchNextPage,
-    isFetchingNextPage,
-    ...virtualizerOptions
-  } = listProps
-
-  const scrollRef = useRef<HTMLDivElement | null>(null)
-
-  const listLength = data?.length ?? 0
-
-  const virtualizerItemCount = hasNextPage ? listLength + 1 : listLength
-
-  const paginationIndicatorIndex = hasNextPage ? virtualizerItemCount - 1 : null
-
-  const lastItemIndex = hasNextPage ? virtualizerItemCount - 2 : virtualizerItemCount - 1
-
-  const virtualizer = useVirtualizer({
-    gap: 16,
-    overscan: 5,
-    ...virtualizerOptions,
-    count: virtualizerItemCount,
-    getScrollElement: () => scrollRef.current,
-    estimateSize(index) {
-      if (index === paginationIndicatorIndex) {
-        return 100
-      }
-
-      const item = data?.[index]
-
-      return item && estimateSize ? estimateSize(item) : 100
-    },
-  })
-
-  const loadNextPage = useCallback(() => {
-    const items = virtualizer.getVirtualItems()
-
-    const [_, lastItem] = [...items].reverse()
-
-    if (!lastItem) {
-      return
-    }
-
-    if (
-      lastItem.index >= data.length - 1 &&
-      hasNextPage &&
-      !isFetchingNextPage
-    ) {
-      fetchNextPage?.()
-    }
-  }, [
-    virtualizer.getVirtualItems(),
-    data?.length,
-    hasNextPage,
-    isFetchingNextPage,
-    fetchNextPage,
-  ])
-
-  const contextValue = {
-    virtualizer,
-    loadNextPage,
-    scrollRef,
-    virtualizerItemCount,
-    paginationIndicatorIndex,
-    lastItemIndex,
-    list: {
-      data,
-      hasNextPage,
-      fetchNextPage,
-      isFetchingNextPage,
-    },
-  }
-
-  return <VirtualListContext value={contextValue}>
-    {children}
-  </VirtualListContext>
-}
-
-export function useVirtualListContext<T extends (val: VirtualListContextValue<any>) => any>(selector: T): ReturnType<T> {
-  const context = use(VirtualListContext)
-
-  return selector(context)
-}

package/src/components/VirtualList/index.tsx

@@ -1,11 +0,0 @@
-import { VirtualListContainer, VirtualListItems } from './list'
-import { VirtualListProvider } from './context'
-import { memo } from 'react'
-
-export function createVirtualList<T>() {
-  return {
-    Provider: VirtualListProvider<T>,
-    Container: memo(VirtualListContainer),
-    Items: memo(VirtualListItems<T>),
-  }
-}

package/src/components/VirtualList/list.tsx

@@ -1,85 +0,0 @@
-import { useVirtualListContext } from './context'
-import React, { useCallback, useEffect, useMemo } from 'react'
-import { VirtualItem } from '@tanstack/react-virtual'
-import { EmptyPlaceholder } from '../EmptyPlaceholder'
-import { VirtualListItemsProps, VirtualListContainerProps } from './types'
-
-export function VirtualListItems<T>(props: VirtualListItemsProps<T>) {
-  const { renderItem: Item, ListFooterComponent = () => null } = props
-
-  const virtualizer = useVirtualListContext(v => v.virtualizer)
-  const listItems = useVirtualListContext(v => v.list.data)
-  const paginationIndicatorIndex = useVirtualListContext(v => v.paginationIndicatorIndex)
-  const getNextPage = useVirtualListContext(v => v.loadNextPage)
-
-  const items = virtualizer.getVirtualItems()
-
-  useEffect(() => {
-    getNextPage()
-  }, [getNextPage])
-
-  const ItemWrapper = useCallback((props: React.PropsWithChildren<{ item: VirtualItem }>) => {
-    const { item, children } = props
-    
-    return <div
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        transform: `translateY(${item.start}px)`,
-      }}
-      ref={virtualizer.measureElement}
-      data-index={item.index}
-    >
-      {children}
-    </div>
-  }, [virtualizer.measureElement])
-
-  const renderItem = useCallback((item: VirtualItem) => {
-    const data = listItems[item.index]
-
-    const isPaginationIndicator = item.index === paginationIndicatorIndex
-
-    if (isPaginationIndicator) {
-      return <ItemWrapper key={item.key} item={item}>
-        <ListFooterComponent />
-      </ItemWrapper>
-    }
-
-    return <ItemWrapper key={item.key} item={item}>
-      <Item index={item.index} item={data} />
-    </ItemWrapper>
-
-  }, [Item, ItemWrapper, listItems, ListFooterComponent, paginationIndicatorIndex])
-
-  const containerStyle = useMemo(() => ({
-    height: `${virtualizer.getTotalSize()}px`,
-    width: '100%',
-    position: 'relative' as const,
-  }), [virtualizer.getTotalSize()])
-
-  return <div style={containerStyle}>
-    {items.map(renderItem)}
-  </div>
-}
-
-export const VirtualListContainer = (props: VirtualListContainerProps) => {
-  const { children, placeholder, ...rest } = props
-
-  const scrollRef = useVirtualListContext(ctx => ctx.scrollRef)
-
-  const totalItemCount = useVirtualListContext(ctx => ctx.list?.data?.length)
-
-  if (!totalItemCount || totalItemCount <= 0) {
-    if (React.isValidElement(placeholder)) {
-      return <>{placeholder}</>
-    }
-
-    return <EmptyPlaceholder {...placeholder} />
-  }
-
-  return <div ref={scrollRef} {...rest}>
-    {children}
-  </div>
-}

package/src/components/VirtualList/types.ts

@@ -1,38 +0,0 @@
-import { PartialKeys, Virtualizer, VirtualizerOptions } from '@tanstack/react-virtual'
-import { ReactElement } from 'react'
-import { AnyFunction, PropsOf } from '@codeleap/types'
-import { EmptyPlaceholder } from '../EmptyPlaceholder'
-
-type VirtualListItem<T> = {
-  item: T
-  index: number
-}
-
-type VirtualOptions = PartialKeys<VirtualizerOptions<HTMLDivElement, Element>, "observeElementRect" | "observeElementOffset" | "scrollToFn">
-
-export type VirtualListProps<T> = Partial<Omit<VirtualOptions, 'estimateSize' | 'data'>> & {
-  data: T[]
-  fetchNextPage?: AnyFunction
-  isFetchingNextPage?: boolean
-  hasNextPage?: boolean
-  estimateSize?: (item: T) => number
-}
-
-export type VirtualListContextValue<T> = {
-  virtualizer: Virtualizer<HTMLDivElement, Element>
-  scrollRef: React.RefObject<HTMLDivElement>
-  loadNextPage: () => void
-  list: Pick<VirtualListProps<T>, 'data' | 'fetchNextPage' | 'isFetchingNextPage' | 'hasNextPage'>
-  virtualizerItemCount: number
-  paginationIndicatorIndex: number | null
-  lastItemIndex: number
-}
-
-export type VirtualListItemsProps<T> = {
-  renderItem: (data: VirtualListItem<T>) => ReactElement
-  ListFooterComponent?: () => ReactElement
-}
-
-export type VirtualListContainerProps = React.PropsWithChildren<React.ComponentPropsWithoutRef<'div'>> & {
-  placeholder?: ReactElement | Partial<PropsOf<typeof EmptyPlaceholder>>
-}