Use shared web configs (#116)

# Use shared web configs

## ♻️ Current situation & Problem
Currently, ESLint is custom. This PR uses centralized configuration from
https://github.com/StanfordSpezi/spezi-web-configurations

## ⚙️ Release Notes 
* Use shared web configs

### Code of Conduct & Contributing Guidelines 

By submitting creating this pull request, you agree to follow our [Code
of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md):
- [x] I agree to follow the [Code of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md).

.prettierrc.cjs → .prettierrc.js

@@ -6,11 +6,6 @@
 // SPDX-License-Identifier: MIT
 //
 
-const config = {
-  plugins: [require.resolve('prettier-plugin-tailwindcss')],
-  semi: false,
-  singleQuote: true,
-  experimentalTernaries: true,
-}
+const { prettierConfig } = require("@stanfordspezi/spezi-web-configurations");
 
-module.exports = config
+module.exports = prettierConfig;

components/AsideEngageLayout/AsideEngageLayout.tsx

@@ -8,11 +8,11 @@
 import {
   type AsideBrandLayoutProps,
   AsideBrandLayout,
-} from '@stanfordspezi/spezi-web-design-system/molecules/AsideBrandLayout'
-import { LogoType } from '@/components/icons/LogoType'
+} from "@stanfordspezi/spezi-web-design-system/molecules/AsideBrandLayout";
+import { LogoType } from "@/components/icons/LogoType";
 
 export const AsideEngageLayout = (
-  props: Omit<AsideBrandLayoutProps, 'aside'>,
+  props: Omit<AsideBrandLayoutProps, "aside">,
 ) => (
   <AsideBrandLayout
     aside={
@@ -27,4 +27,4 @@ export const AsideEngageLayout = (
     }
     {...props}
   />
-)
+);

components/AsideEngageLayout/index.tsx

@@ -6,4 +6,4 @@
 // SPDX-License-Identifier: MIT
 //
 
-export * from './AsideEngageLayout'
+export * from "./AsideEngageLayout";

components/NotFound/NotFound.tsx

@@ -6,29 +6,29 @@
 // SPDX-License-Identifier: MIT
 //
 
-import { PageTitle } from '@stanfordspezi/spezi-web-design-system/molecules/DashboardLayout'
+import { PageTitle } from "@stanfordspezi/spezi-web-design-system/molecules/DashboardLayout";
 import {
   NotFound as NotFoundBase,
   type NotFoundProps,
-} from '@stanfordspezi/spezi-web-design-system/molecules/NotFound'
-import { useQuery } from '@tanstack/react-query'
-import { RouteOff } from 'lucide-react'
-import { currentUserQueryOptions } from '@/modules/firebase/UserProvider'
-import { DashboardLayout } from '@/routes/~_dashboard/DashboardLayout'
+} from "@stanfordspezi/spezi-web-design-system/molecules/NotFound";
+import { useQuery } from "@tanstack/react-query";
+import { RouteOff } from "lucide-react";
+import { currentUserQueryOptions } from "@/modules/firebase/UserProvider";
+import { DashboardLayout } from "@/routes/~_dashboard/DashboardLayout";
 
 /**
  * NotFound component wrapped with DashboardLayout if user is signed in
  * */
 export const NotFound = (props: NotFoundProps) => {
-  const userQuery = useQuery(currentUserQueryOptions())
+  const userQuery = useQuery(currentUserQueryOptions());
 
-  const notFound = <NotFoundBase {...props} />
+  const notFound = <NotFoundBase {...props} />;
 
   return userQuery.data ?
       <DashboardLayout
         title={<PageTitle title="Not Found" icon={<RouteOff />} />}
       >
         {notFound}
       </DashboardLayout>
-    : <div className="flex-center min-h-screen">{notFound}</div>
-}
+    : <div className="flex-center min-h-screen">{notFound}</div>;
+};

components/NotFound/index.tsx

@@ -6,4 +6,4 @@
 // SPDX-License-Identifier: MIT
 //
 
-export * from './NotFound'
+export * from "./NotFound";

components/icons/LogoType.tsx

@@ -6,11 +6,11 @@
 // SPDX-License-Identifier: MIT
 //
 
-import type { SVGProps } from 'react'
+import type { SVGProps } from "react";
 
 type LogoTypeProps = SVGProps<SVGSVGElement> & {
-  className?: string
-}
+  className?: string;
+};
 
 export const LogoType = (props: LogoTypeProps) => (
   <svg
@@ -26,4 +26,4 @@ export const LogoType = (props: LogoTypeProps) => (
       fill="currentColor"
     />
   </svg>
-)
+);

env.ts

@@ -6,18 +6,18 @@
 // SPDX-License-Identifier: MIT
 //
 
-import { createEnv } from '@t3-oss/env-core'
-import { z } from 'zod'
+import { createEnv } from "@t3-oss/env-core";
+import { z } from "zod";
 
 const booleanFlag = z
   .preprocess((value) => {
-    if (typeof value === 'string') {
-      const flag = value.trim().toLowerCase()
-      return flag === 'true' || flag === '1' || flag === 't'
+    if (typeof value === "string") {
+      const flag = value.trim().toLowerCase();
+      return flag === "true" || flag === "1" || flag === "t";
     }
-    return value
+    return value;
   }, z.boolean().optional())
-  .default(false)
+  .default(false);
 
 export const env = createEnv({
   server: {},
@@ -31,7 +31,7 @@ export const env = createEnv({
     VITE_PUBLIC_EMULATOR: booleanFlag,
     VITE_PUBLIC_EMAIL_PASSWORD_SIGN_IN: booleanFlag,
   },
-  clientPrefix: 'VITE_PUBLIC',
+  clientPrefix: "VITE_PUBLIC",
   runtimeEnv: {
     VITE_PUBLIC_FIREBASE_API_KEY: import.meta.env.VITE_PUBLIC_FIREBASE_API_KEY,
     VITE_PUBLIC_FIREBASE_AUTH_DOMAIN: import.meta.env
@@ -47,4 +47,4 @@ export const env = createEnv({
     VITE_PUBLIC_EMAIL_PASSWORD_SIGN_IN: import.meta.env
       .VITE_PUBLIC_EMAIL_PASSWORD_SIGN_IN,
   },
-})
+});

eslint.config.js

@@ -0,0 +1,11 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+
+const { getEslintConfig } = require("@stanfordspezi/spezi-web-configurations");
+
+module.exports = getEslintConfig({ tsconfigRootDir: __dirname });

global.d.ts

@@ -6,24 +6,24 @@
 // SPDX-License-Identifier: MIT
 //
 
-import type en from './modules/messages/translations/en.json'
+import type en from "./modules/messages/translations/en.json";
 
 /// <reference types="vite/client" />
 
-type Messages = typeof en
+type Messages = typeof en;
 
 declare global {
   // Use type safe message keys with `next-intl`
   interface IntlMessages extends Messages {}
 
   interface ImportMetaEnv {
-    VITE_PUBLIC_FIREBASE_API_KEY: string
-    VITE_PUBLIC_FIREBASE_AUTH_DOMAIN: string
-    VITE_PUBLIC_FIREBASE_PROJECT_ID: string
-    VITE_PUBLIC_FIREBASE_STORAGE_BUCKET: string
-    VITE_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: string
-    VITE_PUBLIC_FIREBASE_APP_ID: string
-    VITE_PUBLIC_EMULATOR: string
-    VITE_PUBLIC_EMAIL_PASSWORD_SIGN_IN: string
+    VITE_PUBLIC_FIREBASE_API_KEY: string;
+    VITE_PUBLIC_FIREBASE_AUTH_DOMAIN: string;
+    VITE_PUBLIC_FIREBASE_PROJECT_ID: string;
+    VITE_PUBLIC_FIREBASE_STORAGE_BUCKET: string;
+    VITE_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: string;
+    VITE_PUBLIC_FIREBASE_APP_ID: string;
+    VITE_PUBLIC_EMULATOR: string;
+    VITE_PUBLIC_EMAIL_PASSWORD_SIGN_IN: string;
   }
 }

main.tsx

@@ -6,37 +6,37 @@
 // SPDX-License-Identifier: MIT
 //
 
-import { createRouter, RouterProvider } from '@tanstack/react-router'
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { NotFound } from '@/components/NotFound/NotFound'
-import { routes } from '@/modules/routes'
-import { routeTree } from './routeTree.gen'
+import { createRouter, RouterProvider } from "@tanstack/react-router";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { NotFound } from "@/components/NotFound/NotFound";
+import { routes } from "@/modules/routes";
+import { routeTree } from "./routeTree.gen";
 
 const router = createRouter({
   routeTree,
   defaultNotFoundComponent: () => (
     <NotFound
-      backPage={{ name: 'home', href: routes.home }}
+      backPage={{ name: "home", href: routes.home }}
       entityName="page"
     />
   ),
   defaultPendingMs: 300,
   defaultPendingMinMs: 200,
-})
+});
 
-declare module '@tanstack/react-router' {
+declare module "@tanstack/react-router" {
   interface Register {
-    router: typeof router
+    router: typeof router;
   }
 }
 
-const rootElement = document.getElementById('root')
+const rootElement = document.getElementById("root");
 if (rootElement && !rootElement.innerHTML) {
-  const root = createRoot(rootElement)
+  const root = createRoot(rootElement);
   root.render(
     <StrictMode>
       <RouterProvider router={router} />
     </StrictMode>,
-  )
+  );
 }