Add TypeScript types

[coffenbacher]

I'm using these for now, if anyone wants to build off this: modali.d.ts

declare module 'modali' {
  export interface IModalProps {
    isShown: boolean
    hide: () => void
    options: IModalOptions
  }
  export interface IModalOptions {
    title?: string
    message?: string
    buttons?: array
    closeButton?: boolean
    animated?: boolean
    large?: boolean
    overlayClose?: boolean
    keyboardClose?: boolean
  }

  export function useModali(IModalOptions?): [IModalProps, () => void]
  export const Modal: FC<IModalProps>
}

[jcrowson]

@coffenbacher I think this is an excellent suggestion. Would you be willing to open a PR to add these to Modali? I've not worked with Typescript before so don't know the process of getting these in. I can research it, but it would be awesome if you'd like to kindly contribute a PR.

[coffenbacher]

Me neither to be honest (in terms of publishing a definition); working under a huge deadline here so I can't right now, but hopefully soon. I think the declaration above should be enough to unblock anyone (like me) for now until we can formalize it.

[jcrowson]

@coffenbacher No worries - I'd like to add this to the next Milestone (v1.2). Good luck with the deadline, I hope everything goes well for you!

[alfetopito]

Just found myself in the same spot. For reference, the instructions to get it out are here https://github.com/DefinitelyTyped/DefinitelyTyped#create-a-new-package

[mikaello]

Thanks for your types @coffenbacher! I built on yours, and I think this is complete types for this module:

declare module "modali" {
  import * as React from "react";

  export interface IModal {
    /**
     * Controls whether the modals is visible or not. Toggled by the toggle
     * modal function returned by `useModal`, or could be externally controlled
     */
    isModalVisible: boolean;

    /**
     * Hide the modal.
     */
    hide: () => void;

    /**
     * Options for the modal
     */
    options: IModalOptions;
  }

  export interface IModalProps extends IModal {
    children?: React.ReactNode;
  }

  /**
   * An object containing props which must be passed into the Modali component.
   */
  export interface IModalHook extends IModal {
    /**
     * Telling whether the modal is visible or not.
     */
    isShown: boolean;
  }

  export interface IModalOptions {
    /**
     * Called when the component finishes mounting to the DOM
     */
    onShow?: () => void;

    /**
     * Called when the component is removed from the DOM
     */
    onHide?: () => void;

    /**
     * Called when the escape key is pressed while the component is mounted to the DOM
     */
    onEscapeKeyDown?: () => void;

    /**
     * Called when the modal overlay back is clicked while the component is mounted to the DOM
     */
    onOverlayClicked?: () => void;

    /**
     * The text displayed in the upper left corner
     */
    title?: string;

    /**
     * The text displayed in the body of the modal
     */
    message?: string;

    /**
     * Displays whatever is passed in in the footer
     */
    buttons?: any[];

    /**
     * Controls the visibility of the close button
     */
    closeButton?: boolean;

    /**
     * Fades in the modal when it mounts to the DOM
     */
    animated?: boolean;

    /**
     * Positions the modal in the center of the screen
     */
    centered?: boolean;

    /**
     * Changes the size of the modal to be 800px wide
     */
    large?: boolean;

    /**
     * Disables clicking the modal overlay to hide it
     */
    overlayClose?: boolean;

    /**
     * Disables the ESC key hiding the modal
     */
    keyboardClose?: boolean;
  }

  export interface IButtonProps {
    /**
     * String that is shown on the button
     */
    label: string;

    /**
     * Pass in this prop as true to show the default button
     */
    isStyleDefault?: boolean;

    /**
     * Pass in this prop as true to show a cancel button
     */
    isStyleCancel?: boolean;

    /**
     * Pass in this prop as true to show a delete button
     */
    isStyleDestructive?: boolean;

    /**
     * Called when the button is clicked
     */
    onClick: () => void;
  }

  /**
   * Toggle visibility of the modali component
   */
  type toggleModaliComponent = () => void;

  export function useModali(
    options?: IModalOptions,
  ): [IModalHook, toggleModaliComponent];

  /**
   * The `<Modali.Modal />` component provides a beautiful, WAI-ARIA accessible
   * modal dialog out of the box. Import it, add it to your component tree, pass
   * in the props object that you get from the useModali hook and you're all set.
   */
  export const Modal: React.FC<IModalProps>;

  /**
   * The `<Modali.Button />` component provides a ready-to-go button component
   * that includes three separate styles of button: default, cancel, and destructive.
   */
  export const Button: React.FC<IButtonProps>;
}