@alxgrn/telefrag-ui 0.1.3 → 0.1.4

package/README.md

@@ -1,6 +1,8 @@
 # UI-библиотека проекта [The Daily Telefrag](https://dailytelefrag.ru)
 Документация по компонентам [тут](./docs/README.md)
 
+### ВНИМАНИЕ: Для работы `Link` в навигации главного меню пришлось добавить внешнюю зависимость от `react-router`. Это не очень хорошее решение т.к. данная библиотека используется в библиотеках редакторов, которым роутер совсем не нужен, но его приходится прописывать также как внешнюю зависимость. Необходимо будет выделить компонент `Layout` и все связанные с ним компоненты в отдельную библиотеку и избавится от ненужных зависимостей от `react-router`!
+
 Ниже просто мусор для памяти :)
 
 ## Подготовка для публикации библиотеки

package/dist/assets/MainMenu.css

@@ -1 +1 @@
-.MainMenu{margin-top:var(--alxgrn-unit);margin-right:var(--alxgrn-unit-half)}.Sidebar .MainMenu{margin-top:0}.MainMenu .MainMenuAlternative{display:flex;align-items:center;gap:var(--alxgrn-unit-half);cursor:pointer;padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-half)}.MainMenu .MainMenuAlternative:hover{background-color:var(--alxgrn-bg-panel)}.MainMenu .MainMenuAlternative:hover *{color:var(--alxgrn-color-accent)}.MainMenu .MainMenuAlternative svg{color:var(--alxgrn-color-accent);font-size:var(--alxgrn-font-size-big)}.MainMenu .MainMenuAlternative img{width:var(--alxgrn-font-size-big);height:var(--alxgrn-font-size-big);border-radius:50%;flex:0 0 auto}.MainMenu .MainMenuAlternative span{font-size:var(--alxgrn-font-size);overflow-wrap:break-word;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;flex:1 1 auto}.MainMenu .MainMenuAlternative span.MainMenuCheck{display:block;width:var(--alxgrn-unit-half);height:var(--alxgrn-unit-half);border-radius:50%;background-color:var(--alxgrn-color-accent);flex:0 0 auto}.MainMenu .MainMenuNode,.MainMenu .MainMenuTitle{padding:var(--alxgrn-unit-half)}.MainMenu .MainMenuTitle span{text-transform:uppercase;font-size:var(--alxgrn-font-size-small);font-weight:600;color:var(--alxgrn-color-light)}
+.MainMenu{margin-top:var(--alxgrn-unit);margin-right:var(--alxgrn-unit-half)}.Sidebar .MainMenu{margin-top:0}.MainMenu .MainMenuAlternative{padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-half);-webkit-user-select:none;user-select:none}.MainMenu .MainMenuAlternative:hover{background-color:var(--alxgrn-bg-panel)}.MainMenu .MainMenuAlternative:hover *{color:var(--alxgrn-color-accent)}.MainMenu .MainMenuAlternative a{display:flex;align-items:center;gap:var(--alxgrn-unit-half);cursor:pointer;color:var(--alxgrn-color-text)!important;text-decoration:none}.MainMenu .MainMenuAlternative svg{color:var(--alxgrn-color-accent);font-size:var(--alxgrn-font-size-big)}.MainMenu .MainMenuAlternative img{width:var(--alxgrn-font-size-big);height:var(--alxgrn-font-size-big);border-radius:50%;flex:0 0 auto}.MainMenu .MainMenuAlternative .MainMenuAlternativeText{font-size:var(--alxgrn-font-size);overflow-wrap:break-word;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;flex:1 1 auto}.MainMenu .MainMenuAlternative .MainMenuAlternativeCheck{display:block;width:var(--alxgrn-unit-half);height:var(--alxgrn-unit-half);border-radius:50%;background-color:var(--alxgrn-color-accent);flex:0 0 auto}.MainMenu .MainMenuNode,.MainMenu .MainMenuTitle{padding:var(--alxgrn-unit-half)}.MainMenu .MainMenuTitle{text-transform:uppercase;font-size:var(--alxgrn-font-size-small);font-weight:600;color:var(--alxgrn-color-light);overflow-wrap:break-word;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

package/dist/components/form/form/Form.js

@@ -36,9 +36,10 @@ import l from "../../ui/block/Block.js";
 /* empty css                           */
 /* empty css                       */
 /* empty css                         */
+import "react-router";
 /* empty css                        */
 import j from "./traverse.js";
-const De = ({
+const Ee = ({
   info: u,
   error: d,
   success: k,
@@ -163,6 +164,6 @@ const De = ({
   ] });
 };
 export {
-  De as Form,
-  De as default
+  Ee as Form,
+  Ee as default
 };

package/dist/components/form/image/Image.js

@@ -32,8 +32,9 @@ import j from "../../icons/Trash.js";
 /* empty css                           */
 /* empty css                       */
 /* empty css                         */
+import "react-router";
 /* empty css                        */
-const cr = ({
+const gr = ({
   id: u,
   value: o,
   text: l,
@@ -100,6 +101,6 @@ const cr = ({
   ) });
 };
 export {
-  cr as Image,
-  cr as default
+  gr as Image,
+  gr as default
 };

package/dist/components/form/select/Select.js

@@ -31,8 +31,9 @@ import { Menu as E } from "../../ui/menu/Menu.js";
 /* empty css                           */
 /* empty css                       */
 /* empty css                         */
+import "react-router";
 /* empty css                        */
-const cr = ({
+const ur = ({
   id: f,
   value: o,
   onChange: d,
@@ -108,6 +109,6 @@ const cr = ({
   ] });
 };
 export {
-  cr as Select,
-  cr as default
+  ur as Select,
+  ur as default
 };

package/dist/components/form/time/Time.js

@@ -30,10 +30,11 @@ import O from "../../icons/Check.js";
 /* empty css                           */
 /* empty css                       */
 /* empty css                         */
+import "react-router";
 /* empty css                        */
-const hr = ({
+const vr = ({
   id: d,
-  value: m,
+  value: l,
   step: x = 1,
   onChange: o,
   label: g,
@@ -42,13 +43,13 @@ const hr = ({
   required: $ = !1,
   disabled: p = !1
 }) => {
-  const a = k(null), c = k(null), [n, C] = s(""), [l, I] = s(""), [j, w] = s([]), [z, E] = s([]), [S, u] = s(!1), [T, f] = s(!1);
+  const a = k(null), c = k(null), [n, C] = s(""), [m, I] = s(""), [j, w] = s([]), [z, E] = s([]), [S, u] = s(!1), [T, f] = s(!1);
   H(() => {
-    let [r, t] = m.split(":");
+    let [r, t] = l.split(":");
     r = parseInt(r), t = parseInt(t), (isNaN(r) || r < 0 || r > 23) && (r = 0), (isNaN(t) || t < 0 || t > 59) && (t = 0), r = `0${r}`.slice(-2), t = `0${t}`.slice(-2), C(r), I(t);
     const i = `${r}:${t}`;
-    i !== m && o && o(i);
-  }, [m, o]), H(() => {
+    i !== l && o && o(i);
+  }, [l, o]), H(() => {
     const r = [], t = [];
     for (let i = 0; i < 24; i++)
       r.push(`0${i}`.slice(-2));
@@ -56,14 +57,14 @@ const hr = ({
       t.push(`0${i}`.slice(-2));
     w(r), E(t);
   }, [x]);
-  const h = () => !!($ && (!n || !l)), v = () => {
+  const h = () => !!($ && (!n || !m)), v = () => {
     if (h()) return {
       caretColor: "var(--alxgrn-input-border-error)",
       borderColor: "var(--alxgrn-input-border-error)",
       backgroundColor: "var(--alxgrn-input-bg-error)"
     };
   }, F = (r) => {
-    u(!1), o && o(`${r.text ?? ""}:${l}`);
+    u(!1), o && o(`${r.text ?? ""}:${m}`);
   }, L = (r) => {
     f(!1), o && o(`${n}:${r.text ?? ""}`);
   };
@@ -98,7 +99,7 @@ const hr = ({
               id: `${d}-min`,
               ref: c,
               type: "text",
-              value: l,
+              value: m,
               style: v(),
               disabled: !!p,
               onClick: () => f(!0),
@@ -130,7 +131,7 @@ const hr = ({
         onClose: () => f(!1),
         horizontal: "inner-right",
         margin: "var(--alxgrn-unit-small)",
-        items: z.map((r) => ({ id: r, text: r, icon: r === l ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ e("div", { className: "empty" }) })),
+        items: z.map((r) => ({ id: r, text: r, icon: r === m ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ e("div", { className: "empty" }) })),
         onClick: L,
         maxHeight: "auto",
         width: "auto"
@@ -139,5 +140,5 @@ const hr = ({
   ] });
 };
 export {
-  hr as default
+  vr as default
 };

package/dist/components/layout/Content.d.ts

@@ -2,7 +2,6 @@ import { FC, PropsWithChildren } from 'react';
 import { MainMenuItem } from './MainMenu';
 type Props = {
     mainMenu: MainMenuItem[];
-    onMenuClick?: (id: string) => void;
 };
 declare const Content: FC<PropsWithChildren<Props>>;
 export default Content;

package/dist/components/layout/Content.js

@@ -1,10 +1,10 @@
-import { jsxs as a, jsx as n } from "react/jsx-runtime";
-import i from "./MainMenu.js";
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import a from "./MainMenu.js";
 import '../../assets/Content.css';/* empty css                     */
-const c = ({ children: t, mainMenu: e, onMenuClick: s }) => /* @__PURE__ */ a("main", { className: "Content", children: [
-  /* @__PURE__ */ n("div", { className: "ContentMenu", children: /* @__PURE__ */ n(i, { items: e, onMenuClick: s }) }),
+const r = ({ children: t, mainMenu: e }) => /* @__PURE__ */ s("main", { className: "Content", children: [
+  /* @__PURE__ */ n("div", { className: "ContentMenu", children: /* @__PURE__ */ n(a, { items: e }) }),
   /* @__PURE__ */ n("div", { className: "ContentMain", children: t })
 ] });
 export {
-  c as default
+  r as default
 };

package/dist/components/layout/Layout.d.ts

@@ -4,7 +4,6 @@ type Props = {
     mainMenu: MainMenuItem[];
     userMenu: React.ReactNode;
     onLogoClick?: () => void;
-    onMenuClick?: (id: string) => void;
 };
 declare const Layout: FC<PropsWithChildren<Props>>;
 export default Layout;

package/dist/components/layout/Layout.js

@@ -1,7 +1,7 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { useState as n } from "react";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { useState as a } from "react";
 import l from "./Header.js";
-import u from "./Content.js";
+import f from "./Content.js";
 import '../../assets/Expandable.css';import '../../assets/Editable.css';import '../../assets/Toolbar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/Button.css';import '../../assets/Fieldset.css';import '../../assets/RadioLabel.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/TelefragLogo.css';import '../../assets/TelefragSymbol.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';/* empty css                        */
 import "react-transition-group";
 import "react-dom";
@@ -25,35 +25,33 @@ import "react-dom";
 /* empty css                   */
 /* empty css                     */
 /* empty css                    */
-import { Sidebar as d } from "../ui/sidebar/Sidebar.js";
+import { Sidebar as u } from "../ui/sidebar/Sidebar.js";
 /* empty css                     */
 /* empty css                      */
 /* empty css                        */
 import c from "./MainMenu.js";
-const W = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick: t }) => {
-  const [a, r] = n(!1);
-  return /* @__PURE__ */ f("div", { className: "Layout", children: [
+const T = ({ children: r, mainMenu: i, userMenu: m, onLogoClick: p }) => {
+  const [e, t] = a(!1);
+  return /* @__PURE__ */ n("div", { className: "Layout", children: [
     /* @__PURE__ */ o(
       l,
       {
-        userMenu: e,
-        onMenuSwitch: () => r((i) => !i),
-        onLogoClick: s
+        userMenu: m,
+        onMenuSwitch: () => t((s) => !s),
+        onLogoClick: p
       }
     ),
-    /* @__PURE__ */ o(u, { mainMenu: m, onMenuClick: t, children: p }),
+    /* @__PURE__ */ o(f, { mainMenu: i, children: r }),
     /* @__PURE__ */ o(
-      d,
+      u,
       {
-        isOpen: a,
-        onClose: () => r(!1),
+        isOpen: e,
+        onClose: () => t(!1),
         children: /* @__PURE__ */ o(
           c,
           {
-            items: m,
-            onMenuClick: (i) => {
-              r(!1), t && t(i);
-            }
+            items: i,
+            onMenuClick: () => t(!1)
           }
         )
       }
@@ -61,5 +59,5 @@ const W = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick:
   ] });
 };
 export {
-  W as default
+  T as default
 };

package/dist/components/layout/MainMenu.d.ts

@@ -1,24 +1,24 @@
 import { FC, ReactNode } from 'react';
 export type MainMenuTitle = {
-    id?: never;
     text?: never;
     icon?: never;
+    link?: never;
     title: string;
     checked?: never;
     node?: never;
 };
 export type MainMenuAlternative = {
-    id: string;
     text: string;
     icon: ReactNode;
+    link: string;
     title?: never;
     checked?: boolean;
     node?: never;
 };
 export type MainMenuNode = {
-    id?: never;
     text?: never;
     icon?: never;
+    link?: never;
     title?: string;
     checked?: never;
     node: ReactNode;
@@ -26,7 +26,7 @@ export type MainMenuNode = {
 export type MainMenuItem = MainMenuTitle | MainMenuAlternative | MainMenuNode;
 type Props = {
     items: MainMenuItem[];
-    onMenuClick?: (id: string) => void;
+    onMenuClick?: () => void;
 };
 declare const MainMenu: FC<Props>;
 export default MainMenu;

package/dist/components/layout/MainMenu.js

@@ -1,21 +1,17 @@
-import { jsx as e, jsxs as l, Fragment as c } from "react/jsx-runtime";
+import { jsx as n, jsxs as t } from "react/jsx-runtime";
 import '../../assets/MainMenu.css';/* empty css                      */
-const o = ({ items: s, onMenuClick: a }) => /* @__PURE__ */ e("div", { className: "MainMenu", children: s.map((n, i) => /* @__PURE__ */ l(
+import { Link as i } from "react-router";
+const o = ({ items: r, onMenuClick: a }) => /* @__PURE__ */ n("div", { className: "MainMenu", children: r.map((e, s) => /* @__PURE__ */ n(
   "div",
   {
-    onClick: () => {
-      a && n.id && a(n.id);
-    },
-    className: n.node ? "MainMenuNode" : n.title ? "MainMenuTitle" : "MainMenuAlternative",
-    children: [
-      n.node ? n.node : n.title ? /* @__PURE__ */ e("span", { className: "one-line", children: n.title }) : /* @__PURE__ */ l(c, { children: [
-        n.icon,
-        /* @__PURE__ */ e("span", { className: "one-line", children: n.text })
-      ] }),
-      n.checked && /* @__PURE__ */ e("span", { className: "MainMenuCheck" })
-    ]
+    className: e.node ? "MainMenuNode" : e.title ? "MainMenuTitle" : "MainMenuAlternative",
+    children: e.node ? e.node : e.title ? e.title : /* @__PURE__ */ t(i, { to: e.link ?? "/", onClick: () => a == null ? void 0 : a(), children: [
+      e.icon,
+      /* @__PURE__ */ n("span", { className: "MainMenuAlternativeText", children: e.text }),
+      e.checked && /* @__PURE__ */ n("span", { className: "MainMenuAlternativeCheck" })
+    ] })
   },
-  i
+  s
 )) });
 export {
   o as default

package/dist/components/layout/Page.js

@@ -29,8 +29,9 @@ import { Sidebar as n } from "../ui/sidebar/Sidebar.js";
 /* empty css                        */
 /* empty css                    */
 /* empty css                      */
+import "react-router";
 /* empty css                     */
-const K = ({ header: o, children: p, sidebar: i, isSidebarVisible: e = !1, onSidebarClose: t }) => /* @__PURE__ */ m("div", { className: "Page", children: [
+const L = ({ header: o, children: p, sidebar: i, isSidebarVisible: e = !1, onSidebarClose: t }) => /* @__PURE__ */ m("div", { className: "Page", children: [
   o && /* @__PURE__ */ r(a, { children: o }),
   /* @__PURE__ */ m("div", { className: i ? "PageBody" : "PageBody Wide", children: [
     /* @__PURE__ */ r("div", { className: "PageContent", children: p }),
@@ -49,5 +50,5 @@ const K = ({ header: o, children: p, sidebar: i, isSidebarVisible: e = !1, onSid
   )
 ] });
 export {
-  K as default
+  L as default
 };

package/dist/components/layout/PageHeader.js

@@ -31,8 +31,9 @@ import x from "../ui/toolbar/Toolbar.js";
 /* empty css                        */
 /* empty css                    */
 /* empty css                      */
+import "react-router";
 /* empty css                     */
-const de = ({
+const te = ({
   menu: d,
   title: C,
   subtitle: T,
@@ -106,5 +107,5 @@ const de = ({
   ] });
 };
 export {
-  de as default
+  te as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alxgrn/telefrag-ui",
   "description": "UI library for The Daily Telefrag project",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
   "author": "Alexander Fedorov <alex@molner.ru>",
   "license": "Apache-2.0",
@@ -30,6 +30,7 @@
   "peerDependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-router": "^7.8.1",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {