From 2c2fb6a8e62b90bd721e3d6904a14f61287dd344 Mon Sep 17 00:00:00 2001
From: Angel Araya <angel.araya@janeirodigital.com>
Date: Thu, 5 Dec 2019 12:59:27 -0600
Subject: [PATCH 1/7] Initial form viewer update

---
 .../Viewer/UI/DateLine/date-line.component.js | 17 ++++-
 .../Viewer/UI/DateLine/date-line.style.js     |  2 +-
 .../children/Viewer/UI/ui-mapping.js          |  6 +-
 .../children/Viewer/viewer.component.js       | 75 ++++++++++---------
 .../FormModel/children/Viewer/viewer.style.js |  8 +-
 5 files changed, 65 insertions(+), 43 deletions(-)

diff --git a/src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.component.js b/src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.component.js
index 40651da3..9e3c83a0 100644
--- a/src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.component.js
+++ b/src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.component.js
@@ -1,14 +1,27 @@
 import React from 'react';
+import { format } from 'date-fns';
+
 import { FormModelConfig } from '@context';
+import { UITypes, FormModelUI } from '@constants';
+
 import { Wrapper, Label, Value } from './date-line.style';
 
 const DateLine = ({ value, ...rest }: { value: String }) => {
+  const type = rest[FormModelUI.RDF_TYPE];
+
+  let renderValue;
+  if (type === UITypes.DateTimeField) {
+    renderValue = format(new Date(value), 'Pp');
+  } else {
+    renderValue = value;
+  }
+
   return value ? (
     <FormModelConfig.Consumer>
       {({ theme }) => (
         <Wrapper className={theme && theme.dateLineViewerClass}>
-          <Label className="label">{rest['ui:label']}</Label>
-          <Value className="value">{new Date(value)}</Value>
+          <Label className="label">{rest[FormModelUI.UI_LABEL]}</Label>
+          <Value className="value">{renderValue}</Value>
         </Wrapper>
       )}
     </FormModelConfig.Consumer>
diff --git a/src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.style.js b/src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.style.js
index b1560c02..911e87b6 100644
--- a/src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.style.js
+++ b/src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.style.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled.div`
-  display: flex;
+  //display: flex;
   padding: 8px 0;
   flex-direction: column;
 `;
diff --git a/src/lib/components/FormModel/children/Viewer/UI/ui-mapping.js b/src/lib/components/FormModel/children/Viewer/UI/ui-mapping.js
index 46065ee8..f76d377e 100644
--- a/src/lib/components/FormModel/children/Viewer/UI/ui-mapping.js
+++ b/src/lib/components/FormModel/children/Viewer/UI/ui-mapping.js
@@ -40,13 +40,13 @@ const UIMapping = type => {
       component = SingleLine;
       break;
     case UITypes.DateField:
-      component = props => <DateLine format="Do MMM, YYYY" {...props} />;
+      component = props => <DateLine {...props} />;
       break;
     case UITypes.DateTimeField:
-      component = props => <DateLine format="HH:mm a - Do MMM, YYYY" {...props} />;
+      component = props => <DateLine {...props} />;
       break;
     case UITypes.TimeField:
-      component = props => <DateLine format="HH:mm a" {...props} />;
+      component = props => <DateLine {...props} />;
       break;
     case UITypes.Classifier:
       component = SingleLine;
diff --git a/src/lib/components/FormModel/children/Viewer/viewer.component.js b/src/lib/components/FormModel/children/Viewer/viewer.component.js
index 6c119112..c9e30ecf 100644
--- a/src/lib/components/FormModel/children/Viewer/viewer.component.js
+++ b/src/lib/components/FormModel/children/Viewer/viewer.component.js
@@ -3,6 +3,8 @@ import ControlGroup from '../control-group.component';
 import UIMapping from './UI/ui-mapping';
 import { Group, Label } from './viewer.style';
 
+import { FormModelConfig } from '@context';
+
 const UI_PARTS = 'ui:parts';
 
 type Props = {
@@ -17,6 +19,7 @@ const ParentLabel = ({ formModel }: { formModel: Object }) =>
 
 const Viewer = ({ formModel, parent }: Props) => {
   const [formFields, setFormFields] = useState([]);
+
   const parts = formModel[UI_PARTS];
 
   const getArrayFields = () => {
@@ -30,41 +33,45 @@ const Viewer = ({ formModel, parent }: Props) => {
   }, [formModel]);
 
   return (
-    <Group parent={parent}>
-      {formModel['dc:title'] && <h2>{formModel['dc:title']}</h2>}
-      <ParentLabel formModel={formModel} />
-      {formFields.length > 0 &&
-        formFields.map(item => {
-          const field = parts[item];
-          const fieldParts = field && field[UI_PARTS];
-          const component = field && UIMapping(field['rdf:type']);
-          const id = (field && field['ui:name']) || item;
-          /**
-           * Return null when field doesn't exists
-           * this avoid to crash app using recursive component
-           */
-          if (!field) return null;
-          /* eslint no-useless-computed-key: "off" */
-          const { ['ui:parts']: deleted, ...updatedField } = field;
+    <FormModelConfig.Consumer>
+      {({ theme }) => (
+        <Group parent={parent}>
+          {formModel['dc:title'] && <h2>{formModel['dc:title']}</h2>}
+          <ParentLabel formModel={formModel} />
+          {formFields.length > 0 &&
+            formFields.map(item => {
+              const field = parts[item];
+              const fieldParts = field && field[UI_PARTS];
+              const component = field && UIMapping(field['rdf:type']);
+              const id = (field && field['ui:name']) || item;
+              /**
+               * Return null when field doesn't exists
+               * this avoid to crash app using recursive component
+               */
+              if (!field) return null;
+              /* eslint no-useless-computed-key: "off" */
+              const { ['ui:parts']: deleted, ...updatedField } = field;
 
-          return fieldParts ? (
-            <Viewer
-              {...{
-                key: item,
-                formModel: field,
-                parent: updatedField
-              }}
-            />
-          ) : (
-            <ControlGroup
-              key={item}
-              component={component}
-              value={field['ui:value']}
-              fieldData={{ id, ...field, parent }}
-            />
-          );
-        })}
-    </Group>
+              return fieldParts ? (
+                <Viewer
+                  {...{
+                    key: item,
+                    formModel: field,
+                    parent: updatedField
+                  }}
+                />
+              ) : (
+                <ControlGroup
+                  key={item}
+                  component={component}
+                  value={field['ui:value']}
+                  fieldData={{ id, ...field, parent }}
+                />
+              );
+            })}
+        </Group>
+      )}
+    </FormModelConfig.Consumer>
   );
 };
 
diff --git a/src/lib/components/FormModel/children/Viewer/viewer.style.js b/src/lib/components/FormModel/children/Viewer/viewer.style.js
index da4aa4a4..f57dfc2a 100644
--- a/src/lib/components/FormModel/children/Viewer/viewer.style.js
+++ b/src/lib/components/FormModel/children/Viewer/viewer.style.js
@@ -6,9 +6,11 @@ export const Group = styled.div`
     !parent
       ? `
   
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: auto;
+  // display: grid;
+  // grid-template-columns: 1fr 1fr;
+  // grid-template-rows: auto;
+  display: flex;
+  flex-direction: column;
   `
       : `
   display: flex;

From 7a411d4eb59327d7d21b23cfe1d3b7aa1e0d85b4 Mon Sep 17 00:00:00 2001
From: Angel Araya <angel.araya@janeirodigital.com>
Date: Thu, 5 Dec 2019 13:16:46 -0600
Subject: [PATCH 2/7] Add color line viewer

---
 .../UI/ColorLine/color-line.component.js      | 24 ++++++++++++++++
 .../Viewer/UI/ColorLine/color-line.style.js   | 28 +++++++++++++++++++
 .../children/Viewer/UI/ColorLine/index.js     |  1 +
 .../UI/SingleLine/single-line.component.js    |  4 ++-
 .../children/Viewer/UI/ui-mapping.js          |  3 +-
 5 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/FormModel/children/Viewer/UI/ColorLine/color-line.component.js
 create mode 100644 src/lib/components/FormModel/children/Viewer/UI/ColorLine/color-line.style.js
 create mode 100644 src/lib/components/FormModel/children/Viewer/UI/ColorLine/index.js

diff --git a/src/lib/components/FormModel/children/Viewer/UI/ColorLine/color-line.component.js b/src/lib/components/FormModel/children/Viewer/UI/ColorLine/color-line.component.js
new file mode 100644
index 00000000..8249825b
--- /dev/null
+++ b/src/lib/components/FormModel/children/Viewer/UI/ColorLine/color-line.component.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Wrapper, Label, Value, ColorSwatch } from './color-line.style';
+
+import { FormModelConfig } from '@context';
+import { FormModelUI } from '@constants';
+
+const ColorLine = ({ value, ...rest }: { value: String }) => {
+  return (
+    <FormModelConfig.Consumer>
+      {({ theme }) => (
+        <Wrapper className={theme && theme.colorLine}>
+          <Label className="label">{rest[FormModelUI.UI_LABEL]}</Label>
+          <Value className="value">
+            {value}
+            <ColorSwatch color={value} />
+          </Value>
+        </Wrapper>
+      )}
+    </FormModelConfig.Consumer>
+  );
+};
+
+export default ColorLine;
diff --git a/src/lib/components/FormModel/children/Viewer/UI/ColorLine/color-line.style.js b/src/lib/components/FormModel/children/Viewer/UI/ColorLine/color-line.style.js
new file mode 100644
index 00000000..fc5c212f
--- /dev/null
+++ b/src/lib/components/FormModel/children/Viewer/UI/ColorLine/color-line.style.js
@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  //display: flex;
+  padding: 8px 0;
+  flex-direction: column;
+`;
+
+export const Label = styled.span`
+  font-weight: bold;
+  font-size: 16px;
+  letter-spacing: 0.4px;
+`;
+
+export const Value = styled.span`
+  display: inline-flex;
+`;
+
+export const ColorSwatch = styled.div`
+  width: 36px;
+  height: 14px;
+  padding: 5px;
+  background: ${props => props.color};
+  border-radius: 1px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+  display: inline-block;
+  cursor: pointer;
+`;
diff --git a/src/lib/components/FormModel/children/Viewer/UI/ColorLine/index.js b/src/lib/components/FormModel/children/Viewer/UI/ColorLine/index.js
new file mode 100644
index 00000000..65a38556
--- /dev/null
+++ b/src/lib/components/FormModel/children/Viewer/UI/ColorLine/index.js
@@ -0,0 +1 @@
+export { default } from './color-line.component';
diff --git a/src/lib/components/FormModel/children/Viewer/UI/SingleLine/single-line.component.js b/src/lib/components/FormModel/children/Viewer/UI/SingleLine/single-line.component.js
index 7ebda29d..12dd0629 100644
--- a/src/lib/components/FormModel/children/Viewer/UI/SingleLine/single-line.component.js
+++ b/src/lib/components/FormModel/children/Viewer/UI/SingleLine/single-line.component.js
@@ -2,12 +2,14 @@ import React from 'react';
 import { FormModelConfig } from '@context';
 import { Wrapper, Label, Value } from './single-line.style';
 
+import { FormModelUI } from '@constants';
+
 const SingleLine = ({ value, ...rest }: { value: String }) => {
   return value ? (
     <FormModelConfig.Consumer>
       {({ theme }) => (
         <Wrapper className={theme && theme.singleLineViewerClass}>
-          <Label className="label">{rest['ui:label']}</Label>
+          <Label className="label">{rest[FormModelUI.UI_LABEL]}</Label>
           <Value className="value">{value}</Value>
         </Wrapper>
       )}
diff --git a/src/lib/components/FormModel/children/Viewer/UI/ui-mapping.js b/src/lib/components/FormModel/children/Viewer/UI/ui-mapping.js
index f76d377e..0d5cf282 100644
--- a/src/lib/components/FormModel/children/Viewer/UI/ui-mapping.js
+++ b/src/lib/components/FormModel/children/Viewer/UI/ui-mapping.js
@@ -5,6 +5,7 @@ import SingleLine from './SingleLine';
 import MultiLine from './MultiLine';
 import DateLine from './DateLine';
 import BoolLine from './BoolLine';
+import ColorLine from './ColorLine';
 
 const UIMapping = type => {
   let component;
@@ -37,7 +38,7 @@ const UIMapping = type => {
       component = BoolLine;
       break;
     case UITypes.ColorField:
-      component = SingleLine;
+      component = ColorLine;
       break;
     case UITypes.DateField:
       component = props => <DateLine {...props} />;

From 999c3d2a84dd91aa3c44845657313e673b4930ac Mon Sep 17 00:00:00 2001
From: Angel Araya <angel.araya@janeirodigital.com>
Date: Thu, 5 Dec 2019 13:23:53 -0600
Subject: [PATCH 3/7] Render bool value if line is missing with false as
 default

---
 .../children/Viewer/UI/BoolLine/bool-line.component.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/FormModel/children/Viewer/UI/BoolLine/bool-line.component.js b/src/lib/components/FormModel/children/Viewer/UI/BoolLine/bool-line.component.js
index 1675e48a..84f01d86 100644
--- a/src/lib/components/FormModel/children/Viewer/UI/BoolLine/bool-line.component.js
+++ b/src/lib/components/FormModel/children/Viewer/UI/BoolLine/bool-line.component.js
@@ -2,18 +2,20 @@ import React from 'react';
 import { FormModelConfig } from '@context';
 import { Label } from './bool-line.style';
 
+import { FormModelUI } from '@constants';
+
 type Props = {
   value: Object
 };
 
 const BoolLine = ({ value, ...rest }: Props) => {
-  return value ? (
+  return (
     <FormModelConfig.Consumer>
       {({ theme }) => (
-        <Label htmlFor={rest['ui:name']} className={theme && theme.boolLine}>
+        <Label htmlFor={rest[FormModelUI.UI_NAME]} className={theme && theme.boolLine}>
           <input
             type="checkbox"
-            name={rest['ui:name']}
+            name={rest[FormModelUI.UI_NAME]}
             defaultValue={value === 'true'}
             checked={value === 'true'}
             readOnly
@@ -23,7 +25,7 @@ const BoolLine = ({ value, ...rest }: Props) => {
         </Label>
       )}
     </FormModelConfig.Consumer>
-  ) : null;
+  );
 };
 
 export default BoolLine;

From e22f87042ce04f79dc411e8e8829275ae0ba0c1e Mon Sep 17 00:00:00 2001
From: Angel Araya <angel.araya@janeirodigital.com>
Date: Thu, 5 Dec 2019 13:25:35 -0600
Subject: [PATCH 4/7] SingleLine: default to empty string when no value is
 found

---
 .../children/Viewer/UI/SingleLine/single-line.component.js  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/FormModel/children/Viewer/UI/SingleLine/single-line.component.js b/src/lib/components/FormModel/children/Viewer/UI/SingleLine/single-line.component.js
index 12dd0629..974156b7 100644
--- a/src/lib/components/FormModel/children/Viewer/UI/SingleLine/single-line.component.js
+++ b/src/lib/components/FormModel/children/Viewer/UI/SingleLine/single-line.component.js
@@ -5,16 +5,16 @@ import { Wrapper, Label, Value } from './single-line.style';
 import { FormModelUI } from '@constants';
 
 const SingleLine = ({ value, ...rest }: { value: String }) => {
-  return value ? (
+  return (
     <FormModelConfig.Consumer>
       {({ theme }) => (
         <Wrapper className={theme && theme.singleLineViewerClass}>
           <Label className="label">{rest[FormModelUI.UI_LABEL]}</Label>
-          <Value className="value">{value}</Value>
+          <Value className="value">{value || ''}</Value>
         </Wrapper>
       )}
     </FormModelConfig.Consumer>
-  ) : null;
+  );
 };
 
 export default SingleLine;

From 0d51b87d35331f8d1d8e0086e62a6b48ce23d419 Mon Sep 17 00:00:00 2001
From: Angel Araya <angel.araya@janeirodigital.com>
Date: Thu, 5 Dec 2019 13:29:26 -0600
Subject: [PATCH 5/7] Multiline: default to empty string when value is missing

---
 .../Viewer/UI/MultiLine/multi-line.component.js      | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/FormModel/children/Viewer/UI/MultiLine/multi-line.component.js b/src/lib/components/FormModel/children/Viewer/UI/MultiLine/multi-line.component.js
index 338667ea..76728eba 100644
--- a/src/lib/components/FormModel/children/Viewer/UI/MultiLine/multi-line.component.js
+++ b/src/lib/components/FormModel/children/Viewer/UI/MultiLine/multi-line.component.js
@@ -1,18 +1,20 @@
 import React from 'react';
-import { FormModelConfig } from '@context';
 import { Wrapper, Label, Value } from './multi-line.style';
 
+import { FormModelConfig } from '@context';
+import { FormModelUI } from '@constants';
+
 const MultiLine = ({ value, ...rest }: { value: String }) => {
-  return value ? (
+  return (
     <FormModelConfig.Consumer>
       {({ theme }) => (
         <Wrapper className={theme && theme.multiLineViewerClass}>
-          <Label className="label">{rest['ui:label']}</Label>
-          <Value className="value">{value}</Value>
+          <Label className="label">{rest[FormModelUI.UI_LABEL]}</Label>
+          <Value className="value">{value || ''}</Value>
         </Wrapper>
       )}
     </FormModelConfig.Consumer>
-  ) : null;
+  );
 };
 
 export default MultiLine;

From 0447a36964f07cbc18ecee84ec841fa2fa29ebc4 Mon Sep 17 00:00:00 2001
From: Angel Araya <angel.araya@janeirodigital.com>
Date: Thu, 5 Dec 2019 13:30:43 -0600
Subject: [PATCH 6/7] Bool line: Use predicate from constants

---
 .../children/Viewer/UI/BoolLine/bool-line.component.js          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/FormModel/children/Viewer/UI/BoolLine/bool-line.component.js b/src/lib/components/FormModel/children/Viewer/UI/BoolLine/bool-line.component.js
index 84f01d86..a5e3e388 100644
--- a/src/lib/components/FormModel/children/Viewer/UI/BoolLine/bool-line.component.js
+++ b/src/lib/components/FormModel/children/Viewer/UI/BoolLine/bool-line.component.js
@@ -21,7 +21,7 @@ const BoolLine = ({ value, ...rest }: Props) => {
             readOnly
             className="input-value"
           />
-          <span className="label-text">{rest['ui:label'] || 'Label'}</span>
+          <span className="label-text">{rest[FormModelUI.UI_LABEL] || 'Label'}</span>
         </Label>
       )}
     </FormModelConfig.Consumer>

From 2169e997dcd302051176f4b5d84382aac82828a8 Mon Sep 17 00:00:00 2001
From: Angel Araya <angel.araya@janeirodigital.com>
Date: Thu, 5 Dec 2019 13:32:44 -0600
Subject: [PATCH 7/7] DateLine: Use empty string when there is no value set

---
 .../Viewer/UI/DateLine/date-line.component.js      | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.component.js b/src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.component.js
index 9e3c83a0..f54d9390 100644
--- a/src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.component.js
+++ b/src/lib/components/FormModel/children/Viewer/UI/DateLine/date-line.component.js
@@ -10,13 +10,17 @@ const DateLine = ({ value, ...rest }: { value: String }) => {
   const type = rest[FormModelUI.RDF_TYPE];
 
   let renderValue;
-  if (type === UITypes.DateTimeField) {
-    renderValue = format(new Date(value), 'Pp');
+  if (value) {
+    if (type === UITypes.DateTimeField) {
+      renderValue = format(new Date(value), 'Pp');
+    } else {
+      renderValue = value;
+    }
   } else {
-    renderValue = value;
+    renderValue = '';
   }
 
-  return value ? (
+  return (
     <FormModelConfig.Consumer>
       {({ theme }) => (
         <Wrapper className={theme && theme.dateLineViewerClass}>
@@ -25,7 +29,7 @@ const DateLine = ({ value, ...rest }: { value: String }) => {
         </Wrapper>
       )}
     </FormModelConfig.Consumer>
-  ) : null;
+  );
 };
 
 export default DateLine;