Example
import { Button } from "@chakra-ui/button";
import { useDisclosure, useOutsideClick } from "@chakra-ui/hooks";
import Icon from "@chakra-ui/icon";
import {
Box,
Center,
Flex,
Spacer,
Text,
Image,
VStack,
FormControl,
FormLabel,
Input,
Spinner,
Link,
} from "@chakra-ui/react";
import {
Modal,
ModalHeader,
ModalBody,
ModalFooter,
ModalContent,
ModalOverlay,
} from "@chakra-ui/modal";
import { Popover, PopoverContent, PopoverTrigger } from "@chakra-ui/popover";
import { Portal } from "@chakra-ui/portal";
import { css } from "@emotion/react";
import { EmotionJSX } from "@emotion/react/types/jsx-namespace";
import {
IconChevronRight,
IconClick,
IconFreetext,
IconListUl,
IconMultimedia,
IconPlus,
IconSelect,
IconTemplate,
IconDesktop,
IconCheck,
IconX,
CodeAlt,
} from "@feedloop/icon";
import produce from "immer";
import React from "react";
import { DropResult } from "react-beautiful-dnd";
import Scrollbars from "react-custom-scrollbars";
import iconsList from "../runtime/iconsList";
import {
buildComponent,
ComponentGroupType,
ComponentInstance,
ComponentProps,
getComponentList,
registerComponent,
} from "../runtime/interfaces";
import { RuntimeContext } from "../runtime/RuntimeContext";
import EditorContext from "./EditorContext";
import PageMenu from "./PageMenuItem";
import { useForm } from "react-hook-form";
import importCustomComponent from "../runtime/importCustomComponent";
const ModalLayout = (props: { isOpen: boolean; onClose: () => void }) => (
<Modal isOpen={props.isOpen} onClose={props.onClose} isCentered>
<ModalOverlay />
<ModalContent w="408px" h="448px" p="40px">
<ModalBody>
<Center>
<Image src="/assets/ilustration/dekstop.svg" alt="Desktop" />
</Center>
<Center>
<Text
css={css`
font-weight: 600;
font-size: 24px;
color: #001e4d;
`}
>
Only For Dekstop
</Text>
</Center>
<Center pt={2}>
<Text
css={css`
font-weight: normal;
font-size: 12px;
color: #6f809a;
text-align: center;
`}
>
This component only for dekstop, change to dekstop mode to use this
component
</Text>
</Center>
<Center pt={4}>
<Button
w="328px"
css={css`
background: #0065ff;
color: #fff;
`}
>
Go to Desktop Mode
</Button>
</Center>
<Center pt={2}>
<Button variant="ghost" w="328px" onClick={props.onClose}>
Cancel
</Button>
</Center>
</ModalBody>
</ModalContent>
</Modal>
);
export const bannedComponents = new Set([
"ColumnLayout2",
"ColumnLayout3",
"Gallery",
"Menu Grid",
]);
interface IAddComponentsMenu {
isOpen: boolean;
isOpenByComponent: boolean;
layoutID: string;
layoutIdx: number;
}
interface ComponentsManagerState {
componentBeingEdit: string;
addComponentMenu: IAddComponentsMenu;
}
type CustomComponentModal = "register" | "loading" | "success" | "error";
export default React.memo(function ComponentsManager() {
const pageID = RuntimeContext.useSelectState(({ control }) => control.page);
const maps = RuntimeContext.useSelectState(({ app }) => app.maps);
const runtimeActions = RuntimeContext.useActions();
const editorActions = EditorContext.useActions();
const form = useForm({
defaultValues: {
name: "",
url: "",
},
});
const [modalCustomComponent, setModalCustomComponent] =
React.useState<CustomComponentModal | null>(null);
const activeComponent = EditorContext.useSelectState(
({ activeComponent }) => activeComponent
);
const [state, setState] = React.useState<ComponentsManagerState>({
componentBeingEdit: undefined,
addComponentMenu: {
isOpen: false,
isOpenByComponent: false,
layoutID: null,
layoutIdx: null,
},
});
const page = React.useMemo(() => maps.page[pageID], [maps.page, pageID]);
const componentPresets = React.useMemo(() => getComponentList(), []);
const iconMaps = React.useMemo(
() =>
componentPresets.reduce(
(result, item) => ({
...result,
[item.id]: item.icon,
}),
{} as Record<string, string>
),
[componentPresets]
);
const components = React.useMemo(
() =>
Iterator.from(page?.components || [])
.map((ref) => maps.component[ref.component])
.filter((x) => !!x)
.toArray(),
[page?.components, maps.component]
);
const groupingComponents = React.useMemo(() => {
const groupedComponents: {
layer0: Array<ComponentInstance<ComponentProps>>;
layer1: Record<string, Array<ComponentInstance<ComponentProps>>>;
} = {
layer0: [],
layer1: {},
};
components.forEach((component) => {
if (
!!component.metadata &&
!!component.metadata.layout &&
!!component.metadata.layout.id
) {
groupedComponents.layer1[component.metadata.layout.id] = [
...(groupedComponents.layer1[component.metadata.layout.id] || []),
component,
];
} else {
groupedComponents.layer0.push(component);
}
});
return groupedComponents;
}, [components]);
React.useEffect(() => {
if (
page?.components?.find((ref) => ref.component === activeComponent) ===
undefined
) {
editorActions.setActiveComponent(page?.components?.[0]?.component);
editorActions.setEditMode("play");
}
}, [page?.components, activeComponent]);
const getNewDestination = React.useCallback(
(destinationIndex: number, draggableId: string) => {
const newDestinationFilter = groupingComponents.layer0.filter(
(comp, idx) => idx < destinationIndex
);
let newDestination = 0;
newDestinationFilter?.forEach((current) => {
if (
(current.componentID === "ColumnLayout2" ||
current.componentID === "ColumnLayout3") &&
!!groupingComponents.layer1[current.id] &&
draggableId !== current.id
) {
newDestination += groupingComponents.layer1[current.id].length + 1;
} else {
newDestination += 1;
}
});
return newDestination;
},
[groupingComponents]
);
const handleAddComponent = React.useCallback(
(presetID: string, name?: string, componentURL?: string) => {
if (presetID === "Custom Component") {
setModalCustomComponent("register");
return;
}
const compInstance = buildComponent(presetID, {
metadata: {
name,
layout:
state.addComponentMenu.isOpenByComponent &&
!!state.addComponentMenu.layoutID
? { id: state.addComponentMenu.layoutID, column: 1 }
: undefined,
componentURL,
},
});
if (!!state.addComponentMenu.isOpenByComponent) {
const layoutIdx = getNewDestination(
state.addComponentMenu.layoutIdx,
state.addComponentMenu.layoutID
);
const idx =
layoutIdx +
1 +
(groupingComponents.layer1[state.addComponentMenu.layoutID]?.length ||
0);
runtimeActions.addComponent(
compInstance,
{ page: pageID },
{ idx: idx }
);
} else {
runtimeActions.addComponent(compInstance, { page: pageID });
}
},
[pageID, state.addComponentMenu, getNewDestination, groupingComponents]
);
const handleDragEnd = React.useCallback(
(result: DropResult) => {
if (!result.destination || !page) return;
const newDestination = getNewDestination(
result.destination.index,
result.draggableId
);
const newSourceIndex: number = components.findIndex(
(comp) => comp.id === result.draggableId
);
const deletionLength =
(groupingComponents.layer1[result.draggableId]?.length || 0) + 1;
runtimeActions.swapComponent(
{ page: page.id },
newSourceIndex,
newDestination,
deletionLength
);
},
[runtimeActions, page, groupingComponents, getNewDestination, components]
);
const handleLayer1DragEnd = React.useCallback(
(result: DropResult, offset: number = 0, parentId: string) => {
if (!result.destination || !page) return;
const parentPageIndex = getNewDestination(offset, parentId);
const newDestinationIndex =
parentPageIndex + result.destination.index + 1;
const newSourceIndex = parentPageIndex + result.source.index + 1;
runtimeActions.swapComponent(
{ page: page.id },
newSourceIndex,
newDestinationIndex
);
},
[runtimeActions, page, getNewDestination]
);
const handleMoveToLayout = React.useCallback(
(sourceId: string, destinationLayoutId: string) => {
const destinationLayer0Idx = groupingComponents.layer0.findIndex(
(comp) => comp.id === destinationLayoutId
);
const layoutIndex = getNewDestination(destinationLayer0Idx, sourceId);
const sourceIndex = components.findIndex((comp) => comp.id === sourceId);
const destinationIndex =
layoutIndex +
(groupingComponents.layer1[destinationLayoutId]?.length || 0) +
(layoutIndex < sourceIndex ? 1 : 0);
runtimeActions.setComponentMetadata({ component: sourceId }, "layout", {
id: destinationLayoutId,
column: 1,
});
runtimeActions.swapComponent(
{ page: page.id },
sourceIndex,
destinationIndex
);
},
[groupingComponents, components, getNewDestination, page]
);
const handleRemoveFromLayout = React.useCallback(
(compId: string) => {
const sourceIndex = components.findIndex((comp) => comp.id === compId);
const destinationIndex = components.length;
runtimeActions.removeComponentLayoutMetadata({ component: compId });
runtimeActions.swapComponent(
{ page: page.id },
sourceIndex,
destinationIndex
);
},
[components, page]
);
const handleRenameOnBlur = React.useCallback(
(e: React.FocusEvent<HTMLInputElement>, compId: string) => {
runtimeActions.setComponentMetadata(
{ component: compId },
"name",
e.currentTarget.value
);
setState((state) =>
produce(state, (draft) => {
draft.componentBeingEdit = undefined;
})
);
},
[]
);
const { isOpen, onClose } = useDisclosure();
const ModalItem = ModalLayout;
const renderLayoutComponentsMenu = React.useMemo(() => {
let layer1: Record<string, EmotionJSX.Element[]> = {};
Object.keys(groupingComponents.layer1).forEach((layoutID) => {
layer1[layoutID] = [
...(layer1[layoutID] || []),
<PageMenu
onDragEnd={(result) =>
handleLayer1DragEnd(
result,
groupingComponents.layer0.findIndex(
(comp) => comp.id === layoutID
),
layoutID
)
}
iconMaps={iconMaps}
componentToEditID={state.componentBeingEdit}
components={groupingComponents.layer1[layoutID]}
onBlurRenameItem={handleRenameOnBlur}
onStateChange={setState}
onRemoveComponent={runtimeActions.removeComponent}
onSetActiveComponent={editorActions.setActiveComponent}
activeComponent={activeComponent}
onRemoveFromLayout={handleRemoveFromLayout}
/>,
];
});
return layer1;
}, [
groupingComponents,
iconMaps,
state.componentBeingEdit,
activeComponent,
handleDragEnd,
handleRenameOnBlur,
runtimeActions.removeComponent,
editorActions.setActiveComponent,
]);
const AddComponentsCallback = React.useCallback(() => {
return (
<AddComponents
isOpen={state.addComponentMenu.isOpen}
isOpenByComponent={state.addComponentMenu.isOpenByComponent}
onAddComponent={handleAddComponent}
onEventChange={(value, eventName) => {
switch (eventName) {
case "open":
setState((state) =>
produce(state, (draft) => {
draft.addComponentMenu.isOpen = value.isOpen;
draft.addComponentMenu.isOpenByComponent =
value.isOpenByComponent;
draft.addComponentMenu.layoutID = value.layoutID;
draft.addComponentMenu.layoutIdx = value.layoutIdx;
})
);
break;
case "close":
setState((state) =>
produce(state, (draft) => {
draft.addComponentMenu.isOpen = false;
})
);
break;
default:
return;
}
}}
/>
);
}, [
state.addComponentMenu.isOpenByComponent,
state.addComponentMenu.isOpen,
handleAddComponent,
]);
if (!page) return null;
return (
<Box position="relative" height="100%">
<Flex
css={css`
padding: 12px 16px;
`}
>
<Box flex={1}>
<Text fontSize="sm" fontWeight="semibold" color="#001E4D">
Components
</Text>
</Box>
<AddComponentsCallback />
</Flex>
<ModalItem isOpen={isOpen} onClose={onClose} />
<Box
position="absolute"
top="48px"
left="0"
right="0"
bottom="0"
overflowY="auto"
>
<Scrollbars>
<PageMenu
onDragEnd={handleDragEnd}
iconMaps={iconMaps}
componentToEditID={state.componentBeingEdit}
components={groupingComponents.layer0}
onBlurRenameItem={handleRenameOnBlur}
onStateChange={setState}
onRemoveComponent={runtimeActions.removeComponent}
onSetActiveComponent={editorActions.setActiveComponent}
activeComponent={activeComponent}
renderLayoutComponentsMenu={renderLayoutComponentsMenu}
layer1={groupingComponents.layer1}
onMoveToLayout={handleMoveToLayout}
/>
</Scrollbars>
</Box>
<Modal
isOpen={!!modalCustomComponent}
onClose={() => {
modalCustomComponent !== "loading" && setModalCustomComponent(null);
}}
>
<ModalOverlay />
{modalCustomComponent &&
(modalCustomComponent === "register" ? (
<ModalContent>
<ModalHeader>
<Text fontSize="2xl">Add custom component</Text>
</ModalHeader>
<ModalBody>
<VStack spacing={4}>
<Box
padding="16px"
borderRadius="4px"
backgroundColor="gray.100"
>
<Text fontSize="sm" color="gray.600">
Custom component can be used by editors to create
components with the appearance and functionality according
to their needs, if the official Qore component has not
been able to meet these needs.{" "}
<Link
href="https://docs.qore.dev/component/custom-component"
color="blue.500"
isExternal
>
Learn more
</Link>
</Text>
</Box>
<FormControl id="name">
<FormLabel>Name</FormLabel>
<Input
name="name"
ref={form.register({ required: true })}
placeholder="Component Name"
/>
</FormControl>
<FormControl id="subdomain">
<FormLabel>Component URL</FormLabel>
<Input
name="url"
ref={form.register({ required: true })}
placeholder="Component URL"
/>
</FormControl>
</VStack>
</ModalBody>
<ModalFooter flex={1}>
<Button
width="100%"
mr={3}
onClick={() => setModalCustomComponent(null)}
>
Cancel
</Button>
<Button
width="100%"
colorScheme="brand"
onClick={form.handleSubmit(({ name, url }) => {
setModalCustomComponent("loading");
importCustomComponent(url)
.then(({ id, component }) => {
handleAddComponent(id, name, url);
setModalCustomComponent("success");
})
.catch((err) => {
console.error(err);
setModalCustomComponent("error");
});
})}
>
Add component
</Button>
</ModalFooter>
</ModalContent>
) : (
<ModalContent>
<ModalHeader>
<Text fontSize="2xl">Validation Component</Text>
</ModalHeader>
<ModalBody>
<Box
borderWidth="1px"
borderStyle="solid"
borderColor="gray.200"
borderRadius="md"
p={3}
>
{modalCustomComponent === "loading" ? (
<Flex alignItems="flex-start">
<Spinner
thickness="4px"
speed="0.65s"
emptyColor="gray.200"
color="blue.500"
size="xl"
/>
<Box flex={1} marginLeft="3">
<Text fontWeight="bold">Creating Component</Text>
<Text color="gray.500" fontSize="sm">
Fetching and validating component from URL
</Text>
</Box>
</Flex>
) : modalCustomComponent === "success" ? (
<Flex alignItems="flex-start">
<Box
w={10}
h={10}
borderRadius="full"
backgroundColor="green.100"
alignItems="center"
justifyContent="center"
boxSizing="border-box"
display="flex"
>
<Icon as={IconCheck} color="green" />
</Box>
<Box flex={1} marginLeft="3">
<Text fontWeight="bold">Component created</Text>
<Text color="gray.500" fontSize="sm">
Your component has been created
</Text>
</Box>
</Flex>
) : (
<Flex alignItems="flex-start">
<Box
w={10}
h={10}
borderRadius="full"
backgroundColor="red.100"
alignItems="center"
justifyContent="center"
boxSizing="border-box"
display="flex"
>
<Icon as={IconX} color="red" />
</Box>
<Box flex={1} marginLeft="3">
<Text fontWeight="bold">Failed create component</Text>
<Text color="gray.500" fontSize="sm">
Your component URL is invalid
</Text>
</Box>
</Flex>
)}
</Box>
</ModalBody>
<ModalFooter flex={1}>
<Button
width="100%"
mr={3}
disabled={modalCustomComponent === "loading"}
onClick={() => setModalCustomComponent("register")}
>
Create again
</Button>
<Button
width="100%"
colorScheme="brand"
disabled={modalCustomComponent === "loading"}
onClick={() => setModalCustomComponent(null)}
>
Done
</Button>
</ModalFooter>
</ModalContent>
))}
</Modal>
</Box>
);
});
interface IAddComponents {
isOpen: boolean;
onEventChange: (e: Partial<IAddComponentsMenu>, eventName: string) => void;
isOpenByComponent: boolean;
onAddComponent: (componentId: string) => void;
}
interface category {
icon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
text: ComponentGroupType;
}
const categories: Array<category> = [
{
icon: IconFreetext,
text: "text",
},
{
icon: IconMultimedia,
text: "media",
},
{
icon: IconListUl,
text: "list",
},
{
icon: IconClick,
text: "button",
},
{
icon: IconSelect,
text: "input",
},
{
icon: IconTemplate,
text: "layout",
},
{
icon: IconDesktop,
text: "data",
},
{
icon: CodeAlt,
text: "advanced",
},
];
const AddComponents = React.memo(function ({
isOpen,
isOpenByComponent,
onEventChange,
onAddComponent,
}: IAddComponents) {
const initRef = React.useRef();
const ref = React.useRef();
const componentPresets = React.useMemo(
() =>
getComponentList().concat({
legacy: true,
id: "Custom Component",
type: "record",
icon: "Atom",
group: "advanced",
defaultProps: {},
propDefinition: () => ({}),
Component: () => null,
}),
[]
);
const [activeCategory, setActiveCategory] =
React.useState<ComponentGroupType | null>(null);
useOutsideClick({
ref: ref,
handler: () => {
setActiveCategory(null);
},
});
const handlePopoverClose = React.useCallback(() => {
onEventChange(
{
isOpen: false,
},
"close"
);
}, []);
const handlePopoverOpen = React.useCallback(() => {
onEventChange(
{
isOpen: true,
isOpenByComponent: false,
layoutID: null,
layoutIdx: null,
},
"open"
);
}, []);
return (
<Box>
<Popover
placement="auto-end"
isLazy
closeOnBlur={true}
initialFocusRef={initRef}
isOpen={isOpen}
onClose={handlePopoverClose}
>
{({ onClose }) => (
<>
<PopoverTrigger>
<Box onClick={handlePopoverOpen}>
<Icon cursor="pointer" as={IconPlus} />
</Box>
</PopoverTrigger>
<Portal>
<PopoverContent
ml={2}
css={css`
border-radius: 0px;
`}
>
<Box h="93.1vh" overflow="auto" py={4}>
<Box mb={4} pl={4}>
<Text fontWeight="semibold" color="#001E4D">
All Category
</Text>
</Box>
<div ref={ref}>
{categories.map((category, index) => {
return (
<Popover
key={`${category.text}-${index}`}
isOpen={activeCategory === category.text}
placement="auto-end"
isLazy
>
<PopoverTrigger>
<Flex
my={1}
mx={2}
p={2}
cursor="pointer"
onClick={() => {
setActiveCategory(category.text);
}}
bg={
activeCategory === category.text
? "#E6F0FF"
: undefined
}
css={css`
border-radius: 8px;
&:hover {
background-color: #e6f0ff;
border-radius: 4px;
}
`}
>
<Center
p="6px"
bg={
activeCategory === category.text
? "white"
: "#E6F0FF"
}
css={css`
border-radius: 4px;
`}
>
<Icon
fontSize="24px"
as={category.icon}
color="#0065ff"
/>
</Center>
<Center pl={2}>
<Text>{category.text}</Text>
</Center>
<Spacer />
<Center>
<Icon
color="#A6B0C1"
fontSize="24px"
as={IconChevronRight}
/>
</Center>
</Flex>
</PopoverTrigger>
<PopoverContent
ml={-2}
css={css`
border-left: 1px solid white;
border-radius: 0px;
`}
>
<Box h="93.1vh" w="350" overflow="auto" py={4}>
<Scrollbars>
<Box mt={10} mx={4} bg="#F9F9FA">
{componentPresets
.filter((selected) =>
selected.group === category.text &&
selected.group &&
isOpenByComponent
? !bannedComponents.has(selected.id)
: true
)
.sort((a, b) => {
if (a.id < b.id) return -1;
else if (a.id > b.id) return 1;
else return 0;
})
.map((preset) =>
preset.group === category.text ? (
<Flex
p={2}
mb={2}
onClick={() => {
onAddComponent(preset.id);
onClose();
}}
key={preset.id}
css={css`
border: 1px solid transparent;
cursor: pointer;
background-color: white;
border-color: #e6f0ff;
border-radius: 8px;
&:hover {
border-color: #0065ff;
}
`}
>
<Center
p="6px"
bg="#E6F0FF"
css={css`
border-radius: 4px;
`}
>
<Icon
fontSize="24px"
color="#0065FF"
as={iconsList[preset.icon]}
/>
</Center>
<Center pl={2} pt="0">
<Text>{preset.id}</Text>
</Center>
</Flex>
) : undefined
)}
</Box>
</Scrollbars>
</Box>
</PopoverContent>
</Popover>
);
})}
</div>
</Box>
</PopoverContent>
</Portal>
</>
)}
</Popover>
</Box>
);
});Last updated
