Update types to match version 7.0 of storybook-addon-jsx (#39310)

* [storybook-addon-jsx] update types to work with version 7.0 of this lib

 - Remove reference to `storybook__react` types as `@storybook/react` is now written in TS and is providing its own types.
 - Need to upgrade TS to 3.1 as `unknown` type is used and to not have issue related to rest parameters (TS2370)
 - Update tsconfig to make it works with `@types/react`

* [storybook-addon-jsx] update project URL

types/storybook-addon-jsx/index.d.ts

@@ -1,23 +1,38 @@
-// Type definitions for storybook-addon-jsx 5.4
-// Project: https://github.com/storybooks/addon-jsx
+// Type definitions for storybook-addon-jsx 7.0
+// Project: https://github.com/storybookjs/addon-jsx
 // Definitions by: James Newell <https://github.com/jameslnewell>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.8
+// TypeScript Version: 3.1
 
-import '@storybook/react';
 import { ReactNode, ReactElement } from 'react';
+import { StoryApi, DecoratorFunction, Parameters } from '@storybook/addons';
 
 export type displayNameFunc = (element: ReactElement) => string;
 
-declare module '@storybook/react' {
-    interface Options {
-        skip?: number;
-        enableBeautify?: boolean;
-        onBeforeRender?: (domString: string) => string;
-        displayName?: string | displayNameFunc;
-    }
+export interface AddonParameters {
+    skip?: number;
+    enableBeautify?: boolean;
+    onBeforeRender?: (domString: string) => string;
+    displayName?: string | displayNameFunc;
+}
 
-    interface Story {
-        addWithJSX(kind: string, fn: () => ReactNode, options?: Options): Story;
+export type AddWithJSXFunc<StoryFnReturnType> = (
+    kind: string,
+    fn: () => ReactNode,
+    options?: AddonParameters
+) => StoryApi<StoryFnReturnType>;
+
+declare module '@storybook/addons' {
+    interface ClientStoryApi<StoryFnReturnType = unknown> {
+        storiesOf(
+            kind: string,
+            module: NodeModule
+        ): StoryApi<StoryFnReturnType> & {
+            addWithJSX: AddWithJSXFunc<StoryFnReturnType>;
+        };
+        addParameters(parameter: Parameters & { jsx: AddonParameters }): StoryApi<StoryFnReturnType>;
+        addDecorator(decorator: DecoratorFunction<StoryFnReturnType>): StoryApi<StoryFnReturnType>;
     }
 }
+
+export const jsxDecorator: DecoratorFunction<ReactElement<unknown>>;

types/storybook-addon-jsx/package.json

@@ -0,0 +1,7 @@
+{
+    "private": true,
+    "dependencies": {
+        "@storybook/addons": "^5.2.4",
+        "@storybook/react": "^5.2.4"
+    }
+}

types/storybook-addon-jsx/storybook-addon-jsx-tests.tsx

@@ -1,26 +1,46 @@
-/// <reference types="storybook__react" />
-
 import * as React from 'react';
-import { storiesOf } from '@storybook/react';
+import { addParameters, storiesOf, addDecorator } from '@storybook/react';
+import { jsxDecorator } from 'storybook-addon-jsx';
 
 const { Component } = React;
 
-storiesOf('Component', module)
-  .addWithJSX('simple info', () =>
-  <Component>Click the "?" mark at top-right to view the info.</Component>);
+// Test parameters as global options
+addParameters({
+    jsx: {
+        skip: 3,
+        enableBeautify: false,
+        onBeforeRender: str => '',
+    },
+});
 
-storiesOf('Component with options', module)
-  .addWithJSX('simple info', () =>
-  <Component>Click the "?" mark at top-right to view the info.</Component>,
-  {
-    skip: 2,
-    enableBeautify: false,
-    onBeforeRender: (str) => ''
-  });
+// Test `addWithJSX` function
+storiesOf('Component', module).addWithJSX('simple info', () => (
+    <Component>Click the "?" mark at top-right to view the info.</Component>
+));
 
-storiesOf('Component with partial options', module)
-  .addWithJSX('simple info', () =>
-  <Component>Click the "?" mark at top-right to view the info.</Component>,
-  {
-    skip: 2
-  });
+storiesOf('Component with options', module).addWithJSX(
+    'simple info',
+    () => <Component>Click the "?" mark at top-right to view the info.</Component>,
+    {
+        skip: 2,
+        enableBeautify: false,
+        onBeforeRender: str => '',
+    }
+);
+
+storiesOf('Component with partial options', module).addWithJSX(
+    'simple info',
+    () => <Component>Click the "?" mark at top-right to view the info.</Component>,
+    {
+        skip: 2,
+    }
+);
+
+// Test `jsxDecorator` decorator
+storiesOf('test', module)
+    .addDecorator(jsxDecorator)
+    .add('Paris', () => <Component>Hello</Component>)
+    .add('Orleans', () => <Component color="#236544">Hello</Component>);
+
+// Test with global `jsxDecorator` decorator
+addDecorator(jsxDecorator);

types/storybook-addon-jsx/tsconfig.json

@@ -2,7 +2,8 @@
     "compilerOptions": {
         "module": "commonjs",
         "lib": [
-            "es6"
+            "es6",
+            "dom"
         ],
         "noImplicitAny": true,
         "noImplicitThis": true,
@@ -13,14 +14,10 @@
         "typeRoots": [
             "../"
         ],
-        "paths": {
-            "@storybook/react": [
-                "storybook__react"
-            ]
-        },
         "types": [],
         "noEmit": true,
-        "forceConsistentCasingInFileNames": true
+        "forceConsistentCasingInFileNames": true,
+        "esModuleInterop": true
     },
     "files": [
         "index.d.ts",