Formik based form samples

package.json

@@ -8,22 +8,24 @@
     "url": "git@github.com:Indoqa/indoqa-react-redux.git"
   },
   "scripts": {
-    "start": "indoqa-dev-server ./indoqa-webpack-options.js",
+    "analyze": "source-map-explorer ./target/assets/app-*",
     "build": "indoqa-webpack ./indoqa-webpack-options.js",
     "docs": "indoqa-webpack ./indoqa-webpack-docs.js",
     "flow": "flow",
     "lint": "indoqa-eslint ./src/main",
     "package": "yarn run lint && yarn run flow && yarn run test && indoqa-webpack ./indoqa-webpack-options.js",
+    "postinstall": "yarn run package",
+    "start": "indoqa-dev-server ./indoqa-webpack-options.js",
     "test": "indoqa-jest",
     "test:watch": "yarn run test --watch",
-    "test:coverage": "yarn run test --coverage",
-    "postinstall": "yarn run package"
+    "test:coverage": "yarn run test --coverage"
   },
   "dependencies": {
     "fela": "6.1.7",
     "fela-monolithic": "5.0.21",
     "fela-plugin-named-media-query": "5.0.13",
     "fela-preset-web": "8.0.5",
+    "formik": "0.11.11",
     "indoqa-react-app": "2.6.0",
     "indoqa-react-fela": "0.6.0",
     "ramda": "0.25.0",
@@ -37,11 +39,14 @@
     "redux-logger": "3.0.6",
     "redux-observable": "0.18.0",
     "reselect": "3.0.1",
-    "rxjs": "5.5.10"
+    "rxjs": "5.5.10",
+    "shortid": "2.2.8",
+    "yup": "0.24.1"
   },
   "devDependencies": {
     "flow-bin": "0.70.0",
-    "indoqa-webpack": "1.2.0"
+    "indoqa-webpack": "1.2.0",
+    "source-map-explorer": "1.5.0"
   },
   "proxy": {
     "/geonames": {

src/main/app/rootEpic.js

@@ -1,10 +1,13 @@
 // @flow
 import {ajax} from 'rxjs/observable/dom/ajax'
 import {combineEpics} from 'redux-observable'
+
+import formsEpics from '../forms/store/forms.epics'
 import timeEpics from '../time/store/time.epics.js'
 import wordsEpics from '../words/store/words.epics'
 
 const combinedEpics = combineEpics(
+  ...formsEpics,
   ...timeEpics,
   ...wordsEpics
 )

src/main/app/rootReducer.js

@@ -1,11 +1,13 @@
 // @flow
 import {combineReducersWithRouter} from 'indoqa-react-app'
 
-import time from '../time/store/time.reducer.js'
-import todos from '../todos/store/todos.reducer.js'
+import forms from '../forms/store/forms.reducer'
+import time from '../time/store/time.reducer'
+import todos from '../todos/store/todos.reducer'
 import words from '../words/store/words.reducer'
 
 const reducers = {
+  forms,
   time,
   todos,
   words,

src/main/app/routes.react.js

@@ -3,15 +3,20 @@ import React from 'react'
 import {IndexRoute, Route} from 'react-router'
 
 import App from './App.react.js'
+import FormsPage from '../forms/components/FormsPage.redux.js'
 import TimePage from '../time/components/TimePage.react.js'
 import TodosPage from '../todos/components/TodosPage.react.js'
-import WordsPage from '../words/components/WordsPage.react'
+import UserPage from '../forms/components/UserPage.redux.js'
+import WordsPage from '../words/components/WordsPage.react.js'
 
 const routes = (
   <Route component={App} path="/">
     <IndexRoute component={TimePage} />
+    <Route component={FormsPage} path="/forms" />
+    <Route component={UserPage} path="/forms/users/:id" />
+    <Route component={UserPage} path="/forms/users/" />
     <Route component={TodosPage} path="/todos" />
-    <route component={WordsPage} path="/words" />
+    <Route component={WordsPage} path="/words" />
   </Route>
 )
 

src/main/app/selectors.js

@@ -1,14 +1,17 @@
 // @flow
+import type {FormsState} from '../forms/types/FormsState'
 import type {TimeState} from '../time/types/TimeState'
 import type {TodoState} from '../todos/types/TodoState'
 import type {WordsState} from '../words/types/WordsState'
 
 type State = {
+  forms: FormsState,
   time: TimeState,
   todos: TodoState,
   words: WordsState,
 }
 
+export const selectFormsState = (state: State) => state.forms
 export const selectTimeState = (state: State) => state.time
 export const selectTodoState = (state: State) => state.todos
 export const selectWordsState = (state: State) => state.words

src/main/app/theme.js

@@ -3,7 +3,7 @@ export default {
   colors: {
     text: '#030303',
     disabled: '#727272',
-    bgLight: '#e5e5e5',
+    bgLight: '#d5d5d5',
   },
   fonts: {
     text: 'sans-serif',

src/main/commons/components/atoms/ButtonLink.react.js

@@ -0,0 +1,13 @@
+// @flow
+import {createComponentWithProxy} from 'react-fela'
+
+const ButtonLink = ({theme}) => ({
+  '& > a': {
+    color: theme.colors.text,
+    display: 'block',
+    height: '100%',
+    textDecoration: 'none',
+  },
+})
+
+export default createComponentWithProxy(ButtonLink, 'button')

src/main/commons/components/molecules/Logo.react.js

@@ -1,14 +1,19 @@
 // @flow
 import {createComponentWithProxy} from 'react-fela'
+import {Box} from 'indoqa-react-fela'
 
 const Logo = ({theme}) => {
   return ({
-    height: '50px',
     cursor: 'pointer',
     display: 'inline-flex',
     alignItems: 'center',
-    padding: theme.spacing.space1,
+    height: 50,
+    fontWeight: 'bold',
+    '> a': {
+      textDecoration: 'none',
+      color: theme.colors.text,
+    },
   })
 }
 
-export default createComponentWithProxy(Logo, 'div')
+export default createComponentWithProxy(Logo, Box)

src/main/commons/components/organisms/MainMenu.react.js

@@ -9,10 +9,10 @@ import MenuLink from '../molecules/MenuLink.react.js'
 
 const MainMenu = () => (
   <Menu>
-    <Logo>
-      INDOQA-REACT-REDUX
+    <Logo ml={2}>
+      <Link to="/">INDOQA: React-Redux samples</Link>
     </Logo>
-    <Box />
+    <Box mb={3} />
     <MenuLink>
       <Link to="/">Time</Link>
     </MenuLink>
@@ -22,6 +22,9 @@ const MainMenu = () => (
     <MenuLink>
       <Link to="/words">Words</Link>
     </MenuLink>
+    <MenuLink>
+      <Link to="/forms">Forms</Link>
+    </MenuLink>
   </Menu>
 )
 

src/main/commons/components/templates/MainMenuTemplate.react.js

@@ -16,7 +16,7 @@ const MainMenuTemplate = ({title, header, children}: Props) => (
   <Flex stretch height="100%">
     <MainMenu />
     <Box grow={1}>
-      <Bar pl={1} pr={1}>
+      <Bar pl={3} pr={1}>
         <Box>{title}</Box>
         <Box grow={1} />
         <Box>{header}</Box>

src/main/forms/components/AddressesForm.react.js

@@ -0,0 +1,83 @@
+// @flow
+import * as React from 'react'
+import {FieldArray} from 'formik'
+import {Box, Flex, Text} from 'indoqa-react-fela'
+
+import {createNewAddress} from '../store/forms.factory'
+import FormRow from './FormRow.react'
+
+type Props = {
+  values: any,
+  errors: any,
+  touched: any,
+}
+
+const renderAddressHeader = (arrayHelpers, count, index) => {
+  return (
+    <Box>
+      <Text mr={1}>Address {index + 1}</Text>
+      <button type="button" onClick={() => arrayHelpers.remove(index)}>-</button>
+      {index < count - 1 ?
+        <button type="button" onClick={() => arrayHelpers.move(index, index + 1)}>down</button>
+        : null
+      }
+      {index > 0 ?
+        <button type="button" onClick={() => arrayHelpers.move(index, index - 1)}>up</button>
+        : null
+      }
+    </Box>
+  )
+}
+
+const renderAddressForm = (arrayHelpers, values, errors, touched, address, index) => {
+  return (
+    <Flex key={index} mt={2}>
+      <Box>
+        {renderAddressHeader(arrayHelpers, values.length, index)}
+
+        <FormRow name={`addresses.${index}.street`} label="Street" errors={errors} touched={touched} />
+        <FormRow name={`addresses.${index}.city`} label="City" errors={errors} touched={touched} />
+        <FormRow name={`addresses.${index}.zipCode`} label="Zip code" errors={errors} touched={touched} />
+        <FormRow name={`addresses.${index}.country`} label="Country" errors={errors} touched={touched} />
+      </Box>
+    </Flex>
+  )
+}
+
+const renderAddressesHeader = (arrayHelpers) => {
+  return (
+    <Box>
+      <Box>
+        <Text mr={1}>Addresses</Text>
+        <button type="button" onClick={() => arrayHelpers.push(createNewAddress())}>+</button>
+      </Box>
+    </Box>
+  )
+}
+
+const renderForms = (arrayHelpers, values, errors, touched) => {
+  const {addresses} = values
+
+  if (!(addresses && addresses.length > 0)) {
+    return null
+  }
+  return addresses.map((address, index) => (
+    renderAddressForm(arrayHelpers, values, errors, touched, address, index)
+  ))
+}
+
+const AddressesForm = ({values, errors, touched}:Props) => {
+  return (
+    <FieldArray
+      name="addresses"
+      render={(arrayHelpers) => (
+        <Box mt={2}>
+          {renderAddressesHeader(arrayHelpers)}
+          {renderForms(arrayHelpers, values, errors, touched)}
+        </Box>
+      )}
+    />
+  )
+}
+
+export default AddressesForm

src/main/forms/components/FormRow.react.js

@@ -0,0 +1,81 @@
+// @flow
+import * as React from 'react'
+import {createComponent, createComponentWithProxy} from 'react-fela'
+import {Field, getIn} from 'formik'
+import {Text} from 'indoqa-react-fela'
+
+type Props = {
+  name: string,
+  label: string,
+  errors: any,
+  touched: any,
+}
+
+const RowContainer = createComponent(() => ({
+  marginTop: 3,
+  marginBottom: 3,
+}))
+
+const Label = createComponent(() => ({
+  display: 'inline-block',
+  width: '100',
+}), 'label')
+
+const InputField = createComponentWithProxy(({hasError}) => ({
+  borderStyle: 'solid',
+  borderWidth: 1,
+  padding: 4,
+  borderColor: hasError ? 'red' : 'grey',
+  outline: 'none',
+  boxShadow: 'none',
+  transition: 'all 0.30s ease-in-out',
+  ':focus': {
+    boxShadow: '0 0 5px rgba(81, 203, 238, 1)',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'rgba(81, 203, 238, 1)',
+  },
+}), 'input')
+
+const ErrorMessage = createComponent(() => ({
+  color: 'red',
+}), Text)
+
+const renderLabel = (label) => {
+  return <Label>{label}</Label>
+}
+
+const renderField = (name, hasError) => {
+  return (
+    <Field
+      name={name}
+      render={({field}) => (
+        <InputField {...field} hasError={hasError} autoComplete="off" />
+      )}
+    />
+  )
+}
+
+const renderError = (name, hasError, errors) => {
+  if (!hasError) {
+    return null
+  }
+  return (
+    <ErrorMessage ml={1}>
+      {getIn(errors, name)}
+    </ErrorMessage>
+  )
+}
+
+const FormRow = ({name, label, errors, touched}:Props) => {
+  const hasError = getIn(touched, name) && getIn(errors, name)
+  return (
+    <RowContainer>
+      {renderLabel(label)}
+      {renderField(name, hasError)}
+      {renderError(name, hasError, errors)}
+    </RowContainer>
+  )
+}
+
+export default FormRow