feat: Added ANTD adapters

- Added adatper for ANTD v6 as subpackage
- Added adapter for ANTD v5 as subpackage
- Updated Documentation, API, and Demo on the library website
- Updated README

Author: Vojtěch Václav Porteš

README.md

@@ -40,16 +40,20 @@ npm install @vojtechportes/react-query-builder
 
 React Query Builder supports React `18+`.
 
-## MUI Adapters
+## UI Adapters
 
-The package also exposes Material UI component mappings through versioned
+The package also exposes ready-made component mappings through versioned
 subpath exports:
 
-- `@vojtechportes/react-query-builder/mui/v9` for new projects
+- `@vojtechportes/react-query-builder/mui/v9` for new Material UI projects
 - `@vojtechportes/react-query-builder/mui/v7` for applications still on MUI 7
+- `@vojtechportes/react-query-builder/antd/v6` for new Ant Design projects
+- `@vojtechportes/react-query-builder/antd/v5` for applications still on Ant Design 5
 
-Install the matching MUI peer dependencies in your app and pass the exported
-`components` object to `Builder`:
+Install the peer dependencies that match the adapter you want to use and pass
+the exported `components` object to `Builder`.
+
+Material UI example:
 
 ```bash
 npm install @mui/material@^9.0.1 @mui/icons-material@^9.0.1 @emotion/react @emotion/styled
@@ -72,8 +76,32 @@ export const MyMuiBuilder = () => {
 };
 ```
 
+Ant Design example:
+
+```bash
+npm install antd@^6.0.0 @ant-design/icons@^6.0.0
+```
+
+```tsx
+import React from 'react';
+import { Builder } from '@vojtechportes/react-query-builder';
+import { components } from '@vojtechportes/react-query-builder/antd/v6';
+
+export const MyAntdBuilder = () => {
+  return (
+    <Builder
+      fields={fields}
+      data={data}
+      components={components}
+      onChange={setData}
+    />
+  );
+};
+```
+
 `ThemeProvider` customizes the built-in default component set. It does not
-theme the Material UI adapters, which keep their styling in MUI.
+theme the MUI or ANTD adapters, which keep their styling in their host UI
+libraries.
 
 More adapter details:
 

example/package.json

@@ -8,10 +8,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/icons": "^6.1.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^9.0.1",
     "@mui/material": "^9.0.1",
+    "antd": "^6.0.0",
     "minisearch": "^7.2.0",
     "prism-react-renderer": "^2.4.1",
     "react": "^18.3.1",

example/src/components/demo-playground.tsx

@@ -4,6 +4,7 @@ import {
   Builder,
   type DenormalizedQuery,
 } from '@vojtechportes/react-query-builder';
+import { components as antdComponents } from '@vojtechportes/react-query-builder/antd/v6';
 import { components as muiComponents } from '@vojtechportes/react-query-builder/mui/v9';
 import type { IColors } from '../../../src/constants/colors';
 import { ThemeProvider } from '../../../src/theme-provider/theme-provider';
@@ -120,7 +121,7 @@ export interface IDemoPlaygroundProps {
   initialData?: DenormalizedQuery;
 }
 
-type CustomizationMode = 'default' | 'mui';
+type CustomizationMode = 'default' | 'mui' | 'antd';
 
 export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
   initialData = initialQueryTree,
@@ -140,6 +141,22 @@ export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
     defaultTheme.colors
   );
   const isMuiMode = customizationMode === 'mui';
+  const isAntdMode = customizationMode === 'antd';
+  const usesAdapterMode = isMuiMode || isAntdMode;
+
+  const builderProps = {
+    data,
+    fields: demoFields,
+    readOnly,
+    lockable,
+    cloneable,
+    onChange: setData,
+    draggable,
+    history,
+    groupTypes: 'both' as const,
+    singleRootGroup,
+    showValidation,
+  };
 
   const outputText = React.useMemo(() => {
     if (outputFormat === 'Native') {
@@ -242,17 +259,29 @@ export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
               />
               <span>MUI adapter</span>
             </ToggleRow>
+
+            <ToggleRow>
+              <Toggle
+                type="radio"
+                name="customization-mode"
+                checked={customizationMode === 'antd'}
+                onChange={() => setCustomizationMode('antd')}
+              />
+              <span>ANTD v6 adapter</span>
+            </ToggleRow>
           </ChoiceGroup>
         </Panel>
 
         <Panel>
           <ThemeEditor
             value={themeColors}
             onChange={setThemeColors}
-            disabled={isMuiMode}
+            disabled={usesAdapterMode}
             disabledMessage={
-              isMuiMode
-                ? 'ThemeProvider colors style the default builder components only. The MUI adapter uses Material UI styling instead.'
+              usesAdapterMode
+                ? isMuiMode
+                  ? 'ThemeProvider colors style the default builder components only. The MUI adapter uses Material UI styling instead.'
+                  : 'ThemeProvider colors style the default builder components only. The ANTD v6 adapter uses Ant Design styling instead.'
                 : undefined
             }
           />
@@ -264,34 +293,17 @@ export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
           <BuilderSurface>
             {isMuiMode ? (
               <Builder
-                data={data}
-                fields={demoFields}
-                readOnly={readOnly}
-                lockable={lockable}
-                cloneable={cloneable}
-                onChange={setData}
-                draggable={draggable}
-                history={history}
-                groupTypes="both"
-                singleRootGroup={singleRootGroup}
-                showValidation={showValidation}
+                {...builderProps}
                 components={muiComponents}
               />
+            ) : isAntdMode ? (
+              <Builder
+                {...builderProps}
+                components={antdComponents}
+              />
             ) : (
               <ThemeProvider colors={themeColors}>
-                <Builder
-                  data={data}
-                  fields={demoFields}
-                  readOnly={readOnly}
-                  lockable={lockable}
-                  cloneable={cloneable}
-                  onChange={setData}
-                  draggable={draggable}
-                  history={history}
-                  groupTypes="both"
-                  singleRootGroup={singleRootGroup}
-                  showValidation={showValidation}
-                />
+                <Builder {...builderProps} />
               </ThemeProvider>
             )}
           </BuilderSurface>

example/src/pages/api-page/pages/api-content.tsx

@@ -122,8 +122,19 @@ const muiAdapterSnippet = `import { components } from '@vojtechportes/react-quer
   onChange={setData}
 />;`;
 
+const antdAdapterSnippet = `import { components } from '@vojtechportes/react-query-builder/antd/v6';
+
+<Builder
+  fields={fields}
+  data={data}
+  components={components}
+  onChange={setData}
+/>;`;
+
 const muiV7Snippet = `import { components } from '@vojtechportes/react-query-builder/mui/v7';`;
 
+const antdV5Snippet = `import { components } from '@vojtechportes/react-query-builder/antd/v5';`;
+
 const muiCreateComponentsSnippet = `import {
   Builder,
   type DenormalizedQuery,
@@ -153,6 +164,35 @@ export const MyMuiBuilder = () => {
   );
 };`;
 
+const antdCreateComponentsSnippet = `import {
+  Builder,
+  type DenormalizedQuery,
+} from '@vojtechportes/react-query-builder';
+import {
+  createAntdComponents,
+  components as antdComponents,
+} from '@vojtechportes/react-query-builder/antd/v6';
+
+const components = createAntdComponents(antdComponents, {
+  form: {
+    Input: MyInput,
+  },
+  Add: MyAddButton,
+});
+
+export const MyAntdBuilder = () => {
+  const [data, setData] = useState<DenormalizedQuery>(initialData);
+
+  return (
+    <Builder
+      fields={fields}
+      data={data}
+      components={components}
+      onChange={setData}
+    />
+  );
+};`;
+
 const historyControlsSignature = `export interface IHistoryControlsProps {
   undoButton: React.ReactNode;
   redoButton: React.ReactNode;
@@ -519,32 +559,33 @@ export const apiPages: IApiPage[] = [
     description:
       'API reference for packaged UI adapter entrypoints such as Material UI v7 and v9 and how they map onto the components override surface.',
     searchText:
-      'Adapters API mui material ui v7 v9 components object adapter entrypoints customization antd future',
+      'Adapters API mui material ui v7 v9 antd ant design v5 v6 components object adapter entrypoints customization',
     content: (
       <>
         <CodeBlock code={muiAdapterSnippet} language="tsx" label="MUI v9 adapter usage" />
+        <CodeBlock code={antdAdapterSnippet} language="tsx" label="ANTD v6 adapter usage" />
         <CodeBlock code={muiV7Snippet} language="tsx" label="MUI v7 import" />
-        <CodeBlock
-          code={muiCreateComponentsSnippet}
-          language="tsx"
-          label="createMuiComponents"
-        />
+        <CodeBlock code={antdV5Snippet} language="tsx" label="ANTD v5 import" />
+        <CodeBlock code={muiCreateComponentsSnippet} language="tsx" label="createMuiComponents" />
+        <CodeBlock code={antdCreateComponentsSnippet} language="tsx" label="createAntdComponents" />
         <SectionTitle>Available adapter entrypoints</SectionTitle>
         <List>
           <li><ItemTitle><InlineCode>@vojtechportes/react-query-builder/mui/v9</InlineCode>:</ItemTitle> Recommended Material UI adapter for new projects.</li>
           <li><ItemTitle><InlineCode>@vojtechportes/react-query-builder/mui/v7</InlineCode>:</ItemTitle> Material UI adapter for applications still on MUI 7.</li>
+          <li><ItemTitle><InlineCode>@vojtechportes/react-query-builder/antd/v6</InlineCode>:</ItemTitle> Recommended Ant Design adapter for new projects.</li>
+          <li><ItemTitle><InlineCode>@vojtechportes/react-query-builder/antd/v5</InlineCode>:</ItemTitle> Ant Design adapter for applications still on Ant Design 5.</li>
         </List>
         <SectionTitle>What adapters export</SectionTitle>
         <List>
           <li><ItemTitle><InlineCode>components</InlineCode>:</ItemTitle> A ready-to-pass object that matches <InlineCode>IBuilderComponentsProps</InlineCode>.</li>
-          <li><ItemTitle>Individual mapped components:</ItemTitle> Named exports such as <InlineCode>MuiSelect</InlineCode> and <InlineCode>MuiInput</InlineCode> for partial customization.</li>
-          <li><ItemTitle><InlineCode>createMuiComponents</InlineCode>:</ItemTitle> Helper for merging the adapter defaults with local overrides while preserving the nested <InlineCode>form</InlineCode> mapping.</li>
+          <li><ItemTitle>Individual mapped components:</ItemTitle> Named exports such as <InlineCode>MuiSelect</InlineCode>, <InlineCode>MuiInput</InlineCode>, <InlineCode>AntdSelect</InlineCode>, and <InlineCode>AntdInput</InlineCode> for partial customization.</li>
+          <li><ItemTitle><InlineCode>createMuiComponents</InlineCode> and <InlineCode>createAntdComponents</InlineCode>:</ItemTitle> Helpers for merging adapter defaults with local overrides while preserving the nested <InlineCode>form</InlineCode> mapping.</li>
         </List>
         <SectionTitle>Relationship to the Components API</SectionTitle>
         <List>
           <li>Adapters are built on top of the same override surface documented in <TextLink to="/api/components">Components</TextLink>.</li>
           <li>They are a convenience layer, not a separate rendering engine.</li>
-          <li><InlineCode>createMuiComponents(base, overrides)</InlineCode> returns a merged <InlineCode>IBuilderComponentsProps</InlineCode> object and handles shallow top-level merging plus nested <InlineCode>form</InlineCode> merging for you.</li>
+          <li><InlineCode>createMuiComponents(base, overrides)</InlineCode> and <InlineCode>createAntdComponents(base, overrides)</InlineCode> return merged <InlineCode>IBuilderComponentsProps</InlineCode> objects and handle shallow top-level merging plus nested <InlineCode>form</InlineCode> merging for you.</li>
         </List>
         <AlertBox title="Documentation" variant="info">
           <TextLink to="/documentation/adapters">Adapters</TextLink>,{' '}