@codeleap/web 1.0.0

package/dist/lib/utils/pollyfils/scroll.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollToElem = void 0;
+// native smooth scrolling for Chrome, Firefox & Opera
+// @see: https://caniuse.com/#feat=css-scroll-behavior
+var nativeSmoothScrollTo = function (elem) {
+    window.scroll({
+        behavior: 'smooth',
+        left: 0,
+        top: elem.getBoundingClientRect().top + window.pageYOffset,
+    });
+};
+// polyfilled smooth scrolling for IE, Edge & Safari
+var smoothScrollTo = function (to, duration) {
+    var 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
+    var easeInOutQuad = function (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;
+    };
+    var animateScroll = function () {
+        var currentDate = +new Date();
+        var 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
+var supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style;
+// smooth scrolling stub
+var scrollToElem = function (elemSelector) {
+    if (!elemSelector) {
+        return;
+    }
+    var elem = document.querySelector(elemSelector);
+    if (elem) {
+        if (supportsNativeSmoothScroll) {
+            nativeSmoothScrollTo(elem);
+        }
+        else {
+            smoothScrollTo(elem.offsetTop, 600);
+        }
+    }
+};
+exports.scrollToElem = scrollToElem;
+//# sourceMappingURL=scroll.js.map

package/dist/lib/utils/pollyfils/scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../../../src/lib/utils/pollyfils/scroll.ts"],"names":[],"mappings":";;;AAAA,sDAAsD;AACtD,sDAAsD;AACtD,IAAM,oBAAoB,GAAG,UAAA,IAAI;IAC/B,MAAM,CAAC,MAAM,CAAC;QACZ,QAAQ,EAAE,QAAQ;QAClB,IAAI,EAAE,CAAC;QACP,GAAG,EAAE,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,MAAM,CAAC,WAAW;KAC3D,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,oDAAoD;AACpD,IAAM,cAAc,GAAG,UAAC,EAAE,EAAE,QAAQ;IAClC,IAAM,OAAO,GAAG,QAAQ,CAAC,gBAAgB,IAAI,QAAQ,CAAC,eAAe,EACnE,KAAK,GAAG,OAAO,CAAC,SAAS,EACzB,MAAM,GAAG,EAAE,GAAG,KAAK,EACnB,SAAS,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC;IAE1B,mBAAmB;IACnB,kBAAkB;IAClB,sBAAsB;IACtB,eAAe;IACf,IAAM,aAAa,GAAG,UAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QAC/B,CAAC,IAAI,CAAC,GAAC,CAAC,CAAC;QACT,IAAI,CAAC,GAAG,CAAC;YAAE,OAAO,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAG,CAAC,CAAC;QAC9B,CAAC,EAAE,CAAC;QACJ,OAAO,CAAC,CAAC,GAAC,CAAC,GAAG,CAAC,CAAC,GAAC,CAAC,CAAC,GAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,IAAM,aAAa,GAAG;QACpB,IAAM,WAAW,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC;QAChC,IAAM,WAAW,GAAG,WAAW,GAAG,SAAS,CAAC;QAC5C,OAAO,CAAC,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;QAClF,IAAI,WAAW,GAAG,QAAQ,EAAE;YAC1B,qBAAqB,CAAC,aAAa,CAAC,CAAC;SACtC;aAAM;YACL,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;SACxB;IACH,CAAC,CAAC;IACF,aAAa,EAAE,CAAC;AAClB,CAAC,CAAC;AAEF,4DAA4D;AAC5D,IAAM,0BAA0B,GAAG,gBAAgB,IAAI,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC;AAEtF,wBAAwB;AACjB,IAAM,YAAY,GAAG,UAAA,YAAY;IACtC,IAAI,CAAC,YAAY,EAAE;QACjB,OAAO;KACR;IAED,IAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAClD,IAAI,IAAI,EAAE;QACR,IAAI,0BAA0B,EAAE;YAC9B,oBAAoB,CAAC,IAAI,CAAC,CAAC;SAC5B;aAAM;YACL,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;SACrC;KACF;AACH,CAAC,CAAC;AAbW,QAAA,YAAY,gBAavB"}

package/dist/lib/utils/stopPropagation.d.ts

@@ -0,0 +1 @@
+export declare function stopPropagation(event: any): void;

package/dist/lib/utils/stopPropagation.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stopPropagation = void 0;
+function stopPropagation(event) {
+    var _a;
+    var tryCalls = [
+        event === null || event === void 0 ? void 0 : event.stopPropagation,
+        event === null || event === void 0 ? void 0 : event.preventDefault,
+        (_a = event.nativeEvent) === null || _a === void 0 ? void 0 : _a.stopImmediatePropagation,
+    ];
+    for (var _i = 0, tryCalls_1 = tryCalls; _i < tryCalls_1.length; _i++) {
+        var call = tryCalls_1[_i];
+        try {
+            call();
+        }
+        catch (e) {
+        }
+    }
+}
+exports.stopPropagation = stopPropagation;
+//# sourceMappingURL=stopPropagation.js.map

package/dist/lib/utils/stopPropagation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stopPropagation.js","sourceRoot":"","sources":["../../../src/lib/utils/stopPropagation.ts"],"names":[],"mappings":";;;AAEA,SAAgB,eAAe,CAAC,KAAS;;IACvC,IAAM,QAAQ,GAAG;QACf,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe;QACtB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc;QACjB,MAAA,KAAK,CAAC,WAAW,0CAAE,wBAAuC;KAC/D,CAAA;IAED,KAAmB,UAAQ,EAAR,qBAAQ,EAAR,sBAAQ,EAAR,IAAQ,EAAC;QAAvB,IAAM,IAAI,iBAAA;QACb,IAAI;YACF,IAAI,EAAE,CAAA;SACP;QAAC,OAAO,CAAC,EAAC;SACV;KACF;AAEH,CAAC;AAdD,0CAcC"}

package/dist/types/utility.d.ts

@@ -0,0 +1,2 @@
+import { CSSObject } from '@emotion/css';
+export declare type StylesOf<C extends string> = Partial<Record<C, CSSObject>>;

package/dist/types/utility.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=utility.js.map

package/dist/types/utility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility.js","sourceRoot":"","sources":["../../src/types/utility.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@codeleap/web",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": "git@github.com:codeleap-uk/codeleap-lib.git",
+  "author": "Paulo Henrique De Souza <paulosouza300272@gmail.com>",
+  "license": "UNLICENSED",
+  "devDependencies": {
+    "@codeleap/config": "*",
+    "@types/react-window": "^1.8.5",
+    "react": "^17.0.2"
+  },
+  "scripts": {
+    "build": "tsc --build",
+    "lint": "./node_modules/.bin/eslint -c .eslintrc.js \"./src/**/*.{ts,tsx,js,jsx}\""
+  },
+  "dependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.7.1",
+    "rc-slider": "^9.7.5",
+    "react-autosize-textarea": "^7.1.0",
+    "react-virtualized-auto-sizer": "^1.0.6",
+    "react-window": "^1.8.6",
+    "url-parse": "^1.5.4",
+    "uuid": "^8.3.2"
+  },
+  "peerDependencies": {
+    "@codeleap/common": "*",
+    "@reach/router": "^1.3.4",
+    "@types/react": "^17.0.38",
+    "axios": "^0.24.0",
+    "gatsby-plugin-intl": "^0.3.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0"
+  }
+}

package/src/components/ActivityIndicator/index.tsx

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

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

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

@@ -0,0 +1,24 @@
+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.tsx

@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import {  jsx } from '@emotion/react'
+import { CheckboxComposition, CheckboxStyles, ComponentVariants, StylesOf, useComponentStyle, useStyle } from '@codeleap/common'
+import { ComponentPropsWithRef } from 'react'
+import { View } from './View'
+import { Text } from './Text'
+
+type NativeCheckboxProps = ComponentPropsWithRef<'input'>
+
+export type CheckboxProps = NativeCheckboxProps & {
+    checked?:boolean
+    onValueChange?: (checked:boolean) => any
+    label?: React.ReactNode
+    styles?:StylesOf<CheckboxComposition>
+} & 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,
+  })
+  
+  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/ContentView.tsx

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

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

@@ -0,0 +1,48 @@
+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||[])
+    
+    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

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

@@ -0,0 +1,24 @@
+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',
+  },
+};
+