@codeleap/web 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "git@github.com:codeleap-uk/codeleap-lib.git",
@@ -15,7 +15,8 @@
   },
   "scripts": {
     "build": "tsc --build",
-    "lint": "./node_modules/.bin/eslint -c .eslintrc.js \"./src/**/*.{ts,tsx,js,jsx}\""
+    "lint": "./node_modules/.bin/eslint -c .eslintrc.js \"./src/**/*.{ts,tsx,js,jsx}\"",
+    "publish": "npm publish"
   },
   "dependencies": {
     "@emotion/css": "^11.7.1",

package/.eslintignore

@@ -1,2 +0,0 @@
-node_modules
-dist

package/.eslintrc.js

@@ -1,3 +0,0 @@
-module.exports = {
-  ...require('@codeleap/config/.eslintrc'),
-}

package/.turbo/turbo-build.log

@@ -1,2 +0,0 @@
-@codeleap/web:build: cache hit, replaying output 25fd6d1ac903fccd
-@codeleap/web:build: $ tsc --build

package/src/components/ActivityIndicator/index.tsx

@@ -1,55 +0,0 @@
-import { View } from '../View'
-import { CSSObject, keyframes } from '@emotion/react'
-import { useComponentStyle,  ComponentVariants, ActivityIndicatorStyles, ActivityIndicatorComposition } from '@codeleap/common'
-import { StylesOf } from '../../types/utility'
-
-export * from './styles'
-
-const spin = keyframes`
-    from {
-        transform: rotate(0deg);
-    }
-    to{ 
-        transform: rotate(360deg);
-    }
-`
-
-
- 
-export type ActivityIndicatorProps = {
-    animating?:boolean
-    hidesWhenStopped?:boolean
-    styles?:StylesOf<ActivityIndicatorComposition>
-    css?:CSSObject
-} &   ComponentVariants<typeof ActivityIndicatorStyles>
-
-export const ActivityIndicator:React.FC<ActivityIndicatorProps> = (indicatorProps) => {
-  const { 
-    animating = true,
-    hidesWhenStopped = true,
-  
-    variants, 
-    responsiveVariants,
-    styles,
-    ...viewProps
-  } = indicatorProps
-
-
-  const variantStyles = useComponentStyle('ActivityIndicator', {
-    styles,
-    responsiveVariants,
-    variants,
-  })
-
-  if (!animating && hidesWhenStopped){
-    return null
-  }
- 
-  return <View {...viewProps} css={variantStyles.wrapper}>
-    <View css={{...variantStyles.circle, ...variantStyles.backCircle}}/>
-    <View css={{...variantStyles.circle, ...variantStyles.frontCircle, 
-      animation: `${spin} 1s infinite`, 
-      animationPlayState: animating ? 'running' :  'paused',
-    }}/>
-  </View>
-}

package/src/components/ActivityIndicator/styles.ts

@@ -1,18 +0,0 @@
-
-import { ActivityIndicatorComposition, ActivityIndicatorStyles, createDefaultVariantFactory } from '@codeleap/common'
-
-
-
-const createActivityIndicatorStyle = createDefaultVariantFactory<ActivityIndicatorComposition>()
-
-const getDefault = ActivityIndicatorStyles.default
-
-export const WebActivityIndicatorStyles = {
-  ...ActivityIndicatorStyles,
-  default: createActivityIndicatorStyle((theme) =>  {
-    const defaults = getDefault(theme)
-    return defaults
-
-  }),
-}
-

package/src/components/Button.tsx

@@ -1,67 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-import { useComponentStyle, ButtonStyles, ComponentVariants, ButtonComposition } from '@codeleap/common';
-import React, { ComponentPropsWithRef } from 'react'
-import { StylesOf } from '../types/utility'; 
-import { Text } from './Text';
-import { Touchable } from './Touchable';
-import { Icon } from './Icon';
-import { ActivityIndicator } from './ActivityIndicator';
-import { IconPlaceholder } from '@codeleap/common';
-
-type NativeButtonProps = ComponentPropsWithRef<'button'> 
-
-export type ButtonProps = NativeButtonProps &  ComponentVariants<typeof ButtonStyles>  & {  
-  text?:string
-  rightIcon?: IconPlaceholder
-  icon?: IconPlaceholder
-  onPress?:NativeButtonProps['onClick']
-  styles?: StylesOf<ButtonComposition>
-  loading?: boolean
-  
-} 
-
-export const Button:React.FC<ButtonProps> = (buttonProps) => {
-  const { 
-    variants = [],
-    responsiveVariants = {},
-    children,
-    icon,
-    text,
-    loading,
-    styles,
-    onPress,
-    rightIcon,
-    ...props 
-  } = buttonProps
-  
-  
-  const variantStyles = useComponentStyle('Button', {
-    responsiveVariants,
-    variants,
-    styles,
-  })  
-
-
-  function handlePress(e:Parameters<ButtonProps['onPress']>[0]){
-    props.onClick && props.onClick(e)
-    onPress && onPress(e)
-  }
-
- 
-  return (
-    <Touchable
-      css={variantStyles.wrapper}
-      component='button'
-      onClick={handlePress}
-      {...props}
-    >
-      {loading && <ActivityIndicator css={variantStyles.loader} />}
-      {!loading && <Icon name={icon} style={{...variantStyles.icon, ...variantStyles.leftIcon}}/>}
-      {children || <Text text={text} styles={{
-        text: variantStyles.text,
-      }}/>}
-      <Icon name={rightIcon} style={{...variantStyles.icon, ...variantStyles.rightIcon}}/>
-    </Touchable>
-  )
-}

package/src/components/CenterWrapper.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { View } from './View';
-import { StylesOf } from '../types/utility';
-import { ComponentVariants, useComponentStyle, CenterWrapperComposition, CenterWrapperStyles } from '@codeleap/common';
-
-export type CenterWrapperProps = {
-  styles?: StylesOf<CenterWrapperComposition>
-} & ComponentVariants<typeof CenterWrapperStyles>
-
-export const CenterWrapper:React.FC<CenterWrapperProps> = (props) => {
-  const {  styles: propStyles = {}, children, variants, styles, responsiveVariants } = props;
-
-  const variantStyles = useComponentStyle('CenterWrapper', {
-    variants, styles, responsiveVariants,
-  })
-
-  return (
-    <View  css={[variantStyles.wrapper, propStyles.wrapper]}>
-      <View css={[variantStyles.innerWrapper, propStyles.innerWrapper]}>{children}</View>
-    </View>
-  );
-}
-
-

package/src/components/Checkbox/index.tsx

@@ -1,47 +0,0 @@
-
-/** @jsx jsx */
-import {  jsx } from '@emotion/react'
-import {  ComponentVariants, StylesOf, useComponentStyle, useStyle } from '@codeleap/common'
-import { ComponentPropsWithRef } from 'react'
-import { View } from '../View' 
-import { Text } from '../Text'
-import {WebCheckboxComposition, WebCheckboxStyles  as CheckboxStyles} from './styles'
-type NativeCheckboxProps = ComponentPropsWithRef<'input'>
-export * from './styles'
-export type CheckboxProps = NativeCheckboxProps & {
-    checked?:boolean 
-    onValueChange?: (checked:boolean) => any
-    label?: React.ReactNode
-    styles?:StylesOf<WebCheckboxComposition>
-} & ComponentVariants<typeof CheckboxStyles>
-
-export const Checkbox = (checkboxProps:CheckboxProps) => {
-  const {checked, onValueChange, variants= [], responsiveVariants = {}, label, onChange, styles, ...props} = checkboxProps
-
-  function handleChange(e:React.ChangeEvent<HTMLInputElement>){
-    onChange && onChange(e)
-    onValueChange && onValueChange(e.target.checked)
-  }
-
-  const variantStyles  = useComponentStyle('Checkbox', {
-    responsiveVariants,
-    variants,
-    styles,
-  }) as StylesOf<WebCheckboxComposition>
-  
-  const {logger} = useStyle()
-  logger.log('Checkbox Style', variantStyles, 'Style')
-  
-  return <View component='label' css={{...variantStyles.wrapper }} >
-    <input {...props} css={variantStyles.input}  onChange={handleChange}  type='checkbox' checked={checked}/>
-    <span className='checkbox-label' css={{
-      ...variantStyles.checkmarkWrapper,
-      '&:after': {
-        ...variantStyles.checkmark,
-      },
-    }}/>
-    {
-      typeof label === 'string' ?  <Text  text={label}  styles={{text: variantStyles.label}}/> : label
-    }
-  </View>
-}

package/src/components/Checkbox/styles.ts

@@ -1,57 +0,0 @@
-import {createDefaultVariantFactory, includePresets} from '@codeleap/common'
-export type WebCheckboxComposition = 'wrapper' | 'label' | 'input' | 'checkmark' | 'checkmarkWrapper';
-
-const createCheckboxStyle = createDefaultVariantFactory<WebCheckboxComposition>()
-
-const presets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })))
-
-export const WebCheckboxStyles = {
-  ...presets,
-  default: createCheckboxStyle((theme) => ({
-    wrapper: {
-      display: 'flex',
-      alignItems: 'center',
-      position: 'relative',
-      cursor: 'pointer',
-      '.checkbox-label': {
-        height: '18px',
-        width: '18px',
-        border: `1px solid ${theme.colors.gray}`,
-        borderRadius: theme.borderRadius.small,
-        position: 'absolute',
-        overflow: 'hidden',
-        transition: 'background 0.3s ease',
-        ':after': {
-          content: '""',
-          border: `2px solid ${theme.colors.white}`,
-          borderLeftColor: 'transparent',
-          borderTopColor: 'transparent',
-          height: '40%',
-          width: '20%',
-          position: 'absolute',
-          left: '50%',
-          top: '40%',
-         
-          transform: 'translate(-50%,-50%) rotate(45deg) scale(0)',
-          transition: 'transform 0.2s ease',
-        },
-      },
-     
-    },
-    label: {
-      ...theme.spacing.marginLeft(1),
-      
-     
-    },
-    input: {
-      visibility: 'hidden',
-      '&:checked + .checkbox-label': {
-        '&:after': {
-          transform: 'translate(-50%,-50%) rotate(45deg) scale(1)',
-        },
-        background: theme.colors.primary,
-      },
-    },
-  })),
-
-}

package/src/components/ContentView.tsx

@@ -1,48 +0,0 @@
-import { ComponentVariants, ContentViewStyles,  useComponentStyle, ViewComposition } from '@codeleap/common'
-import { ActivityIndicator } from '.'
-import { ViewProps, View } from './View'
-import { Text } from './Text'
-import { StylesOf } from '../types/utility'
-
-export type ContentViewProps = Omit<ViewProps<'div'>, 'variants' | 'responsiveVariants'> & {
-    placeholderMsg: string
-    loading?:boolean
-    styles?: StylesOf<ViewComposition>
-} & ComponentVariants<typeof ContentViewStyles>
-
-const WrapContent = ({children,  ...props}:Partial<ContentViewProps>) => <View {...props} >{children}</View>
-
-export const ContentView:React.FC<ContentViewProps> = (rawProps) => {
-  const {
-    children,
-    placeholderMsg,
-    loading,
-    variants,
-    responsiveVariants,
-    styles,
-    ...props
-  } = rawProps
-
-  const variantStyle = useComponentStyle('ContentView', {
-    variants,
-    responsiveVariants,
-    styles,
-  })
-    
-  if (loading){
-    return <WrapContent {...props} css={{...variantStyle.wrapper}}>
-      <ActivityIndicator css={variantStyle.loader}/>
-    </WrapContent>
-  }
-  const hasChildren = Object.keys(children||{}).length > 0
-  if (hasChildren){
-    return <WrapContent {...props}css={variantStyle.wrapper}>
-      {children}
-    </WrapContent>
-  }
-
-  return <WrapContent {...props} css={variantStyle.wrapper}>
-    <Text text={placeholderMsg} css={variantStyle.placeholder}/>
-  </WrapContent>
-    
-}

package/src/components/Drawer.tsx

@@ -1,114 +0,0 @@
-
-import { AnyFunction, ComponentVariants, DrawerComposition, DrawerStyles, IconPlaceholder, useComponentStyle } from '@codeleap/common'
-import { CSSObject } from '@emotion/react'
-import React, { ReactNode } from 'react'
-import { Overlay } from './Overlay'
-import { View } from './View'
-import { Text } from './Text'
-import { Button } from './Button'
-import { StylesOf } from '../types/utility'
-
-
-const axisMap = {
-  top: [-1, 'Y'],
-  bottom: [1, 'Y'],
-  left: [-1, 'X'],
-  right: [1, 'X'],
-} as const
-
-export type DrawerProps = {
-    open: boolean
-    toggle: AnyFunction
-    darkenBackground?:boolean
-    size: string|number
-    showCloseButton?:boolean
-    title?:ReactNode
-    footer?: ReactNode
-    position?: keyof typeof axisMap
-    styles?: StylesOf<DrawerComposition>
-    animationDuration?:string
-} & ComponentVariants<typeof DrawerStyles>
-
-const resolveHiddenDrawerPosition = (position: DrawerProps['position']):[string, string, CSSObject] => {
-  const [translateOrient, translateAxis] = axisMap[position]
-
-  const translateValues = {
-    X: 0,
-    Y: 0,
-  }
-
-  translateValues[translateAxis] = 100 * translateOrient
-
-  const css = `translate(${translateValues.X}%, ${translateValues.Y}%)`
-  const positioningKeys = translateAxis === 'X' ? ['top', 'bottom'] : ['left', 'right']
-
-  const positioning = Object.fromEntries(positioningKeys.map(k => [k, 0]))
-  return  [css, translateAxis, positioning]
-  
-}
-
-
-export const Drawer:React.FC<DrawerProps> = ({ ...rawProps}) => {
-  const {
-    open, 
-    toggle, 
-    children, 
-    size, 
-    title, 
-    footer, 
-    darkenBackground = true,
-    showCloseButton, 
-    position = 'bottom',
-    variants = [],
-    responsiveVariants = {},
-    styles,
-    animationDuration = '0.3s',
-  } = rawProps
-
-  const [hiddenStyle, axis, positioning] = resolveHiddenDrawerPosition(position)
-
-  const sizeProperty = axis === 'X' ? 'width' : 'height'
-  const fullProperty = sizeProperty === 'height' ? 'width' : 'height' 
-
-
-  const variantStyles = useComponentStyle('Drawer', {
-    styles,
-    variants,
-    responsiveVariants,
-  })
-  return <View 
-    css={{...variantStyles.wrapper,
-      transition: 'visibility 0.01s ease',
-      transitionDelay: open ? '0' : animationDuration,
-      visibility: open ?'visible' : 'hidden'   }}>
-    {
-      darkenBackground && <Overlay visible={open} css={variantStyles.overlay} onPress={() => toggle()}/> 
-    }
-    <View variants={['fixed']} css={{
-      transform: open ? `translate(0%, 0%)` : hiddenStyle,
-      transition: `transform ${animationDuration} ease`, 
-      [sizeProperty]: size,
-      [fullProperty]: '100%',
-      ...positioning,
-      [position]: 0,
-      ...variantStyles.box,
-
-    }} >
-      <View component='header' variants={['justifySpaceBetween']} css={variantStyles.header}>
-        {typeof title === 'string' ? <Text text={title} /> :  title}
-        {
-          showCloseButton && <Button onPress={toggle} icon={'close' as IconPlaceholder} variants={['icon']} css={variantStyles.headerCloseButton}/>
-        }
-      </View>
-      <View css={variantStyles.body}>
-        {children}
-      </View>
-      {
-        footer && 
-        <View component='footer' css={variantStyles.footer}>
-          {footer}
-        </View>
-      }
-    </View>
-  </View>
-}

package/src/components/FileInput.tsx

@@ -1,48 +0,0 @@
-import React, {  ComponentPropsWithoutRef,  useImperativeHandle, useRef } from 'react'
-import { WebInputFile } from '@codeleap/common'
-
-
-export type FileInputRef = {
-    openFilePicker: () => void
-}
-
-type FileInputProps= Omit<ComponentPropsWithoutRef<'input'>, 'type'> & {
-  onFileSelect(files:WebInputFile[]): void
-} 
-
-
- 
-export const FileInput = React.forwardRef<FileInputRef, FileInputProps>((inputProps, ref) => {
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  const { onFileSelect, ...props } = inputProps
-
-  useImperativeHandle(ref, () => ({
-    openFilePicker: () => {
-      inputRef.current.click()
-    },
-  }))
- 
-
-
-  function handleChange(e:React.ChangeEvent<HTMLInputElement>){
-    if (!e.target.files.length) return
-    inputProps.onChange && inputProps.onChange(e)
-    const fileArray = Array.from(e.target?.files||[]) as File[]
-    
-    const files:WebInputFile[] = fileArray.map((obj) => ({
-      file: obj,
-      preview: URL.createObjectURL(obj),
-    }))
-
-    onFileSelect && onFileSelect(files)
-
-  }
-
-  return <input type={'file'} css={{visibility: 'hidden'}} {...props} ref={inputRef} onChange={handleChange}/>
-})
-
-
-
-
-

package/src/components/FlatList.tsx

@@ -1,77 +0,0 @@
-import { VariableSizeList as List } from 'react-window';
-import { ComponentProps, CSSProperties, ReactElement } from 'react'
-import AutoSizer from 'react-virtualized-auto-sizer'
-import { ComponentVariants, useComponentStyle, ViewComposition, ViewStyles } from '@codeleap/common';
-import { StylesOf } from '../types/utility';
-import { CSSObject } from '@emotion/react';
-
-export type FlatListRender<T> = (itemProps:{item:T, index:number, style:CSSProperties})  => ReactElement
-
-export type FlatListProps<T> = {
-    styles?:StylesOf<ViewComposition>
-    css?:CSSObject
-    data: T[]
-    getSize: (i:T, idx:number) => number
-    renderItem: FlatListRender<T>
-
-} & Omit<ComponentProps<typeof List>, 'itemCount' | 'itemSize' | 'itemData' | 'itemHeight' |'width'|'height'|'children'> 
-& ComponentVariants<typeof ViewStyles>
-
-export const FlatList = <T extends unknown>(flatListProps:FlatListProps<T>) => {
-  const { variants, responsiveVariants, styles, data, getSize, renderItem: Item, ...viewProps} = flatListProps
-
-  const variantStyles = useComponentStyle('View', {
-    variants, responsiveVariants, styles,
-  })
-
-  return <AutoSizer>
-    {
-      ({height, width}) => (
-
-        <List
-          height={height}
-          width={width}
-          itemCount={data.length}
-          itemData={data}
-          itemSize={(idx) => getSize(data[idx], idx)}
-          css={variantStyles.wrapper}
-          {...viewProps}
-        > 
-          {
-            ({style, index}) =>  <Item item={data[index]} style={style} index={index}/>   
-          }
-        </List>
-      )
-    }
-  </AutoSizer>
-  
-
-
-  // return <View {...viewProps}>
-  //   {data.map((item, idx) => <Component item={item} idx={idx} key={idx}/>)}
-  // </View>
-}
-
-
- 
-
-// const rowHeights = new Array(1000)
-//   .fill(true)
-//   .map(() => 25 + Math.round(Math.random() * 50));
- 
-// const getItemSize = index => rowHeights[index];
- 
-// const Row = ({ index, style }) => (
-//   <div style={style}>Row {index}</div>
-// );
- 
-// const Example = () => (
-//   <List
-//     height={150}
-//     itemCount={1000}
-//     itemSize={getItemSize}
-//     width={300}
-//   >
-//     {Row}
-//   </List>
-// );

package/src/components/HorizontalScroll.tsx

@@ -1,24 +0,0 @@
-import React, { ElementType } from 'react';
-import { ViewProps } from '.';
-import { View } from './View';
-
-export function HorizontalScroll<T extends ElementType = 'div'>(props:ViewProps<T>) {
-  const { children, style, ...otherProps } = props;
-
-  return (
-    <View {...otherProps} css={[styles.scroll, style]}>
-      {children}
-    </View>
-  );
-}
-
-const styles = {
-  scroll: {
-    overflow: 'auto',
-    '::-webkit-scrollbar': {
-      display: 'none',
-    },
-    whiteSpace: 'nowrap',
-  },
-};
-

package/src/components/Icon.tsx

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