@codeleap/web 3.1.1 → 3.2.1

package/src/components/RadioInput/index.tsx

@@ -1,5 +1,7 @@
-import * as React from 'react'
-import { ReactNode } from 'react'
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
+import React, { ReactNode } from 'react'
 import { Text } from '../Text'
 import { Touchable } from '../Touchable'
 import {
@@ -54,28 +56,28 @@ const Option = <T extends string|number>(props: OptionProps<T>) => {
   const isDisabled = disabled || item.disabled
 
   const getStyle = (key) => {
-    if(isDisabled && selected) {
+    if (isDisabled && selected) {
       return styles[`${key}:selectedDisabled`]
     }
-    if(isDisabled) {
+    if (isDisabled) {
       return styles[`${key}:disabled`]
     }
-    if(selected) {
+    if (selected) {
       return styles[`${key}:selected`]
     }
     return styles[key]
   }
 
-  const label = TypeGuards.isString(item.label) ? <Text 
+  const label = TypeGuards.isString(item.label) ? <Text
     css={[
       styles.optionLabel,
       getStyle('optionLabel'),
     ]}
     text={item.label}
-  /> : item.label 
+  /> : item.label
 
-  return <>
-    <Touchable 
+  return <React.Fragment>
+    <Touchable
       debugName={`${debugName} option ${item.value}`}
       css={[
         styles.optionWrapper,
@@ -83,11 +85,11 @@ const Option = <T extends string|number>(props: OptionProps<T>) => {
       ]}
       onPress={onSelect}
       disabled={isDisabled}
-    > 
-      <View 
+    >
+      <View
         css={[
           styles.optionIndicator,
-        getStyle('optionIndicator'),
+          getStyle('optionIndicator'),
         ]}
 
       >
@@ -99,10 +101,10 @@ const Option = <T extends string|number>(props: OptionProps<T>) => {
         />
       </View>
       {label}
-      
+
     </Touchable>
     {separator && <View style={styles.optionSeparator} />}
-  </>
+  </React.Fragment>
 }
 
 export const RadioGroup = <T extends string|number>(
@@ -110,7 +112,7 @@ export const RadioGroup = <T extends string|number>(
 ) => {
   const {
     inputBaseProps,
-    others
+    others,
   } = selectInputBaseProps(props)
 
   const {
@@ -123,12 +125,12 @@ export const RadioGroup = <T extends string|number>(
     debugName,
   } = others
 
-  const variantStyles = useDefaultComponentStyle<'u:RadioInput', typeof RadioInputPresets>('u:RadioInput', { 
+  const variantStyles = useDefaultComponentStyle<'u:RadioInput', typeof RadioInputPresets>('u:RadioInput', {
     variants,
     styles,
   })
 
-  return <InputBase 
+  return <InputBase
     {...inputBaseProps}
     disabled={disabled}
     styles={{
@@ -138,13 +140,13 @@ export const RadioGroup = <T extends string|number>(
       ],
     }}
     debugName={debugName}
-  > 
+  >
     {options?.map((item, idx) => (
       <Option
         debugName={debugName}
         item={item}
         key={idx}
-        disabled={disabled} 
+        disabled={disabled}
         styles={variantStyles}
         selected={value === item.value}
         onSelect={() => onValueChange(item.value)}

package/src/components/Scroll/index.tsx

@@ -1,18 +1,21 @@
 /** @jsx jsx */
+import { jsx } from '@emotion/react'
 import {
   ElementType,
   forwardRef,
   ReactElement,
   Ref,
 } from 'react'
+import { NativeHTMLElement } from '../../types'
 import { View, ViewProps } from '../View'
 
-export const ScrollCP = <T extends ElementType = 'div'>(
+export const ScrollCP = <T extends NativeHTMLElement = 'div'>(
   props: ViewProps<T>,
   ref: Ref<any>,
 ) => {
 
   return (
+    // @ts-ignore
     <View
       {...props}
       ref={ref}
@@ -24,6 +27,6 @@ export const ScrollCP = <T extends ElementType = 'div'>(
 
 export * from './styles'
 
-export const Scroll = forwardRef(ScrollCP) as <T extends ElementType = 'div'>(
+export const Scroll = forwardRef(ScrollCP) as <T extends NativeHTMLElement = 'div'>(
   props: ViewProps<T>
-) => ReactElement
+) => JSX.Element

package/src/components/SegmentedControl/SegmentedControlOption.tsx

@@ -0,0 +1,78 @@
+/** @jsx jsx */
+import { CSSObject, jsx } from '@emotion/react'
+
+import React, { forwardRef } from 'react'
+import { PropsOf, IconPlaceholder } from '@codeleap/common'
+import { StylesOf } from '../../types'
+import { Text } from '../Text'
+import { Touchable } from '../Touchable'
+import { SegmentedControlComposition } from './styles'
+import { Icon } from '../Icon'
+
+type OptionRef = PropsOf<typeof Touchable>['ref']
+
+export type SegmentedControlOptionProps = PropsOf<typeof Touchable> & {
+  selected?: boolean
+  label: string
+  variantStyles?: StylesOf<SegmentedControlComposition>
+  value?: any
+  textProps?: Omit<PropsOf<typeof Text>, 'key'>
+  icon?: IconPlaceholder
+  ref?: OptionRef
+}
+
+const SegmentedControlOptionCP = (props: SegmentedControlOptionProps, ref: OptionRef) => {
+  const {
+    selected,
+    onPress,
+    style,
+    variantStyles,
+    label,
+    icon,
+    textProps,
+
+    disabled,
+    ...touchableProps
+  } = props
+
+  return (
+    <Touchable
+
+      key={touchableProps.key}
+      ref={ref}
+      css={[
+        variantStyles.button,
+        selected && variantStyles['button:selected'],
+        disabled && variantStyles['button:disabled'],
+        style,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+      {...touchableProps}
+    >
+      {
+        !!icon && (
+          <Icon
+            name={icon}
+            css={[
+              variantStyles.icon,
+              selected && variantStyles['icon:selected'],
+              disabled && variantStyles['icon:disabled'],
+            ]}
+          />
+        )
+      }
+      <Text
+        text={label}
+        css={[
+          variantStyles.text,
+          selected && variantStyles['text:selected'],
+          disabled && variantStyles['text:disabled'],
+        ]}
+        {...textProps}
+      />
+    </Touchable>
+  )
+}
+
+export const SegmentedControlOption = forwardRef(SegmentedControlOptionCP) as ((props: SegmentedControlOptionProps) => JSX.Element)

package/src/components/SegmentedControl/index.tsx

@@ -0,0 +1,161 @@
+import React from 'react'
+import { View } from '../View'
+import { SegmentedControlOption } from './SegmentedControlOption'
+import { ComponentVariants, useDefaultComponentStyle, PropsOf, IconPlaceholder, StylesOf, useRef } from '@codeleap/common'
+import { SegmentedControlPresets } from './styles'
+import { Text } from '../Text'
+import { Touchable } from '../Touchable'
+import { SegmentedControlComposition } from './styles'
+import { motion, MotionProps, AnimationProps, ForwardRefComponent } from 'framer-motion'
+import { useAnimatedVariantStyles } from '../../lib'
+
+export type SegmentedControlOptionProps<T = string> = {
+  label: string
+  value: T
+  icon?: IconPlaceholder
+}
+
+export type SegmentedControlProps<T = string> = ComponentVariants<typeof SegmentedControlPresets> & {
+
+  /** options that the segmented control will receive */
+  options : SegmentedControlOptionProps[]
+
+  /** the value of the segmented control */
+  value?: T
+
+  /**  all styles from the segmented control */
+  styles?: StylesOf<SegmentedControlComposition>
+
+  /**  view style */
+  style: PropsOf<typeof View>['style']
+
+  /**  prop to control when te value of the segmented control changes */
+  onValueChange?: (v: any) => void
+
+  /**  motion div props */
+  bubbleProps?: React.HTMLAttributes<HTMLDivElement> & MotionProps
+
+  /** label that will be shown above the segmented control */
+  label?: string
+
+  /** * all the touchable props */
+  touchableProps?: Partial<PropsOf<typeof Touchable>>
+
+  debugName?: string
+  disabled?: boolean
+  animationProps?: AnimationProps
+  transitionDuration?: number
+  RenderAnimatedView?: ForwardRefComponent<HTMLDivElement, any>
+}
+
+const defaultProps: Partial<SegmentedControlProps> = {
+  animationProps: {},
+  transitionDuration: 0.2,
+  disabled: false,
+  RenderAnimatedView: motion.div,
+}
+
+export const SegmentedControl = (props: SegmentedControlProps) => {
+  const allProps = {
+    ...SegmentedControl.defaultProps,
+    ...props,
+  }
+
+  const {
+    label,
+    options,
+    styles = {},
+    value,
+    variants = [],
+    responsiveVariants = {},
+    onValueChange,
+    style,
+    bubbleProps,
+    animationProps,
+    transitionDuration,
+    disabled,
+    RenderAnimatedView: Bubble,
+    debugName,
+    ...rest
+  } = allProps
+
+  const variantStyles = useDefaultComponentStyle<'u:SegmentedControl', typeof SegmentedControlPresets>(
+    'u:SegmentedControl',
+    {
+      variants,
+      responsiveVariants,
+      styles,
+    },
+  )
+
+  const currentOptionIdx = options?.findIndex(o => o?.value === value) || 0
+
+  const maxDivWidthRef = useRef(null)
+
+  const biggerWidth = React.useMemo(() => {
+    return {
+      width: maxDivWidthRef.current,
+    }
+  }, [maxDivWidthRef.current])
+
+  const bubbleAnimation = useAnimatedVariantStyles({
+    variantStyles,
+    animatedProperties: [],
+    updater: () => {
+      'worklet'
+      return {
+        translateX: currentOptionIdx * biggerWidth.width,
+        transition: {
+          ease: 'easeInOut',
+          duration: transitionDuration,
+        },
+        ...animationProps,
+      } as AnimationProps
+    },
+    dependencies: [currentOptionIdx, biggerWidth.width],
+  })
+
+  const selectedBubbleStyles = [
+    variantStyles.selectedBubble,
+    disabled && variantStyles['selectedBubble:disabled'],
+    biggerWidth,
+  ]
+
+  return (
+    <View css={[variantStyles.wrapper, style]} {...rest}>
+      {label && <Text text={label} css={[variantStyles.label, disabled && variantStyles['label:disabled']]} />}
+      <View css={[variantStyles.innerWrapper, disabled && variantStyles['innerWrapper:disabled']]}>
+        <Bubble
+          css={selectedBubbleStyles}
+          animate={bubbleAnimation}
+          initial={false}
+          {...bubbleProps}
+        />
+        {options.map((o, idx) => (
+          <SegmentedControlOption
+            ref={(ref) => {
+              if (ref && ref.offsetWidth > maxDivWidthRef.current) {
+                maxDivWidthRef.current = ref.offsetWidth
+              }
+            }}
+            debugName={debugName}
+            label={o.label}
+            value={o.value}
+            onPress={() => onValueChange(o.value)}
+            key={idx}
+            icon={o.icon}
+            selected={value === o.value}
+            variantStyles={variantStyles}
+            style={biggerWidth}
+            disabled={disabled}
+            {...props?.touchableProps}
+          />
+        ))}
+      </View>
+    </View>
+  )
+}
+
+export * from './styles'
+
+SegmentedControl.defaultProps = defaultProps

package/src/components/SegmentedControl/styles.ts

@@ -0,0 +1,26 @@
+import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
+
+export type SegmentedControlStates = 'selected' | 'disabled'
+
+type SegmentedControlParts =
+'selectedBubble' |
+'wrapper' |
+'innerWrapper' |
+'text' |
+'icon' |
+'button' |
+`label`
+
+export type SegmentedControlComposition = SegmentedControlParts | `${SegmentedControlParts}:${SegmentedControlStates}`
+
+export type SegmentedControlStylesGen<TCSS = any> =
+  StylesOf<
+    Exclude<SegmentedControlComposition, 'buttonFeedback'>
+  >
+
+const createSegmentedControlStyle = createDefaultVariantFactory<
+SegmentedControlComposition,
+SegmentedControlStylesGen
+>()
+
+export const SegmentedControlPresets = includePresets((style) => createSegmentedControlStyle(() => ({ wrapper: style })))

package/src/components/Select/index.tsx

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
 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'
@@ -5,7 +7,7 @@ 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 { Button, ButtonProps } from '../Button'
 import { Text } from '../Text'
 import { View } from '../View'
 import { ActivityIndicator } from '../ActivityIndicator'
@@ -16,7 +18,7 @@ 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 { isSelected, optionsStyles, label, selectedIcon, component = null, itemProps = {} as TCustomOption['itemProps'], isFocused } = props
 
   const styles = optionsStyles({ isSelected, isFocused, baseStyles: (itemProps?.styles ?? {}) })
 
@@ -46,12 +48,12 @@ const DefaultOption = (props: TCustomOption & { component: (props: TCustomOption
 const CustomMenu = (props: MenuProps & { Footer: () => JSX.Element }) => {
   const { Footer, children } = props
 
-  return <>
+  return <React.Fragment>
     <components.Menu {...props}>
       {children}
       {!!Footer && <Footer />}
     </components.Menu>
-  </>
+  </React.Fragment>
 }
 
 const CustomMenuList = (props: MenuListProps & { defaultStyles: { wrapper: React.CSSProperties } }) => {
@@ -75,8 +77,8 @@ const DefaultPlaceholder = (props: PlaceholderProps) => {
     if (TypeGuards.isString(TextPlaceholder)) {
       return <Text text={TextPlaceholder} css={[defaultStyles.text]} />
     } else if (React.isValidElement(TextPlaceholder)) {
-      return TextPlaceholder
-    } else {
+      return TextPlaceholder as JSX.Element
+    } else if (TypeGuards.isFunction(TextPlaceholder)) {
       return <TextPlaceholder {...props} />
     }
   }
@@ -91,7 +93,7 @@ const DefaultPlaceholder = (props: PlaceholderProps) => {
       return <View style={defaultStyles.icon}>
         { IconPlaceholder}
       </View>
-    } else {
+    } else if (TypeGuards.isFunction(IconPlaceholder)) {
       return <IconPlaceholder {...props} />
     }
   }
@@ -105,11 +107,11 @@ const DefaultPlaceholder = (props: PlaceholderProps) => {
 }
 
 const LoadingIndicator = (props: LoadingIndicatorProps) => {
-  const { defaultStyles, size } = props
+  const { defaultStyles } = props
 
   return (
     <View css={[defaultStyles.wrapper]}>
-      <ActivityIndicator size={size} />
+      <ActivityIndicator />
     </View>
   )
 }
@@ -162,7 +164,7 @@ const defaultProps: Partial<SelectProps> = {
   selectedIcon: 'checkmark',
   searchable: false,
   separatorMultiValue: ', ',
-  itemProps: {},
+  itemProps: {} as ButtonProps,
   loadingIndicatorSize: 20,
   options: [],
 }
@@ -415,7 +417,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
             <DefaultOption
               {...props}
               {...componentProps}
-              itemProps={itemProps}
+              itemProps={itemProps as ButtonProps}
               selectedIcon={selectedIcon}
               optionsStyles={optionsStyles}
               component={OptionComponent}

package/src/components/Select/types.ts

@@ -1,35 +1,35 @@
-import { ComponentVariants, FormTypes, StylesOf, yup } from "@codeleap/common"
+import { ComponentVariants, FormTypes, StylesOf, yup } from '@codeleap/common'
 import { CSSInterpolation } from '@emotion/css'
-import { CSSObject } from "@emotion/react"
-import { GroupBase, NoticeProps, OptionProps, Props } from "react-select"
-import { AsyncProps } from "react-select/async"
+import { CSSObject } from '@emotion/react'
+import { GroupBase, NoticeProps, OptionProps, Props } from 'react-select'
+import { AsyncProps } from 'react-select/async'
 import { ButtonProps } from '../Button'
-import { InputBaseProps } from "../InputBase"
-import { SelectPresets,SelectComposition, OptionState } from "./styles"
+import { InputBaseProps } from '../InputBase'
+import { SelectPresets, SelectComposition, OptionState } from './styles'
 
-type SelectValue<T,Multi extends boolean> = Multi extends true ? T[] : T
+type SelectValue<T, Multi extends boolean> = Multi extends true ? T[] : T
 
-type OmitWithValues<T> =  Omit<T, 'options' | 'value' | 'isMulti' | 'loadOptions'|'styles'>
+type OmitWithValues<T> = Omit<T, 'options' | 'value' | 'isMulti' | 'loadOptions'|'styles'>
 
-type DynamicSelectProps<T, Multi extends boolean> = 
+type DynamicSelectProps<T, Multi extends boolean> =
   ({
-    loadOptions?: (search: string) => Promise<FormTypes.Options<T>> 
+    loadOptions?: (search: string) => Promise<FormTypes.Options<T>>
     defaultValues?: FormTypes.Options<T>
-  } &  OmitWithValues<
+  } & OmitWithValues<
     AsyncProps<FormTypes.Option<T>, Multi, GroupBase<FormTypes.Option<T>>>
-  >) | 
+  >) |
   ({
     loadOptions?: never
   } & OmitWithValues<
     Props<FormTypes.Option<T>, Multi, GroupBase<FormTypes.Option<T>>>
   >)
- 
-export type ReactSelectProps<T, Multi extends boolean = false> = Omit<InputBaseProps , 'styles' | 'variants'> &{
+
+export type ReactSelectProps<T, Multi extends boolean = false> = Omit<InputBaseProps, 'styles' | 'variants'> &{
   options: FormTypes.Options<T>
-  value: SelectValue<T,Multi>
-  onValueChange?: (value: SelectValue<T,Multi>) => void
+  value: SelectValue<T, Multi>
+  onValueChange?: (value: SelectValue<T, Multi>) => void
   multiple?: Multi
-  validate?: FormTypes.ValidatorWithoutForm<SelectValue<T,Multi>> | yup.SchemaOf<SelectValue<T,Multi>>
+  validate?: FormTypes.ValidatorWithoutForm<SelectValue<T, Multi>> | yup.SchemaOf<SelectValue<T, Multi>>
   styles?: StylesOf<SelectComposition>
 } & DynamicSelectProps<T, Multi>
 
@@ -40,16 +40,16 @@ export type ComponentPartProps = {
   variantStyles: Record<SelectComposition, React.CSSProperties>
 }
 
-export type TCustomOption = OptionProps & ComponentPartProps & { 
+export type TCustomOption = OptionProps & ComponentPartProps & {
   optionsStyles: (state: OptionState) => OptionState['baseStyles']
   selectedIcon?: string
   itemProps?: ButtonProps
   styles?: OptionState['baseStyles']
 }
 
-type SelectPlaceholderElement = string | ((props: PlaceholderProps) => JSX.Element) | null
+type SelectPlaceholderElement = string | ((props: PlaceholderProps) => JSX.Element) | JSX.Element
 
-export type PlaceholderProps = NoticeProps & ComponentPartProps & { 
+export type PlaceholderProps = NoticeProps & ComponentPartProps & {
   text: SelectPlaceholderElement
   defaultStyles: {
     wrapper: CSSInterpolation
@@ -59,7 +59,7 @@ export type PlaceholderProps = NoticeProps & ComponentPartProps & {
   icon: SelectPlaceholderElement
 }
 
-export type LoadingIndicatorProps = NoticeProps & { 
+export type LoadingIndicatorProps = NoticeProps & {
   defaultStyles: { wrapper: CSSInterpolation }
   size?: number
 }
@@ -93,8 +93,8 @@ export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWit
     loadingIndicatorSize?: number
     limit?: number
   } & Omit<
-    ReactSelectProps<T, Multi>, 
+    ReactSelectProps<T, Multi>,
     'isSearchable' | 'isClearable' | 'isDisabled' | 'loadingMessage' | 'filterOption' |
-    'isLoading' | 'menuPortalTarget' | 'closeMenuOnSelect' | 'isMulti'> 
+    'isLoading' | 'menuPortalTarget' | 'closeMenuOnSelect' | 'isMulti'>
     & ComponentVariants<typeof SelectPresets>
 >