refactor: move away from .js file extension

src/components/Markdown.js → src/components/Markdown.tsx

@@ -1,5 +1,6 @@
 import { MDXProvider } from '@mdx-js/react';
 import { Heading2, Heading3, Heading4, Heading5, Heading6 } from '@utrecht/component-library-react/dist/css-module';
+import { PropsWithChildren } from 'react';
 import React from 'react';
 
 const resolveUrl = (from, to) => {
@@ -40,6 +41,17 @@ const setHeadings = (omitH1, headingLevel) => {
   return mapHeadings[headingLevel];
 };
 
-export const Markdown = ({ children, omitH1 = false, headingLevel = 1, baseUrl = '' }) => (
+export interface MarkdownProps {
+  baseUrl?: string;
+  headingLevel?: number;
+  omitH1?: boolean;
+}
+
+export const Markdown = ({
+  children,
+  omitH1 = false,
+  headingLevel = 1,
+  baseUrl = '',
+}: PropsWithChildren<MarkdownProps>) => (
   <MDXProvider components={{ ...setHeadings(omitH1, headingLevel), ...addBaseUrl(baseUrl) }}>{children}</MDXProvider>
 );

src/components/Story.js → src/components/Story.tsx

@@ -2,7 +2,12 @@ import IframeResizer from 'iframe-resizer-react';
 import React from 'react';
 import style from './Story.module.css';
 
-export const Story = ({ label, href }) => {
+export interface StoryProps {
+  href: string;
+  label: string;
+}
+
+export const Story = ({ label, href }: StoryProps) => {
   const storySrc = href;
   const iframeSrc = href.replace('?path=/docs/', 'iframe.html?id=') + '&viewMode=story';
 

src/theme/DocSidebar/Mobile/index.js → src/theme/DocSidebar/Mobile/index.tsx

@@ -1,10 +1,16 @@
+import { PropSidebarItem } from '@docusaurus/plugin-content-docs';
 import { NavbarSecondaryMenuFiller, ThemeClassNames } from '@docusaurus/theme-common';
 import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
 import DocSidebarItems from '@theme/DocSidebarItems';
 import clsx from 'clsx';
 import React from 'react';
 
-const DocSidebarMobileSecondaryMenu = ({ sidebar, path }) => {
+interface SecondaryMenuProps {
+  path: string;
+  sidebar: PropSidebarItem[];
+}
+
+const DocSidebarMobileSecondaryMenu = ({ sidebar, path }: SecondaryMenuProps) => {
   const mobileSidebar = useNavbarMobileSidebar();
   return (
     <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>

src/theme/Root.js → src/theme/Root.tsx

@@ -1,6 +1,6 @@
 import { Document } from '@utrecht/component-library-react/dist/css-module';
-import React from 'react';
-import '@nl-design-system-unstable/nlds-design-tokens/src/font';
+import React, { PropsWithChildren } from 'react';
+import '@nl-design-system-unstable/nlds-design-tokens/src/font.mjs';
 import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/design-tokens.css';
 import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/custom.css';
 import '@fontsource/open-sans/300.css';
@@ -11,7 +11,7 @@ import '@fontsource/open-sans/700.css';
 import '@fontsource/open-sans/800.css';
 
 // Default implementation, that you can customize
-function Root({ children }) {
+function Root({ children }: PropsWithChildren<{}>) {
   return <Document className="nlds-theme main-layout">{children}</Document>;
 }