fix(types): use strict type checking and fix all typing issues

HCRC-178.

Use strict type rules. 

Enable skipLibCheck.

Render null when Head-component is not configured. Fix the nullpointer
exceptions.

The LoadingButton is a basic HDS-React Button, which analyses isLoading
state to show a loading spinner as a start icon and changes styles
according to state as well. It mimics the example given in the HDS-React Storybook documentation in
https://hds.hel.fi/components/button/code/#loading-button.

The `handleEscapeKeyPress` cannot be a native KeyboardEvent and
React.KeyboardEvent at the same time. If a `onKeyDown`-attribute is
used, it needs to use the React-KeyboardEvent, but it should be exactly
the same as adding an eventListener to KeyboardEvent.

Added `classnames`-package to dependencies as it was needed by
Link-component.
test: update snapshots

HCRC-178

fix(types): all stories default export argTypes typing

HCRC-178

fix(types): simplify and fix useEventsByIdsQuery type handling

Remove makeQueryWithEventsApolloClientFromConfig.ts as unnecessary,
it was used in a single place. Now the code is simpler and easier to
understand.

Using HelmetWrapper the @ts-ignore clauses become unnecessary and are
removed.

Author: nikomakela

src/apollo/apollo-custom-template.stories.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import type { StoryFn, Meta } from '@storybook/react';
-import { Helmet, HelmetProvider } from 'react-helmet-async';
+import { HelmetProvider } from 'react-helmet-async';
 
 import { ConfigProvider } from '../core/configProvider/ConfigProvider';
 import { defaultConfig } from '../core/configProvider/defaultConfig';
@@ -15,6 +15,7 @@ import { LanguageCodeEnum } from '../core';
 import { useCmsEndpointConfig } from '../storybook-common/useCmsEndpointConfig';
 import type { CmsEndpoint } from '../storybook-common/constants';
 import { cmsMenuName, cmsTestPage } from '../storybook-common/constants';
+import { HelmetWrapper } from '../storybook-common/HelmetWrapper';
 
 const ExampleNavigation = ({
   menuName,
@@ -61,8 +62,11 @@ const CustomPageContentLayout: typeof PageContentLayout = ({
 const getTemplate =
   (dataSource: keyof typeof CmsEndpoint): StoryFn<typeof Page> =>
   (args) => {
-    const { apolloClient, eventsApolloClient, internalHrefOrigins } =
-      useCmsEndpointConfig(dataSource);
+    const {
+      apolloClient,
+      eventsApolloClient,
+      internalHrefOrigins = [],
+    } = useCmsEndpointConfig(dataSource);
     return (
       <HelmetProvider>
         <ConfigProvider
@@ -76,16 +80,14 @@ const getTemplate =
             venuesApolloClient: 'disabled',
             components: {
               ...defaultConfig.components,
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              Head: Helmet,
+              Head: HelmetWrapper,
             },
             utils: {
               ...defaultConfig.utils,
               getRoutedInternalHref: (link) => {
                 let uri = '';
                 internalHrefOrigins.forEach((d) => {
-                  uri = link.replace(d, '');
+                  uri = link?.replace(d, '') ?? '';
                 });
                 return uri;
               },

src/apollo/apollo.stories.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import type { StoryFn, Meta } from '@storybook/react';
-import { Helmet, HelmetProvider } from 'react-helmet-async';
+import { HelmetProvider } from 'react-helmet-async';
 
 import { ConfigProvider } from '../core/configProvider/ConfigProvider';
 import { defaultConfig } from '../core/configProvider/defaultConfig';
@@ -16,6 +16,7 @@ import { LanguageCodeEnum, getBreadcrumbsFromPage } from '../core';
 import { useCmsEndpointConfig } from '../storybook-common/useCmsEndpointConfig';
 import type { CmsEndpoint } from '../storybook-common/constants';
 import { cmsMenuName, cmsTestPage } from '../storybook-common/constants';
+import { HelmetWrapper } from '../storybook-common/HelmetWrapper';
 
 const ExampleNavigation = ({
   menuName,
@@ -38,8 +39,11 @@ const ExampleNavigation = ({
 const getTemplate =
   (datasource: keyof typeof CmsEndpoint): StoryFn<typeof Page> =>
   (args) => {
-    const { apolloClient, eventsApolloClient, internalHrefOrigins } =
-      useCmsEndpointConfig(datasource);
+    const {
+      apolloClient,
+      eventsApolloClient,
+      internalHrefOrigins = [],
+    } = useCmsEndpointConfig(datasource);
     return (
       <HelmetProvider>
         <ConfigProvider
@@ -53,16 +57,14 @@ const getTemplate =
             venuesApolloClient: 'disabled',
             components: {
               ...defaultConfig.components,
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              Head: Helmet,
+              Head: HelmetWrapper,
             },
             utils: {
               ...defaultConfig.utils,
               getRoutedInternalHref: (link) => {
                 let uri = '';
                 internalHrefOrigins.forEach((d) => {
-                  uri = link.replace(d, '');
+                  uri = link?.replace(d, '') ?? '';
                 });
                 return uri;
               },

src/apollo/navigation/Navigation.tsx

@@ -33,7 +33,7 @@ export function Navigation({
   });
   const languages =
     (languagesQuery.data?.languages?.filter(
-      (l) => !!l,
+      (language) => !!language,
     ) as LanguageFragment[]) ?? undefined;
   return (
     <NavigationWithoutData

src/apollo/pageContent/PageContent.tsx

@@ -30,8 +30,9 @@ export function PageContent({
   const { uri } = useApolloPageContext();
   const pageQuery = usePageQuery({
     variables: {
-      id: uri,
+      id: uri ?? '',
     },
+    skip: !uri,
   });
 
   if (pageQuery.loading) {

src/common/components/htmlToReact/HtmlToReact.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type { StoryFn, Meta } from '@storybook/react';
 
 import kukkuuTestPage from '../../../mocks/responses/cms/page/kukkuu-page-demosivu.json';
-import type { HtmlToReactProps } from './HtmlToReact';
+import type { HtmlToReactProps, TableVariant } from './HtmlToReact';
 import { HtmlToReact, TABLE_VARIANTS } from './HtmlToReact';
 import { StoryContainer } from '../../../core/storyContainer/StoryContainer';
 
@@ -80,7 +80,7 @@ const Template: StoryFn<typeof HtmlToReact> = ({
   trustedOrigins,
   tableVariants,
 }: HtmlToReactProps & {
-  tableVariants: HtmlToReactProps['components']['tableVariants'];
+  tableVariants?: TableVariant[];
 }) => (
   <StoryContainer>
     <HtmlToReact

src/common/components/htmlToReact/HtmlToReact.tsx

@@ -311,7 +311,7 @@ export function HtmlToReact({
     [dirty, allowedUnsafeTags],
   );
   const htmlReactParserOptions = {
-    replace: (domNode) =>
+    replace: (domNode: DOMNode) =>
       replaceDomNodeWithReactComponent(
         domNode,
         htmlReactParserOptions,

src/common/components/htmlToReact/__tests__/HtmlToReact.tests.tsx

@@ -59,7 +59,7 @@ describe('HtmlToReact', () => {
           expect(iframes.length).toBe(expectedIframesCount);
           // Each iframe src.attribute is listed in the trusted origins
           iframes.forEach((iframe) => {
-            expect(trustedOrigins.includes(new URL(iframe.src).origin));
+            expect((trustedOrigins || []).includes(new URL(iframe.src).origin));
           });
         },
       );

src/common/components/tag/Tag.tsx

@@ -8,14 +8,6 @@ import styles from './tag.module.scss';
 import { theme1, theme2 } from './tagThemes';
 
 type Props = {
-  /**
-   * Additional children to render inside the tag.
-   */
-  children: React.ReactNode;
-  /**
-   * Additional classname for the tag.
-   */
-  className?: string;
   /**
    *  Boolean indicating whether the tag has a featured style variant.
    */
@@ -32,7 +24,7 @@ type Props = {
    * onClick handler.
    */
   onClick?: () => void;
-} & Pick<HDSTagProps, 'id' | 'role' | 'size'>;
+} & Pick<HDSTagProps, 'children' | 'className' | 'id' | 'role' | 'size'>;
 
 export function Tag({
   className,
@@ -70,6 +62,7 @@ export function Tag({
         !onClick && styles.noOutline,
         className,
       )}
+      placeholder={undefined}
       {...hdsTagProps}
       // TODO: don't use the generatedId and allow an undefined id.
       id={id ?? `tag${generatedId}`}

src/common/components/tag/tagThemes.tsx

@@ -1,11 +1,13 @@
-export const theme1 = {
-  '--tag-background': 'var(--color-black-10)',
-  '--tag-color': 'var(--color-black)',
-  '--tag-focus-outline-color': 'var(--color-black-70)',
+import type { TagTheme } from 'hds-react';
+
+export const theme1: TagTheme = {
+  '--background-color': 'var(--color-black-10)',
+  '--color': 'var(--color-black)',
+  '--outline-color': 'var(--color-black-70)',
 };
 
-export const theme2 = {
-  '--tag-background': 'var(--color-tram-light)',
-  '--tag-color': 'var(--color-black-90)',
-  '--tag-focus-outline-color': 'var(--color-black-70)',
+export const theme2: TagTheme = {
+  '--background-color': 'var(--color-tram-light)',
+  '--color': 'var(--color-black-90)',
+  '--outline-color': 'var(--color-black-70)',
 };

src/common/components/text/Text.tsx

@@ -52,17 +52,15 @@ function getElement(variant: TextVariant) {
 }
 
 function Text({
-  as,
+  as: elementType,
   variant = 'body-l',
   children,
   className,
   ...rest
 }: TextVariantProps) {
   return React.createElement(
-    as || getElement(variant),
+    elementType || getElement(variant),
     {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore: For some reason TS considers text to be undefined
       className: [styles.text, styles[variant], className].join(' '),
       ...rest,
     },