Migrate @storybook/preact to Typescript (#7527)

Migrate @storybook/preact to Typescript

Co-authored-by: Norbert de Langen <[email protected]>

app/angular/src/server/angular-cli_utils.ts

@@ -65,9 +65,7 @@ export function getAngularCliParts(cliWebpackConfigOptions: any) {
       cliStyleConfig: getStylesConfig(cliWebpackConfigOptions),
     };
   } catch (e) {
-    logger.warn(
-      'Failed to load the Angular CLI config. Using Storybook\'s default config instead.'
-    );
+    logger.warn("Failed to load the Angular CLI config. Using Storybook's default config instead.");
     logger.warn(e);
     return null;
   }

app/preact/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",
@@ -28,6 +28,7 @@
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.3.0",
     "@storybook/core": "5.2.0-beta.18",
+    "@storybook/addons": "5.2.0-beta.18",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
@@ -37,6 +38,7 @@
     "preact": "^8.4.2"
   },
   "peerDependencies": {
+    "@babel/core": "7.0.1",
     "babel-loader": "^7.0.0 || ^8.0.0",
     "preact": "^8.4.2"
   },

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

@@ -0,0 +1,24 @@
+/* eslint-disable prefer-destructuring */
+import { start } from '@storybook/core/client';
+
+import './globals';
+import render from './render';
+import { ClientApi } from './types';
+
+const framework = 'preact';
+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 configure: ClientApi['configure'] = (...args) => api.configure(...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 forceReRender: ClientApi['forceReRender'] = api.forceReRender;
+export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
+export const raw: ClientApi['raw'] = api.clientApi.raw;

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

@@ -1,8 +1,9 @@
 import { h, render } from 'preact';
 import { document } from 'global';
 import { stripIndents } from 'common-tags';
+import { RenderMainArgs } from './types';
 
-let renderedStory;
+let renderedStory: Element;
 const rootElement = document ? document.getElementById('root') : null;
 
 export default function renderMain({
@@ -11,8 +12,7 @@ export default function renderMain({
   selectedStory,
   showMain,
   showError,
-  // forceRender,
-}) {
+}: RenderMainArgs) {
   const element = storyFn();
 
   if (!element) {

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

@@ -0,0 +1,37 @@
+import { StoryFn, ClientStoryApi, Loadable } from '@storybook/addons';
+
+export type StoryFnPreactReturnType = string | Node;
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export interface RenderMainArgs {
+  storyFn: () => StoryFn<StoryFnPreactReturnType>;
+  selectedKind: string;
+  selectedStory: string;
+  showMain: () => void;
+  showError: (args: ShowErrorArgs) => void;
+  forceRender: boolean;
+}
+
+export interface IStorybookStory {
+  name: string;
+  render: () => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}
+
+export interface ClientApi extends ClientStoryApi<StoryFnPreactReturnType> {
+  setAddon(addon: any): void;
+  configure(loader: Loadable, module: NodeModule): void;
+  getStorybook(): IStorybookSection[];
+  clearDecorators(): void;
+  forceReRender(): void;
+  raw: () => any; // todo add type
+  load: (...args: any[]) => void;
+}

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

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

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

@@ -1,4 +1,4 @@
-import packageJson from '../../package.json';
+const packageJson = require('../../package.json');
 
 export default {
   packageJson,

app/preact/src/typings.d.ts

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

app/preact/tsconfig.json

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

docs/src/versions/next.json

@@ -1 +1 @@
-{"version":"5.2.0-beta.18","info":{"plain":"### Bug Fixes\n\n* Addon-docs: Ensure getNotes/getInfo return string ([#7597](https://github.com/storybookjs/storybook/pull/7597))\n* React/Angular/HTML/Vue: Fix typings for `configure` ([#7598](https://github.com/storybookjs/storybook/pull/7598))\n\n### Maintenance\n\n* Typescript: Migrate Vue ([#7578](https://github.com/storybookjs/storybook/pull/7578))\n\n### Dependency Upgrades\n\n* Upgrade corejs-upgrade-webpack-plugin lazy-universal-dotenv ([#7592](https://github.com/storybookjs/storybook/pull/7592))"}}
+{"version":"5.2.0-beta.18","info":{"plain":"### Bug Fixes\n\n* Addon-docs: Ensure getNotes/getInfo return string ([#7597](https://github.com/storybookjs/storybook/pull/7597))\n* React/Angular/HTML/Vue: Fix typings for `configure` ([#7598](https://github.com/storybookjs/storybook/pull/7598))\n\n### Maintenance\n\n* Typescript: Migrate Vue ([#7578](https://github.com/storybookjs/storybook/pull/7578))\n\n### Dependency Upgrades\n\n* Upgrade corejs-upgrade-webpack-plugin lazy-universal-dotenv ([#7592](https://github.com/storybookjs/storybook/pull/7592))"}}