typecheck testfiles and storybook files as well

src/main/react/components/expenses-card/ExpensesCard.spec.js → src/main/react/components/expenses-card/ExpensesCard.spec.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import { render, screen, cleanup } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { ExpensesCard } from "./ExpensesCard.tsx";
+import { ExpensesCard } from "./ExpensesCard";
 import {
   createTestCostExpense,
   createTestTravelExpense,
 } from "../../utils/tests/test-models";
 import dayjs from "dayjs";
 import { Status } from "../../models/Status";
+import { CostExpense, TravelExpense } from "../../models/Expense";
 
 describe("ExpensesCard", () => {
   const testExpense001 = createTestCostExpense("item-01", dayjs());
@@ -36,7 +37,7 @@ describe("ExpensesCard", () => {
     Status.REJECTED
   );
 
-  const expenses = [
+  const expenses: (CostExpense | TravelExpense)[] = [
     testExpense001,
     testExpense002,
     testExpense003,
@@ -50,7 +51,7 @@ describe("ExpensesCard", () => {
   });
 
   describe("without expenses", () => {
-    let expenseCardElement;
+    let expenseCardElement: HTMLElement | null;
     beforeEach(() => {
       render(<ExpensesCard items={[]} />);
       expenseCardElement = screen.queryByTestId("expenses-card");
@@ -69,7 +70,7 @@ describe("ExpensesCard", () => {
   });
 
   describe("with expenses", () => {
-    let expenseCardElement;
+    let expenseCardElement: HTMLElement | null;
     beforeEach(() => {
       render(<ExpensesCard items={expenses} />);
       expenseCardElement = screen.queryByTestId("expenses-card");

src/main/react/components/holiday-card/HolidayCard.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent, CardHeader } from "@material-ui/core";
+import { Card, CardContent, CardHeader, Typography } from "@material-ui/core";
 import React, { useEffect, useState } from "react";
 import { PersonHolidayDetails } from "../../clients/AggregationClient";
 import { hoursFormatter } from "../../utils/Hours";
@@ -14,7 +14,7 @@ const useStyles = makeStyles(() => ({
     display: "flex",
     flexDirection: "row",
     justifyContent: "center",
-    alignItems: "baseline",
+    alignItems: "center",
     "@container (max-width: 500px)": {
       flexDirection: "column",
       alignItems: "center",
@@ -74,13 +74,13 @@ export function HolidayCard({ item }: HolidayCardProps) {
         <CardHeader title={"Leave days"} />
         <CardContent className={classes.containerWrapper}>
           <div className={classes.hoursLeftWrapper}>
-            <span>You have</span>
+            <Typography variant="body1">You have</Typography>
             <div className={classes.hoursLeft}>
               <span className={highLightClasses.highlight}>
                 {hoursFormatter.format(available)}
               </span>
             </div>
-            <span>hours left</span>
+            <Typography variant="body1">hours left</Typography>
           </div>
         </CardContent>
       </Card>

src/main/react/theme/theme-light.ts

@@ -41,6 +41,7 @@ export const themeLight = createTheme({
 export const highLightClass = makeStyles((theme) => ({
   highlight: {
     position: "relative",
+    fontFamily: theme.typography.fontFamily,
     "&::before": {
       content: '""',
       backgroundColor: theme.palette.primary.main,

src/storybook/components/contracts/ContractsEnding.stories.tsx

@@ -27,12 +27,11 @@ const meta: Meta<typeof ContractsEnding> = {
           shirtSize: "M",
           user: "4dbc2ac4-fc48-4511-a189-bf0d79f7e898",
           fullName: "Bert Muppets",
+          receiveEmail: false,
+          googleDriveId: "",
         },
         from: dayjs("2022-10-16"),
         to: dayjs("2023-11-24"),
-        hourlyRate: 80.0,
-        hoursPerWeek: 40,
-        billable: true,
         type: "EXTERNAL",
       },
     ],
@@ -69,12 +68,11 @@ export const within6weeks: Story = {
           shirtSize: "M",
           user: "4dbc2ac4-fc48-4511-a189-bf0d79f7e898",
           fullName: "Bert Muppets",
+          receiveEmail: false,
+          googleDriveId: "",
         },
         from: dayjs("2022-10-16"),
         to: dayjs("2023-11-24"),
-        hourlyRate: 80.0,
-        hoursPerWeek: 40,
-        billable: true,
         type: "EXTERNAL",
       },
     ],

src/storybook/components/holiday-card/HolidayCard.stories.tsx

@@ -25,6 +25,6 @@ export const withDefaultHours: Story = {};
 
 export const noData: Story = {
   args: {
-    item: {},
+    item: undefined,
   },
 };

src/storybook/components/upcoming-events-card/FlockEventList.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { EventList } from "../../../main/react/components/upcoming-events/EventList";
 import dayjs from "dayjs";
+import { EventType } from "../../../main/react/clients/EventClient";
 
 const meta: Meta<typeof EventList> = {
   component: EventList,
@@ -20,6 +21,7 @@ export const withData: Story = {
       {
         description: "Super nice event that takes place!",
         id: 2712,
+        type: EventType.GENERAL_EVENT,
         code: "event-code",
         from: dayjs(),
         to: dayjs().add(1, "day"),
@@ -31,6 +33,7 @@ export const withData: Story = {
       {
         description: "Smashing Conference - Freiburg",
         id: 2712,
+        type: EventType.GENERAL_EVENT,
         code: "event-code",
         from: dayjs(),
         to: dayjs().add(4, "day"),
@@ -42,6 +45,7 @@ export const withData: Story = {
       {
         description: "FLock Hack Day - Flock HQ.",
         id: 2712,
+        type: EventType.GENERAL_EVENT,
         code: "event-code",
         from: dayjs(),
         to: dayjs(),
@@ -53,6 +57,7 @@ export const withData: Story = {
       {
         description: "FLock Hack Day - Flock HQ.",
         id: 2712,
+        type: EventType.GENERAL_EVENT,
         code: "event-code",
         from: dayjs(),
         to: dayjs(),
@@ -64,6 +69,7 @@ export const withData: Story = {
       {
         description: "Random event- Flock HQ.",
         id: 2712,
+        type: EventType.GENERAL_EVENT,
         code: "event-code",
         from: dayjs(),
         to: dayjs(),

tsconfig.json

@@ -17,9 +17,5 @@
     "jsx": "react",
     "noImplicitAny": false
   },
-  "exclude": [
-    "node_modules",
-    "**/*.stories.tsx",
-    "**/*.spec.ts"
-  ]
+  "exclude": ["node_modules"]
 }