@pareto-engineering/design-system 2.0.0-alpha.6 → 2.0.0-alpha.60

package/src/ui/f/fields/ChoicesInput/styles.scss

@@ -29,10 +29,21 @@ $default-transition:all .3s;
         z-index: -1;
       }
 
+      input:disabled + label {
+        background-color: var(--dark-x);
+      }
+
+      input:not(:disabled) + label {
+        &:hover {
+          border-color: var(--light-y);
+        }
+      }
+
       label {
-        background: var(--x);
-        border-radius: var(--theme-border-radius);
+        border: var(--theme-border-style) var(--dark-x);
+        background: var(--light-x);
         color: var(--on-x);
+        border-radius: var(--theme-border-radius);
         display: block;
         height: 100%;
         padding: $default-padding;
@@ -44,6 +55,10 @@ $default-transition:all .3s;
       input:checked + label {
         background: var(--y);
         color: var(--on-y);
+
+        &:hover {
+          border-color: var(--y);
+        }
       }
     }
   }

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

@@ -0,0 +1,227 @@
+/* @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, MultipleCombobox } from './common'
+
+/**
+ * This is the component description.
+ */
+const QueryCombobox = ({
+  id,
+  style,
+  className,
+  query,
+  multiple,
+  name,
+  label,
+  color,
+  description,
+  disabled,
+  debounceMs,
+  searchVariable,
+  extraVariables,
+  optionsKeyMap,
+  minLength,
+  transformSearch,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [, meta, helpers] = useField(name)
+
+  const { setValue, setError } = helpers
+
+  const { value } = meta
+
+  const environment = useRelayEnvironment()
+
+  const [isFetching, setIsFetching] = useState(false)
+
+  const [options, setOptions] = useState([])
+
+  const { graphql, accessor } = query
+
+  const getOptions = (inputValue) => {
+    if (isFetching) return
+
+    let variables = { [searchVariable]: inputValue }
+
+    if (extraVariables) {
+      variables = {
+        ...variables,
+        ...extraVariables,
+      }
+    }
+
+    fetchQuery(
+      environment,
+      graphql,
+      variables,
+    )
+      .subscribe({
+        start:() => {
+          setIsFetching(true)
+        },
+        complete:() => {
+          setIsFetching(false)
+        },
+        error:(fetchError) => {
+          setIsFetching(false)
+          if (setError)setError(fetchError.message)
+        },
+        next:(data) => {
+          setOptions(data[accessor].edges.map(({ node }) => ({
+            value:node[optionsKeyMap.value],
+            label:optionsKeyMap.getLabel(node),
+          })))
+        },
+      })
+  }
+
+  const comboboxProps = {
+    id,
+    style,
+    options,
+    getOptions,
+    debounceMs,
+    disabled,
+    name,
+    label,
+    description,
+    setValue,
+    value,
+    color,
+    isFetching,
+    className,
+    minLength,
+    transformSearch,
+  }
+
+  const Input = multiple ? MultipleCombobox : 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 graphql query to fetch the options and the accessor to destructure the results from
+   */
+  query:PropTypes.shape({
+    accessor:PropTypes.string,
+    graphql :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,
+    getLabel:PropTypes.func.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,
+
+  /**
+   * The minimum length of the search input to start fetching the options
+   */
+  minLength:PropTypes.number,
+
+  /**
+   * The function to transform the search input
+   */
+  transformSearch:PropTypes.func,
+}
+
+QueryCombobox.defaultProps = {
+  optionsKeyMap:{
+    value   :'id',
+    getLabel:(node) => node.name,
+  },
+  multiple       :false,
+  color          :'background2',
+  searchVariable :'search',
+  transformSearch:(search) => search,
+  minLength      :2,
+  disabled       :false,
+}
+
+export default QueryCombobox

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

@@ -0,0 +1,218 @@
+/* @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, LoadingCircle } 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,
+  description,
+  value,
+  color,
+  minLength,
+  isFetching,
+  transformSearch,
+  disabled,
+  // ...otherProps
+}) => {
+  const {
+    isOpen,
+    selectItem,
+    selectedItem,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    highlightedIndex,
+    getComboboxProps,
+    getItemProps,
+  } = useCombobox({
+    items,
+    initialSelectedItem:value,
+    itemToString       :(item) => (item ? item.label : ''),
+    onInputValueChange :({ inputValue }) => {
+      const transformedInput = transformSearch(inputValue)
+      if (transformedInput.length > minLength) {
+        getOptions(transformedInput)
+      }
+    },
+  })
+
+  // 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" disabled={disabled} />
+        {isFetching && (
+        <LoadingCircle className="x-main2" />
+        )}
+      </div>
+
+      <Popover
+        isOpen={isOpen}
+        parentRef={parentRef}
+      >
+        <Menu
+          isOpen={isOpen}
+          getItemProps={getItemProps}
+          highlightedIndex={highlightedIndex}
+          items={items}
+          {...getMenuProps()}
+        />
+      </Popover>
+
+      <FormDescription className="v50 mt-v s-1" description={description} name={name} />
+    </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 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,
+
+  /**
+   * Whether the query getting the combobox options is inFlight
+   */
+  isFetching:PropTypes.bool.isRequired,
+
+  /**
+   * The minimum length of the search input to start fetching the options
+   */
+  minLength:PropTypes.number,
+
+  /**
+   * The function to transform the search input
+   */
+  transformSearch:PropTypes.func,
+
+  /**
+   * Whether the input filed shpuld be disabled
+   */
+  disabled:PropTypes.bool,
+}
+
+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'