From 3e8dc04341abb8391d013cfd863a7d18d56b8534 Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Fri, 21 Jul 2023 17:41:42 +0900 Subject: [PATCH] chore(web): basic widget page (#578) --- .../components/Dropdown/index.stories.tsx | 25 +- web/src/beta/components/Dropdown/index.tsx | 259 ++++++++++---- .../beta/components/Icon/Icons/desktop.svg | 6 + .../beta/components/Icon/Icons/folderPlus.svg | 5 + web/src/beta/components/Icon/Icons/mobile.svg | 5 + .../components/Icon/Icons/widgetSystem.svg | 8 + web/src/beta/components/Icon/icons.ts | 16 +- .../ListItem}/index.stories.tsx | 0 web/src/beta/components/ListItem/index.tsx | 74 ++++ .../TabButton/index.stories.tsx | 0 .../TabButton/index.test.tsx | 0 .../Navbar => components}/TabButton/index.tsx | 20 +- .../components/properties/Toggle/index.tsx | 91 +++++ .../features/Editor/SecondaryNav/index.tsx | 21 ++ .../beta/features/Editor/SidePanel/index.tsx | 2 +- .../Editor/Visualizer/CanvasArea/convert.ts | 321 ++++++++++++++++++ .../Editor/Visualizer/CanvasArea/hooks.ts | 19 +- .../Editor/Visualizer/CanvasArea/index.tsx | 7 +- .../beta/features/Editor/Visualizer/index.tsx | 10 +- .../features/Editor/VisualizerNav/index.tsx | 13 - web/src/beta/features/Editor/hooks.ts | 33 ++ web/src/beta/features/Editor/index.tsx | 60 +++- .../story/SidePanel/ContentPage/index.tsx | 3 +- .../story/SidePanel/ContentStory/index.tsx | 2 +- .../tabs/story/SidePanel/Item/index.tsx | 67 ---- .../Editor/tabs/widgets/Nav/Devices/index.tsx | 48 +++ .../Editor/tabs/widgets/Nav/index.tsx | 50 +++ .../tabs/widgets/SidePanel/Manager/hooks.ts | 39 +++ .../tabs/widgets/SidePanel/Manager/index.tsx | 74 ++++ .../tabs/widgets/SidePanel/Settings/index.tsx | 13 + .../Editor/tabs/widgets/SidePanel/index.tsx | 35 ++ .../beta/features/Editor/useRightPanel.tsx | 9 +- .../features/Editor/useSecondaryNavbar.tsx | 45 +++ .../beta/features/Editor/useVisualizerNav.tsx | 27 -- .../Navbar/LeftSection/Profile/index.tsx | 116 +++---- .../features/Navbar/LeftSection/index.tsx | 11 +- .../features/Navbar/Menus/MenuList/index.tsx | 23 +- .../Navbar/Menus/ProjectMenu/index.tsx | 141 ++++---- .../Navbar/Menus/WorkspaceMenu/index.tsx | 107 ------ web/src/beta/features/Navbar/index.tsx | 4 +- .../beta/features/Navbar/useRightSection.tsx | 4 +- web/src/beta/pages/Page.tsx | 4 +- web/src/services/api/index.ts | 2 + web/src/services/api/pluginsApi.ts | 77 +++++ web/src/services/api/sceneApi.ts | 42 ++- web/src/services/api/widgetsApi/index.ts | 103 ++++++ web/src/services/api/widgetsApi/utils.ts | 54 +++ web/src/services/gql/__gen__/gql.ts | 13 +- web/src/services/gql/__gen__/graphql.ts | 20 +- web/src/services/gql/fragments/plugin.ts | 25 +- web/src/services/gql/provider/index.tsx | 11 - web/src/services/gql/queries/scene.ts | 48 ++- web/src/services/gql/queries/widget.ts | 29 ++ web/src/services/i18n/translations/en.yml | 19 +- web/src/services/i18n/translations/ja.yml | 19 +- web/src/services/state/index.ts | 139 +------- web/src/services/state/jotai.ts | 138 ++++++++ 57 files changed, 1857 insertions(+), 699 deletions(-) create mode 100644 web/src/beta/components/Icon/Icons/desktop.svg create mode 100644 web/src/beta/components/Icon/Icons/folderPlus.svg create mode 100644 web/src/beta/components/Icon/Icons/mobile.svg create mode 100644 web/src/beta/components/Icon/Icons/widgetSystem.svg rename web/src/beta/{features/Editor/tabs/story/SidePanel/Item => components/ListItem}/index.stories.tsx (100%) create mode 100644 web/src/beta/components/ListItem/index.tsx rename web/src/beta/{features/Navbar => components}/TabButton/index.stories.tsx (100%) rename web/src/beta/{features/Navbar => components}/TabButton/index.test.tsx (100%) rename web/src/beta/{features/Navbar => components}/TabButton/index.tsx (73%) create mode 100644 web/src/beta/components/properties/Toggle/index.tsx create mode 100644 web/src/beta/features/Editor/SecondaryNav/index.tsx create mode 100644 web/src/beta/features/Editor/Visualizer/CanvasArea/convert.ts delete mode 100644 web/src/beta/features/Editor/VisualizerNav/index.tsx create mode 100644 web/src/beta/features/Editor/hooks.ts delete mode 100644 web/src/beta/features/Editor/tabs/story/SidePanel/Item/index.tsx create mode 100644 web/src/beta/features/Editor/tabs/widgets/Nav/Devices/index.tsx create mode 100644 web/src/beta/features/Editor/tabs/widgets/Nav/index.tsx create mode 100644 web/src/beta/features/Editor/tabs/widgets/SidePanel/Manager/hooks.ts create mode 100644 web/src/beta/features/Editor/tabs/widgets/SidePanel/Manager/index.tsx create mode 100644 web/src/beta/features/Editor/tabs/widgets/SidePanel/Settings/index.tsx create mode 100644 web/src/beta/features/Editor/tabs/widgets/SidePanel/index.tsx create mode 100644 web/src/beta/features/Editor/useSecondaryNavbar.tsx delete mode 100644 web/src/beta/features/Editor/useVisualizerNav.tsx delete mode 100644 web/src/beta/features/Navbar/Menus/WorkspaceMenu/index.tsx create mode 100644 web/src/services/api/pluginsApi.ts create mode 100644 web/src/services/api/widgetsApi/index.ts create mode 100644 web/src/services/api/widgetsApi/utils.ts create mode 100644 web/src/services/gql/queries/widget.ts create mode 100644 web/src/services/state/jotai.ts diff --git a/web/src/beta/components/Dropdown/index.stories.tsx b/web/src/beta/components/Dropdown/index.stories.tsx index fc61112113..3554bafab8 100644 --- a/web/src/beta/components/Dropdown/index.stories.tsx +++ b/web/src/beta/components/Dropdown/index.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from "@storybook/react"; import { ReactNode } from "react"; -import Dropdown from "."; +import Dropdown, { Menu } from "."; const Wrapper: React.FC<{ children: ReactNode }> = ({ children }) => (
{children}
@@ -15,22 +15,15 @@ export default meta; type Story = StoryObj; -const DropDownContent: React.FC = () => { - return ( - - ); +const menu: Menu = { + width: 200, + items: [{ text: "HARHAR" }, { text: "HARHAR" }, { text: "HARHAR" }], }; export const Default: Story = { render: () => ( - - - + ), }; @@ -38,18 +31,14 @@ export const Default: Story = { export const DirectionRight: Story = { render: () => ( - - - + ), }; export const DirectionDown: Story = { render: () => ( - - - + ), }; diff --git a/web/src/beta/components/Dropdown/index.tsx b/web/src/beta/components/Dropdown/index.tsx index 2f425ce28e..2c9b1980e1 100644 --- a/web/src/beta/components/Dropdown/index.tsx +++ b/web/src/beta/components/Dropdown/index.tsx @@ -1,74 +1,138 @@ -import { ReactNode, useState, useRef, forwardRef, useImperativeHandle } from "react"; -import { useClickAway } from "react-use"; +import { ReactNode, useState, Fragment } from "react"; -import Icon from "@reearth/beta/components/Icon"; +import Icon, { Icons } from "@reearth/beta/components/Icon"; +import { + MenuListItemLabel, + MenuList, + MenuListItem, +} from "@reearth/beta/features/Navbar/Menus/MenuList"; import { styled } from "@reearth/services/theme"; +import Text from "../Text"; + type Direction = "right" | "down" | "none"; +type Gap = "sm" | "md" | "lg"; + +export type Menu = { + width?: number; + items?: MenuItem[]; +}; + +export type MenuItem = { + text?: string; + icon?: Icons; + iconPosition?: "left" | "right"; + breakpoint?: boolean; + items?: MenuItem[]; + linkTo?: string; + selected?: boolean; + onClick?: () => void; +}; + export type Props = { className?: string; isOpen?: boolean; label: ReactNode; openOnClick?: boolean; direction?: Direction; + gap?: Gap; + dropdownWidth?: number; + parentWidth?: number; hasIcon?: boolean; noHoverStyle?: boolean; centered?: boolean; - children?: ReactNode; + menu?: Menu; + isChild?: boolean; + onClick?: () => void; }; -export type Ref = { - close: () => void; -}; +const defaultWidth = 200; -const Dropdown: React.ForwardRefRenderFunction = ( - { - className, - isOpen = false, - openOnClick, - noHoverStyle, - centered, - label, - direction = "down", - hasIcon, - children, - }, - ref, -) => { +const Dropdown: React.FC = ({ + className, + isOpen = false, + label, + openOnClick, + direction = "down", + gap, + dropdownWidth = defaultWidth, + parentWidth = defaultWidth, + centered, + noHoverStyle, + hasIcon, + menu, + isChild, + onClick, +}) => { const [open, setOpen] = useState(isOpen); - const wrapperRef = useRef(null); - useClickAway(wrapperRef, () => { - setOpen(false); - }); - - useImperativeHandle( - ref, - () => ({ - close: () => setOpen(false), - }), - [], - ); - return ( - setOpen(true)} - onMouseLeave={openOnClick ? undefined : () => setOpen(false)}> - -