diff --git a/web/src/beta/README.md b/web/src/beta/README.md new file mode 100644 index 0000000000..f605375875 --- /dev/null +++ b/web/src/beta/README.md @@ -0,0 +1,9 @@ +# Component Structure + +```planttext +pages // The main pages of the app. +└──features // Features of the app, used in pages. Handles business logic. + ├──ui // Pure UI, Re:Earth Visualizer specific UI components. + │ └──lib/reearth-ui // Pure UI, Re:Earth common UI components. + └──lib/reearth-ui +``` diff --git a/web/src/beta/components/FloatedPanel/index.stories.tsx b/web/src/beta/components/FloatedPanel/index.stories.tsx deleted file mode 100644 index 67c553b52a..0000000000 --- a/web/src/beta/components/FloatedPanel/index.stories.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { css } from "@emotion/react"; -import { Meta, StoryFn } from "@storybook/react"; - -import FloatedPanel, { Props } from "."; - -const meta: Meta = { - component: FloatedPanel -}; - -export default meta; - -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - visible: true, - children: "This is the content of the floated panel" -}; - -export const Hidden = Template.bind({}); -Hidden.args = { - visible: false, - children: "This is the content of the floated panel" -}; - -export const CustomStyles = Template.bind({}); -CustomStyles.args = { - visible: true, - children: "This is the content of the floated panel", - styles: css` - background-color: lightblue; - color: white; - padding: 10px; - ` -}; diff --git a/web/src/beta/components/FloatedPanel/index.tsx b/web/src/beta/components/FloatedPanel/index.tsx deleted file mode 100644 index 21e147b8a2..0000000000 --- a/web/src/beta/components/FloatedPanel/index.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { SerializedStyles } from "@emotion/react"; -import useBuffered from "@reearth/beta/utils/use-buffered"; -import { styled } from "@reearth/services/theme"; -import { useTransition, TransitionStatus } from "@rot1024/use-transition"; -import React, { useRef, useEffect } from "react"; -import { useClickAway } from "react-use"; - -export type Props = { - className?: string; - visible?: boolean; - styles?: SerializedStyles; - onClose?: () => void; - onHover?: (hovered: boolean) => void; - onClickAway?: (e: Event) => void; - onEnter?: () => void; - onEntered?: () => void; - onExit?: () => void; - onExited?: () => void; -} & React.HTMLAttributes; - -const FloatedPanel: React.FC = ({ - className, - visible, - styles, - children, - onHover, - onClick, - onClickAway, - onEnter, - onEntered, - onExit, - onExited -}) => { - const ref = useRef(null); - useClickAway(ref, (e) => onClickAway?.(e)); - const transition = useTransition(!!visible, 200, { - mountOnEnter: true, - unmountOnExit: true - }); - - // visibleがtrueの時のみ更新することで、InfoBoxを閉じるアニメーションが走る際に中身が消えないようにする - const bChildren = useBuffered(children, !!visible); - const bStyles = useBuffered(styles, !!visible); - - useEffect(() => { - if (transition === "entering") onEnter?.(); - if (transition === "entered") onEntered?.(); - if (transition === "exiting") onExit?.(); - if (transition === "exited") onExited?.(); - }, [transition, onEnter, onEntered, onExit, onExited]); - - return transition === "unmounted" ? null : ( - onHover?.(true)} - onMouseLeave={() => onHover?.(false)} - transition={transition} - styles={bStyles} - > - {bChildren} - - ); -}; - -const Wrapper = styled.div<{ - transition?: TransitionStatus; - styles?: SerializedStyles; -}>` - position: absolute; - transition: ${({ transition }) => - transition === "entering" || transition === "exiting" - ? "all 0.2s ease" - : ""}; - transform: ${({ transition }) => - transition === "entering" || transition === "entered" - ? "translateX(0%)" - : "translateX(100%)"}; - opacity: ${({ transition }) => - transition === "entering" || transition === "entered" ? "1" : "0"}; - ${({ styles }) => styles} -`; - -export default FloatedPanel; diff --git a/web/src/beta/components/Icon/Icons/Clock.svg b/web/src/beta/components/Icon/Icons/Clock.svg deleted file mode 100644 index 998df51713..0000000000 --- a/web/src/beta/components/Icon/Icons/Clock.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/actionButton.svg b/web/src/beta/components/Icon/Icons/actionButton.svg deleted file mode 100644 index 017a2916bb..0000000000 --- a/web/src/beta/components/Icon/Icons/actionButton.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/beta/components/Icon/Icons/addLayer.svg b/web/src/beta/components/Icon/Icons/addLayer.svg deleted file mode 100644 index dbbb40315a..0000000000 --- a/web/src/beta/components/Icon/Icons/addLayer.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/web/src/beta/components/Icon/Icons/addLayerStyleButton.svg b/web/src/beta/components/Icon/Icons/addLayerStyleButton.svg deleted file mode 100644 index 907889c5b6..0000000000 --- a/web/src/beta/components/Icon/Icons/addLayerStyleButton.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/web/src/beta/components/Icon/Icons/alert.svg b/web/src/beta/components/Icon/Icons/alert.svg deleted file mode 100644 index 6d547c35b8..0000000000 --- a/web/src/beta/components/Icon/Icons/alert.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/arrowDown.svg b/web/src/beta/components/Icon/Icons/arrowDown.svg deleted file mode 100644 index bc327d39b1..0000000000 --- a/web/src/beta/components/Icon/Icons/arrowDown.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/arrowLeft.svg b/web/src/beta/components/Icon/Icons/arrowLeft.svg deleted file mode 100644 index f9739753a1..0000000000 --- a/web/src/beta/components/Icon/Icons/arrowLeft.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/arrowRight.svg b/web/src/beta/components/Icon/Icons/arrowRight.svg deleted file mode 100644 index d58281cc93..0000000000 --- a/web/src/beta/components/Icon/Icons/arrowRight.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/arrowToggle.svg b/web/src/beta/components/Icon/Icons/arrowToggle.svg deleted file mode 100644 index bd46424cfe..0000000000 --- a/web/src/beta/components/Icon/Icons/arrowToggle.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/arrowUpDown.svg b/web/src/beta/components/Icon/Icons/arrowUpDown.svg deleted file mode 100644 index 1621a17de7..0000000000 --- a/web/src/beta/components/Icon/Icons/arrowUpDown.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/bin.svg b/web/src/beta/components/Icon/Icons/bin.svg deleted file mode 100644 index 3de70047ce..0000000000 --- a/web/src/beta/components/Icon/Icons/bin.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/book.svg b/web/src/beta/components/Icon/Icons/book.svg deleted file mode 100644 index b7864dd364..0000000000 --- a/web/src/beta/components/Icon/Icons/book.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/box.svg b/web/src/beta/components/Icon/Icons/box.svg deleted file mode 100644 index 7e7d62d4a2..0000000000 --- a/web/src/beta/components/Icon/Icons/box.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/cameraButtonStoryBlock.svg b/web/src/beta/components/Icon/Icons/cameraButtonStoryBlock.svg deleted file mode 100644 index 57416021dd..0000000000 --- a/web/src/beta/components/Icon/Icons/cameraButtonStoryBlock.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/cancel.svg b/web/src/beta/components/Icon/Icons/cancel.svg deleted file mode 100644 index aeedf6bbc6..0000000000 --- a/web/src/beta/components/Icon/Icons/cancel.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/checkCircle.svg b/web/src/beta/components/Icon/Icons/checkCircle.svg deleted file mode 100644 index 8df7730dd7..0000000000 --- a/web/src/beta/components/Icon/Icons/checkCircle.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/checkMark.svg b/web/src/beta/components/Icon/Icons/checkMark.svg deleted file mode 100644 index fc1282316f..0000000000 --- a/web/src/beta/components/Icon/Icons/checkMark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/circleOutline.svg b/web/src/beta/components/Icon/Icons/circleOutline.svg deleted file mode 100644 index 335aeae568..0000000000 --- a/web/src/beta/components/Icon/Icons/circleOutline.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/compassFocus.svg b/web/src/beta/components/Icon/Icons/compassFocus.svg deleted file mode 100644 index 20d034c3f5..0000000000 --- a/web/src/beta/components/Icon/Icons/compassFocus.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/src/beta/components/Icon/Icons/copy.svg b/web/src/beta/components/Icon/Icons/copy.svg deleted file mode 100644 index c60b95986d..0000000000 --- a/web/src/beta/components/Icon/Icons/copy.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/web/src/beta/components/Icon/Icons/crosshair.svg b/web/src/beta/components/Icon/Icons/crosshair.svg deleted file mode 100644 index f6a43e12a4..0000000000 --- a/web/src/beta/components/Icon/Icons/crosshair.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/cylinder.svg b/web/src/beta/components/Icon/Icons/cylinder.svg deleted file mode 100644 index da624fd6a3..0000000000 --- a/web/src/beta/components/Icon/Icons/cylinder.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/dashboard.svg b/web/src/beta/components/Icon/Icons/dashboard.svg deleted file mode 100644 index 153cb30114..0000000000 --- a/web/src/beta/components/Icon/Icons/dashboard.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/web/src/beta/components/Icon/Icons/desktop.svg b/web/src/beta/components/Icon/Icons/desktop.svg deleted file mode 100644 index 789be9e251..0000000000 --- a/web/src/beta/components/Icon/Icons/desktop.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/web/src/beta/components/Icon/Icons/dndHandle.svg b/web/src/beta/components/Icon/Icons/dndHandle.svg deleted file mode 100644 index d2b51ad67f..0000000000 --- a/web/src/beta/components/Icon/Icons/dndHandle.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/web/src/beta/components/Icon/Icons/editIcon.svg b/web/src/beta/components/Icon/Icons/editIcon.svg deleted file mode 100644 index a4dc4d018c..0000000000 --- a/web/src/beta/components/Icon/Icons/editIcon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/exit.svg b/web/src/beta/components/Icon/Icons/exit.svg deleted file mode 100644 index 7d74b93636..0000000000 --- a/web/src/beta/components/Icon/Icons/exit.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/fileIcon.svg b/web/src/beta/components/Icon/Icons/fileIcon.svg deleted file mode 100644 index 5c3d184a85..0000000000 --- a/web/src/beta/components/Icon/Icons/fileIcon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/folderPlus.svg b/web/src/beta/components/Icon/Icons/folderPlus.svg deleted file mode 100644 index 81ba849d68..0000000000 --- a/web/src/beta/components/Icon/Icons/folderPlus.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/beta/components/Icon/Icons/gearSix.svg b/web/src/beta/components/Icon/Icons/gearSix.svg deleted file mode 100644 index 2f3af29213..0000000000 --- a/web/src/beta/components/Icon/Icons/gearSix.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/help.svg b/web/src/beta/components/Icon/Icons/help.svg deleted file mode 100644 index b7bea4a691..0000000000 --- a/web/src/beta/components/Icon/Icons/help.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/beta/components/Icon/Icons/house.svg b/web/src/beta/components/Icon/Icons/house.svg deleted file mode 100644 index 2fe1a58b2a..0000000000 --- a/web/src/beta/components/Icon/Icons/house.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/src/beta/components/Icon/Icons/imageInfoboxBlock.svg b/web/src/beta/components/Icon/Icons/imageInfoboxBlock.svg deleted file mode 100644 index 27b39cba65..0000000000 --- a/web/src/beta/components/Icon/Icons/imageInfoboxBlock.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/imageStoryBlock.svg b/web/src/beta/components/Icon/Icons/imageStoryBlock.svg deleted file mode 100644 index 8a84773955..0000000000 --- a/web/src/beta/components/Icon/Icons/imageStoryBlock.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/beta/components/Icon/Icons/infoboxHTMLIcon.svg b/web/src/beta/components/Icon/Icons/infoboxHTMLIcon.svg deleted file mode 100644 index a437c0ed20..0000000000 --- a/web/src/beta/components/Icon/Icons/infoboxHTMLIcon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/src/beta/components/Icon/Icons/infoboxIcon.svg b/web/src/beta/components/Icon/Icons/infoboxIcon.svg deleted file mode 100644 index 31f188ddcf..0000000000 --- a/web/src/beta/components/Icon/Icons/infoboxIcon.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/web/src/beta/components/Icon/Icons/infoboxLocationIcon.svg b/web/src/beta/components/Icon/Icons/infoboxLocationIcon.svg deleted file mode 100644 index 39539de592..0000000000 --- a/web/src/beta/components/Icon/Icons/infoboxLocationIcon.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/beta/components/Icon/Icons/infoboxTableIcon.svg b/web/src/beta/components/Icon/Icons/infoboxTableIcon.svg deleted file mode 100644 index c59348d4e1..0000000000 --- a/web/src/beta/components/Icon/Icons/infoboxTableIcon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/infoboxTextIcon.svg b/web/src/beta/components/Icon/Icons/infoboxTextIcon.svg deleted file mode 100644 index 50629e552e..0000000000 --- a/web/src/beta/components/Icon/Icons/infoboxTextIcon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/infoboxVideoIcon.svg b/web/src/beta/components/Icon/Icons/infoboxVideoIcon.svg deleted file mode 100644 index 401e1fb882..0000000000 --- a/web/src/beta/components/Icon/Icons/infoboxVideoIcon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/install.svg b/web/src/beta/components/Icon/Icons/install.svg deleted file mode 100644 index d74011759b..0000000000 --- a/web/src/beta/components/Icon/Icons/install.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/layer.svg b/web/src/beta/components/Icon/Icons/layer.svg deleted file mode 100644 index dc3c73c495..0000000000 --- a/web/src/beta/components/Icon/Icons/layer.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/web/src/beta/components/Icon/Icons/layerInspector.svg b/web/src/beta/components/Icon/Icons/layerInspector.svg deleted file mode 100644 index 02df31795f..0000000000 --- a/web/src/beta/components/Icon/Icons/layerInspector.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/beta/components/Icon/Icons/layerStyle.svg b/web/src/beta/components/Icon/Icons/layerStyle.svg deleted file mode 100644 index b9cb0bf6d0..0000000000 --- a/web/src/beta/components/Icon/Icons/layerStyle.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/web/src/beta/components/Icon/Icons/linkStoryBlockButton.svg b/web/src/beta/components/Icon/Icons/linkStoryBlockButton.svg deleted file mode 100644 index a253b8c995..0000000000 --- a/web/src/beta/components/Icon/Icons/linkStoryBlockButton.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/beta/components/Icon/Icons/logout.svg b/web/src/beta/components/Icon/Icons/logout.svg deleted file mode 100644 index cfdbb5d21f..0000000000 --- a/web/src/beta/components/Icon/Icons/logout.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/beta/components/Icon/Icons/marker.svg b/web/src/beta/components/Icon/Icons/marker.svg deleted file mode 100644 index 11a0abae1f..0000000000 --- a/web/src/beta/components/Icon/Icons/marker.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/marketplace.svg b/web/src/beta/components/Icon/Icons/marketplace.svg deleted file mode 100644 index 97bf156141..0000000000 --- a/web/src/beta/components/Icon/Icons/marketplace.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/web/src/beta/components/Icon/Icons/mdTextStoryBlock.svg b/web/src/beta/components/Icon/Icons/mdTextStoryBlock.svg deleted file mode 100644 index 2dd18121eb..0000000000 --- a/web/src/beta/components/Icon/Icons/mdTextStoryBlock.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/web/src/beta/components/Icon/Icons/minus.svg b/web/src/beta/components/Icon/Icons/minus.svg deleted file mode 100644 index 2662722ba9..0000000000 --- a/web/src/beta/components/Icon/Icons/minus.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/src/beta/components/Icon/Icons/mobile.svg b/web/src/beta/components/Icon/Icons/mobile.svg deleted file mode 100644 index de5ed069bc..0000000000 --- a/web/src/beta/components/Icon/Icons/mobile.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/beta/components/Icon/Icons/nextPageStoryBlock.svg b/web/src/beta/components/Icon/Icons/nextPageStoryBlock.svg deleted file mode 100644 index b84ee3475a..0000000000 --- a/web/src/beta/components/Icon/Icons/nextPageStoryBlock.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/padding.svg b/web/src/beta/components/Icon/Icons/padding.svg deleted file mode 100644 index 06ae9a060c..0000000000 --- a/web/src/beta/components/Icon/Icons/padding.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/pencilSimple.svg b/web/src/beta/components/Icon/Icons/pencilSimple.svg deleted file mode 100644 index 8b47cdc3fc..0000000000 --- a/web/src/beta/components/Icon/Icons/pencilSimple.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/plugin.svg b/web/src/beta/components/Icon/Icons/plugin.svg deleted file mode 100644 index b8948fad0b..0000000000 --- a/web/src/beta/components/Icon/Icons/plugin.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/plus.svg b/web/src/beta/components/Icon/Icons/plus.svg deleted file mode 100644 index b34d787e46..0000000000 --- a/web/src/beta/components/Icon/Icons/plus.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/plusSquare.svg b/web/src/beta/components/Icon/Icons/plusSquare.svg deleted file mode 100644 index a110b04606..0000000000 --- a/web/src/beta/components/Icon/Icons/plusSquare.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/beta/components/Icon/Icons/pointer.svg b/web/src/beta/components/Icon/Icons/pointer.svg deleted file mode 100644 index 7e4048d421..0000000000 --- a/web/src/beta/components/Icon/Icons/pointer.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/polygon.svg b/web/src/beta/components/Icon/Icons/polygon.svg deleted file mode 100644 index 56c38024a1..0000000000 --- a/web/src/beta/components/Icon/Icons/polygon.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/web/src/beta/components/Icon/Icons/polygonExtruded.svg b/web/src/beta/components/Icon/Icons/polygonExtruded.svg deleted file mode 100644 index 353c01e98e..0000000000 --- a/web/src/beta/components/Icon/Icons/polygonExtruded.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/web/src/beta/components/Icon/Icons/polyline.svg b/web/src/beta/components/Icon/Icons/polyline.svg deleted file mode 100644 index 2b27b4e63a..0000000000 --- a/web/src/beta/components/Icon/Icons/polyline.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/web/src/beta/components/Icon/Icons/primPhotoIcon.svg b/web/src/beta/components/Icon/Icons/primPhotoIcon.svg deleted file mode 100644 index 50caf4969c..0000000000 --- a/web/src/beta/components/Icon/Icons/primPhotoIcon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/propertyInfoboxBlock.svg b/web/src/beta/components/Icon/Icons/propertyInfoboxBlock.svg deleted file mode 100644 index 371dd6802c..0000000000 --- a/web/src/beta/components/Icon/Icons/propertyInfoboxBlock.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/publicGitHubRepo.svg b/web/src/beta/components/Icon/Icons/publicGitHubRepo.svg deleted file mode 100644 index 7013d5aaaa..0000000000 --- a/web/src/beta/components/Icon/Icons/publicGitHubRepo.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/web/src/beta/components/Icon/Icons/scene.svg b/web/src/beta/components/Icon/Icons/scene.svg deleted file mode 100644 index a48a30eb31..0000000000 --- a/web/src/beta/components/Icon/Icons/scene.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/search.svg b/web/src/beta/components/Icon/Icons/search.svg deleted file mode 100644 index 4b4ae1f5f0..0000000000 --- a/web/src/beta/components/Icon/Icons/search.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/set.svg b/web/src/beta/components/Icon/Icons/set.svg deleted file mode 100644 index c8ec79edb3..0000000000 --- a/web/src/beta/components/Icon/Icons/set.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/settings.svg b/web/src/beta/components/Icon/Icons/settings.svg deleted file mode 100644 index 797b59a6fd..0000000000 --- a/web/src/beta/components/Icon/Icons/settings.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/showLayersStoryBlock.svg b/web/src/beta/components/Icon/Icons/showLayersStoryBlock.svg deleted file mode 100644 index 91bf822a73..0000000000 --- a/web/src/beta/components/Icon/Icons/showLayersStoryBlock.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/beta/components/Icon/Icons/sketch.svg b/web/src/beta/components/Icon/Icons/sketch.svg deleted file mode 100644 index 145917f6df..0000000000 --- a/web/src/beta/components/Icon/Icons/sketch.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/beta/components/Icon/Icons/slider.svg b/web/src/beta/components/Icon/Icons/slider.svg deleted file mode 100644 index a216ee08b3..0000000000 --- a/web/src/beta/components/Icon/Icons/slider.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/square.svg b/web/src/beta/components/Icon/Icons/square.svg deleted file mode 100644 index 402e554851..0000000000 --- a/web/src/beta/components/Icon/Icons/square.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/squareOutline.svg b/web/src/beta/components/Icon/Icons/squareOutline.svg deleted file mode 100644 index c3c86f34a1..0000000000 --- a/web/src/beta/components/Icon/Icons/squareOutline.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/storyBlockEdit.svg b/web/src/beta/components/Icon/Icons/storyBlockEdit.svg deleted file mode 100644 index be3870ab20..0000000000 --- a/web/src/beta/components/Icon/Icons/storyBlockEdit.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/storyPage.svg b/web/src/beta/components/Icon/Icons/storyPage.svg deleted file mode 100644 index d4ca44839f..0000000000 --- a/web/src/beta/components/Icon/Icons/storyPage.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/storytellingMenu.svg b/web/src/beta/components/Icon/Icons/storytellingMenu.svg deleted file mode 100644 index edd4a2d54a..0000000000 --- a/web/src/beta/components/Icon/Icons/storytellingMenu.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/web/src/beta/components/Icon/Icons/swiper.svg b/web/src/beta/components/Icon/Icons/swiper.svg deleted file mode 100644 index 04b6f75c14..0000000000 --- a/web/src/beta/components/Icon/Icons/swiper.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/textBlock.svg b/web/src/beta/components/Icon/Icons/textBlock.svg deleted file mode 100644 index cb429ea03f..0000000000 --- a/web/src/beta/components/Icon/Icons/textBlock.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/web/src/beta/components/Icon/Icons/timeline-play-left.svg b/web/src/beta/components/Icon/Icons/timeline-play-left.svg deleted file mode 100644 index 8e40d78935..0000000000 --- a/web/src/beta/components/Icon/Icons/timeline-play-left.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/timeline-play-right.svg b/web/src/beta/components/Icon/Icons/timeline-play-right.svg deleted file mode 100644 index 93c1ab0e76..0000000000 --- a/web/src/beta/components/Icon/Icons/timeline-play-right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/timelineStoryBlock.svg b/web/src/beta/components/Icon/Icons/timelineStoryBlock.svg deleted file mode 100644 index 8b64acebce..0000000000 --- a/web/src/beta/components/Icon/Icons/timelineStoryBlock.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/timelineStoryBlockSolid.svg b/web/src/beta/components/Icon/Icons/timelineStoryBlockSolid.svg deleted file mode 100644 index e3d0fc806f..0000000000 --- a/web/src/beta/components/Icon/Icons/timelineStoryBlockSolid.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/titleStoryBlock.svg b/web/src/beta/components/Icon/Icons/titleStoryBlock.svg deleted file mode 100644 index cc726aa5c6..0000000000 --- a/web/src/beta/components/Icon/Icons/titleStoryBlock.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/beta/components/Icon/Icons/trash.svg b/web/src/beta/components/Icon/Icons/trash.svg deleted file mode 100644 index 109f1ae174..0000000000 --- a/web/src/beta/components/Icon/Icons/trash.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/web/src/beta/components/Icon/Icons/uploadSimple.svg b/web/src/beta/components/Icon/Icons/uploadSimple.svg deleted file mode 100644 index adaa5b288c..0000000000 --- a/web/src/beta/components/Icon/Icons/uploadSimple.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/src/beta/components/Icon/Icons/uploadZipPlugin.svg b/web/src/beta/components/Icon/Icons/uploadZipPlugin.svg deleted file mode 100644 index 32c47f6c78..0000000000 --- a/web/src/beta/components/Icon/Icons/uploadZipPlugin.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/web/src/beta/components/Icon/Icons/video.svg b/web/src/beta/components/Icon/Icons/video.svg deleted file mode 100644 index 9e17452865..0000000000 --- a/web/src/beta/components/Icon/Icons/video.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/videoStoryBlock.svg b/web/src/beta/components/Icon/Icons/videoStoryBlock.svg deleted file mode 100644 index b3b664b2ab..0000000000 --- a/web/src/beta/components/Icon/Icons/videoStoryBlock.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/widgetButton.svg b/web/src/beta/components/Icon/Icons/widgetButton.svg deleted file mode 100644 index d1ddc6f396..0000000000 --- a/web/src/beta/components/Icon/Icons/widgetButton.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/widgetMenu.svg b/web/src/beta/components/Icon/Icons/widgetMenu.svg deleted file mode 100644 index cb134443f3..0000000000 --- a/web/src/beta/components/Icon/Icons/widgetMenu.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/web/src/beta/components/Icon/Icons/widgetNavigator.svg b/web/src/beta/components/Icon/Icons/widgetNavigator.svg deleted file mode 100644 index df3ac8986c..0000000000 --- a/web/src/beta/components/Icon/Icons/widgetNavigator.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/src/beta/components/Icon/Icons/widgetSplashscreen.svg b/web/src/beta/components/Icon/Icons/widgetSplashscreen.svg deleted file mode 100644 index 62b417ca0a..0000000000 --- a/web/src/beta/components/Icon/Icons/widgetSplashscreen.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/web/src/beta/components/Icon/Icons/widgetStorytelling.svg b/web/src/beta/components/Icon/Icons/widgetStorytelling.svg deleted file mode 100644 index a010a45982..0000000000 --- a/web/src/beta/components/Icon/Icons/widgetStorytelling.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/beta/components/Icon/Icons/widgetSystem.svg b/web/src/beta/components/Icon/Icons/widgetSystem.svg deleted file mode 100644 index 85cbd13d23..0000000000 --- a/web/src/beta/components/Icon/Icons/widgetSystem.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/web/src/beta/components/Icon/Icons/widgetsIcon.svg b/web/src/beta/components/Icon/Icons/widgetsIcon.svg deleted file mode 100644 index d00bfc64ea..0000000000 --- a/web/src/beta/components/Icon/Icons/widgetsIcon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/beta/components/Icon/Icons/workspaceAdd.svg b/web/src/beta/components/Icon/Icons/workspaceAdd.svg deleted file mode 100644 index f52795ba77..0000000000 --- a/web/src/beta/components/Icon/Icons/workspaceAdd.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/web/src/beta/components/Icon/Icons/workspaces.svg b/web/src/beta/components/Icon/Icons/workspaces.svg deleted file mode 100644 index 6d3eadd36b..0000000000 --- a/web/src/beta/components/Icon/Icons/workspaces.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/web/src/beta/components/Icon/Icons/zoomToLayer.svg b/web/src/beta/components/Icon/Icons/zoomToLayer.svg deleted file mode 100644 index 3eb540037e..0000000000 --- a/web/src/beta/components/Icon/Icons/zoomToLayer.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/web/src/beta/components/Icon/icons.ts b/web/src/beta/components/Icon/icons.ts deleted file mode 100644 index e9bc2256db..0000000000 --- a/web/src/beta/components/Icon/icons.ts +++ /dev/null @@ -1,242 +0,0 @@ -/* eslint-disable import/order */ -/// - -// Primitives -import PrimPhotoOverlay from "./Icons/primPhotoIcon.svg?react"; - -// Infobox -import Infobox from "./Icons/infoboxIcon.svg?react"; -import InfoboxImageBlock from "./Icons/imageInfoboxBlock.svg?react"; -import TextBlock from "./Icons/textBlock.svg?react"; -import InfoboxPropertyBlock from "./Icons/propertyInfoboxBlock.svg?react"; - -// Arrow -import ArrowUpDown from "./Icons/arrowUpDown.svg?react"; -import ArrowLeft from "./Icons/arrowLeft.svg?react"; -import ArrowRight from "./Icons/arrowRight.svg?react"; -import ArrowLongLeft from "./Icons/arrowLongLeft.svg?react"; -import ArrowLongRight from "./Icons/arrowLongRight.svg?react"; -import ArrowDown from "./Icons/arrowDown.svg?react"; -import ArrowToggle from "./Icons/arrowToggle.svg?react"; - -// Indicator -import Crosshair from "./Icons/crosshair.svg?react"; - -// Fields / Actions -import FolderPlus from "./Icons/folderPlus.svg?react"; -import PlusSquare from "./Icons/plusSquare.svg?react"; -import Cancel from "./Icons/cancel.svg?react"; -import ActionButton from "./Icons/actionButton.svg?react"; -import Help from "./Icons/help.svg?react"; -import CheckMark from "./Icons/checkMark.svg?react"; -import Plus from "./Icons/plus.svg?react"; -import Minus from "./Icons/minus.svg?react"; -import Alert from "./Icons/alert.svg?react"; -import DndHandle from "./Icons/dndHandle.svg?react"; -import Bin from "./Icons/bin.svg?react"; -import Install from "./Icons/install.svg?react"; -import UploadSimple from "./Icons/uploadSimple.svg?react"; -import Search from "./Icons/search.svg?react"; -import AddLayerIcon from "./Icons/addLayer.svg?react"; -import ZoomToLayer from "./Icons/zoomToLayer.svg?react"; -import LayerStyleIcon from "./Icons/layerStyle.svg?react"; -import AddLayerStyleButtonIcon from "./Icons/addLayerStyleButton.svg?react"; -import LayerInspector from "./Icons/layerInspector.svg?react"; -import LayerIcon from "./Icons/layer.svg?react"; -import Clock from "./Icons/Clock.svg?react"; - -// MSIC -import CheckCircle from "./Icons/checkCircle.svg?react"; - -// Dataset -import File from "./Icons/fileIcon.svg?react"; - -// Timeline -import Timeline from "./Icons/timeline.svg?react"; -import PlayRight from "./Icons/play-right.svg?react"; -import PlayLeft from "./Icons/play-left.svg?react"; -import Ellipse from "./Icons/ellipse.svg?react"; -import TimelinePlayRight from "./Icons/timeline-play-right.svg?react"; -import TimelinePlayLeft from "./Icons/timeline-play-left.svg?react"; -import Pause from "./Icons/pause.svg?react"; -import Slider from "./Icons/slider.svg?react"; -import Set from "./Icons/set.svg?react"; - -// Dashboard -import Dashboard from "./Icons/dashboard.svg?react"; -import Scene from "./Icons/scene.svg?react"; -import Logout from "./Icons/logout.svg?react"; - -// Workspaces -import WorkspaceAdd from "./Icons/workspaceAdd.svg?react"; -import Workspaces from "./Icons/workspaces.svg?react"; - -// Storytelling tab -import StoryPage from "./Icons/storyPage.svg?react"; -import Square from "./Icons/square.svg?react"; -import Swiper from "./Icons/swiper.svg?react"; -import Book from "./Icons/book.svg?react"; -import Copy from "./Icons/copy.svg?react"; -import GearSix from "./Icons/gearSix.svg?react"; -import PencilSimple from "./Icons/pencilSimple.svg?react"; -import Trash from "./Icons/trash.svg?react"; -import Edit from "./Icons/storyBlockEdit.svg?react"; -import Exit from "./Icons/exit.svg?react"; -import Settings from "./Icons/settings.svg?react"; -import Padding from "./Icons/padding.svg?react"; -import TitleStoryBlock from "./Icons/titleStoryBlock.svg?react"; -import VideoStoryBlock from "./Icons/videoStoryBlock.svg?react"; -import ImageStoryBlock from "./Icons/imageStoryBlock.svg?react"; -import MdTextStoryBlock from "./Icons/mdTextStoryBlock.svg?react"; -import CameraButtonStoryBlock from "./Icons/cameraButtonStoryBlock.svg?react"; -import ShowLayersStoryBlock from "./Icons/showLayersStoryBlock.svg?react"; -import TimelineStoryBlock from "./Icons/timelineStoryBlock.svg?react"; -import TimelineStoryBlockSolid from "./Icons/timelineStoryBlockSolid.svg?react"; -import NextPageStoryBlock from "./Icons/nextPageStoryBlock.svg?react"; -//TODO: will be not be use in future -import LinkButtonStoryBlock from "./Icons/linkStoryBlockButton.svg?react"; - -// Widget tab -import Desktop from "./Icons/desktop.svg?react"; -import Mobile from "./Icons/mobile.svg?react"; -import WidgetSystem from "./Icons/widgetSystem.svg?react"; -import Widgets from "./Icons/widgetsIcon.svg?react"; -import WidgetMenu from "./Icons/widgetMenu.svg?react"; -import WidgetButton from "./Icons/widgetButton.svg?react"; -import WidgetStory from "./Icons/widgetStorytelling.svg?react"; -import StorytellingMenu from "./Icons/storytellingMenu.svg?react"; -import WidgetSplash from "./Icons/widgetSplashscreen.svg?react"; -import WidgetNavigator from "./Icons/widgetNavigator.svg?react"; -import NavigatorAngle from "./Icons/navigatorAngle.svg?react"; -import Compass from "./Icons/compass.svg?react"; -import CompassFocus from "./Icons/compassFocus.svg?react"; -import House from "./Icons/house.svg?react"; -import Plugin from "./Icons/plugin.svg?react"; - -// Logos -import Logo from "./Icons/reearthLogo.svg?react"; -import LogoColorful from "./Icons/reearthLogoColorful.svg?react"; - -// Plug-ins -import UploadZipPlugin from "./Icons/uploadZipPlugin.svg?react"; -import PublicGitHubRepo from "./Icons/publicGitHubRepo.svg?react"; -import Marketplace from "./Icons/marketplace.svg?react"; - -// Sketch -import Pointer from "./Icons/pointer.svg?react"; -import Sketch from "./Icons/sketch.svg?react"; -import Marker from "./Icons/marker.svg?react"; -import Polyline from "./Icons/polyline.svg?react"; -import SquareOutline from "./Icons/squareOutline.svg?react"; -import CircleOutline from "./Icons/circleOutline.svg?react"; -import Polygon from "./Icons/polygon.svg?react"; -import Box from "./Icons/box.svg?react"; -import Cylinder from "./Icons/cylinder.svg?react"; -import PolygonExtruded from "./Icons/polygonExtruded.svg?react"; - -export default { - layer: LayerIcon, - addLayerStyle: AddLayerStyleButtonIcon, - layerStyle: LayerStyleIcon, - layerInspector: LayerInspector, - addLayer: AddLayerIcon, - zoomToLayer: ZoomToLayer, - file: File, - photooverlay: PrimPhotoOverlay, - arrowUpDown: ArrowUpDown, - arrowRight: ArrowRight, - arrowLeft: ArrowLeft, - arrowLongLeft: ArrowLongLeft, - arrowLongRight: ArrowLongRight, - arrowDown: ArrowDown, - arrowToggle: ArrowToggle, - cancel: Cancel, - crosshair: Crosshair, - folderPlus: FolderPlus, - plusSquare: PlusSquare, - ellipse: Ellipse, - playRight: PlayRight, - playLeft: PlayLeft, - timelinePlayLeft: TimelinePlayLeft, - timelinePlayRight: TimelinePlayRight, - pause: Pause, - slider: Slider, - set: Set, - storyPage: StoryPage, - square: Square, - swiper: Swiper, - book: Book, - plus: Plus, - timeline: Timeline, - actionbutton: ActionButton, - dashboard: Dashboard, - help: Help, - logout: Logout, - workspaceAdd: WorkspaceAdd, - workspaces: Workspaces, - checkmark: CheckMark, - minus: Minus, - alert: Alert, - dndHandle: DndHandle, - logo: Logo, - logoColorful: LogoColorful, - desktop: Desktop, - mobile: Mobile, - widgetSystem: WidgetSystem, - copy: Copy, - gearSix: GearSix, - pencilSimple: PencilSimple, - trash: Trash, - storyBlockEdit: Edit, - exit: Exit, - settings: Settings, - padding: Padding, - infobox: Infobox, - imageInfoboxBetaBlock: InfoboxImageBlock, - textInfoboxBetaBlock: TextBlock, - propertyInfoboxBetaBlock: InfoboxPropertyBlock, - clock: Clock, - textStoryBlock: TextBlock, - titleStoryBlock: TitleStoryBlock, - videoStoryBlock: VideoStoryBlock, - imageStoryBlock: ImageStoryBlock, - mdTextStoryBlock: MdTextStoryBlock, - cameraButtonStoryBlock: CameraButtonStoryBlock, - showLayersStoryBlock: ShowLayersStoryBlock, - timelineStoryBlock: TimelineStoryBlock, - timelineStoryBlockSolid: TimelineStoryBlockSolid, - nextPageStoryBlock: NextPageStoryBlock, - linkButtonStoryBlock: LinkButtonStoryBlock, - widget: Widgets, - widgets: Widgets, - menu: WidgetMenu, - button: WidgetButton, - storytelling: WidgetStory, - storytellingMenu: StorytellingMenu, - splashscreen: WidgetSplash, - navigator: WidgetNavigator, - navigatorAngle: NavigatorAngle, - compass: Compass, - compassFocus: CompassFocus, - house: House, - plugin: Plugin, - scene: Scene, - uploadZipPlugin: UploadZipPlugin, - publicGitHubRepo: PublicGitHubRepo, - marketplace: Marketplace, - bin: Bin, - install: Install, - uploadSimple: UploadSimple, - search: Search, - checkCircle: CheckCircle, - pointer: Pointer, - sketch: Sketch, - marker: Marker, - polyline: Polyline, - polygon: Polygon, - box: Box, - cylinder: Cylinder, - squareOutline: SquareOutline, - circleOutline: CircleOutline, - polygonExtruded: PolygonExtruded -}; diff --git a/web/src/beta/components/Icon/index.stories.tsx b/web/src/beta/components/Icon/index.stories.tsx deleted file mode 100644 index 70685ff19a..0000000000 --- a/web/src/beta/components/Icon/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Meta } from "@storybook/react"; - -import Icon from "."; - -const icon = - ''; - -export default { - component: Icon -} as Meta; - -export const Default = () => ; -export const Color = () => ; -export const Image = () => ; -export const Svg = () => ; -export const Wrapped = () => ( - -); diff --git a/web/src/beta/components/Icon/index.tsx b/web/src/beta/components/Icon/index.tsx deleted file mode 100644 index 86537f2cd2..0000000000 --- a/web/src/beta/components/Icon/index.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { ariaProps } from "@reearth/beta/utils/aria"; -import { styled } from "@reearth/services/theme"; -import { - AriaAttributes, - AriaRole, - CSSProperties, - MouseEvent, - memo, - useMemo -} from "react"; - -import Icons from "./icons"; - -export type Icons = keyof typeof Icons; - -export type Props = { - className?: string; - icon?: string | Icons; - size?: number; - color?: string; - stroke?: string; - style?: CSSProperties; - role?: AriaRole; - notransition?: boolean; - transitionDuration?: string; - onClick?: (e?: MouseEvent) => void; -} & AriaAttributes; - -const Icon: React.FC = ({ - className, - icon = "", - style, - color, - stroke, - size, - role, - notransition, - transitionDuration, - onClick, - ...props -}) => { - const SvgIcon = useMemo(() => { - const SvgComponent = Icons[icon as Icons]; - if (!SvgComponent) return null; - return styled(SvgComponent)<{ - color?: string; - stroke?: string; - size?: number; - }>` - font-size: 0; - display: inline-block; - width: ${({ size }) => size + "px"}; - height: ${({ size }) => size + "px"}; - color: ${({ color }) => color}; - ${({ stroke }) => stroke && `stroke: ${stroke};`} - transition-property: color, background; - `; - }, [icon]); - - const aria = useMemo(() => ariaProps(props), [props]); - - return SvgIcon ? ( - - ) : null; -}; - -export default memo(Icon); diff --git a/web/src/beta/components/NotFound/index.stories.tsx b/web/src/beta/components/NotFound/index.stories.tsx deleted file mode 100644 index 3afb792079..0000000000 --- a/web/src/beta/components/NotFound/index.stories.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { Meta } from "@storybook/react"; - -import NotFound from "."; - -export default { - component: NotFound -} as Meta; - -export const Default = () => ; diff --git a/web/src/beta/components/NotFound/index.tsx b/web/src/beta/components/NotFound/index.tsx deleted file mode 100644 index ee12ad4eeb..0000000000 --- a/web/src/beta/components/NotFound/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import Text from "@reearth/beta/components/Text"; -import { useT } from "@reearth/services/i18n"; -import { styled } from "@reearth/services/theme"; - -import Icon from "../Icon"; - -type Props = { - customHeader?: string; - customMessage?: string; - customType?: "error" | "warning"; -}; - -const NotFound: React.FC = ({ - customHeader, - customMessage, - customType -}) => { - const t = useT(); - - return ( - - - - - - - {customHeader ?? `404 ${t("Not found")}`} - {customMessage && ( - {customMessage} - )} - - - ); -}; - -export default NotFound; - -const Wrapper = styled.div` - display: flex; - justify-content: center; - padding-top: 30vh; - height: 100%; - background: ${({ theme }) => theme.bg[1]}; -`; - -const InnerWrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - max-width: 40vw; -`; - -const IconWrapper = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 5vh; - min-width: 260px; - max-width: 20vw; -`; - -const CustomMessage = styled(Text)` - margin-top: 10px; -`; diff --git a/web/src/beta/components/Popover/context.ts b/web/src/beta/components/Popover/context.ts deleted file mode 100644 index 91ffc652e0..0000000000 --- a/web/src/beta/components/Popover/context.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { createContext, useContext } from "react"; - -import usePopover from "@reearth/beta/components/Popover/hooks"; - -type ContextType = ReturnType | null; - -export const PopoverContext = createContext(null); - -export const usePopoverContext = () => { - const context = useContext(PopoverContext); - - if (context === null) { - throw new Error("Popover components must be wrapped in "); - } - - return context; -}; diff --git a/web/src/beta/components/Popover/hooks.ts b/web/src/beta/components/Popover/hooks.ts deleted file mode 100644 index 7793a48db2..0000000000 --- a/web/src/beta/components/Popover/hooks.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { - autoUpdate, - flip, - offset, - shift, - useClick, - useDismiss, - useFloating, - useInteractions, - useRole -} from "@floating-ui/react"; -import { useState, useMemo } from "react"; - -import { PopoverOptions } from "./types"; - -export default function usePopover({ - initialOpen = false, - placement = "bottom", - modal, - offset: offsetProps, - shift: shiftProps, - open: controlledOpen, - onOpenChange: setControlledOpen -}: PopoverOptions = {}) { - const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen); - - const open = controlledOpen ?? uncontrolledOpen; - const setOpen = setControlledOpen ?? setUncontrolledOpen; - - const data = useFloating({ - placement, - open, - onOpenChange: setOpen, - whileElementsMounted: autoUpdate, - middleware: [ - offset(offsetProps ?? 4), - flip({ - crossAxis: placement.includes("-"), - fallbackAxisSideDirection: "end", - padding: 4 - }), - shift(shiftProps ?? { padding: 4 }) - ] - }); - - const context = data.context; - - const click = useClick(context, { - enabled: controlledOpen == null - }); - const dismiss = useDismiss(context); - const role = useRole(context); - - const interactions = useInteractions([click, dismiss, role]); - - return useMemo( - () => ({ - open, - setOpen, - ...interactions, - ...data, - modal - }), - [open, setOpen, interactions, data, modal] - ); -} diff --git a/web/src/beta/components/Popover/index.stories.tsx b/web/src/beta/components/Popover/index.stories.tsx deleted file mode 100644 index bc6d515cec..0000000000 --- a/web/src/beta/components/Popover/index.stories.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; - -import * as Popover from "./"; - -export default { - component: Popover.Provider -} as Meta; - -type Story = StoryObj; - -export const Controlled: Story = { - render: (args) => { - return ; - }, - args: { - children: ( - <> - -
- Trigger(cannot toggle by click) -
- - -
- If you pass open or onOpenChange, you can handle open state by - yourself. -
- Which means the PopoverClose component does not change state - automatically but still causes event. -
- This component set as top placement, but it can automatically adjust - position to bottom. -
- Close - - - ), - open: true, - initialOpen: false, - placement: "top", - modal: true - } -}; - -export const Uncontrolled: Story = { - render: (args) => { - return ( -
- -
- ); - }, - args: { - children: ( - <> - -
Trigger
- - -
- If you do not pass both open and onOpenChange, automatically managed - open state by this component. -
- Close - - - ), - open: undefined, - onOpenChange: undefined, - initialOpen: true, - placement: "bottom", - offset: { - mainAxis: 20, - crossAxis: 300, - alignmentAxis: 0 - }, - modal: true - } -}; diff --git a/web/src/beta/components/Popover/index.tsx b/web/src/beta/components/Popover/index.tsx deleted file mode 100644 index aa378bc6da..0000000000 --- a/web/src/beta/components/Popover/index.tsx +++ /dev/null @@ -1,157 +0,0 @@ -import { - useMergeRefs, - FloatingPortal, - FloatingFocusManager, - useTransitionStyles -} from "@floating-ui/react"; -import { - PopoverContext, - usePopoverContext -} from "@reearth/beta/components/Popover/context"; -import { useTheme } from "@reearth/services/theme"; -import { - forwardRef, - isValidElement, - cloneElement, - MutableRefObject, - type ButtonHTMLAttributes, - type HTMLProps, - type ReactNode -} from "react"; - -import usePopover from "./hooks"; -import { PopoverOptions } from "./types"; - -// Basic structure comes from official example https://floating-ui.com/docs/react-examples . -export function Provider({ - children, - modal = false, - ...restOptions -}: { - children: ReactNode; -} & PopoverOptions) { - const popover = usePopover({ modal, ...restOptions }); - return ( - - {children} - - ); -} - -type TriggerProps = { - className?: string; - children: ReactNode; - asChild?: boolean; -}; - -export const Trigger = forwardRef< - HTMLElement, - HTMLProps & TriggerProps ->(function Trigger( - { children, asChild = false, className, ...props }, - propRef -) { - const context = usePopoverContext(); - const childrenRef = (children as any).ref; - const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]); - - // `asChild` allows the user to pass any element as the anchor - if (asChild && isValidElement(children)) { - return cloneElement( - children, - context.getReferenceProps({ - ref, - ...props, - ...children.props, - "data-state": context.open ? "open" : "closed" - }) - ); - } - - return ( - - ); -}); - -type ContentProps = { - className?: string; - attachToRoot?: boolean; -}; - -export const Content = forwardRef< - HTMLDivElement, - HTMLProps & ContentProps ->(function Content( - { style, className, attachToRoot = false, ...props }, - propRef -) { - const { context: floatingContext, ...context } = usePopoverContext(); - const theme = useTheme(); - const ref = useMergeRefs([context.refs.setFloating, propRef]); - const { isMounted, styles: transitionStyles } = useTransitionStyles( - floatingContext, - { - duration: 50 - } - ); - - if (!isMounted) return null; - - return ( - ) - : null - } - > - -
- {props.children} -
- - - ); -}); - -export const Close = forwardRef< - HTMLButtonElement, - ButtonHTMLAttributes ->(function PopoverClose(props, ref) { - const { setOpen } = usePopoverContext(); - return ( - {i.menuIcon && } - {i.menuTitle} - + ))} @@ -199,79 +198,84 @@ export default function MenuButton({ ); } +const Wrapper = styled("div")<{ button?: Button; publishedTheme?: Theme }>( + ({ theme, button, publishedTheme }) => ({ + borderRadius: `${spacingSizes["smallest"]}px`, + display: "flex", + alignItems: "center", + gap: theme.spacing.micro, + "&, > div": { + backgroundColor: button?.buttonBgcolor || publishedTheme?.background + } + }) +); -const Wrapper = styled.div<{ button?: Button; publishedTheme?: Theme }>` - border-radius: ${spacingSizes["smallest"]}px; - &, - > div { - background-color: ${({ button, publishedTheme }) => - button?.buttonBgcolor || publishedTheme}; - } -`; - -const Button = styled.div<{ button?: Button; publishedTheme?: Theme }>` - display: flex; - border-radius: ${spacingSizes["smallest"]}px; - min-width: 35px; - height: 35px; - padding: 0 10px; - line-height: 35px; - box-sizing: border-box; - color: ${({ button, publishedTheme }) => - button?.buttonColor || publishedTheme?.mainText}; - cursor: pointer; - align-items: center; - user-select: none; - - &:hover { - background: ${({ publishedTheme, button }) => - mask(button?.buttonBgcolor) || publishedTheme?.mask}; - } -`; +const Button = styled("div")<{ button?: Button; publishedTheme?: Theme }>( + ({ theme, button, publishedTheme }) => ({ + borderRadius: `${spacingSizes["smallest"]}px`, + display: "flex", + minWidth: 35, + height: 35, + padding: `0 ${theme.spacing.small + 2}px`, + lineHeight: 35, + boxSizing: "border-box", + color: button ? button?.buttonColor : publishedTheme?.mainText, + cursor: "pointer", + alignItems: "center", + userSelect: "none", + ["&:hover"]: { + background: publishedTheme + ? publishedTheme?.mask + : mask(button?.buttonBgcolor) + } + }) +); -const MenuWrapper = styled.div` - z-index: ${({ theme }) => theme.zIndexes.visualizer.widget}; - border-radius: 3px; - max-height: 30vh; - overflow: auto; - -webkit-overflow-scrolling: touch; -`; +const MenuWrapper = styled("div")(({ theme }) => ({ + zIndex: theme.zIndexes.visualizer.widget, + borderRadius: theme.radius.smallest + 1, + maxHeight: "30vh", + overflow: "auto", + WebkitOverflowScrolling: "touch" +})); -const MenuInnerWrapper = styled.div<{ +const MenuInnerWrapper = styled("div")<{ button?: Button; publishedTheme?: Theme; -}>` - min-width: 35px; - width: 100%; - color: ${({ button, publishedTheme }) => - button?.buttonColor || publishedTheme?.mainText}; - white-space: nowrap; -`; +}>(({ button, publishedTheme }) => ({ + minWidth: 35, + width: "100%", + color: button?.buttonColor || publishedTheme?.mainText, + whiteSpace: "nowrap" +})); const MenuItem = styled(Flex)<{ item?: MenuItem; button?: Button; publishedTheme?: Theme; -}>` - min-height: ${({ item }) => (item?.menuType === "border" ? null : "25px")}; - border-radius: ${({ item }) => (item?.menuType === "border" ? null : "3px")}; - padding: ${({ item }) => - item?.menuType === "border" ? "0 10px" : "2px 10px"}; - cursor: ${({ item }) => (item?.menuType === "border" ? null : "pointer")}; - background: ${({ publishedTheme, item, button }) => +}>(({ item, button, publishedTheme, theme }) => ({ + minHeight: item?.menuType === "border" ? undefined : "25px", + borderRadius: + item?.menuType === "border" ? undefined : theme.radius.small - 1, + padding: + item?.menuType === "border" + ? `0 ${theme.spacing.small + 2}px` + : `${theme.spacing.micro}px ${theme.spacing.small + 2}px`, + cursor: item?.menuType === "border" ? undefined : "pointer", + background: item?.menuType === "border" ? mask(button?.buttonBgcolor) || publishedTheme?.mask - : null}; - border-bottom: ${({ item, publishedTheme, button }) => + : undefined, + borderBottom: item?.menuType === "border" ? `1px solid ${button?.buttonColor || publishedTheme?.weakText}` - : null}; - user-select: none; + : undefined, + userSelect: "none", - &:hover { - background: ${({ publishedTheme, item, button }) => + "&:hover": { + background: item?.menuType === "border" - ? null - : mask(button?.buttonBgcolor) || publishedTheme?.mask}; + ? undefined + : mask(button?.buttonBgcolor) || publishedTheme?.mask } -`; +})); diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx index a3682c5850..d73d77246b 100644 --- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Navigator/UI/index.tsx @@ -1,4 +1,4 @@ -import Icon from "@reearth/beta/components/Icon"; +import { Icon } from "@reearth/beta/lib/reearth-ui"; import { useT } from "@reearth/services/i18n"; import { styled } from "@reearth/services/theme"; import { memo } from "react"; @@ -69,11 +69,11 @@ const NavigatorUI: React.FC = memo(function NavigatorPresenterMemo({ onMouseDown={handleOnMouseDownCompass} publishedTheme={theme} > - {isMovingAngle && ( @@ -92,7 +92,7 @@ const NavigatorUI: React.FC = memo(function NavigatorPresenterMemo({ > @@ -101,113 +101,123 @@ const NavigatorUI: React.FC = memo(function NavigatorPresenterMemo({ - + - + ); }); -const Container = styled.div` - display: inline-flex; - flex-direction: column; - align-items: center; -`; - -const CompassContainer = styled.div` - position: relative; - display: inline-grid; - place-items: center; -`; - -const Help = styled.button` - position: absolute; - height: 32px; - width: 32px; - border-radius: 16px 0 0 16px; - left: -28px; - background: #4a4a4a; - color: #fff; - user-select: none; -`; - -const Compass = styled.div` - position: relative; - display: inline-grid; - place-items: center; - width: 64px; - height: 64px; - cursor: pointer; -`; - -const CompassIcon = styled.div<{ publishedTheme?: Theme }>` - position: absolute; - top: 0; - left: 0; - width: 64px; - height: 64px; - color: ${({ theme, publishedTheme }) => - publishedTheme?.mainText || theme.content.main}; - & path { - fill: ${({ theme, publishedTheme }) => - publishedTheme?.mainText || theme.content.main}; - } - & circle { - stroke: ${({ theme, publishedTheme }) => - publishedTheme?.background || theme.content.withBackground}; - } -`; - -const CompassFocusIcon = styled.div` - position: absolute; - top: 0; - left: 0; - opacity: 0.8; - width: 64px; - height: 64px; -`; - -const AngleIcon = styled.div<{ publishedTheme?: Theme }>` - & circle { - fill: ${({ theme, publishedTheme }) => - publishedTheme?.background || theme.bg[0]}; - } - & g { - stroke: ${({ theme, publishedTheme }) => - publishedTheme?.mainText || theme.content.main}; - } - display: inline-block; - height: 32px; - width: 32px; -`; - -const Tool = styled.div<{ publishedTheme?: Theme }>` - display: flex; - flex-direction: column; - align-items: center; - background: ${({ theme, publishedTheme }) => - publishedTheme?.background || theme.bg[0]}; - border-radius: 16px; - margin-top: 8px; -`; - -const ToolIconButton = styled.button<{ publishedTheme?: Theme }>` - color: ${({ theme, publishedTheme }) => - publishedTheme?.mainText || theme.content.main}; - height: 32px; - width: 32px; - display: grid; - place-items: center; -`; +const Container = styled("div")(() => ({ + display: "inline-flex", + flexDirection: "column", + alignItems: "center" +})); + +const CompassContainer = styled("div")(() => ({ + display: "inline-grid", + position: "relative", + placeItems: "center" +})); + +const Help = styled("button")(({ theme }) => ({ + position: "absolute", + height: 32, + width: 32, + borderRadius: `16px 0 0 16px`, + left: "-28px", + background: "#4a4a4a", + color: theme.item.default, + userSelect: "none" +})); + +const Compass = styled("div")(() => ({ + position: "relative", + display: "inline-grid", + placeItems: "center", + width: 64, + height: 64, + cursor: "pointer" +})); + +const CompassIconWrapper = styled(Icon)<{ compassDegree: number }>( + ({ compassDegree }) => ({ + transform: `rotate(${compassDegree}deg)` + }) +); + +const CompassIcon = styled("div")<{ publishedTheme?: Theme }>( + ({ theme, publishedTheme }) => ({ + position: "absolute", + top: 0, + left: 0, + width: 64, + height: 64, + color: publishedTheme?.mainText || theme.content.main, + "& path": { + fill: publishedTheme?.mainText || theme.content.main + }, + "& circle": { + stroke: publishedTheme?.background || theme.content.withBackground + } + }) +); + +const CompassFocusIcon = styled("div")(() => ({ + position: "absolute", + top: 0, + left: 0, + opacity: 0.8, + width: 64, + height: 64 +})); + +const AngleIcon = styled("div")<{ publishedTheme?: Theme }>( + ({ theme, publishedTheme }) => ({ + "& circle": { + fill: publishedTheme?.background || theme.bg[0] + }, + "& g": { + stroke: publishedTheme?.mainText || theme.content.main + }, + display: "inline-block", + height: 32, + width: 32 + }) +); + +const Tool = styled("div")<{ publishedTheme?: Theme }>( + ({ publishedTheme, theme }) => ({ + display: "flex", + flexDirection: "column", + alignItems: "center", + background: publishedTheme?.background + ? publishedTheme?.background + : theme.bg[0], + borderRadius: 16, + marginTop: theme.spacing.small + }) +); + +const ToolIconButton = styled("button")<{ publishedTheme?: Theme }>( + ({ publishedTheme, theme }) => ({ + height: 32, + width: 32, + display: "grid", + placeItems: "center", + color: publishedTheme?.mainText + ? publishedTheme?.mainText + : theme.content.main + }) +); export default NavigatorUI; diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.tsx index 8e20058e8f..c02d61687d 100644 --- a/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.tsx +++ b/web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/index.tsx @@ -1,5 +1,5 @@ -import Icon from "@reearth/beta/components/Icon"; -import Text from "@reearth/beta/components/Text"; +import { Icon } from "@reearth/beta/lib/reearth-ui"; +import Text from "@reearth/beta/ui/widgetui/Text"; import { styled, PublishTheme } from "@reearth/services/theme"; import { memo } from "react"; @@ -80,7 +80,7 @@ const Timeline: React.FC = memo(function TimelinePresenter({
- +
@@ -90,7 +90,7 @@ const Timeline: React.FC = memo(function TimelinePresenter({ isPlaying={isPlayingReversed} onClick={toggleIsPlayingReversed} > - +
  • @@ -100,7 +100,7 @@ const Timeline: React.FC = memo(function TimelinePresenter({ isPlaying={isPlaying} onClick={toggleIsPlaying} > - +
  • diff --git a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx index 9147ae4adc..8c64d29f4c 100644 --- a/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx +++ b/web/src/beta/features/Visualizer/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx @@ -1,5 +1,4 @@ -import Icon from "@reearth/beta/components/Icon"; -import Slide from "@reearth/beta/components/Slide"; +import { Icon, Slide } from "@reearth/beta/lib/reearth-ui"; import { styled } from "@reearth/services/theme"; import { ReactNode, useState, useMemo, useEffect } from "react"; import { GridSection } from "react-align"; diff --git a/web/src/beta/features/Visualizer/FovSlider/hooks.ts b/web/src/beta/features/Visualizer/FovSlider/hooks.ts deleted file mode 100644 index 8e4af44e63..0000000000 --- a/web/src/beta/features/Visualizer/FovSlider/hooks.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { Camera } from "@reearth/beta/utils/value"; -import { useCallback } from "react"; - -type Params = { - onIsCapturingChange?: (isCapturing: boolean) => void; - camera?: Camera; - onFovChange?: (fov: number) => void; -}; - -export default ({ onIsCapturingChange, camera, onFovChange }: Params) => { - const finishCapture = useCallback( - () => onIsCapturingChange?.(false), - [onIsCapturingChange] - ); - - const updateFov = useCallback( - (fov: number) => - onFovChange?.(Math.max(0.01, Math.min(fov, Math.PI - 10 ** -10))), - [onFovChange] - ); - - const isAwayTarget = useCallback((e: Event) => { - const target = e.target as HTMLElement | null; - const popups = Array.from(document.querySelectorAll("[data-camera-popup]")); - return !popups.some((element) => element.contains(target)); - }, []); - - const handleClickAway = useCallback( - (e: Event) => isAwayTarget(e) && finishCapture(), - [isAwayTarget, finishCapture] - ); - - return { camera, updateFov, handleClickAway }; -}; diff --git a/web/src/beta/features/Visualizer/FovSlider/index.tsx b/web/src/beta/features/Visualizer/FovSlider/index.tsx deleted file mode 100644 index 4e9c4ef25d..0000000000 --- a/web/src/beta/features/Visualizer/FovSlider/index.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import FloatedPanel from "@reearth/beta/components/FloatedPanel"; -import Slider from "@reearth/beta/components/Slider"; -import Text from "@reearth/beta/components/Text"; -import { Camera } from "@reearth/beta/utils/value"; -import { useT } from "@reearth/services/i18n"; -import { styled, useTheme } from "@reearth/services/theme"; -import React from "react"; - -import useHooks from "./hooks"; - -type Props = { - visible?: boolean; - onIsCapturingChange?: (isCapturing: boolean) => void; - camera?: Camera; - onFovChange?: (fov: number) => void; -}; - -const FovSlider: React.FC = ({ - visible, - onIsCapturingChange, - camera, - onFovChange -}) => { - const t = useT(); - - const { updateFov, handleClickAway } = useHooks({ - onIsCapturingChange, - camera, - onFovChange - }); - - const fov = camera?.fov && Math.round(camera?.fov * 1000) / 1000; - const theme = useTheme(); - return ( - - - - - {t("Angle")} - - - - - - - {t("Narrow")} - {t("Wide")} - - - - - - ); -}; - -const StyledFloatedPanel = styled(FloatedPanel)` - top: 10px; - right: 10px; -`; - -const Wrapper = styled.div` - display: flex; - flex-direction: column; - width: 220px; - background: ${({ theme }) => theme.bg[1]}; - box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); - border-radius: 5px; - padding: 10px; -`; - -const FovField = styled.div` - display: flex; -`; - -const FieldForm = styled.div` - flex: 1; - display: flex; - flex-direction: column; -`; - -const FieldSlider = styled.div` - display: flex; - flex: 1; - padding: 0 8px; -`; - -const FieldDescriptions = styled.div` - display: flex; - justify-content: space-between; -`; - -export default FovSlider; diff --git a/web/src/beta/components/Icon/Icons/arrowLongLeft.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/ArrowLongLeft.svg similarity index 100% rename from web/src/beta/components/Icon/Icons/arrowLongLeft.svg rename to web/src/beta/lib/reearth-ui/components/Icon/Icons/ArrowLongLeft.svg diff --git a/web/src/beta/components/Icon/Icons/arrowLongRight.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/ArrowLongRight.svg similarity index 100% rename from web/src/beta/components/Icon/Icons/arrowLongRight.svg rename to web/src/beta/lib/reearth-ui/components/Icon/Icons/ArrowLongRight.svg diff --git a/web/src/beta/components/Icon/Icons/compass.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/Compass.svg similarity index 99% rename from web/src/beta/components/Icon/Icons/compass.svg rename to web/src/beta/lib/reearth-ui/components/Icon/Icons/Compass.svg index 7d42b71a4b..7d32d1b494 100644 --- a/web/src/beta/components/Icon/Icons/compass.svg +++ b/web/src/beta/lib/reearth-ui/components/Icon/Icons/Compass.svg @@ -8,4 +8,4 @@ - + \ No newline at end of file diff --git a/web/src/beta/lib/reearth-ui/components/Icon/Icons/CompassFocus.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/CompassFocus.svg new file mode 100644 index 0000000000..e80a39d13d --- /dev/null +++ b/web/src/beta/lib/reearth-ui/components/Icon/Icons/CompassFocus.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/web/src/beta/lib/reearth-ui/components/Icon/Icons/DownloadSimple.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/DownloadSimple.svg index 338dac2544..bb9067fb78 100644 --- a/web/src/beta/lib/reearth-ui/components/Icon/Icons/DownloadSimple.svg +++ b/web/src/beta/lib/reearth-ui/components/Icon/Icons/DownloadSimple.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/web/src/beta/components/Icon/Icons/ellipse.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/Ellipse.svg similarity index 100% rename from web/src/beta/components/Icon/Icons/ellipse.svg rename to web/src/beta/lib/reearth-ui/components/Icon/Icons/Ellipse.svg diff --git a/web/src/beta/lib/reearth-ui/components/Icon/Icons/Home.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/Home.svg new file mode 100644 index 0000000000..5cf975efca --- /dev/null +++ b/web/src/beta/lib/reearth-ui/components/Icon/Icons/Home.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/web/src/beta/components/Icon/Icons/navigatorAngle.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/NavigatorAngle.svg similarity index 100% rename from web/src/beta/components/Icon/Icons/navigatorAngle.svg rename to web/src/beta/lib/reearth-ui/components/Icon/Icons/NavigatorAngle.svg diff --git a/web/src/beta/lib/reearth-ui/components/Icon/Icons/Pallete.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/Pallete.svg deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/web/src/beta/components/Icon/Icons/pause.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/Pause.svg similarity index 63% rename from web/src/beta/components/Icon/Icons/pause.svg rename to web/src/beta/lib/reearth-ui/components/Icon/Icons/Pause.svg index 38cd5e13fa..4ab75bf5ea 100644 --- a/web/src/beta/components/Icon/Icons/pause.svg +++ b/web/src/beta/lib/reearth-ui/components/Icon/Icons/Pause.svg @@ -1,3 +1,3 @@ - + - + \ No newline at end of file diff --git a/web/src/beta/components/Icon/Icons/play-left.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/PlayLeft.svg similarity index 100% rename from web/src/beta/components/Icon/Icons/play-left.svg rename to web/src/beta/lib/reearth-ui/components/Icon/Icons/PlayLeft.svg diff --git a/web/src/beta/lib/reearth-ui/components/Icon/Icons/PlayLeftFilled.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/PlayLeftFilled.svg new file mode 100644 index 0000000000..1ffbe6ff4e --- /dev/null +++ b/web/src/beta/lib/reearth-ui/components/Icon/Icons/PlayLeftFilled.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/src/beta/components/Icon/Icons/play-right.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/PlayRight.svg similarity index 100% rename from web/src/beta/components/Icon/Icons/play-right.svg rename to web/src/beta/lib/reearth-ui/components/Icon/Icons/PlayRight.svg diff --git a/web/src/beta/lib/reearth-ui/components/Icon/Icons/PlayRightFilled.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/PlayRightFilled.svg new file mode 100644 index 0000000000..329be153c3 --- /dev/null +++ b/web/src/beta/lib/reearth-ui/components/Icon/Icons/PlayRightFilled.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/src/beta/components/Icon/Icons/reearthLogo.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/ReearthLogo.svg similarity index 100% rename from web/src/beta/components/Icon/Icons/reearthLogo.svg rename to web/src/beta/lib/reearth-ui/components/Icon/Icons/ReearthLogo.svg diff --git a/web/src/beta/components/Icon/Icons/reearthLogoColorful.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/ReearthLogoColorful.svg similarity index 100% rename from web/src/beta/components/Icon/Icons/reearthLogoColorful.svg rename to web/src/beta/lib/reearth-ui/components/Icon/Icons/ReearthLogoColorful.svg diff --git a/web/src/beta/lib/reearth-ui/components/Icon/Icons/SignIn.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/SignIn.svg index be1527643a..b28fd54ba9 100644 --- a/web/src/beta/lib/reearth-ui/components/Icon/Icons/SignIn.svg +++ b/web/src/beta/lib/reearth-ui/components/Icon/Icons/SignIn.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/web/src/beta/components/Icon/Icons/timeline.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/Timeline.svg similarity index 100% rename from web/src/beta/components/Icon/Icons/timeline.svg rename to web/src/beta/lib/reearth-ui/components/Icon/Icons/Timeline.svg diff --git a/web/src/beta/lib/reearth-ui/components/Icon/icons.ts b/web/src/beta/lib/reearth-ui/components/Icon/icons.ts index 57017f9878..ea179b51b2 100644 --- a/web/src/beta/lib/reearth-ui/components/Icon/icons.ts +++ b/web/src/beta/lib/reearth-ui/components/Icon/icons.ts @@ -1,6 +1,10 @@ +/// + import AddStyle from "./Icons/AddStyle.svg?react"; import Appearance from "./Icons/Apperance.svg?react"; import ArrowLeftRight from "./Icons/ArrowLeftRight.svg?react"; +import ArrowLongLeft from "./Icons/ArrowLongLeft.svg?react"; +import ArrowLongRight from "./Icons/ArrowLongRight.svg?react"; import ArrowsHorizontalIn from "./Icons/ArrowsHorizontalIn.svg?react"; import ArrowsHorizontalOut from "./Icons/ArrowsHorizontalOut.svg?react"; import Article from "./Icons/Article.svg?react"; @@ -29,6 +33,8 @@ import ClockAfternoon from "./Icons/ClockAfternoon.svg?react"; import ClockClockwise from "./Icons/ClockClockwise.svg?react"; import ClockFilled from "./Icons/ClockFilled.svg?react"; import Close from "./Icons/Close.svg?react"; +import Compass from "./Icons/Compass.svg?react"; +import CompassFocus from "./Icons/CompassFocus.svg?react"; import Copy from "./Icons/Copy.svg?react"; import Crosshair from "./Icons/Crosshair.svg?react"; import Cube from "./Icons/Cube.svg?react"; @@ -43,6 +49,7 @@ import DotsThreeVertical from "./Icons/DotsThreeVertical.svg?react"; import DownloadSimple from "./Icons/DownloadSimple.svg?react"; import EditMode from "./Icons/EditMode.svg?react"; import Editor from "./Icons/Editor.svg?react"; +import Ellipse from "./Icons/Ellipse.svg?react"; import Exit from "./Icons/Exit.svg?react"; import ExitFilled from "./Icons/ExitFilled.svg?react"; import Extrude from "./Icons/Extrude.svg?react"; @@ -60,6 +67,7 @@ import FolderSimplePlus from "./Icons/FolderSimplePlus.svg?react"; import GlobeSimple from "./Icons/GlobeSimple.svg?react"; import Grid from "./Icons/Grid.svg?react"; import Hand from "./Icons/Hand.svg?react"; +import Home from "./Icons/Home.svg?react"; import If from "./Icons/If.svg?react"; import Image from "./Icons/Image.svg?react"; import ImageFilled from "./Icons/ImageFilled.svg?react"; @@ -81,16 +89,22 @@ import MapPin from "./Icons/MapPin.svg?react"; import MapTrifold from "./Icons/MapTrifold.svg?react"; import Minus from "./Icons/Minus.svg?react"; import More from "./Icons/More.svg?react"; +import NavigatorAngle from "./Icons/NavigatorAngle.svg?react"; import Notebook from "./Icons/Notebook.svg?react"; import Padding from "./Icons/Padding.svg?react"; import Page from "./Icons/Page.svg?react"; import Palette from "./Icons/Palette.svg?react"; import Paperclip from "./Icons/Paperclip.svg?react"; import PaperPlaneTilt from "./Icons/PaperPlaneTilt.svg?react"; +import Pause from "./Icons/Pause.svg?react"; import PencilFilled from "./Icons/PencilFilled.svg?react"; import PencilLilne from "./Icons/PencilLine.svg?react"; import PencilSimple from "./Icons/PencilSimple.svg?react"; import Play from "./Icons/Play.svg?react"; +import PlayLeft from "./Icons/PlayLeft.svg?react"; +import PlayLeftFilled from "./Icons/PlayLeftFilled.svg?react"; +import PlayRight from "./Icons/PlayRight.svg?react"; +import PlayRightFilled from "./Icons/PlayRightFilled.svg?react"; import Plugin from "./Icons/plugin.svg?react"; import PluginInstall from "./Icons/PluginInstall.svg?react"; import PluginUpdate from "./Icons/PluginUpdate.svg?react"; @@ -102,6 +116,8 @@ import Polyline from "./Icons/Polyline.svg?react"; import PublicGitHubRepo from "./Icons/PublicGitHubRepo.svg?react"; import PuzzlePiece from "./Icons/PuzzlePiece.svg?react"; import Question from "./Icons/Question.svg?react"; +import ReearthLogo from "./Icons/ReearthLogo.svg?react"; +import ReearthLogoColorful from "./Icons/ReearthLogoColorful.svg?react"; import Return from "./Icons/Return.svg?react"; import Rows from "./Icons/Rows.svg?react"; import Setting from "./Icons/Setting.svg?react"; @@ -128,6 +144,7 @@ import TextBolder from "./Icons/TextBolder.svg?react"; import TextItalic from "./Icons/TextItalic.svg?react"; import TextT from "./Icons/TextT.svg?react"; import TextUnderline from "./Icons/TextUnderline.svg?react"; +import Timeline from "./Icons/Timeline.svg?react"; import TimeOrder from "./Icons/TimeOrder.svg?react"; import TimeOrderInverse from "./Icons/TimeOrderInverse.svg?react"; import Trash from "./Icons/Trash.svg?react"; @@ -145,6 +162,8 @@ export default { addStyle: AddStyle, appearance: Appearance, arrowLeftRight: ArrowLeftRight, + arrowLongLeft: ArrowLongLeft, + arrowLongRight: ArrowLongRight, arrowsHorizontalIn: ArrowsHorizontalIn, arrowsHorizontalOut: ArrowsHorizontalOut, article: Article, @@ -173,6 +192,8 @@ export default { clockAfternoon: ClockAfternoon, clockClockwise: ClockClockwise, close: Close, + compass: Compass, + compassFocus: CompassFocus, copy: Copy, crosshair: Crosshair, cube: Cube, @@ -187,6 +208,7 @@ export default { downloadSimple: DownloadSimple, editMode: EditMode, editor: Editor, + ellipse: Ellipse, exit: Exit, exitFilled: ExitFilled, extrude: Extrude, @@ -204,6 +226,7 @@ export default { globeSimple: GlobeSimple, grid: Grid, hand: Hand, + home: Home, if: If, image: Image, imageFilled: ImageFilled, @@ -224,16 +247,22 @@ export default { mapTrifold: MapTrifold, minus: Minus, more: More, + navigatorAngle: NavigatorAngle, notebook: Notebook, padding: Padding, page: Page, palette: Palette, paperclip: Paperclip, paperPlaneTilt: PaperPlaneTilt, + pause: Pause, pencilFilled: PencilFilled, pencilLine: PencilLilne, pencilSimple: PencilSimple, play: Play, + playLeft: PlayLeft, + playRight: PlayRight, + playLeftFilled: PlayLeftFilled, + playRightFilled: PlayRightFilled, plugin: Plugin, plus: Plus, pluginInstall: PluginInstall, @@ -245,6 +274,8 @@ export default { publicGitHubRepo: PublicGitHubRepo, puzzlePiece: PuzzlePiece, question: Question, + reearthLogo: ReearthLogo, + reearthLogoColorful: ReearthLogoColorful, return: Return, rows: Rows, setting: Setting, @@ -272,6 +303,7 @@ export default { textItalic: TextItalic, textT: TextT, textUnderline: TextUnderline, + timeline: Timeline, timeOrder: TimeOrder, timeOrderInverse: TimeOrderInverse, trash: Trash, diff --git a/web/src/beta/lib/reearth-ui/components/Icon/index.tsx b/web/src/beta/lib/reearth-ui/components/Icon/index.tsx index 830f61c18a..9ea1390410 100644 --- a/web/src/beta/lib/reearth-ui/components/Icon/index.tsx +++ b/web/src/beta/lib/reearth-ui/components/Icon/index.tsx @@ -10,13 +10,15 @@ export type IconProps = { size?: "large" | "normal" | "small" | number; color?: string; className?: string; + ariaLabel?: string; }; export const Icon: FC = ({ icon, size = "normal", color, - className + className, + ariaLabel }) => { const theme = useTheme(); const SvgIcon = useMemo(() => { @@ -36,6 +38,11 @@ export const Icon: FC = ({ }, [icon, theme]); return SvgIcon ? ( - + ) : null; }; diff --git a/web/src/beta/lib/reearth-ui/components/Markdown/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Markdown/index.stories.tsx index a8048ff9ec..9bd4cddee7 100644 --- a/web/src/beta/lib/reearth-ui/components/Markdown/index.stories.tsx +++ b/web/src/beta/lib/reearth-ui/components/Markdown/index.stories.tsx @@ -1,7 +1,7 @@ import { styled } from "@reearth/services/theme"; import { Meta, StoryObj } from "@storybook/react"; -import { Markdown, Props } from "."; +import { Markdown, MarkdownProps } from "."; const markdown = ` > A block quote with ~strikethrough~ and a URL: https://reactjs.org. @@ -30,7 +30,7 @@ export default meta; type Story = StoryObj; -export const Default: Story = (args: Props) => { +export const Default: Story = (args: MarkdownProps) => { return (
    diff --git a/web/src/beta/lib/reearth-ui/components/Markdown/index.tsx b/web/src/beta/lib/reearth-ui/components/Markdown/index.tsx index bb5230a6a6..890f7d4893 100644 --- a/web/src/beta/lib/reearth-ui/components/Markdown/index.tsx +++ b/web/src/beta/lib/reearth-ui/components/Markdown/index.tsx @@ -5,7 +5,7 @@ import ReactMarkdown from "react-markdown"; import gfm from "remark-gfm"; import tinycolor from "tinycolor2"; -export type Props = { +export type MarkdownProps = { className?: string; children?: string; styles?: Typography; @@ -16,7 +16,7 @@ export type Props = { const plugins = [gfm]; -export const Markdown: FC = ({ +export const Markdown: FC = ({ className, styles, backgroundColor, diff --git a/web/src/beta/components/Slide/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Slide/index.stories.tsx similarity index 97% rename from web/src/beta/components/Slide/index.stories.tsx rename to web/src/beta/lib/reearth-ui/components/Slide/index.stories.tsx index 9d25453ae4..24161062e6 100644 --- a/web/src/beta/components/Slide/index.stories.tsx +++ b/web/src/beta/lib/reearth-ui/components/Slide/index.stories.tsx @@ -2,7 +2,7 @@ import { styled } from "@reearth/services/theme"; import { Meta } from "@storybook/react"; import { useState } from "react"; -import Slide from "."; +import { Slide } from "."; const Wrapper = styled.div` width: 200px; diff --git a/web/src/beta/lib/reearth-ui/components/Slide/index.tsx b/web/src/beta/lib/reearth-ui/components/Slide/index.tsx new file mode 100644 index 0000000000..5840cf2f67 --- /dev/null +++ b/web/src/beta/lib/reearth-ui/components/Slide/index.tsx @@ -0,0 +1,46 @@ +import { styled } from "@reearth/services/theme"; +import React, { FC, ReactNode } from "react"; + +export type SlideProps = { + className?: string; + children?: ReactNode; + pos?: number; +}; + +export const Slide: FC = ({ className, children, pos }) => { + return ( + + + {React.Children.map(children, (child) => + React.isValidElement(child) ? ( + {child} + ) : null + )} + + + ); +}; + +const Wrapper = styled.div(() => ({ + width: "100%", + height: "100%", + overflow: "hidden" +})); + +const Inner = styled.div<{ pos?: number }>(({ pos }) => ({ + position: "relative", + transform: `translateX(-${(pos ?? 0) * 100}%)`, + transition: "transform 0.1s ease", + display: "flex", + flexWrap: "nowrap", + alignItems: "stretch", + width: "100%", + height: "100%" +})); + +const Page = styled.div(() => ({ + flex: "0 0 100%", + width: "100%", + display: "flex", + justifyContent: "space-between" +})); diff --git a/web/src/beta/components/Slider/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/Slider/index.stories.tsx similarity index 91% rename from web/src/beta/components/Slider/index.stories.tsx rename to web/src/beta/lib/reearth-ui/components/Slider/index.stories.tsx index d29a12173d..44bc23ffcd 100644 --- a/web/src/beta/components/Slider/index.stories.tsx +++ b/web/src/beta/lib/reearth-ui/components/Slider/index.stories.tsx @@ -3,7 +3,7 @@ import { useArgs } from "@storybook/preview-api"; import { Meta, StoryObj } from "@storybook/react"; import { useCallback } from "react"; -import Slider, { Props } from "."; +import { Slider, SliderProps } from "."; const meta: Meta = { component: Slider @@ -13,7 +13,7 @@ type Story = StoryObj; export default meta; -export const Default: Story = (args: Props) => { +export const Default: Story = (args: SliderProps) => { const [_, updateArgs] = useArgs(); const handleChange = useCallback( diff --git a/web/src/beta/components/Slider/index.tsx b/web/src/beta/lib/reearth-ui/components/Slider/index.tsx similarity index 94% rename from web/src/beta/components/Slider/index.tsx rename to web/src/beta/lib/reearth-ui/components/Slider/index.tsx index f1c458daed..b9e231190a 100644 --- a/web/src/beta/components/Slider/index.tsx +++ b/web/src/beta/lib/reearth-ui/components/Slider/index.tsx @@ -6,12 +6,12 @@ import "rc-slider/assets/index.css"; const SliderWithTooltip = RCSlider.createSliderWithTooltip(RCSlider); -export type Props = { +export type SliderProps = { min?: number; max?: number; } & ComponentProps; -const Slider: React.FC = ({ ...props }) => { +export const Slider: React.FC = ({ ...props }) => { const calculatedStep = props.step ? props.step : props.max @@ -68,5 +68,3 @@ const SliderStyled = styled.div<{ disabled: boolean }>` box-shadow: ${({ theme }) => theme.shadow.button}; } `; - -export default Slider; diff --git a/web/src/beta/lib/reearth-ui/components/index.ts b/web/src/beta/lib/reearth-ui/components/index.ts index 08431d0e61..6247751adf 100644 --- a/web/src/beta/lib/reearth-ui/components/index.ts +++ b/web/src/beta/lib/reearth-ui/components/index.ts @@ -26,3 +26,5 @@ export * from "./Radio"; export * from "./RadioGroup"; export * from "./CheckBox"; export * from "./Markdown"; +export * from "./Slider"; +export * from "./Slide"; diff --git a/web/src/beta/pages/EditorPage/index.tsx b/web/src/beta/pages/EditorPage/index.tsx index 3a1bff9b5a..1078951474 100644 --- a/web/src/beta/pages/EditorPage/index.tsx +++ b/web/src/beta/pages/EditorPage/index.tsx @@ -1,6 +1,6 @@ -import NotFound from "@reearth/beta/components/NotFound"; import Editor from "@reearth/beta/features/Editor"; import { isTab } from "@reearth/beta/features/Navbar"; +import NotFound from "@reearth/beta/features/NotFound"; import Page from "@reearth/beta/pages/Page"; import { FC } from "react"; import { useParams } from "react-router-dom"; diff --git a/web/src/beta/pages/NotFound/index.tsx b/web/src/beta/pages/NotFound/index.tsx new file mode 100644 index 0000000000..04224fa683 --- /dev/null +++ b/web/src/beta/pages/NotFound/index.tsx @@ -0,0 +1,10 @@ +import NotFound from "@reearth/beta/features/NotFound"; +import { FC } from "react"; + +import Page from "../Page"; + +const NotFoundPage: FC = () => { + return } />; +}; + +export default NotFoundPage; diff --git a/web/src/beta/pages/ProjectSettingsPage/index.tsx b/web/src/beta/pages/ProjectSettingsPage/index.tsx index ca17450fee..4b703dc92f 100644 --- a/web/src/beta/pages/ProjectSettingsPage/index.tsx +++ b/web/src/beta/pages/ProjectSettingsPage/index.tsx @@ -1,4 +1,4 @@ -import NotFound from "@reearth/beta/components/NotFound"; +import NotFound from "@reearth/beta/features/NotFound"; import ProjectSettings, { isProjectSettingTab } from "@reearth/beta/features/ProjectSettings"; diff --git a/web/src/beta/components/Icon/Icons/defaultBetaProjectImage.png b/web/src/beta/ui/assets/defaultBetaProjectImage.png similarity index 100% rename from web/src/beta/components/Icon/Icons/defaultBetaProjectImage.png rename to web/src/beta/ui/assets/defaultBetaProjectImage.png diff --git a/web/src/beta/components/Button/index.stories.tsx b/web/src/beta/ui/widgetui/Button/index.stories.tsx similarity index 100% rename from web/src/beta/components/Button/index.stories.tsx rename to web/src/beta/ui/widgetui/Button/index.stories.tsx diff --git a/web/src/beta/components/Button/index.tsx b/web/src/beta/ui/widgetui/Button/index.tsx similarity index 95% rename from web/src/beta/components/Button/index.tsx rename to web/src/beta/ui/widgetui/Button/index.tsx index c0e2f53544..c89769acd6 100644 --- a/web/src/beta/components/Button/index.tsx +++ b/web/src/beta/ui/widgetui/Button/index.tsx @@ -1,5 +1,5 @@ -import Icon from "@reearth/beta/components/Icon"; -import Text from "@reearth/beta/components/Text"; +import { Icon, IconName } from "@reearth/beta/lib/reearth-ui"; +import Text from "@reearth/beta/ui/widgetui/Text"; import { styled } from "@reearth/services/theme"; import spacingSizes from "@reearth/services/theme/reearthTheme/common/spacing"; import { ReactNode, useMemo } from "react"; @@ -13,7 +13,7 @@ export interface Props { buttonType?: Type; disabled?: boolean; text?: string; - icon?: string; + icon?: IconName; iconPosition?: "left" | "right"; margin?: string; onClick?: (e: React.MouseEvent) => void; @@ -44,7 +44,7 @@ const Button: React.FC = ({ const WrappedIcon = useMemo(() => { return icon ? ( - + ) : null; }, [hasText, iSize, icon, iconPosition, size]); diff --git a/web/src/beta/components/Flex/index.stories.tsx b/web/src/beta/ui/widgetui/Flex/index.stories.tsx similarity index 100% rename from web/src/beta/components/Flex/index.stories.tsx rename to web/src/beta/ui/widgetui/Flex/index.stories.tsx diff --git a/web/src/beta/components/Flex/index.tsx b/web/src/beta/ui/widgetui/Flex/index.tsx similarity index 100% rename from web/src/beta/components/Flex/index.tsx rename to web/src/beta/ui/widgetui/Flex/index.tsx diff --git a/web/src/beta/components/Text/index.stories.tsx b/web/src/beta/ui/widgetui/Text/index.stories.tsx similarity index 100% rename from web/src/beta/components/Text/index.stories.tsx rename to web/src/beta/ui/widgetui/Text/index.stories.tsx diff --git a/web/src/beta/components/Text/index.tsx b/web/src/beta/ui/widgetui/Text/index.tsx similarity index 100% rename from web/src/beta/components/Text/index.tsx rename to web/src/beta/ui/widgetui/Text/index.tsx diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml index 764c9c8546..67e413e367 100644 --- a/web/src/services/i18n/translations/en.yml +++ b/web/src/services/i18n/translations/en.yml @@ -1,6 +1,3 @@ -You have passed the maximum value.: '' -You have passed the minimum value.: '' -Not found: '' Account: '' Name: '' Email address: '' @@ -204,6 +201,8 @@ Log out: '' Asset management: '' Map: '' Widgets: '' +Oops, This Page Not Found!: '' +Go to Dashboard: '' Error: '' Warning: '' Notice: '' @@ -252,8 +251,6 @@ Right: '' Story Panel: '' Panel Position: '' Background Color: '' -Something went wrong.: '' -Couldn't find the Re:Earth project you were after.: '' Your account has been successfully verified! Feel free to login now.: '' Could not verify your signup. Please start the process over.: '' New Field: '' @@ -268,9 +265,6 @@ aria-label-adjust-angle: '' aria-label-zoom-in: '' aria-label-Go-to-the-home-position: '' aria-label-zoom-out: '' -Angle: '' -Narrow: '' -Wide: '' Spacing settings: '' Remove: '' Block: '' diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml index e2a1ab7dc6..2573965577 100644 --- a/web/src/services/i18n/translations/ja.yml +++ b/web/src/services/i18n/translations/ja.yml @@ -1,6 +1,3 @@ -You have passed the maximum value.: '' -You have passed the minimum value.: '' -Not found: ページが見つかりません Account: '' Name: 名前 Email address: '' @@ -204,6 +201,8 @@ Log out: ログアウト Asset management: '' Map: マップ Widgets: ウィジェット +Oops, This Page Not Found!: '' +Go to Dashboard: '' Error: エラー Warning: 注意 Notice: 通知 @@ -252,8 +251,6 @@ Right: 右 Story Panel: ストーリーパネル Panel Position: パネルポジション Background Color: 背景色 -Something went wrong.: 失敗しました。 -Couldn't find the Re:Earth project you were after.: そのRe:Earthプロジェクトは見つかりませんでした。 Your account has been successfully verified! Feel free to login now.: メールアドレスが認証されました。ログインが可能です。 Could not verify your signup. Please start the process over.: メールアドレスが認証できませんでした。もう一度最初からやり直してください。 New Field: 新しいフィールド @@ -268,9 +265,6 @@ aria-label-adjust-angle: 角度を調節する aria-label-zoom-in: ズームイン aria-label-Go-to-the-home-position: 元の位置に戻る aria-label-zoom-out: ズームアウト -Angle: 角度 -Narrow: 狭い -Wide: 広い Spacing settings: 余白設定 Remove: 削除 Block: ブロック diff --git a/web/src/services/routing/index.tsx b/web/src/services/routing/index.tsx index 4f2661bf05..d12a9efce5 100644 --- a/web/src/services/routing/index.tsx +++ b/web/src/services/routing/index.tsx @@ -12,7 +12,8 @@ const ProjectSettings = lazy( const PluginPlaygroundPage = lazy( () => import("@reearth/beta/pages/PluginPlaygroundPage") ); -const NotFound = lazy(() => import("@reearth/beta/components/NotFound")); +const NotFoundPage = lazy(() => import("@reearth/beta/pages/NotFound")); + const GraphQLPlayground = lazy( () => import("@reearth/beta/pages/GraphQLPlayground") ); @@ -57,7 +58,7 @@ export const AppRoutes = () => { }, { path: "*", - element: + element: } ]);