@ohos-ports/sprucelabs-react-heartwood-components 9.1.0-beta.0

package/lib/components/Forms/components/FormBuilder/FormBuilder-story.js

@@ -0,0 +1,357 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _react3 = require("@storybook/addon-knobs/react");
+
+var _FormBuilder = _interopRequireDefault(require("./FormBuilder"));
+
+var _Modal = _interopRequireDefault(require("../../../Modal/Modal"));
+
+var _Page = _interopRequireWildcard(require("../../../Page"));
+
+var _Card = require("../../../Card");
+
+var _Layout = _interopRequireWildcard(require("../../../Layout"));
+
+var stories = (0, _react2.storiesOf)('FormBuilder', module);
+stories.addDecorator(_react3.withKnobs); // stories.addDecorator(withLayout)
+
+stories.add('Basic', function () {
+  return _react["default"].createElement(_Page["default"], null, _react["default"].createElement(_Page.PageContent, null, _react["default"].createElement(_Layout["default"], null, _react["default"].createElement(_Layout.LayoutSection, null, _react["default"].createElement(_Card.Card, null, _react["default"].createElement(_Card.CardBody, null, _react["default"].createElement(_FormBuilder["default"], {
+    kind: "page" // validate={console.log}
+    ,
+    sections: (0, _react3.object)('sections', [{
+      title: 'Appointment Settings',
+      fields: [{
+        name: 'guestSMSCancellations',
+        type: 'boolean',
+        props: {
+          label: 'Guest SMS cancellations',
+          helper: 'Guests can cancel an appointment via SMS'
+        }
+      }, {
+        name: 'Personalized Message',
+        type: 'text',
+        props: {
+          label: 'Confirmation message',
+          helper: 'You have {{Organization.name}} and {{Location.name}}'
+        }
+      }]
+    }]),
+    initialValues: {},
+    formLayout: {
+      spacing: 'base'
+    },
+    onSubmit: function onSubmit(values) {
+      return console.log('Submit', {
+        values: values
+      });
+    }
+  })))))));
+}).add('With Submit', function () {
+  return _react["default"].createElement(_Page["default"], null, _react["default"].createElement(_Page.PageContent, null, _react["default"].createElement(_Layout["default"], null, _react["default"].createElement(_Layout.LayoutSection, null, _react["default"].createElement(_Card.Card, null, _react["default"].createElement(_Card.CardBody, null, _react["default"].createElement(_FormBuilder["default"], {
+    validate: function validate(values) {
+      console.log('Validate: ', {
+        values: values
+      });
+      var errors = {};
+
+      if (!values.publicName) {
+        errors.publicName = 'Please include a public name';
+      }
+
+      if (!values.streetAddress) {
+        errors.streetAddress = 'Please include a street address';
+      }
+
+      if (!values.city) {
+        errors.city = 'Please include a city';
+      }
+
+      if (!values.postalCode) {
+        errors.postalCode = 'Please include a postal/zip code';
+      }
+
+      if (!values.country) {
+        errors.country = 'Please include a country';
+      }
+
+      if (!values.region) {
+        errors.region = 'Please include a state or region';
+      }
+
+      return errors;
+    },
+    onSubmit: function onSubmit(values) {
+      return console.log('Submit', {
+        values: values
+      });
+    },
+    initialValues: {
+      publicName: 'Chimera Hair Salon',
+      streetAddress: '',
+      streetAddress2: '',
+      city: '',
+      postalCode: '',
+      country: 'United States',
+      region: ''
+    },
+    formLayout: {
+      spacing: 'tight'
+    },
+    sections: (0, _react3.object)('sections', [{
+      fields: [{
+        type: 'text',
+        name: 'publicName',
+        props: {
+          label: 'Public Name',
+          helper: 'This is the name that your guests will see',
+          required: true
+        }
+      }, {
+        type: 'text',
+        name: 'streetAddress',
+        props: {
+          label: 'Street Address',
+          placeholder: '123 High St',
+          required: true
+        }
+      }, {
+        type: 'text',
+        name: 'streetAddress2',
+        props: {
+          label: 'Unit, Suite, Etc… (Optional)',
+          required: false
+        }
+      }, {
+        name: 'city',
+        type: 'text',
+        props: {
+          label: 'City',
+          placeholder: 'Springfield',
+          required: true
+        }
+      }, {
+        name: 'postalCode',
+        type: 'text',
+        props: {
+          label: 'Postal / Zip Code',
+          placeholder: '888888',
+          required: true
+        }
+      }, {
+        name: 'country',
+        type: 'text',
+        props: {
+          label: 'Country',
+          placeholder: 'Select an option…',
+          required: true
+        }
+      }, {
+        name: 'region',
+        type: 'text',
+        props: {
+          label: 'State',
+          placeholder: 'Select an option…',
+          required: true
+        }
+      }]
+    }]),
+    primaryCTA: {
+      text: 'Add location'
+    }
+  })))))));
+}).add('Settings page', function () {
+  return _react["default"].createElement(_Page["default"], null, _react["default"].createElement(_Page.PageContent, null, _react["default"].createElement(_FormBuilder["default"], {
+    kind: "page",
+    initialValues: {
+      pastApptEditingCutoff: '45min',
+      pastApptBookingCutoff: '10min',
+      guestUpdateDelays: '1min',
+      autoConfirmAppts: true,
+      apptReminder1: '24hrs',
+      apptReminder1Buffer: '48hrs',
+      apptReminder2: '1hr',
+      apptReminder2Buffer: '2hrs'
+    },
+    validate: function validate(values) {
+      var errors = {};
+
+      if (!values.pastApptEditingCutoff) {
+        errors.pastApptEditingCutoff = 'Please include a cutoff time';
+      }
+
+      if (!values.pastApptBookingCutoff) {
+        errors.pastApptBookingCutoff = 'Please include a cutoff time';
+      }
+
+      if (!values.guestUpdateDelays) {
+        errors.guestUpdateDelays = 'Please include a delay';
+      }
+
+      if (!values.apptReminder1) {
+        errors.apptReminder1 = 'Please include a reminder time';
+      }
+
+      if (!values.apptReminder1Buffer) {
+        errors.apptReminder1Buffer = 'Please include a buffer time';
+      }
+
+      if (!values.apptReminder2) {
+        errors.apptReminder2 = 'Please include a reminder time';
+      }
+
+      if (!values.apptReminder2Buffer) {
+        errors.apptReminder2Buffer = 'Please include a buffer time';
+      }
+
+      return errors;
+    },
+    onSubmit: function onSubmit(values) {
+      return console.log('Submit', {
+        values: values
+      });
+    },
+    formLayout: {
+      spacing: 'tight'
+    },
+    sections: (0, _react3.object)('sections', [{
+      title: 'Appointment settings',
+      fields: [{
+        type: 'duration',
+        name: 'pastApptEditingCutoff',
+        props: {
+          minMinutes: 5,
+          maxMinutes: 60 * 5,
+          label: 'Cutoff for editing appointments in the past',
+          helper: 'Once an appointment is past, how many minutes should I wait until I block the ability to edit it? Note: Paid appointments cannot be edited.',
+          required: true
+        }
+      }, {
+        type: 'text',
+        name: 'pastApptBookingCutoff',
+        props: {
+          label: 'Booking past appointment cutoff',
+          helper: 'How far in the past should I allow appointments to be booked?',
+          required: true
+        }
+      }, {
+        type: 'text',
+        name: 'guestUpdateDelays',
+        props: {
+          label: 'Guest update delays',
+          helper: 'How long should I wait before sending an update text to the guest when changes are made to their appointment? This gives you time to make a few edits back-to-back without the guest receiving a ton of texts.',
+          required: true
+        }
+      }, {
+        name: 'autoConfirm',
+        type: 'boolean',
+        props: {
+          label: 'Auto-Confirm Appointments',
+          helper: 'Should I auto-confirm all booked appointments?',
+          defaultValue: false
+        }
+      }]
+    }, {
+      title: 'Reminder Settings',
+      fields: [{
+        name: 'apptReminder1',
+        type: 'text',
+        props: {
+          label: 'Appointment Reminder 1',
+          helper: 'How many hours before an appointment should I send the first reminder?',
+          required: true
+        }
+      }, {
+        name: 'apptReminder1Buffer',
+        type: 'text',
+        props: {
+          label: 'Appointment Reminder 1 Buffer',
+          helper: "How many hours before an appointment does a guest need to book to activate the first reminder? Example, I don't want to send a 24 hour reminder if someone booked 25 hours ago because they'd get a confirmation text and then a reminder an hour later.",
+          required: true
+        }
+      }, {
+        name: 'apptReminder2',
+        type: 'text',
+        props: {
+          label: 'Appointment Reminder 2',
+          helper: 'How many hours before an appointment should I send the second reminder?'
+        }
+      }, {
+        name: 'apptReminder2Buffer',
+        type: 'text',
+        props: {
+          label: 'Appointment Reminder 2 Buffer',
+          helper: "How many hours before an appointment does a guest need to book to activate the second reminder?  Example, I don't want to send an hour reminder if someone booked 61 minutes ago because they'd get a confirmation text and then a reminder a minute later.",
+          required: true
+        }
+      }, {
+        name: 'appointmentSync',
+        type: 'select',
+        props: {
+          label: 'How often should I sync appointments?',
+          helper: 'How often should I check for new appointments and sync them?',
+          options: {
+            hourly: 'Hourly',
+            daily: 'Daily',
+            weekly: 'Weekly'
+          },
+          defaultValue: 'weekly',
+          required: true
+        }
+      }]
+    }])
+  })));
+}).add('In a modal', function () {
+  return _react["default"].createElement(_Page["default"], null, _react["default"].createElement(_Page.PageContent, null, _react["default"].createElement(_Modal["default"], {
+    isOpen: true,
+    isSmall: true
+  }, _react["default"].createElement(_Modal["default"].Header, {
+    title: "New location group"
+  }), _react["default"].createElement(_FormBuilder["default"], {
+    initialValues: {
+      groupName: ''
+    },
+    validate: function validate() {
+      var errors = {}; // TODO: Hook up groupName custom error
+      // if (!groupName) {
+      // 	errors.groupName = 'Please name this group'
+      // }
+
+      return errors;
+    },
+    onSubmit: function onSubmit(values) {
+      return console.log('Submit', {
+        values: values
+      });
+    },
+    formLayout: {
+      spacing: 'tight'
+    },
+    kind: "modal",
+    sections: [{
+      fields: [{
+        name: 'groupName',
+        type: 'text',
+        props: {
+          label: 'Group Name',
+          placeholder: 'e.g. East, West, Midwest, etc…'
+        }
+      }]
+    }],
+    primaryCTA: {
+      text: 'Create group'
+    },
+    secondaryCTA: {
+      text: 'Cancel'
+    }
+  }))));
+});
+//# sourceMappingURL=FormBuilder-story.js.map

package/lib/components/Forms/components/FormBuilder/FormBuilder-story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Forms/components/FormBuilder/FormBuilder-story.js"],"names":["stories","module","addDecorator","withKnobs","add","title","fields","name","type","props","label","helper","spacing","values","console","log","errors","publicName","streetAddress","city","postalCode","country","region","streetAddress2","required","placeholder","text","pastApptEditingCutoff","pastApptBookingCutoff","guestUpdateDelays","autoConfirmAppts","apptReminder1","apptReminder1Buffer","apptReminder2","apptReminder2Buffer","minMinutes","maxMinutes","defaultValue","options","hourly","daily","weekly","groupName"],"mappings":"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","sourcesContent":["// @flow\nimport React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withKnobs, object } from '@storybook/addon-knobs/react'\nimport FormBuilder from './FormBuilder'\nimport Modal from '../../../Modal/Modal'\nimport Page, { PageContent } from '../../../Page'\nimport { Card, CardBody } from '../../../Card'\nimport Layout, { LayoutSection } from '../../../Layout'\n\nconst stories = storiesOf('FormBuilder', module)\n\nstories.addDecorator(withKnobs)\n// stories.addDecorator(withLayout)\n\nstories\n\t.add('Basic', () => (\n\t\t<Page>\n\t\t\t<PageContent>\n\t\t\t\t<Layout>\n\t\t\t\t\t<LayoutSection>\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t\t<FormBuilder\n\t\t\t\t\t\t\t\t\tkind=\"page\"\n\t\t\t\t\t\t\t\t\t// validate={console.log}\n\t\t\t\t\t\t\t\t\tsections={object('sections', [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\ttitle: 'Appointment Settings',\n\t\t\t\t\t\t\t\t\t\t\tfields: [\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: 'guestSMSCancellations',\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'boolean',\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: 'Guest SMS cancellations',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thelper: 'Guests can cancel an appointment via SMS'\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: 'Personalized Message',\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: 'Confirmation message',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thelper:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'You have {{Organization.name}} and {{Location.name}}'\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t])}\n\t\t\t\t\t\t\t\t\tinitialValues={{}}\n\t\t\t\t\t\t\t\t\tformLayout={{ spacing: 'base' }}\n\t\t\t\t\t\t\t\t\tonSubmit={values => console.log('Submit', { values })}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</LayoutSection>\n\t\t\t\t</Layout>\n\t\t\t</PageContent>\n\t\t</Page>\n\t))\n\t.add('With Submit', () => (\n\t\t<Page>\n\t\t\t<PageContent>\n\t\t\t\t<Layout>\n\t\t\t\t\t<LayoutSection>\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t\t<FormBuilder\n\t\t\t\t\t\t\t\t\tvalidate={values => {\n\t\t\t\t\t\t\t\t\t\tconsole.log('Validate: ', { values })\n\t\t\t\t\t\t\t\t\t\tlet errors = {}\n\t\t\t\t\t\t\t\t\t\tif (!values.publicName) {\n\t\t\t\t\t\t\t\t\t\t\terrors.publicName = 'Please include a public name'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif (!values.streetAddress) {\n\t\t\t\t\t\t\t\t\t\t\terrors.streetAddress = 'Please include a street address'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif (!values.city) {\n\t\t\t\t\t\t\t\t\t\t\terrors.city = 'Please include a city'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif (!values.postalCode) {\n\t\t\t\t\t\t\t\t\t\t\terrors.postalCode = 'Please include a postal/zip code'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif (!values.country) {\n\t\t\t\t\t\t\t\t\t\t\terrors.country = 'Please include a country'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif (!values.region) {\n\t\t\t\t\t\t\t\t\t\t\terrors.region = 'Please include a state or region'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn errors\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonSubmit={values => console.log('Submit', { values })}\n\t\t\t\t\t\t\t\t\tinitialValues={{\n\t\t\t\t\t\t\t\t\t\tpublicName: 'Chimera Hair Salon',\n\t\t\t\t\t\t\t\t\t\tstreetAddress: '',\n\t\t\t\t\t\t\t\t\t\tstreetAddress2: '',\n\t\t\t\t\t\t\t\t\t\tcity: '',\n\t\t\t\t\t\t\t\t\t\tpostalCode: '',\n\t\t\t\t\t\t\t\t\t\tcountry: 'United States',\n\t\t\t\t\t\t\t\t\t\tregion: ''\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tformLayout={{\n\t\t\t\t\t\t\t\t\t\tspacing: 'tight'\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tsections={object('sections', [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tfields: [\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: 'publicName',\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: 'Public Name',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thelper:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'This is the name that your guests will see',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequired: true\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: 'streetAddress',\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: 'Street Address',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tplaceholder: '123 High St',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequired: true\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: 'streetAddress2',\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: 'Unit, Suite, Etc… (Optional)',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequired: false\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: 'city',\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: 'City',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tplaceholder: 'Springfield',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequired: true\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: 'postalCode',\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: 'Postal / Zip Code',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tplaceholder: '888888',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequired: true\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: 'country',\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: 'Country',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tplaceholder: 'Select an option…',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequired: true\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\tname: 'region',\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: 'State',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tplaceholder: 'Select an option…',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trequired: true\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t])}\n\t\t\t\t\t\t\t\t\tprimaryCTA={{\n\t\t\t\t\t\t\t\t\t\ttext: 'Add location'\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</LayoutSection>\n\t\t\t\t</Layout>\n\t\t\t</PageContent>\n\t\t</Page>\n\t))\n\t.add('Settings page', () => (\n\t\t<Page>\n\t\t\t<PageContent>\n\t\t\t\t<FormBuilder\n\t\t\t\t\tkind=\"page\"\n\t\t\t\t\tinitialValues={{\n\t\t\t\t\t\tpastApptEditingCutoff: '45min',\n\t\t\t\t\t\tpastApptBookingCutoff: '10min',\n\t\t\t\t\t\tguestUpdateDelays: '1min',\n\t\t\t\t\t\tautoConfirmAppts: true,\n\t\t\t\t\t\tapptReminder1: '24hrs',\n\t\t\t\t\t\tapptReminder1Buffer: '48hrs',\n\t\t\t\t\t\tapptReminder2: '1hr',\n\t\t\t\t\t\tapptReminder2Buffer: '2hrs'\n\t\t\t\t\t}}\n\t\t\t\t\tvalidate={values => {\n\t\t\t\t\t\tlet errors = {}\n\t\t\t\t\t\tif (!values.pastApptEditingCutoff) {\n\t\t\t\t\t\t\terrors.pastApptEditingCutoff = 'Please include a cutoff time'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (!values.pastApptBookingCutoff) {\n\t\t\t\t\t\t\terrors.pastApptBookingCutoff = 'Please include a cutoff time'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (!values.guestUpdateDelays) {\n\t\t\t\t\t\t\terrors.guestUpdateDelays = 'Please include a delay'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (!values.apptReminder1) {\n\t\t\t\t\t\t\terrors.apptReminder1 = 'Please include a reminder time'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (!values.apptReminder1Buffer) {\n\t\t\t\t\t\t\terrors.apptReminder1Buffer = 'Please include a buffer time'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (!values.apptReminder2) {\n\t\t\t\t\t\t\terrors.apptReminder2 = 'Please include a reminder time'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (!values.apptReminder2Buffer) {\n\t\t\t\t\t\t\terrors.apptReminder2Buffer = 'Please include a buffer time'\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn errors\n\t\t\t\t\t}}\n\t\t\t\t\tonSubmit={values => console.log('Submit', { values })}\n\t\t\t\t\tformLayout={{\n\t\t\t\t\t\tspacing: 'tight'\n\t\t\t\t\t}}\n\t\t\t\t\tsections={object('sections', [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttitle: 'Appointment settings',\n\t\t\t\t\t\t\tfields: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'duration',\n\t\t\t\t\t\t\t\t\tname: 'pastApptEditingCutoff',\n\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\tminMinutes: 5,\n\t\t\t\t\t\t\t\t\t\tmaxMinutes: 60 * 5,\n\t\t\t\t\t\t\t\t\t\tlabel: 'Cutoff for editing appointments in the past',\n\t\t\t\t\t\t\t\t\t\thelper:\n\t\t\t\t\t\t\t\t\t\t\t'Once an appointment is past, how many minutes should I wait until I block the ability to edit it? Note: Paid appointments cannot be edited.',\n\t\t\t\t\t\t\t\t\t\trequired: true\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\tname: 'pastApptBookingCutoff',\n\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\tlabel: 'Booking past appointment cutoff',\n\t\t\t\t\t\t\t\t\t\thelper:\n\t\t\t\t\t\t\t\t\t\t\t'How far in the past should I allow appointments to be booked?',\n\t\t\t\t\t\t\t\t\t\trequired: true\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\tname: 'guestUpdateDelays',\n\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\tlabel: 'Guest update delays',\n\t\t\t\t\t\t\t\t\t\thelper:\n\t\t\t\t\t\t\t\t\t\t\t'How long should I wait before sending an update text to the guest when changes are made to their appointment? This gives you time to make a few edits back-to-back without the guest receiving a ton of texts.',\n\t\t\t\t\t\t\t\t\t\trequired: true\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tname: 'autoConfirm',\n\t\t\t\t\t\t\t\t\ttype: 'boolean',\n\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\tlabel: 'Auto-Confirm Appointments',\n\t\t\t\t\t\t\t\t\t\thelper: 'Should I auto-confirm all booked appointments?',\n\t\t\t\t\t\t\t\t\t\tdefaultValue: false\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttitle: 'Reminder Settings',\n\t\t\t\t\t\t\tfields: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tname: 'apptReminder1',\n\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\tlabel: 'Appointment Reminder 1',\n\t\t\t\t\t\t\t\t\t\thelper:\n\t\t\t\t\t\t\t\t\t\t\t'How many hours before an appointment should I send the first reminder?',\n\t\t\t\t\t\t\t\t\t\trequired: true\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tname: 'apptReminder1Buffer',\n\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\tlabel: 'Appointment Reminder 1 Buffer',\n\t\t\t\t\t\t\t\t\t\thelper:\n\t\t\t\t\t\t\t\t\t\t\t\"How many hours before an appointment does a guest need to book to activate the first reminder? Example, I don't want to send a 24 hour reminder if someone booked 25 hours ago because they'd get a confirmation text and then a reminder an hour later.\",\n\t\t\t\t\t\t\t\t\t\trequired: true\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tname: 'apptReminder2',\n\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\tlabel: 'Appointment Reminder 2',\n\t\t\t\t\t\t\t\t\t\thelper:\n\t\t\t\t\t\t\t\t\t\t\t'How many hours before an appointment should I send the second reminder?'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tname: 'apptReminder2Buffer',\n\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\tlabel: 'Appointment Reminder 2 Buffer',\n\t\t\t\t\t\t\t\t\t\thelper:\n\t\t\t\t\t\t\t\t\t\t\t\"How many hours before an appointment does a guest need to book to activate the second reminder?  Example, I don't want to send an hour reminder if someone booked 61 minutes ago because they'd get a confirmation text and then a reminder a minute later.\",\n\t\t\t\t\t\t\t\t\t\trequired: true\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tname: 'appointmentSync',\n\t\t\t\t\t\t\t\t\ttype: 'select',\n\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\tlabel: 'How often should I sync appointments?',\n\t\t\t\t\t\t\t\t\t\thelper:\n\t\t\t\t\t\t\t\t\t\t\t'How often should I check for new appointments and sync them?',\n\t\t\t\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\t\t\t\thourly: 'Hourly',\n\t\t\t\t\t\t\t\t\t\t\tdaily: 'Daily',\n\t\t\t\t\t\t\t\t\t\t\tweekly: 'Weekly'\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tdefaultValue: 'weekly',\n\t\t\t\t\t\t\t\t\t\trequired: true\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t}\n\t\t\t\t\t])}\n\t\t\t\t/>\n\t\t\t</PageContent>\n\t\t</Page>\n\t))\n\t.add('In a modal', () => (\n\t\t<Page>\n\t\t\t<PageContent>\n\t\t\t\t<Modal isOpen isSmall>\n\t\t\t\t\t<Modal.Header title=\"New location group\" />\n\t\t\t\t\t<FormBuilder\n\t\t\t\t\t\tinitialValues={{\n\t\t\t\t\t\t\tgroupName: ''\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvalidate={() => {\n\t\t\t\t\t\t\tlet errors = {}\n\n\t\t\t\t\t\t\t// TODO: Hook up groupName custom error\n\t\t\t\t\t\t\t// if (!groupName) {\n\t\t\t\t\t\t\t// \terrors.groupName = 'Please name this group'\n\t\t\t\t\t\t\t// }\n\n\t\t\t\t\t\t\treturn errors\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonSubmit={values => console.log('Submit', { values })}\n\t\t\t\t\t\tformLayout={{\n\t\t\t\t\t\t\tspacing: 'tight'\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tkind=\"modal\"\n\t\t\t\t\t\tsections={[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tfields: [\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tname: 'groupName',\n\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'Group Name',\n\t\t\t\t\t\t\t\t\t\t\tplaceholder: 'e.g. East, West, Midwest, etc…'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t]}\n\t\t\t\t\t\tprimaryCTA={{\n\t\t\t\t\t\t\ttext: 'Create group'\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tsecondaryCTA={{\n\t\t\t\t\t\t\ttext: 'Cancel'\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</Modal>\n\t\t\t</PageContent>\n\t\t</Page>\n\t))\n"],"file":"FormBuilder-story.js"}

package/lib/components/Forms/components/FormBuilder/FormBuilder.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _formik = require("formik");
+
+var _FormInner = _interopRequireDefault(require("./components/FormInner/FormInner"));
+
+var _Card = require("../../../Card");
+
+var _Layout = _interopRequireWildcard(require("../../../Layout"));
+
+var _Core = require("../../../Core");
+
+var _Modal = _interopRequireDefault(require("../../../Modal/Modal"));
+
+var FormBuilder = function FormBuilder(props) {
+  var kind = props.kind,
+      onSubmit = props.onSubmit,
+      sections = props.sections,
+      formLayout = props.formLayout,
+      primaryCTA = props.primaryCTA,
+      secondaryCTA = props.secondaryCTA,
+      validate = props.validate;
+  var initialValues = sections.reduce(function (values, section) {
+    values = section.fields.reduce(function (values, field) {
+      values[field.name] = field.currentValue;
+      return values;
+    }, values);
+    return values;
+  }, {});
+  return _react["default"].createElement(_formik.Formik, {
+    initialValues: initialValues,
+    validate: validate,
+    onSubmit: onSubmit,
+    validateOnBlur: true,
+    validateOnChange: false,
+    render: function render(props) {
+      var handleSubmit = props.handleSubmit,
+          handleReset = props.handleReset,
+          dirty = props.dirty,
+          isValid = props.isValid,
+          isSubmitting = props.isSubmitting;
+      return _react["default"].createElement(_formik.Form, {
+        className: "formbuilder"
+      }, kind === 'page' && sections && sections.length > 0 && _react["default"].createElement(_Layout["default"], null, sections.map(function (section) {
+        return _react["default"].createElement(_Layout.LayoutSection, {
+          key: section.id,
+          id: section.id
+        }, _react["default"].createElement(_Card.Card, null, section.title && _react["default"].createElement(_Card.CardHeader, {
+          title: section.title
+        }), _react["default"].createElement(_Card.CardBody, null, _react["default"].createElement(_FormInner["default"], {
+          formLayout: formLayout,
+          fields: section.fields,
+          formikProps: props
+        }))));
+      }), _react["default"].createElement(_Core.SaveBar, {
+        isVisible: dirty,
+        onSave: handleSubmit,
+        onDiscard: handleReset,
+        isSaveDisabled: !isValid,
+        isSaving: isSubmitting,
+        isDiscardDisabled: isSubmitting
+      }), _react["default"].createElement("button", {
+        type: "submit",
+        text: "submit",
+        style: {
+          display: 'none'
+        }
+      })), kind === 'default' && sections && sections.length > 0 && sections.map(function (section, idx) {
+        return _react["default"].createElement(_FormInner["default"], {
+          key: "section-".concat(idx),
+          formLayout: formLayout,
+          fields: section.fields,
+          formikProps: props,
+          primaryCTA: primaryCTA,
+          secondaryCTA: secondaryCTA
+        });
+      }), kind === 'modal' && _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_Modal["default"].Body, null, sections && sections.length > 0 && sections.map(function (section, idx) {
+        return _react["default"].createElement(_FormInner["default"], {
+          key: "section-".concat(idx),
+          formLayout: formLayout,
+          fields: section.fields,
+          formikProps: props
+        });
+      })), primaryCTA && _react["default"].createElement(_Modal["default"].Footer, {
+        primaryAction: (0, _objectSpread2["default"])({}, primaryCTA, {
+          type: 'submit',
+          disabled: !isValid || isSubmitting,
+          isLoading: isSubmitting
+        }),
+        secondaryAction: (0, _objectSpread2["default"])({}, secondaryCTA, {
+          disabled: isSubmitting
+        })
+      })));
+    }
+  });
+};
+
+FormBuilder.defaultProps = {
+  kind: 'default',
+  validate: function validate() {
+    return null;
+  },
+  primaryCTA: null,
+  secondaryCTA: null
+};
+var _default = FormBuilder;
+exports["default"] = _default;
+//# sourceMappingURL=FormBuilder.js.map

package/lib/components/Forms/components/FormBuilder/FormBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Forms/components/FormBuilder/FormBuilder.js"],"names":["FormBuilder","props","kind","onSubmit","sections","formLayout","primaryCTA","secondaryCTA","validate","initialValues","reduce","values","section","fields","field","name","currentValue","handleSubmit","handleReset","dirty","isValid","isSubmitting","length","map","id","title","display","idx","type","disabled","isLoading","defaultProps"],"mappings":"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","sourcesContent":["// @flow\nimport React, { Fragment } from 'react'\nimport { Formik, Form } from 'formik'\nimport FormInner from './components/FormInner/FormInner'\nimport { Card, CardBody, CardHeader } from '../../../Card'\nimport Layout, { LayoutSection } from '../../../Layout'\nimport { SaveBar } from '../../../Core'\nimport Modal from '../../../Modal/Modal'\n\nimport type { FormInnerFieldProps } from './components/FormInner/FormInner'\nimport type { FormLayoutProps } from '../FormLayout/FormLayout'\nimport type { Props as ButtonProps } from '../../../Button/Button'\n\ntype SectionProps = {\n\t/** Unique id for the section */\n\tid: string,\n\n\t/** Optional title to show at the top of the card */\n\ttitle?: string,\n\n\t/** Fields for this card */\n\tfields: Array<FormInnerFieldProps & { currentValue: any }>\n}\n\ntype Props = {\n\t/** Determines how the form should be build. Default builds a simple form */\n\tkind?: 'default' | 'page' | 'modal',\n\n\t/** Initial values to be passed into the form */\n\tinitialValues: Object,\n\n\t/** Submit handler */\n\tonSubmit: Function,\n\n\t/** Use sections when the form to be built is a full page */\n\tsections: Array<SectionProps>,\n\n\t/** Form layout props */\n\tformLayout: FormLayoutProps,\n\n\t/** Validation handler. This isn't needed when the form is made of toggles only. */\n\tvalidate?: Function,\n\n\t/** Optional when rendering a primary cta in the form */\n\tprimaryCTA?: ButtonProps,\n\n\t/** Optional when using a secondary cta in the form */\n\tsecondaryCTA?: ButtonProps\n}\n\nconst FormBuilder = (props: Props) => {\n\tconst {\n\t\tkind,\n\t\tonSubmit,\n\t\tsections,\n\t\tformLayout,\n\t\tprimaryCTA,\n\t\tsecondaryCTA,\n\t\tvalidate\n\t} = props\n\n\tconst initialValues = sections.reduce((values, section) => {\n\t\tvalues = section.fields.reduce((values, field) => {\n\t\t\tvalues[field.name] = field.currentValue\n\t\t\treturn values\n\t\t}, values)\n\n\t\treturn values\n\t}, {})\n\n\treturn (\n\t\t<Formik\n\t\t\tinitialValues={initialValues}\n\t\t\tvalidate={validate}\n\t\t\tonSubmit={onSubmit}\n\t\t\tvalidateOnBlur={true}\n\t\t\tvalidateOnChange={false}\n\t\t\trender={props => {\n\t\t\t\tconst {\n\t\t\t\t\thandleSubmit,\n\t\t\t\t\thandleReset,\n\t\t\t\t\tdirty,\n\t\t\t\t\tisValid,\n\t\t\t\t\tisSubmitting\n\t\t\t\t} = props\n\n\t\t\t\treturn (\n\t\t\t\t\t<Form className=\"formbuilder\">\n\t\t\t\t\t\t{kind === 'page' && sections && sections.length > 0 && (\n\t\t\t\t\t\t\t<Layout>\n\t\t\t\t\t\t\t\t{sections.map(section => (\n\t\t\t\t\t\t\t\t\t<LayoutSection key={section.id} id={section.id}>\n\t\t\t\t\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t\t\t\t\t{section.title && <CardHeader title={section.title} />}\n\t\t\t\t\t\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t\t\t\t\t\t<FormInner\n\t\t\t\t\t\t\t\t\t\t\t\t\tformLayout={formLayout}\n\t\t\t\t\t\t\t\t\t\t\t\t\tfields={section.fields}\n\t\t\t\t\t\t\t\t\t\t\t\t\tformikProps={props}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t\t</LayoutSection>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t<SaveBar\n\t\t\t\t\t\t\t\t\tisVisible={dirty}\n\t\t\t\t\t\t\t\t\tonSave={handleSubmit}\n\t\t\t\t\t\t\t\t\tonDiscard={handleReset}\n\t\t\t\t\t\t\t\t\tisSaveDisabled={!isValid}\n\t\t\t\t\t\t\t\t\tisSaving={isSubmitting}\n\t\t\t\t\t\t\t\t\tisDiscardDisabled={isSubmitting}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{/* NOTE: The form won't submit on enter key pressed without this hidden button */}\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\ttext=\"submit\"\n\t\t\t\t\t\t\t\t\tstyle={{ display: 'none' }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Layout>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{kind === 'default' &&\n\t\t\t\t\t\t\tsections &&\n\t\t\t\t\t\t\tsections.length > 0 &&\n\t\t\t\t\t\t\tsections.map((section, idx) => (\n\t\t\t\t\t\t\t\t<FormInner\n\t\t\t\t\t\t\t\t\tkey={`section-${idx}`}\n\t\t\t\t\t\t\t\t\tformLayout={formLayout}\n\t\t\t\t\t\t\t\t\tfields={section.fields}\n\t\t\t\t\t\t\t\t\tformikProps={props}\n\t\t\t\t\t\t\t\t\tprimaryCTA={primaryCTA}\n\t\t\t\t\t\t\t\t\tsecondaryCTA={secondaryCTA}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t{kind === 'modal' && (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t<Modal.Body>\n\t\t\t\t\t\t\t\t\t{sections &&\n\t\t\t\t\t\t\t\t\t\tsections.length > 0 &&\n\t\t\t\t\t\t\t\t\t\tsections.map((section, idx) => (\n\t\t\t\t\t\t\t\t\t\t\t<FormInner\n\t\t\t\t\t\t\t\t\t\t\t\tkey={`section-${idx}`}\n\t\t\t\t\t\t\t\t\t\t\t\tformLayout={formLayout}\n\t\t\t\t\t\t\t\t\t\t\t\tfields={section.fields}\n\t\t\t\t\t\t\t\t\t\t\t\tformikProps={props}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</Modal.Body>\n\t\t\t\t\t\t\t\t{primaryCTA && (\n\t\t\t\t\t\t\t\t\t<Modal.Footer\n\t\t\t\t\t\t\t\t\t\tprimaryAction={{\n\t\t\t\t\t\t\t\t\t\t\t...primaryCTA,\n\t\t\t\t\t\t\t\t\t\t\ttype: 'submit',\n\t\t\t\t\t\t\t\t\t\t\tdisabled: !isValid || isSubmitting,\n\t\t\t\t\t\t\t\t\t\t\tisLoading: isSubmitting\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tsecondaryAction={{\n\t\t\t\t\t\t\t\t\t\t\t...secondaryCTA,\n\t\t\t\t\t\t\t\t\t\t\tdisabled: isSubmitting\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Form>\n\t\t\t\t)\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nFormBuilder.defaultProps = {\n\tkind: 'default',\n\tvalidate: () => null,\n\tprimaryCTA: null,\n\tsecondaryCTA: null\n}\n\nexport default FormBuilder\n"],"file":"FormBuilder.js"}