Merge pull request #12 from NandhakumarE/develop

Publishing beta version to check, things were working fine

Author: NandhakumarE

.changeset/ui-library-integrations.md

@@ -0,0 +1,43 @@
+---
+"react-querybuilder-lite": major
+---
+
+Add comprehensive UI library integrations and enhanced Storybook stories
+
+## Features
+
+### UI Library Integrations
+- **Ant Design**: Complete query builder integration with custom Rule, Group, and ValueInput components supporting light/dark themes
+- **Chakra UI**: Full Chakra UI implementation with accessible components and theme configuration
+- **Material UI**: Material Design query builder components with Google-inspired palette and theme system
+- **Custom CSS**: Pure CSS-based query builder with unique vertical line design pattern
+
+### Components & Utilities
+- Custom ValueInput components for each UI library handling string, number, date, and boolean field types
+- Range value input support for operators like `between` and `not_between`
+- Drag-and-drop handles for all components (when items are not locked)
+- Lock/unlock functionality with visual feedback
+- Duplicate and delete actions for rules and groups
+- AND/OR combinator toggles with keyboard and mouse support
+
+### Story Enhancements
+- Complete core stories for BasicBuilder, MaxDepth, Operators, WithDragAndDrop, and LockedRules
+- Story component utilities with configurable features (drag, clone, lock)
+- Dark mode support across all stories
+- Improved responsive layouts with proper container styling
+
+### Dependencies
+- Added: `@chakra-ui/react`, `@emotion/react`, `@emotion/styled`
+- Added: `@mui/icons-material`, `@mui/material`
+- Added: `antd`, `dayjs`
+
+### Testing & Configuration
+- Updated vitest configuration for improved test setup
+- Enhanced TypeScript configuration support
+- Added GitHub workflows for CI/CD (deploy-storybook, release)
+
+## Breaking Changes
+None
+
+## Migration Guide
+No migration needed. This is a purely additive release with new story examples and UI library integrations.

.github/workflows/deploy-storybook.yml

@@ -35,6 +35,8 @@ jobs:
 
       - name: Build Storybook
         run: npm run build-storybook
+        env:
+          STORYBOOK_BASE: /react-querybuilder-lite/
 
       - name: Setup Pages
         uses: actions/configure-pages@v4

.storybook/main.ts

@@ -3,19 +3,42 @@ import tailwindcss from '@tailwindcss/vite';
 
 const config: StorybookConfig = {
   "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+    "../src/stories/**/*.mdx",
+    "../src/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
   ],
+  // Disable auto-composition of external storybooks from dependencies
+  "refs": () => ({}),
   "addons": [
-    "@chromatic-com/storybook",
     "@storybook/addon-vitest",
     "@storybook/addon-a11y",
-    "@storybook/addon-docs",
-    "@storybook/addon-onboarding"
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        autodocs: false,
+      },
+    },
   ],
   "framework": "@storybook/react-vite",
   viteFinal: (config) => {
-      config.plugins = [...(config.plugins || []), tailwindcss()];
+      // Filter out vite-plugin-dts (not needed for Storybook, causes build errors)
+      config.plugins = (config.plugins || []).filter((plugin) => {
+        const pluginName = plugin && typeof plugin === 'object' && 'name' in plugin ? plugin.name : '';
+        return pluginName !== 'vite:dts';
+      });
+
+      // Add tailwindcss
+      config.plugins.push(tailwindcss());
+
+      config.build = {
+        ...config.build,
+        chunkSizeWarningLimit: 1500,
+      };
+
+      // Set base path for GitHub Pages (when STORYBOOK_BASE env is set)
+      if (process.env.STORYBOOK_BASE) {
+        config.base = process.env.STORYBOOK_BASE;
+      }
+
       return config;
   },
 };

.storybook/preview.ts

@@ -0,0 +1,46 @@
+import type { Preview } from '@storybook/react-vite';
+import type { Decorator } from '@storybook/react';
+import '../src/stories/stories.css';
+
+const withThemeWrapper: Decorator = (Story, context) => {
+  const theme = context.globals.theme || 'light';
+  return (
+    <div className={theme === 'dark' ? 'dark' : ''}>
+      <Story />
+    </div>
+  );
+};
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    a11y: {
+      test: 'todo',
+    },
+  },
+  globalTypes: {
+    theme: {
+      description: 'Theme for components',
+      toolbar: {
+        title: 'Theme',
+        icon: 'paintbrush',
+        items: [
+          { value: 'light', icon: 'sun', title: 'Light' },
+          { value: 'dark', icon: 'moon', title: 'Dark' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: 'light',
+  },
+  decorators: [withThemeWrapper],
+};
+
+export default preview;

.storybook/preview.tsx

@@ -1,6 +1,3 @@
-// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-import storybook from "eslint-plugin-storybook";
-
 import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
@@ -9,7 +6,7 @@ import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(['dist', 'storybook-static']),
   {
     files: ['**/*.{ts,tsx}'],
     extends: [