Adjust types in storybook

frontend/.storybook/preview.tsx

@@ -1,8 +1,9 @@
+import { ArgTypes, Decorator, Parameters } from "@storybook/react";
 import { useLayoutEffect } from "react";
 import { createMemoryRouter, RouterProvider } from "react-router-dom";
 import "../src/index.css";
 
-export const parameters = {
+export const parameters: Parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
@@ -12,7 +13,7 @@ export const parameters = {
   },
 };
 
-export const globalTypes = {
+export const globalTypes: ArgTypes = {
   theme: {
     name: "Theme",
     description: "Global theme for components",
@@ -35,7 +36,7 @@ export const globalTypes = {
   },
 };
 
-const ThemeSwitcher = ({ theme }) => {
+const ThemeSwitcher: React.FC<{ theme?: "light" | "dark" }> = ({ theme }) => {
   useLayoutEffect(() => {
     if (theme === "dark") {
       document.documentElement.classList.add("dark");
@@ -49,7 +50,7 @@ const ThemeSwitcher = ({ theme }) => {
   return null;
 };
 
-const withThemeProvider = (Story, context) => {
+const withThemeProvider: Decorator = (Story, context) => {
   return (
     <>
       <ThemeSwitcher theme={context.globals.theme} />
@@ -58,7 +59,7 @@ const withThemeProvider = (Story, context) => {
   );
 };
 
-const withRouter = (Story, context) => {
+const withRouter: Decorator = (Story, _context) => {
   const router = createMemoryRouter([
     {
       path: "/*",
@@ -69,4 +70,4 @@ const withRouter = (Story, context) => {
   return <RouterProvider router={router} />;
 };
 
-export const decorators = [withThemeProvider, withRouter];
+export const decorators: Decorator[] = [withThemeProvider, withRouter];

frontend/src/components/Block.stories.tsx

@@ -17,7 +17,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Block from "./Block";
 import { Title, Subtitle, Body } from "./Typography";
 
-const meta: Meta<typeof Block> = {
+const meta = {
   title: "UI/Block",
   component: Block,
   subcomponents: {
@@ -26,7 +26,7 @@ const meta: Meta<typeof Block> = {
     Body,
   } as Record<string, React.ComponentType<any>>,
   tags: ["docsPage"],
-};
+} satisfies Meta<typeof Block>;
 
 export default meta;
 type Story = StoryObj<typeof Block>;

frontend/src/components/Button.stories.ts

@@ -16,7 +16,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import Button from "./Button";
 
-const meta: Meta<typeof Button> = {
+const meta = {
   title: "UI/Button",
   component: Button,
   tags: ["docsPage"],
@@ -32,7 +32,7 @@ const meta: Meta<typeof Button> = {
       defaultValue: false,
     },
   },
-};
+} satisfies Meta<typeof Button>;
 
 export default meta;
 type Story = StoryObj<typeof Button>;

frontend/src/components/DateTime.stories.tsx

@@ -19,7 +19,7 @@ import DateTime from "./DateTime";
 
 const now = new Date(2022, 11, 16, 15, 32, 10);
 
-const meta: Meta<typeof DateTime> = {
+const meta = {
   title: "UI/DateTime",
   component: DateTime,
   tags: ["docsPage"],
@@ -35,7 +35,7 @@ const meta: Meta<typeof DateTime> = {
       control: "date",
     },
   },
-};
+} satisfies Meta<typeof DateTime>;
 
 export default meta;
 type Story = StoryObj<typeof DateTime>;

frontend/src/components/LoadingScreen.stories.tsx

@@ -16,11 +16,11 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import LoadingScreen from "./LoadingScreen";
 
-const meta: Meta<typeof LoadingScreen> = {
+const meta = {
   title: "UI/Loading Screen",
   component: LoadingScreen,
   tags: ["docsPage"],
-};
+} satisfies Meta<typeof LoadingScreen>;
 
 export default meta;
 type Story = StoryObj<typeof LoadingScreen>;

frontend/src/components/LoadingSpinner.stories.tsx

@@ -16,11 +16,11 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import LoadingSpinner from "./LoadingSpinner";
 
-const meta: Meta<typeof LoadingSpinner> = {
+const meta = {
   title: "UI/Loading Spinner",
   component: LoadingSpinner,
   tags: ["docsPage"],
-};
+} satisfies Meta<typeof LoadingSpinner>;
 
 export default meta;
 type Story = StoryObj<typeof LoadingSpinner>;

frontend/src/components/OAuth2Session.stories.tsx

@@ -77,7 +77,7 @@ const Template: React.FC<TemplateProps> = ({
   );
 };
 
-const meta: Meta<typeof Template> = {
+const meta = {
   title: "Components/OAuth 2.0 Session",
   component: Template,
   tags: ["docsPage"],
@@ -87,7 +87,7 @@ const meta: Meta<typeof Template> = {
     clientName: "My client",
     clientUri: "https://example.com/",
   },
-};
+} satisfies Meta<typeof Template>;
 
 export default meta;
 type Story = StoryObj<typeof Template>;

frontend/src/components/Typography.stories.tsx

@@ -16,14 +16,14 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import Typography from "./Typography";
 
-const meta: Meta<typeof Typography> = {
+const meta = {
   title: "UI/Typography",
   component: Typography,
   tags: ["docsPage"],
   args: {
     children: "Typography",
   },
-};
+} satisfies Meta<typeof Typography>;
 
 export default meta;
 type Story = StoryObj<typeof Typography>;