@codeleap/web 1.1.0 → 1.1.4

package/src/components/Select.tsx

@@ -1,60 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { SelectStyles, ComponentVariants, useComponentStyle, StylesOf, SelectComposition } from '@codeleap/common';
-import { ComponentPropsWithRef, ReactNode } from 'react';
-import { View, ViewProps } from './View';
-import { Text } from './Text';
-
-
-type NativeSelectProps = ComponentPropsWithRef<'select'>;
-type Option = {
-  label: string;
-  value: string | number;
-}
-
-export type SelectProps = NativeSelectProps & {
-  options: Array<Option>
-  styles?: StylesOf<SelectComposition>
-  label?: string | ReactNode
-  wrapperProps?: ViewProps<'div'>
-  onValueChange?: (value: string | number) => void
-} & ComponentVariants<typeof SelectStyles>; 
-
-export const Select = (selectProps:SelectProps) => {
-  const {
-    variants = [],
-    responsiveVariants = {},
-    options,
-    styles,
-    label,
-    onValueChange,
-    wrapperProps,
-    value,
-    ...props
-  } = selectProps;
-
-  const variantStyles = useComponentStyle('Select', {
-    responsiveVariants,
-    variants,
-    styles,
-  })
-  function handleChange(e){
-    props.onChange && props.onChange(e)
-    onValueChange && onValueChange(e.target.value)
-
-  }
-  return (  
-    <View css={variantStyles.wrapper} {...wrapperProps}>
-      {label ? (
-        typeof label === 'string' ? <Text css={variantStyles.label} text={label}/> : label
-      ) : null}
-      <View component='select' css={variantStyles.select}  {...props} onChange={handleChange}>
-        {options.map((option, index) => (
-          <option value={option.value} key={index} selected={value == option.value}>
-            {option.label}
-          </option>
-        ))}
-      </View>
-    </View>
-  )
-}

package/src/components/Slider.tsx

@@ -1,14 +0,0 @@
-import RCSlider, {SliderProps as RCSliderProps} from 'rc-slider'
-
-type SliderProps = RCSliderProps & {
-
-}
-
-export const Slider:React.FC<SliderProps> = (sliderProps) => {
-  const {
-
-    ...props
-  } = sliderProps
-
-  return <RCSlider {...props} />
-}

package/src/components/Text.tsx

@@ -1,27 +0,0 @@
-/** @jsx jsx */
-import {  jsx } from '@emotion/react'
-import {  ComponentVariants, TextComposition, TextStyles, useComponentStyle } from '@codeleap/common';
-import { ComponentPropsWithoutRef, ElementType } from 'react';
-import { StylesOf } from '../types/utility';
-
-export type TextProps< T extends ElementType> = {
-    component?: T
-    text?: string
-    styles?: StylesOf<TextComposition>
-} & ComponentPropsWithoutRef<T> & ComponentVariants<typeof TextStyles>
-
-export const Text = <T extends ElementType >(textProps:TextProps<T>) => {
-  const {variants = [], responsiveVariants  = {}, text, children, component = 'p', styles, ...props} = textProps
-  const variantStyles = useComponentStyle('Text', {
-    rootElement: 'text',
-    responsiveVariants,
-    variants,
-  })
-
-  const Component = component
-
-
-  return <Component {...props} css={{...variantStyles.text, ...props.style, ...styles?.text}} >
-    {text || children}
-  </Component>
-}

package/src/components/TextInput.tsx

@@ -1,223 +0,0 @@
-import { 
-  ComponentVariants,
-  FormTypes,
-  IconPlaceholder,
-
-  onUpdate,
-
-  TextInputComposition,
-  TextInputStyles,
-  useBooleanToggle,
-  useComponentStyle } from '@codeleap/common';
-import React, { ComponentPropsWithoutRef,  forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import TextareaAutosize from 'react-autosize-textarea'
-import { Text } from './Text';
-import { View  } from './View';
-import { Button } from './Button';
-
-
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-import { StylesOf } from '../types/utility';
-import { Icon } from '.';
-
-type IconProp = {name: IconPlaceholder, action?:() => void}
-type MergedRef = React.LegacyRef<HTMLInputElement> & React.Ref<HTMLTextAreaElement>
-type ValidateFN = (value:string) => { status: 'error' | 'success', message?: string }
-type NativeProps = ComponentPropsWithoutRef<'input'> & 
-ComponentPropsWithoutRef<'textarea'> 
-
-export type TextInputProps = 
-  ComponentVariants<typeof TextInputStyles> & 
-  Omit<NativeProps, 'value'> &
-  {
-    multiline?: boolean;
-    onChangeText?: (text: string) => void;
-    disabled?: boolean;
-    edited?: boolean;
-    type?: string;
-    label?:React.ReactNode
-    ref?: MergedRef
-    leftIcon?:IconProp
-    rightIcon?:IconProp
-    styles?: StylesOf<TextInputComposition>
-    validate?: FormTypes.ValidatorFunction | string
-    value?:string
-    password?:boolean
-    visibilityToggle?: boolean
-  };
-
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((rawprops, inputRef) => {
-  const {
-    onChange,
-    type,
-    value,
-    onChangeText,
-    disabled,
-    edited,
-    onFocus,
-    onBlur,
-    multiline,
-    responsiveVariants,
-    variants,
-    label,
-    leftIcon,
-    rightIcon,
-    styles,
-    validate,
-    password,
-    visibilityToggle,
-    ...props
-  } = rawprops
-
-  const [focused, setFocus] = useState(false)
-  const [editedState, setEdited] = useState(edited)
-  const [error, setError] = useState<ReturnType<FormTypes.ValidatorFunction>>({
-    valid: true,
-    message: '',
-  })
-  const input = useRef<any>(null)
-  const [textIsVisible, setTextVisible] = useBooleanToggle(false)
-  const variantStyles =useComponentStyle('TextInput', {
-    variants,
-    responsiveVariants,
-    styles,
-  })
-  const InputElement = multiline ? TextareaAutosize : 'input'
-
-  const handleBlur:TextInputProps['onBlur'] = (e) => {
-    if (!editedState && value) setEdited(true)
-    setFocus(false)
-
-    if (onBlur) {
-      onBlur(e)
-    }
-  }
-
-  const handleFocus:TextInputProps['onFocus'] = (e) => {
-    setFocus(true)
-    if (onFocus) {
-      onFocus(e)
-    }
-  }
-
-  const handleChange = (event) => {
-    const text = event.target.value
-    if (onChange) onChange(event)
-    if (onChangeText) onChangeText(text)
-  }
-  
-
-
-  
-  onUpdate(() => {
-
-    
-    const result = typeof validate === 'function' ? 
-      validate(input?.current?.value) : 
-      {message: validate, valid: false}
-    setError(result)
-   
-   
-  }, [value, validate])
-
-  useImperativeHandle(inputRef, () => input.current)
-
-  const showError = (!error.valid  && error.message)
-  const inputType = type || password ? 'password' : 'text'
-
-  const inputVisibilityType = textIsVisible ? 'text' : 'password' 
-
-
-  const leftIconStyle = {
-    ...variantStyles.icon,
-    ...(showError ? variantStyles['icon:error'] : {} ),
-    ...(focused ? variantStyles['icon:focus'] : {} ),
-    ...variantStyles.leftIcon, 
-    ...(showError ? variantStyles['leftIcon:error'] : {} ),
-    ...(focused ? variantStyles['leftIcon:focus'] : {}),
-  }
-  
-  const rightIconStyle = {
-    ...variantStyles.icon,
-    ...(focused ? variantStyles['icon:focus'] : {}),
-    ...(showError ? variantStyles['icon:error'] : {} ),
-    ...variantStyles.rightIcon, 
-    ...(showError ? variantStyles['rightIcon:error'] : {} ),
-    ...(focused ? variantStyles['rightIcon:focus'] : {}),
-  }
-
-  return (
-    <View
-      css={[variantStyles.wrapper, focused && variantStyles['wrapper:focus'], showError && variantStyles['wrapper:error']]}
-    >
-      <InputLabel label={label} style={variantStyles.label}/>
-
-      <View css={[variantStyles.innerWrapper, focused && variantStyles['innerWrapper:focus'], showError && variantStyles['innerWrapper:error']]}>
-
-  
-        <InputIcon {...leftIcon} style={leftIconStyle}/>
-        <InputElement
-          ref={input}
-          type={visibilityToggle ? inputVisibilityType : inputType}
-          onChange={handleChange}
-          value={value}
-          disabled={disabled}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          rows={4}
-          {...props}
-          css={[variantStyles.textField, focused && variantStyles['textField:focus'], showError && variantStyles['textField:error']]}
-        />
-        {
-          visibilityToggle ? 
-            <InputIcon  name={
-                (textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden') as IconPlaceholder
-            } action={() => setTextVisible()} style={rightIconStyle}/>
-            :
-            <InputIcon {...rightIcon} style={rightIconStyle}/>
-        }
-      </View>
-      
-      <FormError message={error.message} css={{
-        ...variantStyles.error,
-       
-      }}/>
-        
-      
-    </View>
-  )
-})
-
-const FormError = ({message, ...props}) => {
-  
-  if (['number', 'string', 'undefined'].includes(typeof message)){
-    return  <Text text={`${message||' '}`} variants={['p2', 'marginTop:1']} {...props}/> 
-  }
-  return message
-}
-export const InputIcon:React.FC<{style:any} & IconProp> = ({name, style, action}) => {
-  if (!name) return null
-
-  if (action){
-  
-    return <Button icon={name} onPress={() => action()}  styles={{
-      icon: style,
-    }} variants={['icon']}/>
-  }
-
-  return <Icon name={name} style={style}/>
-}
-export const InputLabel = ({label, style}) => {
-  if (!label) return null
-
-  switch (typeof label){
-    case 'string':
-      return <Text css={style} text={label} component={'label'}/>
-    case 'object':
-    
-      return label
-    default:
-      return null
-  }
-}

package/src/components/Tooltip.tsx

@@ -1,138 +0,0 @@
-/** @jsx jsx */
-import {  CSSObject, jsx } from '@emotion/react'
-import { ComponentVariants, TooltipComposition, TooltipStyles, useBooleanToggle, useComponentStyle, useDebounce } from '@codeleap/common'
-import { ReactNode } from 'react'
-import { View } from './View'
-
-import { StylesOf } from '../types/utility'
-import { Touchable } from './Touchable'
-import {  useClickOutside } from '../lib/hooks'
-
-type TooltipPosition = 'left'| 'top' | 'bottom' | 'right'
-
-const arrowPositionStyles = {
-  left: {
-    right: `100%`,
-    top: '50%',
-    transform: 'translate(50%,-50%)',
-    borderRight: 'none',
-    borderTop: 'none',
-  },
-  right: {
-    left: `100%`,
-    top: '50%',
-    transform: 'translate(-50%,-50%)',
-    borderLeft: 'none',
-    borderBottom: 'none',
-  },
-  bottom: {
-    left: '50%',
-    top: `100%`,
-    transform: 'translate(-50%,-50%)',
-    borderTop: 'none',
-    borderLeft: 'none',
-  },
-  top: {
-    left: '50%',
-    bottom: `100%`,
-    transform: 'translate(-50%,50%)',
-    borderBottom: 'none',
-    borderRight: 'none',
-  },
-}
-
-const tooltipPositionStyles = {
-  left: (arrow = 0, visible = false) => ({
-    right: `calc(100% + ${arrow}px)`,
-    top: '50%',
-    transform: `translate(0%,-50%) scale(${visible ? '1' : '0' })`,
-  }),
-  right: (arrow = 0, visible = false) => ({
-    left: `calc(100% + ${arrow}px)`,
-    top: '50%',
-    transform: `translate(0%,-50%) scale(${visible ? '1' : '0' })`,
-  }),
-  bottom: (arrow = 0, visible = false) => ({
-    left: '50%',
-    top: `calc(100% + ${arrow}px)`,
-    transform: `translate(-50%,0%) scale(${visible ? '1' : '0' })`,
-  }),
-  top: (arrow = 0, visible = false) => ({
-    left: '50%',
-    bottom: `calc(100% + ${arrow}px)`,
-    transform: `translate(-50%,0%) scale(${visible ? '1' : '0' })`,
-  }),
-}
-
-export type TooltipProps = {
-    position: TooltipPosition
-    styles?: StylesOf<TooltipComposition>
-    showOn?: 'click' | 'hover'
-    content?: string | ReactNode
-} & ComponentVariants<typeof TooltipStyles>
-
-const invert = (pos) => {
-  switch (pos){
-    case 'left':
-      return 'right'
-    case 'right':
-      return 'left'
-    case 'top':
-      return 'bottom'
-    case 'bottom':
-      return 'top'
-  }
-}
-
-export const Tooltip:React.FC<TooltipProps> = (props) => {
-  const {children, position = 'top', styles, variants, responsiveVariants, showOn, content} = props
-
-  const [isVisible, setVisible] = useBooleanToggle(false)
- 
- 
-  const debouncedVisible = useDebounce(isVisible, 100)
-  const arrowPos = arrowPositionStyles[invert(position)]
-
-  const variantStyles = useComponentStyle('Tooltip', {
-    responsiveVariants,
-    variants,
-    styles,
-  }) 
-
-  const style = {
-    transition: 'transform 0.2s ease',
-    ...variantStyles.bubble,
-    '&:after': {
-      ...variantStyles.arrow,
-      ...arrowPos,
-      transform: arrowPos.transform + ' rotate(45deg)',
-    },
-    ...styles,
-    ...tooltipPositionStyles[position](10, debouncedVisible),
-  } as CSSObject
-
-  const wrapperId = useClickOutside(() => {
-    if (isVisible){
-      setVisible(false)
-    } 
-  }, {
-    deps: [setVisible, isVisible],
-  })
-
-  if (showOn === 'click'){
-    return <Touchable onPress={() => setVisible()}  id={wrapperId} css={variantStyles.wrapper}>
-      <View css={style}  >
-        {content}
-      </View> 
-      {children}
-    </Touchable>
-     
-  }
-  
-  return <View onHover={setVisible} id={wrapperId} css={variantStyles.wrapper}>
-    <View css={style} >
-      {content}
-    </View>
-    {children}
-  </View>
-}

package/src/components/Touchable.tsx

@@ -1,47 +0,0 @@
-/** @jsx jsx */
-import { AnyFunction, useStyle } from '@codeleap/common';
-import {  jsx, CSSObject } from '@emotion/react'
-
-import React, { ComponentPropsWithRef, ElementType } from 'react'
-import { stopPropagation } from '../lib/utils/stopPropagation';
-import { View } from './View';
-
-
-
-export type TouchableProps<T extends ElementType> = ComponentPropsWithRef<T> &  {  
-  css?:CSSObject
-  component?: T
-  disabled?:boolean
-  propagate?: boolean
-  onPress?: AnyFunction
-} 
-
-export const Touchable = <T extends ElementType = typeof View>(touchableProps:TouchableProps<T>) => {
-  const { children, propagate = true, component: Component = View, disabled, onPress, onClick, ...props } = touchableProps
-    
-  const {  logger } = useStyle()
-    
-  const handleClick = (event: React.MouseEvent<T>) => {
-
-    if (disabled) return
-    
-    if (!propagate) stopPropagation(event)
-    
-    if (!onClick && !onPress) throw new Error('No onClick or onPress passed to touchable')
-    onPress && onPress()
-
-    onClick && onClick(event)
-
-    // logger.log('Touchable pressed', JSON.stringify(touchableProps, null, 2)  ,'Component')
-  }
-
-  return (
-    <Component 
-      {...props}
-      
-      onClick={handleClick}
-    >
-      {children}
-    </Component>
-  )
-}

package/src/components/View.tsx

@@ -1,54 +0,0 @@
-/** @jsx jsx */
-import {  CSSObject, jsx } from '@emotion/react'
-import { ComponentVariants, useComponentStyle, useStyle, ViewStyles, BaseViewProps } from '@codeleap/common'
-import { ComponentPropsWithRef, ElementType, forwardRef, ReactElement, ReactNode, Ref } from 'react'
-
-export type ViewProps<T extends ElementType> =
- ComponentPropsWithRef<T> & 
- ComponentVariants<typeof ViewStyles> & {
-    component?:T
-    children?:ReactNode
-    css?: any
-} & BaseViewProps
-
-export const ViewCP = <T extends ElementType = 'div'>(viewProps:ViewProps<T>, ref:Ref<any>) => {
-  const { 
-    responsiveVariants = {}, 
-    variants = [], 
-    component: Component = 'div', 
-    children,
-    is,
-    not,
-    up,
-    onHover,
-    down,
-    ...props
-  } = viewProps;
-  const variantStyles = useComponentStyle('View', {
-    responsiveVariants,
-    variants,
-  });
-  const { Theme } = useStyle();
-
-  function handleHover(isMouseOverElement:boolean){
-    onHover && onHover(isMouseOverElement)
-  }
-  const shouldRenderToPlatform = Theme.hooks.shouldRenderToPlatform({ is, not, up, down })
-  if (!shouldRenderToPlatform) return null
-  
-  const platformMediaQuery = Theme.media.renderToPlatformQuery({ is, not, up, down })
-  
-  return <Component  
-    css={[variantStyles.wrapper, platformMediaQuery]} 
-    ref={ref}
-    onMouseEnter={() => handleHover(true)} 
-    onMouseLeave={() => handleHover(false)}
-    {...props} 
-  > 
-    {children}
-  </Component>
-}
-
-export const View = forwardRef(ViewCP)as <
-  T extends ElementType = 'div', 
->(props:ViewProps<T>) => ReactElement

package/src/components/index.ts

@@ -1,23 +0,0 @@
-export * from './Button'
-export * from './Text'
-export * from './TextInput'
-export * from './View' 
-export * from './Link'
-export * from './Checkbox' 
-export * from './Modal' 
-export * from './ActivityIndicator' 
-export * from './RadioInput' 
-export * from './Icon' 
-export * from './FileInput' 
-export * from './Overlay' 
-export * from './Drawer' 
-export * from './ContentView' 
-export * from './FlatList' 
-export * from './Touchable'
-export * from './Tooltip'
-export * from './Slider'
-export * from './Select'
-
-export * from './PageRouter'
-export * from './CenterWrapper'
-export * from './HorizontalScroll'

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from './components';
-export * from './lib/hooks';
-export * from './lib/utils';
-export * from './types/utility';

package/src/lib/hooks.ts

@@ -1,59 +0,0 @@
-import { AnyFunction, onUpdate } from '@codeleap/common';
-import {  useRef, useState } from 'react';
-import {v4} from 'uuid'
-export function useWindowSize(){
-  const [size, setSize] = useState([window.innerWidth, window.innerWidth])
-
-  function handleResize(){
-    setSize([window.innerWidth, window.innerHeight])
-  }
-
-  onUpdate(() => {
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [])
-
-  return size
-}
-
-type UseClickOutsideOpts = {customId?:string, deps:any[]}
-export function useClickOutside(callback: AnyFunction, {customId, deps = []} : UseClickOutsideOpts){
-  const id = useRef(customId || v4()).current
-
-  function onClick(e:Event){
-    const element = document.getElementById(id)
-    const isInside = element.contains(e.target as Node)
-   
-    if (!isInside){
-      callback(e)
-    }
-  }
- 
-  onUpdate(() => {
-    document.addEventListener('click', onClick)
-    return () => {
-      document.removeEventListener('click', onClick)
-    }
-  }, [...deps, onClick])
-
-  return id
-}
-
-export function useScrollEffect(
-  effect: (passed: boolean, current: number) => any,
-  breakpoint: number,
-) {
-  function handleScroll() {
-    const passed = window.scrollY > breakpoint
-    effect(passed, window.scrollY)
-  }
-
-  onUpdate(() => {
-    document.addEventListener('scroll', handleScroll)
-    return () => {
-      document.removeEventListener('scroll', handleScroll)
-    }
-  }, [breakpoint])
-}

package/src/lib/logger.ts

@@ -1,15 +0,0 @@
-import { Logger } from '@codeleap/common';
-
-export const logger = new Logger({
-  Environment: {
-    IsDev: true,
-
-  },
-  Sentry: {
-    enable: false,
-
-  },
-  Logger: {
-    Level: 'debug',
-  },
-})

package/src/lib/utils/cookies.ts

@@ -1,19 +0,0 @@
-import Cookies from 'js-cookie'
-
-const get = (key) => (
-  Cookies.get(key)
-)
-
-const set = (key, value) => (
-  Cookies.set(key, value, { expires: 365 })
-)
-
-const remove = (key) => (
-  Cookies.remove(key)
-)
-
-export default {
-  get,
-  set,
-  remove,
-}

package/src/lib/utils/index.ts

@@ -1,4 +0,0 @@
-export * from './pollyfils/scroll'
-export * from './stopPropagation'
-export { default as url } from 'url-parse'
-export { default as Cookies } from './cookies'