@povio/ui 0.0.10 → 2.1.0

package/dist/hooks/useFilters.js

@@ -1,107 +1,160 @@
-import { useState, useEffect } from "react";
-import { UIRouter } from "../config/router.context.js";
-const serializeFiltersToQuery = (filterData, prefix) => {
+import { useNavigate, useLocation } from "@tanstack/react-router";
+import { useMemo, useRef, useState, useEffect } from "react";
+import { z } from "zod";
+function getFieldType(schema, fieldKey) {
+  if (!schema || !schema.shape) return "unknown";
+  let fieldSchema = schema.shape[fieldKey];
+  while (fieldSchema) {
+    if (fieldSchema instanceof z.ZodOptional || fieldSchema instanceof z.ZodNullable) {
+      fieldSchema = fieldSchema.unwrap();
+    } else {
+      break;
+    }
+  }
+  if (!fieldSchema) return "unknown";
+  if (fieldSchema instanceof z.ZodNumber) return "number";
+  if (fieldSchema instanceof z.ZodBoolean) return "boolean";
+  if (fieldSchema instanceof z.ZodString) return "string";
+  return "unknown";
+}
+function serializeFiltersToQuery(filterData, prefix) {
   const query = {};
   for (const [key, value] of Object.entries(filterData)) {
     if (value === null || value === void 0) {
       continue;
     }
-    const filterKey = `filter[${prefix && `${prefix}-`}${key}]`;
     if (Array.isArray(value) || typeof value === "object") {
-      query[filterKey] = JSON.stringify(value);
+      query[`filter[${prefix && `${prefix}-`}${key}]`] = JSON.stringify(value);
     } else if (typeof value === "boolean") {
-      query[filterKey] = value ? "true" : "false";
+      query[`filter[${prefix && `${prefix}-`}${key}]`] = value ? "true" : "false";
+    } else if (typeof value === "number") {
+      query[`filter[${prefix && `${prefix}-`}${key}]`] = value.toString();
     } else {
-      query[filterKey] = value;
+      query[`filter[${prefix && `${prefix}-`}${key}]`] = value;
     }
   }
   return query;
-};
-const parseFilterFromQuery = (query) => {
+}
+function parseFilterFromQuery(query, schema) {
   const filter = {};
   for (const [key, value] of Object.entries(query)) {
-    const match = /^filter\[(.+?)\]$/.exec(key);
-    if (!match) {
-      continue;
-    }
-    const filterKey = match[1];
-    const isArray = value.startsWith("[") && value.endsWith("]");
-    const isObject = value.startsWith("{") && value.endsWith("}");
-    const isNumber = !Number.isNaN(Number(value)) && value !== "";
-    const isBoolean = ["true", "false"].includes(value);
-    if (isArray || isObject || isNumber) {
-      filter[filterKey] = JSON.parse(value);
-    } else if (isBoolean) {
-      filter[filterKey] = value === "true";
-    } else {
-      filter[filterKey] = value;
+    const match = key.match(/^filter\[(.+?)\]$/);
+    if (match) {
+      const filterKey = match[1];
+      const baseKey = filterKey.includes("-") ? filterKey.split("-").pop() || filterKey : filterKey;
+      if (value.startsWith("[") && value.endsWith("]") || value.startsWith("{") && value.endsWith("}")) {
+        filter[filterKey] = JSON.parse(value);
+      } else if (["true", "false"].includes(value)) {
+        filter[filterKey] = value === "true";
+      } else {
+        const expectedType = getFieldType(schema, baseKey);
+        if (expectedType === "number" && !Number.isNaN(Number(value)) && value !== "" && value !== null) {
+          filter[filterKey] = Number(value);
+        } else if (expectedType === "boolean" && ["true", "false"].includes(value)) {
+          filter[filterKey] = value === "true";
+        } else {
+          filter[filterKey] = value;
+        }
+      }
     }
   }
   return filter;
-};
-const useFilters = (defaultFilterValues, prefix = "") => {
-  const { query, pathname, replace } = UIRouter.useUIRouter();
-  const queryFilters = parseFilterFromQuery(query);
+}
+function useFilters(defaultFilterValues, prefix = "", schema) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const queryObject = useMemo(
+    () => Object.fromEntries(new URLSearchParams(location.searchStr || "").entries()),
+    [location.searchStr]
+  );
+  const hasAppliedDefaultsRef = useRef(false);
+  const lastPathnameRef = useRef(location.pathname);
+  const queryFilters = parseFilterFromQuery(queryObject, schema);
   const [filterData, setFilterData] = useState(queryFilters);
   useEffect(() => {
-    const setUrlToDefaultFilters = () => {
+    if (lastPathnameRef.current !== location.pathname) {
+      hasAppliedDefaultsRef.current = false;
+      lastPathnameRef.current = location.pathname;
+    }
+  }, [location.pathname]);
+  useEffect(() => {
+    const currentQueryObject = Object.fromEntries(new URLSearchParams(location.searchStr || "").entries());
+    const currentFilters = parseFilterFromQuery(currentQueryObject, schema);
+    const shouldApplyDefaults = defaultFilterValues && Object.keys(currentFilters).length === 0 && !hasAppliedDefaultsRef.current;
+    if (shouldApplyDefaults) {
       const flatFilterQuery = serializeFiltersToQuery(defaultFilterValues, prefix);
-      replace({
-        pathname,
-        query: {
-          ...query,
-          ...flatFilterQuery
+      const sp = new URLSearchParams(location.searchStr || "");
+      let needsNavigation = false;
+      Object.entries(flatFilterQuery).forEach(([k, v]) => {
+        const currentValue = sp.get(k);
+        if (Array.isArray(v)) {
+          const currentValues = sp.getAll(k);
+          if (JSON.stringify(currentValues.sort()) !== JSON.stringify(v.sort())) {
+            needsNavigation = true;
+          }
+        } else {
+          if (currentValue !== v) {
+            needsNavigation = true;
+          }
         }
       });
-    };
-    const currentFilters = parseFilterFromQuery(query);
-    const hasFiltersSet = Object.keys(currentFilters).length > 0;
-    if (defaultFilterValues && !hasFiltersSet) {
-      setUrlToDefaultFilters();
+      if (needsNavigation) {
+        Object.entries(flatFilterQuery).forEach(([k, v]) => {
+          sp.delete(k);
+          if (Array.isArray(v)) {
+            v.forEach((val) => sp.append(k, val));
+          } else {
+            sp.set(k, v);
+          }
+        });
+        const to = `${location.pathname}${sp.toString() ? `?${sp.toString()}` : ""}`;
+        navigate({ to, replace: true });
+      }
+      hasAppliedDefaultsRef.current = true;
     }
-  }, [defaultFilterValues, prefix]);
+  }, [defaultFilterValues, prefix, location.pathname, location.searchStr]);
   useEffect(() => {
-    const newQueryFilters = parseFilterFromQuery(query);
+    const newQueryFilters = parseFilterFromQuery(queryObject, schema);
     setFilterData(newQueryFilters);
-  }, [query]);
+  }, [queryObject, schema]);
   const setFilterValue = (data) => {
-    let newFilters = { ...filterData };
+    const next = { ...filterData };
     const isReset = Object.keys(data).length === 0;
     const isResetToDefault = data === defaultFilterValues;
     if (isResetToDefault) {
-      newFilters = {
-        ...defaultFilterValues
-      };
-    } else if (isReset) {
-      newFilters = {};
-    } else {
+      Object.keys(next).forEach((key) => delete next[key]);
+      Object.entries(defaultFilterValues ?? {}).forEach(([key, value]) => {
+        next[key] = value;
+      });
+    } else if (!isReset) {
       Object.entries(data).forEach(([key, value]) => {
         if (value === void 0) {
-          delete newFilters[key];
+          delete next[key];
         } else {
-          newFilters[key] = value;
+          next[key] = value;
         }
       });
+    } else {
+      Object.keys(next).forEach((key) => delete next[key]);
     }
-    const prefixPart = prefix ? `${prefix}-` : "";
-    const cleanedQuery = Object.keys(query).reduce(
-      (acc, k) => {
-        if (!k.startsWith(`filter[${prefixPart}`)) {
-          acc[k] = query[k];
-        }
-        return acc;
-      },
-      {}
-    );
-    const flatFilterQuery = serializeFiltersToQuery(newFilters, prefix);
-    replace({
-      pathname,
-      query: {
-        ...cleanedQuery,
-        ...flatFilterQuery
+    const sp = new URLSearchParams(location.searchStr || "");
+    Array.from(sp.keys()).forEach((key) => {
+      if (key.startsWith(`filter[${prefix && `${prefix}-`}`)) {
+        sp.delete(key);
       }
     });
-    setFilterData(newFilters);
+    const flatFilterQuery = serializeFiltersToQuery(next, prefix);
+    Object.entries(flatFilterQuery).forEach(([k, v]) => {
+      sp.delete(k);
+      if (Array.isArray(v)) {
+        v.forEach((val) => sp.append(k, val));
+      } else {
+        sp.set(k, v);
+      }
+    });
+    const to = `${location.pathname}${sp.toString() ? `?${sp.toString()}` : ""}`;
+    navigate({ to, replace: true });
+    setFilterData(next);
   };
   const getFilterValue = (keys) => {
     const result = {};
@@ -114,7 +167,8 @@ const useFilters = (defaultFilterValues, prefix = "") => {
     setFilterValue(defaultFilterValues ?? {});
   };
   return { filterData, setFilterValue, getFilterValue, clearAllFilters };
-};
+}
 export {
+  parseFilterFromQuery,
   useFilters
 };

package/dist/index.d.ts

@@ -69,6 +69,7 @@ export type { FileUploadContainerProps } from './components/inputs/File/FileUplo
 export { FileUploadContainer } from './components/inputs/File/FileUploadContainer';
 export type { InputUploadProps } from './components/inputs/File/InputUpload';
 export { InputUpload } from './components/inputs/File/InputUpload';
+export { ProgressBar } from './components/inputs/File/shared/ProgressBar';
 export type { FormFieldProps } from './components/inputs/FormField/FormField';
 export { FormField } from './components/inputs/FormField/FormField';
 export type { ControlledNumberInputProps, NumberInputProps } from './components/inputs/Input/NumberInput/NumberInput';
@@ -143,7 +144,7 @@ export { PaginatedTable } from './components/table/PaginatedTable';
 export type { TableProps, TableWrapperProps } from './components/table/Table';
 export { Table } from './components/table/Table';
 export type { TableRowVariantProps } from './components/table/table.cva';
-export type { LinkProps } from './components/text/Link/Link';
+export type { LinkNavigationProps, LinkProps } from './components/text/Link/Link';
 export { Link } from './components/text/Link/Link';
 export type { LinkVariantProps } from './components/text/Link/link.cva';
 export type { TagProps } from './components/text/Tag/Tag';
@@ -154,6 +155,7 @@ export { Typography } from './components/text/Typography/Typography';
 export type { TypographyVariantProps } from './components/text/Typography/typography.cva';
 export { Confirmation } from './config/confirmation.context';
 export { ns, resources } from './config/i18n';
+export { LinkContext } from './config/link.context';
 export { UIRouter } from './config/router.context';
 export { UIConfig } from './config/uiConfig.context';
 export { UIStyle } from './config/uiStyle.context';
@@ -200,11 +202,8 @@ export { createAclGuard } from './utils/vendor/acl/AclGuard';
 export { AbilityContext } from './utils/vendor/acl/ability.context';
 export type { AppAbilities, AppAbility } from './utils/vendor/acl/appAbility.types';
 export { Can } from './utils/vendor/acl/Can';
-export type { AuthGuardProps } from './utils/vendor/auth/AuthGuard';
 export { AuthGuard } from './utils/vendor/auth/AuthGuard';
 export { AuthContext } from './utils/vendor/auth/auth.context';
-export type { WithPrivateAuthGuardProps } from './utils/vendor/auth/withPrivateAuthGuard';
-export { withPrivateAuthGuard } from './utils/vendor/auth/withPrivateAuthGuard';
 export type { GeneralErrorCodes } from './utils/vendor/error-handling';
 export { ApplicationException, ErrorHandler, SharedErrorHandler } from './utils/vendor/error-handling';
 export type { RequestConfig, RequestInfo, Response, RestClient as IRestClient, } from './utils/vendor/rest-client.types';

package/dist/index.js

@@ -51,6 +51,7 @@ import { TimePicker } from "./components/inputs/DateTime/TimePicker/TimePicker.j
 import { FileUpload } from "./components/inputs/File/FileUpload.js";
 import { FileUploadContainer } from "./components/inputs/File/FileUploadContainer.js";
 import { InputUpload } from "./components/inputs/File/InputUpload.js";
+import { ProgressBar } from "./components/inputs/File/shared/ProgressBar.js";
 import { FormField } from "./components/inputs/FormField/FormField.js";
 import { NumberInput } from "./components/inputs/Input/NumberInput/NumberInput.js";
 import { PasswordInput } from "./components/inputs/Input/PasswordInput/PasswordInput.js";
@@ -93,6 +94,7 @@ import { Tag } from "./components/text/Tag/Tag.js";
 import { Typography } from "./components/text/Typography/Typography.js";
 import { Confirmation } from "./config/confirmation.context.js";
 import { ns, resources } from "./config/i18n.js";
+import { LinkContext } from "./config/link.context.js";
 import { UIRouter } from "./config/router.context.js";
 import { UIConfig } from "./config/uiConfig.context.js";
 import { UIStyle } from "./config/uiStyle.context.js";
@@ -133,7 +135,6 @@ import { AbilityContext } from "./utils/vendor/acl/ability.context.js";
 import { Can } from "./utils/vendor/acl/Can.js";
 import { AuthGuard } from "./utils/vendor/auth/AuthGuard.js";
 import { AuthContext } from "./utils/vendor/auth/auth.context.js";
-import { withPrivateAuthGuard } from "./utils/vendor/auth/withPrivateAuthGuard.js";
 import { ApplicationException, ErrorHandler, SharedErrorHandler } from "./utils/vendor/error-handling.js";
 import { RestInterceptor } from "./utils/vendor/rest-interceptor.js";
 export {
@@ -199,6 +200,7 @@ export {
   Inputs,
   ItalicIcon,
   Link,
+  LinkContext,
   LinkIcon,
   Loader,
   Menu,
@@ -215,6 +217,7 @@ export {
   PillButton,
   PointerHorizontalIcon,
   PointerVerticalIcon,
+  ProgressBar,
   QueriesUtils,
   QueryAutocomplete,
   RadioGroup,
@@ -279,6 +282,5 @@ export {
   useTableColumnConfig,
   useTableNav,
   useToast,
-  useTranslationMemo,
-  withPrivateAuthGuard
+  useTranslationMemo
 };

package/dist/utils/vendor/acl/AclGuard.d.ts

@@ -1,8 +1,8 @@
-import { WithPrivateAuthGuardProps } from '../auth/withPrivateAuthGuard';
+import { PropsWithChildren } from 'react';
 import { AppAbilities } from './appAbility.types';
-export declare const createAclGuard: <TAppAbilities extends AppAbilities = AppAbilities>() => ({ privateAuthGuardProps, ...props }: {
+interface AclGuardProps<TAppAbilities extends AppAbilities = AppAbilities> {
     canUse: TAppAbilities;
     redirectTo?: string;
-} & {
-    children?: import('react').ReactNode | undefined;
-} & WithPrivateAuthGuardProps) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const createAclGuard: <TAppAbilities extends AppAbilities = AppAbilities>() => ({ canUse, redirectTo, children }: PropsWithChildren<AclGuardProps<TAppAbilities>>) => import('react').ReactNode;
+export {};

package/dist/utils/vendor/acl/AclGuard.js

@@ -1,7 +1,6 @@
 import { UIRouter } from "../../../config/router.context.js";
 import { AbilityContext } from "./ability.context.js";
-import { withPrivateAuthGuard } from "../auth/withPrivateAuthGuard.js";
-const createAclGuard = () => withPrivateAuthGuard(({ canUse, redirectTo = "/", children }) => {
+const createAclGuard = () => ({ canUse, redirectTo = "/", children }) => {
   const ability = AbilityContext.useAbility();
   const { replace } = UIRouter.useUIRouter();
   if (!ability.can(canUse[0], canUse[1])) {
@@ -9,7 +8,7 @@ const createAclGuard = () => withPrivateAuthGuard(({ canUse, redirectTo = "/", c
     return null;
   }
   return children;
-});
+};
 export {
   createAclGuard
 };

package/dist/utils/vendor/auth/auth.context.d.ts

@@ -11,11 +11,12 @@ export declare namespace AuthContext {
         updateTokens?: (accessToken: string | null, refreshToken?: string | null) => void;
         accessToken?: string | null;
         user?: TUser | null;
+        userPromise?: () => Promise<TUser | null>;
         routes?: Routes;
         loadingState?: ReactNode;
     }
     type ProviderProps<TUser = unknown> = Type<TUser>;
-    export const Provider: <TUser = unknown>({ isAuthenticated, isInitializing, logout, updateTokens, accessToken, user, routes, loadingState, children, }: PropsWithChildren<ProviderProps<TUser>>) => import("react/jsx-runtime").JSX.Element;
+    export const Provider: <TUser = unknown>({ isAuthenticated, isInitializing, logout, updateTokens, accessToken, user, userPromise, routes, loadingState, children, }: PropsWithChildren<ProviderProps<TUser>>) => import("react/jsx-runtime").JSX.Element;
     export const useAuth: <TUser = unknown>() => Type<TUser>;
     export {};
 }

package/dist/utils/vendor/auth/auth.context.js

@@ -10,6 +10,7 @@ var AuthContext;
     updateTokens,
     accessToken,
     user,
+    userPromise,
     routes,
     loadingState,
     children
@@ -21,6 +22,7 @@ var AuthContext;
       updateTokens,
       accessToken,
       user,
+      userPromise,
       routes,
       loadingState
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "0.0.10",
+  "version": "2.1.0",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/components/inputs/File/shared/FileProgressBar.d.ts

@@ -1,3 +0,0 @@
-export declare const FileProgressBar: ({ progress }: {
-    progress?: number;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/File/shared/FileProgressBar.js

@@ -1,32 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Typography } from "../../../text/Typography/Typography.js";
-const FileProgressBar = ({ progress = 0 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-center gap-file-upload-content-gap-progress-actions", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex flex-fill flex-col items-start gap-2 py-progress-height-height", children: /* @__PURE__ */ jsxs("div", { className: "relative h-1 w-full", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-1 w-full flex-shrink-0 rounded-xs bg-input-filled-idle" }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "absolute top-0 left-0 h-1 flex-shrink-0 rounded-xs bg-interactive-contained-primary-idle transition-all duration-300",
-          style: { width: `${progress}%` }
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxs(
-      Typography,
-      {
-        variant: "default",
-        size: "label-2",
-        as: "span",
-        className: "text-center text-text-default-1",
-        children: [
-          progress,
-          "%"
-        ]
-      }
-    )
-  ] });
-};
-export {
-  FileProgressBar
-};

package/dist/utils/vendor/auth/withPrivateAuthGuard.d.ts

@@ -1,6 +0,0 @@
-import { ComponentType, PropsWithChildren } from 'react';
-import { AuthGuardProps } from './AuthGuard';
-export interface WithPrivateAuthGuardProps {
-    privateAuthGuardProps?: Omit<AuthGuardProps, "type">;
-}
-export declare const withPrivateAuthGuard: <T extends PropsWithChildren & WithPrivateAuthGuardProps>(WrappedComponent: ComponentType<T & WithPrivateAuthGuardProps>) => ({ privateAuthGuardProps, ...props }: T & WithPrivateAuthGuardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/utils/vendor/auth/withPrivateAuthGuard.js

@@ -1,17 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { AuthGuard } from "./AuthGuard.js";
-const withPrivateAuthGuard = (WrappedComponent) => {
-  return ({ privateAuthGuardProps, ...props }) => {
-    return /* @__PURE__ */ jsx(
-      AuthGuard,
-      {
-        type: "private",
-        ...privateAuthGuardProps,
-        children: /* @__PURE__ */ jsx(WrappedComponent, { ...props })
-      }
-    );
-  };
-};
-export {
-  withPrivateAuthGuard
-};