Merge pull request #5 from react-querybuilder/option-groups

Add docs for option group support

Author: jakeboone02

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "arrowParens": "avoid"
+}

docs/api/export.mdx

@@ -3,7 +3,7 @@ title: Export
 description: Convert query builder objects to SQL, etc.
 ---
 
-import TypeScriptAdmonition from "./_ts_admonition.md";
+import TypeScriptAdmonition from './_ts_admonition.md';
 
 <TypeScriptAdmonition />
 
@@ -33,21 +33,21 @@ For the next few sections, assume the `query` variable has been defined as:
 
 ```ts
 const query: RuleGroupType = {
-  id: "root",
-  combinator: "and",
+  id: 'root',
+  combinator: 'and',
   not: false,
   rules: [
     {
-      id: "rule1",
-      field: "firstName",
-      value: "Steve",
-      operator: "=",
+      id: 'rule1',
+      field: 'firstName',
+      value: 'Steve',
+      operator: '=',
     },
     {
-      id: "rule2",
-      field: "lastName",
-      value: "Vai",
-      operator: "=",
+      id: 'rule2',
+      field: 'lastName',
+      value: 'Vai',
+      operator: '=',
     },
   ],
 };
@@ -62,7 +62,7 @@ To export the internal query representation like what `react-querybuilder` passe
 ```ts
 formatQuery(query);
 // or
-formatQuery(query, "json");
+formatQuery(query, 'json');
 ```
 
 The output will be a multi-line string representation of the query using 2 spaces for indentation.
@@ -94,7 +94,7 @@ The output will be a multi-line string representation of the query using 2 space
 To export the internal query representation without formatting (single-line, no indentation) and without the `id` attribute on each object, use the "json_without_ids" format. This is useful if you need to serialize the query for storage.
 
 ```ts
-formatQuery(query, "json_without_ids");
+formatQuery(query, 'json_without_ids');
 ```
 
 Output:
@@ -108,7 +108,7 @@ Output:
 `formatQuery` can export SQL compatible with most RDBMS engines. To export a SQL `WHERE` clause, use the "sql" format.
 
 ```ts
-formatQuery(query, "sql");
+formatQuery(query, 'sql');
 ```
 
 Output:
@@ -122,7 +122,7 @@ Output:
 To export a SQL `WHERE` clause with bind variables instead of explicit values, use the "parameterized" format. The output is an object with `sql` and `params` attributes.
 
 ```ts
-formatQuery(query, "parameterized");
+formatQuery(query, 'parameterized');
 ```
 
 Output:
@@ -139,7 +139,7 @@ Output:
 If anonymous parameters (aka bind variables) are not acceptable, `formatQuery` can output named parameters based on the field names. Use the "parameterized_named" format. The output object is similar to the "parameterized" format, but the `params` attribute is an object instead of an array.
 
 ```ts
-formatQuery(query, "parameterized_named");
+formatQuery(query, 'parameterized_named');
 ```
 
 Output:
@@ -159,7 +159,7 @@ Output:
 For MongoDB-compatible output, use the "mongodb" format.
 
 ```ts
-formatQuery(query, "mongodb");
+formatQuery(query, 'mongodb');
 ```
 
 Output:
@@ -178,31 +178,31 @@ If you need to control the way the value portion of the output is processed, you
 
 ```ts
 const query: RuleGroupType = {
-  combinator: "and",
+  combinator: 'and',
   not: false,
   rules: [
     {
-      field: "instrument",
-      value: ["Guitar", "Vocals"],
-      operator: "in",
+      field: 'instrument',
+      value: ['Guitar', 'Vocals'],
+      operator: 'in',
     },
     {
-      field: "lastName",
-      value: "Vai",
-      operator: "=",
+      field: 'lastName',
+      value: 'Vai',
+      operator: '=',
     },
   ],
 };
 
 const valueProcessor = (field, operator, value) => {
-  if (operator === "in") {
+  if (operator === 'in') {
     // Assuming `value` is an array, such as from a multi-select
-    return `(${value.map((v) => `"${v.trim()}"`).join(",")})`;
+    return `(${value.map(v => `"${v.trim()}"`).join(',')})`;
   }
   return defaultValueProcessor(field, operator, value);
 };
 
-formatQuery(query, { format: "sql", valueProcessor });
+formatQuery(query, { format: 'sql', valueProcessor });
 // Output: "(instrument in ('Guitar','Vocals') and lastName = 'Vai')"
 ```
 
@@ -211,7 +211,7 @@ formatQuery(query, { format: "sql", valueProcessor });
 Some database engines wrap field names in backticks. This can be configured with the `quoteFieldNamesWith` option.
 
 ```ts
-formatQuery(query, { format: "sql", quoteFieldNamesWith: "`" });
+formatQuery(query, { format: 'sql', quoteFieldNamesWith: '`' });
 // Output: "(`firstName` = 'Steve' and `lastName` = 'Vai')"
 ```
 
@@ -221,8 +221,8 @@ If the "parameterized_named" format is used, configure the parameter prefix used
 
 ```ts
 const p = formatQuery(query, {
-  format: "parameterized_named",
-  paramPrefix: "$",
+  format: 'parameterized_named',
+  paramPrefix: '$',
 });
 // p.sql === "(firstName = $firstName_1 and lastName = $lastName_1)"
 ```
@@ -241,43 +241,43 @@ Example:
 
 ```ts
 const query: RuleGroupType = {
-  id: "root",
+  id: 'root',
   rules: [
     {
-      id: "r1",
-      field: "firstName",
-      value: "",
-      operator: "=",
+      id: 'r1',
+      field: 'firstName',
+      value: '',
+      operator: '=',
     },
     {
-      id: "r2",
-      field: "lastName",
-      value: "Vai",
-      operator: "=",
+      id: 'r2',
+      field: 'lastName',
+      value: 'Vai',
+      operator: '=',
     },
   ],
-  combinator: "and",
+  combinator: 'and',
   not: false,
 };
 
 // Query is invalid based on the validator function
 formatQuery(query, {
-  format: "sql",
+  format: 'sql',
   validator: () => false,
 });
 // Output: "(1 = 1)" <-- see `fallbackExpression` option
 
 // Rule "r1" is invalid based on the validation map
 formatQuery(query, {
-  format: "sql",
+  format: 'sql',
   validator: () => ({ r1: false }),
 });
 // Output: "(lastName = 'Vai')" <-- skipped `firstName` rule with `id === 'r1'`
 
 // Rule "r1" is invalid based on the field validator for `firstName`
 formatQuery(query, {
-  format: "sql",
-  fields: [{ name: "firstName", validator: () => false }],
+  format: 'sql',
+  fields: [{ name: 'firstName', validator: () => false }],
 });
 // Output: "(lastName = 'Vai')" <-- skipped `firstName` rule because field validator returned `false`
 ```

docs/api/import.mdx

@@ -3,7 +3,7 @@ title: Import
 description: Convert SQL to query builder objects
 ---
 
-import TypeScriptAdmonition from "./_ts_admonition.md";
+import TypeScriptAdmonition from './_ts_admonition.md';
 
 <TypeScriptAdmonition />
 
@@ -25,16 +25,16 @@ Running any of the following statements will produce the same result (see below)
 parseSQL(`SELECT * FROM t WHERE firstName = 'Steve' AND lastName = 'Vai'`);
 
 parseSQL(`SELECT * FROM t WHERE firstName = ? AND lastName = ?`, {
-  params: ["Steve", "Vai"],
+  params: ['Steve', 'Vai'],
 });
 
 parseSQL(`SELECT * FROM t WHERE firstName = :p1 AND lastName = :p2`, {
-  params: { p1: "Steve", p2: "Vai" },
+  params: { p1: 'Steve', p2: 'Vai' },
 });
 
 parseSQL(`SELECT * FROM t WHERE firstName = $p1 AND lastName = $p2`, {
-  params: { p1: "Steve", p2: "Vai" },
-  paramPrefix: "$",
+  params: { p1: 'Steve', p2: 'Vai' },
+  paramPrefix: '$',
 });
 ```
 
@@ -100,15 +100,15 @@ Output (`RuleGroupTypeIC`):
 {
   rules: [
     {
-      field: "firstName",
-      operator: "=",
-      value: "Steve",
+      field: 'firstName',
+      operator: '=',
+      value: 'Steve',
     },
-    "and",
+    'and',
     {
-      field: "lastName",
-      operator: "=",
-      value: "Vai",
+      field: 'lastName',
+      operator: '=',
+      value: 'Vai',
     },
   ];
 }

docs/api/misc.mdx

@@ -4,7 +4,7 @@ hide_table_of_contents: true
 description: Assorted utilities and other exports
 ---
 
-import TypeScriptAdmonition from "./_ts_admonition.md";
+import TypeScriptAdmonition from './_ts_admonition.md';
 
 <TypeScriptAdmonition />
 
@@ -25,10 +25,7 @@ You can see an example of the default validator in action in the [demo](https://
 ### `findPath`
 
 ```ts
-function findPath(
-  path: number[],
-  query: RuleGroupType
-): RuleType | RuleGroupType;
+function findPath(path: number[], query: RuleGroupType): RuleType | RuleGroupType;
 ```
 
 `findPath` is a utility function for finding the rule or group within the query hierarchy that has a given `path`. Useful in custom [`onAddRule`](./querybuilder#onaddrule) and [`onAddGroup`](./querybuilder#onaddgroup) functions.