@uxland/primary-shell 1.1.0 → 2.0.0

package/src/UI/shared-components/primaria-text-editor/template.ts

@@ -0,0 +1,8 @@
+import { html } from "lit";
+
+export const template = (props) => html`
+    <div class="container">
+        <div id="rte">
+        </div>
+    </div>
+`;

package/src/UI/shared-components/primaria-text-editor/utils.ts

@@ -0,0 +1,39 @@
+//Hay una issue detectada en el component quilljs que borra algunas palabras/parrafos al corregir palabras con el corrector del navegador
+//Sólo pasa cuando el texto se ha copiado y enganchado de una fuente externa y contiene estilos(negritas, colores, etc).
+//https://github.com/quilljs/quill/issues/2096
+//Este fix corrige este comportamiento.
+export const fixSpellCheckerIssue = (Quill) => {
+  const Inline = Quill.import("blots/inline");
+
+  class CustomAttributes extends Inline {
+    constructor(domNode, value) {
+      super(domNode, value);
+
+      const span = this.replaceWith(new Inline(Inline.create()));
+
+      span.children.forEach((child) => {
+        if (child.attributes) child.attributes.copy(span);
+        if (child.unwrap) child.unwrap();
+      });
+
+      // here we apply every attribute from <font> tag to span as a style
+      Object.keys(domNode.attributes).forEach(function (key) {
+        if (domNode.attributes[key].name != "style") {
+          const val = domNode.attributes[key].value;
+          let name = domNode.attributes[key].name;
+          if (name == "face") name = "font-family";
+          span.format(name, val);
+        }
+      });
+
+      this.remove();
+
+      return span;
+    }
+  }
+
+  CustomAttributes.blotName = "customAttributes";
+  CustomAttributes.tagName = "FONT";
+
+  Quill.register(CustomAttributes, true);
+};

package/src/UI/styles/_flex-layout.scss

@@ -0,0 +1,203 @@
+@mixin layout {
+  display: flex;
+}
+@mixin layout-inline {
+  display: inline-flex;
+}
+@mixin layout-horizontal {
+  @include layout;
+  flex-direction: row;
+}
+@mixin layout-horizontal-reverse {
+  @include layout;
+  flex-direction: row-reverse;
+}
+@mixin layout-vertical {
+  @include layout;
+  flex-direction: column;
+}
+@mixin layout-vertical-reverse {
+  @include layout;
+  flex-direction: column-reverse;
+}
+@mixin layout-wrap {
+  flex-wrap: wrap;
+}
+@mixin layout-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+@mixin layout-flex-auto {
+  flex: 1 1 auto;
+}
+@mixin layout-flex-none {
+  flex: none;
+}
+@mixin layout-flex {
+  flex: 1;
+}
+@mixin layout-flex-2 {
+  flex: 2;
+}
+@mixin layout-flex-3 {
+  flex: 3;
+}
+@mixin layout-flex-4 {
+  flex: 4;
+}
+@mixin layout-flex-5 {
+  flex: 5;
+}
+@mixin layout-flex-6 {
+  flex: 6;
+}
+@mixin layout-flex-7 {
+  flex: 7;
+}
+@mixin layout-flex-8 {
+  flex: 8;
+}
+@mixin layout-flex-9 {
+  flex: 9;
+}
+@mixin layout-flex-10 {
+  flex: 10;
+}
+@mixin layout-flex-11 {
+  flex: 11;
+}
+@mixin layout-flex-12 {
+  flex: 12;
+}
+@mixin layout-start {
+  align-items: flex-start;
+}
+@mixin layout-center {
+  align-items: center;
+}
+@mixin layout-end {
+  align-items: flex-end;
+}
+@mixin layout-baseline {
+  align-items: baseline;
+}
+@mixin layout-stretch {
+  align-items: stretch;
+}
+@mixin layout-start-justified {
+  justify-content: flex-start;
+}
+@mixin layout-center-justified {
+  justify-content: center;
+}
+@mixin layout-end-justified {
+  justify-content: flex-end;
+}
+@mixin layout-around-justified {
+  justify-content: space-around;
+}
+@mixin layout-justified {
+  justify-content: space-between;
+}
+@mixin layout-center-center {
+  @include layout-center;
+  @include layout-center-justified;
+}
+@mixin layout-self-start {
+  align-self: flex-start;
+}
+@mixin layout-self-center {
+  align-self: center;
+}
+@mixin layout-self-end {
+  align-self: flex-end;
+}
+@mixin layout-self-stretch {
+  align-self: stretch;
+}
+@mixin layout-self-baseline {
+  align-self: baseline;
+}
+@mixin layout-start-aligned {
+  align-content: flex-start;
+}
+@mixin layout-end-aligned {
+  align-content: flex-end;
+}
+@mixin layout-center-aligned {
+  align-content: center;
+}
+@mixin layout-between-aligned {
+  align-content: space-between;
+}
+@mixin layout-around-aligned {
+  align-content: space-around;
+}
+
+@mixin layout-block {
+  display: block;
+}
+@mixin layout-invisible {
+  visibility: hidden !important;
+}
+@mixin layout-relative {
+  position: relative;
+}
+@mixin layout-fit {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+@mixin layout-scroll {
+  overflow: auto;
+}
+@mixin layout-fullbleed {
+  margin: 0;
+  height: 100vh;
+}
+
+@mixin layout-fixed-top {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+@mixin layout-fixed-right {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+@mixin layout-fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+@mixin layout-fixed-left {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+
+@mixin horizontal-center {
+  @include layout-horizontal;
+  @include layout-center;
+}
+
+@mixin vertical-center {
+  @include layout-vertical;
+  @include layout-center;
+}
+
+@mixin horizontal-center-justified {
+  @include horizontal-center;
+  @include layout-justified;
+}
+
+@mixin vertical-flex {
+  @include layout-vertical;
+  @include layout-flex;
+}

package/src/UI/styles/_normalize.scss

@@ -0,0 +1,3 @@
+*[hidden] {
+  display: none !important;
+}

package/src/UI/styles/_variables.scss

@@ -0,0 +1,40 @@
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semi-bold: 600;
+$font-weight-bold: 700;
+
+$font-size-4: 0.285714285714286rem;
+$font-size-5: 0.357142857142857rem;
+$font-size-8: 0.5714rem;
+$font-size-9: 0.6429rem;
+$font-size-10: 0.7143rem;
+$font-size-11: 0.7857rem;
+$font-size-12: 0.8571rem;
+$font-size-13: 0.9286rem;
+$font-size-14: 1rem;
+$font-size-15: 1.071rem;
+$font-size-16: 1.143rem;
+$font-size-18: 1.286rem;
+$font-size-20: 1.429rem;
+$font-size-22: 1.571rem;
+$font-size-24: 1.714rem;
+$font-size-26: 1.857rem;
+$font-size-28: 2rem;
+$font-size-30: 2.143rem;
+$font-size-32: 2.286rem;
+$font-size-34: 2.429rem;
+$font-size-36: 2.571rem;
+$font-size-38: 2.714rem;
+$font-size-40: 2.857rem;
+$font-size-42: 3rem;
+$font-size-44: 3.143rem;
+$font-size-46: 3.286rem;
+$font-size-48: 3.429rem;
+$font-size-50: 3.571rem;
+$font-size-52: 3.714rem;
+$font-size-54: 3.857rem;
+$font-size-56: 4rem;
+$font-size-58: 4.143rem;
+$font-size-60: 4.286rem;
+$font-size-120: 8.571428571428571rem;

package/src/UI/styles/styles.scss

@@ -0,0 +1,3 @@
+@import "_flex-layout.scss";
+@import "_variables.scss";
+@import "_normalize.scss";

package/src/UI/styles/theme/apply-theme.ts

@@ -0,0 +1,11 @@
+const themeCSSVariables = `
+      :root{
+        --primaria-primary-color: #0054A8;
+      }
+  `;
+
+export const appendTheme = () => {
+  const styleElement = document.createElement("style");
+  styleElement.appendChild(document.createTextNode(themeCSSVariables));
+  document.head.appendChild(styleElement);
+};

package/src/api/api.ts

@@ -0,0 +1,63 @@
+import {
+  ApiFactory,
+  HarmonixApi,
+  IRegionManager,
+  PluginInfo,
+  createRegionHost,
+  createRegionManager,
+} from "@uxland/harmonix";
+import { createLocaleManager } from "./localization/localization";
+import { PrimariaRegionManager, createRegionManagerProxy } from "../region-manager";
+import {
+  PrimariaInteractionManager,
+  createInteractionManager,
+} from "./interaction-manager/interaction";
+import { PrimariaGlobalStateManager, createGlobalStateManager } from "./global-state/global-state";
+import { PrimariaBroker } from "./broker/primaria-broker";
+import { createBroker } from "./broker/factory";
+const broker = createBroker();
+
+interface PrimariaHttpClient {
+  get(url: string): Promise<any>;
+  post(url: string, data: any): Promise<any>;
+}
+
+export interface PrimariaApi extends HarmonixApi {
+  httpClient: PrimariaHttpClient;
+  interactionManager: PrimariaInteractionManager;
+  broker: PrimariaBroker;
+  regionManager: PrimariaRegionManager;
+  globalStateManager: PrimariaGlobalStateManager;
+}
+
+const regionManager: IRegionManager = createRegionManager("primaria");
+export const PrimariaRegionHost: any = createRegionHost(regionManager as any);
+
+/**
+ * Factory function that creates a Primaria API instance.
+ *
+ * @param {PluginInfo} pluginInfo - Information about the plugin
+ * @return {PrimariaApi} The created Primaria API instance
+ */
+export const primariaApiFactory: ApiFactory<PrimariaApi> = (
+  pluginInfo: PluginInfo,
+): PrimariaApi => {
+  return {
+    pluginInfo: pluginInfo,
+    regionManager: createRegionManagerProxy(pluginInfo, regionManager),
+    httpClient: {
+      get: (url: string) => fetch(url).then((r) => r.json()),
+      post: (url: string, data: any) =>
+        fetch(url, {
+          method: "POST",
+          body: JSON.stringify(data),
+        }).then((r) => r.json()),
+    },
+    interactionManager: { ...createInteractionManager() },
+    broker: broker,
+    createLocaleManager: createLocaleManager(pluginInfo.pluginId) as any,
+    globalStateManager: createGlobalStateManager(broker),
+  };
+};
+
+export const shellApi = primariaApiFactory({ pluginId: "primaria-shell" }) as PrimariaApi;

package/src/api/broker/factory.test.ts

@@ -0,0 +1,124 @@
+import { beforeEach, describe, Mock, vi, it, expect } from "vitest";
+import { PrimariaBroker } from "./primaria-broker";
+import { createBroker } from "./factory";
+import { IEvent, IRequest } from "@uxland/harmonix";
+
+describe("Broker test", () => {
+  let sut: PrimariaBroker;
+
+  beforeEach(() => {
+    sut = createBroker();
+  });
+
+  describe("Event bus test", () => {
+    describe("Test by Event instance", () => {
+      class MyEvent implements IEvent {
+        constructor(public greeting: string) {}
+      }
+      describe("Given some subscriptions for an event", () => {
+        let handlers: Mock[];
+        beforeEach(() => {
+          handlers = Array.from({ length: 5 }).map(() => {
+            const handler = vi.fn();
+            sut.subscribe(MyEvent, handler);
+            return handler;
+          });
+        });
+        describe("When event is published", () => {
+          beforeEach(() => {
+            sut.publish(new MyEvent("Hello"));
+          });
+          it("Then handler is called", () => {
+            for (const handler of handlers) {
+              expect(handler).toBeCalledWith({ greeting: "Hello" });
+            }
+          });
+        });
+      });
+    });
+    describe("Test by event name", () => {
+      describe("Given some subscriptions for an event", () => {
+        let handlers: Mock[];
+        beforeEach(() => {
+          handlers = Array.from({ length: 5 }).map(() => {
+            const handler = vi.fn();
+            sut.subscribe("MyEvent", handler);
+            return handler;
+          });
+        });
+        describe("When event is published", () => {
+          beforeEach(() => {
+            sut.publish("MyEvent", { greeting: "Hello" });
+          });
+          it("Then handler is called", () => {
+            for (const handler of handlers) {
+              expect(handler).toBeCalledWith({ greeting: "Hello" });
+            }
+          });
+        });
+      });
+    });
+  });
+  describe("Message broker test", () => {
+    describe("Test by Request instance", () => {
+      class MyRequest implements IRequest<string> {
+        constructor(public greeting: string) {}
+      }
+      describe("Given a handler for a request", () => {
+        let handler: Mock;
+        const greeting = "World!";
+        beforeEach(() => {
+          handler = vi.fn();
+          handler.mockResolvedValue(`Hello ${greeting}`);
+          sut.registerRequest(MyRequest, handler);
+        });
+        describe("When request is sent", () => {
+          let result: string;
+          beforeEach(async () => {
+            result = await sut.send(new MyRequest(greeting));
+          });
+          it("Then handler is called", () => {
+            expect(handler).toBeCalledWith({ greeting });
+          });
+          it("Then result is returned", () => {
+            expect(result).toBe(`Hello ${greeting}`);
+          });
+        });
+      });
+      it("Should fail if a request is registered twice", () => {
+        sut.registerRequest(MyRequest, () => {});
+        expect(() => sut.registerRequest(MyRequest, () => {})).toThrowError();
+      });
+    });
+
+    describe("Test by request name", () => {
+      const requestName = "MyRequest";
+      describe("Given a handler for a request", () => {
+        let handler: Mock;
+        const greeting = "World!";
+
+        beforeEach(() => {
+          handler = vi.fn();
+          handler.mockResolvedValue(`Hello ${greeting}`);
+          sut.registerRequest(requestName, handler);
+        });
+        describe("When request is sent", () => {
+          let result: string;
+          beforeEach(async () => {
+            result = await sut.send(requestName, { greeting });
+          });
+          it("Then handler is called", () => {
+            expect(handler).toBeCalledWith({ greeting });
+          });
+          it("Then result is returned", () => {
+            expect(result).toBe(`Hello ${greeting}`);
+          });
+        });
+      });
+      it("Should fail if a request is registered twice", () => {
+        sut.registerRequest(requestName, () => {});
+        expect(() => sut.registerRequest(requestName, () => {})).toThrowError();
+      });
+    });
+  });
+});

package/src/api/broker/factory.ts

@@ -0,0 +1,122 @@
+import { HarmonixBroker, IEvent, IEventClass, IRequest, IRequestClass } from "@uxland/harmonix";
+import { Mediator, mediatorSettings, notificationHandler, requestHandler } from "mediatr-ts";
+import { PrimariaBroker } from "./primaria-broker";
+
+type messageHandler = (payload: unknown) => unknown | Promise<unknown>;
+
+class Broker implements PrimariaBroker {
+  private mediator: Mediator;
+  constructor() {
+    this.mediator = new Mediator();
+    mediatorSettings.resolver.clear();
+  }
+  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  private eventConstructorMap: Map<string, Function> = new Map();
+
+  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  private requestConstructorMap: Map<string, Function> = new Map();
+
+  send<TRequest extends IRequest<TResponse>, TResponse>(message: TRequest): Promise<TResponse>;
+  send<TPayload, TResponse>(requestName: string, payload: TPayload): Promise<TResponse>;
+  send<TResponse>(request: IRequest<TResponse> | string, payload?: unknown): Promise<TResponse> {
+    const eventPayload =
+      typeof request === "string"
+        ? this.getRequest<TResponse>(request as string, payload)
+        : request;
+    return this.mediator.send(eventPayload);
+  }
+  publish<TEvent extends IEvent>(event: TEvent): Promise<void>;
+  publish<TPayload>(eventName: string, payload: TPayload): Promise<void>;
+  publish(event: string | IEvent, payload?: unknown): Promise<void> {
+    const eventPayload =
+      typeof event === "string" ? this.getEvent(event as string, payload) : event;
+    return this.mediator.publish(eventPayload);
+  }
+  subscribe<TEvent extends IEvent>(
+    event: TEvent,
+    handler: (message: TEvent) => void,
+  ): HarmonixBroker;
+  subscribe<TPayload>(eventName: string, handler: (message: TPayload) => void): HarmonixBroker;
+  subscribe(event: string | IEventClass, handler: messageHandler): HarmonixBroker {
+    const eventType = typeof event === "function" ? event : this.getEventType(event as string);
+    notificationHandler(eventType)(createDynamicEventHandler(handler));
+    return this;
+  }
+  registerRequest<TRequest extends IRequest<TResponse>, TResponse>(
+    request: TRequest,
+    handler: (message: TRequest) => TResponse,
+  ): HarmonixBroker;
+  registerRequest<TPayload, TResponse>(
+    requestName: string,
+    handler: (message: TPayload) => TResponse,
+  ): HarmonixBroker;
+  registerRequest(
+    request: string | IRequestClass<unknown>,
+    handler: messageHandler,
+  ): HarmonixBroker {
+    const requestType =
+      typeof request === "function" ? request : this.getRequestType(request as string);
+    requestHandler(requestType)(createDynamicRequestHandler(handler));
+    return this;
+  }
+
+  private getEvent(eventName: string, payload: unknown): IEvent {
+    const eventConstructor = this.getEventType(eventName);
+    return new eventConstructor(payload) as IEvent;
+  }
+
+  private getRequest<TResponse>(requestName: string, payload: unknown): IRequest<TResponse> {
+    const requestConstructor = this.getRequestType(requestName);
+    return new requestConstructor(payload) as IRequest<unknown>;
+  }
+
+  private getEventType(eventName: string): IEventClass {
+    if (!this.eventConstructorMap.has(eventName)) {
+      const clazz = createDynamicEventClass(eventName);
+      this.eventConstructorMap.set(eventName, clazz);
+    }
+    return this.eventConstructorMap.get(eventName) as IEventClass;
+  }
+
+  private getRequestType(requestName: string): IRequestClass<unknown> {
+    if (!this.requestConstructorMap.has(requestName)) {
+      const clazz = createDynamicRequestClass(requestName);
+      this.requestConstructorMap.set(requestName, clazz);
+    }
+    return this.requestConstructorMap.get(requestName) as IRequestClass<unknown>;
+  }
+}
+
+const createDynamicEventClass = (eventName: string) =>
+  createDynamicMessageClass(eventName, "Event");
+
+const createDynamicRequestClass = (requestName: string) =>
+  createDynamicMessageClass(requestName, "Request");
+
+const createDynamicMessageClass = (eventName: string, classPrefix: string) => {
+  return new Function(`return class ${classPrefix}_${eventName} {
+    constructor(payload) {
+            Object.assign(this, payload);
+        }
+    }`)();
+};
+
+const createDynamicRequestHandler = (handler: messageHandler) =>
+  createDynamicMessageHandler(handler, "RequestHandler");
+const createDynamicEventHandler = (handler: messageHandler) =>
+  createDynamicMessageHandler(handler, "EventHandler");
+
+const createDynamicMessageHandler = (handler: messageHandler, classPrefix: string) => {
+  const className = `${classPrefix}_${Math.floor(Math.random() * 10000)}`; // Generate a random class name
+  return new Function(
+    "handler",
+    `return class ${className}{
+        handle(notification){
+            const handlerResult = handler({...notification});
+            return handlerResult instanceof Promise ? handlerResult : Promise.resolve(handlerResult);
+        }
+    }`,
+  )(handler);
+};
+
+export const createBroker = (): PrimariaBroker => new Broker();

package/src/api/broker/primaria-broker.ts

@@ -0,0 +1,11 @@
+import { HarmonixBroker } from "@uxland/harmonix";
+
+export interface PrimariaBroker extends HarmonixBroker {}
+
+export type {
+  HarmonixBroker,
+  IEvent,
+  IEventClass,
+  IRequest,
+  IRequestClass,
+} from "@uxland/harmonix";

package/src/api/global-state/global-state.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { PrimariaGlobalStateManager, createGlobalStateManager } from "./global-state";
+import { PrimariaBroker } from "../broker/primaria-broker";
+
+describe("PrimariaGlobalStateManagerImpl", () => {
+  let globalStateManager: PrimariaGlobalStateManager;
+  let brokerMock: PrimariaBroker;
+
+  beforeEach(() => {
+    brokerMock = {
+      publish: vi.fn(),
+    } as any;
+    globalStateManager = createGlobalStateManager(brokerMock);
+  });
+
+  it("should set and get data correctly", () => {
+    globalStateManager.setData("key1", "value1");
+    const result = globalStateManager.getData("key1");
+    expect(result).toBe("value1");
+  });
+
+  it("should set data and publish an event", () => {
+    const key = "key1";
+    const value = "value1";
+    globalStateManager.setData(key, value);
+
+    expect(globalStateManager.getData(key)).toBe(value);
+    expect(brokerMock.publish).toHaveBeenCalledWith("data-setted", {
+      key: key,
+      value: value,
+    });
+  });
+
+  it("should return undefined for non-existent key", () => {
+    const result = globalStateManager.getData("nonExistentKey");
+    expect(result).toBeUndefined();
+  });
+
+  it("should overwrite existing key with new value", () => {
+    globalStateManager.setData("key1", "value1");
+    globalStateManager.setData("key1", "newValue");
+    const result = globalStateManager.getData("key1");
+    expect(result).toBe("newValue");
+  });
+
+  it("should clear all data", () => {
+    globalStateManager.setData("key1", "value1");
+    globalStateManager.setData("key2", "value2");
+    globalStateManager.clearData();
+    expect(globalStateManager.getData("key1")).toBeUndefined();
+    expect(globalStateManager.getData("key2")).toBeUndefined();
+  });
+});