@codeleap/web 3.1.1 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.1.1",
+  "version": "3.2.1",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -10,8 +10,10 @@
   "license": "UNLICENSED",
   "devDependencies": {
     "@codeleap/config": "*",
-    "@emotion/react": "11.10.6",
-    "@types/react-window": "1.8.5"
+    "@types/react-slick": "^0.23.10",
+    "@types/react-window": "1.8.5",
+    "@emotion/react": "link:../../apps/web/node_modules/@emotion/react",
+    "react": "link:../../apps/web/node_modules/react"
   },
   "scripts": {
     "build": "rm -rf ./dist && tsc --build",
@@ -23,26 +25,27 @@
     "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-number-format": "^5.2.1",
+    "react-select": "^5.7.3",
+    "react-slick": "^0.29.0",
     "react-toastify": "^8.2.0",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "1.8.5",
+    "slick-carousel": "^1.8.1",
     "url-parse": "^1.5.10",
-    "uuid": "^8.3.2",
-    "react-select": "^5.7.3"
+    "uuid": "^8.3.2"
   },
   "peerDependencies": {
     "@codeleap/common": "*",
-    "@emotion/css": "11.9.0",
-    "@emotion/react": "11.10.6",
     "@reach/router": "^1.3.4",
-    "axios": "^1.1.3",
+    "axios": "1.3.5",
     "gatsby-plugin-intl": "^0.3.3",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-helmet": "^6.1.0",
     "react-select": "*",
-    "typescript": "4.5.4"
+    "typescript": "4.5.4",
+    "@emotion/react": "11.10.6"
   }
 }

package/src/components/ActionIcon/index.tsx

@@ -1,25 +1,27 @@
-import React from 'react'
-import { ComponentVariants, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
+/** @jsx jsx */
+import { jsx, CSSObject } from '@emotion/react'
+
+import { ComponentVariants, PropsOf, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
 import { StylesOf } from '../../types'
 import { Icon, IconProps } from '../Icon'
-import { Touchable, TouchableProps } from '../Touchable'
+import { Touchable } 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']
+    action?: () => void
     styles?: StylesOf<ActionIconComposition>
-} & Omit<TouchableProps, 'styles' | 'variants'> & ComponentVariants<typeof ActionIconPresets>
+} & Omit<PropsOf<typeof Touchable>, 'styles' | 'variants'> & ComponentVariants<typeof ActionIconPresets>
 
-export const ActionIcon:React.FC<ActionIconProps> = (props) => {
+export const ActionIcon = (props:ActionIconProps) => {
   const { icon, name, iconProps, onPress, variants, styles, children, disabled, ...touchableProps } = props
-  
+
   const variantStyles = useDefaultComponentStyle<'u:ActionIcon', typeof ActionIconPresets>('u:ActionIcon', {
-    variants, 
-    styles
+    variants,
+    styles,
   })
 
   const isPressable = TypeGuards.isFunction(onPress) && !disabled
@@ -31,25 +33,32 @@ export const ActionIcon:React.FC<ActionIconProps> = (props) => {
 
     if (onPress) onPress?.()
   }
-  
+
   return (
-    <WrapperComponent 
+    // @ts-ignore
+    <WrapperComponent
       onPress={handlePress}
       css={[
         variantStyles.wrapper,
         disabled && variantStyles['wrapper:disabled'],
-        isPressable && variantStyles['wrapper:cursor']
+        isPressable && variantStyles['wrapper:cursor'],
       ]}
       disabled={disabled}
+      {
+        ...(isPressable && {
+          onPress: handlePress,
+        })
+      }
       {...touchableProps}
     >
-      <Icon 
-        name={icon ?? name} 
+      <Icon
+        name={icon ?? name}
+        {...iconProps}
+        // @ts-ignore
         css={[
           variantStyles.icon,
           disabled && variantStyles['icon:disabled'],
         ]}
-        {...iconProps}
       />
       {children}
     </WrapperComponent>

package/src/components/ActivityIndicator/index.tsx

@@ -1,78 +1,71 @@
 import { View } from '../View'
-import { CSSObject, keyframes } from '@emotion/react'
+import React from 'react'
 import {
   useDefaultComponentStyle,
   ComponentVariants,
   ActivityIndicatorStyles,
   ActivityIndicatorComposition,
+  StylesOf,
   TypeGuards,
 } from '@codeleap/common'
-import { StylesOf } from '../../types/utility'
 import { ActivityIndicatorPresets } from './styles'
+import { CSSInterpolation } from '@emotion/css'
+import { ComponentWithDefaultProps } from '../../types'
 
 export * from './styles'
 
-const spin = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to { 
-    transform: rotate(360deg);
-  }
-`
-
 export type ActivityIndicatorProps = {
-  animating?: boolean
-  hidesWhenStopped?: boolean
+  style?: React.CSSProperties
   styles?: StylesOf<ActivityIndicatorComposition>
-  css?: CSSObject
+  css?: CSSInterpolation | CSSInterpolation[]
+  component?: React.ComponentType<Omit<ActivityIndicatorProps & {ref?: React.Ref<any>}, 'component'>>
   size?: number
 } & ComponentVariants<typeof ActivityIndicatorStyles>
 
-export const ActivityIndicator: React.FC<ActivityIndicatorProps> = (props) => {
+export const ActivityIndicator = React.forwardRef<typeof View, ActivityIndicatorProps>((activityIndicatorProps, ref) => {
+  const allProps = {
+    ...ActivityIndicator.defaultProps,
+    ...activityIndicatorProps,
+  }
+
   const {
-    animating = true,
-    hidesWhenStopped = true,
-    variants,
-    responsiveVariants,
-    styles,
-    size = null,
-    ...viewProps
-  } = props
+    style = {},
+    styles = {},
+    component: Component,
+    variants = [],
+    responsiveVariants = {},
+    size,
+    ...props
+  } = allProps
 
   const variantStyles = useDefaultComponentStyle<'u:ActivityIndicator', typeof ActivityIndicatorPresets>(
     'u:ActivityIndicator',
     {
+      variants,
       styles,
       responsiveVariants,
-      variants,
-    }
+    },
   )
 
-  const _size = TypeGuards.isNumber(size) && {
-    height: size,
-    width: size,
-    borderWidth: size * 0.25,
-  }
+  const _size = React.useMemo(() => {
+    return TypeGuards.isNumber(size) ? {
+      width: size,
+      height: size,
+    } : {}
+  }, [size])
 
   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 css={[variantStyles.wrapper, style, _size]}>
+      <Component
+        ref={ref}
+        css={[variantStyles.wrapper, _size]}
+        {...props}
       />
     </View>
   )
+}) as ComponentWithDefaultProps<ActivityIndicatorProps>
+
+ActivityIndicator.defaultProps = {
+  component: View,
+  size: null,
 }

package/src/components/ActivityIndicator/styles.ts

@@ -1,11 +1,7 @@
-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 })))
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type ActivityIndicatorComposition = 'wrapper'
+
+const createActivityIndicatorStyle = createDefaultVariantFactory<ActivityIndicatorComposition>()
+
+export const ActivityIndicatorPresets = includePresets((styles) => createActivityIndicatorStyle(() => ({ wrapper: styles })))

package/src/components/Button/index.tsx

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react'
+
 import {
   useDefaultComponentStyle,
   ButtonStyles,
@@ -8,19 +9,21 @@ import {
   ButtonParts,
   optionalObject,
   AnyFunction,
+  EnhancedTheme,
+  ComponentStyleMap,
+  CommonVariantObject,
+  AppTheme,
 } from '@codeleap/common'
-import React, { ComponentPropsWithRef } from 'react'
+import React 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'
+import { ActivityIndicator } from '../ActivityIndicator'
 
-type NativeButtonProps = ComponentPropsWithRef<'button'>
-
-export type ButtonProps = NativeButtonProps &
+export type ButtonProps =
   ComponentVariants<typeof ButtonStyles> & {
     text?: string
     rightIcon?: IconPlaceholder
@@ -28,11 +31,11 @@ export type ButtonProps = NativeButtonProps &
     onPress?: AnyFunction
     styles?: StylesOf<ButtonComposition>
     loading?: boolean
-    debugName?: string
+    debugName: string
     debounce?: number
-  } & Partial<TouchableProps<any>>
+  } & Partial<TouchableProps<'button'>>
 
-export const Button: React.FC<ButtonProps> = (buttonProps) => {
+export const Button = (buttonProps:ButtonProps) => {
   const {
     variants = [],
     responsiveVariants = {},
@@ -47,6 +50,7 @@ export const Button: React.FC<ButtonProps> = (buttonProps) => {
     debounce = 600,
     ...props
   } = buttonProps
+
   const [pressed, setPressed] = React.useState(false)
   const variantStyles = useDefaultComponentStyle('Button', {
     responsiveVariants,
@@ -54,7 +58,7 @@ export const Button: React.FC<ButtonProps> = (buttonProps) => {
     styles,
   })
 
-  function handlePress(e: Parameters<ButtonProps['onPress']>[0]) {
+  function handlePress(e?: Parameters<ButtonProps['onPress']>[0]) {
     if (!pressed) {
       props?.onClick?.(e)
 
@@ -82,14 +86,13 @@ export const Button: React.FC<ButtonProps> = (buttonProps) => {
       css={getStyles('wrapper')}
       component='button'
       debugComponent='Button'
-
-      onPress={handlePress}
       {...props}
+      onPress={null}
+      onClick={handlePress}
     >
       <LoadingOverlay
         visible={loading}
         styles={loaderStyle}
-
       />
       {!loading && (
         <Icon
@@ -101,9 +104,7 @@ export const Button: React.FC<ButtonProps> = (buttonProps) => {
       {children || (
         <Text
           text={text}
-          styles={{
-            text: getStyles('text'),
-          }}
+          css={getStyles('text')}
         />
       )}
 
@@ -112,12 +113,7 @@ export const Button: React.FC<ButtonProps> = (buttonProps) => {
         style={{ ...iconStyle, ...getStyles('rightIcon') }}
 
       />
-      {loading && <ActivityIndicator styles={{
-        'wrapper': getStyles('loaderWrapper'),
-        'backCircle': getStyles('loaderBackCircle'),
-        'frontCircle': getStyles('loaderFrontCircle'),
-        'circle': getStyles('loaderCircle'),
-      }} css={getStyles('loader')}/>}
+      {loading && <ActivityIndicator css={{ display: 'none' }} />}
     </Touchable>
   )
 }

package/src/components/Checkbox/index.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react'
+/** @jsx jsx */
+import { jsx, CSSObject } from '@emotion/react'
 import {
   ComponentVariants,
   useDefaultComponentStyle,
@@ -13,11 +14,11 @@ 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
@@ -29,110 +30,116 @@ export type CheckboxProps = Pick<
 const reversedOrder = [...InputBaseDefaultOrder].reverse()
 
 export const Checkbox = (props: CheckboxProps) => {
-    const {
-      inputBaseProps,
-      others
-    } = selectInputBaseProps(props)
+  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']
 
-    const {
-      variants = [],
-      style = {},
-      styles = {},
-      value,
-      disabled,
-      debugName,
-      onValueChange,
-      checkboxOnLeft,
-    } = others
+      return {
+        ...style,
+        ...disabledStyle,
+      }
 
-    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']
+    },
+    dependencies: [value, disabled],
+  })
 
-        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,
+      }
 
-    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],
-    })
+    },
+    dependencies: [value, disabled],
+  })
 
-    const _checkboxOnLeft = checkboxOnLeft ?? variantStyles['__props']?.checkboxOnLeft
+  const _checkboxOnLeft = checkboxOnLeft ?? variantStyles.__props?.checkboxOnLeft
 
-    const handleChange = () => {
-      if (disabled) return
-      if(onValueChange) onValueChange?.(!value)
-    }
+  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}
+  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 
+      <motion.div
         css={[
-          variantStyles.box, 
-          disabled && variantStyles['box:disabled'],
+          variantStyles.checkmarkWrapper,
+          disabled && variantStyles['checkmarkWrapper:disabled'],
         ]}
         initial={false}
-        animate={boxAnimation}
-        transition={variantStyles['box:transition']}
-        onClick={handleChange}
+        animate={checkmarkWrapperAnimation}
+        transition={variantStyles['checkmarkWrapper:transition']}
       >
-        <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>
+        <Icon
+          name={'checkbox-checkmark' as any}
+          css={[variantStyles.checkmark, disabled && variantStyles['checkmark:disabled']]}
+        />
       </motion.div>
-    </InputBase>
+    </motion.div>
+  </InputBase>
 }

package/src/components/Collapse/index.tsx

@@ -5,6 +5,7 @@ import { capitalize, TypeGuards } from '@codeleap/common'
 import { Scroll } from '../Scroll'
 import { View, ViewProps } from '../View'
 import { ElementType } from 'react'
+import { NativeHTMLElement } from '../../types'
 
 export type CollapseAxis = 'horizontal' | 'vertical'
 
@@ -51,7 +52,7 @@ export function getCollapseStyles<
   } as unknown as Return
 }
 
-export type CollapseProps<T extends ElementType = 'div'> = ViewProps<T> & {
+export type CollapseProps<T extends NativeHTMLElement = 'div'> = ViewProps<T> & {
     open: boolean
     scroll?: boolean
     size?: string | number
@@ -59,7 +60,7 @@ export type CollapseProps<T extends ElementType = 'div'> = ViewProps<T> & {
     animation?: string
 }
 
-export const Collapse:React.FC<CollapseProps> = ({
+export const Collapse = ({
   open,
   size = 1000,
   scroll = false,
@@ -67,7 +68,7 @@ export const Collapse:React.FC<CollapseProps> = ({
   direction,
   animation,
   ...props
-}) => {
+}:CollapseProps) => {
 
   const Component = scroll ? Scroll : View
   const styles = getCollapseStyles({