@pairbo/ui-kit 0.0.1

package/src/components/drawer/drawer.component.ts

@@ -0,0 +1,82 @@
+import { customElement, property, query } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+import PairboElement from "../../internal/pairbo-element.js";
+import styles from "./drawer.styles.js";
+import { classMap } from "lit/directives/class-map.js";
+import { watch } from "../../internal/watch.js";
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @status experimental
+ *
+ * @dependency pbo-example
+ *
+ * @event pbo-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+
+@customElement("pbo-drawer")
+export default class PboModal extends PairboElement {
+  static styles: CSSResultGroup = [componentStyles, styles];
+
+  @query(".drawer") drawer!: HTMLDivElement;
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  private requestClose(source: "close-button" | "keyboard" | "overlay") {
+    this.hide();
+  }
+
+  async hide() {
+    this.open = false;
+  }
+
+  async show() {
+    if (this.open) {
+      return undefined;
+    }
+    this.open = true;
+  }
+
+  @watch("open", { waitUntilFirstUpdate: true })
+  handleOpenChange() {
+    if (this.open) this.drawer.hidden = false;
+    else this.drawer.hidden = true;
+  }
+
+  // Init the component
+  protected firstUpdated(): void {
+    this.drawer.hidden = !this.open;
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          drawer: true,
+          "drawer--bottom": true,
+          "drawer--open": this.open,
+        })}
+      >
+        <div part="overlay" class="drawer__overlay" @click=${() => this.requestClose("overlay")}></div>
+        <div
+          part="panel"
+          class="drawer__panel"
+          role="dialog"
+          aria-modal="true"
+          aria-hidden=${this.open ? "false" : "true"}
+          tabindex="0"
+        >
+          <slot part="body" class="drawer__body"></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/drawer/drawer.styles.ts

@@ -0,0 +1,54 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    --size: 30rem;
+    --header-spacing: var(--sl-spacing-large);
+    --body-spacing: var(--sl-spacing-large);
+    --footer-spacing: var(--sl-spacing-large);
+
+    display: contents;
+  }
+
+  .drawer {
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  .drawer__overlay {
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--sl-overlay-background-color);
+    pointer-events: all;
+  }
+
+  .drawer__panel {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    max-width: 100%;
+    max-height: 100%;
+    background-color: var(--sl-panel-background-color);
+    box-shadow: var(--sl-shadow-x-large);
+    overflow: auto;
+    pointer-events: all;
+  }
+
+  .drawer--bottom .drawer__panel {
+    top: auto;
+    inset-inline-end: auto;
+    bottom: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: var(--size);
+  }
+`;

package/src/components/drawer/drawer.ts

@@ -0,0 +1,10 @@
+import PboDrawer from "./drawer.component.js";
+
+export * from "./drawer.component.js";
+export default PboDrawer;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "pbo-modal": PboDrawer;
+  }
+}

package/src/components/editor/editor.component.ts

@@ -0,0 +1,135 @@
+import { customElement, property, query, state } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+import PairboElement from "../../internal/pairbo-element.js";
+import styles from "./editor.styles.js";
+import FabricExample from "../fabric-example/fabric-example.component.js";
+import PboTypeForm from "../type-form/type-form.component.js";
+import { styleMap } from "lit/directives/style-map.js";
+import PboEditorCardSlider from "../image-slider/editor-card-slider.component.js";
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @status experimental
+ *
+ * @dependency pbo-example
+ *
+ * @event pbo-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+
+interface FormData {
+  cardId: string;
+}
+
+interface TypingFormData extends FormData {
+  font: string;
+  text: string;
+  color: string;
+  alignment: string;
+}
+
+@customElement("pbo-editor")
+export default class PboEditor extends PairboElement {
+  static styles: CSSResultGroup = [componentStyles, styles];
+  static dependencies = {
+    "editor-card-slider": PboEditorCardSlider,
+    "fabric-example": FabricExample,
+    "pbo-type-form": PboTypeForm,
+  };
+
+  @property({ type: String, reflect: true }) cardInnerImageUrl = "../../../public/Greeting Card from Pairbo.png";
+
+  @query("pbo-type-form") typingForm!: PboTypeForm;
+  private handleTypingFormChange() {
+    console.log(this.typingForm.form);
+  }
+  @query("pbo-editor-card-slider") slider!: PboEditorCardSlider;
+  // private _card: Card | null = null;
+
+  @property({ type: Object }) card: Card | null = null;
+  @state()
+  private formData = { font: "Monsieur La Doulaise", text: "", color: "rgb(0,0,0)", alignment: "left" };
+
+  protected firstUpdated(): void {
+    this.typingForm.addEventListener("pbo-change", event => {
+      this.formData = this.typingForm.form;
+    });
+  }
+
+  isCardType(obj: any): obj is Card {
+    return (
+      obj &&
+      typeof obj === "object" &&
+      "id" in obj &&
+      "name" in obj &&
+      "category" in obj &&
+      "medias" in obj &&
+      typeof obj.medias === "object" &&
+      "cover" in obj.medias &&
+      "render_1" in obj.medias &&
+      "render_2" in obj.medias &&
+      "inner" in obj.medias
+    );
+  }
+
+  updated(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has("cardInnerImageUrl")) {
+      this.requestUpdate();
+    }
+    if (changedProperties.has("card")) {
+      this.slider.card = this.card;
+      this.requestUpdate();
+    }
+  }
+
+  disconnectedCallback(): void {
+    this.typingForm.removeEventListener("pbo-change", this.handleTypingFormChange);
+  }
+
+  render() {
+    return html`
+      ${JSON.stringify(this.card)} In the editor
+      <div class="editor">
+        <div
+          style=${styleMap({
+            maxWidth: "500px",
+          })}
+        >
+          <!--
+            <fabric-example
+              backgroundUrl=${this.cardInnerImageUrl}
+              alignment=${this.formData?.alignment || ""}
+              message=${this.formData?.text || ""}
+              color=${this.formData?.color || ""}
+              fontFamily=${this.formData?.font || ""}
+            ></fabric-example> 
+          -->
+          <pbo-editor-card-slider focusIndex="0" .livePreviewProps=${this.formData}></pbo-editor-card-slider>
+        </div>
+
+        <div>
+          <pbo-type-form></pbo-type-form>
+          ${JSON.stringify(this.formData)}
+        </div>
+      </div>
+      <button
+        @click=${() => {
+          const slider = this.shadowRoot?.querySelector("pbo-editor-card-slider");
+          if (slider && slider.getAttribute("focusIndex") !== "1") {
+            slider.setAttribute("focusIndex", "1");
+          }
+        }}
+      >
+        Set main image to canvas
+      </button>
+    `;
+  }
+}

package/src/components/editor/editor.styles.ts

@@ -0,0 +1,13 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+  }
+
+  .editor {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+`;

package/src/components/editor/editor.ts

@@ -0,0 +1,10 @@
+import PboEditor from "./editor.component.js";
+
+export * from "./editor.component.js";
+export default PboEditor;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "pbo-editor": PboEditor;
+  }
+}

package/src/components/fabric-example/fabric-example.component.ts

@@ -0,0 +1,268 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { Canvas, ITextEvents, SerializedTextboxProps, Textbox, TextboxProps, TOptions, FabricImage } from "fabric";
+import { prototype } from "mocha";
+
+@customElement("fabric-example")
+export default class FabricExample extends LitElement {
+  @property() backgroundUrl: string =
+    "https://upload.wikimedia.org/wikipedia/commons/0/06/Daedalus_Spaceship_concept.jpg";
+  @property()
+  message: string = "Dear fridends,\n\nMy name is xxxxx. sadf;lkasdf\ngood aklsdfja";
+  @property({ type: String, reflect: true }) alignment: "left" | "center" | "right" = "left";
+  @property({ type: String }) fontFamily: string = "Arial";
+  @property({ type: String }) color: string = "#000";
+
+  @query(".fabric-container")
+  private _fabricContainer!: HTMLDivElement;
+
+  @state()
+  private _canvas?: Canvas;
+  @state()
+  private _canvasElement?: HTMLCanvasElement;
+  @state()
+  private _textbox?: Textbox<TOptions<TextboxProps>, SerializedTextboxProps, ITextEvents>;
+  @state()
+  private _backgroundImg: HTMLImageElement = new Image();
+  @state()
+  private _natureSize: { width: number; height: number } = { width: 0, height: 0 };
+  @state()
+  private _scale: number = 1;
+  @state()
+  private _lineHeight: number = 0;
+  @state()
+  private _fontSize: number = 0;
+
+  constructor() {
+    super();
+    this._backgroundImg = new Image();
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+    .fabric-container {
+      display: block;
+      border: 2px solid #333;
+      border-radius: 4px;
+      background: #fff;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      height: 100%;
+      width: 100%;
+    }
+    canvas {
+      border: 1px solid #ccc;
+      width: 100%;
+      height: 100%;
+    }
+    .grechen-fuemen-regular {
+      font-family: "Grechen Fuemen", serif;
+      font-weight: 400;
+      font-style: normal;
+    }
+  `;
+  connectedCallback() {
+    super.connectedCallback();
+    this._backgroundImg.src = this.backgroundUrl;
+    this._backgroundImg.onload = () => {
+      this._natureSize = { width: this._backgroundImg.naturalWidth, height: this._backgroundImg.naturalHeight };
+    };
+    this._canvasElement = document.createElement("canvas");
+  }
+  formatTextbox(textbox: Textbox<TOptions<TextboxProps>, SerializedTextboxProps, ITextEvents>) {
+    console.log({
+      line: textbox?.textLines,
+      text: textbox?.text,
+    });
+    let lines = textbox.textLines;
+    console.log(lines.length);
+    if (lines.length > 12) {
+      // Prevent adding more lines after 12
+      const limitedLines = lines.slice(0, 12);
+      textbox.set("text", limitedLines.join("\n"));
+      textbox.setSelectionStart(textbox.text.length);
+      textbox.setSelectionEnd(textbox.text.length);
+      this._canvas?.renderAll();
+    }
+  }
+
+  firstUpdated() {
+    const canvasElement = document.createElement("canvas");
+    this._fabricContainer.appendChild(canvasElement);
+
+    this._backgroundImg.onload = () => {
+      const fabricBackgroundImage = new FabricImage(this._backgroundImg);
+
+      this._canvas = new Canvas(canvasElement, {
+        backgroundImage: fabricBackgroundImage,
+        width: this._backgroundImg.naturalWidth,
+        height: this._backgroundImg.naturalHeight,
+      });
+      this._lineHeight = (0.45 * this._backgroundImg.height) / 12;
+      this._fontSize = this._lineHeight / 1.16;
+
+      const props: TOptions<TextboxProps> = {
+        fontSize: 16,
+        left: 0.084 * this._backgroundImg.naturalWidth,
+        // top: 0.4874 * this._backgroundImg.naturalHeight,
+        top: 0.52 * this._backgroundImg.naturalHeight,
+        width: 0.832 * this._backgroundImg.naturalWidth,
+        height: 0.45 * this._backgroundImg.naturalHeight,
+        hasControls: false,
+        editable: false,
+        breakWords: false,
+        splitByGrapheme: false, // Ensure text wraps correctly
+        textAlign: this.alignment,
+        lockMovementX: true,
+        lockMovementY: true,
+        selectable: false, // Make the textbox non-interactive
+      };
+
+      this._textbox = new Textbox(this.message, props);
+      this._textbox.set("fill", this.color);
+      // Custom logic to handle continuous characters without splitting words
+      this._textbox.on("changed", () => {
+        const maxLines = 12;
+        const maxCharsPerLine = 20;
+        if (!this._textbox) return;
+        let lines = this._textbox.text.split("\n");
+        let newLines: string[] = [];
+        lines.forEach(line => {
+          if (line.length > maxCharsPerLine) {
+            const words = line.split(" ");
+            let newLine = "";
+            let currentLength = 0;
+            words.forEach(word => {
+              if (currentLength + word.length > maxCharsPerLine) {
+                newLines.push(newLine.trim());
+                newLine = word + " ";
+                currentLength = word.length + 1;
+              } else {
+                newLine += word + " ";
+                currentLength += word.length + 1;
+              }
+            });
+            if (newLine.trim().length > 0) {
+              newLines.push(newLine.trim());
+            }
+          } else {
+            newLines.push(line);
+          }
+        });
+        if (newLines.length > maxLines) {
+          newLines = newLines.slice(0, maxLines);
+        }
+        this._textbox.text = newLines.join("\n");
+        this._textbox.setSelectionStart(this._textbox.text.length);
+        this._textbox.setSelectionEnd(this._textbox.text.length);
+        this._canvas?.renderAll();
+      });
+
+      // Add text to canvas
+      this._canvas.add(this._textbox);
+      this._canvas.centerObject(this._textbox);
+      this._canvas.renderAll();
+    };
+    window.addEventListener("resize", () => {
+      canvasElement.width = this._fabricContainer.clientWidth;
+      canvasElement.height = this._fabricContainer.clientHeight;
+      this.adjustCanvasElements();
+      this._canvas?.renderAll(); // Re-render canvas content if necessary
+    });
+    setTimeout(() => this.adjustCanvasElements(), 100);
+  }
+
+  adjustCanvasElements() {
+    if (this._canvas && this._textbox && this._backgroundImg && this._backgroundImg.complete) {
+      // Now we can safely work with the loaded image
+
+      const containerDiv = this.shadowRoot?.querySelector(".fabric-container");
+      if (!containerDiv) return;
+      const parentWidth = containerDiv.clientWidth;
+      const parentHeight = containerDiv.clientHeight;
+      const naturalWidth = this._backgroundImg.naturalWidth;
+      const naturalHeight = this._backgroundImg.naturalHeight;
+      const heightRatio = parentHeight / naturalHeight;
+      const widthRatio = parentWidth / naturalWidth;
+      const scale = Math.min(heightRatio, widthRatio);
+      this._scale = scale;
+      console.log({ parentWidth, parentHeight, naturalWidth, naturalHeight });
+
+      // Set the canvas dimensions
+      this._canvas.setWidth(naturalWidth * scale);
+      this._canvas.setHeight(naturalHeight * scale);
+
+      // Scale the background image
+      const background = this._canvas.backgroundImage;
+      if (background) {
+        background.scaleToWidth(naturalWidth * scale);
+        background.scaleToHeight(naturalHeight * scale);
+      }
+
+      // Scale the textbox
+      this._textbox.set({
+        left: 0.084 * naturalWidth * scale,
+        top: 0.52 * naturalHeight * scale,
+        width: 0.832 * naturalWidth * scale,
+        height: 0.45 * naturalHeight * scale,
+        fontSize: this._fontSize * scale,
+      });
+
+      console.log(((0.45 * naturalHeight) / 12) * 0.9 * scale);
+      console.log(`Line height pixel: ${this._textbox.get("lineHeight") * this._textbox.get("fontSize")}px`);
+      console.log(`Line height: ${this._textbox.get("lineHeight")}`);
+      console.log(`Font size: ${this._textbox.get("fontSize")}px`);
+      const lineHeight = (0.45 * naturalHeight * scale) / 12;
+      console.log(`desired line height: ${lineHeight}`);
+      console.log(`scale width: ${0.832 * naturalWidth * scale} - scale height: ${0.45 * naturalHeight * scale}`);
+
+      this._canvas.renderAll(); // Re-render canvas content if necessary
+    }
+  }
+
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    console.log(changedProperties);
+    if (!this._textbox) return;
+    if (changedProperties.has("message")) {
+      this._textbox?.set("text", this.message);
+      this.formatTextbox(this._textbox);
+      this._canvas?.renderAll();
+    }
+
+    if (changedProperties.has("alignment")) {
+      this._textbox?.set("textAlign", this.alignment);
+      this._canvas?.renderAll();
+    }
+
+    if (changedProperties.has("fontFamily")) {
+      this._textbox?.set("fontFamily", this.fontFamily);
+      this._canvas?.renderAll();
+    }
+
+    if (changedProperties.has("color")) {
+      this._textbox?.set("fill", this.color);
+      this._canvas?.renderAll();
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        style="position: fixed; top: 0; left: 0; padding: 1rem; z-index: 1000; background: rgba(255, 255, 255, 0.5); color: rgba(0, 0, 0, 0.5);"
+      >
+        Nature font size: ${this._fontSize} <br />
+        Nature line height: ${this._lineHeight} <br />
+        Line height: ${this._textbox?.get("lineHeight")} <br />
+        Font size: ${this._textbox?.get("fontSize")} <br />
+        real textbox width: ${this._backgroundImg.width * 0.382} <br />
+        real textbox height: ${this._backgroundImg.height * 0.45} <br />
+        Textbox width: ${this._textbox?.width} <br />
+        Textbox height: ${this._textbox?.height} <br />
+      </div>
+      <div class="fabric-container"></div>
+    `;
+  }
+}

package/src/components/fabric-example/fabric-example.styles.ts

@@ -0,0 +1,23 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: Arial, sans-serif;
+  }
+  .message-selector {
+    border: 1px solid #ccc;
+    padding: 1rem;
+    border-radius: 4px;
+    background-color: #fff;
+    color: black;
+  }
+  .fabric-container {
+    display: block;
+    margin-top: 1rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;

package/src/components/fabric-example/fabric-example.ts

@@ -0,0 +1,12 @@
+import FabricExample from "./fabric-example.component.js";
+
+export * from "./fabric-example.component.js";
+export default FabricExample;
+
+// customElements.define("pairbo-message-selector", PairboMessageSelector);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fabric-example": FabricExample;
+  }
+}