@pareto-engineering/design-system 2.0.0-alpha.70 → 2.0.0-alpha.71

package/dist/cjs/c/Modal/Modal.js

@@ -33,20 +33,13 @@ var Modal = _ref => {
     style,
     children,
     title,
-    setOpen,
     color,
-    onClose // ...otherProps
+    close // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-
-  var close = () => {
-    setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-  };
-
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -88,19 +81,14 @@ Modal.propTypes = {
   title: _propTypes.default.string.isRequired,
 
   /**
-   *  The color for the button to open and close the modal
-   */
-  color: _propTypes.default.string.isRequired,
-
-  /**
-   *  The function to open the modal
+   *  The color for the header button
    */
-  setOpen: _propTypes.default.func.isRequired,
+  color: _propTypes.default.string,
 
   /**
    *  The function to run upon closing the modal, if any
    */
-  onClose: _propTypes.default.func
+  close: _propTypes.default.func
 };
 Modal.defaultProps = {//
 };

package/dist/cjs/f/FormInput/FormInput.js

@@ -81,6 +81,13 @@ var FormInput = _ref => {
     }, otherProps));
   }
 
+  if (type === 'query-choices') {
+    return /*#__PURE__*/React.createElement(_fields.QueryChoices, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+
   if (type === 'rating') {
     return /*#__PURE__*/React.createElement(_fields.RatingsInput, _extends({
       className: newClassName

package/dist/cjs/f/common/Label/Label.js

@@ -45,7 +45,7 @@ var Label = _ref => {
     className: [baseClassName, componentClassName, userClassName, "x-".concat(color)].filter(e => e).join(' '),
     style: style // {...otherProps}
 
-  }, children, optional && '(Optional)');
+  }, children, optional && ' (Optional)');
 };
 
 Label.propTypes = {

package/dist/cjs/f/fields/QueryChoices/QueryChoices.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactRelay = require("react-relay");
+
+var _formik = require("formik");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ChoicesInput = require("../ChoicesInput");
+
+var _excluded = ["name", "optionsKeyMap", "query", "variables", "validate", "loadingOption", "extraVariables"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+/**
+ * This is the component description.
+ */
+var QueryChoices = _ref => {
+  var {
+    name,
+    optionsKeyMap,
+    query,
+    variables,
+    validate,
+    loadingOption,
+    extraVariables
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  var [,, helpers] = (0, _formik.useField)({
+    name,
+    validate
+  });
+  var {
+    setError
+  } = helpers;
+  var environment = (0, _reactRelay.useRelayEnvironment)();
+  var [isFetching, setIsFetching] = (0, React.useState)(false);
+  var [options, setOptions] = (0, React.useState)([loadingOption]);
+  var {
+    graphql,
+    accessor
+  } = query;
+
+  var getOptions = () => {
+    if (isFetching) return;
+    var searchVariables = variables;
+
+    if (extraVariables) {
+      searchVariables = _objectSpread(_objectSpread({}, variables), extraVariables);
+    }
+
+    (0, _reactRelay.fetchQuery)(environment, graphql, searchVariables).subscribe({
+      start: () => {
+        setIsFetching(true);
+      },
+      complete: () => {
+        setIsFetching(false);
+      },
+      error: fetchError => {
+        setIsFetching(false);
+        if (setError) setError(fetchError.message);
+      },
+      next: data => {
+        setOptions([...data[accessor].edges.map(_ref2 => {
+          var {
+            node
+          } = _ref2;
+          return {
+            value: node[optionsKeyMap.value],
+            label: optionsKeyMap.getLabel(node)
+          };
+        })]);
+      }
+    });
+  };
+
+  (0, React.useEffect)(() => {
+    getOptions();
+  }, [variables]);
+  return /*#__PURE__*/React.createElement(_ChoicesInput.ChoicesInput, _extends({
+    name: name,
+    validate: validate,
+    options: options
+  }, otherProps));
+};
+
+QueryChoices.propTypes = {
+  /**
+   * The choices name
+   */
+  name: _propTypes.default.string.isRequired,
+
+  /**
+  *  The select option keys to be used to map the data to the select options.
+  * i.e `{ value: 'id', label: 'name' }`
+  */
+  optionsKeyMap: _propTypes.default.shape({
+    value: _propTypes.default.string.isRequired,
+    getLabel: _propTypes.default.func.isRequired
+  }).isRequired,
+
+  /**
+  * The graphql query to fetch the options and the accessor to destructure the results from
+  */
+  query: _propTypes.default.shape({
+    accessor: _propTypes.default.string,
+    graphql: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired
+  }),
+
+  /**
+   *  The variables that might be required to be used in the query to fetch
+   *  select options.
+   */
+  variables: _propTypes.default.objectOf(_propTypes.default.string),
+
+  /**
+  * The option to displayed when the select options are being fetched
+  */
+  loadingOption: _propTypes.default.shape({
+    value: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string.isRequired,
+    disabled: _propTypes.default.bool.isRequired
+  }),
+
+  /**
+   * The input field validator function
+   */
+  validate: _propTypes.default.string,
+
+  /**
+   *  The extra variables that might be required to be used in the query to fetch
+   *  select options.
+   */
+  extraVariables: _propTypes.default.objectOf(_propTypes.default.string)
+};
+QueryChoices.defaultProps = {
+  loadingOption: {
+    value: '',
+    label: 'Fetching Options',
+    disabled: true
+  }
+};
+var _default = QueryChoices;
+exports.default = _default;

package/dist/cjs/f/fields/QueryChoices/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "QueryChoices", {
+  enumerable: true,
+  get: function get() {
+    return _QueryChoices.default;
+  }
+});
+
+var _QueryChoices = _interopRequireDefault(require("./QueryChoices"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/f/fields/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "Checkbox", {
     return _Checkbox.Checkbox;
   }
 });
+Object.defineProperty(exports, "QueryChoices", {
+  enumerable: true,
+  get: function get() {
+    return _QueryChoices.QueryChoices;
+  }
+});
 
 var _TextInput = require("./TextInput");
 
@@ -66,4 +72,6 @@ var _QueryCombobox = require("./QueryCombobox");
 
 var _QuerySelect = require("./QuerySelect");
 
-var _Checkbox = require("./Checkbox");
+var _Checkbox = require("./Checkbox");
+
+var _QueryChoices = require("./QueryChoices");

package/dist/es/c/Modal/Modal.js

@@ -17,20 +17,13 @@ const Modal = ({
   style,
   children,
   title,
-  setOpen,
   color,
-  onClose // ...otherProps
+  close // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
-
-  const close = () => {
-    setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-  };
-
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -72,19 +65,14 @@ Modal.propTypes = {
   title: PropTypes.string.isRequired,
 
   /**
-   *  The color for the button to open and close the modal
-   */
-  color: PropTypes.string.isRequired,
-
-  /**
-   *  The function to open the modal
+   *  The color for the header button
    */
-  setOpen: PropTypes.func.isRequired,
+  color: PropTypes.string,
 
   /**
    *  The function to run upon closing the modal, if any
    */
-  onClose: PropTypes.func
+  close: PropTypes.func
 };
 Modal.defaultProps = {//
 };

package/dist/es/f/FormInput/FormInput.js

@@ -4,7 +4,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import * as React from 'react';
 import { memo, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox } from "../fields"; // Local Definitions
+import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices } from "../fields"; // Local Definitions
 // const baseClassName = styleNames.base
 
 const componentClassName = 'form-input';
@@ -59,6 +59,13 @@ const FormInput = ({
     }, otherProps));
   }
 
+  if (type === 'query-choices') {
+    return /*#__PURE__*/React.createElement(QueryChoices, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+
   if (type === 'rating') {
     return /*#__PURE__*/React.createElement(RatingsInput, _extends({
       className: newClassName

package/dist/es/f/common/Label/Label.js

@@ -30,7 +30,7 @@ const Label = ({
     className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
     style: style // {...otherProps}
 
-  }, children, optional && '(Optional)');
+  }, children, optional && ' (Optional)');
 };
 
 Label.propTypes = {

package/dist/es/f/fields/QueryChoices/QueryChoices.js

@@ -0,0 +1,137 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { useRelayEnvironment, fetchQuery } from 'react-relay';
+import { useField } from 'formik';
+import PropTypes from 'prop-types';
+import { ChoicesInput } from "../ChoicesInput";
+/**
+ * This is the component description.
+ */
+
+const QueryChoices = ({
+  name,
+  optionsKeyMap,
+  query,
+  variables,
+  validate,
+  loadingOption,
+  extraVariables,
+  ...otherProps
+}) => {
+  const [,, helpers] = useField({
+    name,
+    validate
+  });
+  const {
+    setError
+  } = helpers;
+  const environment = useRelayEnvironment();
+  const [isFetching, setIsFetching] = useState(false);
+  const [options, setOptions] = useState([loadingOption]);
+  const {
+    graphql,
+    accessor
+  } = query;
+
+  const getOptions = () => {
+    if (isFetching) return;
+    let searchVariables = variables;
+
+    if (extraVariables) {
+      searchVariables = { ...variables,
+        ...extraVariables
+      };
+    }
+
+    fetchQuery(environment, graphql, searchVariables).subscribe({
+      start: () => {
+        setIsFetching(true);
+      },
+      complete: () => {
+        setIsFetching(false);
+      },
+      error: fetchError => {
+        setIsFetching(false);
+        if (setError) setError(fetchError.message);
+      },
+      next: data => {
+        setOptions([...data[accessor].edges.map(({
+          node
+        }) => ({
+          value: node[optionsKeyMap.value],
+          label: optionsKeyMap.getLabel(node)
+        }))]);
+      }
+    });
+  };
+
+  useEffect(() => {
+    getOptions();
+  }, [variables]);
+  return /*#__PURE__*/React.createElement(ChoicesInput, _extends({
+    name: name,
+    validate: validate,
+    options: options
+  }, otherProps));
+};
+
+QueryChoices.propTypes = {
+  /**
+   * The choices name
+   */
+  name: PropTypes.string.isRequired,
+
+  /**
+  *  The select option keys to be used to map the data to the select options.
+  * i.e `{ value: 'id', label: 'name' }`
+  */
+  optionsKeyMap: PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    getLabel: PropTypes.func.isRequired
+  }).isRequired,
+
+  /**
+  * The graphql query to fetch the options and the accessor to destructure the results from
+  */
+  query: PropTypes.shape({
+    accessor: PropTypes.string,
+    graphql: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired
+  }),
+
+  /**
+   *  The variables that might be required to be used in the query to fetch
+   *  select options.
+   */
+  variables: PropTypes.objectOf(PropTypes.string),
+
+  /**
+  * The option to displayed when the select options are being fetched
+  */
+  loadingOption: PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    disabled: PropTypes.bool.isRequired
+  }),
+
+  /**
+   * The input field validator function
+   */
+  validate: PropTypes.string,
+
+  /**
+   *  The extra variables that might be required to be used in the query to fetch
+   *  select options.
+   */
+  extraVariables: PropTypes.objectOf(PropTypes.string)
+};
+QueryChoices.defaultProps = {
+  loadingOption: {
+    value: '',
+    label: 'Fetching Options',
+    disabled: true
+  }
+};
+export default QueryChoices;

package/dist/es/f/fields/QueryChoices/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as QueryChoices } from "./QueryChoices";

package/dist/es/f/fields/index.js

@@ -5,4 +5,5 @@ export { TextareaInput } from "./TextareaInput";
 export { RatingsInput } from "./RatingsInput";
 export { QueryCombobox } from "./QueryCombobox";
 export { QuerySelect } from "./QuerySelect";
-export { Checkbox } from "./Checkbox";
+export { Checkbox } from "./Checkbox";
+export { QueryChoices } from "./QueryChoices";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.70",
+  "version": "2.0.0-alpha.71",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

package/src/__snapshots__/Storyshots.test.js.snap

@@ -3729,7 +3729,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  2 months ago
+  4 months ago
 </p>
 `;
 
@@ -12344,7 +12344,7 @@ exports[`Storyshots f/common/Label Optional 1`] = `
   className="base form-label x-main2"
 >
   Sample Label
-  (Optional)
+   (Optional)
 </label>
 `;
 
@@ -12430,7 +12430,7 @@ exports[`Storyshots f/fields/Checkbox Optional 1`] = `
       htmlFor="urgent"
     >
       Urgent
-      (Optional)
+       (Optional)
     </label>
     <input
       checked={false}
@@ -13722,7 +13722,7 @@ exports[`Storyshots f/fields/ChoicesInput Optional 1`] = `
       className="base form-label x-main2"
     >
       Select color
-      (Optional)
+       (Optional)
     </p>
     <div
       className="choices"
@@ -14082,6 +14082,123 @@ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/QueryChoices Base 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base choices-input x-background2 y-main2"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <p
+      className="base form-label x-main2"
+    >
+      Select Status
+    </p>
+    <div
+      className="choices"
+    >
+      <div
+        className="base choice"
+      >
+        <input
+          checked={true}
+          disabled={true}
+          id="status-"
+          name="status"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value=""
+        />
+        <label
+          htmlFor="status-"
+        >
+          Fetching Options
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryChoices Optional 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base choices-input x-background2 y-main2"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <p
+      className="base form-label x-main2"
+    >
+      Select Status
+       (Optional)
+    </p>
+    <div
+      className="choices"
+    >
+      <div
+        className="base choice"
+      >
+        <input
+          checked={true}
+          disabled={true}
+          id="status-"
+          name="status"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value=""
+        />
+        <label
+          htmlFor="status-"
+        >
+          Fetching Options
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
 <form
   action="#"
@@ -14309,7 +14426,7 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
       id="downshift-2-label"
     >
       Search for a team
-      (Optional)
+       (Optional)
     </label>
     <div
       aria-expanded={false}
@@ -14646,7 +14763,7 @@ exports[`Storyshots f/fields/QuerySelect Optional 1`] = `
       htmlFor="status"
     >
       Select Task Status
-      (Optional)
+       (Optional)
     </label>
     <div
       className="select-wrapper"
@@ -15240,7 +15357,7 @@ exports[`Storyshots f/fields/RatingsInput Optional 1`] = `
       htmlFor="ratings"
     >
       Your Rating
-      (Optional)
+       (Optional)
     </label>
     <div
       className="stars"
@@ -15526,7 +15643,7 @@ exports[`Storyshots f/fields/SelectInput Optional 1`] = `
       htmlFor="workType"
     >
       Work Type
-      (Optional)
+       (Optional)
     </label>
     <div
       className="select-wrapper"
@@ -15840,7 +15957,7 @@ exports[`Storyshots f/fields/TextInput Optional 1`] = `
         htmlFor="firstName"
       >
         What's your first name ?
-        (Optional)
+         (Optional)
       </label>
       <input
         className="input"
@@ -16280,7 +16397,7 @@ exports[`Storyshots f/fields/TextareaInput Optional 1`] = `
       htmlFor="feedback"
     >
       What can we improve on?
-      (Optional)
+       (Optional)
     </label>
     <textarea
       className="textarea"

package/src/stories/c/Modal.stories.jsx

@@ -43,7 +43,7 @@ const FunctionalTemplate = (args) => {
         Click to open modal
       </Button>
       {isOpen && (
-        <Modal {...args} setOpen={setOpen}>
+        <Modal {...args} close={() => setOpen(false)}>
           {children}
         </Modal>
       )}
@@ -56,6 +56,7 @@ Base.args = {
   children:<div>This is a modal.</div>,
   color   :'anchor',
   title   :'Modal Title',
+  close   :() => console.log('You clicked the close button!'),
 }
 
 export const FunctionalModal = FunctionalTemplate.bind({})

package/src/stories/f/QueryChoices.stories.jsx

@@ -0,0 +1,135 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { QueryChoices, FormDebugger } from 'ui'
+
+import { Formik, Form } from 'formik'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+  environment,
+} from '../utils/relay'
+
+import generateNodeId from '../utils/generateNodeId'
+
+export default {
+  title        :'f/fields/QueryChoices',
+  component    :QueryChoices,
+  subcomponents:{
+    // Item:QueryChoices.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
+  ],
+  argTypes:{
+    isLoading:{ control: 'boolean' },
+    optional :{ control: 'boolean' },
+  },
+}
+
+const statuses = [
+  'Backlog',
+  'In Review',
+  'In Progress',
+  'Requested',
+  'Blocked',
+  'Completed',
+]
+
+const allTaskStatusesMockData = {
+  PageInfo() {
+    return {
+      hasNextPage    :true,
+      hasPreviousPage:true,
+    }
+  },
+  TaskStatusNodeConnection:() => ({
+    pageInfo:{
+      hasNextPage    :true,
+      hasPreviousPage:true,
+    },
+
+    edges:statuses.map((status) => ({
+      node:{
+        id:generateNodeId('TaskStatusNode'),
+        status,
+      },
+    })),
+  }),
+}
+
+const FETCH_ALL_TASK_STATUSES = graphql`
+  query QueryChoicesAllTaskStatusesQuery {
+    allTaskStatuses {
+      edges {
+        node {
+          id
+          status
+        }
+      }
+    }
+  }
+`
+
+// eslint-disable-next-line react/prop-types
+const Template = ({ isLoading, defaultFormikState, ...args }) => {
+  if (isLoading) {
+    setTimeout(() => {
+      mockRelayOperation(allTaskStatusesMockData)
+      environment.mock.queuePendingOperation(
+        FETCH_ALL_TASK_STATUSES,
+        {},
+      )
+    }, 500)
+  } else {
+    mockRelayOperation(allTaskStatusesMockData)
+    environment.mock.queuePendingOperation(
+      FETCH_ALL_TASK_STATUSES,
+      {},
+    )
+  }
+
+  const Content = () => (
+    <>
+      <QueryChoices
+        name="status"
+        label="Select Status"
+        query={{
+          graphql :FETCH_ALL_TASK_STATUSES,
+          accessor:'allTaskStatuses',
+        }}
+        optionsKeyMap={{
+          value   :'id',
+          getLabel:(node) => node.status,
+        }}
+        {...args}
+      />
+      <FormDebugger />
+    </>
+  )
+
+  const initialValues = defaultFormikState ?? { status: '' }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+    >
+      <Form>
+        <Content />
+      </Form>
+    </Formik>
+  )
+}
+
+export const Base = Template.bind({})
+
+export const Optional = Template.bind({})
+Optional.args = {
+  optional:true,
+}

package/src/stories/f/__generated__/QueryChoicesAllTaskStatusesQuery.graphql.js

@@ -0,0 +1,122 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+export type QueryChoicesAllTaskStatusesQueryVariables = {||};
+export type QueryChoicesAllTaskStatusesQueryResponse = {|
+  +allTaskStatuses: ?{|
+    +edges: $ReadOnlyArray<?{|
+      +node: ?{|
+        +id: string,
+        +status: string,
+      |}
+    |}>
+  |}
+|};
+export type QueryChoicesAllTaskStatusesQuery = {|
+  variables: QueryChoicesAllTaskStatusesQueryVariables,
+  response: QueryChoicesAllTaskStatusesQueryResponse,
+|};
+*/
+
+
+/*
+query QueryChoicesAllTaskStatusesQuery {
+  allTaskStatuses {
+    edges {
+      node {
+        id
+        status
+      }
+    }
+  }
+}
+*/
+
+const node/*: ConcreteRequest*/ = (function(){
+var v0 = [
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "TaskStatusNodeConnection",
+    "kind": "LinkedField",
+    "name": "allTaskStatuses",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "TaskStatusNodeEdge",
+        "kind": "LinkedField",
+        "name": "edges",
+        "plural": true,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "TaskStatusNode",
+            "kind": "LinkedField",
+            "name": "node",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "id",
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "status",
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "QueryChoicesAllTaskStatusesQuery",
+    "selections": (v0/*: any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "QueryChoicesAllTaskStatusesQuery",
+    "selections": (v0/*: any*/)
+  },
+  "params": {
+    "cacheID": "6e05a3755df9f90893fa2a1a2759788b",
+    "id": null,
+    "metadata": {},
+    "name": "QueryChoicesAllTaskStatusesQuery",
+    "operationKind": "query",
+    "text": "query QueryChoicesAllTaskStatusesQuery {\n  allTaskStatuses {\n    edges {\n      node {\n        id\n        status\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+// prettier-ignore
+(node/*: any*/).hash = 'c71c37c5254bb38906c56c4ccd382a39';
+
+module.exports = node;

package/src/stories/f/__generated__/QueryChoicesUserChoicesQuery.graphql.js

@@ -0,0 +1,122 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+export type QueryChoicesUserChoicesQueryVariables = {||};
+export type QueryChoicesUserChoicesQueryResponse = {|
+  +allUsers: ?{|
+    +edges: $ReadOnlyArray<?{|
+      +node: ?{|
+        +id: string,
+        +firstName: string,
+      |}
+    |}>
+  |}
+|};
+export type QueryChoicesUserChoicesQuery = {|
+  variables: QueryChoicesUserChoicesQueryVariables,
+  response: QueryChoicesUserChoicesQueryResponse,
+|};
+*/
+
+
+/*
+query QueryChoicesUserChoicesQuery {
+  allUsers {
+    edges {
+      node {
+        id
+        firstName
+      }
+    }
+  }
+}
+*/
+
+const node/*: ConcreteRequest*/ = (function(){
+var v0 = [
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "UserNodeConnection",
+    "kind": "LinkedField",
+    "name": "allUsers",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "UserNodeEdge",
+        "kind": "LinkedField",
+        "name": "edges",
+        "plural": true,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "UserNode",
+            "kind": "LinkedField",
+            "name": "node",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "id",
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "firstName",
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "QueryChoicesUserChoicesQuery",
+    "selections": (v0/*: any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "QueryChoicesUserChoicesQuery",
+    "selections": (v0/*: any*/)
+  },
+  "params": {
+    "cacheID": "fe1c8d0544d6991186ae4ce7e07a0163",
+    "id": null,
+    "metadata": {},
+    "name": "QueryChoicesUserChoicesQuery",
+    "operationKind": "query",
+    "text": "query QueryChoicesUserChoicesQuery {\n  allUsers {\n    edges {\n      node {\n        id\n        firstName\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+// prettier-ignore
+(node/*: any*/).hash = '36060962ef74ee346f3a924ee90f28ef';
+
+module.exports = node;

package/src/ui/c/Modal/Modal.jsx

@@ -24,20 +24,14 @@ const Modal = ({
   style,
   children,
   title,
-  setOpen,
   color,
-  onClose,
+  close,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
     import('./styles.scss')
   }, [])
 
-  const close = () => {
-    setOpen?.(false)
-    onClose?.()
-  }
-
   return (
     <div
       id={id}
@@ -90,19 +84,14 @@ Modal.propTypes = {
   title:PropTypes.string.isRequired,
 
   /**
-   *  The color for the button to open and close the modal
-   */
-  color:PropTypes.string.isRequired,
-
-  /**
-   *  The function to open the modal
+   *  The color for the header button
    */
-  setOpen:PropTypes.func.isRequired,
+  color:PropTypes.string,
 
   /**
    *  The function to run upon closing the modal, if any
    */
-  onClose:PropTypes.func,
+  close:PropTypes.func,
 }
 
 Modal.defaultProps = {

package/src/ui/f/FormInput/FormInput.jsx

@@ -14,6 +14,7 @@ import {
   QuerySelect,
   RatingsInput,
   Checkbox,
+  QueryChoices,
 } from '../fields'
 
 // Local Definitions
@@ -87,6 +88,16 @@ const FormInput = ({
     )
   }
 
+  if (type === 'query-choices') {
+    return (
+      <QueryChoices
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+
   if (type === 'rating') {
     return (
       <RatingsInput

package/src/ui/f/common/Label/Label.jsx

@@ -47,7 +47,7 @@ const Label = ({
       // {...otherProps}
     >
       {children}
-      {optional && '(Optional)'}
+      {optional && ' (Optional)'}
     </Wrapper>
   )
 }

package/src/ui/f/fields/QueryChoices/QueryChoices.jsx

@@ -0,0 +1,153 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useEffect, useState } from 'react'
+
+import { useRelayEnvironment, fetchQuery } from 'react-relay'
+
+import { useField } from 'formik'
+
+import PropTypes from 'prop-types'
+
+import { ChoicesInput } from '../ChoicesInput'
+
+/**
+ * This is the component description.
+ */
+const QueryChoices = ({
+  name,
+  optionsKeyMap,
+  query,
+  variables,
+  validate,
+  loadingOption,
+  extraVariables,
+  ...otherProps
+}) => {
+  const [, , helpers] = useField({ name, validate })
+
+  const { setError } = helpers
+
+  const environment = useRelayEnvironment()
+
+  const [isFetching, setIsFetching] = useState(false)
+
+  const [options, setOptions] = useState([loadingOption])
+
+  const { graphql, accessor } = query
+
+  const getOptions = () => {
+    if (isFetching) return
+
+    let searchVariables = variables
+
+    if (extraVariables) {
+      searchVariables = {
+        ...variables,
+        ...extraVariables,
+      }
+    }
+
+    fetchQuery(
+      environment,
+      graphql,
+      searchVariables,
+    )
+      .subscribe({
+        start:() => {
+          setIsFetching(true)
+        },
+        complete:() => {
+          setIsFetching(false)
+        },
+        error:(fetchError) => {
+          setIsFetching(false)
+          if (setError) setError(fetchError.message)
+        },
+        next:(data) => {
+          setOptions([
+            ...data[accessor].edges.map(({ node }) => ({
+              value:node[optionsKeyMap.value],
+              label:optionsKeyMap.getLabel(node),
+            })),
+          ])
+        },
+      })
+  }
+
+  useEffect(() => {
+    getOptions()
+  }, [variables])
+
+  return (
+    <ChoicesInput
+      name={name}
+      validate={validate}
+      options={options}
+      {...otherProps}
+    />
+  )
+}
+
+QueryChoices.propTypes = {
+  /**
+   * The choices name
+   */
+  name:PropTypes.string.isRequired,
+
+  /**
+ *  The select option keys to be used to map the data to the select options.
+ * i.e `{ value: 'id', label: 'name' }`
+ */
+  optionsKeyMap:PropTypes.shape({
+    value   :PropTypes.string.isRequired,
+    getLabel:PropTypes.func.isRequired,
+  }).isRequired,
+
+  /**
+ * The graphql query to fetch the options and the accessor to destructure the results from
+ */
+  query:PropTypes.shape({
+    accessor:PropTypes.string,
+    graphql :PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+    ]).isRequired,
+  }),
+
+  /**
+   *  The variables that might be required to be used in the query to fetch
+   *  select options.
+   */
+  variables:PropTypes.objectOf(PropTypes.string),
+
+  /**
+ * The option to displayed when the select options are being fetched
+ */
+  loadingOption:PropTypes.shape({
+    value   :PropTypes.string.isRequired,
+    label   :PropTypes.string.isRequired,
+    disabled:PropTypes.bool.isRequired,
+  }),
+
+  /**
+   * The input field validator function
+   */
+  validate:PropTypes.string,
+
+  /**
+   *  The extra variables that might be required to be used in the query to fetch
+   *  select options.
+   */
+  extraVariables:PropTypes.objectOf(PropTypes.string),
+}
+
+QueryChoices.defaultProps = {
+  loadingOption:{
+    value   :'',
+    label   :'Fetching Options',
+    disabled:true,
+  },
+}
+
+export default QueryChoices

package/src/ui/f/fields/QueryChoices/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as QueryChoices } from './QueryChoices'

package/src/ui/f/fields/index.js

@@ -6,3 +6,4 @@ export { RatingsInput } from './RatingsInput'
 export { QueryCombobox } from './QueryCombobox'
 export { QuerySelect } from './QuerySelect'
 export { Checkbox } from './Checkbox'
+export { QueryChoices } from './QueryChoices'