@cgarciagarcia/react-query-builder 1.0.0

package/.eslintrc.cjs

@@ -0,0 +1,56 @@
+/** @type {import('eslint').Linter.Config} */
+const config = {
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended-type-checked',
+        'plugin:@typescript-eslint/stylistic-type-checked',
+        'plugin:jsx-a11y/recommended',
+        'plugin:react-hooks/recommended',
+        'plugin:react/recommended',
+        'prettier'
+    ],
+    env: {
+        es2022: true,
+        browser: true,
+        commonjs: true
+    },
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        project: true
+    },
+    plugins: ['@typescript-eslint', 'import', 'unused-imports'],
+    rules: {
+        'react/prop-types': 'off',
+        '@typescript-eslint/unbound-method': 'off',
+        '@typescript-eslint/no-unused-vars': [
+            'error',
+            {
+                argsIgnorePattern: '^_',
+                varsIgnorePattern: '^_'
+            }
+        ],
+        'unused-imports/no-unused-imports': 'error',
+        '@typescript-eslint/consistent-type-imports': [
+            'warn',
+            {prefer: 'type-imports', fixStyle: 'separate-type-imports'}
+        ],
+        '@typescript-eslint/no-misused-promises': [
+            2,
+            {checksVoidReturn: {attributes: false}}
+        ],
+        'import/consistent-type-specifier-style': ['error', 'prefer-inline'],
+        'import/no-duplicates': 'error',
+        'object-curly-spacing': ["warn", "always"]
+
+    },
+    ignorePatterns: ['.eslintrc.cjs', '.config.js', '.config.cjs', '.config.ts'],
+    reportUnusedDisableDirectives: true,
+    globals: {
+        React: 'writable'
+    },
+    settings: {
+        react: {version: 'detect'}
+    }
+}
+
+module.exports = config

package/.nvmrc

@@ -0,0 +1 @@
+v20.14.0

package/.prettierignore

@@ -0,0 +1 @@
+node_modules/

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Carlos Garcia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# react-query-builder

package/index.ts

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

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@cgarciagarcia/react-query-builder",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cgarciagarcia/react-query-builder.git"
+  },
+  "dependencies": {
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/eslint": "^8.44.2",
+    "@types/react": "^18.2.8",
+    "typescript": "^5.2.2",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "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"
+  },
+  "keywords": [
+    "react",
+    "query-builder",
+    "laravel-query-builder"
+  ],
+  "author": "Carlos Garcia",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cgarciagarcia/react-query-builder/issues"
+  },
+  "homepage": "https://github.com/cgarciagarcia/react-query-builder#readme"
+}

package/prettier.config.cjs

@@ -0,0 +1,30 @@
+/** @typedef  {import('@ianvs/prettier-plugin-sort-imports').PluginConfig} SortImportsConfig */
+/** @typedef  {import('prettier').Config} PrettierConfig */
+/** @typedef  {{ tailwindConfig: string }} TailwindConfig */
+
+/** @type { PrettierConfig | SortImportsConfig | TailwindConfig } */
+const config = {
+    arrowParens: 'always',
+    printWidth: 80,
+    singleQuote: false,
+    jsxSingleQuote: false,
+    semi: true,
+    trailingComma: 'all',
+    tabWidth: 2,
+    plugins: [
+        '@ianvs/prettier-plugin-sort-imports',
+    ],
+    importOrder: [
+        '^(react/(.*)$)|^(react$)',
+        '<THIRD_PARTY_MODULES>',
+        '',
+        '^@/(.*)$',
+        '^[../]',
+        '^[./]'
+    ],
+    importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
+    importOrderTypeScriptVersion: '5.0.0',
+    bracketSpacing: true
+}
+
+module.exports = config

package/src/actions/filter.ts

@@ -0,0 +1,44 @@
+import { type Alias, type GlobalState, usingAlias, } from "@/utils";
+
+export type FilterValue = (string | number)[] | string | number;
+
+export interface Filter {
+  attribute: string;
+  value: (string | number)[];
+}
+
+export const filterAction = <Al extends Alias<object>, Attr extends string>(
+  attribute: Attr,
+  value: FilterValue,
+  state: GlobalState<Al>,
+) => {
+  const alias = usingAlias(state, attribute);
+  let prevFilter: Filter | undefined;
+
+  const allFilters = state.filters.reduce((filters, filter) => {
+    if (filter.attribute === alias) {
+      prevFilter = filter;
+      return filters;
+    }
+    return [...filters, filter];
+  }, [] as Filter[]);
+
+  const val = Array.isArray(value) ? value : [value];
+  return {
+    ...state,
+    filters: [
+      ...allFilters,
+      {
+        attribute: attribute,
+        value: [...(prevFilter?.value ?? []), ...val],
+      },
+    ],
+  };
+};
+
+export const clearFilterAction = <Al>(state: GlobalState<Al>) => {
+  return {
+    ...state,
+    filters: [],
+  };
+};

package/src/actions/include.ts

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

package/src/actions/index.ts

@@ -0,0 +1,5 @@
+export * from "@/actions/sort";
+export * from "@/actions/filter";
+export * from "@/actions/include";
+
+export type Actions = "sort" | "filter" | "clear_filter" | "include";

package/src/actions/sort.ts

@@ -0,0 +1,14 @@
+import { type GlobalState, usingAlias } from "@/index";
+
+export type Sort = [string, "asc" | "desc"];
+
+export type Sorts = Sort[];
+
+export const sortAction = <T>(sorts: Sort, state: GlobalState<T>) => {
+  const [attribute, direction] = sorts;
+  const attributeAliased = usingAlias(state, attribute);
+  return {
+    ...state,
+    sorts: [...state.sorts, [attributeAliased, direction]],
+  } satisfies GlobalState<T>;
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "@/utils";
+export * from "@/actions";
+export * from "@/useQueryBuilder";

package/src/useQueryBuilder.ts

@@ -0,0 +1,126 @@
+import { useReducer, useState } from "react";
+
+import {
+  type Actions,
+  type Alias,
+  build,
+  clearFilterAction,
+  type Filter,
+  filterAction,
+  type FilterValue,
+  type GlobalState,
+  includeAction,
+  type Includes,
+  type Sort,
+  sortAction,
+} from "@/index";
+
+
+interface Action {
+  type: Actions;
+  payload: unknown;
+
+}
+
+const reducer = <Aliases extends Record<string, string>>(
+  state: GlobalState<Aliases>,
+  action: Action,
+) => {
+  switch (action?.type) {
+    case "filter": {
+      const filter = action.payload as Filter;
+      return filterAction(filter.attribute, filter.value, state);
+    }
+    case "clear_filter": {
+      return clearFilterAction(state);
+    }
+    case "include": {
+      const includes = action.payload as Includes;
+      return includeAction(includes, state);
+    }
+    case "sort": {
+      const sorts = action.payload as Sort;
+      return sortAction(sorts, state);
+    }
+    default: {
+      return { ...state };
+    }
+  }
+
+};
+
+const initialState = <T>(): GlobalState<T> => ({
+  aliases: {} as Alias<T>,
+  filters: [],
+  includes: [],
+  sorts: [],
+});
+
+export interface QueryBuilder<AliasType = NonNullable<unknown>> {
+  filters: (
+    attribute: keyof AliasType | string,
+    value: FilterValue,
+  ) => QueryBuilder<AliasType>;
+  build: () => string;
+  clearFilters: () => QueryBuilder<AliasType>;
+  includes: (includes: Includes) => QueryBuilder<AliasType>;
+  sorts: (
+    attribute: string,
+    direction?: "asc" | "desc",
+  ) => QueryBuilder<AliasType>;
+}
+
+type ExtensibleQueryProps<T> = Pick<
+  QueryBuilder<T>,
+  "filters" | "includes" | "sorts"
+>;
+
+interface QueryBuilderProps<AliasType> extends ExtensibleQueryProps<AliasType> {
+  aliases?: AliasType;
+}
+
+export const useQueryBuilder: <Aliases extends Record<string, string>>(
+  config?: QueryBuilderProps<Aliases>,
+) => QueryBuilder<Aliases> = <Aliases extends Record<string, string>>(
+  config = {} as QueryBuilderProps<Aliases>,
+) => {
+  const [init] = useState(() => initialState<Aliases>());
+  const [state, dispatch] = useReducer(reducer, init, (init) => ({
+    ...init,
+    aliases: config?.aliases ?? ({} as Aliases),
+  }));
+
+  const builder: QueryBuilder<Aliases> = {
+    filters: (attribute, value) => {
+      dispatch({
+        type: "filter",
+        payload: { attribute, value },
+      });
+      return builder;
+    },
+    build: () => build(state),
+    clearFilters: () => {
+      dispatch({
+        type: "clear_filter",
+        payload: undefined,
+      });
+      return builder;
+    },
+    includes: (includes) => {
+      dispatch({
+        type: "include",
+        payload: includes,
+      });
+      return builder;
+    },
+    sorts: (attribute, direction) => {
+      dispatch({
+        type: "sort",
+        payload: [attribute, direction ?? "asc"],
+      });
+      return builder;
+    },
+  };
+
+  return builder;
+};

package/src/utils/alias.ts

@@ -0,0 +1,11 @@
+import { type GlobalState } from "@/index";
+
+export const usingAlias = <Al, K>(state: GlobalState<Al>, key: K) => {
+  return (state.aliases[key as unknown as keyof Al] as string) ?? key;
+};
+
+
+export type Alias<Prop> = {
+  [key in keyof Prop]: Prop[key] extends string ? string : never;
+};
+

package/src/utils/build.ts

@@ -0,0 +1,31 @@
+import  { type GlobalState } from "@/utils/state";
+
+
+export const build = <T>(state: GlobalState<T>): string => {
+  const filters = state.filters.reduce(
+    (acc, filter) => ({
+      ...acc,
+      [`filters[${filter.attribute}]`]: filter.value.join(","),
+    }),
+    {},
+  );
+
+  const sorts = state.sorts.reduce((acc, sort) => {
+    const [attribute, dir] = sort;
+    const direction = dir === "desc" ? "-" : "";
+    acc.push(`${direction}${attribute}`);
+    return acc;
+  }, [] as string[]);
+
+  const urlSearchParams = new URLSearchParams({
+    ...filters,
+  });
+
+  if (sorts.length > 0) {
+    urlSearchParams.append("sort", sorts.join(","));
+  }
+
+  const searchParamsString = urlSearchParams.toString();
+
+  return searchParamsString ? "?" + urlSearchParams.toString() : "";
+};

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from "@/utils/state";
+export * from "@/utils/alias";
+export * from "@/utils/build";

package/src/utils/state.ts

@@ -0,0 +1,8 @@
+import { type Alias, type Filter, type Includes, type Sorts } from "@/index";
+
+export interface GlobalState<Al> {
+  aliases: Alias<Al>;
+  filters: Filter[];
+  includes: Includes;
+  sorts: Sorts;
+}

package/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": "./src",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": [
+      "esnext"
+    ],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "noUncheckedIndexedAccess": true,
+    "paths": {
+      "@/*": [
+        "*"
+      ]
+    },
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ESNext"
+  },
+  "include": [
+    "./src/**/*",
+    ".eslintrc.cjs",
+    "./prettier.config.cjs",
+    "./index.ts"
+  ]
+}