@pairbo/ui-kit 0.0.1

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+// 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;
+  }
+`;

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

@@ -0,0 +1,64 @@
+// File: components/message-selector/message-selector.test.ts
+
+import { fixture, html, expect, elementUpdated } from "@open-wc/testing";
+import type PairboMessageSelector from "./message-selector.js"; // Import the public API for your component
+import sinon from "sinon";
+
+describe("<message-selector>", () => {
+  let el: PairboMessageSelector;
+
+  beforeEach(async () => {
+    // Create a fixture for the component; this renders it in the test DOM.
+    el = await fixture(html`
+      <message-selector>
+        <!-- Optional: Place some child content if needed -->
+        <div>Option 1</div>
+        <div>Option 2</div>
+      </message-selector>
+    `);
+  });
+
+  it("renders the component and its default slot", async () => {
+    // Check that the component is defined and has a shadowRoot.
+    expect(el).to.exist;
+    const slot = el.shadowRoot?.querySelector("slot");
+    expect(slot).to.exist;
+  });
+
+  it("passes an accessibility test", async () => {
+    await expect(el).to.be.accessible();
+  });
+
+  it("has a default selectedMessage property as an empty string", async () => {
+    // Assuming your component defines a reactive property called "selectedMessage"
+    // and that its default value is an empty string.
+    expect((el as any).selectedMessage).to.equal("");
+  });
+
+  it("updates the selectedMessage property when set", async () => {
+    // Simulate setting a new value and wait for the component to update.
+    (el as any).selectedMessage = "Hello World";
+    await elementUpdated(el);
+    expect((el as any).selectedMessage).to.equal("Hello World");
+  });
+
+  // If your component later implements interactions (e.g., clicking on an option sets selectedMessage),
+  // you can add tests to simulate those interactions. For example:
+  it("updates selectedMessage when a child option is clicked", async () => {
+    // For this test, let's assume that clicking on a child element triggers an update.
+    // You would implement such logic in your component; here is an example of how to test it.
+    const spy = sinon.spy();
+    el.addEventListener("selected-change", spy);
+
+    // Simulate a click on the first child element (adjust according to your component’s behavior)
+    const firstOption = el.querySelector("div")!;
+    firstOption.click();
+    await elementUpdated(el);
+
+    // In your component, you might update selectedMessage and dispatch a 'selected-change' event.
+    // This assertion checks that the event was dispatched.
+    expect(spy).to.have.been.called;
+    // You can also verify that the property was updated accordingly:
+    expect((el as any).selectedMessage).to.equal("Option 1");
+  });
+});

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

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