@pega/dx-component-builder-sdk 0.1.0

package/src/tasks/create/templates/SDK-React/Field/TimeofDay/styles.js.mustache

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/src/tasks/create/templates/SDK-React/Template/DETAILS/DefaultForm.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2 col  copy</title>
+    <g id="Views" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Template-icons" transform="translate(-320.000000, -925.000000)">
+            <g id="2-col--copy" transform="translate(320.000000, 925.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray-copy-2" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="-2.84217094e-14" width="42" height="11.8"></rect>
+                    <rect id="Rectangle" x="46" y="-2.84217094e-14" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-5" x="0" y="16" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-3" x="46" y="16" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-15" x="0" y="32" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-14" x="46" y="32" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-17" x="0" y="48" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-16" x="46" y="48" width="42" height="11.8"></rect>
+                </g>
+                <g id="Group-7" transform="translate(28.000000, 11.000000)">
+                    <path id="Line-12-Copy" d="M35.1666667,42.75 L47.1666667,48.5 L35.1666667,54.25 L35.166,49.25 L-0.25,49.25 L-0.25,47.75 L35.166,47.75 L35.1666667,42.75 Z" fill="#1E1F27" fill-rule="nonzero"></path>
+                    <line x1="0.5" y1="48.5" x2="43.5" y2="32.5" id="Line" stroke="#1E1F27" stroke-width="1.5" stroke-linecap="square"></line>
+                    <line x1="43.5" y1="32.5" x2="1.5" y2="32.5" id="Line-2" stroke="#1E1F27" stroke-width="1.5" stroke-linecap="square"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/tasks/create/templates/SDK-React/Template/DETAILS/config.json.mustache

@@ -0,0 +1,21 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "DefaultForm.svg",
+  "properties": [
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Fields", "Views", "UIComponents"]
+    }
+  ]
+}

package/src/tasks/create/templates/SDK-React/Template/DETAILS/index.tsx.mustache

@@ -0,0 +1,45 @@
+/* eslint-disable react/no-unused-prop-types */
+import React from "react";
+// import PropTypes from "prop-types";
+import Grid from '@material-ui/core/Grid';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+
+// Duplicated runtime code from React SDK
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+export default function {{COMPONENT_CLASS_NAME}}(props) {
+  const { children } = props;
+  const arFields: Array<any> = [];
+
+  for (const child of children) {
+    const theChildPConn = child.props.getPConnect();
+    const theChildrenOfChild = theChildPConn.getChildren();
+    arFields.push(theChildrenOfChild);
+  }
+
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <div id="DetailsOneColumn">
+        <Grid container spacing={1}>
+          <Grid item xs={12}>
+            <DetailsFields fields={arFields[0]} />
+          </Grid>
+        </Grid>
+      </div>
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    );
+
+}
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+
+};
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+
+};

package/src/tasks/create/templates/SDK-React/Template/DETAILS/styles.js.mustache

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/src/tasks/create/templates/SDK-React/Template/DETAILS-region/TwoColumnDetails.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2 col </title>
+    <g id="Page-Config" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Page-layouts" transform="translate(-847.000000, -84.000000)">
+            <g id="2-col-" transform="translate(847.000000, 84.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray-copy-2" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="-2.84217094e-14" width="42" height="63.8"></rect>
+                    <rect id="Rectangle" x="46" y="-2.84217094e-14" width="42" height="63.8"></rect>
+                </g>
+                <g id="labels-copy" transform="translate(22.000000, 17.000000)" fill="#FFFFFF" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500">
+                    <text id="B">
+                        <tspan x="45.75" y="12">B</tspan>
+                    </text>
+                    <g id="labels">
+                        <text id="A">
+                            <tspan x="0.75" y="12">A</tspan>
+                        </text>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/tasks/create/templates/SDK-React/Template/DETAILS-region/config.json.mustache

@@ -0,0 +1,27 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "TwoColumnDetails.svg",
+  "properties": [
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Fields", "Views", "UIComponents"]
+    },
+    {
+      "name": "B",
+      "label": "Region B",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Fields", "Views", "UIComponents"]
+    }
+  ]
+}

package/src/tasks/create/templates/SDK-React/Template/DETAILS-region/index.tsx.mustache

@@ -0,0 +1,53 @@
+/* eslint-disable react/no-unused-prop-types */
+import React from "react";
+// import PropTypes from "prop-types";
+import Grid from '@material-ui/core/Grid';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+
+// Duplicated runtime code from React SDK
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+export default function {{COMPONENT_CLASS_NAME}}(props) {
+  const { children } = props;
+  const arFields: Array<any> = [];
+
+  for (const child of children) {
+    const theChildPConn = child.props.getPConnect();
+    const theChildrenOfChild = theChildPConn.getChildren();
+    arFields.push(theChildrenOfChild);
+  }
+
+  if (arFields.length !== 2) {
+    // eslint-disable-next-line no-console
+    console.error(`DetailsTwoColumn expects 2 children and received ${arFields.length}`);
+  }
+
+
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    <div id="DetailsTwoColumn">
+      <Grid container spacing={1}>
+        <Grid item xs={6}>
+          <DetailsFields fields={arFields[0]} />
+        </Grid>
+        <Grid item xs={6}>
+          <DetailsFields fields={arFields[1]} />
+        </Grid>
+      </Grid>
+    </div>
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  )
+
+}
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+
+};
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+
+};

package/src/tasks/create/templates/SDK-React/Template/DETAILS-region/styles.js.mustache

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/src/tasks/create/templates/SDK-React/Template/FORM/DefaultForm.css

@@ -0,0 +1,25 @@
+.psdk-default-form-one-column {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: calc(1rem);
+}
+
+.psdk-default-form-two-column {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: calc(1rem);
+}
+
+.psdk-default-form-three-column {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: calc(1rem);
+}
+
+.psdk-default-form-two-column .grid-column {
+  grid-column: 1 / span 2;
+}
+
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
+}

package/src/tasks/create/templates/SDK-React/Template/FORM/DefaultForm.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2 col  copy</title>
+    <g id="Views" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Template-icons" transform="translate(-320.000000, -925.000000)">
+            <g id="2-col--copy" transform="translate(320.000000, 925.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray-copy-2" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="-2.84217094e-14" width="42" height="11.8"></rect>
+                    <rect id="Rectangle" x="46" y="-2.84217094e-14" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-5" x="0" y="16" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-3" x="46" y="16" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-15" x="0" y="32" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-14" x="46" y="32" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-17" x="0" y="48" width="42" height="11.8"></rect>
+                    <rect id="Rectangle-Copy-16" x="46" y="48" width="42" height="11.8"></rect>
+                </g>
+                <g id="Group-7" transform="translate(28.000000, 11.000000)">
+                    <path id="Line-12-Copy" d="M35.1666667,42.75 L47.1666667,48.5 L35.1666667,54.25 L35.166,49.25 L-0.25,49.25 L-0.25,47.75 L35.166,47.75 L35.1666667,42.75 Z" fill="#1E1F27" fill-rule="nonzero"></path>
+                    <line x1="0.5" y1="48.5" x2="43.5" y2="32.5" id="Line" stroke="#1E1F27" stroke-width="1.5" stroke-linecap="square"></line>
+                    <line x1="43.5" y1="32.5" x2="1.5" y2="32.5" id="Line-2" stroke="#1E1F27" stroke-width="1.5" stroke-linecap="square"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/tasks/create/templates/SDK-React/Template/FORM/config.json.mustache

@@ -0,0 +1,45 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "DefaultForm.svg",
+    "properties": [
+    {
+      "format": "SELECT",
+      "name": "NumCols",
+      "label": "Number of columns",
+      "defaultValue": "1",
+      "source": [
+        { "key": "1", "value": "One" },
+        { "key": "2", "value": "Two" },
+        { "key": "3", "value": "Three" }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "templateOverrideMode",
+      "label": "Template for embedded views",
+      "defaultValue": "USE_TEMPLATE",
+      "source": [
+        { "key": "USE_TEMPLATE", "value": "Use template" },
+        { "key": "IGNORE_TEMPLATE", "value": "Ignore template" }
+      ]
+    },
+    {
+      "format": "INSTRUCTIONS"
+    },
+    {
+      "name": "Fields",
+      "label": "Fields",
+      "format": "CONTENTPICKER",
+      "allowCreatingGroup": true
+    }
+  ]
+}

package/src/tasks/create/templates/SDK-React/Template/FORM/index.tsx.mustache

@@ -0,0 +1,63 @@
+/* eslint-disable react/no-unused-prop-types */
+import React, { createElement } from "react";
+import PropTypes from 'prop-types';
+
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import './DefaultForm.css';
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+
+// Duplicated runtime code from React SDK
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+export default function {{COMPONENT_CLASS_NAME}}(props) {
+
+
+  const { getPConnect, NumCols } = props;
+
+  let divClass: string;
+
+  const numCols = NumCols || "1";
+  switch (numCols) {
+    case "1" :
+      divClass = "psdk-default-form-one-column";
+      break;
+    case "2" :
+      divClass = "psdk-default-form-two-column";
+      break;
+    case "3" :
+      divClass = "psdk-default-form-three-column";
+      break;
+    default :
+      divClass = "psdk-default-form-one-column";
+      break;
+  }
+
+
+  // repoint the children because they are in a region and we need to not render the region
+  // to take the children and create components for them, put in an array and pass as the
+  // defaultForm kids
+  const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
+  // eslint-disable-next-line react/no-array-index-key
+  const dfChildren = arChildren.map((kid, idx) => createElement(createPConnectComponent(), {...kid, key: idx}));
+
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    <div className={divClass}>
+      {dfChildren}
+    </div>
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  )
+
+}
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+  NumCols: "1"
+};
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+  // children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  NumCols: PropTypes.string
+};

package/src/tasks/create/templates/SDK-React/Template/FORM/styles.js.mustache

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/src/tasks/create/templates/SDK-React/Template/FORM-region/TwoColumn.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2-col  icon</title>
+    <g id="Views" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-Copy-2" transform="translate(-198.000000, -207.000000)">
+            <g id="2-col--icon" transform="translate(198.000000, 207.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="0" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-18" x="0" y="11.7" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-19" x="0" y="23.4" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-20" x="0" y="35.1" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-21" x="0" y="46.8" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-22" x="0" y="58.5" width="42" height="5"></rect>
+                    <rect id="Rectangle-Copy" x="46" y="2.66453526e-15" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-27" x="46" y="11.7" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-26" x="46" y="23.4" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-25" x="46" y="35.1" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-24" x="46" y="46.8" width="42" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-23" x="46" y="58.5" width="42" height="5"></rect>
+                </g>
+                <g id="labels" transform="translate(16.000000, 11.000000)">
+                    <circle id="Oval-Copy-3" fill="#FFFFFF" cx="10.5" cy="10.8076923" r="10.5"></circle>
+                    <text id="A" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500" fill="#56566F">
+                        <tspan x="6.75" y="14">A</tspan>
+                    </text>
+                    <circle id="Oval-Copy-4" fill="#FFFFFF" cx="56.5" cy="10.8076923" r="10.5"></circle>
+                    <text id="B" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500" fill="#56566F">
+                        <tspan x="52.75" y="14">B</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/tasks/create/templates/SDK-React/Template/FORM-region/config.json.mustache

@@ -0,0 +1,49 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "TwoColumn.svg",
+  "properties": [
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER"
+    },
+    {
+      "name": "B",
+      "label": "Region B",
+      "format": "CONTENTPICKER"
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "saveToReference": true
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "saveToReference": true
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY",
+          "saveToReference": true
+        }
+      ]
+    }
+  ]
+}

package/src/tasks/create/templates/SDK-React/Template/FORM-region/index.tsx.mustache

@@ -0,0 +1,69 @@
+/* eslint-disable react/no-unused-prop-types */
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid, GridSize } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+const useStyles = makeStyles(() => ({
+  colStyles: {
+    display: "grid",
+    gap: "1rem",
+    alignContent: "baseline",
+  },
+}));
+
+
+// Duplicated runtime code from React SDK
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+export default function {{COMPONENT_CLASS_NAME}}(props) {
+  const classes = useStyles();
+
+  const {children, templateCol} = props;
+
+  if (children.length !== 2) {
+    // eslint-disable-next-line no-console
+    console.error( `TwoColumn template sees more than 2 columns: ${children.length}`);
+  }
+
+  // Calculate the size
+  //  Default to assume the 2 columns are evenly split. However, override if templateCol
+  //  (example value: "1fr 1fr")
+  let aSize: GridSize = 6;
+  let bSize: GridSize = 6;
+
+  const colAArray = templateCol.replaceAll(/[a-z]+/g, "").split(/\s/).map(itm => Number(itm));
+  const totalCols = colAArray.reduce((v, itm) => itm + v, 0);
+  const ratio = 12 / totalCols;
+  aSize = (ratio * colAArray[0]) as GridSize;
+  bSize = (ratio * colAArray[1]) as GridSize;
+
+ return (
+  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+   <Grid container spacing={1}>
+     <Grid item xs={12} md={aSize} className={classes.colStyles}>
+       {children[0]}
+     </Grid>
+     <Grid item xs={12} md={bSize} className={classes.colStyles}>
+       {children[1]}
+     </Grid>
+   </Grid>
+   </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+ )
+
+}
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+  templateCol: "1fr 1fr",
+  // icon: ""
+};
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  // title: PropTypes.string,
+  templateCol: PropTypes.string,
+  // icon: PropTypes.string
+};

package/src/tasks/create/templates/SDK-React/Template/FORM-region/styles.js.mustache

@@ -0,0 +1,7 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/src/tasks/create/templates/SDK-React/Template/PAGE/OneColumn.tsx.mustache

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((/* theme */) => ({
+  colStyles: {
+    display: "grid",
+    gap: "1rem",
+    alignContent: "baseline",
+  },
+}));
+
+
+export default function OneColumn(props) {
+  const classes = useStyles();
+
+  const { children} = props;
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12} className={classes.colStyles}>
+        {children.map(child => { return child; } )}
+      </Grid>
+    </Grid>
+  )
+}
+
+OneColumn.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  // template: PropTypes.string.isRequired
+};

package/src/tasks/create/templates/SDK-React/Template/PAGE/OneColumnPage.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>1-col  icon</title>
+    <g id="Views" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-Copy-2" transform="translate(-38.000000, -207.000000)">
+            <g id="1-col--icon" transform="translate(38.000000, 207.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="0" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-18" x="0" y="11.7" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-19" x="0" y="23.4" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-20" x="0" y="35.1" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-21" x="0" y="46.8" width="88" height="7.8"></rect>
+                    <rect id="Rectangle-Copy-22" x="0" y="58.5" width="88" height="5"></rect>
+                </g>
+                <g id="labels" transform="translate(39.000000, 11.000000)">
+                    <circle id="Oval-Copy-3" fill="#FFFFFF" cx="10.5" cy="10.8076923" r="10.5"></circle>
+                    <text id="A" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500" fill="#56566F">
+                        <tspan x="6.75" y="14">A</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>