@pairbo/ui-kit 0.0.1 → 0.0.3

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

@@ -1,121 +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 PairboElement from "../../internal/pairbo-element.js";
-import styles from "./type-form.styles.js";
-import PboSelector from "../selector/selector.component.js";
-import PboTextarea from "../textarea/textarea.component.js";
-import PboRadioGroup from "../radio-group/radio-group.component.js";
-import PboButton from "../button/button.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-type-form")
-export default class PboTypeForm extends PairboElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-  static dependencies = {
-    "pbo-selector": PboSelector,
-    "pbo-textarea": PboTextarea,
-    "pbo-color-radio-group": PboRadioGroup,
-    "pbo-radio-group": PboRadioGroup,
-    "pbo-radio-button": PboRadioGroup,
-    "pbo-button": PboButton,
-  };
-
-  @query(".greeting-text") greetingText!: PboTextarea;
-  @query(".font-selector") fontSelector!: PboSelector;
-  @query(".text-color") textColor!: PboRadioGroup;
-  @query(".text-alignment") textAlignment!: PboRadioGroup;
-
-  @state()
-  private formData = {
-    font: "",
-    text: "",
-    color: "",
-    alignment: "",
-  };
-
-  @property({ type: String, reflect: true }) cardInnerImageUrl = "../../../public/Greeting Card from Pairbo.png";
-
-  get form() {
-    return {
-      font: this.fontSelector?.value,
-      text: this.greetingText?.value,
-      color: this.textColor?.value,
-      alignment: this.textAlignment?.value,
-    };
-  }
-
-  private handleFormChange(e: Event) {
-    const target = e.target as HTMLElement;
-
-    // Update the form data based on which element changed
-    if (target.classList.contains("font-selector")) {
-      this.formData.font = (target as PboSelector)?.value?.value || " Font form control not implemented yet";
-    } else if (target.classList.contains("greeting-text")) {
-      this.formData.text = (target as PboTextarea).value;
-    } else if (target.classList.contains("text-color")) {
-      this.formData.color = (target as PboRadioGroup).value;
-    } else if (target.classList.contains("text-alignment")) {
-      this.formData.alignment = (target as PboRadioGroup).value;
-    }
-
-    // Emit the change event with the current form data
-    this.emit("pbo-change", {
-      detail: this.form,
-    });
-  }
-
-  hostConnected() {
-    this.addEventListener("pbo-change", this.handleFormChange);
-  }
-
-  hostDisconnected() {
-    this.removeEventListener("pbo-change", this.handleFormChange);
-  }
-
-  render() {
-    return html`
-      <form class="typing-form">
-        <pbo-selector
-          class="font-selector"
-          .fonts="${[
-            { value: "Monsieur La Doulaise", label: "Monsieur La Doulaise", font: "Monsieur La Doulaise, serif" },
-            { value: "Open Sans", label: "Open Sans", font: "'Open Sans', sans-serif" },
-            { value: "Kablammo", label: "Kablammo", font: "Kablammo" },
-          ]}"
-          @pbo-change=${this.handleFormChange}
-        ></pbo-selector>
-        <pbo-textarea class="greeting-text" @pbo-input=${this.handleFormChange}></pbo-textarea>
-
-        <pbo-radio-group class="text-color" @pbo-change=${this.handleFormChange}>
-          <pbo-radio-button value="rgb(255,255,255)" size="small" circle></pbo-radio-button>
-          <pbo-radio-button value="rgb(0,0,0)" size="small" circle></pbo-radio-button>
-        </pbo-radio-group>
-
-        <pbo-radio-group class="text-alignment" @pbo-change=${this.handleFormChange}>
-          <pbo-radio-button value="left">Left</pbo-radio-button>
-          <pbo-radio-button value="center">Center</pbo-radio-button>
-          <pbo-radio-button value="right">Right</pbo-radio-button>
-        </pbo-radio-group>
-
-        <pbo-button>Save and Continue</pbo-button>
-      </form>
-    `;
-  }
-}

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

@@ -1,7 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    display: block;
-  }
-`;

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

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

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

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

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

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

package/src/internal/form.ts

@@ -1,376 +0,0 @@
-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/slots.ts

@@ -1,54 +0,0 @@
-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();
-    }
-  };
-}