From 7f47c01fd8af8f86633c4129f3aa18cc4322a135 Mon Sep 17 00:00:00 2001
From: Matthew Smith <matthew.smith@replicant.ai>
Date: Sat, 18 Jun 2022 23:19:29 -0400
Subject: [PATCH] fix some typescript complaints on the html-ts template
 stories

---
 app/html/README.md                               | 5 +++++
 lib/cli/src/frameworks/html/ts/Button.stories.ts | 6 +++---
 lib/cli/src/frameworks/html/ts/Button.ts         | 8 ++++++--
 lib/cli/src/frameworks/html/ts/Header.stories.ts | 6 +++---
 lib/cli/src/frameworks/html/ts/Page.stories.ts   | 4 ++--
 lib/cli/src/frameworks/html/ts/Page.ts           | 8 ++++----
 6 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/app/html/README.md b/app/html/README.md
index 3fa757d3a7f5..e898ba689536 100644
--- a/app/html/README.md
+++ b/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.
diff --git a/lib/cli/src/frameworks/html/ts/Button.stories.ts b/lib/cli/src/frameworks/html/ts/Button.stories.ts
index e71e07a76b9c..cfbe58ebefdb 100644
--- a/lib/cli/src/frameworks/html/ts/Button.stories.ts
+++ b/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);
diff --git a/lib/cli/src/frameworks/html/ts/Button.ts b/lib/cli/src/frameworks/html/ts/Button.ts
index e55ec3dd3b85..17f8c4c07cc2 100644
--- a/lib/cli/src/frameworks/html/ts/Button.ts
+++ b/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;
 };
diff --git a/lib/cli/src/frameworks/html/ts/Header.stories.ts b/lib/cli/src/frameworks/html/ts/Header.stories.ts
index a727dffbee22..e9096212fecc 100644
--- a/lib/cli/src/frameworks/html/ts/Header.stories.ts
+++ b/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 = {
diff --git a/lib/cli/src/frameworks/html/ts/Page.stories.ts b/lib/cli/src/frameworks/html/ts/Page.stories.ts
index bc7b6cdbe0e4..bea5705b9eff 100644
--- a/lib/cli/src/frameworks/html/ts/Page.stories.ts
+++ b/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({});
 
diff --git a/lib/cli/src/frameworks/html/ts/Page.ts b/lib/cli/src/frameworks/html/ts/Page.ts
index 5c66149c82b5..4c4028ff1d99 100644
--- a/lib/cli/src/frameworks/html/ts/Page.ts
+++ b/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();
   };