Replacing any keyword instances with relevant data types

components/Code.tsx

@@ -1,9 +1,8 @@
-import React, { useContext } from 'react';
+import React, { useContext, ReactNode } from 'react';
 import classnames from 'classnames';
 import { BlockContext, BlockContextValue } from '~/context';
 
-export default function Code({ children }: { children: any }) {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
+export default function Code({ children }: { children: ReactNode }) {
   const blockContext = useContext(BlockContext);
   return (
     <code

components/DocTable.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 import Link from 'next/link';
 
-const DocTable = ({ frontmatter }: any) => {
+type Frontmatter = {
+  Specification: string;
+  Published: string;
+  authors: string[];
+  Metaschema: string;
+};
+
+const DocTable = ({ frontmatter }: { frontmatter: Frontmatter }) => {
   return (
     <>
       <div className='max-w-full mx-auto overflow-auto'>
@@ -30,21 +37,21 @@ const DocTable = ({ frontmatter }: any) => {
                 {frontmatter.Published}
               </td>
             </tr>
-            <tr className='dark:hover:bg-slate-950 hover:bg-slate-300 '>
+            <tr className='dark:hover:bg-slate-950 hover:bg-slate-300'>
               <td className='border border-slate-400 dark:border-slate-500 p-2 text-center font-semibold'>
                 Authors
               </td>
               <td className='border border-slate-400 dark:border-slate-500 p-2'>
-                {frontmatter.authors.map((author: string, index: number) => {
-                  return <div key={index}>{author}</div>;
-                })}
+                {frontmatter.authors.map((author, index) => (
+                  <div key={index}>{author}</div>
+                ))}
               </td>
             </tr>
             <tr className='dark:hover:bg-slate-950 hover:bg-slate-300'>
               <td className='border border-slate-400 dark:border-slate-500 p-2 text-center font-semibold'>
                 Metaschema
               </td>
-              <td className='border border-slate-400 dark:border-slate-500 p-2 '>
+              <td className='border border-slate-400 dark:border-slate-500 p-2'>
                 <Link
                   href={frontmatter.Metaschema}
                   className='text-linkBlue'

components/GettingStarted.tsx

@@ -4,19 +4,54 @@ import Highlight from 'react-syntax-highlighter';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
 
+interface SchemaOption {
+  file: string;
+  name: string;
+  instances: InstanceOption[];
+  default?: boolean;
+}
+
+interface InstanceOption {
+  file: string;
+  details: string;
+  valid: string;
+  name: string;
+  default?: boolean;
+}
+
+interface SchemaData {
+  id: string;
+  title: string;
+  description: string;
+}
+
+interface InstanceData {
+  id: string;
+  title: string;
+  description: string;
+}
+
 async function fetchData() {
   const response = await fetch('/data/getting-started-examples.json');
-  const data = await response.json();
+  const data: SchemaOption[] = await response.json();
 
-  const defaultSchemaData = data.find((data: any) => data.default === true);
+  const defaultSchemaData = data.find((schema) => schema.default === true);
+
+  if (!defaultSchemaData) {
+    throw new Error('Default schema not found');
+  }
 
   const schemaResp = await fetch(defaultSchemaData.file);
   const schemaData = await schemaResp.json();
 
   const defaultInstanceData = defaultSchemaData.instances.find(
-    (instance: any) => instance.default === true,
+    (instance) => instance.default === true,
   );
 
+  if (!defaultInstanceData) {
+    throw new Error('Default instance not found');
+  }
+
   const instanceResp = await fetch(defaultInstanceData.file);
   const instanceData = await instanceResp.json();
 
@@ -29,17 +64,6 @@ async function fetchData() {
   };
 }
 
-interface SchemaOption {
-  file: string;
-  instances: InstanceOption[];
-}
-
-interface InstanceOption {
-  file: string;
-  details: string;
-  valid: string;
-}
-
 const GettingStarted = () => {
   useEffect(() => {
     fetchData()
@@ -64,8 +88,10 @@ const GettingStarted = () => {
   const [options, setOptions] = useState<SchemaOption[]>([]);
   const [instances, setInstances] = useState<InstanceOption[]>([]);
   const [details, setDetails] = useState<string[]>(['', '']);
-  const [fetchedSchema, setFetchedSchema] = useState();
-  const [fetchedInstance, setFetchedInstance] = useState();
+  const [fetchedSchema, setFetchedSchema] = useState<SchemaData | null>(null);
+  const [fetchedInstance, setFetchedInstance] = useState<InstanceData | null>(
+    null,
+  );
 
   const handleSchemaChange = async (
     e: React.ChangeEvent<HTMLSelectElement>,
@@ -86,7 +112,7 @@ const GettingStarted = () => {
       setFetchedInstance(instData);
     } else {
       setInstances([]);
-      setFetchedSchema(null!);
+      setFetchedSchema(null);
     }
   };
 
@@ -104,7 +130,7 @@ const GettingStarted = () => {
       setFetchedInstance(instanceData);
       setDetails([selectedInstance.details, selectedInstance.valid]);
     } else {
-      setFetchedInstance(undefined);
+      setFetchedInstance(null);
     }
   };
 
@@ -125,6 +151,7 @@ const GettingStarted = () => {
   return (
     <>
       <div className='relative'>
+        {/* Schema Select and Display */}
         <div className='flex flex-col'>
           <div className='flex items-end flex-row justify-between mt-5 mb-3 '>
             <h2 className='text-h6 font-semibold mb-1'>JSON Schema</h2>
@@ -138,7 +165,7 @@ const GettingStarted = () => {
                 id='Examples'
                 onChange={handleSchemaChange}
               >
-                {options.map((option: any, id: number) => (
+                {options.map((option, id) => (
                   <option key={id} value={option.file}>
                     {option.name}
                   </option>
@@ -180,6 +207,7 @@ const GettingStarted = () => {
           </div>
         </div>
 
+        {/* Instance Select and Display */}
         <div className='flex flex-col'>
           <div className='flex items-end flex-row justify-between mt-5 mb-3 '>
             <h2 className='text-h6 font-semibold mb-1'>JSON Instance</h2>
@@ -193,7 +221,7 @@ const GettingStarted = () => {
                 id='Examples'
                 onChange={handleInstanceChange}
               >
-                {instances.map((instance: any, id: number) => (
+                {instances.map((instance, id) => (
                   <option key={id} value={instance.file}>
                     {instance.name}
                   </option>
@@ -244,6 +272,7 @@ const GettingStarted = () => {
           </div>
         </div>
 
+        {/* Download Button */}
         <button
           className='absolute right-0 my-4 text-[17px] bg-startBlue text-white px-3 py-1 rounded'
           onClick={createZip}

components/Headlines.tsx

@@ -4,11 +4,27 @@ import slugifyMarkdownHeadline from '~/lib/slugifyMarkdownHeadline';
 import { useRouter } from 'next/router';
 import { HOST } from '~/lib/config';
 
+type Attributes = {
+  slug?: string;
+  className?: string;
+  onClick?: () => void;
+  id?: string;
+  'data-test'?: string;
+};
+
 type HeadlineProps = {
   children: string | React.ReactNode[];
-  attributes?: Record<string, any>;
+  attributes?: Attributes;
+};
+
+type HeadlineTagProps = {
+  children: string | React.ReactNode[];
+  Tag: React.FunctionComponent<TagProps>;
+  attributes?: Attributes;
 };
 
+type TagProps = { children: React.ReactNode; attributes: Attributes };
+
 export const Headline1 = ({ children, attributes }: HeadlineProps) => (
   <Headline Tag={Headline1Tag} attributes={attributes}>
     {children}
@@ -34,15 +50,11 @@ const Headline = ({
   children,
   Tag,
   attributes: propAttributes,
-}: {
-  children: string | React.ReactNode[];
-  Tag: React.FunctionComponent<TagProps>;
-  attributes?: Record<string, any>;
-}) => {
+}: HeadlineTagProps) => {
   const router = useRouter();
   const [isActive, setIsActive] = useState<boolean>(false);
   const asPath = router.asPath;
-  const slug = slugifyMarkdownHeadline(children as any[]);
+  const slug = slugifyMarkdownHeadline(children as string[]);
 
   useEffect(() => {
     const hashIndex = asPath.indexOf('#');
@@ -72,6 +84,7 @@ const Headline = ({
     onClick: handleHeadingClick,
     'data-test': 'headline',
   };
+
   const childredWithoutFragment = filterFragment(children);
   return (
     <Tag attributes={attributes}>
@@ -92,8 +105,6 @@ const filterFragment = (children: string | React.ReactNode[]) => {
   });
 };
 
-type TagProps = { children: React.ReactNode; attributes: Record<string, any> };
-
 const Headline1Tag = ({ children, attributes }: TagProps) => (
   <h1
     {...attributes}

components/Layout.tsx

@@ -17,6 +17,18 @@ type Props = {
   metaTitle?: string;
   whiteBg?: boolean;
 };
+
+type StoreState = {
+  overlayNavigation: string | null;
+};
+
+type MainNavLinkProps = {
+  uri: string;
+  label: string;
+  className?: string;
+  isActive: boolean;
+};
+
 // apiKey and appId are set in the .env.local file
 const algoliaAppId: string = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID as string;
 const algoliaApiKey: string = process.env.NEXT_PUBLIC_ALGOLIA_API_KEY as string;
@@ -29,7 +41,9 @@ export default function Layout({
   metaTitle,
   whiteBg,
 }: Props) {
-  const showMobileNav = useStore((s: any) => s.overlayNavigation === 'docs');
+  const showMobileNav = useStore(
+    (s: StoreState) => s.overlayNavigation === 'docs',
+  );
 
   const router = useRouter();
 
@@ -57,7 +71,7 @@ export default function Layout({
     const handleCloseNavbar = (event: MouseEvent) => {
       if (
         mobileNavRef.current &&
-        (mobileNavRef.current as any).contains(event.target)
+        mobileNavRef.current.contains(event.target as Node)
       ) {
         useStore.setState({ overlayNavigation: null });
       }
@@ -124,18 +138,8 @@ export const Search = () => {
     />
   );
 };
-/* eslint-disable @typescript-eslint/no-unused-vars */
-const MainNavLink = ({
-  uri,
-  label,
-  className,
-  isActive,
-}: {
-  uri: string;
-  label: string;
-  isActive: boolean;
-  className?: string;
-}) => {
+
+const MainNavLink = ({ uri, label, className }: MainNavLinkProps) => {
   const router = useRouter();
   return (
     <Link
@@ -158,7 +162,9 @@ const MainNavLink = ({
 
 const MainNavigation = () => {
   const section = useContext(SectionContext);
-  const showMobileNav = useStore((s: any) => s.overlayNavigation === 'docs');
+  const showMobileNav = useStore(
+    (s: StoreState) => s.overlayNavigation === 'docs',
+  );
 
   const { resolvedTheme, theme } = useTheme();
   const [icon, setIcon] = useState('');

components/NextPrevButton.tsx

@@ -2,36 +2,19 @@ import Image from 'next/image';
 import React from 'react';
 import Link from 'next/link';
 
-/*
-To use this component:
-1) Add prev and next metadata to the markdown page following this format:
-
----
-title: Creating your first schema
-section: docs
-prev: 
-  label: prev
-  url: '#1'
-next: 
-  label: Miscellaneous examples
-  url: '#2'
----
-
-2) Add the component to the typescript page:
-
-import NextPrevButton from '~/components/NextPrevButton';
-
-3) Add the component to the body of the page:
-
-<NextPrevButton prevLabel={frontmatter.prev.label} prevURL={frontmatter.prev.url} nextLabel={frontmatter.next.label} nextURL={frontmatter.next.url} />
-*/
+type NextPrevButtonProps = {
+  prevLabel: string;
+  prevURL: string;
+  nextLabel: string;
+  nextURL: string;
+};
 
 export default function NextPrevButton({
   prevLabel,
   prevURL,
   nextLabel,
   nextURL,
-}: any) {
+}: NextPrevButtonProps) {
   return (
     <div className='mb-4 flex flex-row gap-4'>
       <div className='h-auto w-1/2'>
@@ -60,12 +43,12 @@ export default function NextPrevButton({
       <div className='h-auto w-1/2'>
         <div className='h-full cursor-pointer rounded border border-gray-200 p-4 text-center shadow-md transition-all duration-300 ease-in-out hover:border-gray-300 hover:shadow-lg dark:shadow-xl dark:drop-shadow-lg dark:hover:shadow-2xl lg:text-right'>
           <Link href={nextURL}>
-            <div className='text-primary  dark:text-slate-300 flex flex-row-reverse gap-5 text-[18px]'>
+            <div className='text-primary dark:text-slate-300 flex flex-row-reverse gap-5 text-[18px]'>
               <Image
                 src={'/icons/arrow.svg'}
                 height={10}
                 width={10}
-                alt='next icon '
+                alt='next icon'
                 className='w-5'
               />
               <div className='my-auto inline font-bold uppercase '>Up Next</div>