@homecode/ui 4.18.23 → 4.18.27

package/dist/esm/src/components/Router/Router.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useContext, useEffect, useMemo } from 'react';
-import { withStore } from 'justorm/react';
+import { useStore } from 'justorm/dist/esm/src/plugins/react';
 import STORE from './store.js';
 import Context from './context.js';
 import { parsePath, replaceParamsInPath } from './Router.helpers.js';
@@ -8,15 +8,14 @@ export { Route } from './Route.js';
 export { Redirect } from './Redirect.js';
 export { Link } from './Link/Link.js';
 
-const Router = withStore({
-    router: ['path'],
-})((props) => {
-    const { children, single, basePath = '', store: { router }, } = props;
+const Router = (props) => {
+    const { router } = useStore({ router: ['path'] });
+    const { children, single, basePath = '' } = props;
     const ctx = useContext(Context);
     const fullPath = ctx.basePath + basePath;
     useEffect(() => {
         const onPopState = () => {
-            STORE.go(window.location.pathname, { replace: true });
+            STORE.go(window.location.pathname, {}, { replace: true });
         };
         window.addEventListener('popstate', onPopState);
         return () => window.removeEventListener('popstate', onPopState);
@@ -60,7 +59,7 @@ const Router = withStore({
         return childs;
     }, [children, router.path, fullPath, single]);
     return jsx(Fragment, { children: matchedRoutes });
-});
+};
 Router.displayName = 'Router';
 const RouterStore = STORE;
 const RouterContext = Context;

package/dist/esm/src/components/Router/store.js

@@ -1,6 +1,6 @@
 import { createStore } from 'justorm/react';
 import { addUniq, spliceWhere } from '../../tools/array.js';
-import { parseQueryParams } from '../../tools/queryParams.js';
+import { parseQueryParams, applyQueryParams } from '../../tools/queryParams.js';
 import { isBrowser } from '../../tools/env.js';
 import 'nanoid';
 import '../../tools/dom.js';
@@ -20,19 +20,23 @@ const STORE = createStore('router', {
     un(cb) {
         spliceWhere(LISTENERS, cb);
     },
-    go(path, { replace } = {}) {
+    go(path, query, params = {}) {
         if (path === this.path)
             return;
-        history[replace ? 'replaceState' : 'pushState']({}, '', path);
-        onRouteChange(path);
+        const { replace } = params;
+        const pathStr = applyQueryParams(path ?? this.path, query, this.query);
+        const action = replace ? 'replaceState' : 'pushState';
+        console.log('Router.go', query, pathStr);
+        history[action]({}, '', pathStr);
+        onRouteChange(pathStr);
     },
     back() {
         history.back();
         onRouteChange();
     },
-    replaceState(href, { quiet } = {}) {
+    replaceState(href, params = {}) {
         history.replaceState({}, '', href);
-        if (!quiet)
+        if (!params.quiet)
             onRouteChange(href);
     },
 });

package/dist/esm/src/components/Tabs/Tabs.js

@@ -5,11 +5,9 @@ import { Button } from '../Button/Button.js';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
 import S from './Tabs.styl.js';
 
-function isId(id) {
-    return ['string', 'number'].includes(typeof id);
-}
+const isId = id => ['string', 'number'].includes(typeof id);
 function Tabs(props) {
-    const { size = 'm', className, contentClassName, items, hideTabsIfSingle = true, onChange, renderAll, activeId: initialId, children, ...rest } = props;
+    const { size = 'm', className, contentClassName, items, hideTabsIfSingle = false, onChange, renderAll, activeId: initialId, children, ...rest } = props;
     const [activeId, setActiveId] = useState(isId(initialId) ? initialId : items[0].id);
     useEffect(() => {
         if (isId(initialId)) {
@@ -26,18 +24,16 @@ function Tabs(props) {
         onChange?.(id);
     }, []);
     const tabsContent = [];
-    const tabsButtons = items.length === 1 && hideTabsIfSingle
-        ? []
-        : items.map((params) => {
-            const { id, label, forceRender, content, contentClassName: currContentClassName, ...rest } = params;
-            const isActive = activeId === id;
-            const tabContent = typeof content === 'function' ? content() : content;
-            if (renderAll || forceRender || isActive) {
-                tabsContent.push(jsx("div", { className: cn(contentClassName, currContentClassName, !isActive && S.inactive), children: tabContent }, id));
-            }
-            return (createElement(Button, { ...rest, size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
-        });
-    const tabs = (jsx(ButtonGroup, { className: className, ...rest, children: tabsButtons }));
+    const tabsButtons = items.map((params) => {
+        const { id, label, forceRender, content, contentClassName: currContentClassName, ...rest } = params;
+        const isActive = activeId === id;
+        const tabContent = typeof content === 'function' ? content() : content;
+        if (renderAll || forceRender || isActive) {
+            tabsContent.push(jsx("div", { className: cn(contentClassName, currContentClassName, !isActive && S.inactive), children: tabContent }, id));
+        }
+        return (createElement(Button, { ...rest, size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
+    });
+    const tabs = tabsButtons.length === 1 && hideTabsIfSingle ? null : (jsx(ButtonGroup, { className: className, ...rest, children: tabsButtons }));
     if (typeof children === 'function') {
         return children({
             tabs,

package/dist/esm/src/tools/queryParams.js

@@ -10,6 +10,31 @@ function parseQueryParams(qs) {
         return acc;
     }, {});
 }
+function stringifyQueryParams(params) {
+    return Object.entries(params)
+        .map(([key, value]) => `${key}=${value}`)
+        .join('&');
+}
+function applyQueryParams(path, queryParams, currParams) {
+    if (!queryParams) {
+        if (Object.keys(currParams).length === 0)
+            return path;
+        return `${path}?${stringifyQueryParams(currParams)}`;
+    }
+    if (typeof queryParams === 'string') {
+        return queryParams;
+    }
+    const query = { ...currParams };
+    Object.entries(queryParams).forEach(([key, value]) => {
+        if (value === false)
+            delete query[key];
+        else
+            query[key] = value;
+    });
+    if (Object.keys(query).length === 0)
+        return path;
+    return `${path}?${stringifyQueryParams(query)}`;
+}
 const setSSRQueryParams = (params) => {
     Object.assign(SSRQueryParams, params);
 };
@@ -17,4 +42,4 @@ const queryParams = isBrowser
     ? parseQueryParams()
     : SSRQueryParams;
 
-export { parseQueryParams, queryParams, setSSRQueryParams };
+export { applyQueryParams, parseQueryParams, queryParams, setSSRQueryParams, stringifyQueryParams };

package/dist/esm/types/src/components/Router/Router.d.ts

@@ -1,7 +1,13 @@
 /// <reference types="react" />
-export declare const Router: any;
+import STORE from './store';
+import * as T from './Router.types';
+export declare const Router: {
+    (props: T.Props): JSX.Element;
+    displayName: string;
+};
 export * from './Route';
 export * from './Redirect';
 export * from './Link/Link';
 export declare const RouterStore: any;
 export declare const RouterContext: import("react").Context<import("./context").ContextType>;
+export type RouterStore = typeof STORE;

package/dist/esm/types/src/tools/queryParams.d.ts

@@ -1,3 +1,5 @@
 export declare function parseQueryParams(qs?: string): Record<string, string>;
+export declare function stringifyQueryParams(params: Record<string, string>): string;
+export declare function applyQueryParams(path: any, queryParams: any, currParams: any): any;
 export declare const setSSRQueryParams: (params: any) => void;
 export declare const queryParams: Record<string, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.18.23",
+  "version": "4.18.27",
   "description": "React UI components library",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -48,7 +48,7 @@
     "fastest-validator": "^1.16.0",
     "favicons": "^7.1.3",
     "favicons-webpack-plugin": "^6.0.0",
-    "justorm": "^2.1.3",
+    "justorm": "^3.0.0-beta-8",
     "lodash.omit": "^4.5.0",
     "lodash.pick": "^4.4.0",
     "moment": "^2.29.4",