@pairbo/ui-kit 0.0.1

package/src/components/type-form/type-form.ts

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

package/src/declaration.d.ts

@@ -0,0 +1,44 @@
+declare module "*.css" {
+  const styles: string;
+  export default styles;
+}
+
+// Declare that CSS files can be imported as a string
+declare module "*.css?inline" {
+  const content: string;
+  export default content;
+}
+
+declare interface Card {
+  id: string;
+  name: string;
+  category: string | string[];
+  medias: {
+    cover: {
+      url: string;
+      alt: string;
+    };
+    back: {
+      url: string;
+      alt: string;
+    };
+    inner: {
+      url: string;
+      alt: string;
+    };
+    render_1: {
+      url: string;
+      alt: string;
+    };
+    render_2: {
+      url: string;
+      alt: string;
+    };
+  };
+}
+
+declare interface Category {
+  id: string;
+  name: string;
+  cards: Card[];
+}

package/src/events/events.ts

@@ -0,0 +1 @@
+export type { PboCategoryCardSelectEvent } from "./pbo-category-card-select.js";

package/src/events/pbo-category-card-select.ts

@@ -0,0 +1,7 @@
+export type PboCategoryCardSelectEvent = CustomEvent<{ cardId: string }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    "pbo-category-card-selected": PboCategoryCardSelectEvent;
+  }
+}

package/src/internal/form.ts

@@ -0,0 +1,376 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+import { PairboFormControl } from "./pairbo-element";
+import { PboButton } from "../components/main";
+
+export const formCollections: WeakMap<HTMLFormElement, Set<PairboFormControl>> = new WeakMap();
+
+// We store a WeakMap of reportValidity() overloads so we can override it when form controls connect to the DOM and
+// restore the original behavior when they disconnect.
+//
+const reportValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();
+const checkValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();
+
+//
+// We store a Set of controls that users have interacted with. This allows us to determine the interaction state
+// without littering the DOM with additional data attributes.
+//
+const userInteractedControls: WeakSet<PairboFormControl> = new WeakSet();
+
+//
+// We store a WeakMap of interactions for each form control so we can track when all conditions are met for validation.
+//
+const interactions = new WeakMap<PairboFormControl, string[]>();
+
+export interface FormControlControllerOptions {
+  // The form element that the control is associated with.
+  form: (input: PairboFormControl) => HTMLFormElement | null;
+  // The name of the control.
+  name: (input: PairboFormControl) => string;
+  // The default value of the control.
+  defaultValue: (input: PairboFormControl) => unknown;
+  // The value of the control.
+  value: (input: PairboFormControl) => unknown | unknown[];
+  // Whether the control is disabled.
+  disabled: (input: PairboFormControl) => boolean;
+  // When the control is invalid, the error message that should be shown to the user.
+  reportValidity: (input: PairboFormControl) => boolean;
+  //check if the control is valid
+  checkValidity: (input: PairboFormControl) => boolean;
+  // set value of the control
+  setValue: (input: PairboFormControl, value: unknown) => void;
+  // An array of event names to listen to.
+  assumeInteractionOn: string[];
+}
+
+export class FormControlController implements ReactiveController {
+  host: PairboFormControl & ReactiveControllerHost;
+  form?: HTMLFormElement | null;
+  options: FormControlControllerOptions;
+
+  constructor(host: PairboFormControl & ReactiveControllerHost, options?: Partial<FormControlControllerOptions>) {
+    console.log({ host });
+    (this.host = host).addController(this);
+    this.options = {
+      form: input => {
+        const formId = input.form;
+
+        if (formId) {
+          const root = input.getRootNode() as Document | ShadowRoot | HTMLElement;
+          const form = root.querySelector(`#${formId}`);
+
+          if (form) {
+            return form as HTMLFormElement;
+          }
+        }
+        return input.closest("form");
+      },
+      name: input => input.name,
+      value: input => input.value,
+      defaultValue: input => input.defaultValue,
+      disabled: input => input.disabled || false,
+      reportValidity: input => (typeof input.reportValidity === "function" ? input.reportValidity() : true),
+      checkValidity: input => (typeof input.checkValidity === "function" ? input.checkValidity() : true),
+      setValue: (input, value: string) => (input.value = value),
+      assumeInteractionOn: ["pbo-input"],
+      ...options,
+    };
+  }
+
+  hostConnected() {
+    const form = this.options.form(this.host);
+
+    if (form) {
+      this.attachForm(form);
+    }
+    // Listen for interactions
+    interactions.set(this.host, []);
+    console.log({ interactions });
+
+    this.options.assumeInteractionOn.forEach(event => {
+      this.host.addEventListener(event, this.handleInteraction);
+    });
+  }
+  hostDisconnected() {
+    this.detachForm();
+
+    // Clean up interactions
+    interactions.delete(this.host);
+    this.options.assumeInteractionOn.forEach(event => {
+      this.host.removeEventListener(event, this.handleInteraction);
+    });
+  }
+
+  hostUpdated() {
+    const form = this.options.form(this.host);
+
+    // Detach if the form no longer exists
+    if (!form) {
+      this.detachForm();
+    }
+
+    // If the form has changed, reattach it
+    if (form && this.form !== form) {
+      this.detachForm();
+      this.attachForm(form);
+    }
+
+    if (this.host.hasUpdated) {
+      this.setValidity(this.host.validity.valid);
+    }
+  }
+
+  private attachForm(form?: HTMLFormElement) {
+    if (form) {
+      this.form = form;
+
+      // Add this element to the form's collection
+      if (formCollections.has(this.form)) {
+        formCollections.get(this.form)!.add(this.host);
+      } else {
+        formCollections.set(this.form, new Set<PairboFormControl>([this.host]));
+      }
+
+      this.form.addEventListener("formdata", this.handleFormData);
+      this.form.addEventListener("submit", this.handleFormSubmit);
+      this.form.addEventListener("reset", this.handleFormReset);
+
+      // Overload the form's reportValidity() method so it looks at Shoelace form controls
+      if (!reportValidityOverloads.has(this.form)) {
+        reportValidityOverloads.set(this.form, this.form.reportValidity);
+        this.form.reportValidity = () => this.reportFormValidity();
+      }
+
+      // Overload the form's checkValidity() method so it looks at Shoelace form controls
+      if (!checkValidityOverloads.has(this.form)) {
+        checkValidityOverloads.set(this.form, this.form.checkValidity);
+        this.form.checkValidity = () => this.checkFormValidity();
+      }
+    } else {
+      this.form = undefined;
+    }
+  }
+  private detachForm() {
+    if (!this.form) return;
+
+    const formCollection = formCollections.get(this.form);
+
+    if (!formCollection) {
+      return;
+    }
+
+    // Remove this host from the form's collection
+    formCollection.delete(this.host);
+
+    // Check to make sure there's no other form controls in the collection. If we do this
+    // without checking if any other controls are still in the collection, then we will wipe out the
+    // validity checks for all other elements.
+    // see: https://github.com/shoelace-style/shoelace/issues/1703
+    if (formCollection.size <= 0) {
+      this.form.removeEventListener("formdata", this.handleFormData);
+      this.form.removeEventListener("submit", this.handleFormSubmit);
+      this.form.removeEventListener("reset", this.handleFormReset);
+
+      // Remove the overload and restore the original method
+      if (reportValidityOverloads.has(this.form)) {
+        this.form.reportValidity = reportValidityOverloads.get(this.form)!;
+        reportValidityOverloads.delete(this.form);
+      }
+
+      if (checkValidityOverloads.has(this.form)) {
+        this.form.checkValidity = checkValidityOverloads.get(this.form)!;
+        checkValidityOverloads.delete(this.form);
+      }
+
+      // So it looks weird here to not always set the form to undefined. But I _think_ if we unattach this.form here,
+      // we end up in this fun spot where future validity checks don't have a reference to the form validity handler.
+      // First form element in sets the validity handler. So we can't clean up `this.form` until there are no other form elements in the form.
+      this.form = undefined;
+    }
+  }
+
+  // Append the control's name and value to the given FormData object.
+  private handleFormData = (event: FormDataEvent) => {
+    const disabled = this.options.disabled(this.host);
+    const name = this.options.name(this.host);
+    const value = this.options.value(this.host);
+    if (
+      this.host.isConnected &&
+      !disabled &&
+      typeof name === "string" &&
+      name.length > 0 &&
+      typeof value !== "undefined"
+    ) {
+      if (Array.isArray(value)) {
+        (value as unknown[]).forEach(val => {
+          event.formData.append(name, (val as string | number | boolean).toString());
+        });
+      } else {
+        event.formData.append(name, (value as string | number | boolean).toString());
+      }
+    }
+  };
+
+  private handleFormSubmit = (event: Event) => {
+    const disabled = this.options.disabled(this.host);
+    const reportValidity = this.options.reportValidity;
+    if (this.form && !this.form.noValidate) {
+      formCollections.get(this.form)?.forEach(control => {
+        this.setUserInteracted(control, true);
+      });
+    }
+
+    if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
+      event?.preventDefault();
+      event?.stopImmediatePropagation();
+    }
+  };
+
+  private handleFormReset = () => {
+    this.options.setValue(this.host, this.options.defaultValue(this.host));
+    this.setUserInteracted(this.host, false);
+    interactions.set(this.host, []);
+  };
+
+  private handleInteraction = (event: Event) => {
+    const emittedEvents = interactions.get(this.host)!;
+    if (!emittedEvents.includes(event.type)) {
+      emittedEvents.push(event.type);
+    }
+    if (emittedEvents.length === this.options.assumeInteractionOn.length) {
+      this.setUserInteracted(this.host, true);
+    }
+  };
+
+  private checkFormValidity = () => {
+    if (this.form && !this.form.noValidate) {
+      const elements = this.form.querySelectorAll<HTMLInputElement>("*");
+      for (const element of elements) {
+        if (typeof element.checkValidity === "function") {
+          if (!element.checkValidity()) {
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  };
+  private reportFormValidity() {
+    if (this.form && !this.form.noValidate) {
+      const elements = this.form.querySelectorAll<HTMLInputElement>("*");
+      for (const element of elements) {
+        if (typeof element.reportValidity === "function") {
+          if (!element.reportValidity()) {
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  }
+
+  private setUserInteracted(el: PairboFormControl, hasInteracted: boolean) {
+    if (hasInteracted) {
+      userInteractedControls.add(el);
+    } else {
+      userInteractedControls.delete(el);
+    }
+
+    el.requestUpdate();
+  }
+  private doAction = (type: "submit" | "reset", submitter?: HTMLInputElement | PboButton) => {
+    if (this.form) {
+      const button = document.createElement("button");
+      button.type = type;
+      button.style.position = "absolute";
+      button.style.width = "0";
+      button.style.height = "0";
+      button.style.clipPath = "inset(50%)";
+      button.style.overflow = "hidden";
+      button.style.whiteSpace = "nowrap";
+      if (submitter) {
+        button.name = submitter.name;
+        button.value = submitter.value;
+
+        ["formation", "formenctype", "formmethod", "formnovalidate", "formtarget"].forEach(attr => {
+          if (submitter.hasAttribute(attr)) {
+            button.setAttribute(attr, submitter.getAttribute(attr)!);
+          }
+        });
+      }
+
+      this.form.append(button);
+      button.click();
+      button.remove();
+    }
+  };
+
+  getForm() {
+    return this.form ?? null;
+  }
+  reset(submitter?: HTMLInputElement | PboButton) {
+    this.doAction("reset", submitter);
+  }
+
+  submit(submitter?: HTMLInputElement | PboButton) {
+    this.doAction("submit", submitter);
+  }
+  setValidity(isValid: boolean) {
+    const host = this.host;
+    const hasInteracted = Boolean(userInteractedControls.has(host));
+    const required = Boolean(host.required);
+
+    host.toggleAttribute("data-required", required);
+    host.toggleAttribute("data-optional", !required);
+    host.toggleAttribute("data-invalid", !isValid);
+    host.toggleAttribute("data-valid", isValid);
+    host.toggleAttribute("data-user-invalid", hasInteracted && !isValid);
+    host.toggleAttribute("data-user-valid", hasInteracted && isValid);
+  }
+  updateValidity() {
+    const host = this.host;
+    this.setValidity(host.validity.valid);
+  }
+  emitInvalidEvent(originalInvalidEvent?: Event) {
+    const pboInvalidEvent = new CustomEvent<Record<PropertyKey, never>>("pbo-invalid", {
+      bubbles: false,
+      composed: false,
+      cancelable: true,
+      detail: {},
+    });
+
+    if (!originalInvalidEvent) {
+      pboInvalidEvent.preventDefault();
+    }
+
+    if (!this.host.dispatchEvent(pboInvalidEvent)) {
+      originalInvalidEvent?.preventDefault();
+    }
+  }
+}
+
+export const validValidityState: ValidityState = Object.freeze({
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: true,
+  valueMissing: false,
+});
+
+// A validity state object that represents `value missing`
+export const valueMissingValidityState: ValidityState = Object.freeze({
+  ...validValidityState,
+  valid: false,
+  valueMissing: false,
+});
+
+export const customErrorValidityState: ValidityState = Object.freeze({
+  ...validValidityState,
+  valid: false,
+  customError: true,
+});

package/src/internal/pairbo-element.ts

@@ -0,0 +1,85 @@
+import { LitElement } from "lit";
+
+/**
+ * Interface representing a Pairbo form control element.
+ * Extends LitElement to provide form control functionality.
+ *
+ * @interface PairboFormControl
+ * @extends {LitElement}
+ *
+ * @property {string} name - The name of the form control
+ * @property {unknown} value - The current value of the form control
+ * @property {boolean} [disabled] - Whether the form control is disabled
+ * @property {unknown} [defaultValue] - The default value of the form control
+ * @property {boolean} [defaultChecked] - The default checked state for checkable controls
+ * @property {string} [form] - The id of the form this control belongs to
+ * @property {string} [pattern] - Regular expression pattern for validation
+ * @property {number|string|Date} [min] - Minimum allowed value
+ * @property {number|string|Date} [max] - Maximum allowed value
+ * @property {number|"any"} [step] - Step increment value
+ * @property {boolean} [required] - Whether the field is required
+ * @property {number} [minLength] - Minimum length for text input
+ * @property {number} [maxLength] - Maximum length for text input
+ * @property {ValidityState} validity - The ValidityState object representing validation state
+ * @property {string} validationMessage - The validation message
+ *
+ * @method checkValidity - Checks if the element's value satisfies validation constraints
+ * @returns {boolean} True if the element's value is valid, false otherwise
+ *
+ * @method getForm - Gets the form element that contains this control
+ * @returns {HTMLFormElement|null} The parent form element or null if not found
+ *
+ * @method reportValidity - Reports validity to the user through UI feedback
+ * @returns {boolean} True if the element's value is valid, false otherwise
+ *
+ * @method setCustomValidity - Sets a custom validation message
+ * @param {string} error - The custom error message to display
+ */
+export interface PairboFormControl extends LitElement {
+  name: string;
+  value: unknown;
+  disabled?: boolean;
+  defaultValue?: unknown;
+  defaultChecked?: boolean;
+  form?: string;
+
+  pattern?: string;
+  min?: number | string | Date;
+  max?: number | string | Date;
+  step?: number | "any";
+  required?: boolean;
+  minlength?: number;
+  maxlength?: number;
+
+  readonly validity: ValidityState;
+  readonly validationMessage: string;
+
+  checkValidity: () => boolean;
+  getForm: () => HTMLFormElement | null;
+  reportValidity: () => boolean;
+  setCustomValidity: (error: string) => void;
+}
+
+export default class PairboElement extends LitElement {
+  /* --------------------------- Emits custom events -------------------------- */
+  emit(name: string, options?: CustomEventInit<unknown> | undefined) {
+    /**
+     * Creates a new CustomEvent instance with specified event name and options.
+     * @property {boolean} bubbles - Whether the event can bubble up through the Dom
+     * @property {boolean} cancelable - Indicates whether the event is cancelable and therefore prevented as if the event never happened. To Cancel the event, call preventDefault() on the event.
+     * @property {boolean} composed - Indicates whether or not the event will propagate across the shadow Dom boundary into the standard DOM.
+     * @property {Object} detail - Returns any custom data event was created with. Typically used for synthetic events. For the custom event.
+     */
+    const event = new CustomEvent(name, {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      detail: {},
+      ...options,
+    });
+
+    this.dispatchEvent(event);
+
+    return event;
+  }
+}

package/src/internal/slots.ts

@@ -0,0 +1,54 @@
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+
+export class HasSlotController implements ReactiveController {
+  host: ReactiveControllerHost & Element;
+  slotNames: string[] = [];
+  constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {
+    (this.host = host).addController(this);
+    this.slotNames = slotNames;
+  }
+
+  private hasDefaultSlot() {
+    return [...this.host.childNodes].some(node => {
+      // The node is a text node and it's not empty
+      if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== "") {
+        return true;
+      }
+
+      // The node is an element node
+      if (node.nodeType === node.ELEMENT_NODE) {
+        const element = node as Element;
+        const tagName = element.tagName.toLowerCase();
+        // If the tag is visually hidden, ignore it
+        if (tagName === "pbo-visually-hidden") {
+          return false;
+        }
+        // So if the element has no slot attribute, it's in the default slot
+        if (!element.hasAttribute("slot")) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }
+
+  private hasNamedSlot(name: string) {
+    return this.host.querySelector(`:scope > [slot="${name}]`) !== null;
+  }
+  test(slotName: string) {
+    return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+  }
+  hostConnected() {
+    this.host.shadowRoot!.addEventListener("slotchange", this.handleSlotChange);
+  }
+  hostDisconnected() {
+    this.host.shadowRoot!.removeEventListener("slotchange", this.handleSlotChange);
+  }
+
+  private handleSlotChange = (event: Event) => {
+    const slot = event.target as HTMLSlotElement;
+    if ((this.slotNames.includes("[default]") && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {
+      this.host.requestUpdate();
+    }
+  };
+}

package/src/internal/watch.ts

@@ -0,0 +1,79 @@
+import { waitUntil } from "@open-wc/testing";
+import { LitElement } from "lit";
+// Define the handler function type
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+
+// Check the generic type, remove undefined
+type NonUndefined<A> = A extends undefined ? never : A;
+
+/**
+ * Get the keys of the updates handler inside one class.
+ *
+ * keyof will only extract the keys which are non-never
+ *
+ * The modified object
+ * { [key in keyof T] -?: NonUndefined<T[key]> extends UpdateHandler ? key : never; }
+ *
+ * Get the keys in the object: [key in keyof T]
+ *
+ * Remove the undefined keys: -?
+ *
+ * Ternary operator A ? B : C - Check if the type is UpdateHandler: NonUndefined<T[Key]> extends UpdateHandler
+ *  If true, set the value of current key to the key name
+ *  Else set the value of current key to never
+ *  After that, we use the mapped type to get the keys of the object ExampleObject[keyof ExampleObject] will return an union of they key values, and the never value will be removed
+ **/
+type UpdateHandlerKeys<T extends Object> = {
+  [key in keyof T]-?: NonUndefined<T[key]> extends UpdateHandler ? key : never;
+}[keyof T];
+
+type Func = (first: string, second: number, last?: boolean) => void;
+type FunctionKeys = keyof (Func extends Object ? Func : never);
+type Option = {
+  waitUntilFirstUpdate: boolean;
+};
+
+export function watch(propertyName: string | string[], options?: Option) {
+  const resolvedOptions: Required<Option> = {
+    waitUntilFirstUpdate: false,
+    ...options,
+  };
+
+  /**
+   * target: The class to be decorated
+   * decoratedFnName: The name of the function to be decorated
+   */
+  return function <EleClass extends LitElement>(target: EleClass, decoratedFnName: UpdateHandlerKeys<EleClass>) {
+    // If the property name is string, convert it into a string array
+    const watchedProperty = Array.isArray(propertyName) ? propertyName : [propertyName];
+
+    // @ts-ignore update is protected in the LitElement
+    // Store the original update function
+    const { update } = target;
+
+    // This will create a new update function, but it will
+    // wrap the original update function, so it will not be overridden
+
+    // @ts-ignore update is protected in the LitElement
+    target.update = function (this: EleClass, changeProps: Map<keyof EleClass, EleClass[keyof ElemClass]>) {
+      // Loop through the watched properties
+      watchedProperty.forEach(property => {
+        const key = property as keyof EleClass;
+        if (changeProps.has(key)) {
+          const oldValue = changeProps.get(key);
+          const newValue = this[key];
+
+          if (oldValue !== newValue) {
+            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+              (this[decoratedFnName] as unknown as UpdateHandler)(oldValue, newValue);
+            }
+          }
+        }
+      });
+
+      // @ts-ignore update is protected in the LitElement
+      // Call the original update function
+      update.call(this, changeProps);
+    };
+  };
+}

package/src/styles/component.styles.ts

@@ -0,0 +1,17 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+`;