Migrate app-react to typescript (#7054)

Migrate app-react to typescript

addons/knobs/src/KnobStore.ts

@@ -48,7 +48,7 @@ export default class KnobStore {
 
   callbacks: Callback[] = [];
 
-  timer: number;
+  timer: NodeJS.Timeout;
 
   has(key: string) {
     return this.store[key] !== undefined;

addons/options/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "types": ["webpack-env"]
   },
   "include": [
     "src/**/*"

addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap

@@ -166,7 +166,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
           onClick={[Function]}
         >
           <button
-            onClick={[Function]}
             style={
               Object {
                 "backgroundColor": "transparent",
@@ -273,7 +272,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
                 "textDecoration": "none",
               }
             }
-            target="_blank"
           >
             Writing Stories
           </a>

addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap

@@ -139,7 +139,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
   <p>
     See these sample 
     <button
-      onClick={[Function]}
       style={
         Object {
           "backgroundColor": "transparent",
@@ -234,7 +233,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
           "textDecoration": "none",
         }
       }
-      target="_blank"
     >
       Writing Stories
     </a>

addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo

@@ -43,7 +43,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
   <p>
     See these sample 
     <button
-      onClick={[Function]}
       style={
         Object {
           "backgroundColor": "transparent",
@@ -138,7 +137,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
           "textDecoration": "none",
         }
       }
-      target="_blank"
     >
       Writing Stories
     </a>

addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot

@@ -43,7 +43,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
   <p>
     See these sample 
     <button
-      onClick={[Function]}
       style={
         Object {
           "backgroundColor": "transparent",
@@ -138,7 +137,6 @@ exports[`Storyshots Welcome to Storybook 1`] = `
           "textDecoration": "none",
         }
       }
-      target="_blank"
     >
       Writing Stories
     </a>

addons/storyshots/storyshots-core/stories/storyshot.test.js

@@ -1,6 +1,8 @@
 import path from 'path';
 import initStoryshots, { multiSnapshotWithOptions } from '../src';
 
+jest.mock('@storybook/node-logger');
+
 // with react-test-renderer
 initStoryshots({
   framework: 'react',

addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.js

@@ -1,5 +1,7 @@
 import { constructUrl } from '../url';
 
+jest.mock('@storybook/node-logger');
+
 describe('Construct URL for Storyshots', () => {
   it('can use a url without path and without query params', () => {
     expect(constructUrl('http://localhost:9001', 'someKind', 'someStory')).toEqual(

app/angular/src/server/create-fork-ts-checker-plugin.test.js

@@ -7,6 +7,7 @@ jest.mock('fs', () => require('../../../../__mocks__/fs'));
 jest.mock('path', () => ({
   resolve: () => 'tsconfig.json',
 }));
+jest.mock('@storybook/node-logger');
 
 const setupFiles = files => {
   // eslint-disable-next-line no-underscore-dangle, global-require

app/angular/src/server/ts_config.test.js

@@ -5,6 +5,7 @@ jest.mock('fs', () => require('../../../../__mocks__/fs'));
 jest.mock('path', () => ({
   resolve: () => 'tsconfig.json',
 }));
+jest.mock('@storybook/node-logger');
 
 const setupFiles = files => {
   // eslint-disable-next-line no-underscore-dangle, global-require

app/react/package.json

@@ -16,7 +16,7 @@
   },
   "license": "MIT",
   "main": "dist/client/index.js",
-  "jsnext:main": "src/client/index.js",
+  "types": "dist/client/index.d.ts",
   "bin": {
     "build-storybook": "./bin/build.js",
     "start-storybook": "./bin/index.js",
@@ -29,6 +29,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.2.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@storybook/addons": "5.2.0-alpha.38",
     "@storybook/core": "5.2.0-alpha.38",
     "@storybook/node-logger": "5.2.0-alpha.38",
     "@svgr/webpack": "^4.0.3",
@@ -49,9 +50,15 @@
   },
   "peerDependencies": {
     "babel-loader": "^7.0.0 || ^8.0.0",
+    "@babel/core": "^7.0.1",
     "react": "*",
     "react-dom": "*"
   },
+  "devDependencies": {
+    "@types/mini-css-extract-plugin": "^0.2.1",
+    "@types/node": "^12.0.8",
+    "@types/webpack": "^4.4.32"
+  },
   "engines": {
     "node": ">=8.0.0"
   },

app/react/src/client/preview/element_check.test.js → app/react/src/client/preview/element_check.test.tsx

@@ -60,10 +60,11 @@ describe('element_check.isReactRenderable', () => {
   const number = 1337;
   const element = <span>what's up</span>;
   const array = [string, number, element];
-  const object = { key: null };
+  const object = { key: null } as any;
 
   it('allows rendering React elements only prior to React Fiber', () => {
     // mutate version for the purpose of the test
+    // @ts-ignore
     React.version = '15.5.4';
 
     expect(isReactRenderable(string)).toBe(false);
@@ -75,6 +76,7 @@ describe('element_check.isReactRenderable', () => {
 
   it('allows rendering string, numbers, arrays and React elements with React Fiber', () => {
     // mutate version for the purpose of the test
+    // @ts-ignore
     React.version = '16.0.0-alpha.13';
 
     expect(isReactRenderable(string)).toBe(true);

app/react/src/client/preview/element_check.js → app/react/src/client/preview/element_check.ts

@@ -2,17 +2,17 @@ import React from 'react';
 import flattenDeep from 'lodash/flattenDeep';
 
 // return true if the element is renderable with react fiber
-export const isValidFiberElement = element =>
+export const isValidFiberElement = (element: React.ReactElement) =>
   typeof element === 'string' || typeof element === 'number' || React.isValidElement(element);
 
-export const isPriorToFiber = version => {
+export const isPriorToFiber = (version: string) => {
   const [majorVersion] = version.split('.');
 
   return Number(majorVersion) < 16;
 };
 
 // accepts an element and return true if renderable else return false
-const isReactRenderable = element => {
+const isReactRenderable = (element: React.ReactElement): boolean => {
   // storybook is running with a version prior to fiber,
   // run a simple check on the element
   if (isPriorToFiber(React.version)) {

app/react/src/client/preview/index.test.js → app/react/src/client/preview/index.test.ts

@@ -4,7 +4,7 @@ describe('preview', () => {
     jest.resetModules();
   });
 
-  const isFunction = value => typeof value === 'function';
+  const isFunction = (value: unknown) => typeof value === 'function';
 
   it('should return the client api in a browser environment', () => {
     const api = require('.');
@@ -13,10 +13,14 @@ describe('preview', () => {
   });
 
   it('should return the client api in a node.js environment', () => {
-    jest.mock('global', () => ({
-      document: undefined,
-      window: undefined,
-    }));
+    jest.mock(
+      'global',
+      () =>
+        ({
+          document: undefined,
+          window: undefined,
+        } as any)
+    );
     const api = require('.');
     expect(Object.keys(api).length).toBeGreaterThan(0);
     expect(Object.values(api).every(isFunction)).toEqual(true);

app/react/src/client/preview/index.ts

@@ -0,0 +1,37 @@
+/* eslint-disable prefer-destructuring */
+import { start } from '@storybook/core/client';
+import { ClientStoryApi } from '@storybook/addons';
+
+import './globals';
+import render from './render';
+import { IStorybookSection, StoryFnReactReturnType } from './types';
+
+const framework = 'react';
+
+interface ClientApi extends ClientStoryApi<StoryFnReactReturnType> {
+  setAddon(addon: any): void;
+  configure(loaders: () => void, module: NodeModule): void;
+  getStorybook(): IStorybookSection[];
+  clearDecorators(): void;
+  forceReRender(): void;
+  raw: () => any; // todo add type
+  load: (...args: any[]) => void;
+}
+
+const api = start(render);
+
+export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
+  return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
+    framework,
+  });
+};
+
+export const load: ClientApi['load'] = (...args) => api.load(...args, framework);
+export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;
+export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;
+export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
+export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
+export const configure: ClientApi['configure'] = api.configApi.configure;
+export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
+export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
+export const raw: ClientApi['raw'] = api.clientApi.raw;

app/react/src/client/preview/render.js → app/react/src/client/preview/render.tsx

@@ -3,10 +3,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { stripIndents } from 'common-tags';
 import isReactRenderable from './element_check';
+import { RenderMainArgs } from './types';
 
 const rootEl = document ? document.getElementById('root') : null;
 
-function render(node, el) {
+function render(node: React.ReactElement, el: Element) {
   ReactDOM.render(
     process.env.STORYBOOK_EXAMPLE_APP ? <React.StrictMode>{node}</React.StrictMode> : node,
     el
@@ -20,7 +21,7 @@ export default function renderMain({
   showMain,
   showError,
   forceRender,
-}) {
+}: RenderMainArgs) {
   const element = storyFn();
 
   if (!element) {

app/react/src/client/preview/types.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export interface RenderMainArgs {
+  storyFn: () => React.ReactElement | undefined;
+  selectedKind: string;
+  selectedStory: string;
+  showMain: () => void;
+  showError: (args: ShowErrorArgs) => void;
+  forceRender: boolean;
+}
+
+export type StoryFnReactReturnType = React.ReactElement<unknown>;
+
+export interface ICollection {
+  [p: string]: any;
+}
+
+export interface IStorybookStory {
+  name: string;
+  render: () => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}

app/react/src/demo/Button.js → app/react/src/demo/Button.tsx

@@ -11,7 +11,13 @@ const styles = {
   margin: 10,
 };
 
-const Button = ({ children, onClick }) => (
+const Button = ({
+  children,
+  onClick,
+}: {
+  children: React.ReactChildren;
+  onClick: (event: React.MouseEvent<HTMLElement>) => void;
+}) => (
   <button onClick={onClick} style={styles} type="button">
     {children}
   </button>