Monarch API

components = {
  controls: Array<CardControl>,
  badges: Array<CardBadge>,
  markers: Array<CardMarker>,
  ...
}

components = {
  controls: Array<CardControl>,
  badges: Array<CardBadge>,
  markers: Array<CardMarker>,
  ...
}

Hooks.on("getMonarchHandComponents", (monarch, components) => {
  components.badges.push({
    ...
  });
});

Hooks.on("getMonarchHandComponents", (monarch, components) => {
  components.badges.push({
    ...
  });
});

/**
* @typedef  {Object} CardControl                   An object defining a control to display on a card.
 * @property {string|Function<string>}   [tooltip]  - The tooltip of the control, or a function that returns the tooltip
 * @property {string|Function<string>}   [aria]     - The aria label (for screen readers) of the control, or a function that returns the aria label
 * @property {string|Function<string>}   [icon]     - The icon to display for the control, or a function that returns the icon
 * @property {string}                    [class]    - The css class to apply to the control
 * @property {boolean|Function<boolean>} [disabled] - Whether the control is disabled, or a function that returns whether the control is disabled
 * @property {Function}                  [onclick]  - The function to call when the control is clicked
 * @property {Array<CardControl>}        [controls] - An array of controls to display as a group
*/

/**
* @typedef  {Object} CardControl                   An object defining a control to display on a card.
 * @property {string|Function<string>}   [tooltip]  - The tooltip of the control, or a function that returns the tooltip
 * @property {string|Function<string>}   [aria]     - The aria label (for screen readers) of the control, or a function that returns the aria label
 * @property {string|Function<string>}   [icon]     - The icon to display for the control, or a function that returns the icon
 * @property {string}                    [class]    - The css class to apply to the control
 * @property {boolean|Function<boolean>} [disabled] - Whether the control is disabled, or a function that returns whether the control is disabled
 * @property {Function}                  [onclick]  - The function to call when the control is clicked
 * @property {Array<CardControl>}        [controls] - An array of controls to display as a group
*/

/** An object defining a control to display on a card. */
interface CardControl {
  /** The tooltip of the control, or a function that returns the tooltip */
  tooltip: string | (() => string);
  /** The aria label (for screen readers) of the control, or a function that returns the aria label */
  aria: string | (() => string);
  /** The icon to display for the control, or a function that returns the icon */
  icon: string | (() => string);
  /** The css class to apply to the control */
  class: string;
  /**
   * Whether or not to disable the control. The control will appear grayed out. May be a function that returns a boolean.
   * @defaultValue `false`
   */
  disabled?: string | (() => string);
  /** A function that will run when the control is clicked*/
  onclick: (event: MouseEvent, card: Card, container: Cards) => void;
  /**
   * An array of controls to be added as a control group. When included, you may omit all other properties except `class`.
   * Instead, each item in this `controls` array should be a complete CardControl object. Does not support nesting.
   */
  controls?: CardControl[];
}

/** An object defining a control to display on a card. */
interface CardControl {
  /** The tooltip of the control, or a function that returns the tooltip */
  tooltip: string | (() => string);
  /** The aria label (for screen readers) of the control, or a function that returns the aria label */
  aria: string | (() => string);
  /** The icon to display for the control, or a function that returns the icon */
  icon: string | (() => string);
  /** The css class to apply to the control */
  class: string;
  /**
   * Whether or not to disable the control. The control will appear grayed out. May be a function that returns a boolean.
   * @defaultValue `false`
   */
  disabled?: string | (() => string);
  /** A function that will run when the control is clicked*/
  onclick: (event: MouseEvent, card: Card, container: Cards) => void;
  /**
   * An array of controls to be added as a control group. When included, you may omit all other properties except `class`.
   * Instead, each item in this `controls` array should be a complete CardControl object. Does not support nesting.
   */
  controls?: CardControl[];
}

/**
 * @callback clickCallback
 * @param {Event} event
 * @param {Card} card
 * @param {Cards} container
 * @returns {string}
 */

/**
 * @callback clickCallback
 * @param {Event} event
 * @param {Card} card
 * @param {Cards} container
 * @returns {string}
 */

export type clickCallback = (event: Event, card: Card, container: Cards) => string;

export type clickCallback = (event: Event, card: Card, container: Cards) => string;