feat: Added Fluent UI adapter

- Added Fluent UI v8 adapter
- Restructured and updated library website
- Updated readme

Author: Vojtěch Václav Porteš

README.md

@@ -53,6 +53,7 @@ subpath exports:
 - `@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
+- `@vojtechportes/react-query-builder/fluentui/v8` for Fluent UI React 8 projects
 
 Install the peer dependencies that match the adapter you want to use and pass
 the exported `components` object to `Builder`.
@@ -103,8 +104,31 @@ export const MyAntdBuilder = () => {
 };
 ```
 
+Fluent UI example:
+
+```bash
+npm install @fluentui/react@^8.125.6
+```
+
+```tsx
+import React from 'react';
+import { Builder } from '@vojtechportes/react-query-builder';
+import { components } from '@vojtechportes/react-query-builder/fluentui/v8';
+
+export const MyFluentUiBuilder = () => {
+  return (
+    <Builder
+      fields={fields}
+      data={data}
+      components={components}
+      onChange={setData}
+    />
+  );
+};
+```
+
 `ThemeProvider` customizes the built-in default component set. It does not
-theme the MUI or ANTD adapters, which keep their styling in their host UI
+theme the MUI, ANTD, or Fluent UI adapters, which keep their styling in their host UI
 libraries.
 
 More adapter details:

example/package.json

@@ -11,6 +11,7 @@
     "@ant-design/icons": "^6.1.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@fluentui/react": "^8.125.6",
     "@mui/icons-material": "^9.0.1",
     "@mui/material": "^9.0.1",
     "antd": "^6.0.0",

example/public/sitemap.xml

@@ -36,6 +36,15 @@
   <url>
     <loc>https://vojtechportes.github.io/react-query-builder/documentation/adapters</loc>
   </url>
+  <url>
+    <loc>https://vojtechportes.github.io/react-query-builder/documentation/adapters/mui</loc>
+  </url>
+  <url>
+    <loc>https://vojtechportes.github.io/react-query-builder/documentation/adapters/antd</loc>
+  </url>
+  <url>
+    <loc>https://vojtechportes.github.io/react-query-builder/documentation/adapters/fluentui</loc>
+  </url>
   <url>
     <loc>https://vojtechportes.github.io/react-query-builder/documentation/theming</loc>
   </url>
@@ -60,6 +69,15 @@
   <url>
     <loc>https://vojtechportes.github.io/react-query-builder/api/adapters</loc>
   </url>
+  <url>
+    <loc>https://vojtechportes.github.io/react-query-builder/api/adapters/mui</loc>
+  </url>
+  <url>
+    <loc>https://vojtechportes.github.io/react-query-builder/api/adapters/antd</loc>
+  </url>
+  <url>
+    <loc>https://vojtechportes.github.io/react-query-builder/api/adapters/fluentui</loc>
+  </url>
   <url>
     <loc>https://vojtechportes.github.io/react-query-builder/api/theming</loc>
   </url>

example/src/app/app.tsx

@@ -43,6 +43,9 @@ export const App: React.FC = () => (
           <Route path="/api/builder-props" element={<Navigate to="/api/builder" replace />} />
           <Route path="/api/components" element={<ApiPage />} />
           <Route path="/api/adapters" element={<ApiPage />} />
+          <Route path="/api/adapters/mui" element={<ApiPage />} />
+          <Route path="/api/adapters/antd" element={<ApiPage />} />
+          <Route path="/api/adapters/fluentui" element={<ApiPage />} />
           <Route path="/api/theming" element={<ApiPage />} />
           <Route path="/api/format-query" element={<ApiPage />} />
           <Route path="/api/parse-query" element={<ApiPage />} />
@@ -60,6 +63,12 @@ export const App: React.FC = () => (
           />
           <Route path="/documentation/components" element={<DocumentationPage />} />
           <Route path="/documentation/adapters" element={<DocumentationPage />} />
+          <Route path="/documentation/adapters/mui" element={<DocumentationPage />} />
+          <Route path="/documentation/adapters/antd" element={<DocumentationPage />} />
+          <Route
+            path="/documentation/adapters/fluentui"
+            element={<DocumentationPage />}
+          />
           <Route
             path="/documentation/parsing-and-formatting"
             element={<DocumentationPage />}

example/src/components/demo-playground.tsx

@@ -5,6 +5,7 @@ import {
   type DenormalizedQuery,
 } from '@vojtechportes/react-query-builder';
 import { components as antdComponents } from '@vojtechportes/react-query-builder/antd/v6';
+import { components as fluentUiComponents } from '@vojtechportes/react-query-builder/fluentui/v8';
 import { createMonacoComponents } from '@vojtechportes/react-query-builder/monaco';
 import { components as muiComponents } from '@vojtechportes/react-query-builder/mui/v9';
 import type { IColors } from '../../../src/constants/colors';
@@ -211,7 +212,8 @@ export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
   const [showSourceCode, setShowSourceCode] = React.useState(false);
   const isMuiMode = customizationMode === 'mui';
   const isAntdMode = customizationMode === 'antd';
-  const usesAdapterMode = isMuiMode || isAntdMode;
+  const isFluentUiMode = customizationMode === 'fluentui';
+  const usesAdapterMode = isMuiMode || isAntdMode || isFluentUiMode;
 
   React.useEffect(() => {
     if (!singleRootGroup && textMode) {
@@ -225,6 +227,8 @@ export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
         ? muiComponents
         : customizationMode === 'antd'
           ? antdComponents
+          : customizationMode === 'fluentui'
+            ? fluentUiComponents
           : undefined;
 
     if (!useMonacoTextEditor) {
@@ -469,6 +473,16 @@ export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
               />
               <span>ANTD adapter</span>
             </ToggleRow>
+
+            <ToggleRow>
+              <Toggle
+                type="radio"
+                name="customization-mode"
+                checked={customizationMode === 'fluentui'}
+                onChange={() => setCustomizationMode('fluentui')}
+              />
+              <span>Fluent UI adapter</span>
+            </ToggleRow>
           </ChoiceGroup>
         </Panel>
 
@@ -481,6 +495,8 @@ export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
               usesAdapterMode
                 ? isMuiMode
                   ? 'ThemeProvider colors style the default builder components only. The MUI adapter uses Material UI styling instead.'
+                  : isFluentUiMode
+                    ? 'ThemeProvider colors style the default builder components only. The Fluent UI adapter uses Fluent UI styling instead.'
                   : 'ThemeProvider colors style the default builder components only. The ANTD adapter uses Ant Design styling instead.'
                 : undefined
             }
@@ -509,6 +525,8 @@ export const DemoPlayground: React.FC<IDemoPlaygroundProps> = ({
           <BuilderSurface>
             {isMuiMode ? (
               <Builder {...builderProps} />
+            ) : isFluentUiMode ? (
+              <Builder {...builderProps} />
             ) : isAntdMode ? (
               <Builder {...builderProps} />
             ) : (

example/src/components/documentation-sidebar.tsx

@@ -6,6 +6,7 @@ import { siteTheme } from '../constants/site-theme';
 export interface INavigationPage {
   path: string;
   title: string;
+  depth?: number;
 }
 
 export interface INavigationGroup {
@@ -46,16 +47,17 @@ const GroupTitle = styled.h3`
   text-transform: uppercase;
 `;
 
-const LinkItem = styled(NavLink)`
+const LinkItem = styled(NavLink)<{ $depth?: number }>`
   display: block;
-  padding: 0.38rem 0.55rem;
+  padding: 0.38rem 0.55rem 0.38rem
+    ${({ $depth = 0 }) => `calc(0.55rem + ${$depth}rem)`};
   border-radius: 14px;
   color: #475569;
   line-height: 1.3;
 
   &.active {
     margin: 0 -4px;
-    padding-left: calc(0.55rem + 4px);
+    padding-left: ${({ $depth = 0 }) => `calc(0.55rem + 4px + ${$depth}rem)`};
     padding-right: calc(0.55rem + 4px);
     background: ${siteTheme.primarySurfaceStrong};
     color: ${siteTheme.primaryDark};
@@ -75,14 +77,14 @@ export const DocumentationSidebar: React.FC<IDocumentationSidebarProps> = ({
   groups,
 }) => (
   <Root>
-    <LinkItem to={overviewPage.path} end>
+    <LinkItem to={overviewPage.path} end $depth={overviewPage.depth}>
       {overviewPage.title}
     </LinkItem>
     {groups.map(group => (
       <Group key={group.key}>
         <GroupTitle>{group.title}</GroupTitle>
         {group.pages.map(page => (
-          <LinkItem key={page.path} to={page.path} end>
+          <LinkItem key={page.path} to={page.path} end $depth={page.depth}>
             {page.title}
           </LinkItem>
         ))}