Update all dependencies to latest

The Prettier reformatting havoc was caused by:
tailwindlabs/tailwindcss#7412

package.json

@@ -20,55 +20,55 @@
   },
   "dependencies": {
     "@apilytics/next": "1.3.0",
-    "@fontsource/ubuntu": "4.5.1",
+    "@fontsource/ubuntu": "4.5.2",
     "@heroicons/react": "1.0.5",
     "@next-auth/prisma-adapter": "1.0.1",
-    "@prisma/client": "3.9.0",
-    "aws-sdk": "2.1066.0",
+    "@prisma/client": "3.9.2",
+    "aws-sdk": "2.1073.0",
     "clsx": "1.1.1",
     "daisyui": "1.25.4",
     "dayjs": "1.10.7",
     "gray-matter": "4.0.3",
     "next": "12.0.10",
-    "next-auth": "4.1.2",
+    "next-auth": "4.2.1",
     "next-mdx-remote": "3.0.8",
     "next-plausible": "3.1.4",
     "nodemailer": "6.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "recharts": "2.1.8",
+    "recharts": "2.1.9",
     "rehype-highlight": "5.0.2",
     "remark-heading-id": "1.0.0",
     "simple-encryptor": "4.0.0",
     "slugify": "1.6.5",
-    "swagger-ui-dist": "4.4.1",
+    "swagger-ui-dist": "4.5.0",
     "ua-parser-js": "1.0.2"
   },
   "devDependencies": {
     "@tailwindcss/typography": "0.5.1",
     "@types/jest": "27.4.0",
     "@types/node": "14.18",
-    "@types/react": "17.0.38",
+    "@types/react": "17.0.39",
     "@types/react-dom": "17.0.11",
     "@types/swagger-ui-dist": "3.30.1",
     "@types/ua-parser-js": "0.7.36",
-    "@typescript-eslint/eslint-plugin": "5.10.2",
+    "@typescript-eslint/eslint-plugin": "5.11.0",
     "autoprefixer": "10.4.2",
     "dpdm": "3.8.0",
     "eslint": "8.8.0",
     "eslint-config-next": "12.0.10",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
-    "jest": "27.4.7",
+    "jest": "27.5.1",
     "jest-mock-extended": "2.0.4",
     "node-mocks-http": "1.11.0",
     "postcss": "8.4.6",
     "prettier": "2.5.1",
     "prettier-plugin-prisma": "3.9.0",
-    "prisma": "3.9.0",
-    "tailwindcss": "3.0.18",
-    "ts-node": "10.4.0",
+    "prisma": "3.9.2",
+    "tailwindcss": "3.0.20",
+    "ts-node": "10.5.0",
     "typescript": "4.5.5"
   }
 }

src/components/Home/Features.tsx

@@ -47,7 +47,7 @@ const FEATURES = [
 ];
 
 export const Features: React.FC = () => (
-  <div className="container py-4 lg:py-16 max-w-3xl">
+  <div className="container max-w-3xl py-4 lg:py-16">
     <h1 className="text-white">
       It's time to stop being <span className="text-primary">blind</span> about your
       <br />
@@ -58,11 +58,11 @@ export const Features: React.FC = () => (
       configuration and no installable host-agents. Works in any environment with no performance
       overhead to your application.
     </h5>
-    <div className="mt-16 grid gap-4 grid-cols-1 md:grid-cols-3">
+    <div className="mt-16 grid grid-cols-1 gap-4 md:grid-cols-3">
       {FEATURES.map(({ icon: Icon, title, content, comingSoon }) => (
-        <div className="card bg-base-100 rounded-lg p-4" key={title}>
+        <div className="card rounded-lg bg-base-100 p-4" key={title}>
           <div className="flex items-center">
-            <Icon className="h-8 w-8 text-primary mr-2" />
+            <Icon className="mr-2 h-8 w-8 text-primary" />
             <h6 className="text-white">{title}</h6>
           </div>
           <p className="mt-2 grow">{content}</p>

src/components/Home/Pricing.tsx

@@ -68,8 +68,8 @@ export const Pricing: React.FC = () => {
         <br />
         No credit card required.
       </h5>
-      <div className="mt-8 card bg-base-100 rounded-lg p-4">
-        <div className="flex flex-col sm:flex-row justify-between">
+      <div className="card mt-8 rounded-lg bg-base-100 p-4">
+        <div className="flex flex-col justify-between sm:flex-row">
           <div className="text-left">
             <h6>Monthly requests</h6>
             <h3 className="font-bold text-primary">{getRequestsDisplay()}</h3>
@@ -89,13 +89,13 @@ export const Pricing: React.FC = () => {
           min={1}
           max={requestOptions.length + 1}
           step={1}
-          className="range range-primary range-lg w-full mt-8 rounded-lg"
+          className="range range-primary range-lg mt-8 w-full rounded-lg"
           onClick={(): void => plausible('pricing-slider-click')}
         />
-        <div className="grid gap-4 grid-cols-1 md:grid-cols-3 mt-8 text-left leading-normal">
+        <div className="mt-8 grid grid-cols-1 gap-4 text-left leading-normal md:grid-cols-3">
           {FEATURES.map((feature) => (
             <p className="flex items-center" key={feature}>
-              <CheckCircleIcon className="h-7 w-7 mr-4 text-success" /> {feature}
+              <CheckCircleIcon className="mr-4 h-7 w-7 text-success" /> {feature}
             </p>
           ))}
         </div>

src/components/Home/Setup.tsx

@@ -26,9 +26,9 @@ export const Setup: React.FC<Props> = ({ snippets }) => {
   const { source } = snippet;
 
   return (
-    <div className="bg-background bg-no-repeat bg-cover">
+    <div className="bg-background bg-cover bg-no-repeat">
       <div className="bg-filter">
-        <div className="container max-w-3xl py-4 lg:py-16 flex flex-col">
+        <div className="container flex max-w-3xl flex-col py-4 lg:py-16">
           <h1 className="text-white">
             Set up in <span className="text-primary">5 minutes</span>
           </h1>
@@ -45,8 +45,8 @@ export const Setup: React.FC<Props> = ({ snippets }) => {
               </li>
             </ul>
           </div>
-          <div className="mt-4 bg-base-100 w-full rounded-lg mockup-code pb-0">
-            <div className="px-4 tabs">
+          <div className="mockup-code mt-4 w-full rounded-lg bg-base-100 pb-0">
+            <div className="tabs px-4">
               {snippets.map(({ name }) => (
                 <p
                   key={name}

src/components/Home/TopSection.tsx

@@ -43,9 +43,9 @@ export const TopSection: React.FC = () => {
   const eventOptions = { location: EVENT_LOCATIONS.PAGE_TOP };
 
   return (
-    <div className="bg-background bg-no-repeat bg-cover">
+    <div className="bg-background bg-cover bg-no-repeat">
       <div className="bg-filter">
-        <div className="container py-4 lg:py-16 grid gap-4 lg:gap-8 grid-cols-1 lg:grid-cols-2">
+        <div className="container grid grid-cols-1 gap-4 py-4 lg:grid-cols-2 lg:gap-8 lg:py-16">
           <div className="text-left">
             <h1 className="text-white">
               <span className="text-primary">API analytics</span>
@@ -54,7 +54,7 @@ export const TopSection: React.FC = () => {
             </h1>
             <h5 className="mt-12 text-white">{DESCRIPTION}</h5>
             <h6 className="mt-12 text-white">Simple integration with any backend</h6>
-            <div className="flex flex-wrap gap-4 mt-8 grayscale">
+            <div className="mt-8 flex flex-wrap gap-4 grayscale">
               {INTEGRATIONS.map(({ name, image }) => (
                 <div key={name}>
                   <Image
@@ -70,7 +70,7 @@ export const TopSection: React.FC = () => {
                 </div>
               ))}
             </div>
-            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:inline-grid mt-8">
+            <div className="mt-8 grid grid-cols-1 gap-4 lg:inline-grid lg:grid-cols-2">
               <Button
                 linkTo={staticRoutes.register}
                 onClick={(): void => plausible('register-click', eventOptions)}
@@ -81,13 +81,13 @@ export const TopSection: React.FC = () => {
               <Button
                 linkTo={staticRoutes.demo}
                 onClick={(): void => plausible('live-demo-click', eventOptions)}
-                className="btn-secondary btn-outline"
+                className="btn-outline btn-secondary"
               >
                 Live demo
               </Button>
             </div>
           </div>
-          <div className="mt-8 lg:mt-0 select-none">
+          <div className="mt-8 select-none lg:mt-0">
             <MockRequestsTimeFrame />
           </div>
         </div>

src/components/Home/Why.tsx

@@ -31,17 +31,17 @@ const REASONS = [
 ];
 
 export const Why: React.FC = () => (
-  <div className="bg-background bg-no-repeat bg-cover">
+  <div className="bg-background bg-cover bg-no-repeat">
     <div className="bg-filter">
-      <div className="container max-w-3xl py-4 lg:py-16 flex flex-col">
+      <div className="container flex max-w-3xl flex-col py-4 lg:py-16">
         <h1 className="text-white">
           Why choose <span className="text-primary">Apilytics</span>?
         </h1>
-        <div className="mt-16 grid gap-4 grid-cols-1 md:grid-cols-3">
+        <div className="mt-16 grid grid-cols-1 gap-4 md:grid-cols-3">
           {REASONS.map(({ title, content }) => (
-            <div className="card bg-base-100 rounded-lg p-4" key={title}>
+            <div className="card rounded-lg bg-base-100 p-4" key={title}>
               <div className="flex items-center">
-                <BadgeCheckIcon className="h-8 w-8 mr-2 text-secondary" />
+                <BadgeCheckIcon className="mr-2 h-8 w-8 text-secondary" />
                 <h6 className="text-white">{title}</h6>
               </div>
               <p className="mt-2 grow">{content}</p>

src/components/dashboard/DashboardCard.tsx

@@ -6,5 +6,5 @@ interface Props {
 }
 
 export const DashboardCard: React.FC<Props> = ({ children }) => (
-  <div className={clsx('bg-base-100 card shadow rounded-lg p-2')}>{children}</div>
+  <div className={clsx('card rounded-lg bg-base-100 p-2 shadow')}>{children}</div>
 );

src/components/dashboard/DashboardOptions.tsx

@@ -60,8 +60,8 @@ export const DashboardOptions: React.FC<Props> = ({ origin: { name, slug }, apil
           className="btn-sm hidden sm:flex"
         />
       )}
-      <div className="flex flex-wrap justify-start items-center gap-4 mt-2 mb-4">
-        <h6 className="text-white -mr-2">{name}</h6>
+      <div className="mt-2 mb-4 flex flex-wrap items-center justify-start gap-4">
+        <h6 className="-mr-2 text-white">{name}</h6>
         {!!apilyticsPackage && <VersionInfo apilyticsPackage={apilyticsPackage} />}
         {selectedMethod && (
           <Button onClick={(): void => setSelectedMethod(undefined)} endIcon={XIcon}>

src/components/dashboard/EndpointMetrics.tsx

@@ -78,14 +78,14 @@ export const EndpointMetrics: React.FC<Props> = ({ data: _data }) => {
   };
 
   const renderNoMetrics = !data.length && (
-    <div className="flex flex-col justify-center items-center py-40">
+    <div className="flex flex-col items-center justify-center py-40">
       <p>{emptyLabel}</p>
     </div>
   );
 
   const renderMetrics = (
     <>
-      <div className="grow flex">
+      <div className="flex grow">
         <VerticalBarChart
           height={truncatedHeight}
           data={truncatedData}
@@ -101,7 +101,7 @@ export const EndpointMetrics: React.FC<Props> = ({ data: _data }) => {
       <div className="flex">
         <Button
           onClick={handleShowAllClick}
-          className="btn-sm btn-ghost"
+          className="btn-ghost btn-sm"
           endIcon={ArrowsExpandIcon}
           fullWidth="mobile"
         >
@@ -113,8 +113,8 @@ export const EndpointMetrics: React.FC<Props> = ({ data: _data }) => {
 
   return (
     <DashboardCard>
-      <div className="flex flex-wrap px-2 gap-4">
-        <p className="text-white mr-auto">Endpoints</p>
+      <div className="flex flex-wrap gap-4 px-2">
+        <p className="mr-auto text-white">Endpoints</p>
         <div className="tabs">
           <p
             className={clsx(
@@ -138,12 +138,12 @@ export const EndpointMetrics: React.FC<Props> = ({ data: _data }) => {
       </div>
       <div className="mt-4">{renderNoMetrics || renderMetrics}</div>
       <Modal name={MODAL_NAMES.endpoints} mobileFullscreen>
-        <div className="overflow-y-auto w-screen sm:w-auto sm:min-w-96">
+        <div className="w-screen overflow-y-auto sm:w-auto sm:min-w-96">
           <div className="flex justify-between p-2">
-            <p className="text-white pl-4">Endpoints</p>
+            <p className="pl-4 text-white">Endpoints</p>
             <ModalCloseButton onClick={handleCloseModal} />
           </div>
-          <div className="tabs px-6 my-2">
+          <div className="tabs my-2 px-6">
             <p
               className={clsx(
                 'tab tab-bordered grow',
@@ -164,7 +164,7 @@ export const EndpointMetrics: React.FC<Props> = ({ data: _data }) => {
             </p>
           </div>
           <div className="overflow-y-auto px-4">
-            <div className="grow flex">
+            <div className="flex grow">
               <VerticalBarChart
                 height={height}
                 data={modalData}

src/components/dashboard/EndpointTooltip.tsx

@@ -24,7 +24,7 @@ export const EndpointTooltip: React.FC<TooltipProps<ValueType, NameType>> = ({
     const red = ((count_red / requests) * 100).toFixed();
 
     return (
-      <div className="bg-base-100 card shadow rounded-lg p-4">
+      <div className="card rounded-lg bg-base-100 p-4 shadow">
         <ul className="list-none">
           <li>
             Path: <span className="font-bold text-white">{name}</span>

src/components/dashboard/PercentileMetrics.tsx

@@ -79,7 +79,7 @@ export const PercentileMetrics: React.FC<Props> = ({ data }) => {
   const height = getHeight(data.length);
 
   const renderNoMetrics = !data.length && (
-    <div className="flex flex-col justify-center items-center py-40">
+    <div className="flex flex-col items-center justify-center py-40">
       <p>{emptyLabel}</p>
     </div>
   );
@@ -98,8 +98,8 @@ export const PercentileMetrics: React.FC<Props> = ({ data }) => {
 
   return (
     <DashboardCard>
-      <div className="flex flex-wrap px-2 gap-4">
-        <p className="text-white mr-auto">Performance metrics</p>
+      <div className="flex flex-wrap gap-4 px-2">
+        <p className="mr-auto text-white">Performance metrics</p>
         <div className="tabs">
           <p
             className={clsx(

src/components/dashboard/StatusCodeMetrics.tsx

@@ -41,7 +41,7 @@ export const StatusCodeMetrics: React.FC<Props> = ({ data: _data }) => {
   };
 
   const renderNoMetrics = !data.length && (
-    <div className="flex flex-col justify-center items-center py-40">
+    <div className="flex flex-col items-center justify-center py-40">
       <p>No status codes available.</p>
     </div>
   );
@@ -52,7 +52,7 @@ export const StatusCodeMetrics: React.FC<Props> = ({ data: _data }) => {
 
   const renderMetrics = (
     <>
-      <div className="grow flex">
+      <div className="flex grow">
         <VerticalBarChart
           height={truncatedHeight}
           data={truncatedData}
@@ -68,7 +68,7 @@ export const StatusCodeMetrics: React.FC<Props> = ({ data: _data }) => {
       <div className="flex">
         <Button
           onClick={handleShowAllClick}
-          className="btn-sm btn-ghost"
+          className="btn-ghost btn-sm"
           endIcon={ArrowsExpandIcon}
           fullWidth="mobile"
         >
@@ -80,18 +80,18 @@ export const StatusCodeMetrics: React.FC<Props> = ({ data: _data }) => {
 
   return (
     <DashboardCard>
-      <div className="flex flex-wrap px-2 gap-4">
-        <p className="text-white mr-auto">Status codes</p>
+      <div className="flex flex-wrap gap-4 px-2">
+        <p className="mr-auto text-white">Status codes</p>
       </div>
-      <div className="mt-4 flex flex-col grow">{renderNoMetrics || renderMetrics}</div>
+      <div className="mt-4 flex grow flex-col">{renderNoMetrics || renderMetrics}</div>
       <Modal name={MODAL_NAMES.statusCodes} mobileFullscreen>
-        <div className="overflow-y-auto w-screen sm:w-auto sm:min-w-96">
+        <div className="w-screen overflow-y-auto sm:w-auto sm:min-w-96">
           <div className="flex justify-between p-2">
-            <p className="text-white pl-4">Status codes</p>
+            <p className="pl-4 text-white">Status codes</p>
             <ModalCloseButton onClick={handleCloseModal} />
           </div>
           <div className="overflow-y-auto px-4">
-            <div className="grow flex">
+            <div className="flex grow">
               <VerticalBarChart
                 height={height}
                 data={data}

src/components/dashboard/TimeFrameAreaChart.tsx

@@ -127,7 +127,7 @@ export const TimeFrameAreaChart: React.FC<Props> = ({ data: _data, dataKey, colo
       }
 
       return (
-        <div className="bg-base-100 card shadow rounded-lg p-4">
+        <div className="card rounded-lg bg-base-100 p-4 shadow">
           <ul className="list-none">
             <li className="text-primary">{dayjs(time).format(format)}</li>
             <li>