filtercn 0.1.1 → 0.1.2

package/README.md

@@ -4,36 +4,98 @@ The official CLI tool to automatically install the [FilterCN](https://github.com
 
 FilterCN is a comprehensive, fully-customizable filter component built on top of [shadcn/ui](https://ui.shadcn.com/). It provides a visual filter builder UI that syncs state to URL search parameters, ideal for REST API-powered data tables.
 
-## Installation & Usage
+## Requirements
 
-Run the following command in the root of your Next.js project to install the component:
+Before using this CLI, your project must have **Next.js**, **React**, and **shadcn/ui** installed and configured. 
 
+You also need the following shadcn/ui components installed in your project:
 ```bash
-npx filtercn init
+npx shadcn@latest add button input select popover calendar command badge
 ```
 
-The CLI will:
-1. Detect your project structure (e.g., `src/components` vs `components`).
-2. Detect your package manager (npm, pnpm, yarn, bun).
-3. Detect your import alias (e.g., `@/`).
-4. Automatically create the necessary folder structure.
-5. Scaffold all 19 component files (UI components, hooks, helpers, types).
-6. Auto-install required peer dependencies (`lucide-react`, `date-fns`).
+---
 
-## Force Overwrite
+## Installation
 
-If you already have the component installed and want to overwrite it with a fresh copy:
+You do not need to install this CLI globally. Instead, run it directly using your preferred package manager's executor:
 
+**Using npm:**
 ```bash
-npx filtercn init --force
+npx filtercn init
 ```
 
-## Prerequisites 
+**Using pnpm:**
+```bash
+pnpm dlx filtercn init
+```
 
-Since the component is built using shadcn/ui, you must have the following shadcn components installed in your project:
+**Using bun:**
+```bash
+bunx filtercn init
+```
 
+**Using yarn:**
 ```bash
-npx shadcn@latest add button input select popover calendar command badge
+yarn dlx filtercn init
+```
+
+### What happens when I run this?
+
+The CLI will interactively guide you through the setup:
+1. **Detects Environment:** It automatically finds your `src/components` (or `components`) folder and your TypeScript import aliases (e.g., `@/`).
+2. **Prompts for Confirmation:** It asks if you want to proceed with writing files.
+3. **Scaffolds Files:** It creates a `conditional-filter` folder with all 19 necessary files (Types, Hooks, Helpers, Context Provider, and UI components).
+4. **Installs Dependencies:** It checks if you have `lucide-react` and `date-fns` installed. If you don't, it will ask to automatically install them for you using your detected package manager.
+
+## Post-Installation Usage
+
+Once the CLI finishes, you can immediately start using the component in your pages. 
+
+Here is a quick example of how to wrap your data table with the filter:
+
+```tsx
+"use client";
+
+import { FilterProvider, FilterRoot } from "@/components/conditional-filter";
+import type { FilterFieldDefinition } from "@/components/conditional-filter";
+
+// 1. Define the fields your users can filter by
+const filterFields: FilterFieldDefinition[] = [
+  { name: "title", label: "Project Title", type: "text" },
+  { 
+    name: "status", 
+    label: "Status", 
+    type: "select", 
+    options: [
+      { label: "Active", value: "active" },
+      { label: "Archived", value: "archived" },
+    ]
+  },
+  { name: "price", label: "Budget", type: "number" },
+];
+
+export default function MyPage() {
+  return (
+    <div className="p-8 space-y-4">
+      <h1 className="text-2xl font-bold">Projects</h1>
+      
+      {/* 2. Wrap the filter root in the provider */}
+      <FilterProvider config={{ fields: filterFields, paramStyle: "underscore" }}>
+        <FilterRoot />
+      </FilterProvider>
+
+      {/* Your data table goes here */}
+    </div>
+  );
+}
+```
+
+## Options
+
+If you have modified the component files and want to reset them to their original state, or if the installation failed halfway and you want to try again, use the `--force` flag:
+
+```bash
+npx filtercn init --force
 ```
 
 ## License

package/dist/templates/index.js

@@ -1087,26 +1087,42 @@ export function FilterRowComponent({ rowId }: FilterRowProps) {
 import { Plus, RotateCcw, Check } from "lucide-react";
 import { Button } from "${alias}components/ui/button";
 import { useFilterContext } from "../provider/filter-context";
+import { PopoverClose } from "${alias}components/ui/popover";
+import { isValidFilterRow } from "../helpers/validators";
 
 export function FilterFooter() {
   const { config, state, addRow, reset, apply } = useFilterContext();
   const maxRows = config.maxRows || 10;
   const canAdd = state.rows.length < maxRows;
 
+  // Determine if there is at least one valid filter row
+  const hasValidFilters = state.rows.some(isValidFilterRow);
+
   return (
     <div className="flex items-center gap-2 pt-2">
       <Button variant="outline" size="sm" onClick={addRow} disabled={!canAdd}>
         <Plus className="mr-1 h-4 w-4" />
         {config.locale?.addFilter || "+ Add filter"}
       </Button>
-      <Button variant="ghost" size="sm" onClick={reset}>
-        <RotateCcw className="mr-1 h-4 w-4" />
-        {config.locale?.reset || "Reset"}
-      </Button>
-      <Button size="sm" onClick={apply}>
-        <Check className="mr-1 h-4 w-4" />
-        {config.locale?.apply || "Apply"}
-      </Button>
+      <PopoverClose asChild>
+        <Button variant="ghost" size="sm" onClick={reset}>
+          <RotateCcw className="mr-1 h-4 w-4" />
+          {config.locale?.reset || "Reset"}
+        </Button>
+      </PopoverClose>
+      {hasValidFilters ? (
+        <PopoverClose asChild>
+          <Button size="sm" onClick={apply}>
+            <Check className="mr-1 h-4 w-4" />
+            {config.locale?.apply || "Apply"}
+          </Button>
+        </PopoverClose>
+      ) : (
+        <Button size="sm" disabled>
+          <Check className="mr-1 h-4 w-4" />
+          {config.locale?.apply || "Apply"}
+        </Button>
+      )}
     </div>
   );
 }

package/dist/templates/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "filtercn",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "CLI to scaffold the FilterCN conditional filter component into your Next.js + shadcn/ui project",
   "type": "module",
   "bin": {

package/src/templates/index.ts

@@ -1107,26 +1107,42 @@ export function FilterRowComponent({ rowId }: FilterRowProps) {
 import { Plus, RotateCcw, Check } from "lucide-react";
 import { Button } from "${alias}components/ui/button";
 import { useFilterContext } from "../provider/filter-context";
+import { PopoverClose } from "${alias}components/ui/popover";
+import { isValidFilterRow } from "../helpers/validators";
 
 export function FilterFooter() {
   const { config, state, addRow, reset, apply } = useFilterContext();
   const maxRows = config.maxRows || 10;
   const canAdd = state.rows.length < maxRows;
 
+  // Determine if there is at least one valid filter row
+  const hasValidFilters = state.rows.some(isValidFilterRow);
+
   return (
     <div className="flex items-center gap-2 pt-2">
       <Button variant="outline" size="sm" onClick={addRow} disabled={!canAdd}>
         <Plus className="mr-1 h-4 w-4" />
         {config.locale?.addFilter || "+ Add filter"}
       </Button>
-      <Button variant="ghost" size="sm" onClick={reset}>
-        <RotateCcw className="mr-1 h-4 w-4" />
-        {config.locale?.reset || "Reset"}
-      </Button>
-      <Button size="sm" onClick={apply}>
-        <Check className="mr-1 h-4 w-4" />
-        {config.locale?.apply || "Apply"}
-      </Button>
+      <PopoverClose asChild>
+        <Button variant="ghost" size="sm" onClick={reset}>
+          <RotateCcw className="mr-1 h-4 w-4" />
+          {config.locale?.reset || "Reset"}
+        </Button>
+      </PopoverClose>
+      {hasValidFilters ? (
+        <PopoverClose asChild>
+          <Button size="sm" onClick={apply}>
+            <Check className="mr-1 h-4 w-4" />
+            {config.locale?.apply || "Apply"}
+          </Button>
+        </PopoverClose>
+      ) : (
+        <Button size="sm" disabled>
+          <Check className="mr-1 h-4 w-4" />
+          {config.locale?.apply || "Apply"}
+        </Button>
+      )}
     </div>
   );
 }