Merge pull request #69 from lambda-curry/feature/bazza-ui-filters

Author: dwene

.cursor/rules/storybook-testing.mdc

@@ -4,7 +4,7 @@ on:
   push:
     branches: [main]
   pull_request:
-    branches: [main]
+    branches: ["*"]
   workflow_dispatch:
 
 jobs:

.github/workflows/test.yml

@@ -1,6 +1,7 @@
 {
   "cSpell.words": [
     "autodocs",
+    "Bazza",
     "biomejs",
     "cleanbuild",
     "Filenaming",

.vscode/settings.json

@@ -2,8 +2,69 @@
 
 Checkout our [Storybook Documentation](https://lambda-curry.github.io/forms/?path=/docs/0-1-hello-world-start-here--docs) to see the components in action and get started.
 
-A form library for React applications.
+A comprehensive form library for React applications with modern data table filtering capabilities.
+
+## ✨ New: Bazza UI Data Table Filters
+
+We've added a powerful, accessible filtering system inspired by Linear's interface:
+
+- 🎛️ **Multiple Filter Types**: Text, option, date, and number filters
+- 🔗 **URL State Synchronization**: Filter state persists across page refreshes  
+- 📊 **Faceted Filtering**: Dynamic option counts based on current filters
+- ⚡ **Client & Server-Side**: Flexible filtering strategies for any dataset size
+- ♿ **Accessibility**: Full WCAG 2.1 AA compliance
+- 🎨 **Modern UI**: Clean, Linear-inspired design
+
+### Quick Example
+
+```typescript
+import { DataTableFilter } from '@lambdacurry/forms/ui/data-table-filter';
+import { useDataTableFilters } from '@lambdacurry/forms/ui/data-table-filter/hooks/use-data-table-filters';
+import { createColumnConfigHelper } from '@lambdacurry/forms/ui/data-table-filter/core/filters';
+
+const dtf = createColumnConfigHelper<YourDataType>();
+
+const columnConfigs = [
+  dtf.text().id('title').accessor(row => row.title).displayName('Title').build(),
+  dtf.option().id('status').accessor(row => row.status).displayName('Status')
+    .options([
+      { value: 'active', label: 'Active' },
+      { value: 'inactive', label: 'Inactive' },
+    ]).build(),
+];
+
+const MyTable = () => {
+  const [filters, setFilters] = useFilterSync();
+  const { columns, actions, strategy } = useDataTableFilters({
+    columnsConfig: columnConfigs,
+    filters,
+    onFiltersChange: setFilters,
+    strategy: 'client',
+    data: yourData,
+  });
+
+  return <DataTableFilter columns={columns} filters={filters} actions={actions} strategy={strategy} />;
+};
+```
+
+📖 **[View Complete Filter Documentation](./packages/components/src/ui/data-table-filter/README.md)**
+
+## Features
+
+### Form Components
+- Comprehensive form field components with validation
+- React Hook Form integration
+- Remix integration for server-side forms
+- TypeScript support with excellent IntelliSense
 
+### Data Table Filtering
+- Modern Linear-inspired filter interface
+- Multiple filter types (text, option, date, number)
+- URL state synchronization for filter persistence
+- Faceted filtering with dynamic option counts
+- Client-side and server-side filtering strategies
+- Full accessibility support (WCAG 2.1 AA)
+- Comprehensive test coverage
 
 ## Getting Started
 

README.md

@@ -10,10 +10,7 @@ function getAbsolutePath(value: string): string {
 }
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath("@storybook/addon-docs")
-  ],
+  addons: [getAbsolutePath('@storybook/addon-links'), getAbsolutePath('@storybook/addon-docs')],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),
     options: {},

apps/docs/.storybook/main.ts

@@ -1,16 +1,16 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { TextField } from '@lambdacurry/forms/remix-hook-form';
 // Example of using the new middleware feature in remix-hook-form v7.0.0
 import { Form } from 'react-router';
+import type { ActionFunctionArgs } from 'react-router';
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import * as zod from 'zod';
-import { TextField } from '@lambdacurry/forms/remix-hook-form';
 import { getValidatedFormData } from 'remix-hook-form/middleware';
-import type { ActionFunctionArgs } from 'react-router';
+import * as zod from 'zod';
 
 // Define schema and types
 const schema = zod.object({
-  name: zod.string().min(1, "Name is required"),
-  email: zod.string().email("Invalid email format").min(1, "Email is required"),
+  name: zod.string().min(1, 'Name is required'),
+  email: zod.string().email('Invalid email format').min(1, 'Email is required'),
 });
 
 type FormData = zod.infer<typeof schema>;
@@ -19,18 +19,15 @@ const resolver = zodResolver(schema);
 // Action function using the new middleware
 export const action = async ({ context }: ActionFunctionArgs) => {
   // Use the middleware to extract and validate form data
-  const { errors, data, receivedValues } = await getValidatedFormData<FormData>(
-    context,
-    resolver
-  );
-  
+  const { errors, data, receivedValues } = await getValidatedFormData<FormData>(context, resolver);
+
   if (errors) {
     return { errors, defaultValues: receivedValues };
   }
-  
+
   // Process the validated data
   console.log('Processing data:', data);
-  
+
   return { success: true, data };
 };
 
@@ -41,34 +38,22 @@ export default function MiddlewareExample() {
     formState: { errors },
     register,
   } = useRemixForm<FormData>({
-    mode: "onSubmit",
+    mode: 'onSubmit',
     resolver,
   });
-  
+
   return (
     <div className="p-4">
       <h1 className="text-2xl font-bold mb-4">Remix Hook Form v7 Middleware Example</h1>
-      
+
       <RemixFormProvider>
         <Form method="POST" onSubmit={handleSubmit}>
           <div className="space-y-4">
-            <TextField
-              label="Name"
-              {...register("name")}
-              error={errors.name?.message}
-            />
-            
-            <TextField
-              label="Email"
-              type="email"
-              {...register("email")}
-              error={errors.email?.message}
-            />
-            
-            <button 
-              type="submit"
-              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-            >
+            <TextField label="Name" {...register('name')} error={errors.name?.message} />
+
+            <TextField label="Email" type="email" {...register('email')} error={errors.email?.message} />
+
+            <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
               Submit
             </button>
           </div>

apps/docs/src/examples/middleware-example.tsx

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 @source "../../../packages/components";
 
 :root {

apps/docs/src/main.css

@@ -141,11 +141,11 @@ const ControlledCheckboxExample = () => {
       const termsCheckbox = canvas.getByLabelText('Accept terms and conditions');
       const marketingCheckbox = canvas.getByLabelText('Receive marketing emails');
       const requiredCheckbox = canvas.getByLabelText('This is a required checkbox');
-      
+
       expect(termsCheckbox).not.toBeChecked();
       expect(marketingCheckbox).not.toBeChecked();
       expect(requiredCheckbox).not.toBeChecked();
-      
+
       // Verify submit button is present
       const submitButton = canvas.getByRole('button', { name: 'Submit' });
       expect(submitButton).toBeInTheDocument();
@@ -155,7 +155,7 @@ const ControlledCheckboxExample = () => {
       // Submit form without checking required checkboxes
       const submitButton = canvas.getByRole('button', { name: 'Submit' });
       await userEvent.click(submitButton);
-      
+
       // Verify validation error messages appear
       await expect(canvas.findByText('You must accept the terms and conditions')).resolves.toBeInTheDocument();
       await expect(canvas.findByText('This field is required')).resolves.toBeInTheDocument();
@@ -165,14 +165,14 @@ const ControlledCheckboxExample = () => {
       // Check required checkboxes
       const termsCheckbox = canvas.getByLabelText('Accept terms and conditions');
       const requiredCheckbox = canvas.getByLabelText('This is a required checkbox');
-      
+
       await userEvent.click(termsCheckbox);
       await userEvent.click(requiredCheckbox);
-      
+
       // Submit form
       const submitButton = canvas.getByRole('button', { name: 'Submit' });
       await userEvent.click(submitButton);
-      
+
       // Verify success message
       await expect(canvas.findByText('Form submitted successfully')).resolves.toBeInTheDocument();
     });