refactor(web): clean up utils

web/.storybook/preview.tsx

@@ -10,7 +10,6 @@ import { withThemeFromJSXProvider } from "@storybook/addon-styling";
 import type { Preview, ReactRenderer } from "@storybook/react";
 import React from "react";
 
-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";
 
@@ -56,9 +55,7 @@ const preview: Preview = {
       return (
         <ApolloProvider client={mockClient}>
           <I18nProvider>
-            <DndProvider>
-              <Story />
-            </DndProvider>
+            <Story />
           </I18nProvider>
         </ApolloProvider>
       );

web/src/beta/features/AccountSetting/PasswordModal/index.tsx

@@ -7,7 +7,6 @@ import {
   TextInput,
   Icon
 } from "@reearth/beta/lib/reearth-ui";
-import { metricsSizes } from "@reearth/beta/utils/metrics";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
 import React, { useState, useCallback, useEffect } from "react";
@@ -200,9 +199,10 @@ const PasswordField = styled(Flex)(({ theme }) => ({
   }
 }));
 
-const PasswordMessage = styled(Typography)`
-  margin-top: ${metricsSizes["s"]}px;
-  display: flex;
-`;
+const PasswordMessage = styled(Typography)(({ theme }) => ({
+  marginTop: theme.spacing.small,
+  display: "flex",
+  gap: theme.spacing.small
+}));
 
 export default PasswordModal;

web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.tsx

@@ -1,6 +1,6 @@
 import { PopupMenuItem } from "@reearth/beta/lib/reearth-ui";
 import Tooltip from "@reearth/beta/ui/components/Tooltip";
-import useDoubleClick from "@reearth/beta/utils/use-double-click";
+import useDoubleClick from "@reearth/beta/hooks/useDoubleClick";
 import {
   useStorytellingFetcher,
   useProjectFetcher

web/src/beta/features/Editor/Map/DataSourceLayerCreator/util.ts

@@ -1,4 +1,4 @@
-import generateRandomString from "@reearth/beta/utils/generate-random-string";
+import generateRandomString from "@reearth/beta/utils/string";
 
 const isValidUrl = (string: string): boolean => {
   try {

web/src/beta/features/Editor/Publish/PublishToolsPanel/PublishOrUpdateModal/useAlias.ts

@@ -1,4 +1,4 @@
-import generateRandomString from "@reearth/beta/utils/generate-random-string";
+import generateRandomString from "@reearth/beta/utils/string";
 import { useProjectFetcher } from "@reearth/services/api";
 import { useCallback, useEffect, useRef, useState } from "react";
 

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

@@ -1,7 +1,7 @@
 import { getFieldValue } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils";
 import { TextInput } from "@reearth/beta/lib/reearth-ui";
 import { EntryItem } from "@reearth/beta/ui/components";
-import { isEmptyString } from "@reearth/beta/utils/util";
+import { isEmptyString } from "@reearth/beta/utils/string";
 import { Page } from "@reearth/services/api/storytellingApi/utils";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";

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

@@ -1,5 +1,4 @@
 import styled from "@emotion/styled";
-import { Provider as DndProvider } from "@reearth/beta/utils/use-dnd";
 import { FC } from "react";
 
 import CursorStatus from "../CursorStatus";
@@ -64,90 +63,87 @@ const Editor: FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
     handleCoreAPIReady
   } = useHooks({ sceneId, tab, projectId });
 
-  // TODO remove DndProvider, use DragAndDropContext instead
   return (
-    <DndProvider>
-      <Wrapper>
-        <Navbar
-          sceneId={sceneId}
-          projectId={projectId}
-          workspaceId={workspaceId}
-          currentTab={tab}
-        />
-        <Content>
-          <VisualizerArea style={{ ...visualizerSize }}>
-            <EditorVisualizer
-              inEditor={tab !== "publish"}
-              selectedLayer={selectedLayer}
-              visualizerRef={visualizerRef}
-              storyPanelRef={storyPanelRef}
-              isVisualizerResizing={isVisualizerResizing}
-              sceneId={sceneId}
-              showStoryPanel={activeSubProject?.type === "story"}
-              selectedStory={selectedStory}
-              installableStoryBlocks={installableStoryBlocks}
-              widgetAlignEditorActivated={showWASEditor}
-              selectedWidgetArea={selectedWidgetArea}
-              onStoryBlockMove={handleStoryBlockMove}
-              onSketchTypeChange={handleSketchTypeChange}
-              onSketchFeatureCreate={handleSketchFeatureCreate}
-              onSketchFeatureUpdate={handleSketchFeatureUpdate}
-              onVisualizerReady={handleIsVisualizerUpdate}
-              onCoreLayerSelect={handleCoreLayerSelectFromMap}
-              onCoreAPIReady={handleCoreAPIReady}
-              setSelectedStoryPageId={selectStoryPage}
-              selectWidgetArea={selectWidgetArea}
-            />
-          </VisualizerArea>
-          <Workbench>
-            {tab === "map" && (
-              <MapPageProvider value={mapPageValue}>
-                <Map />
-              </MapPageProvider>
-            )}
-            {tab === "story" && (
-              <StoryPageProvider value={storyPageValue}>
-                <Story />
-              </StoryPageProvider>
-            )}
-            {tab === "widgets" && (
-              <WidgetsPageProvider value={widgetsPageValue}>
-                <Widgets />
-              </WidgetsPageProvider>
-            )}
-            {tab === "publish" && (
-              <PublishPageProvider value={publishPageValue}>
-                <Publish />
-              </PublishPageProvider>
-            )}
-          </Workbench>
-        </Content>
-        {dataSourceLayerCreatorShown && (
-          <DataSourceLayerCreator
+    <Wrapper>
+      <Navbar
+        sceneId={sceneId}
+        projectId={projectId}
+        workspaceId={workspaceId}
+        currentTab={tab}
+      />
+      <Content>
+        <VisualizerArea style={{ ...visualizerSize }}>
+          <EditorVisualizer
+            inEditor={tab !== "publish"}
+            selectedLayer={selectedLayer}
+            visualizerRef={visualizerRef}
+            storyPanelRef={storyPanelRef}
+            isVisualizerResizing={isVisualizerResizing}
             sceneId={sceneId}
-            onClose={closeDataSourceLayerCreator}
-            onSubmit={handleLayerAdd}
-          />
-        )}
-        {sketchLayerCreatorShown && (
-          <SketchLayerCreator
-            onSubmit={handleLayerAdd}
-            sceneId={sceneId}
-            onClose={closeSketchLayerCreator}
-            layerStyles={layerStyles}
-          />
-        )}
-        {customPropertySchemaShown && (
-          <SketchLayerEditor
-            layers={layers}
-            layerId={layerId}
-            onClose={closeCustomPropertySchema}
-            onCustomPropertySchemaUpdate={handleCustomPropertySchemaUpdate}
+            showStoryPanel={activeSubProject?.type === "story"}
+            selectedStory={selectedStory}
+            installableStoryBlocks={installableStoryBlocks}
+            widgetAlignEditorActivated={showWASEditor}
+            selectedWidgetArea={selectedWidgetArea}
+            onStoryBlockMove={handleStoryBlockMove}
+            onSketchTypeChange={handleSketchTypeChange}
+            onSketchFeatureCreate={handleSketchFeatureCreate}
+            onSketchFeatureUpdate={handleSketchFeatureUpdate}
+            onVisualizerReady={handleIsVisualizerUpdate}
+            onCoreLayerSelect={handleCoreLayerSelectFromMap}
+            onCoreAPIReady={handleCoreAPIReady}
+            setSelectedStoryPageId={selectStoryPage}
+            selectWidgetArea={selectWidgetArea}
           />
-        )}
-        <CursorStatus />
-      </Wrapper>
-    </DndProvider>
+        </VisualizerArea>
+        <Workbench>
+          {tab === "map" && (
+            <MapPageProvider value={mapPageValue}>
+              <Map />
+            </MapPageProvider>
+          )}
+          {tab === "story" && (
+            <StoryPageProvider value={storyPageValue}>
+              <Story />
+            </StoryPageProvider>
+          )}
+          {tab === "widgets" && (
+            <WidgetsPageProvider value={widgetsPageValue}>
+              <Widgets />
+            </WidgetsPageProvider>
+          )}
+          {tab === "publish" && (
+            <PublishPageProvider value={publishPageValue}>
+              <Publish />
+            </PublishPageProvider>
+          )}
+        </Workbench>
+      </Content>
+      {dataSourceLayerCreatorShown && (
+        <DataSourceLayerCreator
+          sceneId={sceneId}
+          onClose={closeDataSourceLayerCreator}
+          onSubmit={handleLayerAdd}
+        />
+      )}
+      {sketchLayerCreatorShown && (
+        <SketchLayerCreator
+          onSubmit={handleLayerAdd}
+          sceneId={sceneId}
+          onClose={closeSketchLayerCreator}
+          layerStyles={layerStyles}
+        />
+      )}
+      {customPropertySchemaShown && (
+        <SketchLayerEditor
+          layers={layers}
+          layerId={layerId}
+          onClose={closeCustomPropertySchema}
+          onCustomPropertySchemaUpdate={handleCustomPropertySchemaUpdate}
+        />
+      )}
+      <CursorStatus />
+    </Wrapper>
   );
 };
 

web/src/beta/features/Visualizer/Crust/StoryPanel/Block/builtin/Title/index.tsx

@@ -1,6 +1,6 @@
 import BlockWrapper from "@reearth/beta/features/Visualizer/shared/components/BlockWrapper";
 import { CommonBlockProps as BlockProps } from "@reearth/beta/features/Visualizer/shared/types";
-import { isEmptyString } from "@reearth/beta/utils/util";
+import { isEmptyString } from "@reearth/beta/utils/string";
 import { ValueTypes } from "@reearth/beta/utils/value";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";

web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Button/MenuButton.tsx

@@ -1,5 +1,4 @@
 import { Icon, IconName, Typography } from "@reearth/beta/lib/reearth-ui";
-import Flex from "@reearth/beta/ui/widgetui/Flex";
 import { styled, mask } from "@reearth/services/theme";
 import spacingSizes from "@reearth/services/theme/reearthTheme/common/spacing";
 import { useRef, useCallback, useState } from "react";
@@ -171,25 +170,22 @@ export default function MenuButton({
           <MenuInnerWrapper publishedTheme={theme} button={b}>
             {menuItems?.map((i) => (
               <MenuItem
-                align="center"
                 publishedTheme={theme}
                 key={i.id}
                 item={i}
                 button={b}
                 onClick={handleClick(i)}
               >
-                <Flex align="center">
-                  {i.menuIcon && <Icon icon={i.menuIcon} size={20} />}
-                  <Typography
-                    size="footnote"
-                    color={b?.buttonColor}
-                    otherProperties={{
-                      marginLeft: i.menuIcon ? "5px" : undefined
-                    }}
-                  >
-                    {i.menuTitle}
-                  </Typography>
-                </Flex>
+                {i.menuIcon && <Icon icon={i.menuIcon} size={20} />}
+                <Typography
+                  size="footnote"
+                  color={b?.buttonColor}
+                  otherProperties={{
+                    marginLeft: i.menuIcon ? "5px" : undefined
+                  }}
+                >
+                  {i.menuTitle}
+                </Typography>
               </MenuItem>
             ))}
           </MenuInnerWrapper>
@@ -249,11 +245,14 @@ const MenuInnerWrapper = styled("div")<{
   whiteSpace: "nowrap"
 }));
 
-const MenuItem = styled(Flex)<{
+const MenuItem = styled("div")<{
   item?: MenuItem;
   button?: Button;
   publishedTheme?: Theme;
 }>(({ item, button, publishedTheme, theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
   minHeight: item?.menuType === "border" ? undefined : "25px",
   borderRadius:
     item?.menuType === "border" ? undefined : theme.radius.small - 1,

web/src/beta/features/Visualizer/shared/components/BlockWrapper/hooks.ts

@@ -1,4 +1,4 @@
-import useDoubleClick from "@reearth/beta/utils/use-double-click";
+import useDoubleClick from "@reearth/beta/hooks/useDoubleClick";
 import { Spacing } from "@reearth/core";
 import {
   useCallback,