Migrate @storybook/html to Typescript

app/html/package.json

@@ -16,6 +16,7 @@
   },
   "license": "MIT",
   "main": "dist/client/index.js",
+  "types": "dist/client/index.d.ts",
   "bin": {
     "build-storybook": "./bin/build.js",
     "start-storybook": "./bin/index.js",
@@ -25,6 +26,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@storybook/addons": "5.2.0-alpha.41",
     "@storybook/core": "5.2.0-alpha.41",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",

app/html/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 { StoryFnHtmlReturnType, IStorybookSection } from './types';
+
+const framework = 'html';
+
+interface ClientApi extends ClientStoryApi<StoryFnHtmlReturnType> {
+  setAddon(addon: any): void;
+  configure(loaders: () => void, module: NodeModule): void;
+  getStorybook(): IStorybookSection[];
+  clearDecorators(): void;
+  forceReRender(): void;
+  raw: () => any; // todo add type
+  load: (req: any, m: NodeModule, framework: string) => 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/html/src/client/preview/render.js → app/html/src/client/preview/render.ts

@@ -1,17 +1,17 @@
 import { document, Node } from 'global';
 import { stripIndents } from 'common-tags';
+import { RenderMainArgs } from './types';
 
 const rootElement = document.getElementById('root');
 
 export default function renderMain({
-  parameters = {},
   storyFn,
   selectedKind,
   selectedStory,
   showMain,
   showError,
   forceRender,
-}) {
+}: RenderMainArgs) {
   const element = storyFn();
 
   showMain();

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

@@ -0,0 +1,27 @@
+import { StoryFn } from '@storybook/addons';
+
+export type StoryFnHtmlReturnType = string | Node;
+
+export interface IStorybookStory {
+  name: string;
+  render: () => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export interface RenderMainArgs {
+  storyFn: () => StoryFn<StoryFnHtmlReturnType>;
+  selectedKind: string;
+  selectedStory: string;
+  showMain: () => void;
+  showError: (args: ShowErrorArgs) => void;
+  forceRender: boolean;
+}

app/html/src/server/framework-preset-html.js → app/html/src/server/framework-preset-html.ts

@@ -1,4 +1,7 @@
-export function webpack(config) {
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Configuration } from 'webpack';
+
+export function webpack(config: Configuration) {
   return {
     ...config,
     module: {

app/html/src/server/options.js → app/html/src/server/options.ts

@@ -1,4 +1,5 @@
-import packageJson from '../../package.json';
+// tslint:disable-next-line: no-var-requires
+const packageJson = require('../../package.json');
 
 export default {
   packageJson,

app/html/src/typings.d.ts

@@ -0,0 +1,5 @@
+declare module '@storybook/core/*';
+declare module 'global';
+
+// will be provided by the webpack define plugin
+declare var NODE_ENV: string | undefined;

app/html/tsconfig.json

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