Add docs page about compatibility packages

Author: jakeboone02

docs/compat.mdx

@@ -0,0 +1,15 @@
+---
+title: Compatibility packages
+---
+
+The default React Query Builder components, being basic HTML5 form controls, are very flexible with styling (primarily through the [`controlClassnames` prop](./api/querybuilder#controlclassnames)). But some style libraries require different HTML structure to style their form controls correctly.
+
+Official components compatible with several popular style libraries are available under the [`@react-querybuilder` org on npm](https://www.npmjs.com/org/react-querybuilder). Current supported libraries include:
+
+- [Bootstrap](https://getbootstrap.com/) ([@react-querybuilder/bootstrap](https://www.npmjs.com/package/@react-querybuilder/bootstrap))
+- [Ant Design](https://ant.design/) ([@react-querybuilder/antd](https://www.npmjs.com/package/@react-querybuilder/antd))
+- [Bulma](https://bulma.io/) ([@react-querybuilder/bulma](https://www.npmjs.com/package/@react-querybuilder/bulma))
+- [Chakra UI](https://chakra-ui.com/) ([@react-querybuilder/chakra](https://www.npmjs.com/package/@react-querybuilder/chakra))
+- [MUI](https://mui.com/) ([@react-querybuilder/material](https://www.npmjs.com/package/@react-querybuilder/material))
+
+You can see each alternate component package in action by selecting different options in the "Style" dropdown list on the [demo page](https://react-querybuilder.js.org/react-querybuilder/).

docs/typescript.mdx

@@ -53,41 +53,6 @@ type RuleGroupTypeAny = RuleGroupType | RuleGroupTypeIC;
 type RuleOrGroupArray =
   | (RuleType | RuleGroupType)[]
   | (RuleType | RuleGroupTypeIC | string)[];
-
-interface Schema {
-  fields: Field[];
-  fieldMap: { [k: string]: Field };
-  classNames: Classnames;
-  combinators: NameLabelPair[];
-  controls: Controls;
-  createRule(): RuleType;
-  createRuleGroup(): RuleGroupTypeAny;
-  getOperators(field: string): NameLabelPair[];
-  getValueEditorType(field: string, operator: string): ValueEditorType;
-  getInputType(field: string, operator: string): string | null;
-  getValues(field: string, operator: string): NameLabelPair[];
-  isRuleGroup(
-    ruleOrGroup: RuleType | RuleGroupTypeAny
-  ): ruleOrGroup is RuleGroupTypeAny;
-  onGroupAdd(group: RuleGroupTypeAny, parentPath: number[]): void;
-  onGroupRemove(path: number[]): void;
-  onPropChange(
-    prop: Exclude<keyof RuleType | keyof RuleGroupType, "id" | "path">,
-    value: any,
-    path: number[]
-  ): void;
-  onRuleAdd(rule: RuleType, parentPath: number[]): void;
-  onRuleRemove(path: number[]): void;
-  updateIndependentCombinator(value: string, path: number[]): void;
-  showCombinatorsBetweenRules: boolean;
-  showNotToggle: boolean;
-  showCloneButtons: boolean;
-  autoSelectField: boolean;
-  addRuleToNewGroups: boolean;
-  enableDragAndDrop: boolean;
-  validationMap: ValidationMap;
-  independentCombinators: boolean;
-}
 ```
 
 ## Export
@@ -162,4 +127,39 @@ interface NameLabelPair {
 }
 
 type ValueEditorType = "text" | "select" | "checkbox" | "radio" | null;
+
+interface Schema {
+  fields: Field[];
+  fieldMap: { [k: string]: Field };
+  classNames: Classnames;
+  combinators: NameLabelPair[];
+  controls: Controls;
+  createRule(): RuleType;
+  createRuleGroup(): RuleGroupTypeAny;
+  getOperators(field: string): NameLabelPair[];
+  getValueEditorType(field: string, operator: string): ValueEditorType;
+  getInputType(field: string, operator: string): string | null;
+  getValues(field: string, operator: string): NameLabelPair[];
+  isRuleGroup(
+    ruleOrGroup: RuleType | RuleGroupTypeAny
+  ): ruleOrGroup is RuleGroupTypeAny;
+  onGroupAdd(group: RuleGroupTypeAny, parentPath: number[]): void;
+  onGroupRemove(path: number[]): void;
+  onPropChange(
+    prop: Exclude<keyof RuleType | keyof RuleGroupType, "id" | "path">,
+    value: any,
+    path: number[]
+  ): void;
+  onRuleAdd(rule: RuleType, parentPath: number[]): void;
+  onRuleRemove(path: number[]): void;
+  updateIndependentCombinator(value: string, path: number[]): void;
+  showCombinatorsBetweenRules: boolean;
+  showNotToggle: boolean;
+  showCloneButtons: boolean;
+  autoSelectField: boolean;
+  addRuleToNewGroups: boolean;
+  enableDragAndDrop: boolean;
+  validationMap: ValidationMap;
+  independentCombinators: boolean;
+}
 ```

sidebars.js

@@ -36,6 +36,7 @@ const sidebars = {
         "tips/common-mistakes",
       ],
     },
+    "compat",
     "typescript",
   ],
 };