feat(TypePicker): create TypePicker and other needed components

app/components/chrome/Icon.tsx

@@ -19,7 +19,9 @@ import {
   faPlus,
   faDownload,
   faFileAlt,
-  faCopy
+  faCopy,
+  faTimes,
+  faCheck
 } from '@fortawesome/free-solid-svg-icons'
 
 interface IconProps {
@@ -28,8 +30,8 @@ interface IconProps {
   // size sm: .875em
   // md: 1.33em
   // lg: 2em
-  size: 'sm' | 'md' | 'lg'
-  color: 'light' | 'medium' | 'dark'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  color?: 'light' | 'medium' | 'dark'
 }
 
 const icons: {[key: string]: any} = {
@@ -58,17 +60,20 @@ const icons: {[key: string]: any} = {
   'readme': faGlasses,
   'commit': faQuestionCircle,
   'lock': faLock,
-  'transform': faCode
+  'transform': faCode,
+  'close': faTimes,
+  'check': faCheck
 }
 
 export const iconsList = Object.keys(icons)
 
 const Icon: React.FunctionComponent<IconProps> = ({
-  icon = 'any',
+  icon = 'unknown',
   size = 'md',
-  color = 'light'
+  color = 'dark'
 }) => {
   const sizes: {[key: string]: FontAwesomeIconProps['size']} = {
+    'xs': 'xs',
     'sm': 'sm',
     'md': 'lg',
     'lg': '2x'

app/components/item/DataType.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import Icon from '../chrome/Icon'
+
+export type DataTypes = 'string' | 'integer' | 'number' | 'boolean' | 'null' | 'any' | 'array' | 'object'
+
+interface DataTypeProps {
+  type: DataTypes
+  description: string
+  width?: number
+}
+
+const DataType: React.FunctionComponent<DataTypeProps> = ({
+  type = 'unknown',
+  description = 'unknown',
+  width = 200
+}) => {
+  return (<div className='data-type' style={{ width }}>
+    <div className='type-wrap'>
+      <div className='label large'>{type}</div>
+      <Icon icon={type} size='sm' color='medium' />
+    </div>
+    <div className='description small'>
+      {description}
+    </div>
+  </div>)
+}
+
+export default DataType

app/components/nav/TabPicker.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react'
+
+import classNames from 'classnames'
+
+interface TabPickerProps {
+  size: 'sm' | 'md'
+  color: 'light' | 'dark'
+  tabs: string[]
+  onClick: (e: MouseEvent<HTMLDivElement, MouseEvent>) => void
+  activeTab: string
+}
+
+const TabPicker: React.FunctionComponent<TabPickerProps> = ({
+  size = 'sm',
+  color = 'dark',
+  tabs,
+  onClick,
+  activeTab
+}) => {
+  return (
+    <div className={
+      classNames('tab-picker', {
+        'small': size === 'sm',
+        'medium': size === 'md',
+        'light': color === 'light',
+        'dark': color === 'dark'
+      })
+    }>
+      {
+        tabs.map((name: string, i: number) => {
+          return (<div
+            key={i}
+            onClick={onClick}
+            className={classNames({ 'active': name === activeTab })}
+            data-value={name}
+          >
+            {name}
+          </div>)
+        })
+      }
+    </div>
+  )
+}
+
+export default TabPicker

app/components/overlay/Overlay.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
+import * as React from 'react'
+import Icon from '../chrome/Icon'
+import classNames from 'classnames'
+
+interface OverlayProps {
+  title: string
+  onCancel: () => void
+  open: boolean
+  height: number
+  width: number
+  navigation: Element | undefined
+}
+
+const Overlay: React.FunctionComponent<OverlayProps> = ({
+  height,
+  width,
+  title,
+  onCancel,
+  open,
+  children,
+  navigation
+}) => {
+  const overlayRef = React.useRef()
+
+  React.useEffect(() => {
+    const isInOverlay = (e: MouseEvent<HTMLDivElement, MouseEvent>) => {
+      if (!onCancel || !overlayRef || !overlayRef.current) return
+
+      // figure out if the user clicking inside the overlay
+      const rect = overlayRef.current.getBoundingClientRect()
+
+      // http://stackoverflow.com/a/26984690/2114
+      const isIn =
+        rect.top <= e.clientY &&
+        e.clientY <= rect.top + rect.height &&
+        rect.left <= e.clientX &&
+        e.clientX <= rect.left + rect.width
+
+      if (!isIn) {
+        e.stopPropagation()
+        onCancel()
+      }
+    }
+
+    window.addEventListener('click', isInOverlay)
+    return () => (
+      window.addEventListener('click', isInOverlay)
+    )
+  })
+
+  return (
+    <div
+      style={{ height, width }}
+      className={classNames('overlay', { 'closed': !open })}
+      ref={overlayRef}
+    >
+      <div className='title-bar'>
+        <div className='label small'>{title}</div>
+        <div className='pointer' onClick={onCancel}><Icon icon='close' size='xs' /></div>
+      </div>
+      {navigation && <div className='nav'>{navigation}</div>}
+      <div className='content'>{children}</div>
+    </div>
+  )
+}
+
+export default Overlay

app/components/overlay/TypePickerOverlay.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react'
+import Overlay from './Overlay'
+import { typesAndDescriptions } from '../structure/TypePicker'
+import DataType from '../item/DataType'
+import Icon from '../chrome/Icon'
+
+interface TypePickerOverlayProps {
+  // function to close the picker
+  onCancel: () => void
+  // function called when a data type is selected
+  onClick: (e: MouseEvent<HTMLDivElement, MouseEvent>) => void
+  // function called when a tab is selected
+  onTabClick: (e: MouseEvent<HTMLDivElement, MouseEvent>) => void
+  // type or types that are currently selected
+  value: string | string[]
+  // is the overlay open?
+  open: boolean
+  // navigation component, if it exists
+  navigation: Element | undefined
+}
+
+const TypePickerOverlay: React.FunctionComponent<TypePickerOverlayProps> = ({
+  onCancel,
+  onClick,
+  value,
+  navigation,
+  open = true
+}) => {
+  const handleOnClick = (e: MouseEvent<HTMLDivElement, MouseEvent>) => {
+    e.stopPropagation()
+    onClick(e)
+  }
+  return (
+    <Overlay
+      title='data type'
+      onCancel={onCancel}
+      width={220}
+      height={200}
+      open={open}
+      navigation={navigation}
+    >
+      {typesAndDescriptions.map((item, i) => {
+        return (
+          <div
+            key={i}
+            className='type-picker-overlay-row'
+            onClick={handleOnClick}
+            data-value={item.type}
+          >
+            <div className='icon-wrap'><Icon
+              icon='check'
+              size='xs'
+              color={
+                (typeof value === 'string' && value === item.type) || (Array.isArray(value) && value.includes(item.type)) ? 'dark' : 'light'}/>
+            </div>
+            <DataType type={item.type} description={item.description} />
+          </div>
+        )
+      })}
+    </Overlay>
+  )
+}
+
+export default TypePickerOverlay

app/components/structure/ColumnType.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import classNames from 'classnames'
+import { DataTypes } from '../item/DataType'
+
+import Icon from '../chrome/Icon'
+
+export interface ColumnTypeProps {
+  type: DataTypes | DataTypes[]
+  onClick: (e) => void
+  active?: boolean
+}
+
+const ColumnType: React.FunctionComponent<ColumnTypeProps> = ({
+  type = 'any',
+  onClick,
+  active = false
+}) => {
+  let shownType = ''
+  if (Array.isArray(type)) {
+    if (type.length > 1) {
+      shownType = 'multi'
+    } else if (type.length === 0) {
+      shownType = 'any'
+    } else {
+      shownType = type[0]
+    }
+  } else shownType = type
+
+  return <div
+    className={classNames('column-type', { 'clickable': !!onClick, 'active': active })}
+    onClick={onClick}
+    tabIndex={0}
+  >
+    <span className='label large'>{shownType}</span> <Icon icon={shownType === 'multi' ? 'unknown' : shownType} size='sm' color='medium'/>
+  </div>
+}
+
+export default ColumnType