Claude review

.github/workflows/main.yml

@@ -13,3 +13,4 @@ jobs:
       - run: bun run build
       - run: bun run lint --format=github
       - run: bun run fmt --check
+      - run: bun run are-the-types-wrong

.oxfmtrc.json

@@ -1,6 +1,5 @@
 {
   "$schema": "./node_modules/oxfmt/configuration_schema.json",
-  "ignorePatterns": [],
   "printWidth": 100,
   "tabWidth": 2,
   "useTabs": false,
@@ -15,6 +14,28 @@
   "sortImports": {
     "newlinesBetween": false
   },
+  "ignorePatterns": [
+    // Hidden(ish) files
+    "**/.*",
+    // Generated
+    "*Parser.js",
+    // Binaries
+    "*.jpeg",
+    "*.jpg",
+    "*.png",
+    "*.svg",
+    "bun.lockb",
+    // Unsupported
+    "*.jison",
+    "*.toml",
+    "CNAME",
+    "*.go",
+    "go.mod",
+    "go.sum",
+    // Misc
+    "lerna.json",
+    "bun.lock"
+  ],
   "overrides": [{
     "files": ["example/**/*.ts{,x}"],
     "options": {

README.md

@@ -17,7 +17,7 @@ Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) comp
 ## Installation
 
 ```bash
-npm i react-querybuilder @react-querybuilder/chakra @chakra-ui/icons@2 @chakra-ui/react@2 @chakra-ui/system@2 @emotion/react @emotion/styled framer-motion
+npm i react-querybuilder @react-querybuilder/chakra2 @chakra-ui/icons@2 @chakra-ui/react@2 @chakra-ui/system@2 @emotion/react @emotion/styled framer-motion
 # OR yarn add / pnpm add / bun add
 ```
 
@@ -27,7 +27,7 @@ To configure the query builder to use Chakra-compatible components, place `Query
 
 ```tsx
 import { ChakraProvider, extendTheme } from '@chakra-ui/react';
-import { QueryBuilderChakra } from '@react-querybuilder/chakra';
+import { QueryBuilderChakra } from '@react-querybuilder/chakra2';
 import { useState } from 'react';
 import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';
 
@@ -83,6 +83,7 @@ export function App() {
 | `ChakraActionElement`   | `controlElements.actionElement` |
 | `ChakraDragHandle`      | `controlElements.dragHandle`    |
 | `ChakraNotToggle`       | `controlElements.notToggle`     |
+| `ChakraShiftActions`    | `controlElements.shiftActions`  |
 | `ChakraValueEditor`     | `controlElements.valueEditor`   |
 | `ChakraValueSelector`   | `controlElements.valueSelector` |
 

example/package.json

@@ -2,11 +2,7 @@
   "dependencies": {
     "@chakra-ui/icons": "^2",
     "@chakra-ui/react": "^2",
-    "@chakra-ui/system": "^2",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
     "@react-querybuilder/chakra2": "8.24.0",
-    "framer-motion": "^11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-querybuilder": "8.24.0"

package.json

@@ -82,10 +82,6 @@
   "peerDependencies": {
     "@chakra-ui/icons": "^2",
     "@chakra-ui/react": "^2",
-    "@chakra-ui/system": "^2",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "framer-motion": "^11",
     "react": ">=18",
     "react-querybuilder": "^8"
   }

src/ChakraActionElement.tsx

@@ -12,8 +12,8 @@ export const ChakraActionElement = ({
   title,
   disabled,
   disabledTranslation,
+  testID,
   // Props that should not be in extraProps
-  testID: _testID,
   rules: _rules,
   level: _level,
   path: _path,
@@ -24,6 +24,7 @@ export const ChakraActionElement = ({
   ...extraProps
 }: ChakraActionProps): React.JSX.Element => (
   <Button
+    data-testid={testID}
     className={className}
     title={disabledTranslation && disabled ? disabledTranslation.title : title}
     onClick={e => handleOnClick(e)}

src/ChakraDragHandle.tsx

@@ -5,11 +5,11 @@ import * as React from 'react';
 import { forwardRef } from 'react';
 import type { DragHandleProps } from 'react-querybuilder';
 
-type IBP = ComponentPropsWithRef<typeof IconButton>;
+type IconButtonProps = ComponentPropsWithRef<typeof IconButton>;
 
 export type ChakraDragHandleProps = DragHandleProps &
-  Omit<IBP, 'aria-label'> &
-  Partial<Pick<IBP, 'aria-label'>>;
+  Omit<IconButtonProps, 'aria-label'> &
+  Partial<Pick<IconButtonProps, 'aria-label'>>;
 
 export const ChakraDragHandle: React.ForwardRefExoticComponent<
   Omit<ChakraDragHandleProps, 'ref'> & React.RefAttributes<HTMLSpanElement>
@@ -19,8 +19,8 @@ export const ChakraDragHandle: React.ForwardRefExoticComponent<
       className,
       title,
       disabled,
+      testID,
       // Props that should not be in extraProps
-      testID: _testID,
       level: _level,
       path: _path,
       label: _label,
@@ -32,11 +32,11 @@ export const ChakraDragHandle: React.ForwardRefExoticComponent<
     },
     dragRef
   ) => (
-    <span ref={dragRef} className={className} title={title}>
+    <span data-testid={testID} ref={dragRef} className={className} title={title}>
       <IconButton
         isDisabled={disabled}
         icon={<DragHandleIcon />}
-        aria-label={title ?? /* istanbul ignore next */ ''}
+        aria-label={title ?? ''}
         {...extraProps}
       />
     </span>

src/ChakraNotToggle.tsx

@@ -13,11 +13,11 @@ export const ChakraNotToggle = ({
   checked,
   title,
   disabled,
+  testID,
   // Props that should not be in extraProps
   path: _path,
   context: _context,
   validation: _validation,
-  testID: _testID,
   schema: _schema,
   ruleGroup: _ruleGroup,
   ...extraProps
@@ -27,6 +27,7 @@ export const ChakraNotToggle = ({
   return (
     <div style={{ display: 'inline-block' }}>
       <FormControl
+        data-testid={testID}
         display="flex"
         alignItems="center"
         className={className}

src/ChakraValueEditor.tsx

@@ -4,7 +4,7 @@ import type { ValueEditorProps } from 'react-querybuilder';
 import { ValueEditor, useValueEditor } from 'react-querybuilder';
 
 // oxlint-disable-next-line no-explicit-any
-type ChakraValueEditorProps = ValueEditorProps & { extraProps?: Record<string, any> };
+export type ChakraValueEditorProps = ValueEditorProps & { extraProps?: Record<string, any> };
 
 export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.Element | null => {
   const {
@@ -19,7 +19,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     values = [],
     listsAsArrays: _listsAsArrays,
     separator,
-    valueSource: _vs,
+    valueSource: _valueSource,
     testID,
     disabled,
     selectorComponent: SelectorComponent = allProps.schema.controls.valueSelector,
@@ -34,7 +34,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     return null;
   }
 
-  const placeHolderText = fieldData?.placeholder ?? '';
+  const placeholderText = fieldData?.placeholder ?? '';
   const inputTypeCoerced = ['in', 'notIn'].includes(operator) ? 'text' : inputType || 'text';
 
   if (
@@ -50,7 +50,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
             value={valueAsArray[i] ?? ''}
             isDisabled={disabled}
             className={valueListItemClassName}
-            placeholder={placeHolderText}
+            placeholder={placeholderText}
             onChange={e => multiValueHandler(e.target.value, i)}
             {...extraProps}
           />
@@ -72,6 +72,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
       return (
         <SelectorComponent
           {...propsForValueSelector}
+          data-testid={testID}
           className={className}
           title={title}
           value={value}
@@ -87,11 +88,12 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     case 'textarea':
       return (
         <Textarea
+          data-testid={testID}
           value={value}
           title={title}
           isDisabled={disabled}
           className={className}
-          placeholder={placeHolderText}
+          placeholder={placeholderText}
           onChange={e => handleOnChange(e.target.value)}
           {...extraProps}
         />
@@ -100,6 +102,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     case 'switch':
       return (
         <Switch
+          data-testid={testID}
           className={className}
           isChecked={!!value}
           title={title}
@@ -112,6 +115,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     case 'checkbox':
       return (
         <Checkbox
+          data-testid={testID}
           className={className}
           title={title}
           isDisabled={disabled}
@@ -124,6 +128,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     case 'radio':
       return (
         <RadioGroup
+          data-testid={testID}
           className={className}
           title={title}
           value={value}
@@ -143,12 +148,13 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
 
   return (
     <Input
+      data-testid={testID}
       type={inputTypeCoerced}
       value={value}
       title={title}
       isDisabled={disabled}
       className={className}
-      placeholder={placeHolderText}
+      placeholder={placeholderText}
       onChange={e => handleOnChange(e.target.value)}
       {...extraProps}
     />