Typescript: Migrate @storybook/mithril (#8320)

Typescript: Migrate @storybook/mithril

addons/docs/src/blocks/Preview.tsx

@@ -15,7 +15,12 @@ type PreviewProps = PurePreviewProps & {
 };
 
 const getPreviewProps = (
-  { withSource = SourceState.CLOSED, mdxSource, children, ...props }: PreviewProps & { children?: ReactNode },
+  {
+    withSource = SourceState.CLOSED,
+    mdxSource,
+    children,
+    ...props
+  }: PreviewProps & { children?: ReactNode },
   { mdxStoryNameToId, storyStore }: DocsContextProps
 ): PurePreviewProps => {
   if (withSource === SourceState.NONE) {

addons/jest/src/index.ts

@@ -48,16 +48,13 @@ const emitAddTests = ({ kind, story, testFiles, options }: EmitAddTestsArg) => {
   });
 };
 
-export const withTests = (userOptions: {
-  results: any;
-  filesExt?: string;
-}) => {
+export const withTests = (userOptions: { results: any; filesExt?: string }) => {
   const defaultOptions = {
     filesExt: '((\\.specs?)|(\\.tests?))?(\\.[jt]sx?)?$',
   };
   const options = { ...defaultOptions, ...userOptions };
 
-  return (...args: any []) => {
+  return (...args: any[]) => {
     if (typeof args[0] === 'string') {
       return deprecate((storyFn: StoryFn<any>, { kind }: Parameters) => {
         emitAddTests({ kind, story: storyFn, testFiles: (args as any) as string[], options });

app/mithril/package.json

@@ -23,6 +23,7 @@
     "*.d.ts"
   ],
   "main": "dist/client/index.js",
+  "types": "dist/client/index.d.ts",
   "bin": {
     "build-storybook": "./bin/build.js",
     "start-storybook": "./bin/index.js",
@@ -32,8 +33,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@babel/core": "^7.6.2",
     "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@storybook/addons": "5.3.0-alpha.22",
     "@storybook/core": "5.3.0-alpha.22",
+    "@types/mithril": "^2.0.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "regenerator-runtime": "^0.13.3",

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

@@ -0,0 +1,34 @@
+import { start } from '@storybook/core/client';
+
+import './globals';
+import { ClientStoryApi, Loadable } from '@storybook/addons';
+import render from './render';
+
+import { IStorybookSection, StoryFnMithrilReturnType } from './types';
+
+const { configure: coreConfigure, clientApi, forceReRender } = start(render);
+
+const framework = 'mithril';
+
+interface ClientApi extends ClientStoryApi<StoryFnMithrilReturnType> {
+  setAddon(addon: any): void;
+  configure(loader: Loadable, module: NodeModule): void;
+  getStorybook(): IStorybookSection[];
+  clearDecorators(): void;
+  forceReRender(): void;
+  raw: () => any; // todo add type
+}
+
+export const storiesOf: ClientApi['storiesOf'] = (kind, m) =>
+  (clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({ framework });
+
+export const configure: ClientApi['configure'] = (...args) => coreConfigure(...args, framework);
+
+export const { setAddon } = clientApi;
+export const { addDecorator } = clientApi;
+export const { addParameters } = clientApi;
+export const { clearDecorators } = clientApi;
+export const { getStorybook } = clientApi;
+export const { raw } = clientApi;
+
+export { forceReRender };

app/mithril/src/client/preview/render.js → app/mithril/src/client/preview/render.ts

@@ -4,6 +4,8 @@ import { document } from 'global';
 import m from 'mithril';
 import dedent from 'ts-dedent';
 
+import { RenderMainArgs } from './types';
+
 const rootEl = document.getElementById('root');
 
 export default function renderMain({
@@ -12,8 +14,7 @@ export default function renderMain({
   selectedStory,
   showMain,
   showError,
-  // forceRender,
-}) {
+}: RenderMainArgs) {
   const element = storyFn();
 
   if (!element) {

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

@@ -0,0 +1,28 @@
+import m from 'mithril';
+
+export interface IStorybookStory {
+  name: string;
+  render: () => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}
+
+export type StoryFnMithrilReturnType = m.Component<unknown>;
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export interface RenderMainArgs {
+  storyFn: () => StoryFnMithrilReturnType;
+  selectedKind: string;
+  selectedStory: string;
+  showMain: () => void;
+  showError: (args: ShowErrorArgs) => void;
+  showException: (err: Error) => void;
+  forceRender: boolean;
+}

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

@@ -1,4 +1,6 @@
-export function babelDefault(config) {
+import { TransformOptions } from '@babel/core';
+
+export function babelDefault(config: TransformOptions) {
   return {
     ...config,
     plugins: [...config.plugins, require.resolve('@babel/plugin-transform-react-jsx')],

app/mithril/src/typings.d.ts

@@ -0,0 +1,2 @@
+declare module '@storybook/core/*';
+declare module 'global';

app/mithril/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "types": ["webpack-env"],
+    "resolveJsonModule": true
+  },
+  "include": [
+    "src/**/*",
+    "package.json"
+  ],
+  "exclude": [
+    "src/**/*.test.*"
+  ]
+}

yarn.lock

@@ -286,7 +286,7 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.2.2", "@babel/core@^7.3.3", "@babel/core@^7.3.4", "@babel/core@^7.4.3", "@babel/core@^7.4.5":
+"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.2.2", "@babel/core@^7.3.3", "@babel/core@^7.3.4", "@babel/core@^7.4.3", "@babel/core@^7.4.5", "@babel/core@^7.6.2":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.2.tgz#069a776e8d5e9eefff76236bc8845566bd31dd91"
   integrity sha512-l8zto/fuoZIbncm+01p8zPSDZu/VuuJhAfA7d/AbzM09WR7iVhavvfNDYCNpo1VvLk6E6xgAoP9P+/EMJHuRkQ==
@@ -3925,6 +3925,11 @@
   resolved "https://registry.yarnpkg.com/@types/mithril/-/mithril-1.1.17.tgz#1a5dde2a653ef6011cd36ef70eefe6bac0cb92e4"
   integrity sha512-U/wwKZT8hjstY2Q470bLMGVh/fjT2+SgBMzIILn0Z4nmgzzG6j+n18UOAxQ63aI8vXIOkQsbkAdbESt8+jIQdQ==
 
+"@types/mithril@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/mithril/-/mithril-2.0.0.tgz#f9a9e523264af6dc8c2027029bcd400a459739bb"
+  integrity sha512-Bjjs5a7xc6eC207ZE1tR7ssnMoF8d3VVcupmzbhFaP2nM4G1Jpm1oqrvAiu+ys0OLKYUQjxNALUerHDPHbuwfA==
+
 "@types/node@*", "@types/node@^12.7.9":
   version "12.7.10"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.7.10.tgz#942c128c37b5d780aff5441fd457cd7ffdc18b36"