@cgarciagarcia/react-query-builder 1.0.0 → 1.1.0

package/.eslintignore

@@ -0,0 +1 @@
+dist/

package/README.md

@@ -1 +1,42 @@
-# react-query-builder
+<p><b>JavaScript/TypeScript Query Builder</b> provides a way to build a query string compatible with <a href="https://github.com/spatie/laravel-query-builder">spatie/laravel-query-builder</a>.</p>
+
+## Install
+
+You can install package using yarn (or npm):
+
+```bash
+yarn add @cgarciagarcia/react-qiery-builder
+```
+
+## Usage
+
+This package was thought offer an easy way to interact with backend integration `spatie/laravel-query-builder`
+using your favorite library for frontend `React.js` using a customize hook which you could interact.
+
+### All Example
+
+Here is a simple example:
+
+```js
+import {useQueryBuilder} from "@cgarciagarcia/react-qiery-builder";
+
+const baseConfigIfYouWant = {
+    aliases: {
+        "frontend_name": "backend_name",
+    }
+}
+
+const builder = useQueryBuilder(baseConfigIfYouWant)
+    .filters("age", 18)
+    .sorts("created_at")// by default sorting asc
+    .sorts("age", 'desc') // sorting desc
+    .includes("posts", "comments")
+
+
+console.log(theQuery.build());
+// /users?filter[age]=18,
+
+
+## License
+
+The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@cgarciagarcia/react-query-builder",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
-  "main": "index.ts",
+  "main": "dist/index.js",
+  "type": "module",
   "scripts": {
+    "build": "",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -27,8 +29,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unused-imports": "^3.0.0",
-    "prettier": "^3.0.3",
-    "@types/bun": "latest"
+    "prettier": "^3.0.3"
   },
   "keywords": [
     "react",

package/prettier.config.cjs

@@ -17,8 +17,6 @@ const config = {
     importOrder: [
         '^(react/(.*)$)|^(react$)',
         '<THIRD_PARTY_MODULES>',
-        '',
-        '^@/(.*)$',
         '^[../]',
         '^[./]'
     ],

package/src/actions/filter.ts

@@ -24,7 +24,8 @@ export const filterAction = <Al extends Alias<object>, Attr extends string>(
   }, [] as Filter[]);
 
   const val = Array.isArray(value) ? value : [value];
-  return {
+
+  const newState: GlobalState<Al> = {
     ...state,
     filters: [
       ...allFilters,
@@ -34,6 +35,7 @@ export const filterAction = <Al extends Alias<object>, Attr extends string>(
       },
     ],
   };
+  return newState
 };
 
 export const clearFilterAction = <Al>(state: GlobalState<Al>) => {

package/src/actions/include.ts

@@ -1,13 +1,14 @@
 import { type GlobalState } from "@/index";
 
+export type Include = string
 export type Includes = string[];
 
 export const includeAction = <T>(
-  includes: Includes,
+  includes: Include,
   state: GlobalState<T>,
 ): GlobalState<T> => {
   return {
     ...state,
-    includes: includes,
-  };
+    includes: [...state.includes, includes],
+  } satisfies GlobalState<T>;
 };

package/src/useQueryBuilder.ts

@@ -9,8 +9,8 @@ import {
   filterAction,
   type FilterValue,
   type GlobalState,
+  type Include,
   includeAction,
-  type Includes,
   type Sort,
   sortAction,
 } from "@/index";
@@ -35,7 +35,7 @@ const reducer = <Aliases extends Record<string, string>>(
       return clearFilterAction(state);
     }
     case "include": {
-      const includes = action.payload as Includes;
+      const includes = action.payload as Include;
       return includeAction(includes, state);
     }
     case "sort": {
@@ -63,7 +63,7 @@ export interface QueryBuilder<AliasType = NonNullable<unknown>> {
   ) => QueryBuilder<AliasType>;
   build: () => string;
   clearFilters: () => QueryBuilder<AliasType>;
-  includes: (includes: Includes) => QueryBuilder<AliasType>;
+  includes: (includes: Include) => QueryBuilder<AliasType>;
   sorts: (
     attribute: string,
     direction?: "asc" | "desc",

package/tsconfig.json

@@ -7,29 +7,21 @@
     "incremental": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "lib": [
-      "esnext"
-    ],
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmit": true,
+    "outDir": "./dist",
     "noUnusedParameters": true,
     "noUnusedLocals": true,
     "noUncheckedIndexedAccess": true,
     "paths": {
       "@/*": [
-        "*"
+        "./*"
       ]
     },
     "resolveJsonModule": true,
     "skipLibCheck": true,
-    "strict": true,
-    "target": "ESNext"
+    "strict": true
   },
-  "include": [
-    "./src/**/*",
-    ".eslintrc.cjs",
-    "./prettier.config.cjs",
-    "./index.ts"
+  "type": "module",
+  "exclude": [
+    "./*.config.cjs"
   ]
 }

package/index.ts

@@ -1,6 +0,0 @@
-import * as QueryBuilder from "./src"
-
-export {
-  QueryBuilder,
-}
-