@codeleap/web 1.0.0

package/src/components/Select.tsx

@@ -0,0 +1,60 @@
+/** @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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,27 @@
+/** @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

@@ -0,0 +1,219 @@
+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 [_ig, 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'] : {} ),
+    ...variantStyles.leftIcon, 
+    ...(showError ? variantStyles['leftIcon:error'] : {} ),
+  }
+  
+  const rightIconStyle = {
+    ...variantStyles.icon,
+    ...(showError ? variantStyles['icon:error'] : {} ),
+    ...variantStyles.rightIcon, 
+    ...(showError ? variantStyles['rightIcon:error'] : {} ),
+  }
+
+  return (
+    <View
+      css={[variantStyles.wrapper, showError && variantStyles['wrapper:error']]}
+    >
+      <InputLabel label={label} style={variantStyles.label}/>
+
+      <div css={[variantStyles.innerWrapper, 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, showError && variantStyles['textField:error']]}
+        />
+        {
+          visibilityToggle ? 
+            <InputIcon  name={
+                (textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden') as IconPlaceholder
+            } action={() => setTextVisible()} style={rightIconStyle}/>
+            :
+            <InputIcon {...rightIcon} style={rightIconStyle}/>
+        }
+      </div>
+      
+      <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

@@ -0,0 +1,138 @@
+/** @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

@@ -0,0 +1,47 @@
+/** @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

@@ -0,0 +1,54 @@
+/** @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

@@ -0,0 +1,23 @@
+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

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

package/src/lib/hooks.ts

@@ -0,0 +1,42 @@
+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
+}

package/src/lib/logger.ts

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,19 @@
+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

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