update: frontend boilerplate (#9)

* chore: app file rename

* chore: app file rename

* feat: frontend environment variables

* feat: update env.example

* feat: axios instances

* feat: authentication

* feat: add examples

* feat: update PR template

* fix: prettier

* fix: overflow scroll

* fix: .github/PULL_REQUEST_TEMPLATE.md

* feat: add format options

captainhook.json

@@ -2,7 +2,9 @@
   "commit-msg": {
     "enabled": true,
     "actions": [
-      { "action": "\\Webgriffe\\CaptainHook\\PreventCommitCaseSensitiveSameFilename" },
+      {
+        "action": "\\Webgriffe\\CaptainHook\\PreventCommitCaseSensitiveSameFilename"
+      },
       { "action": "\\Ramsey\\CaptainHook\\ValidateConventionalCommit" }
     ]
   },
@@ -21,7 +23,7 @@
       },
       { "action": "composer run-script ecs:fix", "options": [] },
       { "action": "composer run-script rector:fix ", "options": [] },
-      { "action": "npm run format", "options": [] },
+      { "action": "npm run format:check", "options": [] },
       { "action": "npm run lint", "options": [] },
       { "action": "npm run spell-checker:staged", "options": [] }
     ]
@@ -39,7 +41,10 @@
           "regex": "#^(master|main|develop|staging|demo|(feature|test|(bug|hot)fix)(\\/[a-zA-Z0-9]+([-_][a-zA-Z0-9]+)*){1,2}|release\\/[0-9]+(\\.[0-9]+)*(-(alpha|beta|rc)[0-9]*)?)$#"
         }
       },
-      { "action": "\\CaptainHook\\App\\Hook\\Composer\\Action\\CheckLockFile", "options": [] },
+      {
+        "action": "\\CaptainHook\\App\\Hook\\Composer\\Action\\CheckLockFile",
+        "options": []
+      },
       { "action": "composer run-script phpstan", "options": [] },
       { "action": "composer run-script rector", "options": [] },
       { "action": "composer run-script ecs", "options": [] }

resources/js/api/config/config.ts

@@ -1,4 +1,7 @@
-import type { QueryClient } from "@tanstack/react-query";
+import type {
+  InvalidateQueryFilters,
+  QueryClient,
+} from "@tanstack/react-query";
 
 import type { Domain, SubDomains } from "./domains";
 
@@ -20,22 +23,25 @@ type QueryKeySignature<TSubDomains extends string, TParams> = readonly [
  */
 export function invalidateDomains(
   queryClient: QueryClient,
-  ...queries: (Domain | [domain: Domain, id?: string | number | null])[]
+  ...queries: (
+    | Domain
+    | [domain: Domain, id?: string | number | null | object]
+  )[]
 ) {
   queries.forEach((arg) => {
     const [domain, id] = typeof arg === "string" ? [arg] : arg;
-    void queryClient.invalidateQueries([domain, ALL]);
+    void queryClient.invalidateQueries([domain, ALL] as InvalidateQueryFilters);
     if (id !== undefined && id !== null && id !== ALL) {
-      void queryClient.invalidateQueries([domain, id]);
+      void queryClient.invalidateQueries([
+        domain,
+        id,
+      ] as InvalidateQueryFilters);
     }
   });
 
   const subDomainsToInvalidate = queries.map((q) =>
     typeof q === "string" ? q : q[0],
   );
-  console.log(subDomainsToInvalidate);
-
-  console.log("invalidateDomains called with queries: ", queries);
 
   // Here we search all the cache for subdomains and clear those out because we have no way to check
   // if the data that was mutated will affect these endpoints or not
@@ -48,8 +54,7 @@ export function invalidateDomains(
         typeof subDomains === "string" &&
         subDomainsToInvalidate.some((d) => subDomains.split(",").includes(d))
       ) {
-        console.log("Invalidating queryKey:", queryKey);
-        void queryClient.invalidateQueries(queryKey);
+        void queryClient.invalidateQueries(queryKey as InvalidateQueryFilters);
       }
     });
 }
@@ -68,20 +73,12 @@ export function invalidateQuery(
 ) {
   const paramsId = id ?? ALL;
 
-  console.log(
-    "invalidateQuery called with queryName: ",
-    queryName,
-    " and id: ",
-    id,
-  );
-
   queryClient
     .getQueryCache()
     .getAll()
     .forEach(({ queryKey }) => {
       if (queryName === queryKey.at(3) && paramsId === queryKey.at(1)) {
-        console.log("Invalidating queryKey:", queryKey);
-        void queryClient.invalidateQueries(queryKey);
+        void queryClient.invalidateQueries(queryKey as InvalidateQueryFilters);
       }
     });
 }

resources/js/api/config/domains.ts

@@ -1,18 +1,13 @@
 export const DOMAINS = {
   project: "project",
-  permission: "permission",
-  client: "client",
-  assignment: "assignment",
-  employee: "employee",
-  team: "team",
   user: "user",
 } as const;
 export type Domain = keyof typeof DOMAINS;
 
 export type SubDomains<T extends string> = T extends Domain
   ? T
   : T extends `${infer First},${infer Rest}`
-  ? First extends Domain
-    ? `${First},${SubDomains<Rest>}`
-    : never
-  : never;
+    ? First extends Domain
+      ? `${First},${SubDomains<Rest>}`
+      : never
+    : never;

resources/js/modals/SuccessModal.tsx

@@ -0,0 +1,75 @@
+import { Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { CheckIcon } from "@heroicons/react/24/outline";
+
+interface SuccessModalProps {
+  show: boolean;
+  onClose: () => void;
+}
+
+export const SuccessModal = ({ show, onClose }: SuccessModalProps) => {
+  return (
+    <Transition.Root show={show} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+                <div>
+                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+                    <CheckIcon
+                      className="h-6 w-6 text-green-600"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <div className="mt-3 text-center sm:mt-5">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-base font-semibold leading-6 text-gray-900"
+                    >
+                      Payment successful
+                    </Dialog.Title>
+                    <div className="mt-2">
+                      <p className="text-sm text-gray-500">
+                        Some example successful text goes here
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-5 sm:mt-6">
+                  <button
+                    type="button"
+                    className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                    onClick={onClose}
+                  >
+                    Go back to dashboard
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};