@uxland/primary-shell 4.3.1 → 5.1.0

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

@@ -1,138 +0,0 @@
-import { LitElement, css, html, nothing, unsafeCSS } from "lit";
-import { when } from "lit/directives/when.js";
-import { customElement, property, query } from "lit/decorators.js";
-import {
-  ConfirmOptions,
-  ConfirmResult,
-  ConfirmType,
-  CustomConfirmOptions,
-  DialogOptions,
-} from "../typings";
-import styles from "./dialog-component-styles.css?inline";
-
-const dssToConfirmType = (type: ConfirmType) => {
-  return type === "danger" ? "error" : type;
-};
-
-const renderActions = (props: DialogComponent) => {
-  if (!props.options.acceptLabel && !props.options.cancelLabel) return nothing;
-  const optionsType = dssToConfirmType(props.options.type);
-
-  return html`
-    <div class="dialog__actions">
-      <dss-button label=${props.options.cancelLabel} size="lg" variant="secondary" @click="${props._cancel}" ?hidden=${!props.options.cancelLabel} id="cancel-btn"></dss-button>
-      <dss-button label=${props.options.acceptLabel} size="lg" variant=${optionsType} @click="${props._accept}" ?hidden=${!props.options.acceptLabel} id="accept-btn"></dss-button>
-    </div>
-  `;
-};
-
-const renderMessage = (options: ConfirmOptions) =>
-  html`<div id="message">${options.message || ""}</div>`;
-
-function renderCustomContent(props: DialogComponent) {
-  if (props.options.componentConstructor) {
-    const component = new props.options.componentConstructor() as LitElement;
-    component.setAttribute("id", "__custom-element__");
-    component.addEventListener("closed", props.componentCloseRequest.bind(props));
-    return html`${component}`;
-  }
-  return nothing;
-}
-
-function renderDefaultContent(props: DialogComponent) {
-  const showClose = (props.options as DialogOptions).showCloseButton;
-  return html`
-    <div class="dialog__header ${props.options.type} ${showClose ? "with-close" : ""}">
-      <h2 part="title">${props.options.title || ""}</h2>
-      ${when(
-        showClose,
-        () =>
-          html`<dss-icon-button size="md" icon="close" @click="${
-            props._cancel
-          }"></dss-icon-button>`,
-        () => nothing,
-      )}
-    </div>
-    <div class="dialog__content">
-      ${when(
-        props.options.message,
-        () => renderMessage(props.options),
-        () => renderCustomContent(props),
-      )}
-    </div>
-    ${renderActions(props)}
-  `;
-}
-
-@customElement("dialog-component")
-export class DialogComponent extends LitElement {
-  render() {
-    return html`
-      <div class="modal">
-        <div class="dialog">
-        ${this.options.fullCustomization ? renderCustomContent(this) : renderDefaultContent(this)}
-        </div>
-      </div>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      ${unsafeCSS(styles)}
-    `;
-  }
-
-  @property()
-  options: ConfirmOptions & CustomConfirmOptions;
-
-  @query(".modal")
-  modal: any;
-
-  _cancel(e) {
-    this.close({ confirmed: false });
-  }
-
-  _accept(e) {
-    this.close({ confirmed: true });
-  }
-
-  componentCloseRequest(e: CustomEvent) {
-    this.close(e.detail);
-  }
-
-  async close(result: ConfirmResult) {
-    let finalResult = result;
-    if (finalResult?.confirmed) {
-      const component = this.getCustomComponent();
-      if (component?.canAccept) {
-        const canAccept = await component.canAccept();
-        if (!canAccept) return;
-      }
-      if (component?.accept) {
-        finalResult = await component.accept(finalResult);
-      }
-    }
-    this.dispatchEvent(new CustomEvent("closed", { detail: finalResult }));
-    this.modal.style.display = "none";
-  }
-
-  getCustomComponent(): 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.css

@@ -1,136 +0,0 @@
-.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;
-
-  .snackbar__message {
-    text-align: left;
-    margin-right: 24px;
-    flex: 1;
-  }
-
-  &.show {
-    visibility: visible; /* Show the snackbar */
-  }
-  &.success {
-    background-color: var(--color-green-500);
-    color: white;
-    box-shadow:
-      rgb(67 160 71 / 30%) 0px 0px 2px,
-      rgb(67 160 71 / 22%) 0px 0px 5px;
-  }
-  &.error {
-    background-color: var(--color-red-500);
-    color: white;
-    box-shadow:
-      rgb(229 57 53 / 30%) 0px 0px 2px,
-      rgb(229 57 53 / 22%) 0px 0px 5px;
-  }
-  &.warning {
-    background-color: var(--color-yellow-500);
-    color: black;
-    box-shadow:
-      rgb(251 140 0 / 30%) 0px 0px 2px,
-      rgb(251 140 0 / 22%) 0px 0px 5px;
-  }
-  &.info {
-    background-color: var(--color-primary-500);
-    color: white;
-    box-shadow:
-      rgb(14 80 138 / 30%) 0px 0px 2px,
-      rgb(14 80 138 / 22%) 0px 0px 5px;
-  }
-
-  &.notification-1 {
-    -webkit-animation:
-      fadein 0.3s,
-      fadeout 0.55s 6s;
-      animation:
-      fadein 0.3s,
-      fadeout 0.55s 6s;
-      bottom: 72px;
-  }
-
-  &.notification-2 {
-    -webkit-animation:
-      fadein 0.3s,
-      fadeout 0.55s 6s;
-      animation:
-      fadein 0.3s,
-      fadeout 0.55s 6s;
-      bottom: 132px;
-  }
-  &.notification-3 {
-    -webkit-animation:
-      fadein 0.3s,
-      fadeout 0.55s 6s;
-      animation:
-      fadein 0.3s,
-      fadeout 0.55s 6s;
-      bottom: 192px;
-  }
-
-  @-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;
-    }
-  }
-
-  #close-btn {
-    cursor: pointer;
-  }
-}

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

@@ -1,69 +0,0 @@
-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.css?inline";
-
-function getIcon(type: NotifyType | undefined) {
-  if (!type) return;
-
-  const types = new Map<NotifyType, string>([
-    ["error", "error"],
-    ["info", "info"],
-    ["warning", "warning"],
-    ["success", "check_circle"],
-  ]);
-
-  return types.get(type) as string;
-}
-
-@customElement("notifier-component")
-export class NotifierComponent extends LitElement {
-  render() {
-    return html`
-      <div class="snackbar ${this.options.type}">
-        <dss-icon icon=${ifDefined(getIcon(this.options.type))} size="md"></dss-icon>
-        <div class="snackbar__message">${this.options.message ?? ""}</div>
-        <div class="snackbar__action">
-          <dss-icon @click="${this.close}" id="close-btn" icon="close" size="md"></dss-icon>
-        </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

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

@@ -1,9 +0,0 @@
-import "./components/dialog-component";
-import { buildDialogComponent } from "./shared";
-import { ConfirmOptions, ConfirmResult, CustomConfirmOptions } from "./typings";
-
-export const confirm = async (
-  options: (ConfirmOptions & CustomConfirmOptions) | any,
-): Promise<ConfirmResult> => {
-  return buildDialogComponent(options);
-};

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

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

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

@@ -1,153 +0,0 @@
-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/open-dialog.ts

@@ -1,8 +0,0 @@
-import "./components/dialog-component";
-import { buildDialogComponent } from "./shared";
-import { DialogOptions } from "./typings";
-
-export const openDialog = (options: DialogOptions | any): void => {
-  options.showCloseButton = "showCloseButton" in options ? options.showCloseButton : true;
-  buildDialogComponent(options);
-};

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

@@ -1,29 +0,0 @@
-import { ConfirmOptions, ConfirmResult, CustomConfirmOptions, DialogOptions } from "./typings";
-
-export const buildDialogComponent = (
-  options: DialogOptions & ConfirmOptions & CustomConfirmOptions,
-): Promise<ConfirmResult> => {
-  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: ConfirmResult }) {
-      component.remove();
-      resolve(e.detail);
-    }
-  });
-};

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

@@ -1,46 +0,0 @@
-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;
-  fullCustomization?: boolean;
-}
-
-export interface DialogOptions<T = any> {
-  title: string;
-  componentConstructor: Constructor<LitElement | any>;
-  model?: T;
-  showCloseButton?: boolean;
-  fullCustomization?: boolean;
-}
-
-export type ConfirmType = "danger" | "warning" | "info" | "success";
-
-export interface NotifyOptions {
-  message?: string;
-  type?: NotifyType;
-  position?: NotifyPosition;
-  order?: string;
-}
-
-export interface ConfirmResult<T = any> {
-  confirmed: boolean;
-  outputModel?: T;
-}
-
-export type NotifyOrder = "first" | "second" | "third" | "fourth" | "fifth";
-export type NotifyPosition = "bottom" | "center" | "top";
-export type NotifyType = "warning" | "info" | "success" | "error";

package/src/api/interaction-manager/interaction.ts

@@ -1,26 +0,0 @@
-import {
-  ConfirmOptions,
-  ConfirmResult,
-  CustomConfirmOptions,
-  DialogOptions,
-  NotifyOptions,
-  confirm,
-  notify,
-  openDialog,
-} from "../../UI/shared-components/primaria-interaction";
-
-export interface PrimariaInteractionManager {
-  notify(options: NotifyOptions): void;
-  confirm(options: ConfirmOptions): Promise<ConfirmResult>;
-  customConfirm(options: CustomConfirmOptions): Promise<ConfirmResult>;
-  openDialog(options: DialogOptions): void;
-}
-
-export const createInteractionManager: () => PrimariaInteractionManager = () => {
-  return {
-    notify: (options: NotifyOptions) => notify(options),
-    confirm: (options: ConfirmOptions) => confirm(options),
-    customConfirm: (options: CustomConfirmOptions) => confirm(options),
-    openDialog: (options: DialogOptions) => openDialog(options),
-  } as PrimariaInteractionManager;
-};