@pareto-engineering/design-system 2.0.0-alpha.46 → 2.0.0-alpha.49

package/src/local.scss

@@ -5,12 +5,12 @@
   --theme-border-style: 1px solid;
   --theme-border-color: var(--paragraph);
   --theme-border: var(--theme-border-style) var(--theme-border-color);
+  --default-gap: 1em;
 }
 
 html {
   font-family: var(--font-default);
   font-size: 18px;
-  font-feature-settings:'liga' on;
+  font-feature-settings: 'liga' on;
   scroll-behavior: smooth;
-}
-
+}

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

@@ -186,17 +186,135 @@ 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',
       },
-      graphQlNode   :'allTeams',
       searchVariable:'name_Icontains',
     },
+    {
+      type :'query-combobox',
+      name :'teams',
+      query:{
+        graphql :FETCH_TEAMS_QUERY,
+        accessor:'allTeams',
+      },
+      label        :'Search for teams',
+      optionsKeyMap:{
+        value:'id',
+        label:'name',
+      },
+      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',
+        label:'status',
+      },
+    },
   ]
 
   mockRelayOperation(allTeamsMockData)

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

@@ -80,7 +80,7 @@ const FETCH_TEAMS_QUERY = graphql`
 `
 
 // eslint-disable-next-line react/prop-types
-const ResolvedTemplate = ({ multiple, defaultFormikState = {} }) => {
+const ResolvedTemplate = ({ multiple, defaultFormikState }) => {
   mockRelayOperation(allTeamsMockData)
   mockRelayOperation(allTeamsMockData)
   mockRelayOperation(allTeamsMockData)
@@ -88,29 +88,47 @@ const ResolvedTemplate = ({ multiple, defaultFormikState = {} }) => {
   const Content = () => {
     const name = multiple ? 'teams' : 'team'
 
-    const [, , helpers] = useField(name)
+    const [, meta, helpers] = useField(name)
+
+    const { value } = meta
 
     const { setValue } = helpers
 
     const updateFormikState = () => {
-      setValue({
-        value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNk',
-        label:'Kafagoho',
-      })
+      if (multiple) {
+        setValue([
+          ...(value || []),
+          {
+            value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNk',
+            label:'Matomoko',
+          },
+          {
+            value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNp',
+            label:'Chungwa',
+          },
+        ])
+      } else {
+        setValue({
+          value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNk',
+          label:'Kafagoho',
+        })
+      }
     }
 
     return (
       <>
         <QueryCombobox
-          query={FETCH_TEAMS_QUERY}
           label="Search for a team"
           optionsKeyMap={{
             value:'id',
             label:'name',
           }}
+          query={{
+            graphql :FETCH_TEAMS_QUERY,
+            accessor:'allTeams',
+          }}
           name={name}
           multiple={multiple}
-          graphQlNode="allTeams"
           searchVariable="name_Icontains"
         />
         <div
@@ -124,16 +142,24 @@ const ResolvedTemplate = ({ multiple, defaultFormikState = {} }) => {
           <Button
             onClick={updateFormikState}
           >
-            {multiple ? 'Add more initial values' : 'Replace initial value'}
+            {multiple ? 'Add formik values' : 'Replace formik value'}
           </Button>
         </div>
       </>
     )
   }
 
+  let initialValues = defaultFormikState
+
+  if (!defaultFormikState && multiple) {
+    initialValues = []
+  } else if (!defaultFormikState && !multiple) {
+    initialValues = {}
+  }
+
   return (
     <Formik
-      initialValues={defaultFormikState}
+      initialValues={initialValues}
     >
       <Form>
         <Content />
@@ -158,6 +184,29 @@ SingleSelectWithDefaultFormikState.args = {
   },
 }
 
+export const MultipleSelect = ResolvedTemplate.bind({})
+MultipleSelect.args = {
+  multiple          :true,
+  defaultFormikState:{ teams: [] },
+}
+
+export const MultipleSelectWithDefaultFormikState = ResolvedTemplate.bind({})
+MultipleSelectWithDefaultFormikState.args = {
+  multiple          :true,
+  defaultFormikState:{
+    teams:[
+      {
+        value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+        label:'Apple',
+      },
+      {
+        value:'VGVhbU5vZGU6MDA0N2U4MzktODY0Zi00N2U5LTg3ZjgtZGUwMmM2Yzg1YWJm',
+        label:'Pear',
+      },
+    ],
+  },
+}
+
 // eslint-disable-next-line react/prop-types
 // const RejectedTemplate = ({ multiple }) => {
 //   const Content = () => {

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',
+          label:'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 (