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

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/utils/generateNodeId.js

@@ -0,0 +1,12 @@
+/* eslint-disable no-bitwise */
+/* eslint-disable no-mixed-operators */
+const uuidv4 = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11)
+  .replace(
+    /[018]/g,
+    (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4)
+      .toString(16),
+  )
+
+const generateNodeId = (objectNode) => btoa(`${objectNode}:${uuidv4()}`)
+
+export default generateNodeId

package/src/stories/utils/testData.js

@@ -0,0 +1,63 @@
+export const fruits = [
+  'Apple',
+  'Apricot',
+  'Avocado',
+  'Banana',
+  'Bilberry',
+  'Blackberry',
+  'Blackcurrant',
+  'Blueberry',
+  'Currant',
+  'Cherry',
+  'Cherimoya',
+  'Clementine',
+  'Date',
+  'Damson',
+  'Durian',
+  'Eggplant',
+  'Elderberry',
+  'Feijoa',
+  'Gooseberry',
+  'Grape',
+  'Grapefruit',
+  'Guava',
+  'Huckleberry',
+  'Jackfruit',
+  'Jambul',
+  'Kiwi fruit',
+  'Kumquat',
+  'Legume',
+  'Lemon',
+  'Lime',
+  'Lychee',
+  'Mango',
+  'Mangostine',
+  'Melon',
+  'Cantaloupe',
+  'Honeydew melon',
+  'Rock melon',
+  'Nectarine',
+  'Orange',
+  'Peach',
+  'Pear',
+  'Williams pear or Bartlett pear',
+  'Pitaya',
+  'Physalis',
+  'Plum/prune (dried plum)',
+  'Pineapple',
+  'Pomegranate',
+  'Raisin',
+  'Raspberry',
+  'Western raspberry (blackcap)',
+  'Rambutan',
+  'Redcurrant',
+  'Salal berry',
+  'Satsuma',
+  'Star fruit',
+  'Strawberry',
+  'Tangerine',
+  'Tomato',
+  'Ugli fruit',
+  'Watermelon',
+  'Ziziphus mauritiana',
+]

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

@@ -0,0 +1,200 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState, useLayoutEffect } from 'react'
+
+import { useField } from 'formik'
+
+import { useRelayEnvironment, fetchQuery } from 'react-relay'
+
+import PropTypes from 'prop-types'
+
+// Local Definitions
+
+import { Combobox } from './common'
+
+/**
+ * This is the component description.
+ */
+const QueryCombobox = ({
+  query,
+  // multiple,
+  name,
+  label,
+  color,
+  description,
+  disabled,
+  debounceMs,
+  graphQlNode,
+  searchVariable,
+  extraVariables,
+  optionsKeyMap,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [, meta, helpers] = useField(name)
+
+  const { setValue, setError } = helpers
+
+  const { error, value } = meta
+
+  const environment = useRelayEnvironment()
+
+  const [isFetching, setIsFetching] = useState(false)
+
+  const [options, setOptions] = useState([])
+
+  const getOptions = (inputValue) => {
+    if (isFetching) return
+
+    let variables = { [searchVariable]: inputValue }
+
+    if (extraVariables) {
+      variables = {
+        ...variables,
+        ...extraVariables,
+      }
+    }
+
+    fetchQuery(
+      environment,
+      query,
+      variables,
+    )
+      .subscribe({
+        start:() => {
+          setIsFetching(true)
+        },
+        complete:() => {
+          setIsFetching(false)
+        },
+        error:(fetchError) => {
+          setIsFetching(false)
+          if (setError)setError(fetchError.message)
+        },
+        next:(data) => {
+          setOptions(data[graphQlNode].edges.map(({ node }) => ({
+            value:node[optionsKeyMap.value],
+            label:node[optionsKeyMap.label],
+          })))
+        },
+      })
+  }
+
+  const comboboxProps = {
+    options,
+    getOptions,
+    debounceMs,
+    disabled,
+    name,
+    label,
+    description,
+    setValue,
+    error,
+    value,
+    color,
+  }
+
+  const Input = Combobox
+
+  return <Input {...comboboxProps} />
+}
+
+QueryCombobox.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The name of the custom select input
+   */
+  name:PropTypes.string,
+
+  /**
+   * The label of the custom select input
+   */
+  label:PropTypes.string,
+
+  /**
+   * The custom select input description
+   */
+  description:PropTypes.string,
+
+  /**
+   * Whether the input should be disabled
+   */
+  disabled:PropTypes.bool,
+
+  /**
+   * The base color of the custom select input
+   */
+  color:PropTypes.string,
+
+  /**
+   * The debounce time in milliseconds
+   */
+  debounceMs:PropTypes.number,
+
+  /**
+   * The query to fetch the options
+   */
+  query:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]).isRequired,
+
+  /**
+   *  The extra variables required to be used in the query.
+   */
+  extraVariables:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  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,
+    label:PropTypes.string.isRequired,
+  }),
+
+  /**
+   * Whether to allow multiple items selection
+   */
+  multiple:PropTypes.bool,
+
+  /**
+   * The graphql node to be used to destructure the fetched data
+   */
+  graphQlNode:PropTypes.string.isRequired,
+
+  /**
+   * The variable to be used to search the data
+   */
+  searchVariable:PropTypes.string,
+}
+
+QueryCombobox.defaultProps = {
+  optionsKeyMap:{
+    value:'id',
+    label:'name',
+  },
+  multiple      :false,
+  color         :'background2',
+  searchVariable:'search',
+}
+
+export default QueryCombobox

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

@@ -0,0 +1,198 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useEffect, useRef } from 'react'
+
+import PropTypes from 'prop-types'
+
+import { useCombobox } from 'downshift'
+
+import styleNames from '@pareto-engineering/bem'
+
+import { FormLabel, FormDescription } from 'ui/f'
+
+import { Popover } from 'ui/a'
+
+// Local Definitions
+
+import { Menu } from '../Menu'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'combobox'
+
+/**
+ * This is the component description.
+ */
+const Combobox = ({
+  id,
+  className:userClassName,
+  style,
+  label,
+  name,
+  options:items,
+  getOptions,
+  setValue,
+  error,
+  description,
+  value,
+  color,
+  // ...otherProps
+}) => {
+  const {
+    isOpen,
+    selectItem,
+    selectedItem,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getComboboxProps,
+    getItemProps,
+  } = useCombobox({
+    items,
+    initialSelectedItem:value,
+    itemToString       :(item) => (item ? item.label : ''),
+    onInputValueChange :({ inputValue }) => {
+      getOptions(inputValue)
+    },
+  })
+
+  // If the user has selected an item, we'll set the value of the field
+  // or if the combobox state has a selected item, we'll set the value to the formik state
+  useEffect(() => {
+    if (selectedItem) {
+      setValue(selectedItem)
+    }
+  }, [selectedItem])
+
+  // If the formik state has a value, we'll set the selected item to the combobox state
+  useEffect(() => {
+    if (value?.value !== selectedItem?.value) {
+      selectItem(value)
+    }
+  }, [value])
+
+  const parentRef = useRef(null)
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        `y-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      ref={parentRef}
+    >
+      <FormLabel {...getLabelProps()} name={name}>
+        {label}
+      </FormLabel>
+
+      <div {...getComboboxProps()} className="input-wrapper">
+        <input {...getInputProps()} className="input" />
+      </div>
+
+      <Popover
+        isOpen={isOpen}
+        parentRef={parentRef}
+      >
+        <Menu
+          isOpen={isOpen}
+          getItemProps={getItemProps}
+          highlightedIndex={highlightedIndex}
+          items={items}
+          {...getMenuProps()}
+        />
+      </Popover>
+
+      {(description || error) && (
+      <FormDescription isError={!!error}>
+        { error || description }
+      </FormDescription>
+      )}
+    </div>
+  )
+}
+
+Combobox.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The label of the custom select input
+   */
+  label:PropTypes.string,
+
+  /**
+   * The custom select input options from the backend
+   */
+  options:PropTypes.arrayOf(
+    PropTypes.shape({
+      value:PropTypes.string,
+      label:PropTypes.string,
+    }),
+  ),
+
+  /**
+   * The name of the custom select input
+   */
+  name:PropTypes.string,
+
+  /**
+   * The function to fetch the options from the backend
+   */
+  getOptions:PropTypes.func,
+
+  /**
+   * The function to set the value of the custom select input
+   */
+  setValue:PropTypes.func.isRequired,
+
+  /**
+   * The custom select input description
+   */
+  description:PropTypes.string,
+
+  /**
+   * The error object
+   */
+  error:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The value of the custom select input
+   */
+  value:PropTypes.shape({
+    value:PropTypes.string,
+    label:PropTypes.string,
+  }),
+
+  /**
+   * The base color of the combobox custom select input
+   */
+  color:PropTypes.string,
+}
+
+Combobox.defaultProps = {
+  // someProp:false
+}
+
+export default Combobox

package/src/ui/f/fields/QueryCombobox/common/Combobox/index.js

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

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

@@ -0,0 +1,103 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'menu'
+
+/**
+ * This is the component description.
+ */
+const Menu = React.forwardRef(({
+  id,
+  className:userClassName,
+  style,
+  items,
+  isOpen,
+  highlightedIndex,
+  getItemProps,
+  ...otherProps
+}, ref) => (
+  <ul
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    ref={ref}
+    {...otherProps}
+  >
+    {isOpen && items.map((item, index) => (
+      <li
+        key={item.label}
+        {...getItemProps({ item, index })}
+        className={[
+          'item',
+          highlightedIndex === index && styleNames.modifierActive,
+        ].filter(Boolean)
+          .join(' ')}
+      >
+        <p>
+          {item.label}
+        </p>
+      </li>
+    ))}
+  </ul>
+))
+Menu.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The items to be displayed in the menu
+   */
+  items:PropTypes.arrayOf(PropTypes.shape({
+    value:PropTypes.string,
+    label:PropTypes.string,
+  })),
+
+  /**
+   * Whether or not the menu is open
+   */
+  isOpen:PropTypes.bool,
+
+  /**
+   * The index of the highlighted item
+   */
+  highlightedIndex:PropTypes.number,
+
+  /**
+   * The function to get the item props
+   */
+  getItemProps:PropTypes.func,
+}
+
+Menu.defaultProps = {
+  // someProp:false
+}
+
+export default Menu

package/src/ui/f/fields/QueryCombobox/common/Menu/index.js

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