examples: improve HTML framework's generated typescript stories

app/html/README.md

@@ -19,6 +19,11 @@ npx sb init -t html
 
 For more information visit: [storybook.js.org](https://storybook.js.org)
 
+### Typescript
+
+`npx sb init` will select `.ts` starter stories if your `package.json` has typescript as a dependency. If starting a new project,
+run `npm init` and `npm install typescript --save-dev` before initializing storybook to get the typescript starter stories.
+
 ---
 
 Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.

lib/cli/src/frameworks/html/ts/Button.stories.ts

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/html';
+import { StoryFn, Meta } from '@storybook/html';
 import { createButton, ButtonProps } from './Button';
 
 // More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
@@ -15,10 +15,10 @@ export default {
       options: ['small', 'medium', 'large'],
     },
   },
-} as Meta;
+} as Meta<ButtonProps>;
 
 // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
-const Template: Story<ButtonProps> = (args) => {
+const Template: StoryFn<ButtonProps> = (args) => {
   // You can either use a function to create DOM elements or use a plain html string!
   // return `<div>${label}</div>`;
   return createButton(args);

lib/cli/src/frameworks/html/ts/Button.ts

@@ -36,12 +36,16 @@ export const createButton = ({
   const btn = document.createElement('button');
   btn.type = 'button';
   btn.innerText = label;
-  btn.addEventListener('click', onClick);
+  if (onClick) {
+    btn.addEventListener('click', onClick);
+  }
 
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
   btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' ');
 
-  btn.style.backgroundColor = backgroundColor;
+  if (backgroundColor) {
+    btn.style.backgroundColor = backgroundColor;
+  }
 
   return btn;
 };

lib/cli/src/frameworks/html/ts/Header.stories.ts

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/html';
+import { StoryFn, Meta } from '@storybook/html';
 import { createHeader, HeaderProps } from './Header';
 
 export default {
@@ -13,9 +13,9 @@ export default {
     onLogout: { action: 'onLogout' },
     onCreateAccount: { action: 'onCreateAccount' },
   },
-} as Meta;
+} as Meta<HeaderProps>;
 
-const Template: Story<HeaderProps> = (args) => createHeader(args);
+const Template: StoryFn<HeaderProps> = (args) => createHeader(args);
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {

lib/cli/src/frameworks/html/ts/Page.stories.ts

@@ -1,5 +1,5 @@
 import { within, userEvent } from '@storybook/testing-library';
-import { Story, Meta } from '@storybook/html';
+import { StoryFn, Meta } from '@storybook/html';
 import { createPage } from './Page';
 
 export default {
@@ -10,7 +10,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story = () => createPage();
+const Template: StoryFn = () => createPage();
 
 export const LoggedOut = Template.bind({});
 

lib/cli/src/frameworks/html/ts/Page.ts

@@ -7,12 +7,12 @@ type User = {
 
 export const createPage = () => {
   const article = document.createElement('article');
-  let user: User = null;
-  let header = null;
+  let user: User | undefined;
+  let header: HTMLElement | null = null;
 
   const rerenderHeader = () => {
     const wrapper = document.getElementsByTagName('article')[0];
-    wrapper.replaceChild(createHeaderElement(), wrapper.firstChild);
+    wrapper.replaceChild(createHeaderElement(), wrapper.firstChild as HTMLElement);
   };
 
   const onLogin = () => {
@@ -21,7 +21,7 @@ export const createPage = () => {
   };
 
   const onLogout = () => {
-    user = null;
+    user = undefined;
     rerenderHeader();
   };