qt-ui-kit 1.0.25 → 1.0.27

package/dist/index.d.mts

@@ -10,6 +10,7 @@ declare enum IntegrationService {
     MSCAL = "microsoft_calendar",
     AJIRA = "atlassian_jira"
 }
+type FilterValues = IntegrationService | "done" | "new" | "fires";
 declare enum BaseIconName {
     SEARCH = "search",
     EXTERNAL_LINK = "external_link",
@@ -62,7 +63,7 @@ type TicketComment = {
     emojis?: string[];
 };
 
-type Props$5 = {
+type Props$6 = {
     onRead?: () => void;
     onSelected?: () => void;
     service?: IntegrationService;
@@ -76,21 +77,21 @@ type Props$5 = {
     urgencyLevel?: UrgencyLevel;
     alert?: boolean;
 };
-declare function PreviewCard({ onRead, onSelected, service, subjectLine, body, sender, source, metadata, date, onClickGoToSource, urgencyLevel, alert, }: Props$5): react_jsx_runtime.JSX.Element;
+declare function PreviewCard({ onRead, onSelected, service, subjectLine, body, sender, source, metadata, date, onClickGoToSource, urgencyLevel, alert, }: Props$6): react_jsx_runtime.JSX.Element;
 
-type Props$4 = {};
-declare function NavBar({}: Props$4): react_jsx_runtime.JSX.Element;
+type Props$5 = {};
+declare function NavBar({}: Props$5): react_jsx_runtime.JSX.Element;
 
-type Props$3 = {
+type Props$4 = {
     eventType?: EventType;
     eventData?: EventGroup[];
     groupUrgency?: UrgencyLevel;
     groupUrgencyText?: string;
     groupSummary?: string;
 };
-declare function EventCard({ eventType, eventData, groupUrgency, groupUrgencyText, groupSummary, }: Props$3): react_jsx_runtime.JSX.Element;
+declare function EventCard({ eventType, eventData, groupUrgency, groupUrgencyText, groupSummary, }: Props$4): react_jsx_runtime.JSX.Element;
 
-type Props$2 = {
+type Props$3 = {
     subjectLine?: string;
     to?: string;
     date?: string;
@@ -100,9 +101,9 @@ type Props$2 = {
     attachments?: string;
     body?: string;
 };
-declare function EmailBody({ subjectLine, to, date, from, CC, BCC, attachments, body, }: Props$2): react_jsx_runtime.JSX.Element;
+declare function EmailBody({ subjectLine, to, date, from, CC, BCC, attachments, body, }: Props$3): react_jsx_runtime.JSX.Element;
 
-type Props$1 = {
+type Props$2 = {
     messages?: MessageData$1[];
 };
 type MessageData$1 = {
@@ -115,9 +116,9 @@ type MessageData$1 = {
     image?: string;
     emojis?: string[];
 };
-declare function ChatBody({ messages }: Props$1): react_jsx_runtime.JSX.Element;
+declare function ChatBody({ messages }: Props$2): react_jsx_runtime.JSX.Element;
 
-type Props = {
+type Props$1 = {
     issueNumber?: string;
     notification?: string;
     project?: string;
@@ -132,10 +133,16 @@ type Props = {
     description?: string;
     comments?: TicketComment[];
 };
-declare function TicketBody({ issueNumber, notification, project, task, dueDate, startDate, assignees, reporter, team, location, related, description, comments, }: Props): react_jsx_runtime.JSX.Element;
+declare function TicketBody({ issueNumber, notification, project, task, dueDate, startDate, assignees, reporter, team, location, related, description, comments, }: Props$1): react_jsx_runtime.JSX.Element;
 
 declare function SearchBar(): react_jsx_runtime.JSX.Element;
 
+type Props = {
+    activeFilters?: Set<FilterValues>;
+    onAddMore?: () => void;
+};
+declare function FilterBar({ activeFilters, onAddMore }: Props): react_jsx_runtime.JSX.Element;
+
 type IconSize = 16 | 20 | 24 | 36;
 
 declare enum EventState {
@@ -225,4 +232,4 @@ type Event = {
 
 declare const fakeMessages: MessageData$1[];
 
-export { type Attachment, BaseIconName, type CalendarData, ChatBody, ColorVariants, EmailBody, type EmailData, type Event, EventCard, type EventData, type EventGroup, EventState, type EventSummaryParts, EventType, type ExternalPerson, NavBar as FilterBar, type IconSize, IntegrationService, type MessageData, NavBar, PreviewCard, SearchBar, TicketBody, type TicketComment, type TicketData, UrgencyLevel, fakeMessages };
+export { type Attachment, BaseIconName, type CalendarData, ChatBody, ColorVariants, EmailBody, type EmailData, type Event, EventCard, type EventData, type EventGroup, EventState, type EventSummaryParts, EventType, type ExternalPerson, FilterBar, type FilterValues, type IconSize, IntegrationService, type MessageData, NavBar, PreviewCard, SearchBar, TicketBody, type TicketComment, type TicketData, UrgencyLevel, fakeMessages };

package/dist/index.d.ts

@@ -10,6 +10,7 @@ declare enum IntegrationService {
     MSCAL = "microsoft_calendar",
     AJIRA = "atlassian_jira"
 }
+type FilterValues = IntegrationService | "done" | "new" | "fires";
 declare enum BaseIconName {
     SEARCH = "search",
     EXTERNAL_LINK = "external_link",
@@ -62,7 +63,7 @@ type TicketComment = {
     emojis?: string[];
 };
 
-type Props$5 = {
+type Props$6 = {
     onRead?: () => void;
     onSelected?: () => void;
     service?: IntegrationService;
@@ -76,21 +77,21 @@ type Props$5 = {
     urgencyLevel?: UrgencyLevel;
     alert?: boolean;
 };
-declare function PreviewCard({ onRead, onSelected, service, subjectLine, body, sender, source, metadata, date, onClickGoToSource, urgencyLevel, alert, }: Props$5): react_jsx_runtime.JSX.Element;
+declare function PreviewCard({ onRead, onSelected, service, subjectLine, body, sender, source, metadata, date, onClickGoToSource, urgencyLevel, alert, }: Props$6): react_jsx_runtime.JSX.Element;
 
-type Props$4 = {};
-declare function NavBar({}: Props$4): react_jsx_runtime.JSX.Element;
+type Props$5 = {};
+declare function NavBar({}: Props$5): react_jsx_runtime.JSX.Element;
 
-type Props$3 = {
+type Props$4 = {
     eventType?: EventType;
     eventData?: EventGroup[];
     groupUrgency?: UrgencyLevel;
     groupUrgencyText?: string;
     groupSummary?: string;
 };
-declare function EventCard({ eventType, eventData, groupUrgency, groupUrgencyText, groupSummary, }: Props$3): react_jsx_runtime.JSX.Element;
+declare function EventCard({ eventType, eventData, groupUrgency, groupUrgencyText, groupSummary, }: Props$4): react_jsx_runtime.JSX.Element;
 
-type Props$2 = {
+type Props$3 = {
     subjectLine?: string;
     to?: string;
     date?: string;
@@ -100,9 +101,9 @@ type Props$2 = {
     attachments?: string;
     body?: string;
 };
-declare function EmailBody({ subjectLine, to, date, from, CC, BCC, attachments, body, }: Props$2): react_jsx_runtime.JSX.Element;
+declare function EmailBody({ subjectLine, to, date, from, CC, BCC, attachments, body, }: Props$3): react_jsx_runtime.JSX.Element;
 
-type Props$1 = {
+type Props$2 = {
     messages?: MessageData$1[];
 };
 type MessageData$1 = {
@@ -115,9 +116,9 @@ type MessageData$1 = {
     image?: string;
     emojis?: string[];
 };
-declare function ChatBody({ messages }: Props$1): react_jsx_runtime.JSX.Element;
+declare function ChatBody({ messages }: Props$2): react_jsx_runtime.JSX.Element;
 
-type Props = {
+type Props$1 = {
     issueNumber?: string;
     notification?: string;
     project?: string;
@@ -132,10 +133,16 @@ type Props = {
     description?: string;
     comments?: TicketComment[];
 };
-declare function TicketBody({ issueNumber, notification, project, task, dueDate, startDate, assignees, reporter, team, location, related, description, comments, }: Props): react_jsx_runtime.JSX.Element;
+declare function TicketBody({ issueNumber, notification, project, task, dueDate, startDate, assignees, reporter, team, location, related, description, comments, }: Props$1): react_jsx_runtime.JSX.Element;
 
 declare function SearchBar(): react_jsx_runtime.JSX.Element;
 
+type Props = {
+    activeFilters?: Set<FilterValues>;
+    onAddMore?: () => void;
+};
+declare function FilterBar({ activeFilters, onAddMore }: Props): react_jsx_runtime.JSX.Element;
+
 type IconSize = 16 | 20 | 24 | 36;
 
 declare enum EventState {
@@ -225,4 +232,4 @@ type Event = {
 
 declare const fakeMessages: MessageData$1[];
 
-export { type Attachment, BaseIconName, type CalendarData, ChatBody, ColorVariants, EmailBody, type EmailData, type Event, EventCard, type EventData, type EventGroup, EventState, type EventSummaryParts, EventType, type ExternalPerson, NavBar as FilterBar, type IconSize, IntegrationService, type MessageData, NavBar, PreviewCard, SearchBar, TicketBody, type TicketComment, type TicketData, UrgencyLevel, fakeMessages };
+export { type Attachment, BaseIconName, type CalendarData, ChatBody, ColorVariants, EmailBody, type EmailData, type Event, EventCard, type EventData, type EventGroup, EventState, type EventSummaryParts, EventType, type ExternalPerson, FilterBar, type FilterValues, type IconSize, IntegrationService, type MessageData, NavBar, PreviewCard, SearchBar, TicketBody, type TicketComment, type TicketData, UrgencyLevel, fakeMessages };

package/dist/index.js

@@ -11184,7 +11184,7 @@ __export(index_exports, {
   EventCard: () => EventCard,
   EventState: () => EventState,
   EventType: () => EventType,
-  FilterBar: () => NavBar,
+  FilterBar: () => FilterBar,
   IntegrationService: () => IntegrationService,
   NavBar: () => NavBar,
   PreviewCard: () => PreviewCard,
@@ -14900,9 +14900,9 @@ function formatCustomRelative(date) {
     return `Tomorrow @ ${format(date, "h:mm a")}`;
   }
   if (isSameWeek(date, now, { weekStartsOn: 1 })) {
-    return `${format(date, "EEEE")} @ ${format(date, "h:mm a")}`;
+    return `${format(date, "EEE")} @ ${format(date, "h:mm a")}`;
   }
-  return `${format(date, "EEEE, do MMMM")} @ ${format(date, "h:mm a")}`;
+  return `${format(date, "EEE, do MMMM")} @ ${format(date, "h:mm a")}`;
 }
 
 // src/components/molecules/text_content/sender_source_row/sender_source_row.tsx
@@ -16400,6 +16400,282 @@ function SearchBar() {
   ] });
 }
 
+// src/components/atoms/icons/base_icons/Mail.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function Mail({
+  size = 24,
+  color = "#1D1D1F",
+  fillColor = "none"
+}) {
+  const getIconData = () => {
+    switch (size) {
+      case 16:
+        return {
+          viewBox: "0 0 16 16",
+          path: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            "path",
+            {
+              d: "M2 5.33337L7.2604 8.84031C7.70827 9.13888 8.29173 9.13888 8.7396 8.84031L14 5.33337M3.33333 12.6667H12.6667C13.403 12.6667 14 12.0698 14 11.3334V4.66671C14 3.93033 13.403 3.33337 12.6667 3.33337H3.33333C2.59695 3.33337 2 3.93033 2 4.66671V11.3334C2 12.0698 2.59695 12.6667 3.33333 12.6667Z",
+              stroke: color,
+              "stroke-width": "1.25",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }
+          )
+        };
+      case 20:
+        return {
+          viewBox: "0 0 20 20",
+          path: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            "path",
+            {
+              d: "M2.5 6.66663L9.0755 11.0503C9.63533 11.4235 10.3647 11.4235 10.9245 11.0503L17.5 6.66663M4.16667 15.8333H15.8333C16.7538 15.8333 17.5 15.0871 17.5 14.1666V5.83329C17.5 4.91282 16.7538 4.16663 15.8333 4.16663H4.16667C3.24619 4.16663 2.5 4.91282 2.5 5.83329V14.1666C2.5 15.0871 3.24619 15.8333 4.16667 15.8333Z",
+              stroke: color,
+              "stroke-width": "1.5",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }
+          )
+        };
+      case 24:
+        return {
+          viewBox: "0 0 24 24",
+          path: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            "path",
+            {
+              d: "M3 8L10.8906 13.2604C11.5624 13.7083 12.4376 13.7083 13.1094 13.2604L21 8M5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19Z",
+              stroke: color,
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }
+          )
+        };
+      case 36:
+        return {
+          viewBox: "0 0 36 36",
+          path: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            "path",
+            {
+              d: "M4.5 12L16.3359 19.8906C17.3436 20.5624 18.6564 20.5624 19.6641 19.8906L31.5 12M7.5 28.5H28.5C30.1569 28.5 31.5 27.1569 31.5 25.5V10.5C31.5 8.84315 30.1569 7.5 28.5 7.5H7.5C5.84315 7.5 4.5 8.84315 4.5 10.5V25.5C4.5 27.1569 5.84315 28.5 7.5 28.5Z",
+              stroke: color,
+              "stroke-width": "2.25",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }
+          )
+        };
+    }
+  };
+  const { viewBox, path } = getIconData();
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox,
+      fill: fillColor,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: path
+    }
+  );
+}
+
+// src/components/atoms/icons/base_icons/PlusLarge.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function PlusLarge({
+  size = 24,
+  color = "#1D1D1F",
+  fillColor = "none"
+}) {
+  const getIconData = () => {
+    switch (size) {
+      case 16:
+        return {
+          viewBox: "0 0 16 16",
+          path: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M8.00033 2.66663V13.3333M13.3337 7.99996L2.66699 7.99996", stroke: color, "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" })
+        };
+      case 20:
+        return {
+          viewBox: "0 0 20 20",
+          path: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M9.99967 3.33337V16.6667M16.6663 10L3.33301 10", stroke: color, "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
+        };
+      case 24:
+        return {
+          viewBox: "0 0 24 24",
+          path: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M12 4V20M20 12L4 12", stroke: color, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })
+        };
+      case 36:
+        return {
+          viewBox: "0 0 36 36",
+          path: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M18 6V30M30 18L6 18", stroke: color, "stroke-width": "2.25", "stroke-linecap": "round", "stroke-linejoin": "round" })
+        };
+    }
+  };
+  const { viewBox, path } = getIconData();
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: path
+    }
+  );
+}
+
+// src/components/molecules/buttons/nav_button/filter_nav_button/filter_nav_button.tsx
+var import_clsx11 = __toESM(require("clsx"));
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function FilterNavButton({ icon, label, active }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "w-min h-min flex flex-none flex-col place-items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "div",
+      {
+        className: (0, import_clsx11.default)(
+          "w-[44px] h-[44px] flex flex-none flex-col place-items-center place-content-center rounded-xl hover:bg-qtneutral-200 hover:border-2 hover:border-qtneutral-500"
+        ),
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "font-medium text-[0.7rem] text-qtneutral-900", children: label })
+  ] });
+}
+
+// src/components/organisms/filter_bar/filter_bar.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function FilterBar({ activeFilters, onAddMore }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col w-[54px] place-items-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      FilterNavButton,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          FireIcon,
+          {
+            variant: activeFilters?.has("fires") ? void 0 : "none" /* OUTLINED */
+          }
+        ),
+        label: "Fires",
+        active: true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      FilterNavButton,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          Mail,
+          {
+            size: 36,
+            fillColor: activeFilters?.has("new") ? "#BFF4F6" : void 0
+          }
+        ),
+        label: "Unread"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      FilterNavButton,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          CheckBox,
+          {
+            size: 36,
+            fillColor: activeFilters?.has("done") ? "#E8FE99" : void 0
+          }
+        ),
+        label: "Done"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("hr", { className: "w-full border-0.5 text-qtneutral-700" }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      FilterNavButton,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          "div",
+          {
+            className: activeFilters?.has("slack" /* SLACK */) ? "" : "grayscale",
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SlackIcon, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      FilterNavButton,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          "div",
+          {
+            className: activeFilters?.has("google_mail" /* GMAIL */) ? "" : "grayscale",
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(GoogleMailIcon, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      FilterNavButton,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          "div",
+          {
+            className: activeFilters?.has("google_calendar" /* GCAL */) ? "" : "grayscale",
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(GoogleCalendarIcon, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      FilterNavButton,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+          "div",
+          {
+            className: activeFilters?.has("atlassian_jira" /* AJIRA */) ? "" : "grayscale",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AtlassianIcon, {}),
+              " "
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      FilterNavButton,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+          "div",
+          {
+            className: activeFilters?.has("microsoft_teams" /* MSTEAMS */) ? "" : "grayscale",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MicrosoftTeamsIcon, {}),
+              " "
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      FilterNavButton,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+          "div",
+          {
+            className: activeFilters?.has(
+              "microsoft_mail" /* MSMAIL */ || "microsoft_calendar" /* MSCAL */
+            ) ? "" : "grayscale",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MicrosoftOutlookMailIcon, {}),
+              " "
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("hr", { className: "w-full border-0.5 text-qtneutral-700" }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { onClick: onAddMore, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FilterNavButton, { icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PlusLarge, { size: 36 }) }) })
+  ] });
+}
+
 // src/types/events.ts
 var EventState = /* @__PURE__ */ ((EventState2) => {
   EventState2["NEW"] = "new";