@pairbo/ui-kit 0.0.1 → 0.0.3

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

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

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

package/src/components/page-manager/page-manager.component.ts

@@ -1,228 +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 "./page-manager.styles.js";
-import { PboCategoryCardSelectEvent } from "../../events/pbo-category-card-select.js";
-import type PboCardSelection from "../card-selection/card-selection.component.js";
-import { watch } from "../../internal/watch.js";
-import PboEditor from "../editor/editor.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-page-manager")
-export default class PboPageManager extends PairboElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-  @query("pbo-card-selection") cardSelectionEl!: PboCardSelection;
-  @query("pbo-editor") editorEl!: PboEditor;
-
-  @state() currentPage: "selection" | "editor" = "selection";
-  @state() selectedCard: string | null = null;
-  @state() categories: Category[] = [
-    {
-      id: "birthday",
-      name: "Birthday",
-      cards: [
-        {
-          id: "birthday-1",
-          name: "Card 1",
-          category: "birthday",
-          medias: {
-            cover: { url: "https://picsum.photos/id/10/300/400", alt: "Cover image" },
-            back: { url: "https://picsum.photos/id/30/300/400", alt: "Back image" },
-            inner: { url: "https://picsum.photos/id/40/300/400", alt: "Inner image" },
-            render_1: { url: "https://picsum.photos/id/55/300/400", alt: "Render 1" },
-            render_2: { url: "https://picsum.photos/id/12/300/400", alt: "Render 2" },
-          },
-        },
-        {
-          id: "birthday-2",
-          name: "Card 2",
-          category: "birthday",
-          medias: {
-            cover: { url: "https://picsum.photos/id/43/300/400", alt: "Cover image" },
-            back: { url: "https://picsum.photos/id/38/300/400", alt: "Back image" },
-            inner: { url: "https://picsum.photos/id/16/300/400", alt: "Inner image" },
-            render_1: { url: "https://picsum.photos/id/90/300/400", alt: "Render 1" },
-            render_2: { url: "https://picsum.photos/id/17/300/400", alt: "Render 2" },
-          },
-        },
-        {
-          id: "birthday-3",
-          name: "Card 3",
-          category: "birthday",
-          medias: {
-            cover: { url: "https://picsum.photos/id/51/300/400", alt: "Cover image" },
-            back: { url: "https://picsum.photos/id/32/300/400", alt: "Back image" },
-            inner: { url: "https://picsum.photos/id/12/300/400", alt: "Inner image" },
-            render_1: { url: "https://picsum.photos/id/65/300/400", alt: "Render 1" },
-            render_2: { url: "https://picsum.photos/id/98/300/400", alt: "Render 2" },
-          },
-        },
-        {
-          id: "birthday-4",
-          name: "Card 4",
-          category: "birthday",
-          medias: {
-            cover: { url: "https://picsum.photos/id/100/300/400", alt: "Cover image" },
-            back: { url: "https://picsum.photos/id/80/300/400", alt: "Back image" },
-            inner: { url: "https://picsum.photos/id/70/300/400", alt: "Inner image" },
-            render_1: { url: "https://picsum.photos/id/35/300/400", alt: "Render 1" },
-            render_2: { url: "https://picsum.photos/id/59/300/400", alt: "Render 2" },
-          },
-        },
-        {
-          id: "birthday-5",
-          name: "Card 5",
-          category: "birthday",
-          medias: {
-            cover: { url: "https://picsum.photos/id/87/300/400", alt: "Cover image" },
-            back: { url: "https://picsum.photos/id/16/300/400", alt: "Back image" },
-            inner: { url: "https://picsum.photos/id/5/300/400", alt: "Inner image" },
-            render_1: { url: "https://picsum.photos/id/14/300/400", alt: "Render 1" },
-            render_2: { url: "https://picsum.photos/id/83/300/400", alt: "Render 2" },
-          },
-        },
-      ],
-    },
-    {
-      id: "anniversary",
-      name: "Anniversary",
-      cards: [
-        {
-          id: "anniversary-1",
-          name: "Card 1",
-          category: "anniversary",
-          medias: {
-            cover: { url: "https://picsum.photos/id/10/300/400", alt: "Cover image" },
-            back: { url: "https://picsum.photos/id/30/300/400", alt: "Back image" },
-            inner: { url: "https://picsum.photos/id/40/300/400", alt: "Inner image" },
-            render_1: { url: "https://picsum.photos/id/55/300/400", alt: "Render 1" },
-            render_2: { url: "https://picsum.photos/id/12/300/400", alt: "Render 2" },
-          },
-        },
-        {
-          id: "anniversary-2",
-          name: "Card 2",
-          category: "anniversary",
-          medias: {
-            cover: { url: "https://picsum.photos/id/43/300/400", alt: "Cover image" },
-            back: { url: "https://picsum.photos/id/38/300/400", alt: "Back image" },
-            inner: { url: "https://picsum.photos/id/16/300/400", alt: "Inner image" },
-            render_1: { url: "https://picsum.photos/id/90/300/400", alt: "Render 1" },
-            render_2: { url: "https://picsum.photos/id/17/300/400", alt: "Render 2" },
-          },
-        },
-        {
-          id: "anniversary-3",
-          name: "Card 3",
-          category: "anniversary",
-          medias: {
-            cover: { url: "https://picsum.photos/id/51/300/400", alt: "Cover image" },
-            back: { url: "https://picsum.photos/id/32/300/400", alt: "Back image" },
-            inner: { url: "https://picsum.photos/id/12/300/400", alt: "Inner image" },
-            render_1: { url: "https://picsum.photos/id/65/300/400", alt: "Render 1" },
-            render_2: { url: "https://picsum.photos/id/98/300/400", alt: "Render 2" },
-          },
-        },
-        {
-          id: "anniversary-4",
-          name: "Card 4",
-          category: "anniversary",
-          medias: {
-            cover: { url: "https://picsum.photos/id/100/300/400", alt: "Cover image" },
-            back: { url: "https://picsum.photos/id/80/300/400", alt: "Back image" },
-            inner: { url: "https://picsum.photos/id/70/300/400", alt: "Inner image" },
-            render_1: { url: "https://picsum.photos/id/35/300/400", alt: "Render 1" },
-            render_2: { url: "https://picsum.photos/id/59/300/400", alt: "Render 2" },
-          },
-        },
-        {
-          id: "anniversary-5",
-          name: "Card 5",
-          category: "anniversary",
-          medias: {
-            cover: { url: "https://picsum.photos/id/87/300/400", alt: "Cover image" },
-            back: { url: "https://picsum.photos/id/16/300/400", alt: "Back image" },
-            inner: { url: "https://picsum.photos/id/5/300/400", alt: "Inner image" },
-            render_1: { url: "https://picsum.photos/id/14/300/400", alt: "Render 1" },
-            render_2: { url: "https://picsum.photos/id/83/300/400", alt: "Render 2" },
-          },
-        },
-      ],
-    },
-  ];
-
-  @state() selectedCardId: string | null = null;
-  @state() selectedCardDetails: { cover_url: string; id: string } | null = null;
-
-  private goToEditor() {
-    this.currentPage = "editor";
-  }
-
-  private goToSelector() {
-    this.currentPage = "selection";
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.shadowRoot?.addEventListener("pbo-category-card-selected", this.handleCardSelected);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.shadowRoot?.removeEventListener("pbo-category-card-selected", this.handleCardSelected);
-  }
-
-  protected firstUpdated() {
-    this.cardSelectionEl.categories = this.categories;
-  }
-
-  updated(changedProperties: PropertyValues<this>) {
-    this.cardSelectionEl.categories = this.categories;
-  }
-
-  findCardInCategoryById(cardId: string) {
-    for (const category of this.categories) {
-      const card = category.cards.find(card => card.id === cardId);
-      if (card) {
-        return card;
-      }
-    }
-    return null;
-  }
-
-  private handleCardSelected = (event: PboCategoryCardSelectEvent) => {
-    // Get the Id
-    const { cardId } = event.detail;
-    // Find the card
-    const card = this.findCardInCategoryById(cardId);
-    this.editorEl.card = card;
-    // console.log(JSON.stringify(card));
-    this.goToEditor();
-  };
-
-  render() {
-    return html`
-      <button @click=${this.goToSelector}>Prev</button>
-      <button @click=${this.goToEditor}>Next</button>
-      <pbo-card-selection name="selection" ?hidden=${this.currentPage !== "selection"}></pbo-card-selection>
-      <pbo-editor name="editor" ?hidden=${this.currentPage !== "editor"}></pbo-editor>
-    `;
-  }
-}

package/src/components/page-manager/page-manager.styles.ts

@@ -1,9 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-`;

package/src/components/page-manager/page-manager.ts

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

package/src/components/radio-button/radio-button.component.ts

@@ -1,118 +0,0 @@
-import { customElement, property, query, state } from "lit/decorators.js";
-import { html, LitElement } from "lit";
-import type { CSSResultGroup } from "lit";
-import componentStyles from "../../styles/component.styles.js";
-import styles from "./radio-button.styles.js";
-import { HasSlotController } from "../../internal/slots.js";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { styleMap } from "lit/directives/style-map.js";
-
-/**
- * @summary Short summary of the component's intended use.
- * @documentation https://shoelace.style/components/radio-button
- * @status experimental
- *
- * @dependency sl-example
- *
- * @event sl-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-radio-button")
-export default class PboRadioButton extends LitElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-  private readonly hasSlotController = new HasSlotController(this, "[prefix]", "prefix", "suffix");
-
-  @query(".button") input: HTMLInputElement;
-  @query(".hidden-input") hiddenInput: HTMLInputElement;
-
-  @state() protected hasFocus = false;
-
-  @property({ type: Boolean, reflect: true }) checked = false;
-  @property() value: string;
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  @property({ reflect: true }) size: "small" | "medium" | "large" = "medium";
-  @property({ type: Boolean, reflect: true }) circle = false;
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.setAttribute("role", "presentation");
-  }
-
-  private handleBlur() {}
-
-  private handleClick = () => {
-    console.log(this.isColorString(this.value));
-  };
-
-  private handleFocus() {}
-
-  focus(options?: FocusOptions) {
-    this.input.focus(options);
-  }
-
-  blur() {
-    this.input.blur();
-  }
-
-  private isColorString(value: string): boolean {
-    if (!value) return false;
-
-    // Check for hex colors
-    if (value.startsWith("#")) {
-      return /^#([A-Fa-f0-9]{3}){1,2}$/.test(value);
-    }
-
-    // Check if it's a valid CSS color name or rgb/rgba/hsl/hsla value
-    const style = new Option().style;
-    style.color = value;
-    return style.color !== "";
-  }
-
-  render() {
-    return html`
-      <div part="base" role="presentation">
-        <button
-          part="${`button${this.checked ? "button--checked" : ""}`}"
-          role="radio"
-          aria-checked="${this.checked}"
-          class=${classMap({
-            button: true,
-            "button--default": true,
-            "button--color-block": this.isColorString(this.value) ? true : false,
-            "button--small": this.size === "small",
-            "button--medium": this.size === "medium",
-            "button--large": this.size === "large",
-            "button--checked": this.checked,
-            "button--disabled": this.disabled,
-            "button--outline": true,
-            "button--has-label": this.hasSlotController.test("[default]"),
-            "button--has-prefix": this.hasSlotController.test("prefix"),
-            "button--has-suffix": this.hasSlotController.test("suffix"),
-            "button--circle": this.circle,
-          })}
-          type="button"
-          value=${ifDefined(this.value)}
-          @blur=${this.handleBlur}
-          @click=${this.handleClick}
-          @focus=${this.handleFocus}
-          style=${styleMap({
-            backgroundColor: this.isColorString(this.value) ? this.value : "",
-          })}
-        >
-          <slot name="prefix" part="prefix" class="button__prefix"></slot>
-          <slot part="label" class="button__label"></slot>
-          <slot name="suffix" part="suffix" class="button__suffix"></slot>
-        </button>
-      </div>
-    `;
-  }
-}

package/src/components/radio-button/radio-button.styles.ts

@@ -1,13 +0,0 @@
-import { css } from "lit";
-import buttonStyles from "../button/button.styles.js";
-export default css`
-  ${buttonStyles}
-
-  .button__prefix,
-  .button__suffix,
-  .button__label {
-    display: inline-flex;
-    position: relative;
-    align-items: center;
-  }
-`;

package/src/components/radio-button/radio-button.ts

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

package/src/components/radio-group/radio-group.component.ts

@@ -1,203 +0,0 @@
-import { customElement, property, query, state } from "lit/decorators.js";
-import { html, LitElement } from "lit";
-import type { CSSResultGroup } from "lit";
-import componentStyles from "../../styles/component.styles.js";
-import styles from "./radio-group.styles.js";
-import { classMap } from "lit/directives/class-map.js";
-import PairboElement, { PairboFormControl } from "../../internal/pairbo-element.js";
-import {
-  customErrorValidityState,
-  FormControlController,
-  validValidityState,
-  valueMissingValidityState,
-} from "../../internal/form.js";
-import { HasSlotController } from "../../internal/slots.js";
-import formControlStyles from "../../styles/form-control.styles.js";
-import PboRadioButton from "../radio-button/radio-button.component.js";
-import PboButtonGroup from "../button-group/button-group.component.js";
-
-/**
- * @summary Short summary of the component's intended use.
- * @documentation https://shoelace.style/components/radio-group
- * @status experimental
- *
- * @dependency sl-example
- *
- * @event sl-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-radio-group")
-export default class PboRadioGroup extends PairboElement implements PairboFormControl {
-  static styles: CSSResultGroup = [componentStyles, styles, formControlStyles];
-  static dependencies = { "pbo-button-group": PboButtonGroup };
-
-  protected readonly formControlController = new FormControlController(this);
-  private readonly hasSlotController = new HasSlotController(this, "help-text", "label");
-  private customValidityMessage = "";
-  private validationTimeout: number;
-
-  private _value = "";
-  @query("slot:not([name])") defaultSlot: HTMLSlotElement;
-  @query(".radio-group__validation-input") validationInput: HTMLInputElement;
-
-  @state() private hasButtonGroup = true;
-  @state() private errorMessage = "";
-  @state() defaultValue = "";
-
-  @property({ type: Boolean, reflect: true }) required = false;
-  @property() name = "option";
-  @property({ reflect: true })
-  get value() {
-    return this._value;
-  }
-  set value(value) {
-    const oldValue = this._value;
-    this._value = value;
-    if (this.hasUpdated && oldValue !== value) {
-      this.updateCheckedRadio();
-    }
-    this.requestUpdate("value", oldValue);
-  }
-  @property({ type: Boolean, reflect: true }) disabled = false;
-  @property({ reflect: true }) form = "";
-  get validity() {
-    const isRequiredAndEmpty = this.required && !this.value;
-    const hasCustomValidityMessage = this.customValidityMessage !== "";
-    if (hasCustomValidityMessage) {
-      return customErrorValidityState;
-    } else if (isRequiredAndEmpty) {
-      return valueMissingValidityState;
-    }
-    return validValidityState;
-  }
-  validationMessage: string;
-  checkValidity() {
-    const isRequiredAndEmpty = this.required && !this.value;
-    const hasCustomValidityMessage = this.customValidityMessage !== "";
-
-    if (isRequiredAndEmpty || hasCustomValidityMessage) {
-      this.formControlController.emitInvalidEvent();
-      return false;
-    }
-    return true;
-  }
-  getForm(): HTMLFormElement | null {
-    return this.formControlController.getForm();
-  }
-  reportValidity(): boolean {
-    const isValid = this.validity.valid;
-
-    this.errorMessage = this.customValidityMessage || isValid ? "" : this.validationInput.validationMessage;
-    this.formControlController.setValidity(isValid);
-    this.validationInput.hidden = true;
-    clearTimeout(this.validationTimeout);
-
-    if (!isValid) {
-      // Show the browser's constraint validation message
-      this.validationInput.hidden = false;
-      this.validationInput.reportValidity();
-      this.validationTimeout = setTimeout(() => (this.validationInput.hidden = true), 10000) as unknown as number;
-    }
-
-    return isValid;
-  }
-
-  setCustomValidity(message: string) {
-    this.customValidityMessage = message;
-    this.errorMessage = message;
-    this.validationInput.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
-
-  private getAllRadios() {
-    return [...this.querySelectorAll<PboRadioButton>("pbo-radio, pbo-radio-button")];
-  }
-
-  private updateCheckedRadio() {
-    const radios = this.getAllRadios();
-    radios.forEach(radio => (radio.checked = radio.value === this.value));
-    this.formControlController.setValidity(this.validity.valid);
-  }
-
-  private handleRadioClick(event: MouseEvent) {
-    const target = (event.target as HTMLElement).closest<PboRadioButton>("pbo-radio-button")!;
-    const radios = this.getAllRadios();
-    const oldValue = this.value;
-
-    if (!target || target.disabled) {
-      return;
-    }
-    this.value = target.value;
-    radios.forEach(radio => (radio.checked = radio === target));
-
-    if (this.value !== oldValue) {
-      this.emit("pbo-change");
-      this.emit("pbo-input");
-    }
-  }
-
-  // TODO: Implement keyboard navigation
-  private handleKeyDown(event: KeyboardEvent) {}
-  // TODO: Implement radio sync
-  private syncRadios() {}
-
-  private handleInvalid(event: Event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-  }
-
-  handleValueChange() {
-    if (this.hasUpdated) {
-      this.updateCheckedRadio();
-    }
-  }
-
-  render() {
-    return html`
-      <fieldset
-        role="radiogroup"
-        part="form-control"
-        class=${classMap({
-          "form-control": true,
-          // "form-control--small": this.size === "small",
-          // "form-control--medium": this.size === "medium",
-          // "form-control--large": this.size === "large",
-          // "form-control--radio-group": true,
-          // "form-control--has-label": hasLabel,
-          // "form-control--has-help-text": hasHelpText,
-        })}
-        role="radiogroup"
-        aria-labelledby="label"
-        aria-describedby="help-text"
-        aria-errormessage="error-message"
-      >
-        <div part="form-control-input" class="form-control-input">
-          <div class="visually-hidden">
-            <div id="error-message" aria-live="assertive">${this.errorMessage}</div>
-            <label class="radio-group__validation">
-              <input
-                type="text"
-                class="radio-group__validation-input"
-                ?required=${this.required}
-                tabindex="-1"
-                hidden
-                @invalid=${this.handleInvalid}
-              />
-            </label>
-          </div>
-          <pbo-button-group>
-            <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>
-          </pbo-button-group>
-        </div>
-        ${this._value}
-      </fieldset>
-    `;
-  }
-}