From 06bef93b1891253d3923087ce5ac42eae67e3a26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= Date: Mon, 4 Nov 2019 19:13:43 +0100 Subject: [PATCH] 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 | 41 +++++++++---- types/storybook-addon-jsx/package.json | 7 +++ .../storybook-addon-jsx-tests.tsx | 60 ++++++++++++------- types/storybook-addon-jsx/tsconfig.json | 11 ++-- 4 files changed, 79 insertions(+), 40 deletions(-) create mode 100644 types/storybook-addon-jsx/package.json diff --git a/types/storybook-addon-jsx/index.d.ts b/types/storybook-addon-jsx/index.d.ts index c4371d4c07..59b072cf1b 100644 --- a/types/storybook-addon-jsx/index.d.ts +++ b/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 // 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 = ( + kind: string, + fn: () => ReactNode, + options?: AddonParameters +) => StoryApi; + +declare module '@storybook/addons' { + interface ClientStoryApi { + storiesOf( + kind: string, + module: NodeModule + ): StoryApi & { + addWithJSX: AddWithJSXFunc; + }; + addParameters(parameter: Parameters & { jsx: AddonParameters }): StoryApi; + addDecorator(decorator: DecoratorFunction): StoryApi; } } + +export const jsxDecorator: DecoratorFunction>; diff --git a/types/storybook-addon-jsx/package.json b/types/storybook-addon-jsx/package.json new file mode 100644 index 0000000000..2a998050a5 --- /dev/null +++ b/types/storybook-addon-jsx/package.json @@ -0,0 +1,7 @@ +{ + "private": true, + "dependencies": { + "@storybook/addons": "^5.2.4", + "@storybook/react": "^5.2.4" + } +} diff --git a/types/storybook-addon-jsx/storybook-addon-jsx-tests.tsx b/types/storybook-addon-jsx/storybook-addon-jsx-tests.tsx index 9413ffc251..82d0f3cdca 100644 --- a/types/storybook-addon-jsx/storybook-addon-jsx-tests.tsx +++ b/types/storybook-addon-jsx/storybook-addon-jsx-tests.tsx @@ -1,26 +1,46 @@ -/// - 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', () => - Click the "?" mark at top-right to view the info.); +// Test parameters as global options +addParameters({ + jsx: { + skip: 3, + enableBeautify: false, + onBeforeRender: str => '', + }, +}); -storiesOf('Component with options', module) - .addWithJSX('simple info', () => - Click the "?" mark at top-right to view the info., - { - skip: 2, - enableBeautify: false, - onBeforeRender: (str) => '' - }); +// Test `addWithJSX` function +storiesOf('Component', module).addWithJSX('simple info', () => ( + Click the "?" mark at top-right to view the info. +)); -storiesOf('Component with partial options', module) - .addWithJSX('simple info', () => - Click the "?" mark at top-right to view the info., - { - skip: 2 - }); +storiesOf('Component with options', module).addWithJSX( + 'simple info', + () => Click the "?" mark at top-right to view the info., + { + skip: 2, + enableBeautify: false, + onBeforeRender: str => '', + } +); + +storiesOf('Component with partial options', module).addWithJSX( + 'simple info', + () => Click the "?" mark at top-right to view the info., + { + skip: 2, + } +); + +// Test `jsxDecorator` decorator +storiesOf('test', module) + .addDecorator(jsxDecorator) + .add('Paris', () => Hello) + .add('Orleans', () => Hello); + +// Test with global `jsxDecorator` decorator +addDecorator(jsxDecorator); diff --git a/types/storybook-addon-jsx/tsconfig.json b/types/storybook-addon-jsx/tsconfig.json index 796cf9d391..dd6d692054 100644 --- a/types/storybook-addon-jsx/tsconfig.json +++ b/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",