fix(QueryBuilder): types

lumada-design · Nov 24, 2023 · 5321d09 · 5321d09
1 parent f00592d
commit 5321d09
Show file tree

Hide file tree

Showing 19 changed files with 115 additions and 103 deletions.
diff --git a/packages/core/src/components/QueryBuilder/ConfirmationDialog/ConfirmationDialog.tsx b/packages/core/src/components/QueryBuilder/ConfirmationDialog/ConfirmationDialog.tsx
@@ -1,8 +1,9 @@
-import { HvButton } from "@core/components/Button";
+import { HvButton, HvButtonProps } from "@core/components/Button";
 import {
   HvDialog,
   HvDialogActions,
   HvDialogContent,
+  HvDialogProps,
   HvDialogTitle,
 } from "@core/components/Dialog";
 
@@ -12,7 +13,7 @@ export interface ConfirmationDialogProps {
   title?: string;
   message?: string;
   isOpen?: boolean;
-  onConfirm?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;
+  onConfirm?: HvButtonProps["onClick"];
   onCancel?: () => void;
   confirmButtonLabel?: string;
   cancelButtonLabel?: string;
@@ -31,7 +32,7 @@ export const ConfirmationDialog = ({
 }: ConfirmationDialogProps) => {
   const { classes } = useClasses();
 
-  const handleClose = (_, reason) => {
+  const handleClose: HvDialogProps["onClose"] = (_, reason) => {
     if (reason !== "backdropClick") {
       onCancel?.();
     }

diff --git a/packages/core/src/components/QueryBuilder/QueryBuilder.test.tsx b/packages/core/src/components/QueryBuilder/QueryBuilder.test.tsx
@@ -4,7 +4,7 @@ import userEvent from "@testing-library/user-event";
 
 import { HvQueryBuilder } from ".";
 import { defaultOperators } from "./Context";
-import queryToMongo from "./queryToMongo";
+import queryToMongo from "./stories/queryToMongo";
 
 export const Main = () => {
   const attributes = {

diff --git a/packages/core/src/components/QueryBuilder/QueryBuilder.tsx b/packages/core/src/components/QueryBuilder/QueryBuilder.tsx
@@ -22,6 +22,7 @@ import {
   HvQueryBuilderLabels,
   HvQueryBuilderQueryCombinator,
   HvQueryBuilderQueryOperator,
+  HvQueryBuilderChangedQuery,
 } from "./types";
 import { clearNodeIds, emptyGroup } from "./utils";
 import reducer from "./utils/reducer";
@@ -41,7 +42,7 @@ export interface HvQueryBuilderProps {
   /** The initial query representation. */
   query?: HvQueryBuilderQuery;
   /** Callback fired when query changes. */
-  onChange?: (value: HvQueryBuilderQuery) => void;
+  onChange?: (value: HvQueryBuilderChangedQuery) => void;
   /** Max depth of nested query groups. */
   maxDepth?: number;
   /** Object containing all the labels. */
@@ -52,6 +53,11 @@ export interface HvQueryBuilderProps {
   classes?: HvQueryBuilderClasses;
 }
 
+// TODO - v6
+// - uncontrolled vs controlled: users should be able to control the state
+// - "query" renamed to "initialQuery" and "query" used to control the state
+// - "query" provided with ids by the user but removed through "onChange"
+
 /**
  * This component allows you to create conditions and group them using logical operators.
  * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.
@@ -135,7 +141,7 @@ export const HvQueryBuilder = (props: HvQueryBuilderProps) => {
         setInitialState(false);
       }
 
-      onChange?.(clearNodeIds(state) as HvQueryBuilderQuery);
+      onChange?.(clearNodeIds(state) as HvQueryBuilderChangedQuery);
       setPrevState(cloneDeep(state));
     }
   }, [initialState, onChange, prevState, state]);

diff --git a/packages/core/src/components/QueryBuilder/Rule/Attribute/Attribute.tsx b/packages/core/src/components/QueryBuilder/Rule/Attribute/Attribute.tsx
@@ -6,10 +6,10 @@ import { QueryBuilderContext } from "../../Context";
 import { isBigList } from "../../utils";
 
 export interface AttributeProps {
-  id: number;
-  attribute: string;
-  disabled: boolean;
-  isInvalid: boolean;
+  id: React.Key;
+  attribute?: string;
+  disabled?: boolean;
+  isInvalid?: boolean;
 }
 
 export const Attribute = ({

diff --git a/packages/core/src/components/QueryBuilder/Rule/Operator/Operator.tsx b/packages/core/src/components/QueryBuilder/Rule/Operator/Operator.tsx
@@ -6,13 +6,18 @@ import { QueryBuilderContext } from "../../Context";
 import { isBigList } from "../../utils";
 
 export interface OperatorProps {
-  id: number;
+  id: React.Key;
   combinator: string;
   attribute: string;
-  operator: string;
+  operator?: string;
 }
 
-export const Operator = ({ id, combinator, attribute, operator }) => {
+export const Operator = ({
+  id,
+  combinator,
+  attribute,
+  operator,
+}: OperatorProps) => {
   const context = useContext(QueryBuilderContext);
 
   const { dispatchAction, attributes, operators, labels, readOnly } = context;

diff --git a/packages/core/src/components/QueryBuilder/Rule/Rule.tsx b/packages/core/src/components/QueryBuilder/Rule/Rule.tsx
@@ -1,12 +1,10 @@
 import { useContext, useMemo } from "react";
 import { Delete } from "@hitachivantara/uikit-react-icons";
-
 import { useMediaQuery, useTheme } from "@mui/material";
 
 import { HvGrid } from "@core/components/Grid";
 import { HvButton } from "@core/components/Button";
 import { withTooltip } from "@core/hocs/withTooltip";
-
 import { useDefaultProps } from "@core/hooks";
 import { ExtractNames } from "@core/utils";
 
@@ -21,12 +19,12 @@ export { staticClasses as queryBuilderRuleClasses };
 export type HvQueryBuilderRuleClasses = ExtractNames<typeof useClasses>;
 
 export interface RuleProps {
-  id: number;
+  id: React.Key;
   combinator: string;
-  attribute: string;
-  operator: string;
-  value: any;
-  disabled: boolean;
+  attribute?: string;
+  operator?: string;
+  value?: any;
+  disabled?: boolean;
   isInvalid: boolean;
   classes?: HvQueryBuilderRuleClasses;
 }

diff --git a/packages/core/src/components/QueryBuilder/Rule/Value/BooleanValue/BooleanValue.tsx b/packages/core/src/components/QueryBuilder/Rule/Value/BooleanValue/BooleanValue.tsx
@@ -6,8 +6,8 @@ import { QueryBuilderContext } from "../../../Context";
 import { isBigList } from "../../../utils";
 
 export interface BooleanValueProps {
-  id: number;
-  value: boolean;
+  id: React.Key;
+  value?: boolean;
 }
 
 export const BooleanValue = ({ id, value = true }: BooleanValueProps) => {

diff --git a/packages/core/src/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.tsx b/packages/core/src/components/QueryBuilder/Rule/Value/DateTimeValue/DateTimeValue.tsx
@@ -1,13 +1,10 @@
 import { memo, useCallback, useContext, useMemo, useState } from "react";
-
 import uniqueId from "lodash/uniqueId";
-
 import dayjs from "dayjs";
-
 import { useMediaQuery, useTheme } from "@mui/material";
 
 import { HvWarningText } from "@core/components/Forms";
-import { HvTimePicker } from "@core/components/TimePicker";
+import { HvTimePicker, HvTimePickerValue } from "@core/components/TimePicker";
 import { HvDatePicker } from "@core/components/DatePicker";
 
 import { QueryBuilderContext } from "../../../Context";
@@ -19,10 +16,10 @@ function valueIsRange(operator) {
 }
 
 export interface DateTimeValueProps {
-  id: number;
-  operator: string;
-  value: any;
-  initialTouched: boolean;
+  id: React.Key;
+  operator?: string;
+  value?: any;
+  initialTouched?: boolean;
 }
 
 export const DateTimeValue = ({
@@ -49,7 +46,7 @@ export const DateTimeValue = ({
   const [touchedEndTime, setTouchedEndTime] = useState(initialTouched);
 
   const onDateChange = useCallback(
-    (data) => {
+    (data?: Date) => {
       setTouchedDate(true);
 
       let date;
@@ -87,7 +84,7 @@ export const DateTimeValue = ({
   );
 
   const onTimeChange = useCallback(
-    (data) => {
+    (data: HvTimePickerValue) => {
       setTouchedTime(true);
 
       let time;
@@ -127,7 +124,7 @@ export const DateTimeValue = ({
   );
 
   const onEndDateChange = useCallback(
-    (data) => {
+    (data?: Date) => {
       setTouchedEndDate(true);
 
       let date;
@@ -155,7 +152,7 @@ export const DateTimeValue = ({
   );
 
   const onEndTimeChange = useCallback(
-    (data) => {
+    (data: HvTimePickerValue) => {
       setTouchedEndTime(true);
 
       let time;

diff --git a/packages/core/src/components/QueryBuilder/Rule/Value/DateTimeValue/utils.tsx b/packages/core/src/components/QueryBuilder/Rule/Value/DateTimeValue/utils.tsx
@@ -5,7 +5,7 @@ import dayjs from "dayjs";
  * @param {Number} value - unit time value
  * @returns The unit time value with two digits
  */
-export const padTime = (value) => {
+export const padTime = (value: number) => {
   if (!value || value < 0) {
     return "00";
   }
@@ -16,15 +16,15 @@ export const padTime = (value) => {
   return value.toString();
 };
 
-export const parseDate = (date) => {
+export const parseDate = (date: string) => {
   if (date != null) {
     return dayjs(date).toDate();
   }
 
   return undefined;
 };
 
-export const parseTime = (time) => {
+export const parseTime = (time: string) => {
   if (time != null) {
     const parts = time.split(":");
 

diff --git a/packages/core/src/components/QueryBuilder/Rule/Value/NumericValue/NumericValue.tsx b/packages/core/src/components/QueryBuilder/Rule/Value/NumericValue/NumericValue.tsx
@@ -1,19 +1,18 @@
 import { memo, useCallback, useContext, useState } from "react";
-
 import uniqueId from "lodash/uniqueId";
 import isEmpty from "lodash/isEmpty";
-
 import { useMediaQuery, useTheme } from "@mui/material";
 
 import { HvInput } from "@core/components/Input";
 
 import { QueryBuilderContext } from "../../../Context";
 import { useClasses } from "./Numeric.styles";
+import { HvQueryBuilderNumericRange } from "../../../types";
 
 export interface NumericValueProps {
-  id: number;
-  value: any;
-  operator: string;
+  id: React.Key;
+  value?: any;
+  operator?: string;
   initialTouched?: boolean;
 }
 
@@ -34,7 +33,7 @@ export const NumericValue = ({
   const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
 
   const onSingleValueChange = useCallback(
-    (evt, data) => {
+    (_, data: string) => {
       const numericData = isEmpty(data) ? null : Number(data);
       dispatchAction({
         type: "set-value",
@@ -46,7 +45,7 @@ export const NumericValue = ({
   );
 
   const onRangeValueChange = useCallback(
-    (evt, data, from = true) => {
+    (_, data: string, from = true) => {
       const numericData = isEmpty(data) ? null : Number(data);
       const currentValue = value;
       const numericRange = {
@@ -114,7 +113,7 @@ export const NumericValue = ({
   const numericStatus = numericValidation != null ? "invalid" : "valid";
   const rightStatus = rightValidation != null ? "invalid" : "valid";
 
-  const renderRangeInputs = (rangeValue) => (
+  const renderRangeInputs = (rangeValue: HvQueryBuilderNumericRange) => (
     <div
       className={cx(classes.rangeContainer, { [classes.isMdDown]: isMdDown })}
     >

diff --git a/packages/core/src/components/QueryBuilder/Rule/Value/TextValue/TextValue.tsx b/packages/core/src/components/QueryBuilder/Rule/Value/TextValue/TextValue.tsx
@@ -7,7 +7,7 @@ import { QueryBuilderContext } from "../../../Context";
 import { useClasses } from "./TextValue.styles";
 
 export interface TextValueProps {
-  id?: number;
+  id: React.Key;
   value?: any;
   initialTouched?: boolean;
 }

diff --git a/packages/core/src/components/QueryBuilder/Rule/Value/Value.tsx b/packages/core/src/components/QueryBuilder/Rule/Value/Value.tsx
@@ -7,10 +7,10 @@ import { TextValue } from "./TextValue";
 import { DateTimeValue } from "./DateTimeValue";
 
 export interface ValueProps {
-  id: number;
+  id: React.Key;
   attribute: string;
-  operator: string;
-  value: any;
+  operator?: string;
+  value?: any;
 }
 
 export const Value = ({

diff --git a/packages/core/src/components/QueryBuilder/RuleGroup/RuleGroup.tsx b/packages/core/src/components/QueryBuilder/RuleGroup/RuleGroup.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useContext } from "react";
-
 import { Add, Delete, Info } from "@hitachivantara/uikit-react-icons";
 
 import { HvButton } from "@core/components/Button";
@@ -13,17 +12,14 @@ import { ExtractNames } from "@core/utils/classes";
 import { Rule } from "../Rule";
 import { QueryBuilderContext } from "../Context";
 import { useClasses } from "../QueryBuilder.styles";
+import { HvQueryBuilderQuery, HvQueryBuilderQueryCombinator } from "../types";
 
 export interface RuleGroupProps {
-  /**
-   * Override or extend the styles applied to the component.
-   * See CSS API tab for more details.
-   */
-  classes?: ExtractNames<typeof useClasses>;
-  id?: number;
+  id: React.Key;
   level?: number;
   combinator?: string;
-  rules?: any[];
+  rules?: HvQueryBuilderQuery["rules"];
+  classes?: ExtractNames<typeof useClasses>;
 }
 
 export const RuleGroup = ({
@@ -87,7 +83,7 @@ export const RuleGroup = ({
   );
 
   const onClickCombinator = useCallback(
-    (item) => {
+    (item: HvQueryBuilderQueryCombinator) => {
       dispatchAction({
         type: "set-combinator",
         id,
@@ -164,7 +160,7 @@ export const RuleGroup = ({
             if ("combinator" in rule) {
               return (
                 <RuleGroup
-                  key={rule.id ?? index}
+                  key={rule.id}
                   level={level + 1}
                   {...rule}
                   id={rule.id}
@@ -190,7 +186,7 @@ export const RuleGroup = ({
 
             return (
               <Rule
-                key={rule.id ?? index}
+                key={rule.id}
                 {...rule}
                 isInvalid={isInvalid}
                 id={rule.id}