shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Henry
2025-06-25 21:30:24 +01:00
committed by GitHub
parent 014fdbb7d8
commit dd061c6d00
79 changed files with 11822 additions and 883 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/web/src/views/boards/components/BoardsList.tsx
View File

@@ -1,4 +1,5 @@
import Link from "next/link";
import { t } from "@lingui/core/macro";
import { HiOutlineRectangleStack } from "react-icons/hi2";
import Button from "~/components/Button";
@@ -18,7 +19,7 @@ export function BoardsList() {
if (isLoading)
return (
<div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xxl:grid-cols-7">
<div className="xxl:grid-cols-7 grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
<div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
<div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
@@ -31,13 +32,15 @@ export function BoardsList() {
<div className="flex flex-col items-center">
<HiOutlineRectangleStack className="h-10 w-10 text-light-800 dark:text-dark-800" />
<p className="mb-2 mt-4 text-[14px] font-bold text-light-1000 dark:text-dark-950">
No boards
{t`No boards`}
</p>
<p className="text-[14px] text-light-900 dark:text-dark-900">
Get started by creating a new board
{t`Get started by creating a new board`}
</p>
</div>
<Button onClick={() => openModal("NEW_BOARD")}>Create new board</Button>
<Button onClick={() => openModal("NEW_BOARD")}>
{t`Create new board`}
</Button>
</div>
);

29
apps/web/src/views/boards/components/ImportBoardsForm.tsx
View File

@@ -1,5 +1,7 @@
import Link from "next/link";
import { Listbox, Transition } from "@headlessui/react";
import { t } from "@lingui/core/macro";
import { Plural, Trans } from "@lingui/react/macro";
import { Fragment, useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { FaTrello } from "react-icons/fa";
@@ -152,7 +154,7 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
!hasIntegrations ? <HiMiniArrowTopRightOnSquare /> : undefined
}
>
{hasIntegrations ? "Select source" : "Connect Trello"}
{hasIntegrations ? t`Select source` : t`Connect Trello`}
</Button>
</div>
</div>
@@ -186,8 +188,8 @@ const ImportTrello: React.FC = () => {
const importBoards = api.import.trello.importBoards.useMutation({
onSuccess: async () => {
showPopup({
header: "Import complete",
message: "Your boards have been imported.",
header: t`Import complete`,
message: t`Your boards have been imported.`,
icon: "success",
});
try {
@@ -199,8 +201,8 @@ const ImportTrello: React.FC = () => {
},
onError: () => {
showPopup({
header: "Import failed",
message: "Please try again later, or contact customer support.",
header: t`Import failed`,
message: t`Please try again later, or contact customer support.`,
icon: "error",
});
},
@@ -211,6 +213,8 @@ const ImportTrello: React.FC = () => {
value: watch(board.id),
}));
const boardCount = boardWatchers?.filter((w) => w.value === true).length || 0;
const onSubmitBoards = (values: Record<string, boolean>) => {
const boardIds = Object.keys(values).filter((key) => values[key] === true);
@@ -235,7 +239,7 @@ const ImportTrello: React.FC = () => {
return (
<div className="flex h-full w-full items-center justify-center">
<p className="text-sm text-neutral-500 dark:text-dark-900">
No boards found
{t`No boards found`}
</p>
</div>
);
@@ -267,7 +271,7 @@ const ImportTrello: React.FC = () => {
<div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
<Toggle
label="Select all"
label={t`Select all`}
isChecked={!!isSelectAllEnabled}
onChange={() => {
const newState = !isSelectAllEnabled;
@@ -292,8 +296,13 @@ const ImportTrello: React.FC = () => {
)
}
>
Import boards (
{boardWatchers?.filter((w) => w.value === true).length || 0})
<Trans>
<Plural
value={boardCount}
one={`Import board (1)`}
other={`Import boards (${boardCount})`}
/>
</Trans>
</Button>
</div>
</div>
@@ -310,7 +319,7 @@ export function ImportBoardsForm() {
<div className="flex w-full items-center justify-between px-5 pb-4 pt-5">
<div className="flex items-center">
<h2 className="text-sm font-medium text-neutral-900 dark:text-dark-1000">
New import
{t`New import`}
</h2>
<Link
href="https://docs.kan.bn/imports/trello"

7
apps/web/src/views/boards/components/NewBoardForm.tsx
View File

@@ -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";
@@ -45,7 +46,7 @@ export function NewBoardForm() {
<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">New board</h2>
<h2 className="text-sm font-bold">{t`New board`}</h2>
<button
type="button"
className="hover:bg-li ght-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
@@ -59,7 +60,7 @@ export function NewBoardForm() {
</div>
<Input
id="name"
placeholder="Name"
placeholder={t`Name`}
{...register("name", { required: true })}
onKeyDown={async (e) => {
if (e.key === "Enter") {
@@ -73,7 +74,7 @@ export function NewBoardForm() {
<div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
<div>
<Button type="submit" isLoading={createBoard.isPending}>
Create board
{t`Create board`}
</Button>
</div>
</div>