@pareto-engineering/design-system 2.0.0-alpha.42 → 2.0.0-alpha.45

package/scripts/fetchSchema.js

@@ -0,0 +1,74 @@
+const https = require('https')
+const fs = require('fs')
+
+require('dotenv').config({ path: '.env.scripts' })
+
+const {
+  GITHUB_BACKEND_ORG,
+  GITHUB_BACKEND_REPO,
+  GITHUB_READONLY_PAT,
+  DEBUG,
+} = process.env
+
+const isDebug = DEBUG === 'True'
+
+const host = 'api.github.com'
+const contentEndpoint = `/repos/${GITHUB_BACKEND_ORG}/${GITHUB_BACKEND_REPO}/contents/schema.graphql`
+const authToken = GITHUB_READONLY_PAT
+
+const defaultBranch = 'development'
+const indexOfRefArg = process.argv.findIndex((arg) => arg === '--ref')
+const selectedRef = (indexOfRefArg > -1) ? process.argv[indexOfRefArg + 1] : defaultBranch
+
+const filename = 'schema.graphql'
+
+const processContent = (data) => {
+  if (data.content) {
+    if (isDebug) {
+      console.log(Buffer.from(data.content, 'base64').toString('utf-8'))
+    }
+    fs.writeFile(filename, Buffer.from(data.content, 'base64'), 'utf8', (err) => {
+      if (err) {
+        console.log(err)
+      } else {
+        console.log(`${filename} successfully saved`)
+      }
+    })
+  } else {
+    console.error('Error in downloading the schema.')
+  }
+}
+
+function performRequest(success) {
+  console.log(`Fetching schema from ref=${selectedRef}`)
+  const options = {
+    host,
+    path   :`${contentEndpoint}?ref=${selectedRef}`,
+    method :'GET',
+    headers:{
+      Authorization:`token ${authToken}`,
+      'User-Agent' :'Nodejs CI script',
+    },
+  }
+
+  const req = https.request(options, (res) => {
+    res.setEncoding('utf-8')
+
+    let responseString = ''
+
+    res.on('data', (data) => {
+      responseString += data
+    })
+
+    res.on('end', () => {
+      // console.log(responseString)
+      const responseObject = JSON.parse(responseString)
+      success(responseObject)
+    })
+  })
+
+  // req.write()
+  req.end()
+}
+
+performRequest(processContent)

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

@@ -2663,7 +2663,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  in 6 months
+  in 4 months
 </p>
 `;
 
@@ -10361,7 +10361,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base select-input form-input y-background2"
   >
     <label
-      className="base label input-label x-main2"
+      className="base label x-main2"
       htmlFor="food"
     >
       What do you want for dinner ?
@@ -10550,7 +10550,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base select-input form-input y-background2"
   >
     <label
-      className="base label input-label x-main2"
+      className="base label x-main2"
       htmlFor="food"
     >
       What do you want for dinner ?
@@ -11198,6 +11198,164 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base combobox y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="team"
+      id="downshift-0-label"
+    >
+      Search for a team
+    </label>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-0-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-0-menu"
+        aria-labelledby="downshift-0-label"
+        autoComplete="off"
+        className="input"
+        id="downshift-0-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value=""
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-0-label"
+        className="base menu"
+        id="downshift-0-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
+  <div
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
+  >
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Replace initial value
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base combobox y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="team"
+      id="downshift-1-label"
+    >
+      Search for a team
+    </label>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-1-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-1-menu"
+        aria-labelledby="downshift-1-label"
+        autoComplete="off"
+        className="input"
+        id="downshift-1-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value="Apple"
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-1-label"
+        className="base menu"
+        id="downshift-1-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
+  <div
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
+  >
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Replace initial value
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/RatingsInput Base 1`] = `
 <form
   action="#"
@@ -11995,7 +12153,7 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label input-label x-main2"
+      className="base label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -12059,7 +12217,7 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label input-label x-main2"
+      className="base label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -12135,7 +12293,7 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label input-label x-main2"
+      className="base label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -12193,7 +12351,7 @@ exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label input-label x-main2"
+      className="base label x-main2"
       htmlFor="activity"
     >
       Activity Type
@@ -12251,7 +12409,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label input-label x-main2"
+      className="base label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -12674,3 +12832,5 @@ exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
 exports[`Storyshots r/SwitchRouteMap Base 1`] = `"This component does not need a visual test."`;
 
 exports[`Storyshots r/common/PrivateRoute Base 1`] = `"This component does not need a visual test."`;
+
+exports[`Storyshots test/QueryLoader Base 1`] = `null`;

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

@@ -0,0 +1,220 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Formik, Form, useField } from 'formik'
+
+import { Button, FormDebugger, QueryCombobox } from 'ui'
+
+import { fruits } from '../utils/testData'
+
+import generateNodeId from '../utils/generateNodeId'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+  // environment,
+} from '../utils/relay'
+
+export default {
+  title        :'f/fields/QueryCombobox',
+  component    :QueryCombobox,
+  subcomponents:{
+    // Item:QueryCombobox.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+const allTeamsMockData = {
+  PageInfo() {
+    return {
+      hasNextPage    :true,
+      hasPreviousPage:true,
+    }
+  },
+  TeamNodeConnection:(args) => {
+    const edges = fruits.map((fruit) => ({
+      node:{
+        id  :generateNodeId('TeamNode'),
+        name:fruit,
+      },
+    }))
+
+    // eslint-disable-next-line camelcase
+    const { name_Icontains } = args?.args || {}
+
+    return ({
+      pageInfo:{
+        hasNextPage    :true,
+        hasPreviousPage:true,
+      },
+      // eslint-disable-next-line camelcase
+      edges:name_Icontains?.trim()
+        ? edges.filter(({ node }) => node.name
+          .toLowerCase()
+          .includes(name_Icontains.toLowerCase()))
+        : [],
+    })
+  },
+}
+
+const FETCH_TEAMS_QUERY = graphql`
+  query QueryComboboxAllTeamsQuery($name_Icontains: String) {
+    allTeams(name_Icontains: $name_Icontains) {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+`
+
+// eslint-disable-next-line react/prop-types
+const ResolvedTemplate = ({ multiple, defaultFormikState = {} }) => {
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+
+  const Content = () => {
+    const name = multiple ? 'teams' : 'team'
+
+    const [, , helpers] = useField(name)
+
+    const { setValue } = helpers
+
+    const updateFormikState = () => {
+      setValue({
+        value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNk',
+        label:'Kafagoho',
+      })
+    }
+
+    return (
+      <>
+        <QueryCombobox
+          query={FETCH_TEAMS_QUERY}
+          label="Search for a team"
+          optionsKeyMap={{
+            value:'id',
+            label:'name',
+          }}
+          name={name}
+          multiple={multiple}
+          graphQlNode="allTeams"
+          searchVariable="name_Icontains"
+        />
+        <div
+          style={{
+            display      :'flex',
+            alignItems   :'flex-end',
+            flexDirection:'column',
+          }}
+        >
+          <FormDebugger />
+          <Button
+            onClick={updateFormikState}
+          >
+            {multiple ? 'Add more initial values' : 'Replace initial value'}
+          </Button>
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <Formik
+      initialValues={defaultFormikState}
+    >
+      <Form>
+        <Content />
+      </Form>
+    </Formik>
+  )
+}
+
+export const SingleSelect = ResolvedTemplate.bind({})
+SingleSelect.args = {
+  multiple:false,
+}
+
+export const SingleSelectWithDefaultFormikState = ResolvedTemplate.bind({})
+SingleSelectWithDefaultFormikState.args = {
+  multiple          :false,
+  defaultFormikState:{
+    team:{
+      value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+      label:'Apple',
+    },
+  },
+}
+
+// eslint-disable-next-line react/prop-types
+// const RejectedTemplate = ({ multiple }) => {
+//   const Content = () => {
+//     environment.mock.queuePendingOperation(
+//       FETCH_TEAMS_QUERY,
+//       { name_Icontains: 'a' },
+//     )
+
+//     environment.mock.rejectMostRecentOperation('An error has occured while fetching the teams')
+
+//     const name = multiple ? 'teams' : 'team'
+
+//     const [, meta, helpers] = useField(name)
+
+//     const { setValue, setError } = helpers
+
+//     const { error } = meta
+
+//     return (
+//       <>
+//         <QueryCombobox
+//           query={FETCH_TEAMS_QUERY}
+//           label="Search for a team"
+//           optionsKeyMap={{
+//             value:'id',
+//             label:'name',
+//           }}
+//           error={error}
+//           setValue={setValue}
+//           setError={setError}
+//           name={name}
+//           multiple={multiple}
+//           graphQlNode="allTeams"
+//           searchVariable="name_Icontains"
+//         />
+//         <FormDebugger />
+//       </>
+//     )
+//   }
+
+//   return (
+//     <Formik
+//       initialValues={{ team: '' }}
+//     >
+//       <Form>
+//         <Content />
+//       </Form>
+//     </Formik>
+//   )
+// }
+
+// export const SingleSelectWithError = RejectedTemplate.bind({})
+// SingleSelectWithError.args = {
+//   multiple:false,
+// }
+
+// export const MultipleSelectWithError = RejectedTemplate.bind({})
+// MultipleSelectWithError.args = {
+//   multiple:true,
+// }

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

@@ -0,0 +1,139 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+export type QueryComboboxAllTeamsQueryVariables = {|
+  name_Icontains?: ?string
+|};
+export type QueryComboboxAllTeamsQueryResponse = {|
+  +allTeams: ?{|
+    +edges: $ReadOnlyArray<?{|
+      +node: ?{|
+        +id: string,
+        +name: string,
+      |}
+    |}>
+  |}
+|};
+export type QueryComboboxAllTeamsQuery = {|
+  variables: QueryComboboxAllTeamsQueryVariables,
+  response: QueryComboboxAllTeamsQueryResponse,
+|};
+*/
+
+
+/*
+query QueryComboboxAllTeamsQuery(
+  $name_Icontains: String
+) {
+  allTeams(name_Icontains: $name_Icontains) {
+    edges {
+      node {
+        id
+        name
+      }
+    }
+  }
+}
+*/
+
+const node/*: ConcreteRequest*/ = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "name_Icontains"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "name_Icontains",
+        "variableName": "name_Icontains"
+      }
+    ],
+    "concreteType": "TeamNodeConnection",
+    "kind": "LinkedField",
+    "name": "allTeams",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "TeamNodeEdge",
+        "kind": "LinkedField",
+        "name": "edges",
+        "plural": true,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "TeamNode",
+            "kind": "LinkedField",
+            "name": "node",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "id",
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "name",
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "QueryComboboxAllTeamsQuery",
+    "selections": (v1/*: any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "QueryComboboxAllTeamsQuery",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "a507170c1616920d93ea7ceb061097d1",
+    "id": null,
+    "metadata": {},
+    "name": "QueryComboboxAllTeamsQuery",
+    "operationKind": "query",
+    "text": "query QueryComboboxAllTeamsQuery(\n  $name_Icontains: String\n) {\n  allTeams(name_Icontains: $name_Icontains) {\n    edges {\n      node {\n        id\n        name\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+// prettier-ignore
+(node/*: any*/).hash = '243f007a2e8d0c359ad2976f1c68a472';
+
+module.exports = node;

package/src/stories/test/QueryLoader.stories.jsx

@@ -0,0 +1,36 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { QueryLoader } from 'ui'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+} from '../utils/relay'
+
+export default {
+  title        :'test/QueryLoader',
+  component    :QueryLoader,
+  subcomponents:{
+    // Item:QueryLoader.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  mockRelayOperation()
+
+  return (
+    <QueryLoader />
+  )
+}