feat: 🎸 start to create select

package.json

@@ -80,6 +80,7 @@
         "apollo-boost": "^0.4.7",
         "axios": "^0.19.1",
         "date-fns": "^2.9.0",
+        "downshift": "^4.0.7",
         "graphql": "^14.5.8",
         "no-case": "^3.0.3",
         "react": "^16.12.0",

src/components/Select/index.tsx

@@ -0,0 +1,57 @@
+import { useCombobox } from 'downshift'
+import React, { memo, useState } from 'react'
+
+export interface Props {
+    items: any[]
+}
+
+export const Select = memo(({ items }: Props) => {
+    const [inputItems, setInputItems] = useState(items)
+    const {
+        isOpen,
+        // selectedItem,
+        getToggleButtonProps,
+        getLabelProps,
+        getMenuProps,
+        getInputProps,
+        getComboboxProps,
+        highlightedIndex,
+        getItemProps,
+    } = useCombobox({
+        items: inputItems,
+        onInputValueChange: ({ inputValue }) => {
+            setInputItems(
+                items.filter((item) =>
+                    item.toLowerCase().startsWith(inputValue.toLowerCase()),
+                ),
+            )
+        },
+    })
+    return (
+        <>
+            <label {...getLabelProps()}>Choose an element:</label>
+            <div {...getComboboxProps()}>
+                <input {...getInputProps()} />
+                <button {...getToggleButtonProps()} aria-label="toggle menu">
+                    &#8595;
+                </button>
+            </div>
+            <ul {...getMenuProps()}>
+                {isOpen &&
+                    inputItems.map((item, index) => (
+                        <li
+                            style={
+                                highlightedIndex === index
+                                    ? { backgroundColor: '#bde4ff' }
+                                    : {}
+                            }
+                            key={`${item}${index}`}
+                            {...getItemProps({ item, index })}
+                        >
+                            {item}
+                        </li>
+                    ))}
+            </ul>
+        </>
+    )
+})

src/components/Select/stories.tsx

@@ -0,0 +1,20 @@
+import { array, withKnobs } from '@storybook/addon-knobs'
+import React from 'react'
+
+import { Select } from '.'
+
+export default {
+    title: 'Select',
+    component: Select,
+    decorators: [withKnobs],
+}
+
+export const SelectStory = () => {
+    const items = array('items', [])
+
+    return <Select items={items} />
+}
+
+SelectStory.story = {
+    name: '',
+}

src/components/Select/styled.ts

@@ -0,0 +1,3 @@
+import { styled } from '@storybook/theming'
+
+export const Root = styled.div``

src/components/Variable/Select.tsx

@@ -0,0 +1,22 @@
+import React, { memo } from 'react'
+
+import { SelectSchema } from '../../types'
+import { Select } from '../Select'
+import { Error, Row } from './styled'
+
+export interface Props {
+    schema: SelectSchema
+    value: any
+    error: string | null
+    isValid: boolean
+    onChange: (value: any) => void
+}
+
+export const SelectInput = memo(({ error, isValid }: Props) => {
+    return (
+        <Row>
+            <Select items={[]} />
+            {!isValid && <Error>{error}</Error>}
+        </Row>
+    )
+})

src/components/Variable/index.tsx

@@ -7,6 +7,7 @@ import { isNull } from '../../utilities'
 import { BooleanInput } from './Boolean'
 import { DateTimeInput } from './Date'
 import { NumberInput } from './Number'
+import { SelectInput } from './Select'
 import { StringInput } from './String'
 import { Row } from './styled'
 
@@ -29,6 +30,7 @@ export const Variable = memo(
             [VariableType.Boolean]: BooleanInput,
             [VariableType.Date]: DateTimeInput,
             [VariableType.Number]: NumberInput,
+            [VariableType.Select]: SelectInput,
             [VariableType.String]: StringInput,
             [VariableType.Unknown]: ({}: ComponentProps) => (
                 <Row>

src/types/generic.ts

@@ -20,6 +20,7 @@ export enum VariableType {
     Boolean,
     Date,
     Number,
+    Select,
     String,
 }
 
@@ -45,6 +46,10 @@ export interface NumberSchema extends Schema {
     type: 'number' | 'integer'
 }
 
+export interface SelectSchema extends Schema {
+    enum: any[]
+}
+
 export interface StringSchema extends Schema {
     type: 'string'
 }
@@ -53,4 +58,5 @@ export type KnownSchema =
     | BooleanSchema
     | DateTimeSchema
     | NumberSchema
+    | SelectSchema
     | StringSchema