lkd-web-kit 0.3.19 → 0.3.21

package/dist/index.cjs

@@ -54,6 +54,8 @@ 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');
 
 
 
@@ -115,3 +117,6 @@ 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

@@ -72,6 +72,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 +93,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[];
@@ -373,6 +387,12 @@ export declare interface NavItemsProps {
 
 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>;
 
 export declare const numberToTimeInput: (number: number) => string;
@@ -403,8 +423,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 +437,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 +447,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'> {

package/dist/index.js

@@ -50,3 +50,5 @@ 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/newHref.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const queryString = require('query-string');
+const qs = require('qs');
 
 const newHref = (fn) => (args) => {
   const href = typeof fn === "string" ? fn : fn(
@@ -12,11 +12,10 @@ const newHref = (fn) => (args) => {
     }
   );
   if (args?.searchParams) {
-    const qs = queryString.stringify(args.searchParams, {
-      skipEmptyString: true,
-      skipNull: true
+    const stringify = qs.stringify(args.searchParams, {
+      skipNulls: true
     });
-    return `${href}${qs ? `?${qs}` : ""}`;
+    return `${href}${stringify ? `?${stringify}` : ""}`;
   }
   return href;
 };

package/dist/utils/newHref.js

@@ -1,4 +1,4 @@
-import queryString from 'query-string';
+import qs from 'qs';
 
 const newHref = (fn) => (args) => {
   const href = typeof fn === "string" ? fn : fn(
@@ -8,11 +8,10 @@ const newHref = (fn) => (args) => {
     }
   );
   if (args?.searchParams) {
-    const qs = queryString.stringify(args.searchParams, {
-      skipEmptyString: true,
-      skipNull: true
+    const stringify = qs.stringify(args.searchParams, {
+      skipNulls: true
     });
-    return `${href}${qs ? `?${qs}` : ""}`;
+    return `${href}${stringify ? `?${stringify}` : ""}`;
   }
   return href;
 };

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.19",
+  "version": "0.3.21",
   "description": "A template for creating React component libraries with Vite.",
   "author": "LKD",
   "license": "MIT",
@@ -32,6 +32,7 @@
     "@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",
@@ -61,7 +62,7 @@
     "clsx": "^2.1.1",
     "ky": "^1.8.1",
     "next": "^15.3.3",
-    "query-string": "^9.2.1",
+    "qs": "^6.14.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.58.1",