@webbio/strapi-plugin-page-builder 0.0.1

package/.prettierignore

@@ -0,0 +1,17 @@
+.cache
+.husky
+build
+node_modules
+public
+.dockerignore
+.editorconfig
+.env.example
+.eslintignore
+.gitignore
+.gitmodules
+.prettierignore
+.strapi-updater.json
+favicon.ico
+yarn.lock
+Dockerfile
+*.patch

package/README.md

@@ -0,0 +1,3 @@
+# Strapi plugin page-builder
+
+A quick description of page-builder.

package/admin/src/api/collection-type.ts

@@ -0,0 +1,110 @@
+import { useQuery, UseQueryOptions } from 'react-query';
+import orderBy from 'lodash/orderBy';
+
+import { useFetchClient } from '@strapi/helper-plugin';
+
+export type SearchResult = {
+	pagination: {
+		page: number;
+		pageCount: number;
+		pageSize: number;
+		total: number;
+	};
+	results: {
+		id: number;
+		title: string;
+		hasPages?: boolean;
+		isCurrentSelected?: boolean;
+	}[];
+};
+
+type SearchEntitiesQueryParams = {
+	fetchClient?: any;
+	uid: string;
+	page: number;
+	locale: string;
+	searchQuery?: string;
+	currentCollectionTypeId?: number;
+	currentPageId?: number;
+};
+
+const QUERY_KEY = ['entities'];
+
+export const getSearchEntities = async ({
+	fetchClient,
+	uid,
+	page,
+	locale,
+	searchQuery,
+	currentCollectionTypeId,
+	currentPageId
+}: SearchEntitiesQueryParams): Promise<SearchResult> => {
+	try {
+		const { get } = fetchClient;
+		const searchParams = new URLSearchParams();
+		searchParams.append('page', String(page));
+		searchParams.append('pageSize', '20');
+		searchParams.append('sort', 'page[id]:DESC');
+		searchParams.append('locale', locale);
+
+		if (searchQuery) {
+			searchParams.delete('sort');
+			searchParams.append('sort', 'title:ASC');
+			searchParams.append('_q', searchQuery);
+		}
+
+		const { data } = await get(`/content-manager/collection-types/${uid}?${searchParams.toString()}`);
+
+		const filteredResults = data.results.filter((p: Record<string, any>) => {
+			// Don't return entities with connected pages when no searchquery is set, unless the entity is the initial selected one.
+			if (!searchQuery) {
+				return p?.page === null || p.id === currentCollectionTypeId;
+			}
+
+			return true;
+		});
+
+		const mapResults = filteredResults.map((result: Record<string, any>) => {
+			const resultPages = (result?.page || []).filter((x: Record<string, any>) => x.id !== currentPageId);
+
+			return {
+				id: result.id,
+				title: result.title,
+				hasPages: resultPages.length > 0,
+				isCurrentSelected: result?.id === currentCollectionTypeId
+			};
+		});
+
+		return {
+			pagination: data.pagination,
+			results: orderBy(mapResults, ['hasPages', 'title'], ['asc', 'asc'])
+		};
+	} catch (e) {
+		return {
+			pagination: { page: 1, pageCount: 0, pageSize: 0, total: 0 },
+			results: []
+		};
+	}
+};
+
+export const useSearchEntities = (
+	params: SearchEntitiesQueryParams,
+	options?: UseQueryOptions<SearchResult, Error>
+) => {
+	const fetchClient = useFetchClient();
+
+	return useQuery<SearchResult, Error>(
+		[
+			QUERY_KEY,
+			{
+				...params
+			}
+		],
+		() =>
+			getSearchEntities({
+				...params,
+				fetchClient
+			}),
+		options
+	);
+};

package/admin/src/api/has-page-relation.ts

@@ -0,0 +1,34 @@
+import { useQuery, UseQueryOptions } from 'react-query';
+
+import { useFetchClient } from '@strapi/helper-plugin';
+
+import getRequestUrl from '../utils/getRequestUrl';
+
+type HasPageRelationQueryParams = {
+	uid: string;
+	fetchClient?: any;
+};
+
+const QUERY_KEY = ['pageRelation'];
+
+const fetchHasPageRelation = async ({ fetchClient, uid }: HasPageRelationQueryParams): Promise<boolean> => {
+	const { get } = fetchClient;
+	const result = await get(`${getRequestUrl('collection-types')}/${uid}`);
+
+	return Boolean(result?.data?.hasPageRelation);
+};
+
+export const useHasPageRelation = (params: HasPageRelationQueryParams, options?: UseQueryOptions<boolean, Error>) => {
+	const fetchClient = useFetchClient();
+
+	return useQuery<boolean, Error>(
+		[
+			QUERY_KEY,
+			{
+				...params
+			}
+		],
+		() => fetchHasPageRelation({ ...params, fetchClient }),
+		options
+	);
+};

package/admin/src/api/page-type.ts

@@ -0,0 +1,31 @@
+import { useQuery } from 'react-query';
+import { useFetchClient } from '@strapi/helper-plugin';
+
+export type PageType = {
+	id: number;
+	uid: string;
+	title?: string;
+};
+
+const QUERY_KEY = 'page-types';
+
+const fetchPageTypes = async ({ fetchClient }: any): Promise<PageType[]> => {
+	const { get } = fetchClient;
+	const result = await get(`/content-manager/collection-types/api::page-type.page-type`);
+
+	return result?.data?.results?.map((entity: any) => ({
+		id: entity.id,
+		uid: entity.uid,
+		title: entity.title,
+		templateId: entity?.template?.id
+	}));
+};
+
+export const useGetPageTypes = (params: any) => {
+	const fetchClient = useFetchClient();
+	params = {
+		...params,
+		fetchClient
+	};
+	return useQuery<PageType[], Error>(QUERY_KEY, () => fetchPageTypes(params));
+};

package/admin/src/api/template.ts

@@ -0,0 +1,25 @@
+import { useQuery } from 'react-query';
+import { useFetchClient } from '@strapi/helper-plugin';
+
+export type Template = {
+	id: number;
+	title: string;
+	modules: any[];
+};
+
+const QUERY_KEY = ['templates'];
+
+const fetchTemplates = async ({ fetchClient }: any): Promise<Template[]> => {
+	const { get } = fetchClient;
+	const result = await get(`/content-manager/collection-types/api::template.template`);
+	return result?.data?.results;
+};
+
+export const useGetTemplates = (params: any) => {
+	const fetchClient = useFetchClient();
+	params = {
+		...params,
+		fetchClient
+	};
+	return useQuery<Template[], Error>(QUERY_KEY, () => fetchTemplates(params));
+};

package/admin/src/components/Combobox/index.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react';
+import { ClearIndicatorProps, DropdownIndicatorProps, GroupBase, components } from 'react-select';
+import AsyncSelect, { AsyncProps } from 'react-select/async';
+
+import { CarretDown, Cross } from '@strapi/icons';
+import { Typography } from '@strapi/design-system';
+
+import S from './styles';
+import { useReactSelectCustomStyles } from './react-select-custom-styles';
+
+export interface IComboboxProps extends AsyncProps<IReactSelectValue, false, GroupBase<IReactSelectValue>> {
+	customOption?: typeof components.Option<IReactSelectValue, false, GroupBase<IReactSelectValue>>;
+	label?: string;
+	id: string;
+}
+
+export interface IReactSelectValue {
+	value: string;
+	label: string;
+	initialSelected?: boolean;
+}
+
+const Combobox = (props: IComboboxProps) => {
+	const { label, customOption, id, ...selectProps } = props;
+	const styles = useReactSelectCustomStyles();
+	const [inputValue, setInputValue] = useState<string | undefined>(props.inputValue);
+
+	useEffect(() => {
+		setInputValue(props.inputValue);
+	}, [props.inputValue]);
+
+	return (
+		<S.Wrapper>
+			{props.label && (
+				<Typography as="label" htmlFor={id} variant="pi" fontWeight="bold" textColor="neutral800">
+					{props.label}
+				</Typography>
+			)}
+			<AsyncSelect
+				{...selectProps}
+				inputId={id}
+				isClearable
+				onInputChange={(value, actionMeta) => {
+					props.onInputChange?.(value, actionMeta);
+					setInputValue(value);
+				}}
+				// @ts-ignore
+				styles={styles}
+				inputValue={inputValue}
+				components={{
+					IndicatorSeparator: null,
+					ClearIndicator,
+					DropdownIndicator,
+					Option: props.customOption || components.Option
+				}}
+			/>
+		</S.Wrapper>
+	);
+};
+
+export { Combobox };
+
+const ClearIndicator = (props: ClearIndicatorProps<IReactSelectValue, false>) => {
+	return (
+		<components.ClearIndicator {...props}>
+			<Cross />
+		</components.ClearIndicator>
+	);
+};
+
+const DropdownIndicator = (props: DropdownIndicatorProps<IReactSelectValue, false>) => {
+	return (
+		<components.DropdownIndicator {...props}>
+			<CarretDown />
+		</components.DropdownIndicator>
+	);
+};

package/admin/src/components/Combobox/react-select-custom-styles.tsx

@@ -0,0 +1,111 @@
+import { StylesConfig } from 'react-select';
+import { useTheme } from 'styled-components';
+import { IReactSelectValue } from '.';
+
+export const useReactSelectCustomStyles = (): StylesConfig<IReactSelectValue, false> => {
+	const theme = useTheme() as any;
+
+	return {
+		control: (provided, { isFocused, isDisabled }) => ({
+			...provided,
+			color: theme.colors.neutral800,
+			backgroundColor: provided.backgroundColor,
+			minHeight: '40px',
+			lineHeight: 1.4,
+			borderRadius: theme.borderRadius,
+			fontSize: theme.fontSizes[2],
+			borderColor: isFocused ? theme.colors.buttonPrimary600 : theme.colors.neutral200,
+			boxShadow: isFocused ? `${theme.colors.buttonPrimary600} 0px 0px 0px 2px` : 'none',
+
+			':hover': {
+				borderColor: isFocused ? theme.colors.buttonPrimary600 : theme.colors.neutral200
+			}
+		}),
+		placeholder: (provided) => ({
+			...provided,
+			color: theme.colors.neutral500
+		}),
+		menu: (provided) => ({
+			...provided,
+			border: `1px solid ${theme.colors.neutral150}`,
+			boxShadow: '0px 1px 4px rgba(33, 33, 52, 0.1)',
+			borderRadius: theme.borderRadius,
+			color: theme.colors.neutral800
+		}),
+		menuList: (provided) => ({
+			...provided,
+			paddingLeft: '4px',
+			paddingRight: '4px'
+		}),
+		option: (provided, { isFocused, isSelected, isDisabled }) => ({
+			...provided,
+			backgroundColor: isFocused ? theme.colors.primary100 : 'transparent',
+			fontSize: theme.fontSizes[2],
+			borderRadius: theme.borderRadius,
+			color: isSelected ? theme.colors.buttonPrimary600 : theme.colors.neutral800,
+			fontWeight: isSelected ? 700 : 400,
+			minHeight: '40px',
+			display: 'flex',
+			justifyContent: 'center',
+			flexDirection: 'column',
+			gap: '4px',
+			opacity: isDisabled ? 0.7 : 1,
+
+			'span:not(:first-of-type)': {
+				fontSize: theme.fontSizes[1],
+				color: theme.colors.neutral500
+			},
+
+			'&:active': {
+				backgroundColor: theme.colors.primary100
+			}
+		}),
+		loadingIndicator: (provided) => ({
+			...provided,
+			'>span': {
+				backgroundColor: theme.colors.buttonPrimary600
+			}
+		}),
+		loadingMessage: (provided) => ({
+			...provided,
+			color: theme.colors.neutral500
+		}),
+		noOptionsMessage: (provided) => ({
+			...provided,
+			color: theme.colors.neutral500
+		}),
+		clearIndicator: (provided, { isFocused }) => ({
+			...provided,
+			cursor: 'pointer',
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+			paddingLeft: '6px',
+			paddingRight: '6px',
+			svg: {
+				width: '0.6875rem',
+				path: {
+					fill: theme.colors.neutral600
+				}
+			},
+			':hover svg path': {
+				fill: theme.colors.neutral700
+			}
+		}),
+
+		dropdownIndicator: (provided, { isFocused }) => ({
+			...provided,
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+			paddingLeft: '6px',
+			paddingRight: '12px',
+			svg: {
+				width: '0.375rem',
+				path: {
+					fill: theme.colors.neutral600
+				}
+			}
+		})
+	};
+};

package/admin/src/components/Combobox/styles.ts

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components';
+
+const Wrapper = styled.div`
+	${({ theme }) => css`
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	`}
+`;
+
+const Option = styled.span`
+	display: flex;
+	flex-direction: column;
+`;
+
+const ComboboxStyles = {
+	Wrapper,
+	Option
+};
+
+export default ComboboxStyles;

package/admin/src/components/ConfirmModal/index.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect } from 'react';
+import { useIntl } from 'react-intl';
+
+import { ModalLayout, ModalBody, ModalHeader, ModalFooter, Button, Typography } from '@strapi/design-system';
+
+import getTrad from '../../utils/getTrad';
+import { sleep } from '../../../../shared/utils/sleep';
+
+export interface IConfirmModalProps {
+	onSubmit: () => void;
+	closeModal: () => void;
+	isOpen?: boolean;
+	title?: React.ReactNode;
+	body?: React.ReactNode;
+	submitText?: string;
+}
+
+const ConfirmModal = ({
+	isOpen,
+	title,
+	body,
+	submitText,
+	onSubmit = () => {
+		console.warn('Modal submit function not set');
+	},
+	closeModal = () => {
+		console.warn('Modal close function not set');
+	}
+}: IConfirmModalProps): JSX.Element => {
+	const { formatMessage } = useIntl();
+
+	const colors = {
+		text: 'neutral800',
+		icon: 'neutral900'
+	};
+
+	const fixModalFocus = async () => {
+		if (isOpen) {
+			// To make sure the modal's focus trap works, we need to wait a short time before blurring the document
+			await sleep(100);
+			// @ts-ignore
+			document?.activeElement?.blur();
+		}
+	};
+
+	useEffect(() => {
+		fixModalFocus();
+	}, [isOpen]);
+
+	if (!isOpen) {
+		return <></>;
+	}
+
+	return (
+		<ModalLayout onClose={closeModal} labelledBy="title" width="500px">
+			<ModalHeader>
+				<Typography fontWeight="bold" textColor={colors.text} as="h2" id="title">
+					{title}
+				</Typography>
+			</ModalHeader>
+
+			{/* New Strapi design system overflow styling breaks dropdowns in modals */}
+			<ModalBody style={{ overflow: 'initial' }}>
+				<Typography textColor={colors.text} id="body">
+					{body}
+				</Typography>
+			</ModalBody>
+
+			<ModalFooter
+				startActions={
+					<Button onClick={closeModal} variant="tertiary">
+						{formatMessage({
+							id: getTrad('template.confirmModal.buttons.cancel')
+						})}
+					</Button>
+				}
+				endActions={
+					<Button onClick={onSubmit}>
+						{submitText ||
+							formatMessage({
+								id: getTrad('template.confirmModal.buttons.submit')
+							})}
+					</Button>
+				}
+			/>
+		</ModalLayout>
+	);
+};
+
+export default ConfirmModal;

package/admin/src/components/EditView/CollectionTypeSearch/index.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import debounce from 'lodash/debounce';
+import { OptionProps, SingleValue, components } from 'react-select';
+import { useCMEditViewDataManager, useFetchClient } from '@strapi/helper-plugin';
+
+import { Combobox, IReactSelectValue } from '../../Combobox';
+import { getSearchEntities } from '../../../api/collection-type';
+import { usePrevious } from '../../../utils/hooks/usePrevious';
+import { useGetLocaleFromUrl } from '../../../utils/hooks/useGetLocaleFromUrl';
+
+const SEARCH_DEBOUNCE_MS = 150;
+const PAGE = 1;
+
+interface Props {
+	uid: string;
+}
+
+export const CollectionTypeSearch = ({ uid }: Props) => {
+	const fetchClient = useFetchClient();
+	const form = useCMEditViewDataManager();
+	const { locales } = useSelector((state: any) => state.i18n_locales);
+	const urlLocale = useGetLocaleFromUrl();
+	const defaultLocale = locales.find((locale: any) => locale.isDefault);
+	const selectedLocale = form.initialData?.locale ?? urlLocale ?? defaultLocale.code;
+	const prevUid = usePrevious(uid);
+
+	const [selected, setSelected] = useState<SingleValue<IReactSelectValue | null>>(
+		getInitialSelectItem(form.initialData?.collectionTypeId, form.initialData?.collectionTypeTitle)
+	);
+
+	const isPagePageType = !uid;
+	const searchEntitiesIsEnabled = !isPagePageType;
+
+	const getItems = async (inputValue?: string): Promise<IReactSelectValue[]> => {
+		const searchEntities = await getSearchEntities({
+			fetchClient,
+			page: PAGE,
+			locale: selectedLocale,
+			uid,
+			searchQuery: inputValue,
+			currentCollectionTypeId: form.initialData?.collectionTypeId,
+			currentPageId: form.initialData?.id
+		});
+
+		return searchEntities.results.map((x) => ({
+			value: String(x.id),
+			label: x.title,
+			isDisabled: x.hasPages && !x.isCurrentSelected,
+			initialSelected: x.isCurrentSelected
+		}));
+	};
+
+	const setCollectionTypeId = (item?: SingleValue<IReactSelectValue>) => {
+		form.onChange({
+			target: {
+				name: 'collectionTypeId',
+				value: item?.value || null
+			},
+			shouldSetInitialValue: true
+		});
+		setSelected(item || null);
+	};
+
+	const handleChange = (item?: SingleValue<IReactSelectValue>) => {
+		setCollectionTypeId(item);
+	};
+
+	useEffect(() => {
+		if (prevUid !== null && prevUid !== uid) {
+			setSelected(null);
+		}
+	}, [uid]);
+
+	const debouncedFetch = debounce((searchTerm, callback) => {
+		promiseOptions(searchTerm).then((result) => {
+			return callback(result || []);
+		});
+	}, SEARCH_DEBOUNCE_MS);
+
+	const promiseOptions = (inputValue: string): Promise<IReactSelectValue[]> =>
+		new Promise<IReactSelectValue[]>((resolve) => {
+			resolve(getItems(inputValue));
+		});
+
+	return (
+		<Combobox
+			key={`rerenderOnUidChange-${uid}`}
+			id="collectionTypeSearch"
+			label="Entity"
+			loadOptions={debouncedFetch}
+			cacheOptions
+			onChange={handleChange}
+			customOption={CustomOption}
+			value={selected}
+			defaultOptions={searchEntitiesIsEnabled}
+		/>
+	);
+};
+
+const CustomOption = (props: OptionProps<IReactSelectValue, false>) => {
+	return (
+		<components.Option {...props}>
+			<span>{props.children}</span>
+			{props.isDisabled && <span>Entity is in use</span>}
+			{props.data.initialSelected && <span>Currently selected</span>}
+		</components.Option>
+	);
+};
+
+const getInitialSelectItem = (id?: string, title?: string): SingleValue<IReactSelectValue | null> =>
+	id
+		? {
+				value: String(id),
+				label: title ?? '',
+				initialSelected: true
+		  }
+		: null;