@codeleap/web 1.1.0 → 1.1.1

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'

package/src/lib/utils/pollyfils/scroll.ts

@@ -1,59 +0,0 @@
-// native smooth scrolling for Chrome, Firefox & Opera
-// @see: https://caniuse.com/#feat=css-scroll-behavior
-const nativeSmoothScrollTo = elem => {
-  window.scroll({
-    behavior: 'smooth',
-    left: 0,
-    top: elem.getBoundingClientRect().top + window.pageYOffset,
-  });
-};
-
-// polyfilled smooth scrolling for IE, Edge & Safari
-const smoothScrollTo = (to, duration) => {
-  const element = document.scrollingElement || document.documentElement,
-    start = element.scrollTop,
-    change = to - start,
-    startDate = +new Date();
-
-  // t = current time
-  // b = start value
-  // c = change in value
-  // d = duration
-  const easeInOutQuad = (t, b, c, d) => {
-    t /= d/2;
-    if (t < 1) return c/2*t*t + b;
-    t--;
-    return -c/2 * (t*(t-2) - 1) + b;
-  };
-
-  const animateScroll = () => {
-    const currentDate = +new Date();
-    const currentTime = currentDate - startDate;
-    element.scrollTop = parseInt(easeInOutQuad(currentTime, start, change, duration));
-    if (currentTime < duration) {
-      requestAnimationFrame(animateScroll);
-    } else {
-      element.scrollTop = to;
-    }
-  };
-  animateScroll();
-};
-
-// detect support for the behavior property in ScrollOptions
-const supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style;
-
-// smooth scrolling stub
-export const scrollToElem = elemSelector => {
-  if (!elemSelector) {
-    return;
-  }
-
-  const elem = document.querySelector(elemSelector);
-  if (elem) {
-    if (supportsNativeSmoothScroll) {
-      nativeSmoothScrollTo(elem);
-    } else {
-      smoothScrollTo(elem.offsetTop, 600);
-    }
-  }
-};

package/src/lib/utils/stopPropagation.ts

@@ -1,17 +0,0 @@
-import { AnyFunction } from '@codeleap/common'
-
-export function stopPropagation(event:any){
-  const tryCalls = [
-    event?.stopPropagation,
-    event?.preventDefault,
-        event.nativeEvent?.stopImmediatePropagation as AnyFunction,
-  ]
-
-  for (const call of tryCalls){
-    try {
-      call()
-    } catch (e){
-    }
-  }
-
-}