@codeleap/web 2.4.6 → 3.0.2

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@codeleap/web",
-  "version": "2.4.6",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "version": "3.0.2",
+  "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
     "type": "git",
@@ -11,37 +10,39 @@
   "license": "UNLICENSED",
   "devDependencies": {
     "@codeleap/config": "*",
-    "@emotion/react": "11.9.0",
-    "@types/react-dom": "17.0.11",
-    "@types/react-window": "1.8.5",
-    "@emotion/css": "^11.7.1",
-    "@codeleap/common": "*",
-    "@reach/router": "^1.3.4",
-    "react-helmet": "^6.1.0",
-    "gatsby": "^4.4.0"
+    "@emotion/react": "11.10.6",
+    "@types/react-window": "1.8.5"
   },
   "scripts": {
-    "build": "tsc --build",
+    "build": "rm -rf ./dist && tsc --build",
     "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
   },
   "dependencies": {
+    "@radix-ui/react-slider": "1.1.1",
+    "framer-motion": "^10.10.0",
+    "js-cookie": "^3.0.1",
     "rc-slider": "^9.7.5",
     "react-autosize-textarea": "^7.1.0",
+    "react-number-format": "^5.2.1",
+    "react-input-mask": "^2.0.4",
     "react-toastify": "^8.2.0",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "1.8.5",
-    "url-parse": "^1.5.4",
+    "url-parse": "^1.5.10",
     "uuid": "^8.3.2",
-    "js-cookie": "^3.0.1"
+    "react-select": "^5.7.3"
   },
   "peerDependencies": {
     "@codeleap/common": "*",
-    "@emotion/css": "^11.7.1",
-    "@emotion/react": "^11.7.1",
+    "@emotion/css": "11.9.0",
+    "@emotion/react": "11.10.6",
     "@reach/router": "^1.3.4",
-    "axios": "^0.24.0",
+    "axios": "^1.1.3",
     "gatsby-plugin-intl": "^0.3.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-helmet": "^6.1.0",
+    "react-select": "*",
+    "typescript": "4.5.4"
   }
 }

package/src/components/ActionIcon/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { ComponentVariants, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+import { StylesOf } from '../../types'
+import { Icon, IconProps } from '../Icon'
+import { Touchable, TouchableProps } from '../Touchable'
+import { View } from '../View'
+import { ActionIconComposition, ActionIconPresets } from './styles'
+
+export type ActionIconProps = {
+    disabled?: boolean
+    iconProps?: Partial<IconProps>
+    icon?: IconProps['name']
+    name?: IconProps['name']
+    styles?: StylesOf<ActionIconComposition>
+} & Omit<TouchableProps, 'styles' | 'variants'> & ComponentVariants<typeof ActionIconPresets>
+
+export const ActionIcon:React.FC<ActionIconProps> = (props) => {
+  const { icon, name, iconProps, onPress, variants, styles, children, disabled, ...touchableProps } = props
+  
+  const variantStyles = useDefaultComponentStyle<'u:ActionIcon', typeof ActionIconPresets>('u:ActionIcon', {
+    variants, 
+    styles
+  })
+
+  const isPressable = TypeGuards.isFunction(onPress) && !disabled
+
+  const WrapperComponent: any = isPressable ? Touchable : View
+
+  const handlePress = () => {
+    if (!isPressable) return
+
+    if (onPress) onPress?.()
+  }
+  
+  return (
+    <WrapperComponent 
+      onPress={handlePress}
+      css={[
+        variantStyles.wrapper,
+        disabled && variantStyles['wrapper:disabled'],
+        isPressable && variantStyles['wrapper:cursor']
+      ]}
+      disabled={disabled}
+      {...touchableProps}
+    >
+      <Icon 
+        name={icon ?? name} 
+        css={[
+          variantStyles.icon,
+          disabled && variantStyles['icon:disabled'],
+        ]}
+        {...iconProps}
+      />
+      {children}
+    </WrapperComponent>
+  )
+}
+
+export * from './styles'

package/src/components/ActionIcon/styles.ts

@@ -0,0 +1,9 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { TouchableComposition } from '../Touchable'
+
+export type ActionIconParts = 'icon' | TouchableComposition
+export type ActionIconStates = ':disabled' | ':cursor' | ''
+export type ActionIconComposition = `${ActionIconParts}${ActionIconStates}`
+const createActionIconStyle = createDefaultVariantFactory<ActionIconComposition>()
+
+export const ActionIconPresets = includePresets((style) => createActionIconStyle(() => ({ wrapper: style })))

package/src/components/ActivityIndicator/index.tsx

@@ -0,0 +1,78 @@
+import { View } from '../View'
+import { CSSObject, keyframes } from '@emotion/react'
+import {
+  useDefaultComponentStyle,
+  ComponentVariants,
+  ActivityIndicatorStyles,
+  ActivityIndicatorComposition,
+  TypeGuards,
+} from '@codeleap/common'
+import { StylesOf } from '../../types/utility'
+import { ActivityIndicatorPresets } from './styles'
+
+export * from './styles'
+
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to { 
+    transform: rotate(360deg);
+  }
+`
+
+export type ActivityIndicatorProps = {
+  animating?: boolean
+  hidesWhenStopped?: boolean
+  styles?: StylesOf<ActivityIndicatorComposition>
+  css?: CSSObject
+  size?: number
+} & ComponentVariants<typeof ActivityIndicatorStyles>
+
+export const ActivityIndicator: React.FC<ActivityIndicatorProps> = (props) => {
+  const {
+    animating = true,
+    hidesWhenStopped = true,
+    variants,
+    responsiveVariants,
+    styles,
+    size = null,
+    ...viewProps
+  } = props
+
+  const variantStyles = useDefaultComponentStyle<'u:ActivityIndicator', typeof ActivityIndicatorPresets>(
+    'u:ActivityIndicator',
+    {
+      styles,
+      responsiveVariants,
+      variants,
+    }
+  )
+
+  const _size = TypeGuards.isNumber(size) && {
+    height: size,
+    width: size,
+    borderWidth: size * 0.25,
+  }
+
+  return (
+    <View
+      {...viewProps}
+      css={[
+        variantStyles.wrapper,
+        (!animating && hidesWhenStopped) && { visibility: 'hidden' },
+        _size,
+      ]}
+    >
+      <View css={{ ...variantStyles.circle, ...variantStyles.backCircle }} />
+      <View
+        css={{
+          ...variantStyles.circle,
+          ...variantStyles.frontCircle,
+          animation: `${spin} 1s infinite`,
+          animationPlayState: animating ? 'running' : 'paused',
+        }}
+      />
+    </View>
+  )
+}

package/src/components/ActivityIndicator/styles.ts

@@ -0,0 +1,11 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type ActivityIndicatorComposition =
+  | 'wrapper'
+  | 'backCircle'
+  | 'frontCircle'
+  | 'circle'
+
+const createActivityIndicatorStyle = createDefaultVariantFactory<ActivityIndicatorComposition>()
+
+export const ActivityIndicatorPresets = includePresets((styles) => createActivityIndicatorStyle(() => ({ wrapper: styles })))

package/src/components/Button/index.tsx

@@ -0,0 +1,125 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import {
+  useDefaultComponentStyle,
+  ButtonStyles,
+  ComponentVariants,
+  ButtonComposition,
+  ButtonParts,
+  optionalObject,
+  AnyFunction,
+} from '@codeleap/common'
+import React, { ComponentPropsWithRef } from 'react'
+import { StylesOf } from '../../types/utility'
+import { Text } from '../Text'
+import { Touchable, TouchableProps } from '../Touchable'
+import { Icon } from '../Icon'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { IconPlaceholder, useNestedStylesByKey } from '@codeleap/common'
+import { LoadingOverlay } from '../LoadingOverlay'
+
+type NativeButtonProps = ComponentPropsWithRef<'button'>
+
+export type ButtonProps = NativeButtonProps &
+  ComponentVariants<typeof ButtonStyles> & {
+    text?: string
+    rightIcon?: IconPlaceholder
+    icon?: IconPlaceholder
+    onPress?: AnyFunction
+    styles?: StylesOf<ButtonComposition>
+    loading?: boolean
+    debugName?: string
+    debounce?: number
+  } & Partial<TouchableProps<any>>
+
+export const Button: React.FC<ButtonProps> = (buttonProps) => {
+  const {
+    variants = [],
+    responsiveVariants = {},
+    children,
+    icon,
+    text,
+    loading,
+    styles,
+    onPress,
+    disabled,
+    rightIcon,
+    debounce = 600,
+    ...props
+  } = buttonProps
+  const [pressed, setPressed] = React.useState(false)
+  const variantStyles = useDefaultComponentStyle('Button', {
+    responsiveVariants,
+    variants,
+    styles,
+  })
+
+  function handlePress(e: Parameters<ButtonProps['onPress']>[0]) {
+    if (!pressed) {
+      props?.onClick?.(e)
+
+      setPressed(true)
+
+      setTimeout(() => setPressed(false), debounce)
+
+      onPress && onPress()
+    }
+  }
+
+  function getStyles(key:ButtonParts) {
+
+    return {
+      ...variantStyles[key],
+      ...optionalObject(disabled, variantStyles[key + ':disabled'], {}),
+    }
+  }
+  const iconStyle = getStyles('icon')
+
+  const loaderStyle = useNestedStylesByKey('loading', variantStyles)
+
+  return (
+    <Touchable
+      css={getStyles('wrapper')}
+      component='button'
+      debugComponent='Button'
+
+      onPress={handlePress}
+      {...props}
+    >
+      <LoadingOverlay
+        visible={loading}
+        styles={loaderStyle}
+
+      />
+      {!loading && (
+        <Icon
+          name={icon}
+          style={{ ...iconStyle, ...getStyles('leftIcon') }}
+
+        />
+      )}
+      {children || (
+        <Text
+          text={text}
+          styles={{
+            text: getStyles('text'),
+          }}
+        />
+      )}
+
+      <Icon
+        name={rightIcon}
+        style={{ ...iconStyle, ...getStyles('rightIcon') }}
+
+      />
+      {loading && <ActivityIndicator styles={{
+        'wrapper': getStyles('loaderWrapper'),
+        'backCircle': getStyles('loaderBackCircle'),
+        'frontCircle': getStyles('loaderFrontCircle'),
+        'circle': getStyles('loaderCircle'),
+      }} css={getStyles('loader')}/>}
+    </Touchable>
+  )
+}
+
+export * from './styles'

package/src/components/Button/styles.ts

@@ -0,0 +1,22 @@
+import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
+import { LoadingOverlayComposition } from '../LoadingOverlay'
+
+export type ButtonStates = 'disabled'
+export type ButtonParts =
+| 'text'
+| 'inner'
+| 'wrapper'
+| 'icon'
+| 'leftIcon'
+| 'rightIcon'
+| `loading${Capitalize<LoadingOverlayComposition>}`
+| 'badgeText'
+| 'badgeWrapper'
+
+export type ButtonComposition = `${ButtonParts}:${ButtonStates}` | ButtonParts
+
+
+
+const createButtonStyle = createDefaultVariantFactory<ButtonComposition>()
+
+export const ButtonPresets = includePresets((styles) => createButtonStyle(() => ({ wrapper: styles })))

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,138 @@
+import * as React from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  StylesOf,
+  PropsOf,
+} from '@codeleap/common'
+import { View } from '../View'
+import { CheckboxPresets, CheckboxComposition } from './styles'
+import { InputBase, InputBaseDefaultOrder, InputBaseProps, selectInputBaseProps } from '../InputBase'
+import { useAnimatedVariantStyles } from '../..'
+import { Icon } from '../Icon'
+import { motion } from 'framer-motion'
+
+export * from './styles'
+  
+export type CheckboxProps = Pick<
+  InputBaseProps,
+  'debugName' | 'disabled' | 'label'
+> &  {
+  variants?: ComponentVariants<typeof CheckboxPresets>['variants']
+  styles?: StylesOf<CheckboxComposition>
+  value: boolean
+  onValueChange: (value: boolean) => void
+  style?: PropsOf<typeof View>['style']
+  checkboxOnLeft?: boolean
+}
+
+const reversedOrder = [...InputBaseDefaultOrder].reverse()
+
+export const Checkbox = (props: CheckboxProps) => {
+    const {
+      inputBaseProps,
+      others
+    } = selectInputBaseProps(props)
+
+    const {
+      variants = [],
+      style = {},
+      styles = {},
+      value,
+      disabled,
+      debugName,
+      onValueChange,
+      checkboxOnLeft,
+    } = others
+
+    const variantStyles = useDefaultComponentStyle<'u:Checkbox', typeof CheckboxPresets>('u:Checkbox', {
+      variants,
+      styles, 
+      rootElement: 'wrapper',
+    })
+    
+    const boxAnimation = useAnimatedVariantStyles({
+      variantStyles,
+      animatedProperties: ['box:unchecked','box:disabled', 'box:checked', 'box:disabled-checked', 'box:disabled-unchecked'],
+      updater: () =>{
+        'worklet'
+        let disabledStyle = {}
+        if(disabled){
+          disabledStyle =  value ? variantStyles['box:disabled-checked'] : variantStyles['box:disabled-unchecked']
+        }
+        const style =  value ? variantStyles['box:checked'] : variantStyles['box:unchecked']
+
+        return {
+          ...style,
+          ...disabledStyle
+        }
+        
+      },
+      dependencies: [value, disabled],
+    })
+
+    const checkmarkWrapperAnimation = useAnimatedVariantStyles({
+      variantStyles,
+      animatedProperties: ['checkmarkWrapper:unchecked','checkmarkWrapper:disabled', 'checkmarkWrapper:checked', 'checkmarkWrapper:disabled-unchecked', 'checkmarkWrapper:disabled-checked'],
+      updater: () =>{
+        'worklet'
+        let disabledStyle = {}
+        if(disabled){
+          disabledStyle = value ? variantStyles['checkmarkWrapper:disabled-checked'] : variantStyles['checkmarkWrapper:disabled-unchecked']
+        }
+        const style = value ? variantStyles['checkmarkWrapper:checked'] : variantStyles['checkmarkWrapper:unchecked']
+        return {
+          ...style,
+          ...disabledStyle
+        }
+        
+      },
+      dependencies: [value, disabled],
+    })
+
+    const _checkboxOnLeft = checkboxOnLeft ?? variantStyles['__props']?.checkboxOnLeft
+
+    const handleChange = () => {
+      if (disabled) return
+      if(onValueChange) onValueChange?.(!value)
+    }
+
+    return <InputBase
+      {...inputBaseProps}
+      debugName={debugName}
+      styles={{
+        ...variantStyles,
+        innerWrapper: [
+          variantStyles.innerWrapper,
+        ],
+      }}
+      order={_checkboxOnLeft ?  reversedOrder : InputBaseDefaultOrder}
+      style={style}
+    >
+      <motion.div 
+        css={[
+          variantStyles.box, 
+          disabled && variantStyles['box:disabled'],
+        ]}
+        initial={false}
+        animate={boxAnimation}
+        transition={variantStyles['box:transition']}
+        onClick={handleChange}
+      >
+        <motion.div
+          css={[
+            variantStyles.checkmarkWrapper, 
+            disabled && variantStyles['checkmarkWrapper:disabled'],
+          ]}
+          initial={false}
+          animate={checkmarkWrapperAnimation}
+          transition={variantStyles['checkmarkWrapper:transition']}
+        > 
+          <Icon 
+            name={'checkbox-checkmark' as any}
+            css={[variantStyles.checkmark, disabled && variantStyles['checkmark:disabled']]}
+          />
+        </motion.div>
+      </motion.div>
+    </InputBase>
+}

package/src/components/Checkbox/styles.ts

@@ -0,0 +1,20 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { InputBaseParts, InputBaseStates } from '../InputBase'
+
+type AnimatableParts = 'checkmarkWrapper' | 'box'
+export type CheckboxParts = InputBaseParts | AnimatableParts | 'checkmark'
+
+export type CheckboxAnimationStates = 'checked' | 'unchecked' | 'disabled-checked' | 'disabled-unchecked'
+
+export type CheckboxStates = InputBaseStates
+
+export type CheckboxComposition =
+  | CheckboxParts
+  | `${CheckboxParts}:${CheckboxStates}`
+  | `${AnimatableParts}:transition`
+  | `${AnimatableParts}:${CheckboxAnimationStates}`
+  | '__props'
+
+const createCheckboxStyle = createDefaultVariantFactory<CheckboxComposition>()
+
+export const CheckboxPresets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })))

package/src/components/Collapse/index.tsx

@@ -0,0 +1,87 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
+import { capitalize, TypeGuards } from '@codeleap/common'
+import { Scroll } from '../Scroll'
+import { View, ViewProps } from '../View'
+import { ElementType } from 'react'
+
+export type CollapseAxis = 'horizontal' | 'vertical'
+
+export type GetCollapseStylesArgs = {
+  direction?: CollapseAxis
+  value: string | number
+   animation?: string
+   scroll ?: boolean
+}
+
+type CollapseComposition = 'wrapper' | 'wrapper:open' |'wrapper:hidden'
+
+export function getCollapseStyles<
+    TCSS = React.CSSProperties,
+    Return extends Record<CollapseComposition, TCSS> = Record<CollapseComposition, TCSS>
+>(
+  args: GetCollapseStylesArgs,
+): Return {
+  const {
+    direction = 'vertical',
+    value,
+    animation = '0.3s ease',
+    scroll = false,
+
+  } = args
+
+  const dimension = direction === 'horizontal' ? 'width' : 'height'
+  const capitalizedDimension = capitalize(dimension)
+  const overflowOpen = scroll ? 'auto' : 'hidden'
+  const axis = direction === 'vertical' ? 'Y' : 'X'
+  return {
+    'wrapper:closed': {
+      [`max${capitalizedDimension}`]: '0px',
+      [`overflow${axis}`]: 'hidden',
+    },
+    'wrapper:open': {
+      [`max${capitalizedDimension}`]: TypeGuards.isString(value) ? value : `${value}px`,
+      [`overflow${axis}`]: overflowOpen,
+    },
+    wrapper: {
+      height: 'auto',
+      transition: `max-${dimension} ${animation}`,
+    },
+  } as unknown as Return
+}
+
+export type CollapseProps<T extends ElementType = 'div'> = ViewProps<T> & {
+    open: boolean
+    scroll?: boolean
+    size?: string | number
+    direction?: CollapseAxis
+    animation?: string
+}
+
+export const Collapse:React.FC<CollapseProps> = ({
+  open,
+  size = 1000,
+  scroll = false,
+  children,
+  direction,
+  animation,
+  ...props
+}) => {
+
+  const Component = scroll ? Scroll : View
+  const styles = getCollapseStyles({
+    value: size,
+    direction,
+    animation,
+  })
+  // @ts-ignore
+  return <Component css={[
+    styles.wrapper,
+    open ? styles['wrapper:open'] : styles['wrapper:closed'],
+  ]} {...props}>
+    {children}
+  </Component>
+}
+
+export * from './styles'

package/src/components/Collapse/styles.ts

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