@toptal/picasso-query-builder 1.5.1 → 2.0.0

package/src/FieldSelector/FieldSelector.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import type { ComponentProps } from 'react'
+
+import { Select } from '../Select'
+
+export const FieldSelector = ({
+  context: { resetSubmitButtonClicked, getDisabledFields, testIds },
+  disabled,
+  ...props
+}: ComponentProps<typeof Select>) => {
+  // TODO: https://toptal-core.atlassian.net/browse/CPT-947
+  const disabledFields = getDisabledFields()
+
+  return (
+    <Select
+      {...props}
+      handleOnChange={value => {
+        if (disabledFields.includes(value)) {
+          return
+        }
+        resetSubmitButtonClicked()
+        props.handleOnChange(value)
+      }}
+      disabled={disabled || disabledFields.includes(props.value)}
+      valueEditorTestId={testIds?.fieldSelector}
+    />
+  )
+}

package/src/FieldSelector/index.ts

@@ -0,0 +1 @@
+export * from './FieldSelector'

package/src/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,65 @@
+import React, { useMemo } from 'react'
+import { Container, Select } from '@toptal/picasso'
+import { makeStyles } from '@material-ui/core/styles'
+
+import { generateSelectOptions, validateValueEditor } from '../utils'
+import type {
+  BaseVersatileSelectorProps,
+  ValueEditorValidationProps,
+} from '../types/query-builder'
+import styles from './styles'
+
+type Props = BaseVersatileSelectorProps &
+  ValueEditorValidationProps & {
+    valueEditorTestId?: string
+  }
+
+const useStyles = makeStyles(styles)
+
+export const MultiSelect = ({
+  options,
+  handleOnChange,
+  handleTouched,
+  validation,
+  touched,
+  value = '',
+  disabled,
+  className,
+  fieldData,
+  valueEditorTestId,
+}: Props) => {
+  const classes = useStyles()
+
+  const hasError = validateValueEditor({
+    validation,
+    touched,
+  })
+
+  const formattedOptions = useMemo(
+    () => generateSelectOptions(options),
+    [options]
+  )
+  const values = useMemo(() => {
+    return value?.split(',').filter(Boolean)
+  }, [value])
+
+  return (
+    <Container className={classes.root}>
+      <Select
+        disabled={disabled}
+        className={className}
+        onChange={event => handleOnChange(event.target.value.join(','))}
+        onClick={fieldData?.onClick}
+        loading={fieldData?.loading}
+        onBlur={() => handleTouched?.(true)}
+        options={formattedOptions}
+        multiple
+        value={values}
+        status={hasError ? 'error' : undefined}
+        data-testid={valueEditorTestId}
+        enableReset={fieldData?.enableReset}
+        enableResetSearch={fieldData?.enableResetSearch}
+      />
+    </Container>
+  )
+}

package/src/MultiSelect/index.ts

@@ -0,0 +1 @@
+export * from './MultiSelect'

package/src/MultiSelect/styles.ts

@@ -0,0 +1,8 @@
+import { createStyles } from '@material-ui/core/styles'
+
+export default () =>
+  createStyles({
+    root: {
+      flex: '1 0 12.5rem',
+    },
+  })

package/src/OperatorSelector/OperatorSelector.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import type { OperatorSelectorProps } from 'react-querybuilder'
+
+import { Select } from '../Select'
+import type { Field } from '../types/query-builder'
+import styles from './styles'
+
+const useStyles = makeStyles(styles)
+
+export const OperatorSelector = ({
+  fieldData,
+  ...rest
+}: OperatorSelectorProps) => {
+  const classes = useStyles()
+
+  if (
+    fieldData.hideOperator ||
+    (fieldData as Field).valueEditorType === 'range'
+  ) {
+    return null
+  }
+
+  return <Select {...rest} className={classes.root} />
+}

package/src/OperatorSelector/index.ts

@@ -0,0 +1 @@
+export * from './OperatorSelector'

package/src/OperatorSelector/styles.ts

@@ -0,0 +1,8 @@
+import { createStyles } from '@material-ui/core/styles'
+
+export default () =>
+  createStyles({
+    root: {
+      flexBasis: '6.25rem',
+    },
+  })

package/src/QueryBuilder/QueryBuilder.tsx

@@ -0,0 +1,246 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import type { ComponentType } from 'react'
+import { Container } from '@toptal/picasso'
+import { useNotifications } from '@toptal/picasso-notification'
+import type {
+  ValueEditorProps as DefaultValueEditorProps,
+  Field as QueryBuilderField,
+  RuleGroupTypeAny,
+  Operator,
+} from 'react-querybuilder'
+import {
+  QueryBuilder as ReactQueryBuilder,
+  defaultOperators,
+  remove,
+} from 'react-querybuilder'
+import { QueryBuilderDnD } from '@react-querybuilder/dnd'
+import * as ReactDnD from 'react-dnd'
+import * as ReactDndHtml5Backend from 'react-dnd-html5-backend'
+import { makeStyles } from '@material-ui/core/styles'
+import cx from 'classnames'
+
+import type { QueryBuilderContext, Field, TestId } from '../types/query-builder'
+import { RunQueryButton } from '../RunQueryButton'
+import { ClearQueryButton } from '../ClearQueryButton'
+import { ControlElementsContext } from '../ControlElementsContext'
+import { emptyQueryBuilderQuery } from '../utils/constants'
+import type { QueryBuilderValueEditorProps as ValEditorProps } from '../ValueEditor'
+import { ValueEditor as DefaultValEditor } from '../ValueEditor'
+import { controlClassnames, useQueryBuilderValidator } from '../utils'
+import styles from './styles'
+import { useOnQueryChange } from './hooks/useOnQueryChange'
+import { ValidationErrors } from '../ValidationErrors'
+import type { ValidatorResult } from '../utils/use-query-builder-validator'
+
+type ValueEditorComponentProps = ComponentType<DefaultValueEditorProps>
+
+type Props = {
+  /** Defines array of fields to build a query. Each filed is an object with a list of properties. */
+  fields: Field[]
+  /** Defines a set of rules which will be used to fetch data, a combinator and a query id. */
+  query: RuleGroupTypeAny
+  /** Defines a function that is called when the user makes a change to the query in the UI. This function receives an updated query as an argument. */
+  onQueryChange: (newQuery: RuleGroupTypeAny) => void
+  /** Defines a function that is called when validation status changes. Receives a boolean argument `isValid` */
+  onValidationChange?: (isValid: boolean) => void
+  /** Defines a function that is called when QB resets to its default state */
+  onQueryReset?: () => void
+  /** Defines a limit for depth of nested rule groups in QB. By default is set to 3. */
+  maxGroupDepth?: number
+  /** Defines a function that returns an array of operator objects that could be used to construct queries. */
+  getOperators?: (fields: Field[], fieldName: string) => Operator[]
+  /** Defines a function that is called when the user submits a query constructed in the QB. This function takes a single argument - constructed query. */
+  onSubmit?: (query: RuleGroupTypeAny) => void
+  /** Defines a component that allows possibility to customize value editor that is used in QB. By default, QB provides default set of editors (text inputs, dropdowns, etc.). */
+  customValueEditor?: ValueEditorComponentProps
+  /** Defines the loading state. */
+  loading?: boolean
+  /** Defines the possibility to display, or not, any of the controls. For example "Add rule" or "Add group" control. */
+  hideControls?: boolean
+  /** Defines the possibility to enable, or not, drag-and-drop functionality. This possibility applies to rules and groups to rearrange it within QB. */
+  enableDragAndDrop?: boolean
+  /** Adds a customized header at the top of the query builder. */
+  header?: React.ReactNode
+  /** Defines the possibility to reset, or not, operator and value fields when the user changes the field selection for a rule. */
+  resetOnFieldChange?: boolean
+  /** Defines the total number of results, usually used by other components that may need to know the total number of results. */
+  totalCount?: number
+  /** Defines the possibility to display a loading indicator or message to the user while the total count is being fetched. */
+  totalCountLoading?: boolean
+  testIds?: TestId
+}
+
+const useStyles = makeStyles(styles)
+
+const ValueEditor = (props: ValEditorProps) => <DefaultValEditor {...props} />
+
+const QueryBuilder = ({
+  fields,
+  query,
+  onQueryChange,
+  onValidationChange,
+  getOperators: customOperators,
+  maxGroupDepth = 3,
+  loading = false,
+  onSubmit,
+  customValueEditor = ValueEditor,
+  hideControls,
+  header,
+  enableDragAndDrop = false,
+  resetOnFieldChange = true,
+  totalCount,
+  totalCountLoading,
+  onQueryReset,
+  testIds,
+}: Props) => {
+  const classes = useStyles()
+
+  const [submitButtonClicked, setSubmitButtonClicked] = useState(false)
+  const [queryBuilderValid, setIsQueryBuilderValid] = useState<
+    boolean | undefined
+  >()
+  const [validationErrors, setValidationErrors] = useState<ValidatorResult>({})
+
+  const { showError } = useNotifications()
+
+  const { handleQueryChange } = useOnQueryChange({
+    maxGroupDepth,
+    callback: onQueryChange,
+  })
+
+  const { validator } = useQueryBuilderValidator({
+    fields,
+    onValidChange: setIsQueryBuilderValid,
+    onValidationResultChange: setValidationErrors,
+  })
+
+  const resetQuery = useCallback(() => {
+    if (onQueryReset) {
+      onQueryReset()
+    }
+
+    onQueryChange(emptyQueryBuilderQuery)
+  }, [onQueryChange, onQueryReset])
+
+  const handleRemoveGroup = useCallback(
+    (path: number[]) => {
+      if (query) {
+        onQueryChange(remove(query, path))
+      }
+    },
+    [query, onQueryChange]
+  )
+
+  const handleSubmit = useCallback(() => {
+    setSubmitButtonClicked(true)
+
+    if (!queryBuilderValid) {
+      showError(
+        <ValidationErrors
+          validationErrorsTestId={testIds?.validationErrors}
+          validationResult={validationErrors}
+        />
+      )
+
+      return
+    }
+
+    if (onSubmit && query) {
+      onSubmit(query)
+    }
+  }, [queryBuilderValid, onSubmit, query, showError, validationErrors])
+
+  const resetSubmitButtonClicked = useCallback(() => {
+    setSubmitButtonClicked(false)
+  }, [])
+
+  const getDisabledFields = () => {
+    return fields
+      .filter(field => {
+        if (field?.disabled === true) {
+          return field.name
+        }
+      })
+      .map(disabledField => disabledField.name)
+  }
+
+  const getOperators = useCallback(
+    (fieldName: string) => {
+      if (customOperators) {
+        return customOperators(fields, fieldName)
+      }
+
+      return defaultOperators
+    },
+    [customOperators, fields]
+  )
+
+  useEffect(() => {
+    if (queryBuilderValid !== undefined) {
+      onValidationChange?.(queryBuilderValid)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [queryBuilderValid])
+
+  return (
+    <ControlElementsContext>
+      <Container
+        className={cx(classes.global, classes.root)}
+        flex
+        padded={hideControls ? undefined : 'medium'}
+        direction='column'
+        gap='small'
+      >
+        {header && (
+          <Container data-testid={testIds?.header}>{header}</Container>
+        )}
+        <QueryBuilderDnD dnd={{ ...ReactDnD, ...ReactDndHtml5Backend }}>
+          <ReactQueryBuilder
+            resetOnFieldChange={resetOnFieldChange}
+            fields={fields as QueryBuilderField[]}
+            addRuleToNewGroups
+            controlClassnames={controlClassnames}
+            query={query}
+            validator={validator}
+            onQueryChange={handleQueryChange}
+            showCloneButtons
+            getOperators={getOperators}
+            context={
+              {
+                removeGroup: handleRemoveGroup,
+                maxDepth: maxGroupDepth,
+                queryBuilderValid: queryBuilderValid,
+                submitButtonClicked,
+                resetSubmitButtonClicked,
+                getDisabledFields,
+                testIds,
+              } as QueryBuilderContext
+            }
+            controlElements={{
+              valueEditor: customValueEditor,
+            }}
+            enableDragAndDrop={enableDragAndDrop}
+          />
+        </QueryBuilderDnD>
+        {!hideControls && (
+          <Container
+            flex
+            justifyContent='flex-end'
+            data-testid={testIds?.controls}
+          >
+            <ClearQueryButton onClick={resetQuery} />
+            <RunQueryButton
+              onClick={handleSubmit}
+              loading={loading}
+              totalCount={totalCount}
+              totalCountLoading={totalCountLoading}
+              runQueryTestId={testIds?.runQueryButton}
+            />
+          </Container>
+        )}
+      </Container>
+    </ControlElementsContext>
+  )
+}
+
+export default QueryBuilder

package/src/QueryBuilder/hooks/useOnQueryChange.tsx

@@ -0,0 +1,32 @@
+import type { RuleGroupTypeAny } from 'react-querybuilder'
+import { useNotifications } from '@toptal/picasso-notification'
+import { useCallback } from 'react'
+
+import { getQueryDepth } from '../../utils'
+
+type Props = {
+  maxGroupDepth: number
+  callback: (query: RuleGroupTypeAny) => void
+}
+
+export const useOnQueryChange = ({ maxGroupDepth, callback }: Props) => {
+  const { showError } = useNotifications()
+
+  const handleQueryChange = useCallback(
+    (changedQuery: RuleGroupTypeAny) => {
+      // subtract one because we do not count top level query as depth level 1
+      // object depth level is not exactly the query depth level
+      const level = getQueryDepth(changedQuery) - 1
+
+      if (level > maxGroupDepth) {
+        return showError(
+          `Can not exceed maximum group depth (${maxGroupDepth})`
+        )
+      }
+      callback(changedQuery)
+    },
+    [maxGroupDepth, callback, showError]
+  )
+
+  return { handleQueryChange }
+}

package/src/QueryBuilder/index.ts

@@ -0,0 +1 @@
+export { default as QueryBuilder } from './QueryBuilder'

package/src/QueryBuilder/query-builder-global-styles.ts

@@ -0,0 +1,202 @@
+/* eslint-disable */
+
+/**
+ * we moved the styles from react query builder library css file to styled components to fix problem
+ * related to cdn caching issue causing an error in production.
+ * Issue URL: https://toptal-core.atlassian.net/browse/ER-28394
+ */
+import { SPACING_2, SPACING_4, SPACING_6, palette } from '@toptal/picasso-provider'
+
+// Basic
+const rqbSpacing = `${SPACING_6}rem`
+const rqbSmallSpacing = `${SPACING_4}rem`
+const rqbWhiteBackgroundColor = palette.common.white
+const rqbBorderColor = palette.grey.light2
+const rqbBorderStyle = 'solid'
+const rqbBorderRadius = '0.5rem'
+const rqbBorderWidth = '0.0625rem'
+
+// Drag-and-drop
+const rqbDndSpacing = `${SPACING_2}rem`
+const rqbDndHoverBorderBottomColor = palette.purple.main
+const rqbDndHoverCopyBorderBottomColor = palette.green.lighter
+const rqbDndHoverBorderBottomStyle = 'dashed'
+const rqbDndHoverBorderBottomWidth = '0.125rem'
+
+// Branches
+const rqbBranchIndent = '0.75rem'
+const rqbBranchRadius = '0'
+const rqbBranchColorLight = palette.blue.light
+const rqbBranchWidth = rqbBorderWidth
+const rqbBranchStyle = rqbBorderStyle
+
+export const queryBuilderGlobalStyles = () => ({
+  '& .ruleGroup': {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: rqbSmallSpacing,
+    padding: rqbSpacing,
+    borderColor: rqbBorderColor,
+    borderStyle: rqbBorderStyle,
+    borderRadius: rqbBorderRadius,
+    borderWidth: rqbBorderWidth,
+    backgroundColor: rqbWhiteBackgroundColor,
+    margin: '-1px',
+
+    '& .ruleGroup-body': {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: rqbSmallSpacing,
+
+      '&:empty': {
+        display: 'none',
+      },
+    },
+
+    '& .ruleGroup-header, .rule': {
+      display: 'flex',
+      gap: rqbSmallSpacing,
+      alignItems: 'center',
+    },
+
+    '& .rule': {
+      flexWrap: 'wrap',
+      '& .rule-value': {
+        '& .rule-value-list-item:not(:first-of-type)': {
+          margineft: rqbSmallSpacing,
+        },
+      },
+    },
+  },
+
+  /* Drag-and-drop */
+
+  /* Hover styles */
+  '& [data-inlinecombinators="disabled"]': {
+    '& .dndOver': {
+      '&.rule, &.ruleGroup-header': {
+        borderBottomWidth: rqbDndHoverBorderBottomWidth,
+        borderBottomStyle: rqbDndHoverBorderBottomStyle,
+        borderBottomColor: rqbDndHoverBorderBottomColor,
+        paddingBottom: rqbDndSpacing,
+
+        '&.dndCopy': {
+          borderBottomColor: rqbDndHoverCopyBorderBottomColor,
+        },
+      },
+    },
+  },
+
+  '& [data-inlinecombinators="enabled"]': {
+    '& .dndOver': {
+      '&.rule:last-child, &.ruleGroup-header, &.rule + .betweenRules, &.betweenRules':
+        {
+          borderBottomWidth: rqbDndHoverBorderBottomWidth,
+          borderBottomStyle: rqbDndHoverBorderBottomStyle,
+          borderBottomColor: rqbDndHoverCopyBorderBottomColor,
+          paddingBottom: rqbDndSpacing,
+
+          '&.dndCopy': {
+            borderBottomColor: rqbDndHoverCopyBorderBottomColor,
+          },
+        },
+    },
+  },
+
+  /* Drag styles */
+  '& .ruleGroup, .rule': {
+    '&.dndDragging': {
+      opacity: 0.5,
+    },
+
+    '& .queryBuilder-dragHandle': {
+      cursor: 'move',
+    },
+  },
+
+  '& [data-dnd="disabled"] .queryBuilder-dragHandle': {
+    display: 'none',
+  },
+
+  /* Branches */
+  '& .queryBuilder-branches': {
+    '& .ruleGroup-body': {
+      marginLeft: `calc(2 * ${rqbBranchIndent})`,
+    },
+
+    '& .rule, .ruleGroup .ruleGroup': {
+      position: 'relative',
+
+      '&::before, &::after': {
+        content: '""',
+        width: rqbBranchIndent,
+        left: `-${rqbSmallSpacing}`,
+        borderColor: rqbBranchColorLight,
+        borderStyle: rqbBranchStyle,
+        borderRadius: rqbBranchRadius,
+        position: 'absolute',
+      },
+
+      '&::before': {
+        content: '""',
+        top: `-${rqbSmallSpacing}`,
+        height: `calc(50% + ${rqbSmallSpacing})`,
+        borderWidth: `0 0 ${rqbBranchWidth} ${rqbBranchWidth}`,
+      },
+
+      '&:last-child::before': {
+        content: '""',
+        borderBottomLeftRadius: 0,
+      },
+
+      '&::after': {
+        content: '""',
+        top: '50%',
+        height: '50%',
+        borderWidth: `0 0 0 ${rqbBranchWidth}`,
+      },
+
+      '&:last-child::after': {
+        content: '""',
+        display: 'none',
+      },
+    },
+
+    '& .ruleGroup .ruleGroup': {
+      padding: rqbSmallSpacing,
+
+      '&::before, &::after': {
+        content: '""',
+        left: `calc(-${rqbSmallSpacing} - ${rqbBranchWidth})`,
+      },
+
+      '&::before': {
+        content: '""',
+        top: `calc(-${rqbSmallSpacing} - ${rqbBorderWidth})`,
+        height: `calc(50% + ${rqbSmallSpacing} + ${rqbBorderWidth})`,
+      },
+
+      '&::after': {
+        content: '""',
+        height: `calc(50% + ${rqbBorderWidth})`,
+      },
+    },
+
+    '& .betweenRules': {
+      position: 'relative',
+
+      '&::before': {
+        content: '""',
+        width: rqbBranchIndent,
+        left: `calc(-${rqbBranchIndent} - ${rqbBranchWidth})`,
+        borderColor: rqbBorderColor,
+        borderStyle: rqbBranchStyle,
+        borderRadius: rqbBranchRadius,
+        position: 'absolute',
+        top: rqbSmallSpacing,
+        height: `calc(100% + ${rqbSmallSpacing})`,
+        borderWidth: `0 0 0 ${rqbBranchWidth}`,
+      },
+    },
+  },
+})