@conboai/storybook.components 0.1.22 → 0.1.24

package/dist/helpers/utils/date.d.ts

@@ -4,3 +4,6 @@ export declare const getStartTime: (type: OpUnitType, timeType: UnitType, time:
 export declare const getEndTime: (type: OpUnitType, timeType: UnitType, time: number) => dayjs.Dayjs;
 export declare const getStartTimeOfYesterday: (time: number) => dayjs.Dayjs;
 export declare const subtractTime: (time: number, timeType: ManipulateType | undefined) => dayjs.Dayjs;
+export declare const getLocalDateTimeFormat: () => string;
+export declare const formatDateWithLocal: (date: Date | string) => string;
+export declare const formatDuration: (milliseconds: number) => string;

package/dist/helpers/utils/utils.d.ts

@@ -1 +1,2 @@
 export declare const snakeCaseToTitleCase: (input: string) => string;
+export declare const formatValueWithComma: (value: string[]) => string;

package/dist/storybook.components.mjs

@@ -7739,7 +7739,7 @@ process.env.NODE_ENV !== "production" && (Dn.propTypes = {
    */
   variant: s.oneOfType([s.oneOf(["contained", "outlined", "text"]), s.string])
 });
-const gn = "#ffffff", od = "#000000", d1 = "#F5F6FA", Z5 = "#ECEDEF", f1 = "rgba(0, 0, 0, 0.26)", p1 = "#354290", $t = "#5360AE", Sb = "#3F4C9A", h1 = "#303D8B", Sp = "#CCD0E7", m1 = "#FBFBFD", g1 = "#CCD0E7", du = "#5360AE", Ep = "#E6E7EB", Cp = "#989BAF", b1 = "#8A8B8D", y1 = "#8d8ea1", v1 = "#e5e6ea", x1 = "#c2c6db", T1 = "#4b569d", sd = "#CECFD1", Rp = "#BABBBD", S1 = "#323d7b", E1 = "#535ea4", C1 = "#6f79b3", R1 = "#646ead", w1 = {
+const gn = "#ffffff", od = "#000000", d1 = "#F5F6FA", Q5 = "#ECEDEF", f1 = "rgba(0, 0, 0, 0.26)", p1 = "#354290", $t = "#5360AE", Sb = "#3F4C9A", h1 = "#303D8B", Sp = "#CCD0E7", m1 = "#FBFBFD", g1 = "#CCD0E7", du = "#5360AE", Ep = "#E6E7EB", Cp = "#989BAF", b1 = "#8A8B8D", y1 = "#8d8ea1", v1 = "#e5e6ea", x1 = "#c2c6db", T1 = "#4b569d", sd = "#CECFD1", Rp = "#BABBBD", S1 = "#323d7b", E1 = "#535ea4", C1 = "#6f79b3", R1 = "#646ead", w1 = {
   small: {
     width: "40px",
     minWidth: "40px"
@@ -39762,7 +39762,7 @@ const E2 = {
 };
 St.extend(wL);
 St.extend(DL);
-const Q5 = ({
+const J5 = ({
   label: t = "",
   onChange: e,
   value: n,
@@ -40819,7 +40819,7 @@ const $y = {
     id: n.key,
     subItemValues: r.subItemValues
   };
-}), J5 = ({
+}), e3 = ({
   title: t,
   filterTitle: e,
   data: n,
@@ -41123,7 +41123,7 @@ const $y = {
       ]
     }
   );
-}, e3 = ({
+}, t3 = ({
   tabs: t,
   activeId: e,
   onDelete: n,
@@ -41158,7 +41158,7 @@ const $y = {
     c(),
     /* @__PURE__ */ E.jsx(Dn, { onClick: a, variant: "text", sx: { minWidth: "40px" }, children: /* @__PURE__ */ E.jsx(Yt, { icon: "add", fill: "white" }) })
   ] });
-}, t3 = ({ children: t }) => /* @__PURE__ */ E.jsx(
+}, n3 = ({ children: t }) => /* @__PURE__ */ E.jsx(
   at,
   {
     justifyContent: "space-between",
@@ -41168,7 +41168,7 @@ const $y = {
     sx: { backgroundColor: Sb, display: "flex" },
     children: t
   }
-), n3 = ({ linkContent: t, link: e }) => /* @__PURE__ */ E.jsx(o0, { href: e, height: "100%", children: t }), pB = ({ setValue: t, value: e, tabs: n }) => {
+), r3 = ({ linkContent: t, link: e }) => /* @__PURE__ */ E.jsx(o0, { href: e, height: "100%", children: t }), pB = ({ setValue: t, value: e, tabs: n }) => {
   const r = {
     ...Fy,
     "& .MuiTabs-flexContainer": {
@@ -41190,7 +41190,7 @@ const $y = {
 }, hB = ({ tabsContent: t }) => t.map((e) => /* @__PURE__ */ E.jsx(Xd, { value: e.value, sx: { padding: "20px 0 0" }, children: e.content }, e.value)), mB = ({ setValue: t, value: e, tabs: n, tabsContent: r }) => /* @__PURE__ */ E.jsxs(qd, { value: e, children: [
   /* @__PURE__ */ E.jsx(pB, { setValue: t, value: e, tabs: n }),
   /* @__PURE__ */ E.jsx(hB, { tabsContent: r })
-] }), r3 = ({ tabsContent: t, tabs: e }) => {
+] }), o3 = ({ tabsContent: t, tabs: e }) => {
   const [n, r] = dt("0"), o = { background: "none", padding: "20px" };
   return /* @__PURE__ */ E.jsx(mt, { sx: o, children: /* @__PURE__ */ E.jsx(
     mB,
@@ -41215,7 +41215,7 @@ const $y = {
       /* @__PURE__ */ E.jsx("circle", { cx: "2", cy: "14", r: "2", fill: "black", fillOpacity: "0.6" })
     ]
   }
-), o3 = ({ title: t }) => /* @__PURE__ */ E.jsxs(
+), s3 = ({ title: t }) => /* @__PURE__ */ E.jsxs(
   at,
   {
     container: !0,
@@ -41239,7 +41239,7 @@ const $y = {
     ]
   }
 ), gB = { display: "flex", flexWrap: "wrap", gap: 0.5 };
-function s3({
+function i3({
   options: t,
   label: e,
   value: n,
@@ -58274,7 +58274,7 @@ const M5 = {
       )
     }
   );
-}, l3 = ({
+}, c3 = ({
   onGenerate: t,
   isLoading: e,
   src: n,
@@ -58296,7 +58296,7 @@ const M5 = {
     }
   );
 };
-function c3({ label: t, imageSrc: e }) {
+function u3({ label: t, imageSrc: e }) {
   return /* @__PURE__ */ E.jsxs(
     mt,
     {
@@ -58320,7 +58320,7 @@ function c3({ label: t, imageSrc: e }) {
 const N5 = {
   border: `1px solid ${gn}`,
   opacity: "40%"
-}, u3 = () => /* @__PURE__ */ E.jsx(mt, { sx: N5 }), $5 = {
+}, d3 = () => /* @__PURE__ */ E.jsx(mt, { sx: N5 }), $5 = {
   width: "36px",
   height: "36px",
   borderRadius: "50%",
@@ -58330,7 +58330,7 @@ const N5 = {
   fontSize: "20px",
   lineHeight: "20px",
   color: gn
-}, d3 = ({ logo: t, title: e }) => /* @__PURE__ */ E.jsxs(at, { container: !0, gap: "8px", alignItems: "center", children: [
+}, f3 = ({ logo: t, title: e }) => /* @__PURE__ */ E.jsxs(at, { container: !0, gap: "8px", alignItems: "center", children: [
   /* @__PURE__ */ E.jsx(mt, { sx: $5, children: /* @__PURE__ */ E.jsx("img", { src: t, alt: e, loading: "lazy" }) }),
   /* @__PURE__ */ E.jsx(wt, { sx: F5, children: e })
 ] }), B5 = (t) => {
@@ -58350,7 +58350,7 @@ const N5 = {
 }, H5 = (t) => ({
   ...t,
   boxShadow: "none"
-}), f3 = ({ columnDefs: t, data: e, sx: n }) => /* @__PURE__ */ E.jsx(Pd, { component: wr, sx: H5(n), children: /* @__PURE__ */ E.jsx(Ad, { children: /* @__PURE__ */ E.jsx(kd, { children: t.map((r, o) => /* @__PURE__ */ E.jsxs(Wo, { children: [
+}), p3 = ({ columnDefs: t, data: e, sx: n }) => /* @__PURE__ */ E.jsx(Pd, { component: wr, sx: H5(n), children: /* @__PURE__ */ E.jsx(Ad, { children: /* @__PURE__ */ E.jsx(kd, { children: t.map((r, o) => /* @__PURE__ */ E.jsxs(Wo, { children: [
   /* @__PURE__ */ E.jsx(mr, { component: "th", scope: "row", sx: U5, children: /* @__PURE__ */ E.jsx(wt, { fontWeight: "600", children: r.headerName }) }),
   /* @__PURE__ */ E.jsx(mr, { sx: V5, children: r.renderCell ? r.renderCell(e[r.field]) : j5(e[r.field]) })
 ] }, o)) }) }) }), W5 = {
@@ -58359,7 +58359,7 @@ const N5 = {
   borderRadius: "50%",
   overflow: "hidden",
   cursor: "pointer"
-}, p3 = ({ imageSrc: t, alt: e }) => /* @__PURE__ */ E.jsx(mt, { sx: W5, children: /* @__PURE__ */ E.jsx("img", { src: t, alt: e }) }), z5 = {
+}, h3 = ({ imageSrc: t, alt: e }) => /* @__PURE__ */ E.jsx(mt, { sx: W5, children: /* @__PURE__ */ E.jsx("img", { src: t, alt: e }) }), z5 = {
   "& .MuiSwitch-switchBase.Mui-checked": {
     color: gn
   },
@@ -58373,7 +58373,7 @@ const N5 = {
   lineHeight: "16px",
   letterSpacing: "0.15px",
   color: od
-}, h3 = ({
+}, m3 = ({
   checked: t,
   onChange: e,
   leftLabel: n,
@@ -58391,7 +58391,7 @@ const N5 = {
   ),
   o && /* @__PURE__ */ E.jsx(ds, { sx: rg, children: o })
 ] });
-function m3({ images: t }) {
+function g3({ images: t }) {
   const [e, n] = dt(0), r = () => {
     n((i) => (i + 1) % t.length);
   }, o = () => {
@@ -58469,18 +58469,55 @@ function m3({ images: t }) {
     )
   ] });
 }
-const G5 = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()), og = (t, e, n) => St().startOf(t).set(e, n), Y5 = (t, e, n) => St().endOf(t).set(e, n), K5 = (t) => St().subtract(1, "day").startOf("day").set("hour", t), sg = (t, e) => St().subtract(t, e), g3 = [
+const G5 = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()), b3 = (t) => t.join(", "), og = (t, e, n) => St().startOf(t).set(e, n), Y5 = (t, e, n) => St().endOf(t).set(e, n), K5 = (t) => St().subtract(1, "day").startOf("day").set("hour", t), sg = (t, e) => St().subtract(t, e), q5 = () => {
+  const e = new Intl.DateTimeFormat(void 0, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "numeric",
+    minute: "2-digit"
+  }).formatToParts(/* @__PURE__ */ new Date());
+  let n = !1;
+  const r = e.map((o) => {
+    switch (o.type) {
+      case "day":
+        return "DD";
+      case "month":
+        return "MM";
+      case "year":
+        return "YYYY";
+      case "hour":
+        return n = o.value.toLowerCase().includes("am") || o.value.toLowerCase().includes("pm"), "hh";
+      case "minute":
+        return "mm";
+      case "dayPeriod":
+        return "A";
+      default:
+        return o.value;
+    }
+  }).join("");
+  return n ? r.replace("hh", "hh") : r.replace("hh", "HH");
+}, y3 = (t) => {
+  const e = q5();
+  return St(t).format(e);
+}, v3 = (t) => {
+  const r = Math.floor(t / 6e4);
+  t %= 6e4;
+  const o = Math.floor(t / 1e3);
+  let i = "";
+  return r > 0 ? (i += `${r} min`, o > 0 && (i += ` ${o} sec`), i) : o > 0 ? (i += `${o} sec`, i) : "0 sec";
+}, x3 = [
   "Camera 1 (all items)",
   "Camera 5 (all items)",
   "Camera 2 (10 items)",
   "Camera 3 (Zone 1)",
   "Camera 4 (24 items)"
-], b3 = [
+], T3 = [
   { key: "classifier", label: "Classifier" },
   { key: "value", label: "Value" },
   { key: "count", label: "Count" },
   { key: "score", label: "Score" }
-], y3 = [
+], S3 = [
   {
     label: "Summary",
     value: "0",
@@ -58491,14 +58528,14 @@ const G5 = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()),
     value: "1",
     disabled: !0
   }
-], v3 = [
+], E3 = [
   { classifier: "Color", value: "Black", count: 50, score: "80%" },
   { classifier: "Color", value: "Yellow", count: 60, score: "70%" },
   { classifier: "Manufacture", value: "Volvo", count: 50, score: "80%" },
   { classifier: "Color", value: "Red", count: 50, score: "40%" },
   { classifier: "Color", value: "Green", count: 75, score: "70%" },
   { classifier: "Manufacture", value: "Man", count: 3, score: "80%" }
-], x3 = (t) => [
+], C3 = (t) => [
   {
     value: "0",
     content: /* @__PURE__ */ E.jsx(aB, { ...t })
@@ -58507,7 +58544,7 @@ const G5 = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()),
     value: "1",
     content: "More"
   }
-], T3 = {
+], R3 = {
   data: [
     {
       id: "1",
@@ -58565,15 +58602,15 @@ const G5 = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()),
       value: "kit"
     }
   ]
-}, S3 = [
+}, w3 = [
   { key: "id", label: "ID" },
   { key: "name", label: "Name" },
   { key: "age", label: "Age" }
-], E3 = [
+], I3 = [
   { id: 1, name: "John Doe", age: 30 },
   { id: 2, name: "Jane Smith", age: 25 },
   { id: 3, name: "Bob Johnson", age: 40 }
-], C3 = {
+], D3 = {
   feed: 139,
   conbo_key: "28145-139-021-64216",
   event_id: "CNB-7987",
@@ -58583,7 +58620,7 @@ const G5 = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()),
   end: "2024-05-15T21:05:27.745000Z",
   cargo: "N/A",
   zones: ["Dock main road ", "Hello dock"]
-}, R3 = [
+}, O3 = [
   { headerName: "Event ID", field: "event_id" },
   {
     headerName: "Move",
@@ -58602,7 +58639,7 @@ const G5 = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()),
   },
   { headerName: "Cargo", field: "cargo" },
   { headerName: "Zones", field: "zones" }
-], w3 = [
+], A3 = [
   { id: "1", color: "#f99191", title: "New title" },
   {
     id: "2",
@@ -58610,7 +58647,7 @@ const G5 = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()),
     title: "Message should contain more information"
   },
   { id: "3", color: "#7095f4", title: "Hello, World!" }
-], I3 = [
+], k3 = [
   {
     label: "Start of the day",
     getValue: () => og("day", "hour", 6)
@@ -58635,7 +58672,7 @@ const G5 = (t) => t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()),
     label: "One day ago",
     getValue: () => sg(1, "day")
   }
-], D3 = [
+], P3 = [
   {
     value: 864e5,
     label: "1 day"
@@ -58651,39 +58688,39 @@ export {
   S1 as ACTIVE_TAB,
   Yr as ActionButton,
   EL as ActionSelect,
-  c3 as AppTitleBar,
+  u3 as AppTitleBar,
   sd as BETWEEN_GRAY_BORDER,
   d1 as BG_GRAY_COLOR,
   od as BLACK,
   Rp as BORDER_MAIN_TABLE,
   R1 as BORDER_TAB,
   CL as ChipsBar,
-  s3 as ChipsMultiSelect,
+  i3 as ChipsMultiSelect,
   T1 as DARK_BLUE_BORDER,
   E1 as DEFAULT_TAB,
-  Z5 as DETAILS_VIEW_BG,
+  Q5 as DETAILS_VIEW_BG,
   y1 as DISABLED_BORDER,
   Sp as DISABLED_BTN_PRIMARY,
   Ep as DISABLED_BTN_SECONDARY,
   f1 as DISABLED_CHECKBOX,
   Cp as DISABLED_TEXT,
   b1 as DISABLED_TEXT_ICON,
-  Q5 as DatePicker,
-  u3 as Delimiter,
-  r3 as DetailsView,
-  o3 as DetailsViewPanel,
+  J5 as DatePicker,
+  d3 as Delimiter,
+  o3 as DetailsView,
+  s3 as DetailsViewPanel,
   rB as Filter,
-  J5 as FilterBox,
+  e3 as FilterBox,
   v1 as GRAY_BORDER,
   Sb as HOVER_BTN_PRIMARY,
   g1 as HOVER_BTN_SECONDARY,
   p1 as HOVER_DARK_BLUE_ICON,
   C1 as HOVER_TAB,
-  t3 as Header,
-  n3 as HomeLink,
-  m3 as ImageBox,
+  n3 as Header,
+  r3 as HomeLink,
+  g3 as ImageBox,
   x1 as LIGHT_GRAY_BORDER,
-  d3 as Logo,
+  f3 as Logo,
   aB as MainTable,
   eB as NotificationBar,
   $t as PASSIVE_BTN_PRIMARY,
@@ -58691,34 +58728,38 @@ export {
   al as PLACEMENTS,
   Y2 as SearchInput,
   Yt as Svg,
-  y3 as TABS,
+  S3 as TABS,
   fB as Tab,
-  e3 as TabsBar,
-  h3 as Toggle,
-  p3 as UserAvatar,
-  f3 as VerticalTable,
-  l3 as VideoBox,
+  t3 as TabsBar,
+  m3 as Toggle,
+  h3 as UserAvatar,
+  p3 as VerticalTable,
+  c3 as VideoBox,
   gn as WHITE,
-  b3 as columnDefs,
-  S3 as columns,
-  g3 as dataMock,
-  v3 as detailsViewDataMock,
+  T3 as columnDefs,
+  w3 as columns,
+  x3 as dataMock,
+  E3 as detailsViewDataMock,
+  y3 as formatDateWithLocal,
+  v3 as formatDuration,
+  b3 as formatValueWithComma,
   Y5 as getEndTime,
+  q5 as getLocalDateTimeFormat,
   og as getStartTime,
   K5 as getStartTimeOfYesterday,
-  x3 as getTabsContent,
+  C3 as getTabsContent,
   j2 as inputLabelSx,
   By as loaderSx,
-  E3 as mainTableDataMock,
-  D3 as mockSelectOptions,
-  I3 as mockShortcut,
-  T3 as newFilterMock,
+  I3 as mainTableDataMock,
+  P3 as mockSelectOptions,
+  k3 as mockShortcut,
+  R3 as newFilterMock,
   B2 as selectSx,
   G5 as snakeCaseToTitleCase,
   sg as subtractTime,
   $y as tabSx,
-  w3 as tabsMock,
+  A3 as tabsMock,
   Fy as tabsSx,
-  R3 as verticalTableColumnDefs,
-  C3 as verticalTableDataMock
+  O3 as verticalTableColumnDefs,
+  D3 as verticalTableDataMock
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conboai/storybook.components",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "main": "dist/storybook.components.mjs",
   "types": "dist/build/index.d.ts",
   "files": [