lkd-web-kit 0.3.20 → 0.4.0

package/dist/index.cjs

@@ -52,8 +52,9 @@ const addBodyJsonHook = require('./utils/ky/addBodyJsonHook.cjs');
 const parseJson = require('./utils/ky/parseJson.cjs');
 const groupBy = require('./utils/array/groupBy.cjs');
 const shuffleArray = require('./utils/array/shuffleArray.cjs');
-const newHref = require('./utils/newHref.cjs');
 const isInfinityEmpty = require('./utils/isInfinityEmpty.cjs');
+const queryStringify = require('./utils/query-stringify.cjs');
+const newRoute = require('./utils/new-route.cjs');
 
 
 
@@ -113,5 +114,7 @@ exports.parseJSON = parseJson.parseJSON;
 exports.groupBy = groupBy.groupBy;
 exports.indexBy = groupBy.indexBy;
 exports.shuffleArray = shuffleArray.shuffleArray;
-exports.newHref = newHref.newHref;
 exports.isInfinityEmpty = isInfinityEmpty.isInfinityEmpty;
+exports.queryStringify = queryStringify.queryStringify;
+exports.createNewRoute = newRoute.createNewRoute;
+exports.newRoute = newRoute.newRoute;

package/dist/index.d.ts

@@ -56,13 +56,6 @@ export declare interface ApiPagination<T> {
     data: T[];
 }
 
-export declare type Args<T, S> = {
-    params?: T;
-    searchParams?: S & {
-        [QP_BACK_URL_NAME]?: string;
-    };
-};
-
 export declare const breakpointsWithPx: {
     xs: string;
     sm: string;
@@ -72,6 +65,14 @@ export declare const breakpointsWithPx: {
     "2xl": string;
 };
 
+export declare function createNewRoute<GlobalQuery extends object = {}>(config?: {
+    queryBuilder?: (query: GlobalQuery) => string;
+}): {
+    <LocalQuery extends object = {}, Path extends string = string>(path: Path, options?: RouteOptions<LocalQuery, ExtractPathParams<Path>>): (params?: RouteInput<ExtractPathParams<Path>, GlobalQuery & LocalQuery>) => string;
+    <LocalQuery extends object = {}, PathParams extends Params = {}>(path: string, options?: RouteOptions<LocalQuery, PathParams>): (params?: RouteInput<PathParams, GlobalQuery & LocalQuery>) => string;
+    <LocalQuery extends object = {}, PathParams extends Params = {}>(pathBuilder: (params: PathParams) => string, options?: RouteOptions<LocalQuery, PathParams>): (params?: RouteInput<PathParams, GlobalQuery & LocalQuery>) => string;
+};
+
 export declare type DeepPartial<T> = {
     [P in keyof T]?: DeepPartial<T[P]>;
 };
@@ -85,6 +86,12 @@ export declare interface EmptyProps extends ComponentProps<'div'> {
 
 export declare const EmptyState: ({ label, action, icon, className, size, ...props }: EmptyProps) => JSX.Element;
 
+declare type ExtractPathParams<T extends string> = T extends `${string}:${infer Param}/${infer Rest}` ? {
+    [K in Param | keyof ExtractPathParams<`/${Rest}`>]: string | number;
+} : T extends `${string}:${infer Param}` ? {
+    [K in Param]: string | number;
+} : {};
+
 export declare type FetchNextPageOnScrollOptions = {
     infinity: InfiniteQueryHookResult<InfiniteData<{
         data: unknown[];
@@ -371,7 +378,11 @@ export declare interface NavItemsProps {
     activeStrategy?: 'equals' | 'includes';
 }
 
-export declare const newHref: <T extends TParams, S extends TSearchParams = TSearchParams>(fn: string | ((args: Args<T, S>) => string)) => (args?: Args<T, S>) => string;
+export declare const newRoute: {
+    <LocalQuery extends object = {}, Path extends string = string>(path: Path, options?: RouteOptions<LocalQuery, ExtractPathParams<Path>> | undefined): (params?: RouteInput<ExtractPathParams<Path>, LocalQuery> | undefined) => string;
+    <LocalQuery extends object = {}, PathParams extends Params = {}>(path: string, options?: RouteOptions<LocalQuery, PathParams> | undefined): (params?: RouteInput<PathParams, LocalQuery> | undefined) => string;
+    <LocalQuery extends object = {}, PathParams extends Params = {}>(pathBuilder: (params: PathParams) => string, options?: RouteOptions<LocalQuery, PathParams> | undefined): (params?: RouteInput<PathParams, LocalQuery> | undefined) => string;
+};
 
 export declare const nullableButRequired: <T extends ZodTypeAny>(schema: T, message?: string) => z.ZodEffects<z.ZodNullable<T>, T["_output"] | null, T["_input"] | null>;
 
@@ -403,8 +414,12 @@ export declare interface PageProps {
     }>;
 }
 
+declare type Params = Record<string, Primitive>;
+
 export declare const parseJSON: (response: KyResponse) => Promise<any>;
 
+declare type Primitive = string | number | boolean | undefined;
+
 declare const pxBySize: {
     sm: number;
     md: number;
@@ -413,6 +428,8 @@ declare const pxBySize: {
 
 export declare const QP_BACK_URL_NAME = "backUrl";
 
+export declare const queryStringify: (query?: Record<string, unknown>) => string;
+
 export declare enum Revalidate {
     OneHour = 3600,
     OneDay = 86400,
@@ -421,6 +438,15 @@ export declare enum Revalidate {
     OneYear = 31536000
 }
 
+declare type RouteInput<PathParams extends Params, Query> = PathParams & {
+    query?: Query;
+};
+
+declare type RouteOptions<Query, PathParams> = {
+    queryBuilder?: (query: Query) => string;
+    pathBuilder?: (params: PathParams) => string;
+};
+
 export declare function SelectInfinity({ value, onChange, data, searchValue, onSearchChange, renderOption, onOptionSubmit, nothingFoundMessage, infinity, placeholder, ...props }: SelectInfinityProps): JSX.Element;
 
 export declare interface SelectInfinityProps extends InputBaseProps, ElementProps<'button', keyof InputBaseProps | 'value' | 'onChange'> {
@@ -475,12 +501,6 @@ export declare const timeInputToNumber: (timeInput: string) => number;
 
 export declare const toTailwindColors: (colors: MantineThemeColors) => Record<DefaultMantineColor, Record<MantineColorShade, string>>;
 
-export declare type TParams = Record<string, any> | unknown;
-
-export declare type TSearchParams = {
-    [x: string]: any;
-};
-
 export declare const useBreakpoint: (breakpoint: keyof typeof breakpointsWithPx) => boolean;
 
 export declare const useFetchNextPageOnScroll: ({ infinity, scrollRef, disabled, }: FetchNextPageOnScrollOptions) => void;

package/dist/index.js

@@ -48,5 +48,6 @@ export { addBodyJsonHook } from './utils/ky/addBodyJsonHook.js';
 export { parseJSON } from './utils/ky/parseJson.js';
 export { groupBy, indexBy } from './utils/array/groupBy.js';
 export { shuffleArray } from './utils/array/shuffleArray.js';
-export { newHref } from './utils/newHref.js';
 export { isInfinityEmpty } from './utils/isInfinityEmpty.js';
+export { queryStringify } from './utils/query-stringify.js';
+export { createNewRoute, newRoute } from './utils/new-route.js';

package/dist/utils/new-route.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const queryStringify = require('./query-stringify.cjs');
+
+function buildPathFromTemplate(path, params) {
+  return path.replace(/:([a-zA-Z0-9_]+)/g, (_, key) => {
+    const value = params[key];
+    if (value === void 0) {
+      throw new Error(`Falta el parámetro de ruta: ${key}`);
+    }
+    return encodeURIComponent(String(value));
+  });
+}
+function createNewRoute(config) {
+  const globalQueryBuilder = config?.queryBuilder;
+  function getPathStrategy(arg, options) {
+    if (options?.pathBuilder) {
+      return (params) => options.pathBuilder(params);
+    } else if (typeof arg === "string") {
+      const template = arg;
+      return (params) => buildPathFromTemplate(template, params);
+    } else {
+      const fn = arg;
+      return (params) => fn(params);
+    }
+  }
+  function newRoute2(arg, options) {
+    const pathStrategy = getPathStrategy(arg, options);
+    const queryBuilder = options?.queryBuilder || globalQueryBuilder;
+    const queryStrategy = queryBuilder ? (query) => queryBuilder(query) : queryStringify.queryStringify;
+    return (params = {}) => {
+      const { query = {}, ...pathParams } = params;
+      const path = pathStrategy(pathParams);
+      const queryString = queryStrategy(query);
+      return path + queryString;
+    };
+  }
+  return newRoute2;
+}
+const newRoute = createNewRoute();
+
+exports.createNewRoute = createNewRoute;
+exports.newRoute = newRoute;

package/dist/utils/new-route.js

@@ -0,0 +1,40 @@
+import { queryStringify } from './query-stringify.js';
+
+function buildPathFromTemplate(path, params) {
+  return path.replace(/:([a-zA-Z0-9_]+)/g, (_, key) => {
+    const value = params[key];
+    if (value === void 0) {
+      throw new Error(`Falta el parámetro de ruta: ${key}`);
+    }
+    return encodeURIComponent(String(value));
+  });
+}
+function createNewRoute(config) {
+  const globalQueryBuilder = config?.queryBuilder;
+  function getPathStrategy(arg, options) {
+    if (options?.pathBuilder) {
+      return (params) => options.pathBuilder(params);
+    } else if (typeof arg === "string") {
+      const template = arg;
+      return (params) => buildPathFromTemplate(template, params);
+    } else {
+      const fn = arg;
+      return (params) => fn(params);
+    }
+  }
+  function newRoute2(arg, options) {
+    const pathStrategy = getPathStrategy(arg, options);
+    const queryBuilder = options?.queryBuilder || globalQueryBuilder;
+    const queryStrategy = queryBuilder ? (query) => queryBuilder(query) : queryStringify;
+    return (params = {}) => {
+      const { query = {}, ...pathParams } = params;
+      const path = pathStrategy(pathParams);
+      const queryString = queryStrategy(query);
+      return path + queryString;
+    };
+  }
+  return newRoute2;
+}
+const newRoute = createNewRoute();
+
+export { createNewRoute, newRoute };

package/dist/utils/query-stringify.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const queryStringify = (query = {}) => {
+  const entries = Object.entries(query).filter(([, value]) => value !== void 0 && value !== null).map(([key, value]) => [key, String(value)]);
+  return entries.length ? `?${new URLSearchParams(entries).toString()}` : "";
+};
+
+exports.queryStringify = queryStringify;

package/dist/utils/query-stringify.js

@@ -0,0 +1,6 @@
+const queryStringify = (query = {}) => {
+  const entries = Object.entries(query).filter(([, value]) => value !== void 0 && value !== null).map(([key, value]) => [key, String(value)]);
+  return entries.length ? `?${new URLSearchParams(entries).toString()}` : "";
+};
+
+export { queryStringify };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkd-web-kit",
-  "version": "0.3.20",
+  "version": "0.4.0",
   "description": "A template for creating React component libraries with Vite.",
   "author": "LKD",
   "license": "MIT",
@@ -31,38 +31,36 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^22.15.21",
-    "@types/qs": "^6.14.0",
-    "@types/react": "^19.1.5",
-    "@types/react-dom": "^19.1.5",
-    "@typescript-eslint/eslint-plugin": "^8.32.1",
-    "@typescript-eslint/parser": "^8.32.1",
-    "@vitejs/plugin-react-swc": "^3.9.0",
-    "@vitest/coverage-v8": "^3.1.4",
-    "eslint": "^9.27.0",
+    "@types/node": "^22.15.33",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.35.0",
+    "@typescript-eslint/parser": "^8.35.0",
+    "@vitejs/plugin-react-swc": "^3.10.2",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.29.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "jsdom": "^26.1.0",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.1",
     "rollup-preserve-directives": "^1.1.3",
     "typescript": "^5.8.3",
-    "vite": "^6.3.5",
+    "vite": "^7.0.0",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.1.4"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
-    "@mantine/core": "^8.1.1",
-    "@mantine/dates": "^8.1.1",
-    "@mantine/hooks": "^8.1.1",
-    "@mantine/notifications": "^8.1.1",
-    "@tanstack/react-query": "^5.80.7",
+    "@mantine/core": "^8.1.2",
+    "@mantine/dates": "^8.1.2",
+    "@mantine/hooks": "^8.1.2",
+    "@mantine/notifications": "^8.1.2",
+    "@tanstack/react-query": "^5.81.2",
     "clsx": "^2.1.1",
     "ky": "^1.8.1",
-    "next": "^15.3.3",
-    "qs": "^6.14.0",
+    "next": "^15.3.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.58.1",

package/dist/utils/newHref.cjs

@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const qs = require('qs');
-
-const newHref = (fn) => (args) => {
-  const href = typeof fn === "string" ? fn : fn(
-    args ?? {
-      params: {},
-      searchParams: {}
-    }
-  );
-  if (args?.searchParams) {
-    const stringify = qs.stringify(args.searchParams, {
-      skipNulls: true
-    });
-    return `${href}${stringify ? `?${stringify}` : ""}`;
-  }
-  return href;
-};
-
-exports.newHref = newHref;

package/dist/utils/newHref.js

@@ -1,19 +0,0 @@
-import qs from 'qs';
-
-const newHref = (fn) => (args) => {
-  const href = typeof fn === "string" ? fn : fn(
-    args ?? {
-      params: {},
-      searchParams: {}
-    }
-  );
-  if (args?.searchParams) {
-    const stringify = qs.stringify(args.searchParams, {
-      skipNulls: true
-    });
-    return `${href}${stringify ? `?${stringify}` : ""}`;
-  }
-  return href;
-};
-
-export { newHref };