@codeleap/web 2.4.7 → 3.0.2

package/src/components/Overlay/index.tsx

@@ -0,0 +1,42 @@
+import {
+  ComponentVariants,
+  SmartOmit,
+  StylesOf,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { Touchable, TouchableProps } from '../Touchable'
+import { View, ViewProps } from '../View'
+import { OverlayComposition, OverlayPresets } from './styles'
+
+export type OverlayProps = {
+  visible?: boolean
+  styles?: StylesOf<OverlayComposition>
+  onPress?: TouchableProps<'div'>['onClick']
+} & ComponentVariants<typeof OverlayPresets> &
+  Partial<SmartOmit<ViewProps<'div'>, 'variants' | 'responsiveVariants'>>
+
+export * from './styles'
+
+export const Overlay: React.FC<OverlayProps> = (overlayProps) => {
+  const { visible, responsiveVariants, variants, styles, ...props } =
+    overlayProps
+
+  const variantStyles = useDefaultComponentStyle('Overlay', {
+    variants,
+    responsiveVariants,
+    styles,
+  })
+
+  const Component = props.onClick || props.onPress ? Touchable : View
+
+  return (
+    <Component
+      css={{
+        ...variantStyles.wrapper,
+        transition: 'opacity 0.2s ease',
+        ...(visible ? variantStyles['wrapper:visible'] : {}),
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/Overlay/styles.ts

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

package/src/components/RadioInput/index.tsx

@@ -0,0 +1,155 @@
+import * as React from 'react'
+import { ReactNode } from 'react'
+import { Text } from '../Text'
+import { Touchable } from '../Touchable'
+import {
+  ComponentVariants,
+  FormTypes,
+  StylesOf,
+  TypeGuards,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { View } from '../View'
+import { RadioInputComposition, RadioInputPresets } from './styles'
+import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
+
+export * from './styles'
+
+type WrapperProps = InputBaseProps
+
+type RadioOption<T> = FormTypes.Options<T>[number] & {
+  disabled?: boolean
+}
+
+export type RadioGroupProps<T extends string|number> = WrapperProps & {
+  options: RadioOption<T>[]
+  value: T
+  onValueChange(value: T): void
+  label: ReactNode
+  styles?: StylesOf<RadioInputComposition>
+  variants?: ComponentVariants<typeof RadioInputPresets>['variants']
+}
+
+type OptionProps<T extends string|number> = {
+  item: RadioOption<T>
+  selected: boolean
+  onSelect(): void
+  styles?: StylesOf<RadioInputComposition>
+  debugName?: string
+  disabled?: boolean
+  separator?: boolean
+}
+
+const Option = <T extends string|number>(props: OptionProps<T>) => {
+  const {
+    debugName,
+    item,
+    disabled,
+    styles,
+    selected,
+    onSelect,
+    separator = false,
+  } = props
+
+  const isDisabled = disabled || item.disabled
+
+  const getStyle = (key) => {
+    if(isDisabled && selected) {
+      return styles[`${key}:selectedDisabled`]
+    }
+    if(isDisabled) {
+      return styles[`${key}:disabled`]
+    }
+    if(selected) {
+      return styles[`${key}:selected`]
+    }
+    return styles[key]
+  }
+
+  const label = TypeGuards.isString(item.label) ? <Text 
+    css={[
+      styles.optionLabel,
+      getStyle('optionLabel'),
+    ]}
+    text={item.label}
+  /> : item.label 
+
+  return <>
+    <Touchable 
+      debugName={`${debugName} option ${item.value}`}
+      css={[
+        styles.optionWrapper,
+        getStyle('optionWrapper'),
+      ]}
+      onPress={onSelect}
+      disabled={isDisabled}
+    > 
+      <View 
+        css={[
+          styles.optionIndicator,
+        getStyle('optionIndicator'),
+        ]}
+
+      >
+        <View
+          css={[
+            styles.optionIndicatorInner,
+            getStyle('optionIndicatorInner'),
+          ]}
+        />
+      </View>
+      {label}
+      
+    </Touchable>
+    {separator && <View style={styles.optionSeparator} />}
+  </>
+}
+
+export const RadioGroup = <T extends string|number>(
+  props: RadioGroupProps<T>,
+) => {
+  const {
+    inputBaseProps,
+    others
+  } = selectInputBaseProps(props)
+
+  const {
+    options,
+    value,
+    onValueChange,
+    variants,
+    styles,
+    disabled,
+    debugName,
+  } = others
+
+  const variantStyles = useDefaultComponentStyle<'u:RadioInput', typeof RadioInputPresets>('u:RadioInput', { 
+    variants,
+    styles,
+  })
+
+  return <InputBase 
+    {...inputBaseProps}
+    disabled={disabled}
+    styles={{
+      ...variantStyles,
+      innerWrapper: [
+        variantStyles.innerWrapper,
+      ],
+    }}
+    debugName={debugName}
+  > 
+    {options?.map((item, idx) => (
+      <Option
+        debugName={debugName}
+        item={item}
+        key={idx}
+        disabled={disabled} 
+        styles={variantStyles}
+        selected={value === item.value}
+        onSelect={() => onValueChange(item.value)}
+        separator={idx < options.length - 1}
+      />
+    ))}
+  </InputBase>
+}

package/src/components/RadioInput/styles.ts

@@ -0,0 +1,14 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { IconLessInputBaseParts } from '../InputBase'
+
+type OptionParts = 'wrapper' | 'label' | 'indicator' | 'indicatorInner' | 'separator'
+type OptionStates = 'selected' | 'disabled' | 'selectedDisabled'
+
+type OptionComposition = `${OptionParts}:${OptionStates}` | OptionParts
+
+export type RadioInputComposition = IconLessInputBaseParts | `${IconLessInputBaseParts}:disabled` | `option${Capitalize<OptionComposition>}`
+
+const createRadioStyle =
+  createDefaultVariantFactory<RadioInputComposition>()
+
+export const RadioInputPresets = includePresets(style => createRadioStyle(() => ({ wrapper: style })))

package/src/components/Scroll/index.tsx

@@ -0,0 +1,29 @@
+/** @jsx jsx */
+import {
+  ElementType,
+  forwardRef,
+  ReactElement,
+  Ref,
+} from 'react'
+import { View, ViewProps } from '../View'
+
+export const ScrollCP = <T extends ElementType = 'div'>(
+  props: ViewProps<T>,
+  ref: Ref<any>,
+) => {
+
+  return (
+    <View
+      {...props}
+      ref={ref}
+      scroll
+    />
+
+  )
+}
+
+export * from './styles'
+
+export const Scroll = forwardRef(ScrollCP) as <T extends ElementType = 'div'>(
+  props: ViewProps<T>
+) => ReactElement

package/src/components/Scroll/styles.ts

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

package/src/components/Select/index.tsx

@@ -0,0 +1,438 @@
+import React, { useRef, forwardRef, useImperativeHandle } from 'react'
+import { FormTypes, useValidate, useState, TypeGuards, onUpdate } from '@codeleap/common'
+import _Select, { components, MenuListProps, MenuProps, MultiValueProps, NoticeProps } from 'react-select'
+import Async from 'react-select/async'
+import { useSelectStyles } from './styles'
+import { LoadingIndicatorProps, PlaceholderProps, SelectProps, TCustomOption } from './types'
+import { InputBase, selectInputBaseProps } from '../InputBase'
+import { Button } from '../Button'
+import { Text } from '../Text'
+import { View } from '../View'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { CSSInterpolation } from '@emotion/css'
+import { Icon } from '../Icon'
+
+export * from './styles'
+export * from './types'
+
+const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption) => JSX.Element }) => {
+  const { isSelected, optionsStyles, label, selectedIcon, component = null, itemProps = {}, isFocused } = props
+
+  const styles = optionsStyles({ isSelected, isFocused, baseStyles: (itemProps?.styles ?? {}) })
+
+  let _Component = null
+
+  if (TypeGuards.isNil(component)) {
+    _Component = () => (
+      <Button
+        text={label}
+        // @ts-ignore
+        rightIcon={isSelected && selectedIcon}
+        {...itemProps}
+        styles={styles}
+      />
+    )
+  } else {
+    _Component = component
+  }
+
+  return (
+    <components.Option {...props}>
+      <_Component {...props} styles={styles} />
+    </components.Option>
+  )
+}
+
+const CustomMenu = (props: MenuProps & { Footer: () => JSX.Element }) => {
+  const { Footer, children } = props
+
+  return <>
+    <components.Menu {...props}>
+      {children}
+      {!!Footer && <Footer />}
+    </components.Menu>
+  </>
+}
+
+const CustomMenuList = (props: MenuListProps & { defaultStyles: { wrapper: React.CSSProperties } }) => {
+  const { children, defaultStyles } = props
+
+  return (
+    <components.MenuList {...props}>
+      <View style={defaultStyles.wrapper}>
+        {children}
+      </View>
+    </components.MenuList>
+  )
+}
+
+const DefaultPlaceholder = (props: PlaceholderProps) => {
+  const { text: TextPlaceholder, defaultStyles, icon: IconPlaceholder } = props
+
+  const _Text = () => {
+    if (TypeGuards.isNil(TextPlaceholder)) return null
+
+    if (TypeGuards.isString(TextPlaceholder)) {
+      return <Text text={TextPlaceholder} css={[defaultStyles.text]} />
+    } else if (React.isValidElement(TextPlaceholder)) {
+      return TextPlaceholder
+    } else {
+      return <TextPlaceholder {...props} />
+    }
+  }
+
+  const _Image = () => {
+    if (TypeGuards.isNil(IconPlaceholder)) return null
+
+    if (TypeGuards.isString(IconPlaceholder)) {
+      return <Icon name={TextPlaceholder as any} forceStyle={defaultStyles.icon} />
+    } else if (React.isValidElement(IconPlaceholder)) {
+      // @ts-ignore
+      return <View style={defaultStyles.icon}>
+        { IconPlaceholder}
+      </View>
+    } else {
+      return <IconPlaceholder {...props} />
+    }
+  }
+
+  return (
+    <View css={[defaultStyles.wrapper]}>
+      <_Image />
+      <_Text />
+    </View>
+  )
+}
+
+const LoadingIndicator = (props: LoadingIndicatorProps) => {
+  const { defaultStyles, size } = props
+
+  return (
+    <View css={[defaultStyles.wrapper]}>
+      <ActivityIndicator size={size} />
+    </View>
+  )
+}
+
+const getMultiValue = (values: { label: string }[], separator: string, state: { searchable: boolean }) => {
+  let value = ''
+  const hasMulti = values?.length > 1
+
+  values.forEach(({ label }, i) => {
+    const isLast = values?.length - 1 === i
+    const txt = (hasMulti && separator)
+      ? label + (isLast && !state?.searchable ? '' : separator)
+      : label
+
+    value = value + txt
+  })
+
+  return value
+}
+
+const CustomMultiValue = (props: MultiValueProps & { defaultStyles: { text: CSSInterpolation }; separator: string }) => {
+  const { selectProps, index, defaultStyles, separator } = props
+
+  const searchable = selectProps?.isSearchable
+
+  if (index !== 0 || selectProps.inputValue.length > 0) return null
+
+  // @ts-ignore
+  const text = getMultiValue(selectProps?.value, separator, { searchable })
+
+  return <Text text={text} css={[defaultStyles.text]} />
+}
+
+const defaultFormatPlaceholderNoItems = (props: PlaceholderProps & { text: string }) => {
+  return props.text + `"${props.selectProps.inputValue}"`
+}
+
+const defaultProps: Partial<SelectProps> = {
+  PlaceholderComponent: DefaultPlaceholder,
+  PlaceholderNoItemsComponent: DefaultPlaceholder,
+  LoadingIndicatorComponent: LoadingIndicator,
+  noItemsText: 'No results for ',
+  noItemsIcon: 'placeholderNoItems-select',
+  placeholderText: 'Search items',
+  placeholderIcon: 'placeholder-select',
+  showDropdownIcon: true,
+  placeholder: 'Select',
+  clearable: false,
+  formatPlaceholderNoItems: defaultFormatPlaceholderNoItems,
+  selectedIcon: 'checkmark',
+  searchable: false,
+  separatorMultiValue: ', ',
+  itemProps: {},
+  loadingIndicatorSize: 20,
+  options: [],
+}
+
+export const Select = forwardRef<HTMLInputElement, SelectProps>(
+  <T extends string | number = string, Multi extends boolean = false>
+  (props: SelectProps<T, Multi>, inputRef: React.ForwardedRef<HTMLInputElement>) => {
+
+  type Option = FormTypes.Option<T>
+
+  const {
+    inputBaseProps,
+    others: selectProps,
+  } = selectInputBaseProps({
+    ...Select.defaultProps,
+    ...props,
+  })
+
+  const {
+    variants,
+    validate,
+    styles,
+    debugName,
+    onValueChange,
+    options,
+    value,
+    loadOptions,
+    multiple,
+    limit = null,
+    focused,
+    _error,
+    renderItem: OptionComponent = null,
+    FooterComponent = null,
+    PlaceholderComponent,
+    PlaceholderNoItemsComponent,
+    LoadingIndicatorComponent,
+    noItemsText,
+    noItemsIcon,
+    placeholderText,
+    placeholderIcon,
+    showDropdownIcon,
+    placeholder,
+    clearable,
+    formatPlaceholderNoItems,
+    closeOnSelect = !multiple,
+    selectedIcon,
+    onLoadOptionsError,
+    loadOptionsOnMount = options?.length === 0,
+    searchable,
+    separatorMultiValue,
+    filterItems = null,
+    itemProps = {},
+    loadingIndicatorSize,
+    ...otherProps
+  } = selectProps
+
+  const innerInputRef = useRef<any>(null)
+  const innerWrapperRef = useRef(null)
+
+  const [selectedOption, setSelectedOption] = useState(value)
+
+  const [_isFocused, setIsFocused] = useState(false)
+
+  const [keyDownActive, setKeyDownActive] = useState(false)
+
+  const isFocused = _isFocused || focused
+
+  // @ts-ignore
+  const validation = useValidate(value, validate)
+
+  const isDisabled = !!inputBaseProps.disabled
+
+  const hasError = !validation.isValid || _error
+  const errorMessage = validation.message || _error
+
+  const {
+    reactSelectStyles,
+    variantStyles,
+    optionsStyles,
+    placeholderStyles,
+    loadingStyles,
+    inputMultiValueStyles,
+    menuWrapperStyles,
+  } = useSelectStyles(props, {
+    error: !!hasError,
+    focused: isFocused,
+    disabled: isDisabled,
+  })
+
+  useImperativeHandle(inputRef, () => {
+    return {
+      ...innerInputRef.current,
+      focus: () => {
+        innerInputRef.current?.focus?.()
+      },
+    }
+  }, [!!innerInputRef?.current?.focus])
+
+  const onLoadOptions = async (inputValue, cb) => {
+    if (!!loadOptions) {
+      try {
+        const _options = await loadOptions(inputValue).then((options) => {
+          cb(options)
+          return options
+        })
+
+        return _options
+      } catch (err) {
+        onLoadOptionsError?.(err)
+      }
+
+      return
+    }
+  }
+
+  const handleChange = (opt: Multi extends true ? Option[] : Option) => {
+    if (TypeGuards.isArray(opt)) {
+      // @ts-ignore
+      if (TypeGuards.isNumber(limit) && opt?.length > limit && opt?.length > selectedOption?.length) {
+        return
+      }
+      // @ts-ignore
+      setSelectedOption(opt)
+      // @ts-ignore
+      onValueChange?.(opt?.map((o) => o?.value))
+    } else {
+      // @ts-ignore
+      setSelectedOption(opt)
+      // @ts-ignore
+      onValueChange?.(opt?.value)
+    }
+  }
+
+  const handleBlur: SelectProps['onBlur'] = React.useCallback((e) => {
+    validation?.onInputBlurred()
+    setIsFocused(false)
+    props?.onBlur?.(e)
+  }, [validation?.onInputBlurred, props?.onBlur])
+
+  const handleFocus: SelectProps['onFocus'] = React.useCallback((e) => {
+    validation?.onInputFocused()
+    setIsFocused(true)
+    props?.onFocus?.(e)
+  }, [validation?.onInputFocused, props?.onFocus])
+
+  const SelectComponent = !!loadOptions ? Async : _Select
+
+  const componentProps = {
+    focused: isFocused,
+    error: !!hasError,
+    disabled: isDisabled,
+    variantStyles,
+  }
+
+  const _Placeholder = (props: NoticeProps) => {
+    const hasInputValue = !!props.selectProps.inputValue
+    const styles = placeholderStyles[hasInputValue ? 'noItems' : 'empty']
+    const icon = hasInputValue ? noItemsIcon : placeholderIcon
+
+    const placeholderProps = {
+      ...props,
+      ...componentProps,
+      icon,
+      defaultStyles: styles,
+    }
+
+    if (!hasInputValue) {
+      return <PlaceholderComponent {...placeholderProps} text={placeholderText} />
+    } else {
+      const _Text = TypeGuards.isString(noItemsText) ? formatPlaceholderNoItems({ ...placeholderProps, text: noItemsText }) : noItemsText
+      return <PlaceholderNoItemsComponent {...placeholderProps} text={_Text} />
+    }
+  }
+
+  const _props = {
+    ...(!filterItems ? {} : { filterOption: filterItems }),
+  }
+
+  onUpdate(() => {
+    if (!_isFocused) {
+      setKeyDownActive(false)
+    }
+  }, [_isFocused])
+
+  const handleKeyDown = () => {
+    setKeyDownActive(true)
+  }
+
+  return (
+    <InputBase
+      {...inputBaseProps}
+      debugName={debugName}
+      error={hasError ? errorMessage : null}
+      focused={isFocused}
+      styles={{
+        ...variantStyles,
+        innerWrapper: [
+          variantStyles.innerWrapper,
+          searchable && variantStyles['innerWrapper:searchable'],
+        ],
+      }}
+      innerWrapperProps={{
+        ...(inputBaseProps.innerWrapperProps || {}),
+        onClick: () => {
+          innerInputRef.current?.focus?.()
+        },
+      }}
+      innerWrapperRef={innerWrapperRef}
+    >
+      <SelectComponent
+        openMenuOnFocus={true}
+        hideSelectedOptions={false}
+        tabSelectsValue={false}
+        tabIndex={0}
+        {...otherProps}
+        {..._props}
+        onKeyDown={isFocused ? handleKeyDown : null}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        onChange={handleChange}
+        styles={reactSelectStyles}
+        value={selectedOption as any}
+        isMulti={multiple}
+        options={options}
+        loadOptions={onLoadOptions as any}
+        defaultOptions={loadOptionsOnMount}
+        ref={innerInputRef}
+        closeMenuOnSelect={closeOnSelect}
+        menuPortalTarget={innerWrapperRef.current}
+        placeholder={placeholder}
+        isDisabled={isDisabled}
+        isClearable={clearable}
+        isSearchable={searchable}
+        components={{
+          LoadingIndicator: () => null,
+          ...otherProps.components,
+          MultiValueRemove: () => null,
+          LoadingMessage: props => (
+            <LoadingIndicatorComponent
+              {...props}
+              defaultStyles={loadingStyles}
+              size={loadingIndicatorSize}
+            />
+          ),
+          DropdownIndicator: props => showDropdownIcon ? <components.DropdownIndicator {...props} /> : null,
+          NoOptionsMessage: props => <_Placeholder {...props} />,
+          Menu: props => <CustomMenu {...props} Footer={FooterComponent} />,
+          MenuList: props => <CustomMenuList {...props} defaultStyles={menuWrapperStyles} />,
+          Option: props => (
+            <DefaultOption
+              {...props}
+              {...componentProps}
+              itemProps={itemProps}
+              selectedIcon={selectedIcon}
+              optionsStyles={optionsStyles}
+              component={OptionComponent}
+              isFocused={props?.isFocused && keyDownActive}
+            />
+          ),
+          MultiValue: props => (
+            <CustomMultiValue
+              {...props}
+              separator={separatorMultiValue}
+              defaultStyles={inputMultiValueStyles}
+            />
+          ),
+        }}
+      />
+    </InputBase>
+  )
+  })
+
+Select.defaultProps = defaultProps