@codeleap/web 2.4.7 → 3.0.2

package/src/components/Drawer/index.tsx

@@ -0,0 +1,148 @@
+import {
+  AnyFunction,
+  ComponentVariants,
+  IconPlaceholder,
+  onUpdate,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { CSSObject } from '@emotion/react'
+import React, { ReactNode } from 'react'
+import { Overlay } from '../Overlay'
+import { View } from '../View'
+import { Text } from '../Text'
+import { Button } from '../Button'
+import { StylesOf } from '../../types/utility'
+import { DrawerComposition, DrawerPresets } from './styles'
+
+const axisMap = {
+  top: [-1, 'Y'],
+  bottom: [1, 'Y'],
+  left: [-1, 'X'],
+  right: [1, 'X'],
+} as const
+
+export type DrawerProps = React.PropsWithChildren<{
+  open: boolean
+  toggle: AnyFunction
+  darkenBackground?: boolean
+  size: string | number
+  showCloseButton?: boolean
+  title?: ReactNode
+  footer?: ReactNode
+  position?: keyof typeof axisMap
+  styles?: StylesOf<DrawerComposition>
+  animationDuration?: string
+} & ComponentVariants<typeof DrawerPresets>
+>
+const resolveHiddenDrawerPosition = (
+  position: DrawerProps['position'],
+): [string, string, CSSObject] => {
+  const [translateOrient, translateAxis] = axisMap[position]
+
+  const translateValues = {
+    X: 0,
+    Y: 0,
+  }
+
+  translateValues[translateAxis] = 100 * translateOrient
+
+  const css = `translate(${translateValues.X}%, ${translateValues.Y}%)`
+  const positioningKeys =
+    translateAxis === 'X' ? ['top', 'bottom'] : ['left', 'right']
+
+  const positioning = Object.fromEntries(positioningKeys.map((k) => [k, 0]))
+  return [css, translateAxis, positioning]
+}
+
+export const Drawer: React.FC<DrawerProps> = ({ ...rawProps }) => {
+  const {
+    open,
+    toggle,
+    children,
+    size,
+    title,
+    footer,
+    darkenBackground = true,
+    showCloseButton,
+    position = 'bottom',
+    variants = [],
+    responsiveVariants = {},
+    styles,
+    animationDuration = '0.3s',
+  } = rawProps
+
+  onUpdate(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = 'auto'
+    }
+  }, [open])
+
+  const [hiddenStyle, axis, positioning] =
+    resolveHiddenDrawerPosition(position)
+
+  const sizeProperty = axis === 'X' ? 'width' : 'height'
+  const fullProperty = sizeProperty === 'height' ? 'width' : 'height'
+
+  const variantStyles = useDefaultComponentStyle('Drawer', {
+    styles,
+    variants,
+    responsiveVariants,
+  })
+
+  return (
+    <View
+      css={{
+        ...variantStyles.wrapper,
+        transition: 'visibility 0.01s ease',
+        transitionDelay: open ? '0' : animationDuration,
+        visibility: open ? 'visible' : 'hidden',
+      }}
+    >
+      {darkenBackground && (
+        <Overlay
+          visible={open}
+          css={variantStyles.overlay}
+          onPress={() => toggle()}
+        />
+      )}
+      <View
+        variants={['fixed']}
+        css={{
+          transform: open ? `translate(0%, 0%)` : hiddenStyle,
+          transition: `transform ${animationDuration} ease`,
+          [sizeProperty]: size,
+          [fullProperty]: '100%',
+          ...positioning,
+          [position]: 0,
+          ...variantStyles.box,
+        }}
+      >
+        <View
+          component='header'
+          variants={['justifySpaceBetween']}
+          css={variantStyles.header}
+        >
+          {typeof title === 'string' ? <Text text={title} /> : title}
+          {showCloseButton && (
+            <Button
+              onPress={toggle}
+              icon={'close' as IconPlaceholder}
+              variants={['icon']}
+              css={variantStyles.headerCloseButton}
+            />
+          )}
+        </View>
+        <View css={variantStyles.body}>{children}</View>
+        {footer && (
+          <View component='footer' css={variantStyles.footer}>
+            {footer}
+          </View>
+        )}
+      </View>
+    </View>
+  )
+}
+
+export * from './styles'

package/src/components/Drawer/styles.ts

@@ -0,0 +1,8 @@
+import { createDefaultVariantFactory, includePresets } from "@codeleap/common";
+import { ModalComposition } from "../Modal";
+
+export type DrawerComposition = ModalComposition
+
+const createDrawerStyle = createDefaultVariantFactory<DrawerComposition>()
+
+export const DrawerPresets = includePresets((styles) => createDrawerStyle(() => ({ wrapper: styles })))

package/src/components/FileInput.tsx

@@ -0,0 +1,51 @@
+import React, {
+  ComponentPropsWithoutRef,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+import { WebInputFile } from '@codeleap/common'
+
+export type FileInputRef = {
+  openFilePicker: () => void
+}
+
+export type FileInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'type'> & {
+  onFileSelect(files: WebInputFile[]): void
+}
+
+export const FileInput = React.forwardRef<FileInputRef, FileInputProps>(
+  (inputProps, ref) => {
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    const { onFileSelect, ...props } = inputProps
+
+    useImperativeHandle(ref, () => ({
+      openFilePicker: () => {
+        inputRef.current.click()
+      },
+    }))
+
+    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+      if (!e.target.files.length) return
+      inputProps.onChange && inputProps.onChange(e)
+      const fileArray = Array.from(e.target?.files || []) as File[]
+
+      const files: WebInputFile[] = fileArray.map((obj) => ({
+        file: obj,
+        preview: URL.createObjectURL(obj),
+      }))
+
+      onFileSelect && onFileSelect(files)
+    }
+
+    return (
+      <input
+        type={'file'}
+        css={{ visibility: 'hidden', width: 0, height: 0, opacity: 0, display: 'none' }}
+        {...props}
+        ref={inputRef}
+        onChange={handleChange}
+      />
+    )
+  },
+)

package/src/components/Icon/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+/** @jsx jsx */
+import { CSSObject, jsx } from '@emotion/react'
+import {
+  ComponentVariants,
+  IconPlaceholder,
+  IconStyles,
+  useDefaultComponentStyle,
+  useCodeleapContext,
+} from '@codeleap/common'
+import { View, ViewProps } from '../View'
+import { CSSInterpolation } from '@emotion/css'
+
+export * from './styles'
+
+export type IconProps = {
+  name: IconPlaceholder
+  style?: any
+  renderEmptySpace?: boolean
+  css?: Array<React.CSSProperties>
+  forceStyle?: CSSObject | CSSInterpolation | React.CSSProperties
+} & ComponentVariants<typeof IconStyles>
+
+export const Icon: React.FC<IconProps> = ({ name, style, variants, renderEmptySpace, ...otherProps }) => {
+  const { Theme, logger } = useCodeleapContext()
+  const Component = Theme?.icons?.[name]
+
+  const variantStyles = useDefaultComponentStyle('Icon', {
+    variants,
+    styles: {
+      icon: style,
+    },
+    rootElement: 'icon',
+  })
+
+  if (!name) {
+    const iconStyle = variantStyles.icon
+    return renderEmptySpace ? <View css={{
+      height: iconStyle.size ?? iconStyle.height,
+      width: iconStyle.size ?? iconStyle.width,
+    }}/> : null
+  }
+
+  if (!Component) {
+    logger.warn(
+      `Icon: No icon found in theme for name "${name}".`,
+      { props: { style, name, variants, variantStyles }},
+      'Component',
+    )
+    return null
+  }
+  return <Component css={variantStyles.icon} {...otherProps}/>
+}

package/src/components/Icon/styles.ts

@@ -0,0 +1,9 @@
+import { createDefaultVariantFactory, includePresets } from "@codeleap/common"
+
+export type IconComposition = 'icon'
+
+const createIconStyle = createDefaultVariantFactory<IconComposition>()
+
+export const IconPresets = includePresets((styles) =>
+  createIconStyle(() => ({ icon: styles }))
+)

package/src/components/InputBase/index.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { TypeGuards, getRenderedComponent } from '@codeleap/common'
+import { ActionIcon, ActionIconProps } from '../ActionIcon'
+import { View } from '../View'
+import { useInputBaseStyles } from './styles'
+import { InputBaseProps } from './types'
+import { Text } from '../Text'
+
+export * from './styles'
+export * from './utils'
+export * from './types'
+
+export const InputBaseDefaultOrder:InputBaseProps['order'] = [
+  'label',
+  'description',
+  'innerWrapper',
+  'error',
+]
+const KeyPassthrough = (props: React.PropsWithChildren<any>) => {
+  return <>{props.children}</>
+}
+
+export const InputBase = React.forwardRef<unknown, InputBaseProps>((props, ref) => {
+  const {
+    children,
+    error = null,
+    label,
+    description = null,
+    leftIcon = null,
+    rightIcon = null,
+    styles,
+    wrapper,
+    debugName,
+    innerWrapper,
+    focused,
+    innerWrapperProps = {},
+    wrapperProps = {},
+    disabled = false,
+    order = InputBaseDefaultOrder,
+    style,
+    labelAsRow = false,
+    innerWrapperRef,
+    ...otherProps
+  } = props
+
+  const WrapperComponent = wrapper || View
+  const InnerWrapperComponent = innerWrapper || View
+
+  const _styles = useInputBaseStyles(props)
+
+  const _leftIcon = getRenderedComponent<Partial<ActionIconProps>>(leftIcon, ActionIcon, {
+    // @ts-ignore
+    styles: _styles.leftIconStyles,
+    disabled,
+    debugName: `${debugName} left icon`,
+  })
+
+  const _rightIcon = getRenderedComponent<Partial<ActionIconProps>>(rightIcon, ActionIcon, {
+    // @ts-ignore
+    styles: _styles.rightIconStyles,
+    disabled,
+    debugName: `${debugName} right icon`,
+  })
+
+  const _label = TypeGuards.isString(label) ? <Text text={label} css={_styles.labelStyle}/> : label
+
+  const _error = TypeGuards.isString(error) ? <Text text={error} css={_styles.errorStyle}/> : error
+
+  const _description = TypeGuards.isString(description) ? <Text text={description} css={_styles.descriptionStyle}/> : description
+
+  const parts = {
+    label: labelAsRow ? <View css={_styles.labelRowStyle}>
+      {_label}
+      {_description}
+    </View> : _label,
+    description: labelAsRow ? null : _description,
+    innerWrapper: <InnerWrapperComponent ref={innerWrapperRef} css={[
+      _styles.innerWrapperStyle,
+    ]} {...innerWrapperProps}>
+      {_leftIcon}
+      {children}
+      {_rightIcon}
+    </InnerWrapperComponent>,
+    error: _error || <Text children={<>
+      &nbsp;
+    </>} css={_styles.errorStyle}/>,
+  }
+
+  return (
+    <WrapperComponent
+      css={[_styles.wrapperStyle, style]}
+      {...otherProps}
+      {...wrapperProps}
+    >
+      {
+        order.map((key) => (
+          <KeyPassthrough key={key}>
+            {parts[key]}
+          </KeyPassthrough>
+        ))
+      }
+    </WrapperComponent>
+  )
+})

package/src/components/InputBase/styles.ts

@@ -0,0 +1,167 @@
+import { TypeGuards, createDefaultVariantFactory, getRenderedComponent, includePresets, useDefaultComponentStyle, useMemo, useNestedStylesByKey } from '@codeleap/common'
+import { ActionIconComposition, ActionIconParts } from '../ActionIcon'
+import { InputBaseProps } from './types'
+
+type InputIcons = 'icon' | 'leftIcon' | 'rightIcon'
+
+type IconParts = ActionIconParts
+
+export type InputIconComposition = `${InputIcons}${Capitalize<IconParts>}`
+
+export type InputBaseStates = 'error' | 'focus' | 'disabled'
+
+export type InputBaseParts =
+  'wrapper' |
+  'innerWrapper' |
+  'label' |
+  'errorMessage' |
+  'description' |
+  'labelRow'|
+  InputIconComposition
+
+export type IconLessInputBaseParts = Exclude<InputBaseParts, InputIconComposition>
+
+export type InputBaseComposition = `${InputBaseParts}:${InputBaseStates}` | InputBaseParts
+
+const createTextInputBaseComposition = createDefaultVariantFactory<InputBaseComposition>()
+
+export const InputBasePresets = includePresets((styles) => createTextInputBaseComposition(() => ({ wrapper: styles })))
+
+const getIconStyles = (obj, state) => {
+  return {
+    icon: {
+      ...obj.icon,
+      ...(state.focused && obj['icon:focus']),
+      ...(state.hasError && obj['icon:error']),
+      ...(state.disabled && obj['icon:disabled']),
+    },
+    wrapper: {
+      ...obj.touchableWrapper,
+      ...(state.focused && obj['touchableWrapper:focus']),
+      ...(state.hasError && obj['touchableWrapper:error']),
+      ...(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 useInputBaseStyles = (props: InputBaseProps) => {
+  const {
+    focused,
+    disabled,
+    error,
+    styles,
+  } = props
+
+  const hasError = !TypeGuards.isNil(error)
+
+  const variantStyles = useDefaultComponentStyle<'u:InputBase', typeof InputBasePresets>('u:InputBase', {
+    rootElement: 'wrapper',
+    styles,
+  })
+
+  const _leftIconStyles = useNestedStylesByKey<ActionIconComposition>('leftIcon', variantStyles)
+  const _rightIconStyles = useNestedStylesByKey<ActionIconComposition>('rightIcon', variantStyles)
+  const _generalIconStyles = useNestedStylesByKey<ActionIconComposition>('icon', variantStyles)
+
+  const generalIconStyles = getIconStyles(_generalIconStyles, { hasError, disabled, focused })
+  const leftIconStylesCompose = getIconStyles(_leftIconStyles, { 
+    hasError, 
+    disabled: disabled || props?.leftIcon?.disabled, 
+    focused 
+  })
+  const rightIconStylesCompose = getIconStyles(_rightIconStyles, { 
+    hasError, 
+    disabled: disabled || props?.rightIcon?.disabled,
+    focused 
+  })
+
+  const leftIconStyles = {
+    icon: {
+      ...generalIconStyles.icon,
+      ...leftIconStylesCompose.icon,
+    },
+    wrapper: {
+      ...generalIconStyles.wrapper,
+      ...leftIconStylesCompose.wrapper,
+    },
+  }
+
+  const rightIconStyles = {
+    icon: {
+      ...generalIconStyles.icon,
+      ...rightIconStylesCompose.icon,
+    },
+    wrapper: {
+      ...generalIconStyles.wrapper,
+      ...rightIconStylesCompose.wrapper,
+    },
+  }
+
+  const labelStyle = [
+    variantStyles.label,
+    focused && variantStyles['label:focus'],
+    hasError && variantStyles['label:error'],
+    disabled && variantStyles['label:disabled'],
+  ]
+
+  const errorStyle = [
+    variantStyles.errorMessage,
+    focused && variantStyles['errorMessage:focus'],
+    hasError && variantStyles['errorMessage:error'],
+    disabled && variantStyles['errorMessage:disabled'],
+  ]
+
+  const descriptionStyle = [
+    variantStyles.description,
+    focused && variantStyles['description:focus'],
+    hasError && variantStyles['description:error'],
+    disabled && variantStyles['description:disabled'],
+  ]
+
+  const wrapperStyle = [
+    variantStyles.wrapper,
+    focused && variantStyles['wrapper:focus'],
+    error && variantStyles['wrapper:error'],
+    disabled && variantStyles['wrapper:disabled'],
+  ]
+
+  const innerWrapperStyle = [
+    concatStyles(variantStyles.innerWrapper),
+    focused && variantStyles['innerWrapper:focus'],
+    hasError && variantStyles['innerWrapper:error'],
+    disabled && variantStyles['innerWrapper:disabled'],
+  ]
+
+  const labelRowStyle = [
+    variantStyles.labelRow,
+    focused && variantStyles['labelRow:focus'],
+    hasError && variantStyles['labelRow:error'],
+    disabled && variantStyles['labelRow:disabled'],
+  ]
+
+  return {
+    wrapperStyle,
+    innerWrapperStyle,
+    leftIconStyles,
+    rightIconStyles,
+    labelStyle,
+    errorStyle,
+    descriptionStyle,
+    labelRowStyle,
+  }
+}

package/src/components/InputBase/types.ts

@@ -0,0 +1,28 @@
+import { PropsOf } from '@codeleap/common'
+import { StylesOf } from '../../types'
+import { InputBaseComposition } from './styles'
+import { ActionIcon } from '../ActionIcon'
+
+type ActionIconProps = PropsOf<typeof 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
+  styles?: StylesOf<InputBaseComposition>
+  description?: React.ReactNode
+  debugName: string
+  focused?: boolean
+  disabled?: boolean
+  order?: OrderedParts[]
+  style?: any
+  labelAsRow?: boolean
+  innerWrapperRef?: React.MutableRefObject<HTMLDivElement | null>
+}>

package/src/components/InputBase/utils.ts

@@ -0,0 +1,41 @@
+import { InputBaseProps } from './types'
+
+type OmitDiff<T1, T2> = {
+  [K in Exclude<keyof T1, keyof T2>]: T1[K]
+} & {
+  [K in keyof T2]: T2[K]
+}
+
+type InputBaseKey = keyof InputBaseProps
+
+export function selectInputBaseProps<T extends InputBaseProps>(props: T): {
+  inputBaseProps: InputBaseProps
+  others: OmitDiff<T, T>
+} {
+  const varList:InputBaseKey[] = [
+    'label',
+
+    'error',
+    'innerWrapper',
+    'leftIcon',
+    'rightIcon',
+    // 'styles',
+    '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> }
+}

package/src/components/Link/index.tsx

@@ -0,0 +1,69 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import { ComponentVariants, useCodeleapContext, useDefaultComponentStyle } from '@codeleap/common'
+import { ElementType } from 'react'
+import { scrollToElem } from '../../lib/utils/pollyfils/scroll'
+import { stopPropagation } from '../../lib/utils/stopPropagation'
+import { Text, TextProps } from '../Text'
+import { LinkComposition, LinkPresets } from './styles'
+import { StylesOf } from '../..'
+
+export type LinkProps<T extends ElementType> = TextProps<T> & {
+  openNewTab?: boolean
+  onScroll?: (to: string) => any
+  styles?: StylesOf<LinkComposition>
+} & ComponentVariants<typeof LinkPresets>
+
+export const Link = <T extends ElementType = 'a'>(linkProps: LinkProps<T>) => {
+  const { to, openNewTab, component = 'a', onScroll = null, responsiveVariants, variants, styles, ...props } = linkProps
+
+  const isExternal = ['http', 'tel', 'mailto'].some((start) => to.startsWith(start),
+  )
+
+  const Component = isExternal ? 'a' : component
+  const { logger } = useCodeleapContext()
+
+  function handleClick(event: React.MouseEvent) {
+    logger.log('Link pressed', { to, text: linkProps.text }, 'Component')
+    if (to) {
+      if (to.startsWith('#')) {
+        event.preventDefault()
+        stopPropagation(event)
+        if (onScroll) {
+          onScroll(to)
+          return
+        }
+        scrollToElem(to)
+      }
+      if (openNewTab) {
+        event.preventDefault()
+        window?.open?.(to, '_blank')
+        return false
+      }
+    }
+  }
+
+  const linkPropOverride = {
+    [isExternal ? 'href' : 'to']: to,
+  }
+
+  const variantStyles = useDefaultComponentStyle<'u:Link', typeof LinkPresets>('u:Link', {
+    responsiveVariants,
+    variants,
+    rootElement: 'text',
+    styles,
+    
+  })
+
+  return (
+    <Text
+      component={Component}
+      {...props}
+      {...linkPropOverride}
+      style={variantStyles.text}
+      onClick={handleClick}
+    />
+  )
+}
+
+export * from './styles'

package/src/components/Link/styles.ts

@@ -0,0 +1,11 @@
+import { createDefaultVariantFactory, includePresets } from "@codeleap/common"
+import { TextComposition } from "../Text"
+
+
+export type LinkComposition = TextComposition
+
+
+
+const createLinkStyle = createDefaultVariantFactory<LinkComposition>()
+
+export const LinkPresets = includePresets((styles) => createLinkStyle(() => ({ text: styles })))