julianoczkowski/create-trimble-app/create-modus-wrapper-component

import { createEffect } from "solid-js";
import type { Component } from "solid-js";
export interface Modus[ComponentName]Props {
  /** Description of prop */
  propName?: string;
  /** A callback function to handle events. */
  onEventName?: (event: CustomEvent<EventDetailType>) => void;
  /** A custom CSS class to apply to the component. */
  customClass?: string;
  /** The ARIA label for accessibility. */
  "aria-label"?: string;
}
/**
 * Renders a Modus [component name] component.
 *
 * @example
 * // Basic usage
 * <Modus[ComponentName] propName="value" />
 *
 * @example
 * // With event handler
 * <Modus[ComponentName]
 *   propName="value"
 *   onEventName={(event) => console.log(event.detail)}
 * />
 */
const Modus[ComponentName]: Component<Modus[ComponentName]Props> = (props) => {
  let componentEl: HTMLModusWc[ComponentName]Element | undefined;
  createEffect(() => {
    const component = componentEl;
    if (!component) return;
    const handleEventName = (event: Event) => {
      props.onEventName?.(event as CustomEvent<EventDetailType>);
    };
    if (props.onEventName) {
      component.addEventListener("eventName", handleEventName);
    }
    return () => {
      if (props.onEventName) {
        component.removeEventListener("eventName", handleEventName);
      }
    };
  });
  return (
    <modus-wc-[component-name]
      ref={(el) => (componentEl = el)}
      prop-name={props.propName}
      custom-class={props.customClass}
      aria-label={props["aria-label"]}
    />
  );
};
export default Modus[ComponentName];

// ✅ CORRECT: Conditional spreading
<modus-wc-component
  {...(props.color && { color: props.color })}
  {...(props.variant && { variant: props.variant })}
  size={props.size}
/>

createEffect(() => {
  const component = componentEl;
  if (!component) return;
  const handleEvent = (event: Event) => {
    props.onEvent?.(event as CustomEvent<EventDetailType>);
  };
  if (props.onEvent) {
    component.addEventListener("eventName", handleEvent);
  }
  return () => {
    if (props.onEvent) {
      component.removeEventListener("eventName", handleEvent);
    }
  };
});

// ✅ CORRECT: Proper element type
let componentEl: HTMLModusWcButtonElement | undefined;
let componentEl: HTMLModusWcCheckboxElement | undefined;
let componentEl: HTMLModusWcDropdownMenuElement | undefined;
// Pattern: HTMLModusWc[ComponentName]Element

// SolidJS prop: customClass
// Web component prop: custom-class
<modus-wc-component custom-class={props.customClass} />
// SolidJS prop: modalId
// Web component prop: modal-id
<modus-wc-modal modal-id={props.modalId} />

<modus-wc-component ref={(el) => (componentEl = el)} />