Typescript: Migrate `@storybook/polymer (#9565)

Typescript: Migrate `@storybook/polymer

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/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,

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;

app/polymer/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": []
+  },
+  "include": [
+    "src/**/*"
+  ]
+}

examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ts-types.tsx

@@ -128,5 +128,6 @@ interface TypeScriptHtmlComponentProps {
   text: string;
 }
 
-export const TypeScriptHtmlComponent: FC<React.HTMLAttributes<HTMLDivElement> &
-  TypeScriptHtmlComponentProps> = () => <div>My HTML component</div>;
+export const TypeScriptHtmlComponent: FC<
+  React.HTMLAttributes<HTMLDivElement> & TypeScriptHtmlComponentProps
+> = () => <div>My HTML component</div>;

lib/components/src/tooltip/TooltipMessage.stories.tsx

@@ -29,10 +29,7 @@ storiesOf('basics/Tooltip/TooltipMessage', module)
     <TooltipMessage
       title="Lorem ipsum dolor sit"
       desc="Amet consectatur vestibulum concet durum politu coret weirom"
-      links={[
-        { title: 'Get more tips', href: 'test' },
-        { title: 'Done', href: 'test' },
-      ]}
+      links={[{ title: 'Get more tips', href: 'test' }, { title: 'Done', href: 'test' }]}
     />
   ))
   .add('minimal message', () => (

lib/components/src/tooltip/WithTooltip.tsx

@@ -100,9 +100,11 @@ WithTooltipPure.defaultProps = {
   tooltipShown: false,
 };
 
-const WithToolTipState: FunctionComponent<WithTooltipPureProps & {
-  startOpen?: boolean;
-}> = ({ startOpen, ...rest }) => {
+const WithToolTipState: FunctionComponent<
+  WithTooltipPureProps & {
+    startOpen?: boolean;
+  }
+> = ({ startOpen, ...rest }) => {
   const [tooltipShown, onVisibilityChange] = useState(startOpen || false);
 
   useEffect(() => {