Add quick example of select input

resources/assets/js/components/Forms/Inputs.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 const textInputClasses =
   'block w-full border border-grey-light bg-grey-lightest rounded'
@@ -28,3 +28,47 @@ export const TextArea = ({ className = '', input, ...props }) => (
     {...props}
   />
 )
+
+export const Select = ({
+  className = '',
+  placeholder = 'Please select a value',
+  input: { value, onChange },
+  options,
+  renderItem,
+  ...props
+}) => {
+  const [opened, setOpened] = useState(false)
+
+  const selectedOption = options.find(option => option.value === value)
+
+  return (
+    <div
+      onClick={() => setOpened(!opened)}
+      className={`border relative w-48 border-grey rounded-md inline-block ${className}`}
+      {...props}
+    >
+      <div className="p-2">
+        {selectedOption ? selectedOption.label : placeholder}
+      </div>
+      <ul
+        style={{ top: '33px' }}
+        className={`list-reset absolute bg-white w-full z-40 border border-grey ${
+          opened ? 'block' : 'hidden'
+        }`}
+      >
+        {options.map(option =>
+          renderItem ? (
+            renderItem(option)
+          ) : (
+            <li
+              className="p-2 hover:bg-grey-lighter"
+              onClick={() => onChange(option.value)}
+            >
+              {option.label}
+            </li>
+          )
+        )}
+      </ul>
+    </div>
+  )
+}

resources/assets/js/components/index.js

@@ -12,7 +12,7 @@ export {
   TextAreaFormLine
 } from './Forms/FormLine'
 export * from './Icons'
-export { PasswordInput, TextArea, TextInput } from './Forms/Inputs'
+export { PasswordInput, TextArea, TextInput, Select } from './Forms/Inputs'
 export { Logo } from './Logo/Logo'
 export { ModalProviderWrapper, ModalRoot } from './Modal'
 export { PictureUpload } from './PictureUpload/PictureUpload'

resources/assets/js/pages/Settings/Forms/AppSettingsForm.jsx

@@ -1,15 +1,40 @@
 import React from 'react'
+import { compose } from 'recompose'
 import { connect } from 'react-redux'
-import { reduxForm } from 'redux-form'
+import { reduxForm, Field } from 'redux-form'
 
-export class AppSettingsFormComponent extends React.Component {
-  render() {
-    return <div>Application Settings Placeholder</div>
-  }
-}
+import { NeutralButton, Select } from 'components'
+
+const exampleOptions = [
+  { label: 'Option One', value: 'option-1' },
+  { label: 'Option Two', value: 'option-2' },
+  { label: 'Option Three', value: 'option-3' }
+]
 
-export const AppSettingsFormForm = reduxForm({
-  form: 'appSettings'
-})(AppSettingsFormComponent)
+export const AppSettingsFormComponent = ({ onSubmit, handleSubmit }) => {
+  return (
+    <form className="pb-8" onSubmit={handleSubmit(onSubmit)}>
+      <div>
+        <Field
+          className="mb-6"
+          name="my-select-name"
+          component={Select}
+          options={exampleOptions}
+        />
+      </div>
+      <NeutralButton type="submit">Submit</NeutralButton>
+    </form>
+  )
+}
 
-export const AppSettingsForm = connect()(AppSettingsFormForm)
+export const AppSettingsForm = compose(
+  connect(
+    null,
+    dispatch => ({
+      onSubmit: values => console.log('here are your form values', values)
+    })
+  ),
+  reduxForm({
+    form: 'appSettings'
+  })
+)(AppSettingsFormComponent)