Merge branch 'v3-reformat' into v3-analytics-reformat

# Conflicts: # apps/frontend-manage/src/components/common/Header.tsx # apps/office-addin/src/content/components/URLForm.tsx
uzh-bf · Aug 27, 2024 · 73c314d · 73c314d
2 parents b1a1b88 + 3584705
commit 73c314d
Show file tree

Hide file tree

Showing 277 changed files with 27,982 additions and 5,362 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,18 @@
-cypress/e2e/
+cypress/e2e/
+node_modules/
+.next/
+.turbo/
+.vercel/
+dist/
+out/
+build/
+email/
+
+ops.schema.json
+ops.ts
+schema.graphql
+nexus-typegen.ts
+client.json
+server.json
+
+*.sql
diff --git a/.prettierrc.js → .prettierrc.mjs b/.prettierrc.js → .prettierrc.mjs
@@ -1,6 +1,8 @@
-module.exports = {
+export default {
   semi: false,
   singleQuote: true,
   trailingComma: 'es5',
+  // tabWidth: 2,
+  // printWidth: 120,
   plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-tailwindcss'],
 }
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -25,6 +25,7 @@
     "prisma.prisma",
     "stivo.tailwind-fold",
     "wix.vscode-import-cost",
-    "yzhang.markdown-all-in-one"
+    "yzhang.markdown-all-in-one",
+    "folke.vscode-monorepo-workspace"
   ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -19,8 +19,28 @@
   "files.associations": {
     "plyconfig.json": "jsonc"
   },
-  "prettier.configPath": ".prettierrc.js",
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "notebook.defaultFormatter": "esbenp.prettier-vscode",
-  "prettier.prettierPath": "./node_modules/prettier"
+  "prettier.requireConfig": true,
+  "prettier.useEditorConfig": false,
+  "prettier.configPath": "${workspaceFolder}/.prettierrc.js",
+  "prettier.resolveGlobalModules": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "eslint.workingDirectories": [
+    {
+      "pattern": "apps/*/"
+    },
+    {
+      "pattern": "packages/*/"
+    }
+  ]
 }
diff --git a/apps/auth/.prettierignore b/apps/auth/.prettierignore
diff --git a/apps/auth/.prettierrc.js b/apps/auth/.prettierrc.js
diff --git a/apps/auth/package.json b/apps/auth/package.json
@@ -37,9 +37,6 @@
     "eslint-config-next": "14.1.0",
     "postcss": "8.4.41",
     "postcss-import": "16.1.0",
-    "prettier": "2.8.8",
-    "prettier-plugin-organize-imports": "3.2.3",
-    "prettier-plugin-tailwindcss": "0.4.1",
     "prisma": "5.18.0",
     "tailwindcss": "3.4.9",
     "typescript": "5.4.5"

diff --git a/apps/auth/src/pages/index.tsx b/apps/auth/src/pages/index.tsx
@@ -77,7 +77,7 @@ function SignInOutButton() {
 
   return (
     <div className="flex flex-col gap-4">
-      <p className="px-3 py-2 rounded shadow bg-slate-100 border-slate-300">
+      <p className="rounded border-slate-300 bg-slate-100 px-3 py-2 shadow">
         {t('auth.loginInfo')}
       </p>
       <Checkbox
@@ -124,7 +124,7 @@ function SignInOutButton() {
       )}
       <Button
         className={{
-          root: 'disabled:opacity-50 justify-center italic',
+          root: 'justify-center italic disabled:opacity-50',
         }}
         disabled={!tosChecked}
         data={{ cy: 'delegated-login-button' }}
@@ -147,9 +147,9 @@ export function Index() {
   const t = useTranslations()
 
   return (
-    <div className="m-auto flex w-full md:max-w-2xl flex-grow flex-col md:!flex-grow-0 md:rounded-lg md:border md:shadow">
-      <div className="flex flex-col items-center justify-center flex-1 gap-8 md:p-8">
-        <div className="w-full px-5 pb-4 text-center border-b sm:px-8">
+    <div className="m-auto flex w-full flex-grow flex-col md:max-w-2xl md:!flex-grow-0 md:rounded-lg md:border md:shadow">
+      <div className="flex flex-1 flex-col items-center justify-center gap-8 md:p-8">
+        <div className="w-full border-b px-5 pb-4 text-center sm:px-8">
           <Image
             src="/KlickerLogo.png"
             width={300}
@@ -159,7 +159,7 @@ export function Index() {
             data-cy="login-logo"
           />
         </div>
-        <div className="flex flex-row justify-between w-full px-6 sm:px-10 md:mx-0">
+        <div className="flex w-full flex-row justify-between px-6 sm:px-10 md:mx-0">
           <H1 className={{ root: 'mb-0' }}>{t('auth.authentication')}</H1>
           <div>
             <LanguageChanger
@@ -177,7 +177,7 @@ export function Index() {
           <SignInOutButton />
         </div>
       </div>
-      <div className="flex-none w-full">
+      <div className="w-full flex-none">
         <Footer className="!text-xs" />
       </div>
     </div>

diff --git a/apps/backend-docker/.prettierignore b/apps/backend-docker/.prettierignore
diff --git a/apps/backend-docker/.prettierrc.cjs b/apps/backend-docker/.prettierrc.cjs
diff --git a/apps/frontend-control/.prettierignore b/apps/frontend-control/.prettierignore
diff --git a/apps/frontend-control/.prettierrc.js b/apps/frontend-control/.prettierrc.js
diff --git a/apps/frontend-control/package.json b/apps/frontend-control/package.json
@@ -60,9 +60,6 @@
     "eslint-config-next": "14.1.0",
     "postcss": "8.4.41",
     "postcss-import": "16.1.0",
-    "prettier": "2.8.8",
-    "prettier-plugin-organize-imports": "3.2.3",
-    "prettier-plugin-tailwindcss": "0.4.1",
     "tailwindcss": "3.4.9",
     "tailwindcss-radix": "3.0.3",
     "ts-node": "10.9.1",

diff --git a/apps/frontend-control/src/components/Layout.tsx b/apps/frontend-control/src/components/Layout.tsx
@@ -30,7 +30,7 @@ function Layout({ title, children, sessionId, className }: LayoutProps) {
   }
 
   return (
-    <div className="flex flex-col w-full h-full">
+    <div className="flex h-full w-full flex-col">
       <Head>
         <title>KlickerUZH Controller {title}</title>
         <meta
@@ -40,16 +40,16 @@ function Layout({ title, children, sessionId, className }: LayoutProps) {
         ></meta>
       </Head>
 
-      <div className={twMerge('h-full overflow-y-none', className)}>
+      <div className={twMerge('overflow-y-none h-full', className)}>
         <div className="fixed top-0 z-10 w-full">
           <Header title={title} />
         </div>
 
-        <div className="flex flex-col p-4 mt-11 mb-12 md:mb-0 overflow-y-auto [height:_calc(100%-5.75rem)] md:[height:_calc(100%-2.75rem)]">
+        <div className="mb-12 mt-11 flex flex-col overflow-y-auto p-4 [height:_calc(100%-5.75rem)] md:mb-0 md:[height:_calc(100%-2.75rem)]">
           {children}
         </div>
 
-        <div className="fixed bottom-0 w-full h-12 md:hidden">
+        <div className="fixed bottom-0 h-12 w-full md:hidden">
           <MobileMenuBar sessionId={sessionId} />
         </div>
       </div>

diff --git a/apps/frontend-control/src/components/common/ListButton.tsx b/apps/frontend-control/src/components/common/ListButton.tsx
@@ -44,7 +44,7 @@ function ListButton({
       onClick={onClick ? onClick : () => router.push(link)}
       className={{
         root: twMerge(
-          'p-2 border border-solid rounded-md bg-uzh-grey-40 border-uzh-grey-100 w-full',
+          'bg-uzh-grey-40 border-uzh-grey-100 w-full rounded-md border border-solid p-2',
           className?.root
         ),
       }}

diff --git a/apps/frontend-control/src/components/common/LoginForm.tsx b/apps/frontend-control/src/components/common/LoginForm.tsx
@@ -57,9 +57,9 @@ export function LoginForm({
   }
 
   return (
-    <div className="flex flex-col flex-grow max-w-xl md:!flex-grow-0 md:border md:rounded-lg md:shadow">
-      <div className="flex flex-col items-center justify-center flex-1 md:p-12">
-        <div className="w-full mb-8 text-center sm:mb-12">
+    <div className="flex max-w-xl flex-grow flex-col md:!flex-grow-0 md:rounded-lg md:border md:shadow">
+      <div className="flex flex-1 flex-col items-center justify-center md:p-12">
+        <div className="mb-8 w-full text-center sm:mb-12">
           <Image
             src="/KlickerLogo.png"
             width={300}
@@ -91,7 +91,7 @@ export function LoginForm({
 
             <div className="flex flex-row justify-between">
               <Button
-                className={{ root: 'mt-2 border-uzh-grey-80' }}
+                className={{ root: 'border-uzh-grey-80 mt-2' }}
                 type="submit"
                 disabled={isSubmitting}
                 data={{ cy: 'submit-login' }}
@@ -101,11 +101,11 @@ export function LoginForm({
             </div>
 
             {installAndroid && onChrome && (
-              <div className="flex flex-col justify-center mt-4 md:hidden">
+              <div className="mt-4 flex flex-col justify-center md:hidden">
                 <UserNotification type="info" message={installAndroid}>
                   <Button
                     className={{
-                      root: 'mt-2 w-fit border-uzh-grey-80',
+                      root: 'border-uzh-grey-80 mt-2 w-fit',
                     }}
                     onClick={onInstallClick}
                     data={{ cy: 'install-control-pwa' }}
@@ -127,7 +127,7 @@ export function LoginForm({
           </Form>
         </div>
       </div>
-      <div className="flex-none w-full">
+      <div className="w-full flex-none">
         <Footer />
       </div>
     </div>

diff --git a/apps/frontend-control/src/components/layout/Header.tsx b/apps/frontend-control/src/components/layout/Header.tsx
@@ -15,8 +15,8 @@ function Header({ title }: HeaderProps) {
   const [logoutUser] = useMutation(LogoutUserDocument)
 
   return (
-    <div className="fixed top-0 flex flex-row items-center justify-between w-full px-2 text-white h-11 md:px-4 bg-slate-800">
-      <div className="text-lg font-bold line-clamp-1">{title}</div>
+    <div className="fixed top-0 flex h-11 w-full flex-row items-center justify-between bg-slate-800 px-2 text-white md:px-4">
+      <div className="line-clamp-1 text-lg font-bold">{title}</div>
       <div className="flex flex-row gap-4">
         <Select
           value={router.locale}
@@ -31,7 +31,7 @@ function Header({ title }: HeaderProps) {
           }
           className={{
             trigger:
-              'text-white border-b border-solid p-0.5 pb-0 rounded-none hover:bg-transparent hover:text-white',
+              'rounded-none border-b border-solid p-0.5 pb-0 text-white hover:bg-transparent hover:text-white',
           }}
           data={{ cy: 'language-select' }}
           basic

diff --git a/apps/frontend-control/src/components/layout/MenuButton.tsx b/apps/frontend-control/src/components/layout/MenuButton.tsx
@@ -29,8 +29,8 @@ function MenuButton({
     <Button
       className={{
         root: twMerge(
-          'flex justify-center flex-1 my-0.5 flex-col gap-0 bg-grey-60 border-0 shadow-none text-white',
-          disabled && 'cursor-not-allowed text-uzh-grey-100',
+          'bg-grey-60 my-0.5 flex flex-1 flex-col justify-center gap-0 border-0 text-white shadow-none',
+          disabled && 'text-uzh-grey-100 cursor-not-allowed',
           className?.root
         ),
       }}

diff --git a/apps/frontend-control/src/components/layout/MobileMenuBar.tsx b/apps/frontend-control/src/components/layout/MobileMenuBar.tsx
@@ -20,8 +20,8 @@ function MobileMenuBar({ sessionId }: MobileMenuBarProps) {
   const [embedModalOpen, setEmbedModalOpen] = useState<boolean>(false)
 
   return (
-    <div className="fixed bottom-0 w-full h-12 bg-slate-800">
-      <div className="flex flex-row justify-between h-full">
+    <div className="fixed bottom-0 h-12 w-full bg-slate-800">
+      <div className="flex h-full flex-row justify-between">
         <MenuButton
           icon={<FontAwesomeIcon icon={faArrowLeftLong} />}
           onClick={() => router.back()}

diff --git a/apps/frontend-control/src/components/sessions/EmbeddingModal.tsx b/apps/frontend-control/src/components/sessions/EmbeddingModal.tsx
@@ -40,7 +40,7 @@ function LazyHMACLink({
   }`
 
   return (
-    <div className="flex flex-row items-center gap-3 px-1.5 py-0.5 mr-2 border border-solid rounded bg-uzh-grey-40">
+    <div className="bg-uzh-grey-40 mr-2 flex flex-row items-center gap-3 rounded border border-solid px-1.5 py-0.5">
       <FontAwesomeIcon
         icon={faClipboard}
         className="hover:cursor-pointer"
@@ -84,7 +84,7 @@ function EmbeddingModal({ open, setOpen, sessionId }: EmbeddingModalProps) {
       }
       className={{
         content:
-          'h-max max-h-[calc(100%-5rem)] overflow-y-scroll w-full md:w-max md:min-w-[30rem] my-auto mx-auto',
+          'mx-auto my-auto h-max max-h-[calc(100%-5rem)] w-full overflow-y-scroll md:w-max md:min-w-[30rem]',
       }}
       hideCloseButton
     >
@@ -93,10 +93,10 @@ function EmbeddingModal({ open, setOpen, sessionId }: EmbeddingModalProps) {
         {questions?.map((question: any, ix: number) => {
           return (
             <div key={question.id}>
-              <div className="w-full font-bold line-clamp-1">{`${ix + 1}. ${
+              <div className="line-clamp-1 w-full font-bold">{`${ix + 1}. ${
                 question.questionData.name
               }`}</div>
-              <div className="flex flex-row items-center gap-3 px-1.5 py-0.5 mr-2 border border-solid rounded bg-uzh-grey-40">
+              <div className="bg-uzh-grey-40 mr-2 flex flex-row items-center gap-3 rounded border border-solid px-1.5 py-0.5">
                 <LazyHMACLink
                   sessionId={sessionId}
                   params={`questionIx=${ix}`}
@@ -107,7 +107,7 @@ function EmbeddingModal({ open, setOpen, sessionId }: EmbeddingModalProps) {
         })}
       </div>
       <div className="mt-3">
-        <div className="font-bold w-30">{t('shared.generic.leaderboard')}:</div>
+        <div className="w-30 font-bold">{t('shared.generic.leaderboard')}:</div>
         <LazyHMACLink sessionId={sessionId} params={`leaderboard=true`} />
       </div>
     </Modal>

diff --git a/apps/frontend-control/src/components/sessions/SessionBlock.tsx b/apps/frontend-control/src/components/sessions/SessionBlock.tsx
@@ -47,13 +47,13 @@ function SessionBlock({ block, active = false }: SessionBlockProps) {
   return (
     <div
       className={twMerge(
-        'mb-2 border border-solid rounded-md border-uzh-grey-100',
+        'border-uzh-grey-100 mb-2 rounded-md border border-solid',
         active && 'border-uzh-darkgreen-80'
       )}
     >
       <div
         className={twMerge(
-          'flex flex-row justify-between p-1 bg-uzh-grey-40',
+          'bg-uzh-grey-40 flex flex-row justify-between p-1',
           active && 'bg-green-300'
         )}
       >

diff --git a/apps/frontend-control/src/components/sessions/SessionLists.tsx b/apps/frontend-control/src/components/sessions/SessionLists.tsx
@@ -46,7 +46,7 @@ function SessionLists({ runningSessions, plannedSessions }: SessionListsProps) {
                   setSessionId(session.id)
                 }}
                 className={{
-                  root: 'h-full p-2 border border-solid rounded-md bg-uzh-grey-40 border-uzh-grey-100',
+                  root: 'bg-uzh-grey-40 border-uzh-grey-100 h-full rounded-md border border-solid p-2',
                 }}
                 data={{ cy: `ppt-link-${session.name}` }}
               >
@@ -87,7 +87,7 @@ function SessionLists({ runningSessions, plannedSessions }: SessionListsProps) {
                   setSessionId(session.id)
                 }}
                 className={{
-                  root: 'h-full p-2 border border-solid rounded-md bg-uzh-grey-40 border-uzh-grey-100',
+                  root: 'bg-uzh-grey-40 border-uzh-grey-100 h-full rounded-md border border-solid p-2',
                 }}
                 data={{ cy: `ppt-link-${session.name}` }}
               >