refactor(web): add initial ui translations for ja (#1215)

web/src/beta/features/Dashboard/ContentsContainer/Projects/ProjectCreatorModal.tsx

@@ -59,10 +59,10 @@ const ProjectCreatorModal: FC<ProjectCreatorModalProps> = ({
         onCancel={onClose}
         actions={
           <>
-            <Button onClick={onClose} size="normal" title="Cancel" />
+            <Button onClick={onClose} size="normal" title={t("Cancel")} />
             <Button
               size="normal"
-              title="Apply"
+              title={t("Apply")}
               appearance="primary"
               onClick={onSubmit}
               disabled={!projectName}

web/src/beta/features/Dashboard/index.tsx

@@ -1,6 +1,7 @@
 import { DEFAULT_SIDEBAR_WIDTH } from "@reearth/beta/ui/components/Sidebar";
+import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
-import { FC } from "react";
+import { FC, useMemo } from "react";
 
 import CursorStatus from "../CursorStatus";
 
@@ -13,26 +14,48 @@ export type DashboardProps = {
   workspaceId?: string;
 };
 
-export const topTabItems: Omit<TabItems[], "active"> = [
-  { id: "projects", text: "Projects", icon: "grid" },
-  { id: "asset", text: "Assets", icon: "file" },
-  { id: "members", text: "Members", icon: "users" },
-  { id: "bin", text: "Recycle bin", icon: "trash" }
-];
+const Dashboard: FC<DashboardProps> = ({ workspaceId }) => {
+  const t = useT();
+  const topTabItems: Omit<TabItems[], "active"> = useMemo(
+    () => [
+      { id: "projects", text: t("Projects"), icon: "grid" },
+      { id: "asset", text: t("Assets"), icon: "file" },
+      { id: "members", text: t("Members"), icon: "users" },
+      { id: "bin", text: t("Recycle bin"), icon: "trash" }
+    ],
+    [t]
+  );
 
-export const bottomTabsItems: Omit<TabItems[], "active"> = [
-  {
-    id: "plugin",
-    text: "Plugin Playground",
-    icon: "puzzlePiece",
-    disabled: true
-  },
-  { id: "documentation", text: "Documentation", icon: "book", disabled: true },
-  { id: "community", text: "Community", icon: "usersFour", disabled: true },
-  { id: "help", text: "Help & Support", icon: "question", disabled: true }
-];
+  const bottomTabsItems: Omit<TabItems[], "active"> = useMemo(
+    () => [
+      {
+        id: "plugin",
+        text: t("Plugin Playground"),
+        icon: "puzzlePiece",
+        disabled: true
+      },
+      {
+        id: "documentation",
+        text: t("Documentation"),
+        icon: "book",
+        disabled: true
+      },
+      {
+        id: "community",
+        text: t("Community"),
+        icon: "usersFour",
+        disabled: true
+      },
+      {
+        id: "help",
+        text: t("Help & Support"),
+        icon: "question",
+        disabled: true
+      }
+    ],
+    [t]
+  );
 
-const Dashboard: FC<DashboardProps> = ({ workspaceId }) => {
   const {
     isPersonal,
     currentWorkspace,

web/src/beta/features/Editor/Map/LayersPanel/index.tsx

@@ -86,7 +86,12 @@ const LayersPanel: FC = () => {
       <Wrapper>
         <PopupMenu
           label={
-            <Button icon="plus" title="New Layer" size="small" extendWidth />
+            <Button
+              icon="plus"
+              title={t("New Layer")}
+              size="small"
+              extendWidth
+            />
           }
           extendTriggerWidth
           placement="bottom-end"

web/src/beta/features/Editor/Story/PagesPanel/index.tsx

@@ -1,5 +1,6 @@
 import { Button, DragAndDropList } from "@reearth/beta/lib/reearth-ui";
 import { Panel, PanelProps } from "@reearth/beta/ui/layout";
+import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import { FC, useCallback, useEffect, useMemo, useState } from "react";
 
@@ -65,6 +66,8 @@ const PagesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
     setStoryPageitems(storyPages ?? []);
   }, [storyPages]);
 
+  const t = useT();
+
   return (
     <Panel
       title="Pages"
@@ -77,7 +80,7 @@ const PagesPanel: FC<Props> = ({ showCollapseArea, areaRef }) => {
       <ButtonWrapper>
         <Button
           icon="plus"
-          title="New Page"
+          title={t("New Page")}
           size="small"
           extendWidth
           onClick={() => handleStoryPageAdd(false)}

web/src/beta/features/Editor/Widgets/WidgetManagerPanel/Action.tsx

@@ -5,6 +5,7 @@ import {
   PopupMenuItem
 } from "@reearth/beta/lib/reearth-ui";
 import { InstallableWidget } from "@reearth/services/api/widgetsApi/utils";
+import { useT } from "@reearth/services/i18n";
 import { FC, useCallback, useMemo, useState } from "react";
 
 type ActionAreaProps = {
@@ -39,12 +40,14 @@ const ActionArea: FC<ActionAreaProps> = ({
     [installableWidgets, handleWidgetAdd]
   );
 
+  const t = useT();
+
   return (
     <PopupMenu
       label={
         <Button
           icon="folderSimplePlus"
-          title="Add Widget"
+          title={t("Add Widget")}
           size="small"
           extendWidth
           onClick={() => setOpen(!open)}

web/src/beta/features/Editor/hooks/useScene.ts

@@ -1,9 +1,11 @@
 import { useSceneFetcher } from "@reearth/services/api";
 import { convert } from "@reearth/services/api/propertyApi/utils";
+import { useLang } from "@reearth/services/i18n";
 import { useState, useCallback, useMemo } from "react";
 
 type SceneProps = {
   sceneId?: string;
+  lang?: string;
 };
 
 export default function ({ sceneId }: SceneProps) {
@@ -12,7 +14,9 @@ export default function ({ sceneId }: SceneProps) {
     string | undefined
   >(undefined);
 
-  const { scene } = useSceneQuery({ sceneId });
+  const lang = useLang();
+
+  const { scene } = useSceneQuery({ sceneId, lang });
   const sceneSettings = useMemo(
     () =>
       convert(scene?.property)?.filter(

web/src/beta/features/ProjectSettings/index.tsx

@@ -19,22 +19,11 @@ import PluginSettings from "./innerPages/PluginSettings";
 import PublicSettings from "./innerPages/PublicSettings";
 import StorySettings from "./innerPages/StorySettings";
 
-export const projectSettingTabs = [
-  { id: "general", text: "General", icon: "setting" },
-  { id: "story", text: "Story", icon: "sidebar" },
-  { id: "public", text: "Public", icon: "paperPlaneTilt" },
-  { id: "plugins", text: "Plugin", icon: "puzzlePiece" }
-] as const;
-
-export type projectSettingsTab = (typeof projectSettingTabs)[number]["id"];
-
-export function isProjectSettingTab(tab: string): tab is projectSettingsTab {
-  return projectSettingTabs.map((f) => f.id).includes(tab as never);
-}
+export type ProjectSettingsTab = "general" | "story" | "public" | "plugins";
 
 type Props = {
   projectId: string;
-  tab?: projectSettingsTab;
+  tab?: ProjectSettingsTab;
   subId?: string;
 };
 
@@ -64,13 +53,32 @@ const ProjectSettings: React.FC<Props> = ({ projectId, tab, subId }) => {
   });
 
   const tabs = useMemo(
-    () =>
-      projectSettingTabs.map((tab) => ({
-        id: tab.id,
-        icon: tab.icon,
-        text: t(tab.text),
-        path: `/settings/projects/${projectId}/${tab.id === "general" ? "" : tab.id}`
-      })),
+    () => [
+      {
+        id: "general",
+        text: t("General"),
+        icon: "setting" as const,
+        path: `/settings/projects/${projectId}/`
+      },
+      {
+        id: "story",
+        text: t("Story"),
+        icon: "sidebar" as const,
+        path: `/settings/projects/${projectId}/story`
+      },
+      {
+        id: "public",
+        text: t("Public"),
+        icon: "paperPlaneTilt" as const,
+        path: `/settings/projects/${projectId}/public`
+      },
+      {
+        id: "plugins",
+        text: t("Plugin"),
+        icon: "puzzlePiece" as const,
+        path: `/settings/projects/${projectId}/plugins`
+      }
+    ],
     [projectId, t]
   );
 

web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx

@@ -95,7 +95,7 @@ const PublicSettings: React.FC<Props> = ({
       },
       ...stories.map((s) => ({
         id: s.id,
-        title: (!s.title || s.title) === "Default" ? t("Story") : s.title,
+        title: !s.title || s.title === "Default" ? t("Story") : s.title,
         icon: "sidebar" as const,
         path: `/settings/projects/${project.id}/public/${s.id}`,
         active: selectedTab === s.id

web/src/beta/pages/ProjectSettingsPage/index.tsx

@@ -1,6 +1,6 @@
 import NotFound from "@reearth/beta/features/NotFound";
 import ProjectSettings, {
-  isProjectSettingTab
+  ProjectSettingsTab
 } from "@reearth/beta/features/ProjectSettings";
 import Page from "@reearth/beta/pages/Page";
 import { FC, useMemo } from "react";
@@ -13,9 +13,15 @@ const ProjectSettingsPage: FC = () => {
     subId?: string;
   }>();
 
-  const namedTab = useMemo(() => tab ?? "general", [tab]);
+  const namedTab: ProjectSettingsTab = useMemo(
+    () =>
+      tab === "public" || tab === "story" || tab === "plugins"
+        ? tab
+        : "general",
+    [tab]
+  );
 
-  return !projectId || !isProjectSettingTab(namedTab) ? (
+  return !projectId ? (
     <NotFound />
   ) : (
     <Page

web/src/beta/ui/components/Sidebar/index.tsx

@@ -113,7 +113,7 @@ export const SidebarVersion: FC = () => {
   return (
     <Version>
       <Typography size="body" color={theme.content.weak}>
-        {t(`Version ${__APP_VERSION__}`)}
+        {`${t(`Version`)} ${__APP_VERSION__}`}
       </Typography>
     </Version>
   );

web/src/beta/ui/fields/AssetField/index.tsx

@@ -98,14 +98,14 @@ const AssetField: FC<AssetFieldProps> = ({
             <Button
               icon={"image"}
               size="small"
-              title="Choose"
+              title={t("Choose")}
               onClick={handleClick}
               extendWidth
             />
             <Button
               icon={"uploadSimple"}
               size="small"
-              title="Upload"
+              title={t("Upload")}
               onClick={handleFileUpload}
               extendWidth
             />

web/src/services/api/infoboxApi/blocks.ts

@@ -92,7 +92,7 @@ export default () => {
       }
       setNotification({
         type: "success",
-        text: t("Successfullly created a block!")
+        text: t("Successfully created a block!")
       });
 
       return { data, status: "success" };

web/src/services/api/storytellingApi/blocks.ts

@@ -116,7 +116,7 @@ export default () => {
       }
       setNotification({
         type: "success",
-        text: t("Successfullly created a block!")
+        text: t("Successfully created a block!")
       });
 
       return { data, status: "success" };

web/src/services/api/storytellingApi/pages.ts

@@ -53,7 +53,7 @@ export default () => {
       }
       setNotification({
         type: "success",
-        text: t("Successfullly created a page!")
+        text: t("Successfully created a page!")
       });
 
       return { data, status: "success" };
@@ -140,7 +140,7 @@ export default () => {
       }
       setNotification({
         type: "success",
-        text: t("Successfullly updated a page!")
+        text: t("Successfully updated a page!")
       });
 
       return { data, status: "success" };