Merge branch 'main' into feat/custom-shaders

.github/renovate.json

@@ -1,58 +1,6 @@
 {
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
   "extends": [
-    "config:base",
-    ":semanticCommits",
-    ":semanticCommitScopeDisabled",
-    ":maintainLockFilesWeekly",
-    ":enableVulnerabilityAlertsWithLabel(security)"
-  ],
-  "postUpdateOptions": [
-    "gomodTidy",
-    "gomodUpdateImportPaths"
-  ],
-  "packageRules": [
-    {
-      "enabledManagers": [
-        "gomod"
-      ],
-      "matchPackagePatterns": [
-        "*"
-      ],
-      "groupName": "dependencies",
-      "groupSlug": "gomod",
-      "semanticCommitType": "chore",
-      "schedule": [
-        "before 3:00 am on the 4th day of the month"
-      ]
-    },
-    {
-      "enabledManagers": [
-        "dockerfile",
-        "docker-compose"
-      ],
-      "matchPackagePatterns": [
-        "*"
-      ],
-      "groupName": "docker dependencies",
-      "groupSlug": "docker",
-      "semanticCommitType": "chore",
-      "schedule": [
-        "before 3:00 am on the 4th day of the month"
-      ]
-    },
-    {
-      "enabledManagers": [
-        "github-actions"
-      ],
-      "matchPackagePatterns": [
-        "*"
-      ],
-      "groupName": "github actions dependencies",
-      "groupSlug": "github-actions",
-      "semanticCommitType": "ci",
-      "schedule": [
-        "before 3:00 am on the 4th day of the month"
-      ]
-    }
+    "github>reearth/renovate-config"
   ]
 }

server/go.mod

@@ -5,7 +5,6 @@ require (
 	cloud.google.com/go/storage v1.22.1
 	github.com/99designs/gqlgen v0.17.12
 	github.com/GoogleCloudPlatform/opentelemetry-operations-go/exporter/trace v1.8.3
-	github.com/auth0/go-jwt-middleware/v2 v2.0.1
 	github.com/avast/retry-go/v4 v4.0.4
 	github.com/aws/aws-sdk-go-v2 v1.18.0
 	github.com/aws/aws-sdk-go-v2/config v1.18.25
@@ -67,6 +66,7 @@ require (
 	github.com/alecthomas/template v0.0.0-20190718012654-fb15b899a751 // indirect
 	github.com/alecthomas/units v0.0.0-20210927113745-59d0afb8317a // indirect
 	github.com/andybalholm/brotli v1.0.2 // indirect
+	github.com/auth0/go-jwt-middleware/v2 v2.0.1 // indirect
 	github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.4.10 // indirect
 	github.com/aws/aws-sdk-go-v2/credentials v1.13.24 // indirect
 	github.com/aws/aws-sdk-go-v2/feature/ec2/imds v1.13.3 // indirect

web/src/beta/components/Icon/icons.ts

@@ -18,6 +18,7 @@ import ArrowRight from "./Icons/arrowRight.svg";
 import ArrowLongLeft from "./Icons/arrowLongLeft.svg";
 import ArrowLongRight from "./Icons/arrowLongRight.svg";
 import ArrowDown from "./Icons/arrowDown.svg";
+import ArrowToggle from "./Icons/arrowToggle.svg";
 
 // Indicator
 import Crosshair from "./Icons/crosshair.svg";
@@ -45,6 +46,10 @@ import Logout from "./Icons/logout.svg";
 import WorkspaceAdd from "./Icons/workspaceAdd.svg";
 import Workspaces from "./Icons/workspaces.svg";
 
+// Square
+import Square from "./Icons/square.svg";
+import TwoRectangle from "./Icons/two-rectangle.svg";
+
 export default {
   file: File,
   dl: InfoTable,
@@ -60,13 +65,16 @@ export default {
   arrowLongLeft: ArrowLongLeft,
   arrowLongRight: ArrowLongRight,
   arrowDown: ArrowDown,
+  arrowToggle: ArrowToggle,
   cancel: Cancel,
   crosshair: Crosshair,
   plusSquare: PlusSquare,
   ellipse: Ellipse,
   playRight: PlayRight,
   playLeft: PlayLeft,
+  square: Square,
   timeline: Timeline,
+  twoRectangle: TwoRectangle,
   actionbutton: ActionButton,
   dashboard: Dashboard,
   help: Help,

web/src/beta/components/SidePanelSectionField/index.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import Component from ".";
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Component>;
+
+export const Default: Story = {
+  args: {
+    title: "Title",
+    children: <p>Item</p>,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    title: "Title",
+  },
+};

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

@@ -0,0 +1,55 @@
+import { useState, ReactNode } from "react";
+
+import { styled, useTheme } from "@reearth/services/theme";
+
+import Icon from "../Icon";
+import Text from "../Text";
+
+const SidePanelSectionField: React.FC<{
+  title: string;
+  children?: ReactNode;
+}> = ({ title, children }) => {
+  const theme = useTheme();
+  const [opened, setOpened] = useState(false);
+
+  return (
+    <Field>
+      <Header onClick={() => setOpened(!opened)}>
+        <Text
+          size="footnote"
+          color={theme.general.content.strong}
+          otherProperties={{ height: "16px" }}>
+          {title}
+        </Text>
+        <ArrowIcon
+          icon="arrowToggle"
+          size={12}
+          color={theme.general.content.main}
+          opened={opened}
+        />
+      </Header>
+      {opened && children}
+    </Field>
+  );
+};
+
+const Field = styled.div`
+  box-sizing: border-box;
+
+  border-bottom: 1px solid ${props => props.theme.general.bg.weak};
+`;
+const Header = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+
+  height: 32px;
+  cursor: pointer;
+`;
+const ArrowIcon = styled(Icon)<{ opened: boolean }>`
+  transform: rotate(${props => (props.opened ? 90 : 180)}deg);
+`;
+
+export default SidePanelSectionField;

web/src/beta/components/StorytellingPageSectionItem/index.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import StorytellingPageSectionItem from ".";
+
+export default {
+  component: StorytellingPageSectionItem,
+} as Meta;
+
+type Story = StoryObj<typeof StorytellingPageSectionItem>;
+
+export const Default: Story = {
+  args: {
+    icon: "square",
+    title: "New Page",
+    index: 1,
+    active: false,
+  },
+};
+
+export const LongText: Story = {
+  args: {
+    icon: "square",
+    title:
+      "gashjdjahasdasdasdasdasdjjashdjkashdjkahdjkhaskjdhasdasdasdasddfggjsdhasjkdhjkashdkjahskjdhakjshdkahskjdakjshdkjahsdkjhajksdhakjhsdkjhaksjhdakjhsdkjhakjsdhakjhsdkjsadasdasdahskdjhasdasdasdasdasdasdakjsdhksadasd",
+    index: 1,
+    active: false,
+  },
+};

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

@@ -0,0 +1,80 @@
+import { FC } from "react";
+
+import { styled, useTheme } from "@reearth/services/theme";
+
+import Icon from "../Icon";
+import Text from "../Text";
+
+type Props = {
+  icon: string;
+  title: string;
+  index: number;
+  active?: boolean;
+  onAction?: () => void;
+  onClick?: () => void;
+};
+
+const StorytellingPageSectionItem: FC<Props> = ({
+  icon,
+  title,
+  index,
+  active,
+  onAction,
+  onClick,
+}) => {
+  const theme = useTheme();
+  return (
+    <HorizontalBox>
+      <VerticalBox>
+        <Text size={"body"}>{index}</Text>
+        <Icon icon={icon} />
+      </VerticalBox>
+      <TitleArea active={active}>
+        <Text
+          onClick={onClick}
+          size="footnote"
+          color={theme.general.content.strong}
+          otherProperties={{ wordBreak: "break-all" }}>
+          {title}
+        </Text>
+        <Wrapper>
+          <Icon icon="actionbutton" onClick={onAction} />
+        </Wrapper>
+      </TitleArea>
+    </HorizontalBox>
+  );
+};
+
+const HorizontalBox = styled.div`
+  display: flex;
+  min-height: 56px;
+  gap: 4px;
+  cursor: pointer;
+`;
+
+const VerticalBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+`;
+
+const TitleArea = styled.div<{ active?: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+  gap: 4px;
+
+  background: ${props => (props.active ? props.theme.general.select : props.theme.general.bg.main)};
+  border: 1px solid
+    ${props => (props.active ? props.theme.general.select : props.theme.general.bg.veryWeak)};
+  border-radius: 6px;
+
+  width: 100%;
+`;
+
+const Wrapper = styled.div`
+  height: 100%;
+`;
+
+export default StorytellingPageSectionItem;

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

@@ -59,16 +59,14 @@ export default (sceneId: string) => {
   const handleWorkspaceModalClose = useCallback(() => setWorkspaceModalVisible(false), []);
 
   useEffect(() => {
-    if (!currentWorkspace && lastWorkspace) setWorkspace(lastWorkspace);
-  }, [currentWorkspace, lastWorkspace, setWorkspace]);
-
-  useEffect(() => {
-    if (currentWorkspace) return;
-    const workspace = workspaces?.find(t => t.id === workspaceId);
-    if (!workspace) return;
-    setWorkspace(workspace);
-    setLastWorkspace(currentWorkspace);
-  }, [workspaces, currentWorkspace, setWorkspace, setLastWorkspace, workspaceId]);
+    if (!currentWorkspace && lastWorkspace && workspaceId == lastWorkspace.id)
+      setWorkspace(lastWorkspace);
+    else {
+      const workspace = workspaces?.find(workspace => workspace.id === workspaceId);
+      setWorkspace(workspace);
+      setLastWorkspace(workspace);
+    }
+  }, [currentWorkspace, lastWorkspace, setLastWorkspace, setWorkspace, workspaceId, workspaces]);
 
   useEffect(() => {
     setProject(p =>

web/src/classic/components/molecules/EarthEditor/Header/index.tsx

@@ -28,15 +28,15 @@ export type Project = {
 export type Props = {
   currentProject?: Project;
   currentProjectStatus?: Status;
-  teamId?: string;
+  workspaceId?: string;
   onPublishmentStatusClick?: (p: publishingType) => void;
   onPreviewOpen?: () => void;
 } & CommonHeaderProps;
 
 const Header: React.FC<Props> = ({
   currentProject,
   currentProjectStatus,
-  teamId,
+  workspaceId,
   onPublishmentStatusClick,
   onPreviewOpen,
   ...props
@@ -53,7 +53,7 @@ const Header: React.FC<Props> = ({
   }, [currentProjectStatus]);
 
   const center = currentProject && (
-    <ProjectMenu currentProject={currentProject} workspaceId={teamId} />
+    <ProjectMenu currentProject={currentProject} workspaceId={workspaceId} />
   );
 
   const right = (