@uxland/primary-shell 1.1.0 → 2.0.0

package/src/UI/shared-components/primaria-interaction/components/dialog-component.ts

@@ -0,0 +1,120 @@
+import { LitElement, css, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { IConfirmMixin } from "../confirm-mixin";
+import { ConfirmOptions, CustomConfirmOptions } from "../typings";
+import styles from "./dialog-component-styles.scss?inline";
+
+const renderActions = (props: DialogComponent) => {
+  if (!props.options.acceptLabel && !props.options.cancelLabel) return nothing;
+  return html`
+        <div class="dialog__actions">
+          <button @click="${props._cancel}" ?hidden=${!props.options.cancelLabel}
+            id="cancel-btn">${props.options.cancelLabel}</button>
+          <button @click="${props._accept}" ?hidden=${!props.options
+            .acceptLabel} id="accept-btn" class="${ifDefined(props.options.type)}" >${
+            props.options.acceptLabel
+          }</button>  
+        </div>
+      `;
+};
+
+const renderMessage = (options: ConfirmOptions) =>
+  html` <div id="message">${options.message || ""}</div> `;
+
+function renderCustomContent(options: CustomConfirmOptions, props: DialogComponent) {
+  if (options.componentConstructor) {
+    const component = new options.componentConstructor() as LitElement;
+    component.setAttribute("id", "__custom-element__");
+    component.addEventListener("closed", props.componentCloseRequest.bind(props));
+    return html`${component}`;
+  }
+  return nothing;
+}
+
+@customElement("dialog-component")
+export class DialogComponent extends LitElement {
+  render() {
+    return html`
+      <div
+        class="modal"
+        @click=${(e) => e.target === this.modal && this.close(false)}
+      >
+        <div
+          class="dialog"
+        >
+          <div class="dialog__header ${this.options.type}">
+            <h2 part="title">${this.options.title || ""}</h2>
+          </div>
+          <div class="dialog__content">
+            ${
+              this.options.message
+                ? renderMessage(this.options)
+                : renderCustomContent(this.options, this)
+            }
+          </div>
+          ${renderActions(this)}
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ${unsafeCSS(styles)}
+    `;
+  }
+
+  @property()
+  options: ConfirmOptions & CustomConfirmOptions;
+
+  @query(".modal")
+  modal: any;
+
+  _cancel(e) {
+    console.log("canceling modal");
+    this.close(false);
+  }
+
+  _accept(e) {
+    console.log("accepting modal");
+    this.close(true);
+  }
+
+  componentCloseRequest(e: CustomEvent) {
+    this.close(e.detail);
+  }
+
+  async close(result: boolean) {
+    if (result) {
+      const component = this.getCustomComponent();
+      if (component?.canAccept) {
+        const canAccept = await component.canAccept();
+        if (!canAccept) return;
+        if (component.accept) await component.accept();
+      }
+    }
+    this.modal.style.display = "none";
+    this.dispatchEvent(new CustomEvent("closed", { detail: result }));
+  }
+
+  getCustomComponent(): IConfirmMixin | any {
+    return this.shadowRoot?.querySelector("#__custom-element__");
+  }
+
+  @query("#accept-btn")
+  acceptButton: HTMLElement;
+
+  @query("#actions")
+  actionsContainer: HTMLElement;
+
+  @query("#header")
+  header: HTMLElement;
+
+  @query("#content")
+  content: HTMLElement;
+
+  show() {
+    this.modal.style.display = "block";
+  }
+}

package/src/UI/shared-components/primaria-interaction/components/notifier-component-styles.scss

@@ -0,0 +1,128 @@
+.snackbar {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 10px;
+  visibility: hidden; /* Hidden by default. Visible on click */
+  min-width: 250px; /* Set a default minimum width */
+  width: 417px;
+  height: 56px;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 10px;
+  font-weight: 500;
+  padding: 12px 16px;
+  position: fixed;
+  z-index: 500;
+  left: 24px;
+  box-shadow:
+    0 0px 2px rgba(0, 0, 0, 0.16),
+    0 0px 5px rgba(0, 0, 0, 0.23);
+  border: 2px solid;
+  border-color: transparent;
+
+  &__message {
+    text-align: left;
+    margin-right: 24px;
+    flex: 1;
+  }
+
+  &.show {
+    visibility: visible; /* Show the snackbar */
+  }
+  &.success {
+    background-color: #00893d;
+    color: white;
+    box-shadow:
+      rgb(67 160 71 / 30%) 0px 0px 2px,
+      rgb(67 160 71 / 22%) 0px 0px 5px;
+  }
+  &.danger {
+    background-color: red;
+    color: white;
+    box-shadow:
+      rgb(229 57 53 / 30%) 0px 0px 2px,
+      rgb(229 57 53 / 22%) 0px 0px 5px;
+  }
+  &.warning {
+    background-color: orange;
+    color: white;
+    box-shadow:
+      rgb(251 140 0 / 30%) 0px 0px 2px,
+      rgb(251 140 0 / 22%) 0px 0px 5px;
+  }
+  &.info {
+    background-color: blue;
+    color: white;
+    box-shadow:
+      rgb(14 80 138 / 30%) 0px 0px 2px,
+      rgb(14 80 138 / 22%) 0px 0px 5px;
+  }
+
+  $baseBottom: 72px;
+  $increment: 60px;
+
+  @for $i from 1 through 10 {
+    $bottom: $baseBottom + ($increment * ($i - 1));
+
+    /* Animations to fade the snackbar in and out */
+    @-webkit-keyframes fadein {
+      from {
+        bottom: 0;
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes fadein {
+      from {
+        bottom: 0;
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    @-webkit-keyframes fadeout {
+      from {
+        opacity: 1;
+      }
+      to {
+        bottom: 0;
+        opacity: 0;
+      }
+    }
+
+    @keyframes fadeout {
+      from {
+        opacity: 1;
+      }
+      to {
+        bottom: 0;
+        opacity: 0;
+      }
+    }
+
+    &.notification-#{$i} {
+      -webkit-animation:
+        fadein 0.3s,
+        fadeout 0.55s 6s;
+      animation:
+        fadein 0.3s,
+        fadeout 0.55s 6s;
+      bottom: $bottom;
+    }
+  }
+
+  #close-btn {
+    cursor: pointer;
+  }
+  span.dss-icon {
+    color: white;
+  }
+}

package/src/UI/shared-components/primaria-interaction/components/notifier-component.ts

@@ -0,0 +1,73 @@
+import { LitElement, css, html, unsafeCSS } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { NotifyOptions, NotifyType } from "../typings";
+import styles from "./notifier-component-styles.scss?inline";
+
+function getIcon(type: NotifyType | undefined) {
+  if (!type) return;
+
+  const types = new Map<NotifyType, string>([
+    ["danger", "cancel"],
+    ["info", "info"],
+    ["warning", "warning"],
+    ["success", "done"],
+  ]);
+
+  return types.get(type) as string;
+}
+
+@customElement("notifier-component")
+export class NotifierComponent extends LitElement {
+  render() {
+    return html`
+      <div class="snackbar ${this.options.type}">
+        <i class="dss-icon-button dss-icon-button--primary dss-icon-button--md ">
+          <span class="dss-icon">${ifDefined(getIcon(this.options.type))}</span>
+        </i>
+        <div class="snackbar__message">${this.options.message ?? ""}</div>
+        <div class="snackbar__action">
+          <dss-container><button class="dss-icon-button dss-icon-button--success dss-icon-button--md">
+            <span class="dss-icon" @click="${this.close}">close</span> 
+          </button></dss-container>
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ${unsafeCSS(styles)}
+    `;
+  }
+
+  @property({ type: Object })
+  options: NotifyOptions;
+
+  @query(".snackbar")
+  snackbar: HTMLElement;
+
+  show() {
+    this.snackbar.classList.add("show");
+  }
+
+  clearAndUpdateOrder(order: string) {
+    const classListValues = this.snackbar.classList.values();
+
+    for (const singleClass of classListValues) {
+      if (!singleClass.startsWith("notification")) continue;
+
+      this.snackbar.classList.remove(singleClass);
+    }
+
+    this.snackbar.classList.add(order);
+
+    this.requestUpdate();
+  }
+
+  close() {
+    this.snackbar.classList.remove("show");
+
+    this.dispatchEvent(new CustomEvent("closed"));
+  }
+}

package/src/UI/shared-components/primaria-interaction/confirm-mixin.ts

@@ -0,0 +1,39 @@
+import { dedupeMixin } from "@uxland/lit-utilities";
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { Constructor } from "./typings";
+
+export interface IConfirmMixin {
+  model: any;
+  close(result: boolean): void;
+  canAccept(): Promise<boolean> | boolean;
+  accept(): Promise<void> | void;
+}
+
+export declare class ConfirmMixinBase {
+  model: any;
+  close(result: boolean): void;
+  canAccept(): Promise<boolean> | boolean;
+  accept(): Promise<void> | void;
+}
+
+const ConfirmMixin = dedupeMixin(<T extends Constructor<LitElement>>(superClass: T) => {
+  class ConfirmMixinClass extends superClass implements ConfirmMixinBase {
+    @property()
+    model: T;
+    close(result: boolean) {
+      (this as any).dispatchEvent(new CustomEvent("closed", { detail: result }));
+    }
+    canAccept(): Promise<boolean> | boolean {
+      return Promise.resolve(true);
+    }
+    accept(): Promise<void> | void {
+      return Promise.resolve();
+    }
+  }
+  return ConfirmMixinClass as Constructor<ConfirmMixinBase> & T;
+});
+
+export function confirmMixin<T extends Constructor<LitElement>>(superClass: T) {
+  return ConfirmMixin(superClass as any) as unknown as Constructor<ConfirmMixinBase> & T;
+}

package/src/UI/shared-components/primaria-interaction/confirm.ts

@@ -0,0 +1,30 @@
+import "./components/dialog-component";
+import { ConfirmOptions, CustomConfirmOptions } from "./typings";
+
+export const doConfirm = async (
+  options: (ConfirmOptions & CustomConfirmOptions) | any,
+): Promise<any> => {
+  if (!options.message && !options.componentConstructor) {
+    throw new Error("message, componentConstructor options properties are required");
+  }
+  return new Promise((resolve) => {
+    const component: any = document.body.appendChild(document.createElement("dialog-component"));
+
+    component.options = options;
+    const result = component.updateComplete;
+
+    result.then(() => {
+      if (options.componentConstructor) {
+        const customComponent = component.shadowRoot.querySelector(`#__custom-element__`);
+        customComponent.model = options.model;
+      }
+      component.addEventListener("closed", closeComponent);
+      component.options && component.show();
+    });
+
+    function closeComponent(e: { detail: any }) {
+      component.remove();
+      resolve(e.detail);
+    }
+  });
+};

package/src/UI/shared-components/primaria-interaction/index.ts

@@ -0,0 +1,4 @@
+export * from "./confirm";
+export * from "./notify";
+export * from "./confirm-mixin";
+export * from "./typings";

package/src/UI/shared-components/primaria-interaction/notify.ts

@@ -0,0 +1,153 @@
+import "./components/notifier-component";
+import { NotifierComponent } from "./components/notifier-component";
+import { NotifyOptions } from "./typings";
+
+function rand(c: "x" | "y") {
+  const r = (Math.random() * 16) | 0;
+  const v = c === "x" ? r : (r & 0x3) | 0x8;
+  return v.toString(16);
+}
+
+export function generateId() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, rand);
+}
+
+type NotifyOptionsWithId = NotifyOptions & { id: string };
+
+const notificationStack: NotifyOptionsWithId[] = [];
+
+const displayNotifications: NotifyOptionsWithId[] = [];
+
+const stackLimit = 10;
+
+const timeToCloseNotification = 5;
+
+const updateNotificationOptsOrder = () => {
+  for (const [idx, notification] of displayNotifications.entries()) {
+    notification.order = `notification-${idx + 1}`;
+  }
+};
+
+const getComponentById = (id: string | undefined) =>
+  id ? (document.getElementById(id) as NotifierComponent | undefined) : undefined;
+
+const showAndSetTimeOutClose = (component: NotifierComponent, timeInSeconds: number) => {
+  if (!getComponentById(component.id)) return;
+
+  component.show();
+
+  setTimeout(() => {
+    component.close();
+  }, timeInSeconds * 1000);
+};
+
+const removeCurrentComponent = (id: string) => {
+  const currentComponentIdx = displayNotifications.findIndex((n) => n.id === id);
+
+  const currentComponent = getComponentById(displayNotifications[currentComponentIdx]?.id);
+
+  if (!currentComponent) return;
+
+  currentComponent.remove();
+
+  displayNotifications.splice(currentComponentIdx, 1);
+};
+
+const removeFromStackAndAddToDisplay = () => {
+  const nextNotificationOpts = notificationStack[0];
+
+  const nextNotificationIsVisible =
+    nextNotificationOpts && displayNotifications.find((n) => n.id === nextNotificationOpts.id);
+
+  if (nextNotificationOpts && !nextNotificationIsVisible) {
+    displayNotifications.push(nextNotificationOpts);
+
+    notificationStack.shift();
+  }
+};
+
+const refreshAllComponentsOrder = () => {
+  for (const notification of displayNotifications) {
+    if (!notification.order) continue;
+
+    const notificationComponent = getComponentById(notification.id);
+
+    if (!notificationComponent) continue;
+
+    notificationComponent.clearAndUpdateOrder(notification.order);
+  }
+};
+
+const setNewDisplayNotification = () => {
+  const lastNotificationIdx = displayNotifications.length - 1;
+
+  const lastDisplayNotification = displayNotifications[lastNotificationIdx];
+
+  if (!lastDisplayNotification) return;
+
+  const lastComponent = getComponentById(lastDisplayNotification.id);
+
+  if (!lastComponent) return;
+
+  showAndSetTimeOutClose(lastComponent, timeToCloseNotification);
+};
+
+const closeAndUpdateStack = (id: string) => {
+  removeCurrentComponent(id);
+
+  removeFromStackAndAddToDisplay();
+
+  updateNotificationOptsOrder();
+
+  refreshAllComponentsOrder();
+
+  setNewDisplayNotification();
+};
+
+const createNotifyComponent = (options: NotifyOptions, id: string) => {
+  const notifierComponentName = "notifier-component";
+
+  const component = document.body.appendChild(
+    document.createElement(notifierComponentName),
+  ) as NotifierComponent;
+
+  component.options = options;
+
+  component.id = id;
+
+  return component;
+};
+
+export const notify = (options: NotifyOptions) => {
+  const id = `${generateId()}`;
+
+  const optionWithId = { ...options, id };
+
+  if (displayNotifications.length < stackLimit) {
+    displayNotifications.push(optionWithId);
+  } else {
+    notificationStack.push(optionWithId);
+  }
+
+  if (!options.message) throw new Error("message is required");
+
+  const component = createNotifyComponent(options, id);
+
+  component.addEventListener("closed", () => closeAndUpdateStack(id));
+
+  const componentIsReady = component.updateComplete;
+
+  componentIsReady.then(() => {
+    if (!notificationStack.length && displayNotifications.length <= stackLimit) {
+      updateNotificationOptsOrder();
+
+      const order = displayNotifications.find((n) => n.id === id)?.order;
+
+      if (!order) return;
+
+      component.clearAndUpdateOrder(order);
+
+      showAndSetTimeOutClose(component, timeToCloseNotification);
+    }
+  });
+};

package/src/UI/shared-components/primaria-interaction/typings.ts

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+export declare type Constructor<T = Record<string, unknown>> = new (...args: any[]) => T;
+
+export interface ConfirmOptions {
+  title: string;
+  message: string;
+  type: ConfirmType;
+  acceptLabel: string;
+  cancelLabel: string;
+}
+
+export interface CustomConfirmOptions<T = any> {
+  title: string;
+  componentConstructor: Constructor<LitElement | any>;
+  type: ConfirmType;
+  acceptLabel?: string;
+  cancelLabel?: string;
+  model?: T;
+}
+
+export type ConfirmType = "danger" | "warning" | "info" | "success";
+
+export interface NotifyOptions {
+  message?: string;
+  type?: NotifyType;
+  position?: NotifyPosition;
+  order?: string;
+}
+
+export type NotifyOrder = "first" | "second" | "third" | "fourth" | "fifth";
+export type NotifyPosition = "bottom" | "center" | "top";
+export type NotifyType = "danger" | "warning" | "info" | "success" | "error";

package/src/UI/shared-components/primaria-menu-item/primaria-menu-item.ts

@@ -0,0 +1,25 @@
+import { LitElement, html, css, unsafeCSS } from "lit";
+import { template } from "./template";
+import styles from "./styles.scss?inline";
+import { customElement } from "lit/decorators.js";
+
+@customElement("primaria-menu-item")
+export class PrimariaMenuItem extends LitElement {
+  constructor(icon: string, label: string, callbackFn: () => void) {
+    super();
+    this.icon = icon;
+    this.label = label;
+    this.callbackFn = callbackFn;
+  }
+  render() {
+    return html`${template(this)}`;
+  }
+
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  icon: string;
+  label: string;
+  callbackFn: () => void;
+}

package/src/UI/shared-components/primaria-menu-item/styles.scss

@@ -0,0 +1,10 @@
+.item {
+  display:flex;
+  flex-direction:row;
+  cursor: pointer;
+  border-radius: 8px;
+  border: 1px;
+  border-color: white;
+  padding: 8px;
+  gap: 8px;
+}

package/src/UI/shared-components/primaria-menu-item/template.ts

@@ -0,0 +1,8 @@
+import { html } from "lit";
+import { PrimariaMenuItem } from "./primaria-menu-item";
+
+export const template = (props: PrimariaMenuItem) => html`
+<div class="item" @click=${props.callbackFn}>
+    <dss-container><i class="dss-icon dss-icon--md">${props.icon}</i></dss-container>
+    <span>${props.label}</span>
+</div>`;