feat: localisation and multi-lang support (#95)

* feat: setup localisation with lingui

* Fix hydration and locale issues

* Add missing translations and tweak selector styling

* Extend language support

* Update lang support

* Extend lang support

* Fix build and add dyanmic imports

apps/web/src/views/members/components/DeleteMemberConfirmation.tsx

@@ -1,3 +1,6 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+
 import Button from "~/components/Button";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
@@ -21,8 +24,8 @@ export function DeleteMemberConfirmation() {
     },
     onError: () => {
       showPopup({
-        header: "Unable to remove member",
-        message: "Please try again later, or contact customer support.",
+        header: t`Unable to remove member`,
+        message: t`Please try again later, or contact customer support.`,
         icon: "error",
       });
       closeModal();
@@ -41,18 +44,18 @@ export function DeleteMemberConfirmation() {
     <div className="p-5">
       <div className="flex w-full flex-col justify-between pb-4">
         <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
-          {`Are you sure want to remove ${entityLabel}?`}
+          <Trans>Are you sure want to remove {entityLabel}?</Trans>
         </h2>
         <p className="text-sm font-medium text-light-900 dark:text-dark-900">
-          {"They won't be able to access this workspace."}
+          {t`They won't be able to access this workspace.`}
         </p>
       </div>
       <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
         <Button onClick={() => closeModal()} variant="secondary">
-          Cancel
+          {t`Cancel`}
         </Button>
         <Button onClick={handleDeleteMember} isLoading={deleteMember.isPending}>
-          Remove
+          {t`Remove`}
         </Button>
       </div>
     </div>

apps/web/src/views/members/components/InviteMemberForm.tsx

@@ -1,3 +1,4 @@
+import { t } from "@lingui/core/macro";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { HiXMark } from "react-icons/hi2";
@@ -46,7 +47,7 @@ export function InviteMemberForm() {
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="px-5 pt-5">
         <div className="text-neutral-9000 flex w-full items-center justify-between pb-4 dark:text-dark-1000">
-          <h2 className="text-sm font-bold">Add member</h2>
+          <h2 className="text-sm font-bold">{t`Add member`}</h2>
           <button
             type="button"
             className="hover:bg-li ght-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
@@ -60,7 +61,7 @@ export function InviteMemberForm() {
         </div>
         <Input
           id="email"
-          placeholder="Email"
+          placeholder={t`Email`}
           {...register("email", { required: true })}
           onKeyDown={async (e) => {
             if (e.key === "Enter") {
@@ -78,7 +79,7 @@ export function InviteMemberForm() {
             isLoading={createBoard.isPending}
             className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
           >
-            Invite member
+            {t`Invite member`}
           </Button>
         </div>
       </div>

apps/web/src/views/members/index.tsx

@@ -1,3 +1,4 @@
+import { t } from "@lingui/core/macro";
 import { HiEllipsisHorizontal, HiOutlinePlusSmall } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
 
@@ -103,7 +104,7 @@ export default function MembersPage() {
               </span>
               {memberStatus === "invited" && (
                 <span className="ml-2 inline-flex items-center rounded-md bg-gray-500/10 px-1.5 py-0.5 text-[11px] font-medium text-gray-400 ring-1 ring-inset ring-gray-500/20">
-                  Pending
+                  {t`Pending`}
                 </span>
               )}
             </div>
@@ -116,7 +117,7 @@ export default function MembersPage() {
               <Dropdown
                 items={[
                   {
-                    label: "Remove member",
+                    label: t`Remove member`,
                     action: () =>
                       openModal(
                         "REMOVE_MEMBER",
@@ -140,11 +141,11 @@ export default function MembersPage() {
 
   return (
     <>
-      <PageHead title={`Members | ${workspace.name ?? "Workspace"}`} />
+      <PageHead title={t`Members | ${workspace.name ?? "Workspace"}`} />
       <div className="m-auto max-w-[1600px] px-28 py-12">
         <div className="mb-8 flex w-full justify-between">
           <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
-            Members
+            {t`Members`}
           </h1>
           <div className="flex">
             <Button
@@ -152,7 +153,7 @@ export default function MembersPage() {
               iconLeft={<HiOutlinePlusSmall className="h-4 w-4" />}
               disabled={workspace.role !== "admin"}
             >
-              Invite
+              {t`Invite`}
             </Button>
           </div>
         </div>
@@ -168,13 +169,13 @@ export default function MembersPage() {
                         scope="col"
                         className="w-[65%] rounded-tl-lg py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-900 dark:text-dark-900 sm:pl-6"
                       >
-                        User
+                        {t`User`}
                       </th>
                       <th
                         scope="col"
                         className="w-[35%] rounded-tr-lg px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
                       >
-                        Role
+                        {t`Role`}
                       </th>
                     </tr>
                   </thead>