filtercn 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -16
- package/dist/commands/init.d.ts.map +1 -1
- package/dist/commands/init.js +2 -2
- package/dist/commands/init.js.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/templates/index.d.ts +1 -10
- package/dist/templates/index.d.ts.map +1 -1
- package/dist/templates/index.js +878 -698
- package/dist/templates/index.js.map +1 -1
- package/dist/utils/dependencies.d.ts.map +1 -1
- package/dist/utils/dependencies.js +4 -12
- package/dist/utils/dependencies.js.map +1 -1
- package/dist/utils/detect-project.js +1 -1
- package/dist/utils/detect-project.js.map +1 -1
- package/dist/utils/file-writer.d.ts.map +1 -1
- package/dist/utils/file-writer.js +1 -1
- package/dist/utils/file-writer.js.map +1 -1
- package/package.json +8 -2
- package/src/commands/init.ts +9 -26
- package/src/index.ts +1 -5
- package/src/templates/index.ts +872 -692
- package/src/utils/dependencies.ts +6 -18
- package/src/utils/detect-project.ts +1 -1
- package/src/utils/file-writer.ts +2 -5
package/README.md
CHANGED
|
@@ -4,36 +4,98 @@ The official CLI tool to automatically install the [FilterCN](https://github.com
|
|
|
4
4
|
|
|
5
5
|
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.
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## Requirements
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Before using this CLI, your project must have **Next.js**, **React**, and **shadcn/ui** installed and configured.
|
|
10
10
|
|
|
11
|
+
You also need the following shadcn/ui components installed in your project:
|
|
11
12
|
```bash
|
|
12
|
-
npx
|
|
13
|
+
npx shadcn@latest add button input select popover calendar command badge
|
|
13
14
|
```
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
1. Detect your project structure (e.g., `src/components` vs `components`).
|
|
17
|
-
2. Detect your package manager (npm, pnpm, yarn, bun).
|
|
18
|
-
3. Detect your import alias (e.g., `@/`).
|
|
19
|
-
4. Automatically create the necessary folder structure.
|
|
20
|
-
5. Scaffold all 19 component files (UI components, hooks, helpers, types).
|
|
21
|
-
6. Auto-install required peer dependencies (`lucide-react`, `date-fns`).
|
|
16
|
+
---
|
|
22
17
|
|
|
23
|
-
##
|
|
18
|
+
## Installation
|
|
24
19
|
|
|
25
|
-
|
|
20
|
+
You do not need to install this CLI globally. Instead, run it directly using your preferred package manager's executor:
|
|
26
21
|
|
|
22
|
+
**Using npm:**
|
|
27
23
|
```bash
|
|
28
|
-
npx filtercn init
|
|
24
|
+
npx filtercn init
|
|
29
25
|
```
|
|
30
26
|
|
|
31
|
-
|
|
27
|
+
**Using pnpm:**
|
|
28
|
+
```bash
|
|
29
|
+
pnpm dlx filtercn init
|
|
30
|
+
```
|
|
32
31
|
|
|
33
|
-
|
|
32
|
+
**Using bun:**
|
|
33
|
+
```bash
|
|
34
|
+
bunx filtercn init
|
|
35
|
+
```
|
|
34
36
|
|
|
37
|
+
**Using yarn:**
|
|
35
38
|
```bash
|
|
36
|
-
|
|
39
|
+
yarn dlx filtercn init
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### What happens when I run this?
|
|
43
|
+
|
|
44
|
+
The CLI will interactively guide you through the setup:
|
|
45
|
+
1. **Detects Environment:** It automatically finds your `src/components` (or `components`) folder and your TypeScript import aliases (e.g., `@/`).
|
|
46
|
+
2. **Prompts for Confirmation:** It asks if you want to proceed with writing files.
|
|
47
|
+
3. **Scaffolds Files:** It creates a `conditional-filter` folder with all 19 necessary files (Types, Hooks, Helpers, Context Provider, and UI components).
|
|
48
|
+
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.
|
|
49
|
+
|
|
50
|
+
## Post-Installation Usage
|
|
51
|
+
|
|
52
|
+
Once the CLI finishes, you can immediately start using the component in your pages.
|
|
53
|
+
|
|
54
|
+
Here is a quick example of how to wrap your data table with the filter:
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
"use client";
|
|
58
|
+
|
|
59
|
+
import { FilterProvider, FilterRoot } from "@/components/conditional-filter";
|
|
60
|
+
import type { FilterFieldDefinition } from "@/components/conditional-filter";
|
|
61
|
+
|
|
62
|
+
// 1. Define the fields your users can filter by
|
|
63
|
+
const filterFields: FilterFieldDefinition[] = [
|
|
64
|
+
{ name: "title", label: "Project Title", type: "text" },
|
|
65
|
+
{
|
|
66
|
+
name: "status",
|
|
67
|
+
label: "Status",
|
|
68
|
+
type: "select",
|
|
69
|
+
options: [
|
|
70
|
+
{ label: "Active", value: "active" },
|
|
71
|
+
{ label: "Archived", value: "archived" },
|
|
72
|
+
]
|
|
73
|
+
},
|
|
74
|
+
{ name: "price", label: "Budget", type: "number" },
|
|
75
|
+
];
|
|
76
|
+
|
|
77
|
+
export default function MyPage() {
|
|
78
|
+
return (
|
|
79
|
+
<div className="p-8 space-y-4">
|
|
80
|
+
<h1 className="text-2xl font-bold">Projects</h1>
|
|
81
|
+
|
|
82
|
+
{/* 2. Wrap the filter root in the provider */}
|
|
83
|
+
<FilterProvider config={{ fields: filterFields, paramStyle: "underscore" }}>
|
|
84
|
+
<FilterRoot />
|
|
85
|
+
</FilterProvider>
|
|
86
|
+
|
|
87
|
+
{/* Your data table goes here */}
|
|
88
|
+
</div>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Options
|
|
94
|
+
|
|
95
|
+
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:
|
|
96
|
+
|
|
97
|
+
```bash
|
|
98
|
+
npx filtercn init --force
|
|
37
99
|
```
|
|
38
100
|
|
|
39
101
|
## License
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"AAUA,UAAU,WAAW;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb;AAED,wBAAsB,WAAW,CAAC,OAAO,EAAE,WAAW,iBA6FrD"}
|
package/dist/commands/init.js
CHANGED
|
@@ -2,10 +2,10 @@ import path from "node:path";
|
|
|
2
2
|
import chalk from "chalk";
|
|
3
3
|
import ora from "ora";
|
|
4
4
|
import prompts from "prompts";
|
|
5
|
+
import { getTemplateFiles } from "../templates/index.js";
|
|
6
|
+
import { checkPeerDependencies, getShadcnInstallHint, installDependencies } from "../utils/dependencies.js";
|
|
5
7
|
import { detectProject } from "../utils/detect-project.js";
|
|
6
8
|
import { writeAllTemplates } from "../utils/file-writer.js";
|
|
7
|
-
import { checkPeerDependencies, installDependencies, getShadcnInstallHint, } from "../utils/dependencies.js";
|
|
8
|
-
import { getTemplateFiles } from "../templates/index.js";
|
|
9
9
|
import { logger } from "../utils/logger.js";
|
|
10
10
|
export async function initCommand(options) {
|
|
11
11
|
const cwd = path.resolve(options.cwd);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"init.js","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"init.js","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,UAAU,CAAC;KAChB,WAAW,CAAC,6EAA6E,CAAC;KAC1F,OAAO,CAAC,OAAO,CAAC,CAAC;AAEpB,OAAO;KACJ,OAAO,CAAC,MAAM,CAAC;KACf,WAAW,CAAC,6DAA6D,CAAC;KAC1E,MAAM,CAAC,aAAa,EAAE,0BAA0B,EAAE,KAAK,CAAC;KACxD,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,UAAU,CAAC;KAChB,WAAW,CAAC,6EAA6E,CAAC;KAC1F,OAAO,CAAC,OAAO,CAAC,CAAC;AAEpB,OAAO;KACJ,OAAO,CAAC,MAAM,CAAC;KACf,WAAW,CAAC,6DAA6D,CAAC;KAC1E,MAAM,CAAC,aAAa,EAAE,0BAA0B,EAAE,KAAK,CAAC;KACxD,MAAM,CAAC,kBAAkB,EAAE,uDAAuD,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC;KAClG,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;IACrB,MAAM,WAAW,CAAC;QAChB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,GAAG,EAAE,IAAI,CAAC,GAAG;KACd,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEL,OAAO,CAAC,KAAK,EAAE,CAAC"}
|
|
@@ -1,14 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
3
|
-
* Each key is the relative path within the component directory,
|
|
4
|
-
* and each value is the file content.
|
|
5
|
-
*
|
|
6
|
-
* The `ALIAS` placeholder is replaced with the user's actual import alias.
|
|
7
|
-
*/
|
|
8
|
-
/**
|
|
9
|
-
* Returns all template files mapped to their relative paths
|
|
10
|
-
* within the component directory. The alias placeholder will
|
|
11
|
-
* be replaced by the init command.
|
|
2
|
+
* Auto-generated templates for the FilterCN CLI
|
|
12
3
|
*/
|
|
13
4
|
export declare function getTemplateFiles(alias: string): Record<string, string>;
|
|
14
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAo0CH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAyBtE"}
|