declare module '@storybook/react' {
  interface Parameters {
    /** Prefer using `storyConfig` for configuring variants */
    variants?: ('default' | 'light' | 'dark' | 'rtl' | (string & Record<string, unknown>))[];
    /** Used by Chromatic */
    chromatic?: ChromaticParameters;
    viewport?: {
      viewports?: Record<string, unknown>;
      defaultViewport?: string;
    };
  }
}

/**
 * Derived from Chromatic's config type definitions
 *
 * @see https://github.com/chromaui/chromatic-cli/blob/main/storybook-addon.d.ts
 */
export interface ChromaticParameters {
  /**
   * Prefer using `storyConfig` for configuring viewports if possible.
   *
   * To set a viewport, specify one or more screen widths to the
   * `chromatic.viewports` parameter. When left unspecified, Chromatic
   * uses a default value of `[1200]`. Use `[414]` for 'Large mobile'
   * viewport width.
   *
   * @default [1200]
   */
  viewports?: [414] | [414, 1200];

  /**
   * You can omit stories entirely from Chromatic testing using the disable story parameter.
   */
  disable?: boolean;

  /**
   * Chromatic will pause CSS animations and reset them to their beginning state.
   *
   * Some animations are used to "animate in" visible elements. To specify that Chromatic should pause the
   * animation at the end, use the `pauseAnimationAtEnd` story parameter.
   */
  pauseAnimationAtEnd?: boolean;

  /**
   * Use story-level delay to ensure a minimum amount of time (in milliseconds) has passed before Chromatic takes a
   * screenshot.
   */
  delay?: number;

  /**
   * The diffThreshold parameter allows you to fine tune the threshold for visual change between snapshots before
   * they’re flagged by Chromatic. Sometimes you need assurance to the sub-pixel and other times you want to skip
   * visual noise generated by non-deterministic rendering such as anti-aliasing.
   *
   * 0 is the most accurate. 1 is the least accurate.
   *
   * @default 0.063
   */
  diffThreshold?: number;

  /**
   * Modes for Chromatic testing.
   *
   * Specify the mode in which Chromatic should run tests. For example, 'light' for light mode,
   * 'dark' for dark mode, or `rtl` for right to left content.
   */
  modes?: object;
}
