@codeleap/web 1.0.0

package/src/components/Icon.tsx

@@ -0,0 +1,26 @@
+import { IconPlaceholder, useStyle } from '@codeleap/common'
+
+export type IconProps = {
+    name:IconPlaceholder
+    style?: {
+      color: string
+      size?:string|number
+      width?:string|number
+      height?:string|number
+    }
+
+}
+
+export const Icon:React.FC<IconProps> = ({name, style}) => {
+  const {Theme} = useStyle()
+  if (!name) return null
+  const Component = Theme?.icons?.[name]
+  
+  const {logger} = useStyle()
+
+  if (!Component) {
+    logger.warn('Icon', `No icon found in theme for name "${name}"`, 'Component')
+    return null
+  }
+  return <Component style={style}/>
+}

package/src/components/Link.tsx

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,57 @@
+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',
+
+    },
+  })),
+}