@pairbo/ui-kit 0.0.1 → 0.0.3

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

@@ -1,268 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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;
-  }
-}

package/src/components/image-slider/editor-card-slider.component.ts

@@ -1,136 +0,0 @@
-import { customElement, property, query, queryAll, state } from "lit/decorators.js";
-import { css, html, LitElement, unsafeCSS } 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-card-slider.styles.js";
-// Default theme
-import splideCss from "@splidejs/splide/dist/css/themes/splide-default.min.css?inline";
-import Splide from "@splidejs/splide";
-import FabricExample from "../fabric-example/fabric-example.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.
- */
-
-@customElement("pbo-editor-card-slider")
-export default class PboEditorCardSlider extends PairboElement {
-  // static styles: CSSResultGroup = [componentStyles, styles];
-  static styles: CSSResultGroup = [componentStyles, styles, unsafeCSS(splideCss)];
-  static dependencies = {
-    "fabric-example": FabricExample,
-  };
-
-  @property({ type: Object }) card: Card | null = null;
-  @property({ type: Number, reflect: true }) focusIndex = 0;
-
-  @property({ type: Object }) livePreviewProps: {
-    font: string;
-    text: string;
-    color: string;
-    alignment: string;
-  } = { font: "Monsieur La Doulaise", text: "", color: "rgb(0,0,0)", alignment: "left" };
-
-  @query("#thumbnails") thumbnailCarousel!: HTMLDivElement;
-  @query("#main-carousel") mainCarousel!: HTMLDivElement;
-  @queryAll(".thumbnail") thumbnailElements!: NodeListOf<HTMLDivElement>;
-  @state() thumbnailSplide!: Splide;
-  @state() mainSplide!: Splide;
-
-  protected firstUpdated(): void {
-    this.mainSplide = new Splide(this.mainCarousel, {
-      width: 300,
-      height: 400,
-      pagination: false,
-      arrows: false,
-      direction: "ttb",
-      cover: true,
-    });
-
-    const initThumbnail = (thumbnail: HTMLDivElement, index: number) => {
-      thumbnail.addEventListener("click", () => {
-        this.mainSplide.go(index);
-      });
-    };
-
-    console.log(this.thumbnailElements);
-    for (let i = 0; i < this.thumbnailElements.length; i++) {
-      initThumbnail(this.thumbnailElements[i], i);
-    }
-    let current: Element | null = null;
-    this.mainSplide.on("mounted move", () => {
-      this.focusIndex = this.mainSplide.index;
-      if (current !== null) {
-        current.classList.remove("is-active");
-      }
-
-      let thumbnail = this.thumbnailElements[this.mainSplide.index];
-      if (thumbnail) {
-        thumbnail.classList.add("is-active");
-        current = thumbnail;
-      }
-    });
-
-    this.mainSplide.mount();
-    // The function to initialize each thumbnail.
-  }
-  updated(changedProperties: Map<string | number | symbol, unknown>) {
-    if (changedProperties.has("focusIndex")) {
-      this.mainSplide.go(this.focusIndex);
-    }
-  }
-
-  render() {
-    return html`
-      ${JSON.stringify(this.card)}
-      <div class="card--slider--wrapper">
-        <ul id="thumbnails" class="thumbnails">
-          <li class="thumbnail">
-            <img src="${this.card?.medias.cover.url || "https://picsum.photos/id/1/300/400"}" alt="" />
-          </li>
-          <li class="thumbnail">
-            <img src="${this.card?.medias.render_1.url || "https://picsum.photos/id/10/300/400"}" alt="" />
-          </li>
-          <li class="thumbnail">
-            <img src="${this.card?.medias.render_2.url || "https://picsum.photos/id/10/300/400"}" alt="" />
-          </li>
-        </ul>
-
-        <section id="main-carousel" class="splide" aria-label="My Awesome Gallery">
-          <div class="splide__track">
-            <ul class="splide__list">
-              <li class="splide__slide">
-                ${this.card?.medias.cover.url}
-                <img src="${this.card?.medias.cover.url || "https://picsum.photos/id/1/300/400"}" alt="" />
-              </li>
-              <li class="splide__slide">
-                <fabric-example
-                  backgroundUrl="${this.card?.medias.render_1.url || "https://picsum.photos/id/10/300/400"}"
-                  alignment=${this.livePreviewProps?.alignment || "left"}
-                  message=${this.livePreviewProps?.text}
-                  color=${this.livePreviewProps?.color}
-                  fontFamily=${this.livePreviewProps?.font}
-                ></fabric-example>
-              </li>
-              <li class="splide__slide">
-                <img src="${this.card?.medias.render_2.url || "https://picsum.photos/id/10/300/400"}" alt="" />
-              </li>
-            </ul>
-          </div>
-        </section>
-      </div>
-    `;
-  }
-}

package/src/components/image-slider/editor-card-slider.styles.ts

@@ -1,46 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    display: block;
-  }
-
-  .card--slider--wrapper {
-    display: flex;
-  }
-
-  .splide {
-    margin: 0 auto;
-    width: 100%;
-  }
-  img {
-    -webkit-user-drag: none;
-    pointer-events: none;
-  }
-  .thumbnails {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding: 0;
-    justify-content: start;
-  }
-
-  .thumbnail {
-    width: 70px;
-    height: 70px;
-    overflow: hidden;
-    list-style: none;
-    margin: 0 0.2rem;
-    cursor: pointer;
-    opacity: 0.3;
-  }
-
-  .thumbnail.is-active {
-    opacity: 1;
-  }
-
-  .thumbnail img {
-    width: 100%;
-    height: auto;
-  }
-`;

package/src/components/image-slider/editor-card-slider.ts

@@ -1,9 +0,0 @@
-import PboEditorCardSlider from "./editor-card-slider.component.js";
-export * from "./editor-card-slider.component.js";
-export default PboEditorCardSlider;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "pbo-image-slider": PboEditorCardSlider;
-  }
-}

package/src/components/main.ts

@@ -1,17 +0,0 @@
-export { default as MessageSelector } from "./message-selector/message-selector.component.js";
-export { default as FabricExample } from "./fabric-example/fabric-example.component.js";
-
-export { default as PboSelector } from "./selector/selector.component.js";
-export { default as PboButton } from "./button/button.js";
-export { default as PboButtonGroup } from "./button-group/button-group.js";
-export { default as PboRadioButton } from "./radio-button/radio-button.js";
-export { default as PboRadioGroup } from "./radio-group/radio-group.js";
-export { default as PboTextarea } from "./textarea/textarea.js";
-export { default as PboEditor } from "./editor/editor.js";
-export { default as PboTypeForm } from "./type-form/type-form.js";
-export { default as PboEditorCardSlider } from "./image-slider/editor-card-slider.js";
-export { default as PboCategory } from "./category/category.js";
-export { default as PboDrawer } from "./drawer/drawer.js";
-export { default as PboPageManager } from "./page-manager/page-manager.js";
-export { default as PboCardSelection } from "./card-selection/card-selection.js";
-/* plop:component */

package/src/components/message-selector/message-selector.component.ts

@@ -1,154 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import styles from "./message-selector.styles.js";
-
-/**
- * A component for selecting messages.
- *
- * @element pairbo-message-selector
- */
-@customElement("pairbo-message-selector")
-export default class PairboMessageSelector extends LitElement {
-  static styles = [
-    styles,
-    css`
-      .message-selector {
-        text-align: left;
-      }
-      .message-selector > div {
-        margin-bottom: 1rem;
-      }
-      .message-selector-hidden {
-        display: none;
-      }
-      pre {
-        background: #f7f7f7;
-        padding: 1rem;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        overflow-x: auto;
-        margin-top: 1rem;
-      }
-      code {
-        font-family: monospace;
-      }
-    `,
-  ];
-
-  static properties = {
-    giftLabel: { type: String },
-    premiumLabel: { type: String },
-    premiumDescription: { type: String },
-    noteLabel: { type: String },
-    giftSelected: { type: Boolean },
-    premiumSelected: { type: Boolean },
-    freeMessageSelected: { type: Boolean },
-  };
-
-  constructor() {
-    super();
-    // Set default values.
-    (this as any).giftLabel = "This is a gift?";
-    (this as any).premiumLabel = "Add a premium greeting card";
-    (this as any).premiumDescription =
-      "Select a premium greeting card and add your personal message. You'll choose from our 100% recycled paper cards, priced at $6, and we'll package it with your gift for that extra thoughtful touch.";
-    (this as any).noteLabel = "Add a free message";
-    (this as any).giftSelected = false;
-    (this as any).premiumSelected = false;
-    (this as any).freeMessageSelected = false;
-  }
-
-  public toggleMessageSelector() {
-    const messageSelector = this.shadowRoot?.querySelector(".message-selector");
-    if (messageSelector) {
-      messageSelector.classList.toggle("message-selector-hidden");
-    }
-  }
-
-  private _onGiftChange(e: Event) {
-    const target = e.target as HTMLInputElement;
-    (this as any).giftSelected = target.checked;
-    if (!(this as any).giftSelected) {
-      // Clear premium and free-message selections if gift is not selected.
-      (this as any).premiumSelected = false;
-      (this as any).freeMessageSelected = false;
-    }
-  }
-
-  private _onPremiumChange(e: Event) {
-    const target = e.target as HTMLInputElement;
-    if (target.checked) {
-      (this as any).premiumSelected = true;
-      (this as any).freeMessageSelected = false;
-    } else {
-      (this as any).premiumSelected = false;
-    }
-  }
-
-  private _onFreeMessageChange(e: Event) {
-    const target = e.target as HTMLInputElement;
-    if (target.checked) {
-      (this as any).freeMessageSelected = true;
-      (this as any).premiumSelected = false;
-    } else {
-      (this as any).freeMessageSelected = false;
-    }
-  }
-
-  render() {
-    return html`
-      <div class="message-selector">
-        <!-- Gift Checkbox: Always visible -->
-        <div>
-          <input
-            type="checkbox"
-            id="is-gift"
-            name="is-gift"
-            .checked=${(this as any).giftSelected}
-            @change=${this._onGiftChange}
-          />
-          <label for="is-gift">${(this as any).giftLabel}</label>
-        </div>
-
-        <!-- Premium and Free Message Options: Only visible if gift is selected -->
-        ${(this as any).giftSelected
-          ? html`
-              <div>
-                <input
-                  type="checkbox"
-                  id="premium-card"
-                  name="premium-card"
-                  value="premium-card"
-                  .checked=${(this as any).premiumSelected}
-                  @change=${this._onPremiumChange}
-                />
-                <label for="premium-card">${(this as any).premiumLabel}</label>
-                <p class="description">${(this as any).premiumDescription}</p>
-              </div>
-              <div>
-                <input
-                  type="checkbox"
-                  id="free-message"
-                  name="free-message"
-                  value="free-message"
-                  .checked=${(this as any).freeMessageSelected}
-                  @change=${this._onFreeMessageChange}
-                />
-                <label for="free-message">${(this as any).noteLabel}</label>
-              </div>
-            `
-          : null}
-
-        <!-- Display current selection summary -->
-        <div class="current-selection">
-          <strong>Current Selection:</strong>
-          <ul>
-            <li>Gift: ${(this as any).giftSelected ? "Yes" : "No"}</li>
-            <li>Premium Card: ${(this as any).premiumSelected ? "Yes" : "No"}</li>
-            <li>Free Message: ${(this as any).freeMessageSelected ? "Yes" : "No"}</li>
-          </ul>
-        </div>
-      </div>
-    `;
-  }
-}

package/src/components/message-selector/message-selector.styles.ts

@@ -1,16 +0,0 @@
-// components/message-selector/message-selector.styles.ts
-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;
-  }
-`;