@codeleap/web 1.0.1 → 1.1.3

package/src/components/Link.tsx

@@ -1,51 +0,0 @@
-/** @jsx jsx */
-import {  jsx } from '@emotion/react'
-import { standardizeVariants, useStyle } from '@codeleap/common';
-import { ElementType } from 'react';
-import { TextProps } from './Text';
-import { scrollToElem } from '../lib/utils/pollyfils/scroll';
-import { stopPropagation } from '../lib/utils/stopPropagation';
-import { Text } from './Text';
-
-export type LinkProps<T extends ElementType> = TextProps<T> & {
-  openNewTab?:boolean
-}
-
-export const Link = <T extends ElementType = 'a'>(linkProps: LinkProps<T>) => {
-  const {  variants, to, openNewTab, component = 'a', ...props } = linkProps
-
-  const isExternal =  ['http', 'tel', 'mailto'].some(start => to.startsWith(start))
-
-  const Component = isExternal ? 'a' : component
-  const {logger} = useStyle()
-  function handleClick(event: React.MouseEvent){
-    logger.log('Link pressed', {to, text: linkProps.text }, 'Component')
-    if (to){
-      if (to.startsWith('#')){
-        event.preventDefault()
-        stopPropagation(event)
-        
-        scrollToElem(to)
-      }
-      if (openNewTab){
-        window.open(to, '_blank')
-      }
-    }
-  }
-
-  const passedVariants = standardizeVariants(variants || []) as TextProps<T>['variants']
-  
-  const linkPropOverride = {
-    [isExternal ? 'href' :  'to']: to,
-  }
-
-  return <Text   
-    component={Component}
-    {...props}
-    {...linkPropOverride} 
-    text={props.text} 
-   
-    variants={[...passedVariants]}
-    onClick={handleClick}
-  />
-}

package/src/components/Modal/index.tsx

@@ -1,150 +0,0 @@
-/** @jsx jsx */
-import { AnyFunction, ComponentVariants, IconPlaceholder, ModalComposition, ModalStyles, useComponentStyle } from '@codeleap/common';
-import { jsx } from '@emotion/react';
-import { ReactNode, useEffect, useLayoutEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { v4 } from 'uuid';
-import { StylesOf } from '../../types/utility';
-import {Button} from '../Button'
-import {View} from '../View'
-import {Text} from '../Text'
-import { Overlay } from '../Overlay';
-
-export * from './styles'
-
-export type ModalProps = {
-  
-  open: boolean;
-  title?: React.ReactNode;
-  toggle: AnyFunction;
-  styles?: StylesOf<ModalComposition>
-  accessible?:boolean
-  showClose?: boolean
-  closable?: boolean
-  footer?: ReactNode
-} & ComponentVariants<typeof ModalStyles> 
-
-
-
-function focusModal(event: FocusEvent, id: string) {
-  event.preventDefault();
-  const modal = document.getElementById(id);
-  if (modal) {
-    modal.focus();
-  }
-}
-export const ModalContent: React.FC<ModalProps & { id: string }> = (modalProps) => {
-  const { 
-    children,
-    closable = true,
-    open,
-    title = '',
-    toggle,
-    id,
-    responsiveVariants,
-    variants,
-    styles,
-    showClose = true,
-    footer,
-    ...props 
-  } = modalProps
-  
-  const variantStyles = useComponentStyle('Modal', {
-    responsiveVariants,
-    variants,
-    styles,
-  })
-
-  function closeOnEscPress(e: React.KeyboardEvent<HTMLDivElement>) {
-    if (e.key === 'Escape') {
-      toggle();
-    }
-  }
-
-  useLayoutEffect(() => {
-    const modal = document.getElementById(id);
-    if (modal) {
-      modal.focus();
-    }
-  }, [id]);
-
-  return (
-    <View  aria-hidden={!open}  css={variantStyles.wrapper} className={open ? 'visible' : ''}>
-      <Overlay  visible={open} onClick={closable ? toggle : () => {}} css={variantStyles.overlay} />
-      <View
-        component='section'
-        css={{
-          ...variantStyles.box,
-          // visibility: open ? 'visible' : 'hidden',
-        }}
-        className='content'
-        onKeyDown={closeOnEscPress}
-        tabIndex={0}
-        id={id}
-        aria-modal={true}
-        role='dialog'
-        aria-describedby={`${id}-title`}
-        aria-label='Close the modal by presing Escape key'
-        {...props}
-      >
-        {
-          (title || showClose) && 
-
-            <View component='header' className='modal-header header' id={`${id}-title`} css={variantStyles.header}>
-          
-              {typeof title === 'string' ? <Text text={title}/> : title}
-            
-              {
-                (showClose && closable) &&
-              <Button rightIcon={'close' as IconPlaceholder} variants={['icon']} onPress={toggle}/>
-              }
-            </View>
-        }
-        
-        <View css={variantStyles.body}>
-          {children}
-        </View>
-        {
-          footer && <View component='footer' css={variantStyles.footer}> 
-            {footer}
-          </View>
-        }
-      </View>
-    </View>
-  );
-};
-
-export const Modal: React.FC<ModalProps> = ({accessible, ...props}) => {
-  const modalId = useRef(v4());
-
-  useEffect(() => {
-    if (accessible){
-
-      const currentId = modalId.current;
-      const appRoot = document.body;
-      appRoot.addEventListener('focusin', (e) => focusModal(e, currentId));
-      return () => appRoot.removeEventListener('focusin', (e) => focusModal(e, currentId));
-    }
-  }, []);
-
-  useEffect(() => {
-    if (accessible){
-
-      const appRoot = document.body;
-      appRoot.setAttribute('aria-hidden', `${props.open}`);
-      appRoot.setAttribute('tabindex', `${-1}`);
-    }
-  }, [props.open]);
-
-  if (accessible){
-    if (props.open) {
-      document.body.style.overflow = 'hidden';
-      return ReactDOM.createPortal(<ModalContent {...props} id={modalId.current} />, document.body);
-    } else {
-      document.body.style.overflow = 'visible';
-      return null;
-    }
-  }
-
-  return <ModalContent {...props} id={modalId.current} />
-};

package/src/components/Modal/styles.ts

@@ -1,49 +0,0 @@
-import { createDefaultVariantFactory, ModalComposition, ModalStyles } from '@codeleap/common'
-
-const createModalStyle = createDefaultVariantFactory<ModalComposition>()
-
-const transitionDuration = '0.3s'
-
-export const WebModalStyles = {
-  ...ModalStyles,
-  default: createModalStyle((theme) => {
-    const defaultStyles = ModalStyles.default(theme)
-
-    return {
-      ...defaultStyles,
-      wrapper: {
-        ...defaultStyles.wrapper,
-        transition: `visibility 0.01s ease`,
-        transitionDelay: transitionDuration,
-        '& .content': {
-          transform: 'scale(0)',
-          transition: `transform ${transitionDuration} ease`,
-        },
-        '&.visible': {
-          visibility: 'visible',
-          transitionDelay: '0s',
-        },
-        '&.visible .content': {
-          visibility: 'visible',
-          transform: 'scale(1)',
-        },
-        '&.visible .overlay': {
-          opacity: 0.5,
-        },
-      },
-      box: {
-        ...defaultStyles.box,
-        width: '45vw',
-    
-      },
-      overlay: {
-        ...defaultStyles.overlay,
-          
-        transition: `opacity ${transitionDuration} ease`,
-      },
-    
-    }
-
-  }),
-}
-

package/src/components/Overlay.tsx

@@ -1,25 +0,0 @@
-import { ComponentVariants, OverlayComposition, OverlayStyles, SmartOmit, StylesOf, useComponentStyle } from '@codeleap/common'
-import { Touchable, TouchableProps } from './Touchable'
-import { View, ViewProps } from './View'
-
-export type OverlayProps = {
-  visible?:boolean
-  styles?: StylesOf<OverlayComposition>
-  onPress?: TouchableProps<'div'>['onClick']
-} & ComponentVariants<typeof OverlayStyles> & Partial<SmartOmit<ViewProps<'div'>, 'variants' | 'responsiveVariants'>>
- 
-export const Overlay:React.FC<OverlayProps> = (overlayProps) => {
-  const {visible, responsiveVariants, variants, styles, ...props} = overlayProps
-
-  const variantStyles = useComponentStyle('Overlay', {
-    variants, responsiveVariants, styles,
-  })
-
-  const Component = props.onClick||props.onPress ? Touchable : View
-
-  return <Component  css={{
-    ...variantStyles.wrapper,
-    transition: 'opacity 0.2s ease',
-    ...(visible ? variantStyles['wrapper:visible'] : {}),
-  }} {...props}/> 
-}

package/src/components/PageRouter/Menu.tsx

@@ -1,49 +0,0 @@
-import {  View } from '../View';
-import { CenterWrapper } from '../CenterWrapper';
-import {HorizontalScroll} from '../HorizontalScroll';
-import { MenuItem, MenuItemProps } from './MenuItem';
-import { useStyle, MenuComposition } from '@codeleap/common';
-import { StylesOf } from '../../types/utility';
-
-const TabsWrapper = ({children, styles}) => {
-  const {Theme} = useStyle()
-  const isMobile = Theme.hooks.down('small')
-  
-
-
-  const wrapperStyle = isMobile ? styles.topMenu : styles.sideMenu
-
-  if (isMobile){
-    return <View css={[wrapperStyle]}>
-      <CenterWrapper>
-        <View css={styles.mobileMenu}>
-          <HorizontalScroll css={styles.horizontalScroll}>
-            {children}
-          </HorizontalScroll>
-        </View>
-      </CenterWrapper>
-    </View>
-  }
-
-  return <View css={[wrapperStyle]}>
-    {children}
-  </View>
-}
-
-type RouterMenuProps = {
-    items: MenuItemProps['data'][]
-    styles?: StylesOf<MenuComposition>
-}
-
-
-export const Menu:React.FC<RouterMenuProps> = ({items, styles}) => {
-
-  
-  return <TabsWrapper styles={styles}>
-    {
-      items.map(data => <MenuItem  data={data} key={data.path} styles={styles}/>)
-    }
-  </TabsWrapper>
-}
-
-

package/src/components/PageRouter/MenuItem.tsx

@@ -1,55 +0,0 @@
-import { Text } from '../Text'
-import { Icon } from '../Icon'
-import { Link, LinkProps } from '../Link'
-import { IconPlaceholder, MenuComposition, StylesOf, useStyle } from '@codeleap/common';
-import { url } from '../../lib/utils';
-import {Link as IntlLink} from 'gatsby-plugin-intl'
-
-const RouterLink:React.FC<LinkProps<typeof IntlLink>> = (props) => <Link component={IntlLink} {...props}/>
-
-export type MenuItemProps = {
-    data: {
-        icon: IconPlaceholder
-        title:string
-        path:string
-    }
-    styles: StylesOf<MenuComposition>
-}
-
-export const MenuItem:React.FC<MenuItemProps> = (props) => {
-  const { styles} = props
-  const { title, path, icon } = props.data;
-    
-  const { pathname } = url();
-    
-  const selected = pathname.includes(path);
-  const { Theme } = useStyle()
-  const isMobile = Theme.hooks.down('small')
-
-  if (isMobile){
-    return   <RouterLink  to={path} css={[styles['menuItem:mobile']]}>
-      <Text
-        variant={'p3'}
-        css={[
-          styles['menuItem:text:mobile'],
-          selected && styles['menuItem:text:selected'],
-        ]}
-        msg={title}
-      />
-      <Icon name={icon} />
-    </RouterLink>
-  }
-
-  return (<RouterLink to={path}>
-    <Icon name={icon} />
-    <Text
-      variant={'p3'}
-      css={[
-        styles['menuItem:text'], 
-        selected && styles['menuItem:text:selected'],
-      ]}
-      msg={title}
-    />
-  </RouterLink>
-  );
-}

package/src/components/PageRouter/Router.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Router as ReachRouter } from '@reach/router';
-
-type RouterProps = {
-  basePath:string
-  style?:any
-  defaultPath?:string
-};
-
-export const Router: React.FC<RouterProps> = (props) => {
-  const { children, style, basePath, defaultPath } = props;
-  const base = `/:language${basePath}`;
-
-
-  return (
-    <React.Fragment>
-    
-      <ReachRouter basepath={base}>
-        {children}
-      </ReachRouter>
-    </React.Fragment>
-  );
-};

package/src/components/PageRouter/index.tsx

@@ -1,81 +0,0 @@
-import { View } from '../View'
-import React, { useMemo } from 'react'
-
-import { Menu } from './Menu'
-import { Router } from './Router'
-import { ComponentVariants, IconPlaceholder, PageRouterComposition, PageRouterStyles, useComponentStyle } from '@codeleap/common'
-import { StylesOf } from '../../types/utility'
-import { Helmet } from 'react-helmet'
-import { url } from '../../lib/utils'
-
-export type RouteProps = {
-  title?: string
-  path?: string
-  menuIcon?: IconPlaceholder
-  
-}
-
-export * from './Router'
-
-type RouterPageProps = {
-  basePath:string 
-  styles?: StylesOf<PageRouterComposition>
-  title?: string
-} & ComponentVariants<typeof PageRouterStyles>
-
-export const RouterPage:React.FC<RouterPageProps> = (props) => {
-  const {children,  basePath,  variants, title: pageGroupTitle, responsiveVariants, styles} = props
-  const pathName = url().pathname
-
-  const {menuItems, defaultPath} = useMemo(() => {
-    const items = []
-    
-    let defaultPath = ''
-
-    React.Children.forEach(children, (c) => {
-      if (React.isValidElement(c) && c.props){
-        const {title, path, menuIcon} = c.props
-        if ([title, path, menuIcon].some((i) => !i)){
-          return
-        }
-        if (c.props.default) defaultPath = path
-        items.push({
-          ...c.props,
-          title,
-          path: `${basePath}${path}`,
-          icon: menuIcon,
-        })
-      }
-    })
-
-    return {
-      menuItems: items,
-      defaultPath,
-    }
-
-  }, [children]) 
-
-  const variantStyles = useComponentStyle('PageRouter', {variants, responsiveVariants, styles})
-  
-  const currentPage = menuItems.find(({path}) => pathName.includes(path))
-  return <>
-    <Helmet>
-      <title>
-        {(pageGroupTitle ? `${pageGroupTitle} | ` : '') + (currentPage ? currentPage?.title : '') }
-      </title>
-    </Helmet>
-    <Menu 
-      items={menuItems}
-      styles={variantStyles}
-    />
-    <View css={variantStyles.content}>
-      <Router
-        defaultPath={defaultPath}
-        basePath={basePath}
-      >
-        {children}
-      </Router>
-    </View>
-  </>
-  
-}

package/src/components/RadioInput/index.tsx

@@ -1,72 +0,0 @@
-import { ReactNode, useRef, ComponentPropsWithoutRef } from 'react'
-import {v4} from 'uuid'
-
-import {Text } from '../Text'
-import { Touchable } from '../Touchable'
-import { ComponentVariants, RadioInputComposition, RadioInputStyles, StylesOf, useComponentStyle } from '@codeleap/common'
-import { View } from '../View'
-export { WebRadioInputStyles } from './styles'
-
-type RadioItem<T extends unknown = any> = {
-    value: T,
-    label: ReactNode
-}
-
-const getRadioStyle = (props) => useComponentStyle('RadioInput', props)
-
-export type RadioButtonProps = Omit<ComponentPropsWithoutRef<'input'>, 'style'> & {
-    item: RadioItem
-    select: () => void
-    style: ReturnType<typeof getRadioStyle>
-}   
-
-export type RadioGroupProps<T> = {
-    options: RadioItem<T>[]
-    value: T
-    onValueChange(value:T):void
-    label:ReactNode
-    styles?: StylesOf<RadioInputComposition>
-} & ComponentVariants<typeof RadioInputStyles>
-
-
-export const RadioButton:React.FC<RadioButtonProps> = ({item, select, style, checked, ...props}) => {
-  const styleByState = checked ? style['button:checked'] : style['button:unchecked']
-  return <Touchable  onPress={select} css={style.itemWrapper} >
-    <View  css={{
-      ...style.button,
-      ...styleByState,
-      '&:after': {
-        ...style['button:mark'],
-        ...styleByState?.['&:after'],
-      },
-    }}/>
-    {typeof item.label === 'string' ? <Text text={item.label} css={style.itemText}/> : item.label }
-  </Touchable>
-}
-
-
-export const RadioGroup =  <T extends unknown>(radioGroupProps:RadioGroupProps<T>) => {
-  const {options, value, onValueChange, label, responsiveVariants, variants, styles} = radioGroupProps
-  const radioName = useRef(v4()).current
-
-  const radioStyle = getRadioStyle({
-    responsiveVariants,
-    variants,
-    styles, 
-  })
-  return <View css={radioStyle.wrapper}>
-    {typeof label === 'string' ? <Text text={label}/> : label }
-    <View css={radioStyle.listWrapper}>
-      {
-        options?.map((item, idx) =>  <RadioButton 
-          item={item} 
-          key={idx} 
-          style={radioStyle}
-          name={radioName}
-          checked={value === item.value}
-          select={() => onValueChange(item.value)} 
-        />)
-      }
-    </View>
-  </View>
-}

package/src/components/RadioInput/styles.ts

@@ -1,57 +0,0 @@
-import { createDefaultVariantFactory, RadioInputComposition, RadioInputStyles } from '@codeleap/common';
-
-const createRadioStyle = createDefaultVariantFactory<RadioInputComposition>()
-
-const defaultStyles = RadioInputStyles.default
-
-export const WebRadioInputStyles = {
-  ...RadioInputStyles,
-  default: createRadioStyle((theme) => {
-    const style = defaultStyles(theme)
-    return {
-      ...style,
-      itemWrapper: {
-        ...style.itemWrapper,
-        cursor: 'pointer',
-      },
-      button: {
-        height: '1em',
-        width: '1em',
-        borderRadius: theme.borderRadius.large,
-        border: theme.border.primary(1),
-        
-        position: 'relative',
-        ...theme.spacing.marginRight(1),
-
-      },
-      'button:mark': {
-        background: theme.colors.primary,
-        content: '""',
-        position: 'absolute',
-        left: '50%',
-        top: '50%',
-        
-        transform: 'translate(-50%,-50%)',
-        borderRadius: theme.borderRadius.large,
-        height: '50%',
-        width: '50%',
-        visibility: 'hidden',
-      },
-      'button:checked': {
-        '&:after': {
-          visibility: 'visible',
-
-        },
-      },
-    }
-  }),
-  square: createRadioStyle(() => ({
-    'button:mark': {
-      borderRadius: '1px',
-    },
-    button: {
-      borderRadius: '1px',
-
-    },
-  })),
-}

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} />
-}