chore(web): remove classic code from repository (#1051)

Co-authored-by: airslice <[email protected]>

.github/CODEOWNERS

@@ -5,6 +5,3 @@
 
 /web/                       @airslice @mkumbobeaty
 /web/e2e/                   @keiya01
-/web/src/classic/           @airslice
-/web/src/classic/core/      @keiya01
-/web/src/beta/lib/core/     @keiya01

codecov.yml

@@ -1,11 +1,6 @@
 coverage:
   status:
     project:
-      web-classic:
-        target: auto
-        threshold: 0%
-        flags:
-          - web-classic
       web-beta:
         target: auto
         threshold: 10%
@@ -46,10 +41,6 @@ flags:
     paths:
       - web
     carryforward: true
-  web-classic:
-    paths:
-      - web/src/classic
-    carryforward: true
   web-beta:
     paths:
       - web/src/beta

web/.eslintignore

@@ -4,5 +4,4 @@
 /storybook-static
 !/.storybook
 /.storybook/public
-/src/classic/gql/graphql-client-api.tsx
 /src/services/gql/__gen__

web/.gitignore

@@ -13,3 +13,4 @@ __screenshots__
 /reearth-config.json
 /cesium_ion_token.txt
 .idea/*
+.yarn*

web/.storybook/preview.tsx

@@ -11,9 +11,7 @@ import { withThemeFromJSXProvider } from "@storybook/addon-styling";
 import type { Preview, ReactRenderer } from "@storybook/react";
 import React from "react";
 
-import classicDarkTheme from "../src/classic/theme/reearthTheme/darkTheme"; // temp classic imports
-import classicLightTheme from "../src/classic/theme/reearthTheme/lightTheme"; // temp classic imports
-import { Provider as DndProvider } from "../src/classic/util/use-dnd";
+import { Provider as DndProvider } from "../src/beta/utils/use-dnd";
 import { Provider as I18nProvider } from "../src/services/i18n";
 import { GlobalStyles, darkTheme, lightTheme } from "../src/services/theme";
 
@@ -48,14 +46,8 @@ const preview: Preview = {
   decorators: [
     withThemeFromJSXProvider<ReactRenderer>({
       themes: {
-        light: {
-          classic: classicLightTheme,
-          ...lightTheme,
-        },
-        dark: {
-          classic: classicDarkTheme,
-          ...darkTheme,
-        },
+        light: lightTheme,
+        dark: darkTheme,
       },
       defaultTheme: "dark",
       Provider: ThemeProvider,

web/package.json

@@ -21,9 +21,7 @@
         "format": "eslint --fix .",
         "storybook": "storybook dev -p 9001",
         "storybook:build": "storybook build --quiet -o dist/storybook",
-        "gql": "run-s gql:beta gql:classic",
-        "gql:beta": "graphql-codegen",
-        "gql:classic": "graphql-codegen -c codegen-classic.ts",
+        "gql": "graphql-codegen",
         "i18n": "i18next",
         "gen:doc:plugin": "ts-node -O '{\"module\":\"CommonJS\"}' ./bin/pluginDoc"
     },
@@ -205,4 +203,4 @@
         "uuid": "9.0.1",
         "xstate": "4.38.2"
     }
-}
+}

web/src/classic/components/atoms/Box/index.stories.tsx → web/src/beta/components/Box/index.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, Story } from "@storybook/react";
 import Component, { Props } from ".";
 
 export default {
-  title: "classic/atoms/Box",
+  title: "beta/components/Box",
   component: Component,
 } as Meta;
 

web/src/classic/components/atoms/Box/index.tsx → web/src/beta/components/Box/index.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties } from "react";
 
-import { MetricsSizes, metricsSizes } from "@reearth/classic/theme";
+import { MetricsSizes, metricsSizes } from "@reearth/beta/utils/metrics";
 import { styled } from "@reearth/services/theme";
 
 export type Props = {

web/src/beta/components/Divider/index.tsx

@@ -19,9 +19,7 @@ const StyledDivider = styled.div<{
 }>`
   margin: ${props => (props.margin ? props.margin : "35px")} auto;
   border-bottom: ${props =>
-    props.spaceOnly
-      ? "none"
-      : `1px solid ${props.color ? props.color : props.theme.classic.main.border}`};
+    props.spaceOnly ? "none" : `1px solid ${props.color ? props.color : props.theme.outline.main}`};
 `;
 
 export default Divider;

web/src/beta/components/Text/index.tsx

@@ -43,11 +43,11 @@ const Text: React.FC<Props> = ({
 
   const Typography = useMemo(
     () =>
-      trait && trait in typographyBySize
+      trait && typographyBySize && trait in typographyBySize
         ? typographyBySize[trait]
-        : weight in typographyBySize
-        ? typographyBySize[weight]
-        : typographyBySize[size === "h1" ? "medium" : "regular"],
+        : typographyBySize && weight in typographyBySize
+          ? typographyBySize[weight]
+          : typographyBySize && typographyBySize[size === "h1" ? "medium" : "regular"],
     [trait, size, typographyBySize, weight],
   );
 

web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx

@@ -46,13 +46,6 @@ export const Profile: FC<ProfileProp> = ({
         };
       }),
     },
-    {
-      id: "accountSetting",
-      title: t("Account Settings"),
-      path: `/settings/account`,
-      icon: "user",
-    },
-
     {
       id: "signOut",
       title: t("Log Out"),

web/src/beta/features/Navbar/LeftSection/Profile/index.tsx

@@ -93,7 +93,6 @@ const HeaderProfile: React.FC<Props> = ({
   );
 
   const menuItems: ListItem[] = [
-    { text: t("Account Settings"), linkTo: "/settings/account" },
     {
       text: t("Workspaces"),
       items: [
@@ -104,7 +103,6 @@ const HeaderProfile: React.FC<Props> = ({
             onClick: () => w.id && handleWorkspaceChange(w.id),
           };
         }),
-        { text: t("Manage Workspaces"), icon: "workspaces", linkTo: "/settings/workspaces" },
         { text: t("New Workspace"), icon: "workspaceAdd", onClick: openModal },
       ],
     },

web/src/beta/features/Navbar/Menus/ProjectMenu/index.tsx

@@ -52,7 +52,7 @@ const ProjectMenu: React.FC<Props> = ({ currentProject, workspaceId }) => {
     { breakpoint: true },
     {
       text: t("Manage projects"),
-      linkTo: `/settings/workspaces/${workspaceId}/projects`,
+      linkTo: `/dashboard/${workspaceId}/`,
     },
   ];
 

web/src/beta/features/Navbar/hooks.ts

@@ -51,7 +51,7 @@ export default ({ projectId, workspaceId }: { projectId?: string; workspaceId?:
             id: project.id,
             name: project.name,
             sceneId: project.scene?.id,
-            projectType: project.coreSupport ? "beta" : "classic",
+            projectType: "beta",
           }
         : undefined,
     [project],

web/src/beta/features/ProjectSettings/hooks.ts

@@ -15,15 +15,12 @@ import {
 } from "./innerPages/PublicSettings";
 import { StorySettingsType } from "./innerPages/StorySettings";
 
-import { projectSettingsTab } from ".";
-
 type Props = {
   projectId: string;
-  tab?: projectSettingsTab;
   subId?: string;
 };
 
-export default ({ projectId, tab }: Props) => {
+export default ({ projectId }: Props) => {
   const navigate = useNavigate();
 
   const {
@@ -53,7 +50,7 @@ export default ({ projectId, tab }: Props) => {
     async (archived: boolean) => {
       const { status } = await useArchiveProject({ projectId, archived });
       if (status === "success") {
-        navigate(`/settings/workspaces/${workspaceId}/projects`);
+        navigate(`/dashboard/${workspaceId}/`);
       }
     },
     [workspaceId, projectId, useArchiveProject, navigate],
@@ -62,7 +59,7 @@ export default ({ projectId, tab }: Props) => {
   const handleDeleteProject = useCallback(async () => {
     const { status } = await useDeleteProject({ projectId });
     if (status === "success") {
-      navigate(`/settings/workspaces/${workspaceId}/projects`);
+      navigate(`/dashboard/${workspaceId}/`);
     }
   }, [workspaceId, projectId, useDeleteProject, navigate]);
 
@@ -134,29 +131,6 @@ export default ({ projectId, tab }: Props) => {
     [],
   );
 
-  // Redirection for classic projects
-  useEffect(() => {
-    if (!project) return;
-    if (!project.coreSupport) {
-      switch (tab) {
-        case "general":
-          navigate(`/settings/projects/${projectId}`);
-          break;
-        case "public":
-          navigate(`/settings/projects/${projectId}/public`);
-          break;
-        case "asset":
-          navigate(`/settings/workspaces/${workspaceId}/asset`);
-          break;
-        case "plugins":
-          navigate(`/settings/projects/${projectId}/plugins`);
-          break;
-        default:
-          navigate(`/settings/projects/${projectId}`);
-      }
-    }
-  }, [project, projectId, tab, workspaceId, navigate]);
-
   return {
     sceneId: scene?.id,
     workspaceId,

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

@@ -55,7 +55,6 @@ const ProjectSettings: React.FC<Props> = ({ projectId, tab, subId }) => {
     handleUpdateStoryAlias,
   } = useHooks({
     projectId,
-    tab,
     subId,
   });
 

web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginAccordion/PluginAccordionItem/itemBody.tsx

@@ -8,11 +8,12 @@ export type Props = {
 const PluginAccordionItemBody: React.FC<Props> = ({ children }) => {
   const theme = useTheme();
   const markdownTypographyStyle = {
-    color: theme.classic.text.default,
+    color: theme.content.main,
   };
+
   return (
     <Wrapper>
-      <Markdown backgroundColor={theme.classic.pluginList.bg} styles={markdownTypographyStyle}>
+      <Markdown backgroundColor={theme.bg.base} styles={markdownTypographyStyle}>
         {children}
       </Markdown>
     </Wrapper>

web/src/classic/components/molecules/RootPage/index.tsx → web/src/beta/features/RootPage/PageWrapper/index.tsx

@@ -1,16 +1,18 @@
 import React from "react";
 import { RingLoader } from "react-spinners";
 
-import Flex from "@reearth/classic/components/atoms/Flex";
-import Icon from "@reearth/classic/components/atoms/Icon";
+import Flex from "@reearth/beta/components/Flex";
+import Icon from "@reearth/beta/components/Icon";
 import { styled, useTheme } from "@reearth/services/theme";
+import { brandBlue, brandRed } from "@reearth/services/theme/reearthTheme/common/colors";
 
 export type Props = {
   loading?: boolean;
 };
 
 const RootPage: React.FC<Props> = ({ loading }) => {
   const theme = useTheme();
+
   return (
     <Wrapper
       justify="center"
@@ -23,16 +25,15 @@ const RootPage: React.FC<Props> = ({ loading }) => {
       ) : (
         <Icon icon="logo" size={200} />
       )}
-      {loading && <RingLoader size={35} color={theme.classic.main.strongText} />}
+      {loading && <RingLoader size={35} color={theme.primary.strong} />}
     </Wrapper>
   );
 };
 
-const Wrapper = styled(Flex)<{ bg?: string }>`
+const Wrapper = styled(Flex) <{ bg?: string }>`
   height: 100%;
-  background: ${({ theme, bg }) =>
-    bg ||
-    `linear-gradient(70deg, ${theme.classic.main.brandBlue} 10%, ${theme.classic.main.brandRed} 60%, ${theme.classic.main.brandBlue} 90%)`};
+  background: ${({ bg }) =>
+    bg || `linear-gradient(70deg, ${brandBlue} 10%, ${brandRed} 60%, ${brandBlue} 90%)`};
 `;
 
 export default RootPage;

web/src/classic/components/organisms/Authentication/RootPage/hooks.ts → web/src/beta/features/RootPage/hooks.ts

@@ -2,7 +2,7 @@ import axios from "axios";
 import { useCallback, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { useGetTeamsQuery } from "@reearth/classic/gql";
+import { useGetTeamsQuery } from "@reearth/services/api/teams";
 import { useAuth, useCleanUrl } from "@reearth/services/auth";
 import { useT } from "@reearth/services/i18n";
 import { useWorkspace, useNotification, useUserId } from "@reearth/services/state";

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

@@ -0,0 +1,14 @@
+import React from "react";
+
+import Loading from "@reearth/beta/components/Loading";
+import PageWrapper from "@reearth/beta/features/RootPage/PageWrapper";
+
+import useHooks from "./hooks";
+
+const RootPage: React.FC = () => {
+  const { isLoading, isAuthenticated, error } = useHooks();
+
+  return isLoading ? <Loading /> : !isAuthenticated ? <PageWrapper loading={!error} /> : null;
+};
+
+export default RootPage;

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

@@ -0,0 +1,11 @@
+import React from "react";
+
+import Text from "@reearth/beta/components/Text";
+
+export type Props = {
+  path?: string;
+};
+
+const AccountPage: React.FC<Props> = () => <Text size="h4">Account page</Text>;
+
+export default AccountPage;