chore: enable noImplicitAny TypeScript rule

packages/web/app/modules.d.ts

@@ -1 +1,10 @@
+/* eslint-disable import/no-unused-modules */
 declare module 'node-crisp-api';
+declare module 'tailwindcss/colors';
+
+declare module '@n1ru4l/react-time-ago' {
+  export function TimeAgo(props: {
+    date: Date;
+    children: (args: { value: string }) => React.ReactElement;
+  }): React.ReactElement;
+}

packages/web/app/pages/[orgId]/[projectId]/[targetId]/history.tsx

@@ -39,6 +39,11 @@ const titleMap: Record<CriticalityLevel, string> = {
   Dangerous: 'Dangerous Changes',
 };
 
+const criticalityLevelMapping = {
+  [CriticalityLevel.Safe]: 'text-emerald-400',
+  [CriticalityLevel.Dangerous]: 'text-yellow-400',
+} as Record<CriticalityLevel, string | undefined>;
+
 const ChangesBlock = ({
   changes,
   criticality,
@@ -57,15 +62,7 @@ const ChangesBlock = ({
       <h2 className="mb-2 text-lg font-medium text-gray-900 dark:text-white">{titleMap[criticality]}</h2>
       <ul className="list-inside list-disc pl-3 text-base leading-relaxed">
         {filteredChanges.map((change, key) => (
-          <li
-            key={key}
-            className={clsx(
-              {
-                [CriticalityLevel.Safe]: 'text-emerald-400',
-                [CriticalityLevel.Dangerous]: 'text-yellow-400',
-              }[criticality] || 'text-red-400'
-            )}
-          >
+          <li key={key} className={clsx(criticalityLevelMapping[criticality] ?? 'text-red-400')}>
             <span className="text-gray-600 dark:text-white">{labelize(change.message)}</span>
           </li>
         ))}

packages/web/app/pages/[orgId]/members.tsx

@@ -1,4 +1,5 @@
 import { ReactElement, useCallback, useEffect, useState } from 'react';
+import { IconProps } from '@chakra-ui/react';
 import { useMutation, useQuery } from 'urql';
 
 import { useUser } from '@/components/auth/AuthProvider';
@@ -18,6 +19,11 @@ import { OrganizationAccessScope, useOrganizationAccess } from '@/lib/access/org
 import { useNotifications } from '@/lib/hooks/use-notifications';
 import { useRouteSelector } from '@/lib/hooks/use-route-selector';
 
+const authProviderIcons = {
+  [AuthProvider.Github]: GitHubIcon,
+  [AuthProvider.Google]: GoogleIcon,
+} as Record<AuthProvider, React.FC<IconProps> | undefined>;
+
 const Page = ({ organization }: { organization: OrganizationFieldsFragment }) => {
   useOrganizationAccess({
     scope: OrganizationAccessScope.Members,
@@ -119,11 +125,7 @@ const Page = ({ organization }: { organization: OrganizationFieldsFragment }) =>
         </Button>
       </div>
       {members.map(node => {
-        const IconToUse =
-          {
-            [AuthProvider.Github]: GitHubIcon,
-            [AuthProvider.Google]: GoogleIcon,
-          }[node.user.provider] || KeyIcon;
+        const IconToUse = authProviderIcons[node.user.provider] ?? KeyIcon;
 
         const isOwner = node.id === org.owner.id;
         const isMe = node.id === me.id;

packages/web/app/pages/_app.tsx

@@ -32,7 +32,7 @@ if (process.env.NODE_ENV === 'development' && 'window' in globalThis) {
 
 function App({ Component, pageProps }: AppProps): ReactElement {
   useEffect(() => {
-    const handleRouteChange = url => {
+    const handleRouteChange = (url: string) => {
       gtag.pageview(url);
 
       const orgId = Router.query.orgId as string;

packages/web/app/pages/_document.tsx

@@ -1,9 +1,9 @@
 import 'regenerator-runtime/runtime';
-import Document, { Html, Head, Main, NextScript } from 'next/document';
+import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
 import { extractCritical } from '@emotion/server';
 
 export default class MyDocument extends Document {
-  static async getInitialProps(ctx) {
+  static async getInitialProps(ctx: DocumentContext) {
     const initialProps = await Document.getInitialProps(ctx);
     const page = await ctx.renderPage();
     const styles = extractCritical(page.html);

packages/web/app/pages/_error.tsx

@@ -3,7 +3,15 @@ import type { NextPageContext } from 'next';
 
 import * as Sentry from '@sentry/nextjs';
 
-const MyError = ({ statusCode, hasGetInitialPropsRun, err }) => {
+const MyError = ({
+  statusCode,
+  hasGetInitialPropsRun,
+  err,
+}: {
+  statusCode: number;
+  hasGetInitialPropsRun: boolean;
+  err: Error;
+}) => {
   if (!hasGetInitialPropsRun && err) {
     // getInitialProps is not called in case of
     // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass

packages/web/app/pages/api/proxy.ts

@@ -111,7 +111,7 @@ async function graphql(req: NextApiRequest, res: NextApiResponse) {
 
     if (isStream) {
       graphqlSpan.setHttpStatus(response.status);
-      const headers = {};
+      const headers: Record<string, string> = {};
 
       response.headers.forEach((value, key) => {
         headers[key] = value;

packages/web/app/src/components/auth/AuthProvider.tsx

@@ -20,7 +20,7 @@ declare global {
 }
 
 function identifyOnCrisp(user: UserProfile): void {
-  const crisp = globalThis.$crisp;
+  const crisp = globalThis.window.$crisp;
   if (crisp) {
     pushIfNotEmpty(crisp, 'user:email', user.email);
     pushIfNotEmpty(crisp, 'user:nickname', user.name || user.nickname);

packages/web/app/src/components/common/Navigation.tsx

@@ -63,7 +63,7 @@ const NavigationContext = React.createContext<{
 
 export const useNavigation = () => React.useContext(NavigationContext);
 
-export const NavigationProvider = ({ children }) => {
+export const NavigationProvider = ({ children }: { children: React.ReactNode }) => {
   const [state, setState] = React.useState<State>({});
   const [visible, setVisible] = React.useState<boolean>(true);
   const show = React.useCallback(() => setVisible(true), [setVisible]);

packages/web/app/src/components/common/Page.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import tw, { styled } from 'twin.macro';
 import Link from 'next/link';
 import { FiTarget } from 'react-icons/fi';
@@ -39,7 +39,7 @@ const MenuLink = styled.a(({ active }: { active?: boolean }) => [
 
 const Menu = {
   Root: tw.ul`flex flex-col px-2 py-4`,
-  Title: ({ children, icon }) => {
+  Title: ({ children, icon }: { children: string; icon: ReactElement }) => {
     return (
       <li tw="px-3 pb-2">
         <div tw="flex flex-row items-center h-8">

packages/web/app/src/components/organization/Switcher.tsx

@@ -42,7 +42,10 @@ export const OrganizationSwitcher: React.FC<{
       };
     }
 
-    const menu = {
+    const menu: {
+      personal: Array<{ key: string; label: string }>;
+      organizations: Array<{ key: string; label: string }>;
+    } = {
       personal: [],
       organizations: [],
     };

packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx

@@ -121,6 +121,11 @@ const Plan = (plan: {
   );
 };
 
+const billingPlanLookUpMap = {
+  [BillingPlanType.Hobby]: 'Free',
+  [BillingPlanType.Enterprise]: 'Contact Us',
+} as Record<BillingPlanType, string | undefined>;
+
 export const BillingPlanPicker = ({
   value,
   activePlan,
@@ -139,12 +144,7 @@ export const BillingPlanPicker = ({
           <Plan
             key={plan.id}
             name={plan.name}
-            price={
-              {
-                [BillingPlanType.Hobby]: 'Free',
-                [BillingPlanType.Enterprise]: 'Contact Us',
-              }[plan.planType] || plan.basePrice
-            }
+            price={billingPlanLookUpMap[plan.planType] ?? plan.basePrice}
             isActive={activePlan === plan.planType}
             features={planCollection[plan.planType].features}
             description={planCollection[plan.planType].description}

packages/web/app/src/components/target/operations/Stats.tsx

@@ -40,7 +40,7 @@ function fullSeries(
     from: string;
     to: string;
   }
-) {
+): Array<[string, number]> {
   if (!data.length) {
     return createEmptySeries({ interval, period });
   }
@@ -72,7 +72,7 @@ function fullSeries(
   }
 
   // Instead of creating a new array, we could move things around but this is easier
-  const newData = [];
+  const newData: Array<[string, number]> = [];
 
   for (let i = 0; i < data.length; i++) {
     const current = data[i];
@@ -100,6 +100,14 @@ function fullSeries(
   return newData;
 }
 
+function times<T>(amount: number, f: (index: number) => T) {
+  const items: Array<T> = [];
+  for (const i = 0; i < amount; amount++) {
+    items[i] = f(i);
+  }
+  return items;
+}
+
 function createEmptySeries({
   interval,
   period,
@@ -114,9 +122,7 @@ function createEmptySeries({
   const endAt = new Date(period.to).getTime();
 
   const steps = Math.floor((endAt - startAt) / interval);
-  return Array(steps)
-    .fill(0)
-    .map((_, i) => [new Date(startAt + i * interval).toISOString(), 0]);
+  return times(steps, i => [new Date(startAt + i * interval).toISOString(), 0]);
 }
 
 function useChartStyles() {

packages/web/app/src/components/v2/activities.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import NextLink from 'next/link';
 import { useQuery } from 'urql';
 
@@ -197,7 +197,7 @@ export const getActivity = (
   }
 };
 
-export const Activities = (props): ReactElement => {
+export const Activities = (props: React.ComponentProps<'div'>): ReactElement => {
   const router = useRouteSelector();
   const [organizationActivitiesQuery] = useQuery({
     query: organizationActivitiesDocument,

packages/web/app/src/components/v2/modals/connect-schema.tsx

@@ -6,6 +6,11 @@ import { Button, CopyValue, Heading, Link, Modal, Tag } from '@/components/v2';
 import { CreateCdnTokenDocument, ProjectDocument, ProjectType } from '@/graphql';
 import { useRouteSelector } from '@/lib/hooks/use-route-selector';
 
+const taxonomy = {
+  [ProjectType.Federation]: 'supergraph schema',
+  [ProjectType.Stitching]: 'services',
+} as Record<ProjectType, string | undefined>;
+
 export const ConnectSchemaModal = ({
   isOpen,
   toggleModalOpen,
@@ -56,11 +61,7 @@ export const ConnectSchemaModal = ({
           <Heading>Generating access...</Heading>
           <p className="text-center">
             Hive is now generating an authentication token and an URL you can use to fetch your{' '}
-            {{
-              [ProjectType.Federation]: 'supergraph schema',
-              [ProjectType.Stitching]: 'services',
-            }[project.type] || 'schema'}
-            .
+            {taxonomy[project.type] ?? 'schema'}.
           </p>
         </div>
       )}
@@ -69,11 +70,8 @@ export const ConnectSchemaModal = ({
         <>
           <p className="text-sm text-gray-500">
             With high-availability and multi-zone CDN service based on Cloudflare, Hive allows you to access the
-            {{
-              [ProjectType.Federation]: 'supergraph',
-              [ProjectType.Stitching]: 'list of services',
-            }[project.type] || 'schema'}{' '}
-            of your API, through a secured external service, that's always up regardless of Hive.
+            {taxonomy[project.type] ?? 'schema'} of your API, through a secured external service, that's always up
+            regardless of Hive.
           </p>
           <span className="text-sm text-gray-500">You can use the following endpoint:</span>
           <CopyValue value={mutation.data.createCdnToken.url} />

packages/web/app/src/components/v2/table.tsx

@@ -1,15 +1,15 @@
 import { ReactElement } from 'react';
 import clsx from 'clsx';
 
-type Column = { key: string; align?: 'right'; width?: 'auto' };
+type Column<TKey extends string> = { key: TKey; align?: 'right'; width?: 'auto' };
 
-export const Table = ({
+export function Table<TColumns extends string>({
   dataSource,
   columns,
 }: {
-  dataSource?: { id: string }[];
-  columns: Column[] | ReadonlyArray<Column>;
-}): ReactElement => {
+  dataSource?: Array<{ id: string } & Record<TColumns, ReactElement | string>>;
+  columns: Array<Column<TColumns>> | ReadonlyArray<Column<TColumns>>;
+}): ReactElement {
   return (
     <table className="w-full">
       <tbody>
@@ -32,4 +32,4 @@ export const Table = ({
       </tbody>
     </table>
   );
-};
+}

packages/web/app/src/components/v2/tag.tsx

@@ -1,27 +1,23 @@
 import { ReactElement, ReactNode } from 'react';
 import clsx from 'clsx';
 
+const colors = {
+  green: 'bg-green-500/10 text-green-500',
+  yellow: 'bg-yellow-500/10 text-yellow-500',
+  gray: 'bg-gray-500/10 text-gray-500',
+} as const;
+
 export const Tag = ({
   children,
   color = 'gray',
   className,
 }: {
-  color?: 'red' | 'green' | 'yellow' | 'gray';
+  color?: 'green' | 'yellow' | 'gray';
   className?: string;
   children: ReactNode;
 }): ReactElement => {
   return (
-    <span
-      className={clsx(
-        'inline-flex items-center gap-x-1 rounded-sm p-2',
-        {
-          green: 'bg-green-500/10 text-green-500',
-          yellow: 'bg-yellow-500/10 text-yellow-500',
-          gray: 'bg-gray-500/10 text-gray-500',
-        }[color],
-        className
-      )}
-    >
+    <span className={clsx('inline-flex items-center gap-x-1 rounded-sm p-2', colors[color], className)}>
       {children}
     </span>
   );

packages/web/app/src/lib/gtag.ts

@@ -1,7 +1,7 @@
 import type { NextWebVitalsMetric } from 'next/app';
 import { GA_TRACKING_ID } from '@/constants';
 
-export const pageview = (url): void => {
+export const pageview = (url: string): void => {
   if (!GA_TRACKING_ID) {
     return;
   }
@@ -11,7 +11,7 @@ export const pageview = (url): void => {
 };
 
 // https://developers.google.com/analytics/devguides/collection/gtagjs/events
-export const event = ({ action, category, label, value }): void => {
+export const event = ({ action, category, label, value }: any): void => {
   if (!GA_TRACKING_ID) {
     return;
   }

packages/web/app/src/lib/urql.ts

@@ -5,7 +5,7 @@ import { captureException } from '@sentry/nextjs';
 import { Mutation } from './urql-cache';
 import { networkStatusExchange } from './urql-exchanges/state';
 
-const noKey = () => null;
+const noKey = (): null => null;
 
 const SERVER_BASE_PATH = '/api/proxy';
 

packages/web/app/tsconfig.json

@@ -11,6 +11,7 @@
     "noImplicitThis": true,
     "strictBindCallApply": true,
     "alwaysStrict": true,
+    "noImplicitAny": true,
 
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,