refactor(website): convert Header and Loading stories to TypeScript (#…

…2050)

These `.jsx` components were added in
#110, and they are the
only ones that are still written in JavaScript in this project.

Signed-off-by: Eng Zer Jun <engzerjun@gmail.com>

website/README.md

@@ -71,8 +71,8 @@ You can use the debug credentials provider to log in without fancy emails or OAu
 To develop components using [Storybook](https://storybook.js.org/) run `npm run storybook`. Then navigate to in your
 browser to `http://localhost:6006`.
 
-To create a new story create a file named `[componentName].stories.js`. An example how such a story could look like, see
-`Header.stories.jsx`.
+To create a new story create a file named `[componentName].stories.tsx`. An example how such a story could look like,
+see `Header.stories.tsx`.
 
 ## Code Layout
 

website/src/components/Header/Header.stories.jsx → website/src/components/Header/Header.stories.tsx

@@ -1,3 +1,4 @@
+import type { ComponentStory } from "@storybook/react";
 import { SessionContext } from "next-auth/react";
 import React from "react";
 import { FlagsProvider } from "react-feature-flags";
@@ -15,8 +16,8 @@ export default {
   decorators: [RouterDecorator],
 };
 
-const Template = (args) => {
-  var { session } = args;
+const Template: ComponentStory<any> = (args) => {
+  const { session } = args;
   return (
     <SessionContext.Provider value={session}>
       <FlagsProvider value={[{ name: "flagTest", isActive: false }]}>

website/src/components/Header/UserMenu.stories.jsx → website/src/components/Header/UserMenu.stories.tsx

@@ -1,3 +1,4 @@
+import type { ComponentStory } from "@storybook/react";
 import { SessionContext } from "next-auth/react";
 import React from "react";
 
@@ -9,8 +10,8 @@ export default {
   component: UserMenu,
 };
 
-const Template = (args) => {
-  var { session } = args;
+const Template: ComponentStory<any> = (args) => {
+  const { session } = args;
   return (
     <SessionContext.Provider value={session}>
       <div className="flex flex-col">

website/src/components/Loading/Loading.stories.jsx → website/src/components/Loading/Loading.stories.tsx

@@ -1,3 +1,5 @@
+import type { ComponentStory } from "@storybook/react";
+
 import { LoadingScreen } from "./LoadingScreen";
 
 // eslint-disable-next-line import/no-anonymous-default-export
@@ -9,7 +11,7 @@ export default {
   },
 };
 
-const Template = (args) => <LoadingScreen {...args} />;
+const Template: ComponentStory<typeof LoadingScreen> = (args) => <LoadingScreen {...args} />;
 
 export const Default = Template.bind({});