feat: alternative layout approach using flexbox (#38)

BREAKING CHANGE: We are now using Flexbox because it works better with dynamically hiding and showing fields using the `show` schema property. This is a breaking change because forms using the previous Grid layout system would leave an empty place in the grid when they were hidden, but the new system will stretch rows to fill in missing space.

Author: billiegoose

src/__stories__/Layouts.tsx

@@ -13,6 +13,9 @@ import { Theme, Tooltips } from './decorators';
 const data = require('./examples/layouts/data.json');
 const schema = require('./examples/layouts/schema.json');
 
+const dataNested = require('./examples/nested-layouts/data.json');
+const schemaNested = require('./examples/nested-layouts/schema.json');
+
 storiesOf('Layouts', module)
   .addDecorator(withKnobs)
   .addDecorator(Theme)
@@ -30,4 +33,18 @@ storiesOf('Layouts', module)
         />
       </Box>
     );
+  })
+  .add('nested layouts', () => {
+    return (
+      <Box width="500px">
+        <Formtron
+          fieldComponents={fieldComponents}
+          value={dataNested}
+          schema={schemaNested}
+          selection="."
+          onChange={action('onChange')}
+          layout={select('layout', ['2-col', '4-col'], '2-col')}
+        />
+      </Box>
+    );
   });

src/__stories__/examples/layouts/data.json

@@ -1,6 +1,6 @@
 {
   "_selection": ".",
-  "a": "Alpha",
+  "a": "show all",
   "b": "Bravo",
   "c": "Charlie\nCharlie\nCharlie\nCharlie\nCharlie",
   "d": "Delta",

src/__stories__/examples/layouts/schema.json

@@ -18,32 +18,40 @@
       "d e"
     ],
     "wild": [
-      "d d f",
-      "b b f",
-      "c c e",
-      "c c a"
+      "c c a",
+      "d b",
+      "f f f e"
     ]
   },
   "fields": {
     "a": {
-      "type": "string",
-      "title": "A"
+      "type": "select",
+      "title": "A",
+      "options": [
+        "show all",
+        "hide B",
+        "hide E and D"
+      ],
+      "strict": true
     },
     "b": {
       "type": "string",
-      "title": "B"
+      "title": "B",
+      "show": "a !== 'hide B'"
     },
     "c": {
       "type": "markdown",
       "title": "C"
     },
     "d": {
       "type": "string",
-      "title": "D"
+      "title": "D",
+      "show": "a !== 'hide E and D'"
     },
     "e": {
       "type": "string",
-      "title": "E"
+      "title": "E",
+      "show": "a !== 'hide E and D'"
     },
     "f": {
       "type": "markdown",

src/__stories__/examples/nested-layouts/data.json

@@ -0,0 +1,39 @@
+{
+  "_selection": ".",
+  "a": "Alpha",
+  "b": "Bravo",
+  "c": "Charlie",
+  "d": "Delta",
+  "e": {
+    "f": "Foxtrot",
+    "g": "Golf",
+    "h": "Hotel",
+    "i": "India"
+  },
+  "j": {
+    "k": {
+      "f": "Foxtrot",
+      "g": "Golf",
+      "h": "Hotel",
+      "i": "India"
+    },
+    "l": {
+      "f": "Foxtrot",
+      "g": "Golf",
+      "h": "Hotel",
+      "i": "India"
+    },
+    "m": {
+      "f": "Foxtrot",
+      "g": "Golf",
+      "h": "Hotel",
+      "i": "India"
+    },
+    "n": {
+      "f": "Foxtrot",
+      "g": "Golf",
+      "h": "Hotel",
+      "i": "India"
+    }
+  }
+}

src/__stories__/examples/nested-layouts/schema.json

@@ -0,0 +1,113 @@
+{
+  "$schema": "../../../../ui-schema.json",
+  "type": "form",
+  "title": "Layout Examples",
+  "description": "Play with the layout prop in the knobs panel",
+  "layouts": {
+    "2-col": [
+      "a b",
+      "c d",
+      "e e",
+      "j j"
+    ],
+    "4-col": [
+      "a b c d",
+      "e e e e",
+      "j j j j"
+    ]
+  },
+  "fields": {
+    "a": {
+      "type": "string",
+      "title": "A"
+    },
+    "b": {
+      "type": "string",
+      "title": "B"
+    },
+    "c": {
+      "type": "string",
+      "title": "C"
+    },
+    "d": {
+      "type": "string",
+      "title": "D"
+    },
+    "e": {
+      "type": "form",
+      "title": "E",
+      "layouts": {
+        "2-col": [
+          "f g",
+          "h i"
+        ],
+        "4-col": [
+          "f g h i"
+        ]
+      },
+      "fields": {
+        "f": {
+          "type": "string",
+          "title": "F"
+        },
+        "g": {
+          "type": "string",
+          "title": "G"
+        },
+        "h": {
+          "type": "string",
+          "title": "H"
+        },
+        "i": {
+          "type": "string",
+          "title": "I"
+        }
+      }
+    },
+    "j": {
+      "title": "J",
+      "type": "object",
+      "default": {
+        "f": "",
+        "g": "",
+        "h": "",
+        "i": ""
+      },
+      "keys": {
+        "title": "key",
+        "type": "string"
+      },
+      "values": {
+        "type": "form",
+        "title": "value",
+        "layouts": {
+          "2-col": [
+            "f", "g", "h", "i"
+          ],
+          "4-col": [
+            "f g",
+            "h i"
+          ]
+        },
+        "fields": {
+          "f": {
+            "type": "string",
+            "title": "F"
+          },
+          "g": {
+            "type": "string",
+            "title": "G"
+          },
+          "h": {
+            "type": "string",
+            "title": "H"
+          },
+          "i": {
+            "type": "string",
+            "title": "I"
+          }
+        }
+      }
+    }
+  }
+}

src/components/ArrayInput.tsx

@@ -17,6 +17,7 @@ export const ArrayInput: React.FunctionComponent<IFormtronControl> = ({
   fieldComponents,
   disabled = false,
   path,
+  layout,
 }) => {
   const { variant } = useDiagnostics(path);
   const easyArray = new EasyArray(value, schema.default);
@@ -55,6 +56,7 @@ export const ArrayInput: React.FunctionComponent<IFormtronControl> = ({
                   fieldComponents={fieldComponents}
                   onChange={_val => onChange(easyArray.update(index, _val))}
                   disabled={disabled}
+                  layout={layout}
                 />
               </Box>
             </Flex>