@pairbo/ui-kit 0.0.1 → 0.0.3

package/src/components/category/category.component.ts

@@ -1,91 +0,0 @@
-import { customElement, property, query, state } from "lit/decorators.js";
-import { html, unsafeCSS } from "lit";
-import type { CSSResultGroup } from "lit";
-import componentStyles from "../../styles/component.styles.js";
-import PairboElement from "../../internal/pairbo-element.js";
-import styles from "./category.styles.js";
-import splideCss from "@splidejs/splide/dist/css/themes/splide-default.min.css?inline";
-import Splide from "@splidejs/splide";
-import { map } from "lit/directives/map.js";
-
-@customElement("pbo-category")
-export default class PboCategory extends PairboElement {
-  static styles: CSSResultGroup = [componentStyles, styles, unsafeCSS(splideCss)];
-
-  @query("#category-carousel") imageCarousel!: HTMLDivElement;
-  @state() private imageSplide!: Splide;
-  @state() private slides: Card[] = [];
-  @property({
-    type: Array,
-    converter: {
-      fromAttribute(value: string) {
-        try {
-          return JSON.parse(value || "[]"); // Convert from string to array
-        } catch (e) {
-          console.error("Invalid JSON for 'cards':", value);
-          return [];
-        }
-      },
-      toAttribute(value: Card[]) {
-        return JSON.stringify(value); // Convert array back to string
-      },
-    },
-  })
-  cards: Card[] = [];
-
-  protected firstUpdated = (): void => {
-    this.imageSplide = new Splide(this.imageCarousel, {
-      fixedWidth: "24.5%",
-      heightRatio: 0.3,
-      gap: "2%",
-      rewind: false,
-      pagination: false,
-      isNavigation: false,
-      perPage: 2,
-    });
-    this.imageSplide.mount();
-  };
-
-  disconnectedCallback = (): void => {
-    super.disconnectedCallback();
-    this.imageSplide?.destroy();
-  };
-  clickHandler = (event: MouseEvent) => {
-    const target = event.target as HTMLImageElement;
-    this.emit("pbo-category-card-selected", {
-      detail: {
-        cardId: target.dataset.cardId,
-      },
-    });
-  };
-
-  render() {
-    return html`
-      <div class="category-container">
-        <slot name="title"></slot>
-        <section
-          id="category-carousel"
-          class="splide"
-          aria-label="The carousel with thumbnails. Selecting a thumbnail will change the Beautiful Gallery carousel."
-        >
-          <div class="splide__track">
-            <ul class="splide__list">
-              ${map(this.cards, (card: Card) => {
-                return html`
-                  <li class="splide__slide">
-                    <img
-                      src=${card.medias.cover.url}
-                      alt="${card.medias.cover.alt}"
-                      @click=${this.clickHandler}
-                      data-card-id="${card.id}"
-                    />
-                  </li>
-                `;
-              })}
-            </ul>
-          </div>
-        </section>
-      </div>
-    `;
-  }
-}

package/src/components/category/category.styles.ts

@@ -1,27 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    display: block;
-  }
-  .splide {
-    margin: 0 auto;
-    width: 100%;
-  }
-  .splide__slide img {
-    width: 100%;
-    height: 100%;
-    aspect-ratio: 4/3;
-    object-fit: cover;
-    cursor: pointer;
-  }
-  .splide__slide img:hover {
-    border: 2px solid red;
-    box-sizing: border-box;
-  }
-  .splide__slide {
-    max-width: 300px;
-    width: 100%;
-    height: auto;
-  }
-`;

package/src/components/category/category.ts

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

package/src/components/category-image/category-image.component.ts

@@ -1,38 +0,0 @@
-import { customElement, property } from "lit/decorators.js";
-import { html, LitElement, unsafeCSS } from "lit";
-import type { CSSResultGroup } from "lit";
-import componentStyles from "../../styles/component.styles.js";
-import PairboElement from "../../internal/pairbo-element.js";
-import styles from "./category-image.styles.js";
-import splideCss from "@splidejs/splide/dist/css/themes/splide-default.min.css?inline";
-
-/**
- * @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-category-image")
-export default class PboCategoryImage extends PairboElement {
-  static styles: CSSResultGroup = [componentStyles, styles, unsafeCSS(splideCss)];
-
-  /** An example attribute. */
-  @property() attr = "example";
-  render() {
-    return html`
-      <li class="splide__slide">
-        <slot></slot>
-      </li>
-    `;
-  }
-}

package/src/components/category-image/category-image.styles.ts

@@ -1,11 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    display: inline-block;
-  }
-  .splide__slide img {
-    width: 100%;
-    height: auto;
-  }
-`;

package/src/components/category-image/category-image.ts

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

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

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

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

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

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

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

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