@amateescu/portal-ui-components 0.0.32-beta0 → 0.0.32-beta1

package/dist/components/KpiWrapper/KpiWrapper.stories.js

@@ -1,13 +1,12 @@
 import { jsx as t } from "react/jsx-runtime";
 import { S as e } from "../../InvencoGVR-qnTq-d6S.js";
 import "react";
-import '../../assets/SideMenu.css';import '../../assets/theme.css';/* empty css                   */
 import "@mui/x-data-grid";
 import { KpiCard as i } from "../KpiCard/KpiCard.js";
 import { KpiWrapper as n } from "./KpiWrapper.js";
 import "i18next";
-/* empty css                      */
-const m = {
+import '../../assets/SideMenu.css';/* empty css                      */
+const s = {
   title: "Kpi Wrapper",
   component: n,
   tags: ["autodocs"],
@@ -20,7 +19,7 @@ const m = {
       padding: "10px 10px"
     }
   }
-}, K = {}, u = {
+}, m = {}, K = {
   args: {
     children: [
       /* @__PURE__ */ t(i, { title: "Kpi Card", content: "Kpi Card Content", icon: /* @__PURE__ */ t(e, { width: 50, height: 50 }), menuCollapsed: !0 }),
@@ -28,7 +27,7 @@ const m = {
       /* @__PURE__ */ t(i, { title: "Kpi Card 3", content: "Kpi Card Content 3", icon: /* @__PURE__ */ t(e, { width: 50, height: 50 }), menuCollapsed: !0 })
     ]
   }
-}, g = {
+}, u = {
   args: {
     children: [
       /* @__PURE__ */ t(i, { title: "Kpi Card", content: "Kpi Card Content", icon: /* @__PURE__ */ t(e, { width: 50, height: 50 }), menuCollapsed: !0 }),
@@ -37,7 +36,7 @@ const m = {
       /* @__PURE__ */ t(i, { title: "Kpi Card 4", content: "Kpi Card Content 4", icon: /* @__PURE__ */ t(e, { width: 50, height: 50 }), menuCollapsed: !0 })
     ]
   }
-}, w = {
+}, g = {
   args: {
     children: [
       /* @__PURE__ */ t(i, { title: "Kpi Card", content: "Kpi Card Content", icon: /* @__PURE__ */ t(e, { width: 50, height: 50 }), menuCollapsed: !0 }),
@@ -48,9 +47,9 @@ const m = {
   render: (r) => /* @__PURE__ */ t("div", { dir: "rtl", style: { margin: "20px 20px" }, children: /* @__PURE__ */ t(n, { ...r }) })
 };
 export {
-  K as Default,
-  w as RTL,
-  u as With3Kpis,
-  g as With4Kpis,
-  m as default
+  m as Default,
+  g as RTL,
+  K as With3Kpis,
+  u as With4Kpis,
+  s as default
 };

package/dist/components/Login/Login.js

@@ -1,5 +1,4 @@
 import { jsx as v, jsxs as ce } from "react/jsx-runtime";
-import '../../assets/theme.css';/* empty css                   */
 import { c as ke } from "../../createSvgIcon-CgFXfzFk.js";
 import { t as Ye } from "i18next";
 import { P as e, q as gn, r as hn, c as Z, b as K, d as J, l as yn, g as te, t as Io, T as Po, a as se, u as oe, s as F, i as mt, v as Qt, m as ae, f as st, e as Re, w as eo, x as to, y as No, z as zt, h as Pe, A as Wt, B as vn } from "../../createSimplePaletteValueFilter-evt-Xthj.js";
@@ -8849,7 +8848,7 @@ process.env.NODE_ENV !== "production" && (Bt.propTypes = {
 });
 const ui = ke(/* @__PURE__ */ v("path", {
   d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2M9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9zm9 14H6V10h12zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2"
-}), "LockOutlined"), Ri = ({ title: t, disableAll: o, error: n, setError: r, handleSubmit: i, version: s }) => /* @__PURE__ */ ce(Ko, { component: "main", maxWidth: "xs", children: [
+}), "LockOutlined"), Si = ({ title: t, disableAll: o, error: n, setError: r, handleSubmit: i, version: s }) => (localStorage.getItem("theme") === "portal-theme" ? import("../../portal-theme-BarSJQdA.js") : import("../../theme-94RKb7HE.js"), /* @__PURE__ */ ce(Ko, { component: "main", maxWidth: "xs", children: [
   /* @__PURE__ */ v(Xo, {}),
   /* @__PURE__ */ ce(
     oo,
@@ -8907,7 +8906,7 @@ const ui = ke(/* @__PURE__ */ v("path", {
       ]
     }
   )
-] });
+] }));
 export {
-  Ri as Login
+  Si as Login
 };

package/dist/components/SideMenu/SideMenu.js

@@ -1,53 +1,52 @@
-import { jsxs as i, jsx as e, Fragment as R } from "react/jsx-runtime";
+import { jsxs as i, jsx as e, Fragment as M } from "react/jsx-runtime";
 import * as n from "react";
-import { M as N, S as H, U as h } from "../../UserInfoDropdown-DtadP0e7.js";
-import { S as V } from "../../InvencoGVR-qnTq-d6S.js";
-import '../../assets/SideMenu.css';import '../../assets/theme.css';/* empty css                   */
-/* empty css                      */
-const v = (l) => /* @__PURE__ */ n.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ n.createElement("path", { d: "M11 19L4 12L11 5M19 19L12 12L19 5", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), p = (l) => /* @__PURE__ */ n.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ n.createElement("path", { d: "M13 5L20 12L13 19M5 5L12 12L5 19", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), A = (l) => /* @__PURE__ */ n.createElement("svg", { width: 28, height: 27, viewBox: "0 0 28 27", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5 4V9C10.5 9.55228 10.0523 10 9.5 10H4.5L6.5 12H9.5C11.1569 12 12.5 10.6569 12.5 9V6L10.5 4Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.5 6V0L8.5 2V7.75C8.5 7.88807 8.38807 8 8.25 8H2.5L0.5 6H6.5Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.5 4V9C17.5 9.55228 17.9477 10 18.5 10H23.5L21.5 12H18.5C16.8431 12 15.5 10.6569 15.5 9V6L17.5 4Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.5 6V0L19.5 2V7.75C19.5 7.88807 19.6119 8 19.75 8H25.5L27.5 6H21.5Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5 23V18C10.5 17.4477 10.0523 17 9.5 17H4.5L6.5 15H9.5C11.1569 15 12.5 16.3431 12.5 18V21L10.5 23Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.5 21V27L8.5 25V19.25C8.5 19.1119 8.38807 19 8.25 19H2.5L0.5 21H6.5Z", fill: "#12121A" })), y = ({
+import { M as R, S as N, U as h } from "../../UserInfoDropdown-Cql8tlJU.js";
+import { S as H } from "../../InvencoGVR-qnTq-d6S.js";
+import '../../assets/SideMenu.css';/* empty css                      */
+const v = (l) => /* @__PURE__ */ n.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ n.createElement("path", { d: "M11 19L4 12L11 5M19 19L12 12L19 5", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), p = (l) => /* @__PURE__ */ n.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ n.createElement("path", { d: "M13 5L20 12L13 19M5 5L12 12L5 19", stroke: "#045529", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), V = (l) => /* @__PURE__ */ n.createElement("svg", { width: 28, height: 27, viewBox: "0 0 28 27", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5 4V9C10.5 9.55228 10.0523 10 9.5 10H4.5L6.5 12H9.5C11.1569 12 12.5 10.6569 12.5 9V6L10.5 4Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.5 6V0L8.5 2V7.75C8.5 7.88807 8.38807 8 8.25 8H2.5L0.5 6H6.5Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.5 4V9C17.5 9.55228 17.9477 10 18.5 10H23.5L21.5 12H18.5C16.8431 12 15.5 10.6569 15.5 9V6L17.5 4Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.5 6V0L19.5 2V7.75C19.5 7.88807 19.6119 8 19.75 8H25.5L27.5 6H21.5Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5 23V18C10.5 17.4477 10.0523 17 9.5 17H4.5L6.5 15H9.5C11.1569 15 12.5 16.3431 12.5 18V21L10.5 23Z", fill: "#12121A" }), /* @__PURE__ */ n.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.5 21V27L8.5 25V19.25C8.5 19.1119 8.38807 19 8.25 19H2.5L0.5 21H6.5Z", fill: "#12121A" })), j = ({
   logo: l,
   title: u,
   softwareName: r,
-  majorVersion: g,
+  majorVersion: f,
   menuItems: L,
   userInfoDropdownItems: c,
   collapsed: t,
   username: a,
   isRtl: d,
-  openKeys: f,
+  openKeys: g,
   toggleCollapsed: o,
   onClick: w,
   handleMenuClickUserInfo: s,
   handleOpenChange: x
 }) => {
-  const m = /@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g, k = t ? 54 : 250, C = t ? 50 : 250, M = localStorage.getItem("theme");
-  return console.log("theme", M), /* @__PURE__ */ i("div", { style: { width: k }, className: "main-container", children: [
+  const m = /@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g, k = t ? 54 : 250, C = t ? 50 : 250;
+  return localStorage.getItem("theme") === "portal-theme" ? import("../../portal-theme-BarSJQdA.js") : import("../../theme-94RKb7HE.js"), /* @__PURE__ */ i("div", { style: { width: k }, className: "main-container", children: [
     /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { children: t ? /* @__PURE__ */ e("div", { className: "flex-col-center mt-15", children: d ? /* @__PURE__ */ e(v, { onClick: o, className: "pointer" }) : /* @__PURE__ */ e(p, { onClick: o, className: "pointer" }) }) : /* @__PURE__ */ i("div", { className: "space-around-center", children: [
       /* @__PURE__ */ i("div", { className: "flex-row-center", children: [
         l,
         /* @__PURE__ */ i("h4", { className: "station ml-5", children: [
           u,
-          r ? /* @__PURE__ */ i(R, { children: [
+          r ? /* @__PURE__ */ i(M, { children: [
             /* @__PURE__ */ e("br", {}),
             " ",
             r,
             ": ",
-            g
+            f
           ] }) : ""
         ] })
       ] }),
       d ? /* @__PURE__ */ e(p, { onClick: o, className: "pointer" }) : /* @__PURE__ */ e(v, { onClick: o, className: "pointer" })
     ] }) }) }),
     /* @__PURE__ */ e(
-      N,
+      R,
       {
         onClick: w,
         mode: "inline",
         onOpenChange: x,
-        openKeys: f,
+        openKeys: g,
         selectedKeys: [location.pathname.slice(location.pathname.lastIndexOf("/"), location.pathname.length)],
         items: t ? void 0 : L,
-        expandIcon: /* @__PURE__ */ e(H, {}),
+        expandIcon: /* @__PURE__ */ e(N, {}),
         style: {
           height: t ? "82vh" : "80vh",
           //menuHeight,
@@ -59,9 +58,9 @@ const v = (l) => /* @__PURE__ */ n.createElement("svg", { width: 24, height: 24,
       }
     ),
     t ? /* @__PURE__ */ e("div", { className: "flex-col-center mb-30", children: /* @__PURE__ */ e(h, { user: a.replace(m, ""), collapsed: !0, items: c, handleMenuClick: s }) }) : /* @__PURE__ */ e("div", { className: "user-logo-container", children: /* @__PURE__ */ e(h, { user: a.replace(m, ""), collapsed: !1, items: c, handleMenuClick: s }) }),
-    t ? /* @__PURE__ */ e("div", { className: "flex-col-center mb-30", children: /* @__PURE__ */ e(A, {}) }) : /* @__PURE__ */ e("div", { className: "logo-small-container", children: /* @__PURE__ */ e(V, {}) })
+    t ? /* @__PURE__ */ e("div", { className: "flex-col-center mb-30", children: /* @__PURE__ */ e(V, {}) }) : /* @__PURE__ */ e("div", { className: "logo-small-container", children: /* @__PURE__ */ e(H, {}) })
   ] });
 };
 export {
-  y as SideMenu
+  j as SideMenu
 };

package/dist/components/TotalDataGrid/TotalDataGrid.js

@@ -1,17 +1,16 @@
-import { jsx as t } from "react/jsx-runtime";
-import '../../assets/theme.css';/* empty css                   */
+import { jsx as n } from "react/jsx-runtime";
 import { DataGrid as l, gridClasses as o } from "@mui/x-data-grid";
 const p = ({
   rows: r,
-  isFetching: n,
-  columnsDefinitions: i
-}) => /* @__PURE__ */ t(
+  isFetching: a,
+  columnsDefinitions: t
+}) => (localStorage.getItem("theme") === "portal-theme" ? import("../../portal-theme-BarSJQdA.js") : import("../../theme-94RKb7HE.js"), /* @__PURE__ */ n(
   l,
   {
-    loading: (!r || !r.length) && n,
-    rows: r.map((a, e) => (a.id = e, a)),
-    columns: i,
-    getRowClassName: (a) => a.id === r.length - 1 ? "last-row" : "",
+    loading: (!r || !r.length) && a,
+    rows: r.map((e, i) => (e.id = i, e)),
+    columns: t,
+    getRowClassName: (e) => e.id === r.length - 1 ? "last-row" : "",
     sx: {
       "& .last-row": {
         "& .MuiDataGrid-cellContent": {
@@ -116,7 +115,7 @@ const p = ({
       }
     }
   }
-);
+));
 export {
   p as TotalDataGrid
 };

package/dist/components/UserInfoDropdown/UserInfoDropdown.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { U as t } from "../../UserInfoDropdown-DtadP0e7.js";
+import { U as t } from "../../UserInfoDropdown-Cql8tlJU.js";
 import "../../portal-utils/cn.js";
 export {
   t as UserInfoDropdown

package/dist/components/UserInfoDropdown/UserInfoDropdown.stories.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { userInfoDropdownItems as s } from "../../mock.js";
-import { U as o } from "../../UserInfoDropdown-DtadP0e7.js";
+import { U as o } from "../../UserInfoDropdown-Cql8tlJU.js";
 const n = {
   title: "User Info Dropdown",
   component: o,

package/dist/components/index.js

@@ -10,7 +10,7 @@ import { LoadingAnimation as D } from "./LoadingAnimation/LoadingAnimation.js";
 import { Login as K } from "./Login/Login.js";
 import { SideMenu as U } from "./SideMenu/SideMenu.js";
 import { TotalDataGrid as A } from "./TotalDataGrid/TotalDataGrid.js";
-import { U as E } from "../UserInfoDropdown-DtadP0e7.js";
+import { U as E } from "../UserInfoDropdown-Cql8tlJU.js";
 export {
   t as ConfirmationModal,
   m as CustomButton,

package/dist/main.js

@@ -10,7 +10,7 @@ import { LoadingAnimation as L } from "./components/LoadingAnimation/LoadingAnim
 import { Login as P } from "./components/Login/Login.js";
 import { SideMenu as h } from "./components/SideMenu/SideMenu.js";
 import { TotalDataGrid as A } from "./components/TotalDataGrid/TotalDataGrid.js";
-import { U as I } from "./UserInfoDropdown-DtadP0e7.js";
+import { U as I } from "./UserInfoDropdown-Cql8tlJU.js";
 import { chunkArray as b } from "./portal-utils/chunkArray.js";
 import { cn as v } from "./portal-utils/cn.js";
 import { currency as B, date as E, datetime as F, decimal as G, fuelUnitPrice as S, fuelVolume as T, hours as V, number as W, time as j } from "./portal-utils/formatters.js";

package/package.json

@@ -2,17 +2,19 @@
   "name": "@amateescu/portal-ui-components",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
-  "version": "0.0.32-beta0",
+  "version": "0.0.32-beta1",
   "type": "module",
   "files": [
     "dist",
-    "src/theme/theme.scss"
+    "src/theme/theme.scss",
+    "src/theme/portal-theme.scss"
   ],
   "exports": {
     "./components": "./dist/components/index.js",
     "./types": "./dist/types/index.js",
     "./portal-utils": "./dist/portal-utils/index.js",
-    "./theme.css": "./dist/assets/theme.css"
+    "./theme.css": "./dist/assets/theme.css",
+    "./portal-theme.css": "./dist/assets/portal-theme.css"
   },
   "scripts": {
     "build": "tsc && vite build",

package/src/theme/portal-theme.scss

@@ -0,0 +1,43 @@
+:root {
+  --color-primary: #cbddf3;
+  --color-secondary: #626367;
+  --color-background: #f0f0f0;
+  --color-background-secondary: #f3f6f8;
+  --color-text: #12121a;
+  --color-text-secondary: #111111;
+  --color-text-light: #777;
+  --color-text-dark: #333;
+  --color-border: #ddd;
+  --color-highlight: #05a952;
+  --color-highlight-data-grid: #05a9521a; //data-grid row selection
+  --color-mui-selected: #F5F7FB;
+  --color-warning: #eea63c;
+  --color-critical: #f95048;
+  --color-neutral: #fafafa;
+  --color-red: red;
+  --color-gray: #e0e0e0;
+  --color-blue: #0054EE; //clear filters
+  --color-light-gray-blue: #E6EBEF;
+  --color-very-light-gray: #DBDBDB;
+  --color-white: white;
+  --color-green: green;
+  --color-ant-theme: #00b96b;
+  --color-avatar: #41b06e;
+
+  --font-size-xxsmall: 8px;
+  --font-size-9: 9px;
+  --font-size-xsmall: 10px;
+  --font-size-small: 12px;
+  --font-size-normal: 13px;
+  --font-size-medium: 14px;
+  --font-size-large: 16px;
+  --font-size-xlarge: 18px;
+  --font-size-xxlarge: 20px;
+  --font-size-xxxlarge: 21px;
+  --font-size-22: 22px;
+  --font-size-kpi-card: 32px;
+
+  --font-bolded: 600;
+  --font-500: 500;
+  --font-400: 400;
+}