@codeleap/web 2.4.7 → 3.0.2

package/src/components/List/index.tsx

@@ -0,0 +1,103 @@
+import { VariableSizeList as VirtualList , VariableSizeListProps} from 'react-window'
+import { ComponentProps, CSSProperties, ReactElement } from 'react'
+import AutoSizer from 'react-virtualized-auto-sizer'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle
+} from '@codeleap/common'
+import { StylesOf } from '../../types/utility'
+import { CSSObject } from '@emotion/react'
+import { ListComposition, ListPresets } from './styles'
+
+export type ListRender<T> = (itemProps: {
+  item: T
+  index: number
+  style: CSSProperties
+}) => ReactElement
+
+export * from './styles'
+
+export type ListProps<T> = {
+  styles?: StylesOf<ListComposition>
+  css?: CSSObject
+  data: T[]
+  getSize: (i: T, idx: number) => number
+  renderItem: ListRender<T>
+} & Omit<
+  VariableSizeListProps,
+  | 'itemCount'
+  | 'itemSize'
+  | 'itemData'
+  | 'itemHeight'
+  | 'width'
+  | 'height'
+  | 'children'
+> &
+  ComponentVariants<typeof ListPresets>
+
+export const List = <T extends unknown>(
+  listProps: ListProps<T>,
+) => {
+  const {
+    variants,
+    responsiveVariants,
+    styles,
+    data,
+    getSize,
+    renderItem: Item,
+    ...viewProps
+  } = listProps
+
+  const variantStyles = useDefaultComponentStyle('View', {
+    variants,
+    responsiveVariants,
+    styles,
+  })
+
+  return (
+    // @ts-ignore
+    <AutoSizer>
+      {({ height, width }) => (
+        // @ts-ignore
+        <VirtualList
+          height={height}
+          width={width}
+          itemCount={data.length}
+          itemData={data}
+          itemSize={(idx) => getSize(data[idx], idx)}
+          css={variantStyles.wrapper}
+          {...viewProps}
+        >
+          {({ style, index }) => (
+            <Item item={data[index]} style={style} index={index} />
+          )}
+        </VirtualList>
+      )}
+    </AutoSizer>
+  )
+
+  // return <View {...viewProps}>
+  //   {data.map((item, idx) => <Component item={item} idx={idx} key={idx}/>)}
+  // </View>
+}
+
+// const rowHeights = new Array(1000)
+//   .fill(true)
+//   .map(() => 25 + Math.round(Math.random() * 50));
+
+// const getItemSize = index => rowHeights[index];
+
+// const Row = ({ index, style }) => (
+//   <div style={style}>Row {index}</div>
+// );
+
+// const Example = () => (
+//   <List
+//     height={150}
+//     itemCount={1000}
+//     itemSize={getItemSize}
+//     width={300}
+//   >
+//     {Row}
+//   </List>
+// );

package/src/components/List/styles.ts

@@ -0,0 +1,8 @@
+import { createDefaultVariantFactory, includePresets } from "@codeleap/common";
+import { ViewComposition } from "../View";
+
+export type ListComposition = ViewComposition
+
+const createListStyles = createDefaultVariantFactory<ListComposition>()
+
+export const ListPresets = includePresets((styles) => createListStyles(() => ({ wrapper: styles })))

package/src/components/LoadingOverlay/index.tsx

@@ -0,0 +1,34 @@
+import { ComponentVariants, useDefaultComponentStyle } from "@codeleap/common"
+import React from "react"
+import { StylesOf } from "../.."
+import { LoadingOverlayComposition, LoadingOverlayPresets } from "./styles"
+import {View} from '../View'
+import { ActivityIndicator } from "../ActivityIndicator"
+
+export type LoadingOverlayProps = React.PropsWithChildren<{
+  visible?: boolean
+  styles?: StylesOf<LoadingOverlayComposition>
+}> & ComponentVariants<typeof LoadingOverlayPresets>
+
+
+export const LoadingOverlay = (props: LoadingOverlayProps) => {
+  const { visible, children, styles, variants,responsiveVariants } = props
+
+  const variantStyles = useDefaultComponentStyle<'u:LoadingOverlay', typeof LoadingOverlayPresets>('u:LoadingOverlay', {
+    variants, styles, responsiveVariants, rootElement: 'wrapper'
+  })
+
+  return <View css={[variantStyles.wrapper, visible && variantStyles["wrapper:visible"]]}>
+    <ActivityIndicator 
+       styles={{
+        wrapper: [variantStyles.indicatorWrapper, visible && variantStyles["indicatorWrapper:visible"]],
+        backCircle: [variantStyles.indicatorBackCircle, visible && variantStyles["indicatorBackCircle:visible"]],
+        frontCircle: [variantStyles.indicatorFrontCircle, visible && variantStyles["indicatorFrontCircle:visible"]],
+        circle: [variantStyles.indicatorCircle, visible && variantStyles["indicatorCircle:visible"]],
+      }}
+    />
+    {children}
+  </View>
+}
+
+export * from './styles'

package/src/components/LoadingOverlay/styles.ts

@@ -0,0 +1,12 @@
+import { createDefaultVariantFactory, includePresets } from "@codeleap/common";
+import { ActivityIndicatorComposition } from "../ActivityIndicator";
+
+type LoadingOverlayStates = 'visible' 
+ 
+export type LoadingOverlayParts = 'wrapper' | `indicator${Capitalize<ActivityIndicatorComposition>}`
+
+export type LoadingOverlayComposition = `${LoadingOverlayParts}:${LoadingOverlayStates}` | LoadingOverlayParts
+
+export const createLoadingOverlayStyle = createDefaultVariantFactory<LoadingOverlayComposition>()
+
+export const LoadingOverlayPresets = includePresets(s => createLoadingOverlayStyle(() => ({wrapper: s})))

package/src/components/Modal/index.tsx

@@ -0,0 +1,189 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
+import {
+  AnyFunction,
+  ComponentVariants,
+  IconPlaceholder,
+  onUpdate,
+  useDefaultComponentStyle,
+  useNestedStylesByKey,
+} from '@codeleap/common'
+
+import { ReactNode, useEffect, useId, useLayoutEffect, useRef } from 'react'
+import ReactDOM from 'react-dom'
+
+import { v4 } from 'uuid'
+
+import { StylesOf } from '../../types/utility'
+import { Button } from '../Button'
+import { View } from '../View'
+import { Text } from '../Text'
+import { Overlay } from '../Overlay'
+
+import {ModalComposition,ModalPresets} from './styles'
+import { ActionIcon } from '../ActionIcon'
+
+export * from './styles'
+
+export type ModalProps = React.PropsWithChildren<{
+  visible: boolean
+  title?: React.ReactNode
+  toggle: AnyFunction
+  styles?: StylesOf<ModalComposition>
+  accessible?: boolean
+  showClose?: boolean
+  closable?: boolean
+  scroll?: boolean
+  footer?: ReactNode
+  debugName?: string
+} & ComponentVariants<typeof ModalPresets>
+>
+function focusModal(event: FocusEvent, id: string) {
+  event.preventDefault()
+  const modal = document.getElementById(id)
+  if (modal) {
+    modal.focus()
+  }
+}
+export const ModalContent: React.FC<ModalProps & { id: string }> = (
+  modalProps,
+) => {
+  const {
+    children,
+    closable = true,
+    visible,
+    title = '',
+    toggle,
+    responsiveVariants,
+    variants,
+    styles,
+    showClose = true,
+    footer,
+    ...props
+  } = modalProps
+
+  const id = useId()
+
+  const variantStyles = useDefaultComponentStyle<'u:Modal', typeof ModalPresets>('u:Modal', {
+    responsiveVariants,
+    variants,
+    styles,
+  })
+
+  onUpdate(() => {
+    if (visible) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = 'auto'
+
+    }
+  }, [visible])
+
+  function closeOnEscPress(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (e.key === 'Escape') {
+      toggle()
+    }
+  }
+
+  useLayoutEffect(() => {
+    const modal = document.getElementById(id)
+    if (modal) {
+      modal.focus()
+    }
+  }, [id])
+
+  const closeButtonStyles = useNestedStylesByKey('closeButton', variantStyles)
+  const close = closable ? toggle : () => {}
+  return (
+    <View
+      aria-hidden={!visible}
+      css={[variantStyles.wrapper, visible ? variantStyles['wrapper:visible'] : variantStyles['wrapper:hidden']]}
+    >
+      <Overlay
+        visible={visible}
+        
+        css={[variantStyles.backdrop, visible ? variantStyles['backdrop:visible'] : variantStyles['backdrop:hidden'] ]}
+      />
+      <View css={variantStyles.innerWrapper} >
+        <View css={variantStyles.backdropPressable} onClick={close}/>
+        <View
+          component='section'
+          css={[variantStyles.box, visible ? variantStyles['box:visible'] : variantStyles['box:hidden']]}
+          className='content'
+          onKeyDown={closeOnEscPress}
+          tabIndex={0}
+          id={id}
+          aria-modal={true}
+          role='dialog'
+          aria-describedby={`${id}-title`}
+          aria-label='Close the modal by presing Escape key'
+          {...props}
+        >
+          {(title || showClose) && (
+            <View
+              component='header'
+              className='modal-header header'
+              id={`${id}-title`}
+              css={variantStyles.header}
+            >
+              {typeof title === 'string' ? <Text text={title} css={variantStyles.title} /> : title}
+
+              {showClose && closable && (
+                <ActionIcon
+                  icon={'close' as IconPlaceholder}
+                  
+                  onPress={toggle}
+                  styles={closeButtonStyles}
+                />
+              )}
+            </View>
+          )}
+
+          <View css={variantStyles.body}>{children}</View>
+          {footer && (
+            <View component='footer' css={variantStyles.footer}>
+              {footer}
+            </View>
+          )}
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export const Modal: React.FC<ModalProps> = ({ accessible, ...props }) => {
+  const modalId = useRef(v4())
+
+  useEffect(() => {
+    if (accessible) {
+      const currentId = modalId.current
+      const appRoot = document.body
+      appRoot.addEventListener('focusin', (e) => focusModal(e, currentId))
+      return () => appRoot.removeEventListener('focusin', (e) => focusModal(e, currentId))
+    }
+  }, [])
+
+  useEffect(() => {
+    if (accessible) {
+      const appRoot = document.body
+      appRoot.setAttribute('aria-hidden', `${props.visible}`)
+      appRoot.setAttribute('tabindex', `${-1}`)
+    }
+  }, [props.visible])
+
+  if (accessible) {
+    if (props.visible) {
+      document.body.style.overflow = 'hidden'
+      return ReactDOM.createPortal(
+        <ModalContent {...props} id={modalId.current} />,
+        document.body,
+      )
+    } else {
+      document.body.style.overflow = 'visible'
+      return null
+    }
+  }
+
+  return <ModalContent {...props} id={modalId.current} />
+}

package/src/components/Modal/styles.ts

@@ -0,0 +1,26 @@
+import {
+  createDefaultVariantFactory,
+  includePresets,
+} from '@codeleap/common'
+import { ActionIconComposition } from '../ActionIcon'
+
+export type AnimatableParts = 'box' | 'backdrop' | 'wrapper'
+
+export type ModalParts =
+  | AnimatableParts
+  | 'body'
+  | 'footer'
+  | 'header'
+  | 'title'
+  | 'innerWrapper'
+  | 'backdropPressable'
+  | `closeButton${Capitalize<ActionIconComposition>}`
+
+export type ModalComposition =
+  | ModalParts
+  | `${AnimatableParts}:visible`
+  | `${AnimatableParts}:hidden`
+
+const createModalStyle = createDefaultVariantFactory<ModalComposition>()
+
+export const ModalPresets = includePresets((style) => createModalStyle(() => ({ body: style })))

package/src/components/NumberIncrement/index.tsx

@@ -0,0 +1,292 @@
+import * as React from 'react'
+import {
+  ComponentVariants,
+  yup,
+  useDefaultComponentStyle,
+  StylesOf,
+  PropsOf,
+  TypeGuards,
+  onUpdate,
+  useState,
+  useRef,
+  useValidate,
+  FormTypes,
+  IconPlaceholder,
+} from '@codeleap/common'
+import { View } from '../View'
+import { NumberIncrementPresets, NumberIncrementComposition } from './styles'
+import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
+import { Text } from '../Text'
+import {
+  PatternFormat,
+  PatternFormatProps as PFProps,
+  NumericFormat,
+  NumericFormatProps as NFProps,
+  NumberFormatBase,
+} from 'react-number-format'
+import { FormatInputValueFunction } from 'react-number-format/types/types'
+
+export * from './styles'
+
+export type NumberIncrementProps = Pick<
+  InputBaseProps,
+  'debugName' | 'disabled' | 'label'
+> & {
+  variants?: ComponentVariants<typeof NumberIncrementPresets>['variants']
+  styles?: StylesOf<NumberIncrementComposition>
+  value: number
+  onValueChange: (value: number) => void
+  onChangeText?: (value: number) => void
+  validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
+  style?: PropsOf<typeof View>['style']
+  max?: number
+  min?: number
+  step?: number
+  editable?: boolean
+  prefix?: NFProps['prefix']
+  suffix?: NFProps['suffix']
+  separator?: NFProps['thousandSeparator']
+  format?: PFProps['format']
+  mask?: PFProps['mask']
+  hasSeparator?: boolean
+  _error?: string
+  formatter?: FormatInputValueFunction
+  placeholder?: string
+}
+
+export const NumberIncrement = (props: NumberIncrementProps) => {
+  const {
+    inputBaseProps,
+    others,
+  } = selectInputBaseProps(props)
+
+  const {
+    variants = [],
+    style = {},
+    styles = {},
+    value,
+    disabled,
+    onValueChange,
+    onChangeText,
+    max = 1000000000,
+    min = 0,
+    step = 1,
+    editable = true,
+    hasSeparator = false,
+    format = null,
+    mask = undefined,
+    suffix,
+    separator = null,
+    prefix,
+    validate,
+    _error,
+    formatter = null,
+    placeholder,
+  } = others
+
+  const [isFocused, setIsFocused] = useState(false)
+
+  const innerWrapperRef = useRef(null)
+  const innerInputRef = useRef<HTMLInputElement>(null)
+
+  const validation = useValidate(value, validate)
+
+  const hasError = !validation.isValid || _error
+  const errorMessage = validation.message || _error
+
+  const incrementDisabled = React.useMemo(() => {
+    if (TypeGuards.isNumber(max) && (Number(value) >= max)) {
+      return true
+    }
+    return false
+  }, [value])
+
+  const decrementDisabled = React.useMemo(() => {
+    if (TypeGuards.isNumber(min) && (Number(value) <= min)) {
+      return true
+    }
+    return false
+  }, [value])
+
+  const variantStyles = useDefaultComponentStyle<'u:NumberIncrement', typeof NumberIncrementPresets>(
+    'u:NumberIncrement',
+    {
+      variants,
+      styles,
+      rootElement: 'wrapper',
+    },
+  )
+
+  const onChange = (newValue: number) => {
+    if (onValueChange) onValueChange?.(newValue)
+    if (onChangeText) onChangeText?.(newValue)
+  }
+
+  const handleChange = React.useCallback((action: 'increment' | 'decrement') => {
+    validation?.onInputFocused()
+
+    if (action === 'increment' && !incrementDisabled) {
+      const newValue = Number(value) + step
+      onChange(newValue)
+      return
+    } else if (action === 'decrement' && !decrementDisabled) {
+      const newValue = Number(value) - step
+      onChange(newValue)
+      return
+    }
+
+    validation?.onInputBlurred()
+  }, [validation?.onInputBlurred, validation?.onInputFocused, value])
+
+  const inputTextStyle = React.useMemo(() => {
+    return [
+      variantStyles.input,
+      isFocused && variantStyles['input:focus'],
+      hasError && variantStyles['input:error'],
+      disabled && variantStyles['input:disabled'],
+    ]
+  }, [disabled, isFocused, hasError])
+
+  const placeholderStyles = [
+    variantStyles.placeholder,
+    isFocused && variantStyles['placeholder:focus'],
+    hasError && variantStyles['placeholder:error'],
+    disabled && variantStyles['placeholder:disabled'],
+  ]
+
+  const handleBlur = React.useCallback(() => {
+    if (TypeGuards.isNumber(max) && (value >= max)) {
+      onChange(max)
+      return
+    } else if (TypeGuards.isNumber(min) && (value <= min) || !value) {
+      onChange(min)
+      return
+    }
+
+    validation?.onInputBlurred()
+  }, [validation?.onInputBlurred, value])
+
+  const handleFocus = React.useCallback(() => {
+    validation?.onInputFocused()
+    setIsFocused(true)
+  }, [validation?.onInputFocused])
+
+  onUpdate(() => {
+    function handleKeyboardEvent(event: KeyboardEvent) {
+      if (!isFocused) return
+
+      if (event.keyCode === 39 || event.key === 'ArrowRight') {
+        handleChange('increment')
+      } else if (event.keyCode === 37 || event.key === 'ArrowLeft') {
+        handleChange('decrement')
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyboardEvent)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyboardEvent)
+    }
+  }, [handleChange, isFocused])
+
+  onUpdate(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (innerWrapperRef.current && !innerWrapperRef.current.contains(event.target)) {
+        setIsFocused(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [innerWrapperRef])
+
+  const handleChangeInput: NFProps['onValueChange'] = (values) => {
+    const { floatValue } = values
+
+    onChange(Number(floatValue))
+  }
+
+  const InputFormat = TypeGuards.isString(format) || TypeGuards.isString(mask)
+    ? PatternFormat
+    : NumericFormat
+
+  const Input = TypeGuards.isFunction(formatter)
+    ? NumberFormatBase
+    : InputFormat
+
+  return (
+    <InputBase
+      {...inputBaseProps}
+      error={hasError ? errorMessage : null}
+      styles={{
+        ...variantStyles,
+        innerWrapper: [
+          variantStyles.innerWrapper,
+          editable && variantStyles['innerWrapper:cursor'],
+        ],
+      }}
+      rightIcon={{
+        name: 'plus' as IconPlaceholder,
+        disabled: disabled || incrementDisabled,
+        onPress: () => handleChange('increment'),
+        component: 'button',
+        ...inputBaseProps.rightIcon,
+      }}
+      leftIcon={{
+        name: 'minus' as IconPlaceholder,
+        disabled: disabled || decrementDisabled,
+        onPress: () => handleChange('decrement'),
+        component: 'button',
+        ...inputBaseProps.leftIcon,
+      }}
+      style={style}
+      disabled={disabled}
+      focused={isFocused}
+      innerWrapperProps={{
+        ...(inputBaseProps.innerWrapperProps || {}),
+        onClick: () => {
+          setIsFocused(true)
+          innerInputRef.current?.focus?.()
+        },
+      }}
+      innerWrapperRef={innerWrapperRef}
+    >
+      {editable && !disabled ? (
+        <Input
+          displayType='input'
+          css={[
+            ...inputTextStyle,
+            {
+              '&::placeholder': placeholderStyles,
+            },
+            {
+              '&:focus': [
+                {
+                  outline: 'none',
+                  borderWidth: 0,
+                  borderColor: 'transparent',
+                },
+              ],
+            },
+          ]}
+          inputMode='numeric'
+          onValueChange={handleChangeInput}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          value={value}
+          thousandSeparator={separator}
+          thousandsGroupStyle={hasSeparator || TypeGuards.isString(separator) ? 'thousand' : 'none'}
+          suffix={suffix}
+          prefix={prefix}
+          format={TypeGuards.isFunction(formatter) ? formatter as any : format}
+          mask={mask}
+          placeholder={placeholder}
+          getInputRef={innerInputRef}
+        />
+      ) : <Text text={String(value)} css={inputTextStyle} />}
+    </InputBase>
+  )
+}

package/src/components/NumberIncrement/styles.ts

@@ -0,0 +1,15 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { InputBaseParts } from '../InputBase'
+
+export type NumberIncrementParts = InputBaseParts | 'input' | 'placeholder'
+
+export type NumberIncrementStates = 'disabled' | 'focus' | 'error'
+
+export type NumberIncrementComposition =
+  | NumberIncrementParts
+  | `${NumberIncrementParts}:${NumberIncrementStates}`
+  | `innerWrapper:cursor`
+
+const createNumberIncrementStyle = createDefaultVariantFactory<NumberIncrementComposition>()
+
+export const NumberIncrementPresets = includePresets((styles) => createNumberIncrementStyle(() => ({ wrapper: styles })))