@pairbo/ui-kit 0.0.1

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;

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

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