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

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 ?
@@ -10637,6 +10637,161 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/FormInput With Query Combobox 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base text-input form-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="firstName"
+    >
+      What's your first name ?
+    </label>
+    <input
+      className="input"
+      disabled={false}
+      id="firstName"
+      name="firstName"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+      value="Test"
+    />
+  </div>
+  <div
+    className="base choices-input form-input x-background2 y-main2"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <p
+      className="base label x-main2"
+    >
+      What are your favourite colors ?
+    </p>
+    <div
+      className="choices"
+    >
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="undefined-red"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="red"
+        />
+        <label
+          htmlFor="undefined-red"
+        >
+          Color Red
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="undefined-blue"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="blue"
+        />
+        <label
+          htmlFor="undefined-blue"
+        >
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="undefined-green"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="green"
+        />
+        <label
+          htmlFor="undefined-green"
+        >
+          Color Green
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="base combobox form-input y-background2 x-main2"
+  >
+    <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
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/common/Description Base 1`] = `
 <div
   className="base description x-metadata"
@@ -11198,6 +11353,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 x-main2"
+  >
+    <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=""
+      />
+    </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/QueryCombobox Single Select With Default Formik State 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base combobox y-background2 x-main2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="team"
+      id="downshift-2-label"
+    >
+      Search for a team
+    </label>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-2-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-2-menu"
+        aria-labelledby="downshift-2-label"
+        autoComplete="off"
+        className="input"
+        id="downshift-2-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value="Apple"
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-2-label"
+        className="base menu"
+        id="downshift-2-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 +12308,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 +12372,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 +12448,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 +12506,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 +12564,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 +12987,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/FormInput.stories.jsx

@@ -8,6 +8,15 @@ import {
   FormDebugger,
 } from 'ui'
 
+import { fruits } from '../utils/testData'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+} from '../utils/relay'
+
+import generateNodeId from '../utils/generateNodeId'
+
 export default {
   title        :'f/FormInput',
   component    :FormInput,
@@ -25,6 +34,11 @@ export default {
         </Form>
       </Formik>
     ),
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
   ],
   argTypes:{
     backgroundColor:{ control: 'color' },
@@ -99,6 +113,107 @@ export const Base = () => {
   )
 }
 
+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 FormInputAllTeamsQuery($name_Icontains: String) {
+    allTeams(name_Icontains: $name_Icontains) {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+`
+
+export const WithQueryCombobox = () => {
+  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-combobox',
+      name         :'team',
+      query        :FETCH_TEAMS_QUERY,
+      label        :'Search for a team',
+      optionsKeyMap:{
+        value:'id',
+        label:'name',
+      },
+      graphQlNode   :'allTeams',
+      searchVariable:'name_Icontains',
+    },
+  ]
+
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+
+  return (
+    <>
+      {
+        inputMap.map((input) => <FormInput {...input} key={input.name} />)
+        }
+      <FormDebugger />
+
+    </>
+  )
+}
+
 export const ExtensibleFormInput = () => {
   const ExtendedTextInput = (props) => (
     <TextInput