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(() => {