@temp-spotwork/ui 1.6.0 → 1.6.7

package/dist/components/atoms/avatar/Avatar.stories.d.ts

@@ -5,3 +5,5 @@ declare const meta: Meta<typeof Avatar>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Circular: Story;
+export declare const WithFullName: Story;
+export declare const LargeWithFullName: Story;

package/dist/components/atoms/avatar/Avatar.stories.js

@@ -1,8 +1,8 @@
-import { f as r } from "../../../index-CktvVE7I.js";
-import { Avatar as o } from "./avatar.js";
-const c = {
+import { f as a } from "../../../index-CktvVE7I.js";
+import { Avatar as r } from "./avatar.js";
+const o = {
   title: "@spotwork-ui/Avatar",
-  component: o,
+  component: r,
   parameters: {
     layout: "centered"
   },
@@ -10,13 +10,30 @@ const c = {
   argTypes: {
     backgroundColor: { control: "color" }
   },
-  args: { onClick: r() }
-}, e = {
+  args: { onClick: a() }
+}, i = {
   args: {
+    id: "circular-avatar",
     variant: "circular"
   }
+}, c = {
+  args: {
+    id: "full-name-avatar",
+    variant: "circular",
+    textView: "Steve Bob"
+  }
+}, l = {
+  args: {
+    id: "large-full-name-avatar",
+    variant: "circular",
+    textView: "Steve Bob",
+    size: 9,
+    isActive: !0
+  }
 };
 export {
-  e as Circular,
-  c as default
+  i as Circular,
+  l as LargeWithFullName,
+  c as WithFullName,
+  o as default
 };

package/dist/components/atoms/avatar/avatar.js

@@ -1,76 +1,79 @@
-import { jsx as r, Fragment as b, jsxs as U } from "react/jsx-runtime";
-import { Typography as _ } from "../../styles/typography/typography.js";
-import { classesMap as I } from "./styles.js";
-import y from "./statusIndicatorIcon.js";
-import { t as s } from "../../../bundle-mjs-CAy1p0fn.js";
-function Z({
-  id: p,
-  hasBorder: l = !1,
-  variant: i,
-  image: d,
-  textView: E = "NN",
-  isActive: o,
+import { jsx as r, Fragment as E, jsxs as I } from "react/jsx-runtime";
+import { Typography as y } from "../../styles/typography/typography.js";
+import { classesMap as D } from "./styles.js";
+import F from "./statusIndicatorIcon.js";
+import { t as l } from "../../../bundle-mjs-CAy1p0fn.js";
+function w({
+  id: g,
+  hasBorder: i = !1,
+  variant: d,
+  image: m,
+  textView: u = "NN",
+  isActive: n,
   isOnline: v = !1,
-  onClick: c,
+  onClick: s,
   size: t
 }) {
-  const e = i === "circular", a = e ? 5 : 5.5, n = t ? t / a : 1, m = I[i](l), u = !e && l && o ? "border-bcolor-active" : "border-bcolor-divider", S = t && a > t ? 1 : 7, g = () => {
-    c && c(p);
-  }, x = d ? /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
+  const S = (() => {
+    const o = u.trim().split(/\s+/);
+    return o.length > 1 ? (o[0][0] + o[o.length - 1][0]).toUpperCase() : u;
+  })(), e = d === "circular", a = e ? 5 : 5.5, c = t ? t / a : 1, p = D[d](i), h = !e && i && n ? "border-bcolor-active" : "border-bcolor-divider", A = t && a > t ? 1 : 7, C = () => {
+    s && s(g);
+  }, U = m ? /* @__PURE__ */ r(E, { children: /* @__PURE__ */ r(
     "img",
     {
-      className: s(m.image, u),
-      src: d,
+      className: l(p.image, h),
+      src: m,
       alt: "avatar-image"
     }
-  ) }) : /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
+  ) }) : /* @__PURE__ */ r(E, { children: /* @__PURE__ */ r(
     "div",
     {
       "data-testid": "avatar-text-box",
-      className: s(m.textBox, u),
+      className: l(p.textBox, h),
       children: /* @__PURE__ */ r(
-        _,
+        y,
         {
-          swStyle: S,
-          children: E,
+          swStyle: A,
+          children: S,
           color: "visualPlaceholderDefault"
         }
       )
     }
-  ) }), f = 0.25, A = e && v && !o && /* @__PURE__ */ r(
+  ) }), f = 0.25, x = e && v && !n && /* @__PURE__ */ r(
     "div",
     {
       className: "absolute",
       style: {
-        bottom: `${n * f}rem`,
-        right: `${n * f}rem`
+        bottom: `${c * f}rem`,
+        right: `${c * f}rem`
       },
       "data-testid": "avatar-online-status",
-      children: /* @__PURE__ */ r(y, { scalingFactor: n })
+      children: /* @__PURE__ */ r(F, { scalingFactor: c })
     }
-  ), h = c ? "button" : "div", C = () => e && o ? "border-bcolor-active" : "border-[transparent]";
-  return /* @__PURE__ */ U(
-    h,
+  ), b = s ? "button" : "div", _ = () => e && n ? "border-bcolor-active" : "border-[transparent]";
+  return /* @__PURE__ */ I(
+    b,
     {
       "data-testid": "avatar-container",
-      onClick: g,
+      onClick: C,
       style: {
         width: `${t || a}rem`,
         height: `${t || a}rem`
       },
-      className: s(
+      className: l(
         "flex items-center justify-center flex-shrink-0 flex-grow-0 relative",
-        C(),
+        _(),
         "aspect-square"
       ),
-      ...h === "button" ? { type: "button" } : {},
+      ...b === "button" ? { type: "button" } : {},
       children: [
-        x,
-        A
+        U,
+        x
       ]
     }
   );
 }
 export {
-  Z as Avatar
+  w as Avatar
 };

package/dist/components/atoms/form/dateselect/helpers.d.ts

@@ -32,5 +32,5 @@ export declare const eachYearOfInterval: (interval: {
     end: Date;
 }) => Date[];
 export declare const isSameMonth: (shortDate: any, currentDay: any) => boolean;
-export declare const isSameWeek: (dateLeft: any, dateRight: any, weekStartsOn?: number) => boolean;
+export declare const isSameWeek: (dateLeft: string | Date, dateRight: string | Date, weekStartsOn?: number) => boolean;
 export declare const endOfMonth: (date: Date) => Date;

package/dist/components/atoms/form/dateselect/helpers.js

@@ -1,4 +1,4 @@
-const g = (r) => {
+const m = (n) => {
   const t = {
     Jan: "January",
     Feb: "February",
@@ -12,11 +12,11 @@ const g = (r) => {
     Oct: "October",
     Nov: "November",
     Dec: "December"
-  }, [e, n] = r.split("-"), o = t[e];
-  if (!o || !n)
+  }, [e, r] = n.split("-"), o = t[e];
+  if (!o || !r)
     throw new Error("Invalid date format");
-  return `${o} ${n}`;
-}, d = (r) => {
+  return `${o} ${r}`;
+}, p = (n) => {
   const t = {
     Jan: 0,
     Feb: 1,
@@ -30,54 +30,54 @@ const g = (r) => {
     Oct: 9,
     Nov: 10,
     Dec: 11
-  }, [e, n] = r.split("-"), o = parseInt(n, 10), a = t[e];
+  }, [e, r] = n.split("-"), o = parseInt(r, 10), a = t[e];
   return isNaN(o) || a === void 0 ? /* @__PURE__ */ new Date(NaN) : new Date(o, a);
-}, p = (r) => {
-  const t = { month: "short", year: "numeric" }, [e, n] = r.toLocaleDateString("en-US", t).split(" ");
-  return `${e}-${n}`;
-}, D = (r) => {
-  const { start: t, end: e } = r;
+}, D = (n) => {
+  const t = { month: "short", year: "numeric" }, [e, r] = n.toLocaleDateString("en-US", t).split(" ");
+  return `${e}-${r}`;
+}, y = (n) => {
+  const { start: t, end: e } = n;
   if (t > e)
     throw new Error("The start of the interval cannot be after the end");
-  const n = t.getFullYear(), o = t.getMonth(), a = e.getFullYear(), s = e.getMonth(), h = [];
-  for (let c = n; c <= a; c++) {
-    const f = c === n ? o : 0, i = c === a ? s : 11;
+  const r = t.getFullYear(), o = t.getMonth(), a = e.getFullYear(), s = e.getMonth(), h = [];
+  for (let c = r; c <= a; c++) {
+    const f = c === r ? o : 0, i = c === a ? s : 11;
     for (let u = f; u <= i; u++) {
-      const M = String(u + 1).padStart(2, "0"), m = `${c}-${M}-01`;
-      h.push(m);
+      const M = String(u + 1).padStart(2, "0"), g = `${c}-${M}-01`;
+      h.push(g);
     }
   }
   return h;
-}, S = (r) => {
-  const { start: t, end: e } = r;
+}, d = (n) => {
+  const { start: t, end: e } = n;
   if (!(t instanceof Date) || !(e instanceof Date))
     throw new Error("Invalid start or end date");
   if (t > e)
     throw new Error("The start date must be before or equal to the end date");
-  const n = [], o = t.getFullYear(), a = e.getFullYear();
+  const r = [], o = t.getFullYear(), a = e.getFullYear();
   for (let s = o; s <= a; s++)
-    n.push(new Date(s, 0, 1));
-  return n;
-}, y = (r, t) => {
-  const [e, n] = g(r).split(" "), o = parseInt(n, 10), a = (/* @__PURE__ */ new Date(`${e} 1, ${o}`)).getMonth(), s = t.getMonth(), h = t.getFullYear();
+    r.push(new Date(s, 0, 1));
+  return r;
+}, S = (n, t) => {
+  const [e, r] = m(n).split(" "), o = parseInt(r, 10), a = (/* @__PURE__ */ new Date(`${e} 1, ${o}`)).getMonth(), s = t.getMonth(), h = t.getFullYear();
   return s === a && h === o;
-}, l = (r, t) => {
-  const e = new Date(r), n = (e.getDay() - t + 7) % 7;
-  return e.setDate(e.getDate() - n), e.setHours(0, 0, 0, 0), e;
-}, Y = (r, t, e = 0) => {
-  const n = l(r, e), o = l(t, e);
-  return n.getTime() === o.getTime();
-}, w = (r) => {
-  const t = new Date(r);
+}, l = (n, t) => {
+  const e = new Date(n), r = (e.getDay() - t + 7) % 7;
+  return e.setDate(e.getDate() - r), e.setHours(0, 0, 0, 0), e;
+}, w = (n, t, e = 0) => {
+  const r = typeof n == "string" ? new Date(n) : n, o = typeof t == "string" ? new Date(t) : t, a = l(r, e), s = l(o, e);
+  return a.getTime() === s.getTime();
+}, Y = (n) => {
+  const t = new Date(n);
   return t.setMonth(t.getMonth() + 1), t.setDate(0), t.setHours(23, 59, 59, 999), t;
 };
 export {
-  D as eachMonthOfInterval,
-  S as eachYearOfInterval,
-  w as endOfMonth,
-  p as formatDateToMonthYear,
-  g as formatShortMonthYear,
-  y as isSameMonth,
-  Y as isSameWeek,
-  d as parseShortMonthYear
+  y as eachMonthOfInterval,
+  d as eachYearOfInterval,
+  Y as endOfMonth,
+  D as formatDateToMonthYear,
+  m as formatShortMonthYear,
+  S as isSameMonth,
+  w as isSameWeek,
+  p as parseShortMonthYear
 };

package/dist/components/molecules/datatables/row/row.js

@@ -1,17 +1,29 @@
-import { jsxs as i } from "react/jsx-runtime";
-import { rowContainer as m } from "./styles.js";
-import { t as n } from "../../../../bundle-mjs-CAy1p0fn.js";
-function l({ cells: t, rowHeader: o, minWidth: r, id: e, className: a }) {
-  return /* @__PURE__ */ i(
+import { jsxs as a, jsx as m } from "react/jsx-runtime";
+import o from "react";
+import { rowContainer as s } from "./styles.js";
+import { t as p } from "../../../../bundle-mjs-CAy1p0fn.js";
+function f(t) {
+  return Array.isArray(t) ? t.map((r, e) => {
+    if (o.isValidElement(r)) {
+      const n = r.props;
+      return o.cloneElement(r, {
+        key: r.key ?? n.id ?? `cell-${e}`
+      });
+    }
+    return /* @__PURE__ */ m(o.Fragment, { children: r }, `cell-${e}`);
+  }) : t;
+}
+function l({ cells: t, rowHeader: r, minWidth: e, id: n, className: i }) {
+  return /* @__PURE__ */ a(
     "tr",
     {
-      id: e,
-      className: n(m, a),
-      style: { minWidth: r ? `${r}rem` : "0" },
+      id: n,
+      className: p(s, i),
+      style: { minWidth: e ? `${e}rem` : "0" },
       "data-testid": "table-row-container",
       children: [
-        o,
-        t
+        r,
+        f(t)
       ]
     }
   );

package/dist/components/molecules/navigation/header/header.d.ts

@@ -34,4 +34,4 @@ export type HeaderProps = {
      */
     additionalRightBox?: React.ReactNode;
 };
-export declare function Header({ setShowSideBar, companyLogoUrl, account, hasUnreadMessages, setShowMessages, showMenu, showNotifications, additionalRightBox, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ setShowSideBar, companyLogoUrl, account, showMenu, additionalRightBox, }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/navigation/header/header.js

@@ -1,23 +1,20 @@
-import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { Icons as c } from "../../../atoms/icons/icons.js";
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { Icons as n } from "../../../atoms/icons/icons.js";
 import "../../../atoms/icons/iconsSVGs/Large/Profile.js";
 import "../../../atoms/icons/iconsSVGs/Small/Profile.js";
-import { styles as m } from "./styles.js";
-function v({
+import { styles as o } from "./styles.js";
+function N({
   setShowSideBar: i,
-  companyLogoUrl: o,
-  account: s,
-  hasUnreadMessages: l = !1,
-  setShowMessages: d,
-  showMenu: n = !0,
-  showNotifications: u = !0,
+  companyLogoUrl: m,
+  account: r,
+  showMenu: c = !0,
   additionalRightBox: t
 }) {
-  const e = m();
-  return /* @__PURE__ */ r("div", { className: e.container, "data-testid": "header", children: [
-    /* @__PURE__ */ r("div", { className: e.menuBox, children: [
-      n && /* @__PURE__ */ a(
-        c,
+  const e = o();
+  return /* @__PURE__ */ s("div", { className: e.container, "data-testid": "header", children: [
+    /* @__PURE__ */ s("div", { className: e.menuBox, children: [
+      c && /* @__PURE__ */ a(
+        n,
         {
           id: "HamburgerMenu",
           icon: "HamburgerMenu",
@@ -25,14 +22,14 @@ function v({
           button: !0
         }
       ),
-      /* @__PURE__ */ a("img", { className: "h-[4rem] w-auto", src: o, alt: "Spotwork" })
+      /* @__PURE__ */ a("img", { className: "h-[4rem] w-auto", src: m, alt: "Spotwork" })
     ] }),
-    (s || t) && /* @__PURE__ */ r("div", { className: e.accContainer, children: [
+    (r || t) && /* @__PURE__ */ s("div", { className: e.accContainer, children: [
       t,
-      s && /* @__PURE__ */ a("div", { className: e.account, children: s })
+      r && /* @__PURE__ */ a("div", { className: e.account, children: r })
     ] })
   ] });
 }
 export {
-  v as Header
+  N as Header
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@temp-spotwork/ui",
   "private": false,
-  "version": "1.6.0",
+  "version": "1.6.7",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -90,4 +90,4 @@
     "react-spring": "^9.7.3",
     "tailwindcss-animate": "^1.0.7"
   }
-}
+}