@pareto-engineering/design-system 2.0.0-alpha.48 → 2.0.0-alpha.50

package/src/stories/f/FormInput.stories.jsx

@@ -186,16 +186,134 @@ export const WithQueryCombobox = () => {
       ],
     },
     {
-      type         :'query-combobox',
-      name         :'team',
-      query        :FETCH_TEAMS_QUERY,
+      type :'query-combobox',
+      name :'team',
+      query:{
+        graphql :FETCH_TEAMS_QUERY,
+        accessor:'allTeams',
+      },
       label        :'Search for a team',
       optionsKeyMap:{
-        value:'id',
-        label:'name',
+        value   :'id',
+        getLabel:(node) => node.name,
+      },
+      searchVariable:'name_Icontains',
+    },
+    {
+      type :'query-combobox',
+      name :'teams',
+      query:{
+        graphql :FETCH_TEAMS_QUERY,
+        accessor:'allTeams',
+      },
+      label        :'Search for teams',
+      optionsKeyMap:{
+        value   :'id',
+        getLabel:(node) => node.name,
       },
-      graphQlNode   :'allTeams',
       searchVariable:'name_Icontains',
+      multiple      :true,
+    },
+  ]
+
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+
+  return (
+    <>
+      {
+        inputMap.map((input) => <FormInput {...input} key={input.name} />)
+        }
+      <FormDebugger />
+
+    </>
+  )
+}
+
+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 FormInputAllTaskStatusesQuery {
+    allTaskStatuses {
+      edges {
+        node {
+          id
+          status
+        }
+      }
+    }
+  }
+`
+
+export const WithPrefetchedQuerySelect = () => {
+  mockRelayOperation(allTaskStatusesMockData)
+
+  const inputMap = [
+    {
+      type :'text',
+      name :'firstName',
+      label:"What's your first name ?",
+    },
+    {
+      type   :'choices',
+      name   :'colors',
+      label  :'What are your favourite colors ?',
+      options:[
+        {
+          value:'red',
+          label:'Color Red',
+        },
+        {
+          value:'blue',
+          label:'Color Blue',
+        },
+        {
+          value:'green',
+          label:'Color Green',
+        },
+      ],
+    },
+    {
+      type :'query-select',
+      name :'status',
+      query:{
+        graphql :FETCH_ALL_TASK_STATUSES,
+        accessor:'allTaskStatuses',
+      },
+      label        :'Select Task Status',
+      optionsKeyMap:{
+        value   :'id',
+        getLabel:(node) => node.status,
+      },
     },
   ]
 

package/src/stories/f/QueryCombobox.stories.jsx

@@ -118,15 +118,17 @@ const ResolvedTemplate = ({ multiple, defaultFormikState }) => {
     return (
       <>
         <QueryCombobox
-          query={FETCH_TEAMS_QUERY}
           label="Search for a team"
           optionsKeyMap={{
-            value:'id',
-            label:'name',
+            value   :'id',
+            getLabel:(node) => node.name,
+          }}
+          query={{
+            graphql :FETCH_TEAMS_QUERY,
+            accessor:'allTeams',
           }}
           name={name}
           multiple={multiple}
-          graphQlNode="allTeams"
           searchVariable="name_Icontains"
         />
         <div

package/src/stories/f/QuerySelect.stories.jsx

@@ -0,0 +1,134 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { QuerySelect, FormDebugger } from 'ui'
+
+import { Formik, Form } from 'formik'
+
+import generateNodeId from '../utils/generateNodeId'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+  environment,
+} from '../utils/relay'
+
+export default {
+  title        :'f/fields/QuerySelect',
+  component    :QuerySelect,
+  subcomponents:{
+    // Item:QuerySelect.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+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 QuerySelectAllTaskStatusesQuery {
+    allTaskStatuses {
+      edges {
+        node {
+          id
+          status
+        }
+      }
+    }
+  }
+`
+
+// eslint-disable-next-line react/prop-types
+const Template = ({ isLoading, defaultFormikState }) => {
+  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 = () => (
+    <>
+      <QuerySelect
+        name="status"
+        label="Select Task Status"
+        query={{
+          graphql :FETCH_ALL_TASK_STATUSES,
+          accessor:'allTaskStatuses',
+        }}
+        optionsKeyMap={{
+          value   :'id',
+          getLabel:(node) => node.status,
+        }}
+      />
+      <FormDebugger />
+    </>
+  )
+
+  const initialValues = defaultFormikState ?? { status: '' }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+    >
+      <Form>
+        <Content />
+      </Form>
+    </Formik>
+  )
+}
+
+export const Base = Template.bind({})
+export const WithDefaultValue = Template.bind({})
+WithDefaultValue.args = {
+  defaultFormikState:{
+    status:'VGFza1N0YXR1c05vZGU6NGRiYjNlMmItMGIxYy00ZjIxLTk0MmUtZTNjZGQwMjdiNjU3',
+  },
+}
+export const LoadingOptions = Template.bind({})
+LoadingOptions.args = {
+  isLoading:true,
+}

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

@@ -0,0 +1,122 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+export type FormInputAllTaskStatusesQueryVariables = {||};
+export type FormInputAllTaskStatusesQueryResponse = {|
+  +allTaskStatuses: ?{|
+    +edges: $ReadOnlyArray<?{|
+      +node: ?{|
+        +id: string,
+        +status: string,
+      |}
+    |}>
+  |}
+|};
+export type FormInputAllTaskStatusesQuery = {|
+  variables: FormInputAllTaskStatusesQueryVariables,
+  response: FormInputAllTaskStatusesQueryResponse,
+|};
+*/
+
+
+/*
+query FormInputAllTaskStatusesQuery {
+  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": "FormInputAllTaskStatusesQuery",
+    "selections": (v0/*: any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "FormInputAllTaskStatusesQuery",
+    "selections": (v0/*: any*/)
+  },
+  "params": {
+    "cacheID": "54ce3d351c6ef9fa16c73a954fc5cfea",
+    "id": null,
+    "metadata": {},
+    "name": "FormInputAllTaskStatusesQuery",
+    "operationKind": "query",
+    "text": "query FormInputAllTaskStatusesQuery {\n  allTaskStatuses {\n    edges {\n      node {\n        id\n        status\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+// prettier-ignore
+(node/*: any*/).hash = 'a86a4a669c61db10cd2bd9b72b3eeb12';
+
+module.exports = node;

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

@@ -0,0 +1,122 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+export type QuerySelectAllTaskStatusesQueryVariables = {||};
+export type QuerySelectAllTaskStatusesQueryResponse = {|
+  +allTaskStatuses: ?{|
+    +edges: $ReadOnlyArray<?{|
+      +node: ?{|
+        +id: string,
+        +status: string,
+      |}
+    |}>
+  |}
+|};
+export type QuerySelectAllTaskStatusesQuery = {|
+  variables: QuerySelectAllTaskStatusesQueryVariables,
+  response: QuerySelectAllTaskStatusesQueryResponse,
+|};
+*/
+
+
+/*
+query QuerySelectAllTaskStatusesQuery {
+  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": "QuerySelectAllTaskStatusesQuery",
+    "selections": (v0/*: any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "QuerySelectAllTaskStatusesQuery",
+    "selections": (v0/*: any*/)
+  },
+  "params": {
+    "cacheID": "bd929dd60893f2a67f23d8cd2fb003de",
+    "id": null,
+    "metadata": {},
+    "name": "QuerySelectAllTaskStatusesQuery",
+    "operationKind": "query",
+    "text": "query QuerySelectAllTaskStatusesQuery {\n  allTaskStatuses {\n    edges {\n      node {\n        id\n        status\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+// prettier-ignore
+(node/*: any*/).hash = '31d9d1e820e814f7cee8ef7b273074ab';
+
+module.exports = node;

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

@@ -11,6 +11,7 @@ import {
   ChoicesInput,
   SelectInput,
   QueryCombobox,
+  QuerySelect,
 } from '../fields'
 
 // Local Definitions
@@ -74,6 +75,15 @@ const FormInput = ({
       />
     )
   }
+  if (type === 'query-select') {
+    return (
+      <QuerySelect
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
   if (extraTypes?.[type]) {
     const Component = extraTypes[type]
     return (

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

@@ -28,7 +28,6 @@ const QueryCombobox = ({
   description,
   disabled,
   debounceMs,
-  graphQlNode,
   searchVariable,
   extraVariables,
   optionsKeyMap,
@@ -52,6 +51,8 @@ const QueryCombobox = ({
 
   const [options, setOptions] = useState([])
 
+  const { graphql, accessor } = query
+
   const getOptions = (inputValue) => {
     if (isFetching) return
 
@@ -66,7 +67,7 @@ const QueryCombobox = ({
 
     fetchQuery(
       environment,
-      query,
+      graphql,
       variables,
     )
       .subscribe({
@@ -81,9 +82,9 @@ const QueryCombobox = ({
           if (setError)setError(fetchError.message)
         },
         next:(data) => {
-          setOptions(data[graphQlNode].edges.map(({ node }) => ({
+          setOptions(data[accessor].edges.map(({ node }) => ({
             value:node[optionsKeyMap.value],
-            label:node[optionsKeyMap.label],
+            label:optionsKeyMap.getLabel(node),
           })))
         },
       })
@@ -161,12 +162,15 @@ QueryCombobox.propTypes = {
   debounceMs:PropTypes.number,
 
   /**
-   * The query to fetch the options
+   * The graphql query to fetch the options and the accessor to destructure the results from
    */
-  query:PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-  ]).isRequired,
+  query:PropTypes.shape({
+    accessor:PropTypes.string,
+    graphql :PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+    ]).isRequired,
+  }),
 
   /**
    *  The extra variables required to be used in the query.
@@ -178,8 +182,8 @@ QueryCombobox.propTypes = {
    * i.e `{ value: 'id', label: 'name' }`
    */
   optionsKeyMap:PropTypes.shape({
-    value:PropTypes.string.isRequired,
-    label:PropTypes.string.isRequired,
+    value   :PropTypes.string.isRequired,
+    getLabel:PropTypes.func.isRequired,
   }),
 
   /**
@@ -210,8 +214,8 @@ QueryCombobox.propTypes = {
 
 QueryCombobox.defaultProps = {
   optionsKeyMap:{
-    value:'id',
-    label:'name',
+    value   :'id',
+    getLabel:(node) => node.name,
   },
   multiple       :false,
   color          :'background2',