Typescript: Migrate @storybook/polymer (#8102)

Typescript: Migrate `@storybook/polymer`

CHANGELOG.md

@@ -1,3 +1,29 @@
+## 6.0.0-alpha.0 (January 21, 2020)
+
+### Features
+
+* Addon-a11y: Support manual run ([#8883](https://github.com/storybookjs/storybook/pull/8883))
+* Addon-cssresources: Disable SyntaxHighlighter for long code ([#9360](https://github.com/storybookjs/storybook/pull/9360))
+* Core: Improve monorepo support ([#8822](https://github.com/storybookjs/storybook/pull/8822))
+
+### Bug Fixes
+
+* Fixed Angular button example story ([#9540](https://github.com/storybookjs/storybook/pull/9540))
+* Core: Fix generated entry to import at top of file ([#9398](https://github.com/storybookjs/storybook/pull/9398))
+* Preact: Fix story function typescript type ([#9123](https://github.com/storybookjs/storybook/pull/9123))
+* UI: Make canvas link a link ([#9257](https://github.com/storybookjs/storybook/pull/9257))
+
+### Maintenance
+
+* Typescript: Migrate ember ([#9020](https://github.com/storybookjs/storybook/pull/9020))
+* Next 6.0.0 ([#9212](https://github.com/storybookjs/storybook/pull/9212))
+* Lock yarn version ([#9138](https://github.com/storybookjs/storybook/pull/9138))
+* REMOVE subscription_store ([#9228](https://github.com/storybookjs/storybook/pull/9228))
+
+### Dependency Upgrades
+
+* Update husky to v4 ([#9509](https://github.com/storybookjs/storybook/pull/9509))
+
 ## 5.3.7 (January 20, 2020)
 
 ### Bug Fixes

addons/a11y/package.json

@@ -51,7 +51,8 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@types/react-redux": "^7.0.6"
+    "@types/react-redux": "^7.0.6",
+    "@types/webpack-env": "^1.15.0"
   },
   "publishConfig": {
     "access": "public"

addons/a11y/src/components/Report/HighlightToggle.tsx

@@ -184,4 +184,7 @@ class HighlightToggle extends Component<ToggleProps> {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(HighlightToggle);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(HighlightToggle);

addons/actions/package.json

@@ -45,7 +45,8 @@
   },
   "devDependencies": {
     "@types/lodash": "^4.14.149",
-    "@types/uuid": "^3.4.4"
+    "@types/uuid": "^3.4.4",
+    "@types/webpack-env": "^1.15.0"
   },
   "publishConfig": {
     "access": "public"

addons/backgrounds/package.json

@@ -44,7 +44,8 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@types/util-deprecate": "^1.0.0"
+    "@types/util-deprecate": "^1.0.0",
+    "@types/webpack-env": "^1.15.0"
   },
   "publishConfig": {
     "access": "public"

addons/centered/package.json

@@ -36,6 +36,7 @@
   },
   "devDependencies": {
     "@types/mithril": "^1.1.16",
+    "@types/webpack-env": "^1.15.0",
     "mithril": "*",
     "preact": "*",
     "react": "*"

addons/contexts/src/manager/components/ToolBar.test.tsx

@@ -27,10 +27,7 @@ describe('Tests on addon-contexts component: ToolBar', () => {
         icon: 'box' as const,
         nodeId: 'Some Context B',
         options: { cancelable: true, deep: false, disable: false },
-        params: [
-          { name: 'Some Param X', props: {} },
-          { name: 'Some Param Y', props: {} },
-        ],
+        params: [{ name: 'Some Param X', props: {} }, { name: 'Some Param Y', props: {} }],
         title: 'Some Context B',
       },
     ];

addons/contexts/src/manager/components/ToolBarControl.test.tsx

@@ -9,10 +9,7 @@ describe('Tests on addon-contexts component: ToolBarControl', () => {
     icon: 'box' as const,
     nodeId: 'Some Context',
     options: { cancelable: true, deep: false, disable: false },
-    params: [
-      { name: 'A', props: {} },
-      { name: 'B', props: {} },
-    ],
+    params: [{ name: 'A', props: {} }, { name: 'B', props: {} }],
     title: 'Some Context',
     selected: '',
     setSelected: jest.fn,

addons/cssresources/package.json

@@ -41,6 +41,9 @@
     "global": "^4.3.2",
     "react": "^16.8.3"
   },
+  "devDependencies": {
+    "@types/webpack-env": "^1.15.0"
+  },
   "peerDependencies": {
     "react": "*"
   },

addons/docs/package.json

@@ -79,7 +79,6 @@
     "@types/jest": "^24.0.11",
     "@types/prop-types": "^15.5.9",
     "@types/util-deprecate": "^1.0.0",
-    "@types/webpack-env": "^1.14.0",
     "jest-specific-snapshot": "^2.0.0"
   },
   "peerDependencies": {

addons/essentials/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "types": ["webpack-env", "jest"]
+    "types": ["jest"]
   },
   "include": ["src/**/*"],
   "exclude": ["src/**.test.ts"]

addons/events/package.json

@@ -45,6 +45,9 @@
     "react-textarea-autosize": "^7.0.4",
     "util-deprecate": "^1.0.2"
   },
+  "devDependencies": {
+    "@types/webpack-env": "^1.15.0"
+  },
   "peerDependencies": {
     "react": "*"
   },

addons/jest/package.json

@@ -47,6 +47,9 @@
     "upath": "^1.1.0",
     "util-deprecate": "^1.0.2"
   },
+  "devDependencies": {
+    "@types/webpack-env": "^1.15.0"
+  },
   "peerDependencies": {
     "react": "*"
   },

addons/knobs/package.json

@@ -51,7 +51,8 @@
   "devDependencies": {
     "@types/escape-html": "0.0.20",
     "@types/react-lifecycles-compat": "^3.0.1",
-    "@types/react-select": "^2.0.19"
+    "@types/react-select": "^2.0.19",
+    "@types/webpack-env": "^1.15.0"
   },
   "peerDependencies": {
     "react": "*"

addons/links/package.json

@@ -40,6 +40,9 @@
     "qs": "^6.6.0",
     "ts-dedent": "^1.1.0"
   },
+  "devDependencies": {
+    "@types/webpack-env": "^1.15.0"
+  },
   "peerDependencies": {
     "react": "*"
   },

addons/notes/package.json

@@ -47,7 +47,7 @@
   "devDependencies": {
     "@types/prop-types": "^15.5.9",
     "@types/util-deprecate": "^1.0.0",
-    "@types/webpack-env": "^1.14.0"
+    "@types/webpack-env": "^1.15.0"
   },
   "peerDependencies": {
     "react": "*"

addons/ondevice-backgrounds/tsconfig.json

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

addons/ondevice-notes/tsconfig.json

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

addons/options/package.json

@@ -33,6 +33,9 @@
     "core-js": "^3.0.1",
     "util-deprecate": "^1.0.2"
   },
+  "devDependencies": {
+    "@types/webpack-env": "^1.15.0"
+  },
   "peerDependencies": {
     "react": "*"
   },

addons/queryparams/package.json

@@ -42,6 +42,9 @@
     "react": "^16.8.3",
     "ts-dedent": "^1.1.0"
   },
+  "devDependencies": {
+    "@types/webpack-env": "^1.15.0"
+  },
   "publishConfig": {
     "access": "public"
   },

app/angular/package.json

@@ -36,6 +36,7 @@
     "@storybook/addons": "5.3.7",
     "@storybook/core": "5.3.7",
     "@storybook/node-logger": "5.3.7",
+    "@types/webpack-env": "^1.15.0",
     "core-js": "^3.0.1",
     "fork-ts-checker-webpack-plugin": "^3.0.1",
     "global": "^4.3.2",
@@ -47,7 +48,6 @@
   },
   "devDependencies": {
     "@types/autoprefixer": "^9.4.0",
-    "@types/webpack-env": "^1.14.0",
     "webpack": "^4.33.0"
   },
   "peerDependencies": {

app/angular/src/client/index.ts

@@ -11,8 +11,6 @@ export {
 
 export { moduleMetadata } from './preview/angular/decorators';
 
-// tsc wants to use NodeModule instead of WebpackModule
-declare const module: any;
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }

app/angular/tsconfig.json

@@ -3,7 +3,7 @@
   "compileOnSave": false,
   "compilerOptions": {
     "outDir": "dist",
-    "types": [],
+    "types": ["webpack-env"],
     "rootDir": "./src",
     "resolveJsonModule": true
   }

app/html/package.json

@@ -35,7 +35,7 @@
   "dependencies": {
     "@storybook/addons": "5.3.7",
     "@storybook/core": "5.3.7",
-    "@types/webpack-env": "^1.13.9",
+    "@types/webpack-env": "^1.15.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "html-loader": "^0.5.5",

app/mithril/package.json

@@ -38,6 +38,7 @@
     "@storybook/addons": "5.3.7",
     "@storybook/core": "5.3.7",
     "@types/mithril": "^2.0.0",
+    "@types/webpack-env": "^1.15.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "regenerator-runtime": "^0.13.3",

app/polymer/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,6 +33,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@storybook/addons": "5.3.7",
     "@storybook/core": "5.3.7",
     "@webcomponents/webcomponentsjs": "^1.2.0",
     "core-js": "^3.0.1",

app/polymer/src/client/index.js → app/polymer/src/client/index.ts

@@ -9,6 +9,8 @@ export {
   raw,
 } from './preview';
 
+// tsc wants to use NodeModule instead of WebpackModule
+declare const module: any;
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }

app/polymer/src/client/preview/index.js → app/polymer/src/client/preview/index.ts

@@ -15,7 +15,9 @@ export const {
 } = clientApi;
 
 const framework = 'polymer';
-export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const configure = (...args) => coreConfigure(...args, framework);
+
+export const storiesOf = (...args: any[]) =>
+  clientApi.storiesOf(...args).addParameters({ framework });
+export const configure = (...args: any[]) => coreConfigure(...args, framework);
 
 export { forceReRender };

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

@@ -1,6 +1,7 @@
 import { document } from 'global';
 import dedent from 'ts-dedent';
 import { render, TemplateResult } from 'lit-html';
+import { RenderMainArgs } from './types';
 
 const rootElement = document.getElementById('root');
 
@@ -11,7 +12,7 @@ export default function renderMain({
   showMain,
   showError,
   forceRender,
-}) {
+}: RenderMainArgs) {
   const element = storyFn();
 
   if (!element) {

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

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

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

@@ -1,6 +1,6 @@
-import { IgnorePlugin } from 'webpack';
+import { Configuration, IgnorePlugin, RuleSetUseItem } from 'webpack';
 
-export function webpack(config) {
+export function webpack(config: Configuration) {
   return {
     ...config,
     module: {
@@ -10,7 +10,7 @@ export function webpack(config) {
         {
           test: /\.html$/,
           use: [
-            ...config.module.rules[0].use,
+            ...(config.module.rules[0].use as RuleSetUseItem[]),
             {
               loader: require.resolve('polymer-webpack-loader'),
               options: { processStyleLinks: true },

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

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

app/polymer/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;