@webbio/strapi-plugin-page-builder 0.8.5-platform → 0.9.1-platform

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/components/Relations/useRelation.ts

@@ -0,0 +1,170 @@
+// @ts-nocheck build compiler thinks differently than runtime compiler
+import { useEffect, useState } from 'react';
+
+import { useCallbackRef, useFetchClient } from '@strapi/helper-plugin';
+import { useInfiniteQuery } from 'react-query';
+
+import { NormalizeRelationArgs, NormalizedRelation, normalizeRelations } from './utils/normalizeRelations';
+
+import type { Contracts } from '../../../../../../content-manager/shared';
+
+interface UseRelationArgs {
+	relation: {
+		enabled: boolean;
+		endpoint: string;
+		normalizeArguments: NormalizeRelationArgs;
+		onLoad: (data: NormalizedRelation[]) => void;
+		pageParams?: Record<string, any>;
+		pageGoal?: number;
+	};
+	search: {
+		endpoint: string;
+		pageParams?: Record<string, any>;
+	};
+}
+
+const useRelation = (cacheKey: any[] = [], { relation, search }: UseRelationArgs) => {
+	const [searchParams, setSearchParams] = useState({});
+	const [currentPage, setCurrentPage] = useState(0);
+	const { get } = useFetchClient();
+
+	const { onLoad: onLoadRelations, normalizeArguments } = relation;
+
+	const relationsRes = useInfiniteQuery(
+		['relation', ...cacheKey],
+		async ({ pageParam = 1 }) => {
+			try {
+				const { data } = await get<Contracts.Relations.FindExisting.Response>(relation?.endpoint, {
+					params: {
+						...(relation.pageParams ?? {}),
+						page: pageParam
+					}
+				});
+
+				setCurrentPage(pageParam);
+
+				return data;
+			} catch (err) {
+				return null;
+			}
+		},
+		{
+			cacheTime: 0,
+			enabled: relation.enabled,
+			getNextPageParam(lastPage) {
+				const isXToOneRelation = lastPage && !('pagination' in lastPage);
+
+				if (
+					!lastPage || // the API may send an empty 204 response
+					isXToOneRelation || // xToOne relations do not have a pagination
+					lastPage?.pagination.page >= lastPage?.pagination.pageCount
+				) {
+					return undefined;
+				}
+
+				// eslint-disable-next-line consistent-return
+				return lastPage.pagination.page + 1;
+			},
+			select: (data) => ({
+				...data,
+				pages: data.pages.map((page) => {
+					if (!page) {
+						return page;
+					}
+
+					let normalizedResults: Contracts.Relations.RelationResult[] = [];
+
+					// xToOne relations return an object, which we normalize so that relations
+					// always have the same shape
+					if ('data' in page && page.data) {
+						normalizedResults = [page.data];
+					} else if ('results' in page && page.results) {
+						normalizedResults = [...page.results].reverse();
+					}
+
+					return {
+						pagination: 'pagination' in page ? page.pagination : undefined,
+						results: normalizedResults
+					};
+				})
+			})
+		}
+	);
+
+	const { pageGoal } = relation;
+
+	const { status, data, fetchNextPage, hasNextPage } = relationsRes;
+
+	useEffect(() => {
+		/**
+		 * This ensures the infiniteQuery hook fetching has caught-up with the modifiedData
+		 * state i.e. in circumstances where you add 10 relations, the browserState knows this,
+		 * but the hook would think it could fetch more, when in reality, it can't.
+		 */
+		if (pageGoal && pageGoal > currentPage && hasNextPage && status === 'success') {
+			fetchNextPage({
+				pageParam: currentPage + 1
+			});
+		}
+	}, [pageGoal, currentPage, fetchNextPage, hasNextPage, status]);
+
+	const onLoadRelationsCallback = useCallbackRef(onLoadRelations);
+
+	useEffect(() => {
+		if (status === 'success' && data && data.pages?.at(-1)?.results && onLoadRelationsCallback) {
+			// everytime we fetch, we normalize prior to adding to redux
+			const normalizedResults = normalizeRelations(data.pages.at(-1)?.results ?? [], normalizeArguments);
+
+			// this is loadRelation from EditViewDataManagerProvider
+			onLoadRelationsCallback(normalizedResults);
+		}
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [status, onLoadRelationsCallback, data]);
+
+	const searchRes = useInfiniteQuery(
+		['relation', ...cacheKey, 'search', JSON.stringify(searchParams)],
+		async ({ pageParam = 1 }) => {
+			try {
+				const { data } = await get<Contracts.Relations.FindAvailable.Response>(search.endpoint, {
+					params: {
+						...(search.pageParams ?? {}),
+						...searchParams,
+						page: pageParam
+					}
+				});
+
+				return data;
+			} catch (err) {
+				return null;
+			}
+		},
+		{
+			enabled: Object.keys(searchParams).length > 0,
+			getNextPageParam(lastPage) {
+				if (
+					!lastPage?.pagination ||
+					(lastPage.pagination && lastPage.pagination.page >= lastPage.pagination.pageCount)
+				) {
+					return undefined;
+				}
+
+				// eslint-disable-next-line consistent-return
+				return lastPage.pagination.page + 1;
+			}
+		}
+	);
+
+	const searchFor = (term: string, options: object = {}) => {
+		setSearchParams({
+			...options,
+			_q: term,
+			_filter: '$containsi'
+		});
+	};
+
+	return { relations: relationsRes, search: searchRes, searchFor };
+};
+
+export { useRelation };
+export type { UseRelationArgs };

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/components/Relations/utils/getRelationLink.ts

@@ -0,0 +1,5 @@
+import { Entity } from '@strapi/types';
+
+export function getRelationLink(targetModel: string, id?: Entity.ID) {
+	return `/content-manager/collection-types/${targetModel}/${id ?? ''}`;
+}

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/components/Relations/utils/normalizeRelations.ts

@@ -0,0 +1,52 @@
+// @ts-nocheck build compiler thinks differently than runtime compiler
+import type { Contracts } from '../../../../../../../content-manager/shared';
+
+import { PUBLICATION_STATES } from '../RelationInputDataManager';
+
+import { getRelationLink } from './getRelationLink';
+
+export interface NormalizeRelationArgs {
+	shouldAddLink: boolean;
+	mainFieldName: string;
+	targetModel: string;
+}
+
+export type NormalizedRelation = Contracts.Relations.RelationResult & {
+	href?: string;
+	mainField: string;
+	publicationState?: false | 'published' | 'draft';
+};
+
+export const normalizeRelation = (
+	relation: Contracts.Relations.RelationResult,
+	{ shouldAddLink, mainFieldName, targetModel }: NormalizeRelationArgs
+) => {
+	const nextRelation: NormalizedRelation = {
+		...relation,
+		mainField: relation[mainFieldName]
+	};
+
+	if (shouldAddLink) {
+		nextRelation.href = getRelationLink(targetModel, nextRelation.id);
+	}
+
+	nextRelation.publicationState = false;
+
+	if (nextRelation?.publishedAt !== undefined) {
+		nextRelation.publicationState = nextRelation.publishedAt ? PUBLICATION_STATES.PUBLISHED : PUBLICATION_STATES.DRAFT;
+	}
+
+	return nextRelation;
+};
+
+/*
+ * Applies some transformations to existing and new relations in order to display them correctly
+ * relations: raw relations data coming from useRelations
+ * shouldAddLink: comes from generateRelationQueryInfos, if true we display a link to the relation (TO FIX: explanation)
+ * mainFieldName: name of the main field inside the relation (e.g. text field), if no displayable main field exists (e.g. date field) we use the id of the entry
+ * targetModel: the model on which the relation is based on, used to create an URL link
+ */
+
+export const normalizeRelations = (relations: Contracts.Relations.RelationResult[], args: NormalizeRelationArgs) => {
+	return [...relations].map((relation) => normalizeRelation(relation, args));
+};

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/constants/attributes.ts

@@ -0,0 +1,3 @@
+const CREATOR_FIELDS = ['createdBy', 'updatedBy'];
+
+export { CREATOR_FIELDS };

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/hooks/useDragAndDrop.ts

@@ -0,0 +1,253 @@
+import * as React from 'react';
+
+import {
+	useDrag,
+	useDrop,
+	type HandlerManager,
+	type ConnectDragSource,
+	type ConnectDropTarget,
+	type ConnectDragPreview,
+	type DragSourceMonitor
+} from 'react-dnd';
+
+import { useKeyboardDragAndDrop, type UseKeyboardDragAndDropCallbacks } from './useKeyboardDragAndDrop';
+
+import type { Entity } from '@strapi/types';
+
+const DIRECTIONS = {
+	UPWARD: 'upward',
+	DOWNWARD: 'downward'
+} as const;
+
+const DROP_SENSITIVITY = {
+	REGULAR: 'regular',
+	IMMEDIATE: 'immediate'
+} as const;
+
+interface UseDragAndDropOptions<
+	TIndex extends number | Array<number> = number,
+	TItem extends { index: TIndex } = { index: TIndex }
+> extends UseKeyboardDragAndDropCallbacks<TIndex> {
+	type?: string;
+	index: TIndex;
+	item?: TItem;
+	onStart?: () => void;
+	onEnd?: () => void;
+	dropSensitivity?: (typeof DROP_SENSITIVITY)[keyof typeof DROP_SENSITIVITY];
+}
+
+type Identifier = ReturnType<HandlerManager['getHandlerId']>;
+
+type UseDragAndDropReturn = [
+	props: {
+		handlerId: Identifier;
+		isDragging: boolean;
+		handleKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+		isOverDropTarget: boolean;
+		direction: (typeof DIRECTIONS)[keyof typeof DIRECTIONS] | null;
+	},
+	objectRef: React.RefObject<HTMLElement>,
+	dropRef: ConnectDropTarget,
+	dragRef: ConnectDragSource,
+	dragPreviewRef: ConnectDragPreview
+];
+
+type DropCollectedProps = {
+	handlerId: Identifier;
+	isOver: boolean;
+};
+
+/**
+ * A utility hook abstracting the general drag and drop hooks from react-dnd.
+ * Centralising the same behaviours and by default offering keyboard support.
+ */
+const useDragAndDrop = <
+	TIndex extends number | Array<number>,
+	TItem extends { index: TIndex; id?: Entity.ID; [key: string]: unknown }
+>(
+	active: boolean,
+	{
+		type = 'STRAPI_DND',
+		index,
+		item,
+		onStart,
+		onEnd,
+		onGrabItem,
+		onDropItem,
+		onCancel,
+		onMoveItem,
+		dropSensitivity = DROP_SENSITIVITY.REGULAR
+	}: UseDragAndDropOptions<TIndex, TItem>
+): UseDragAndDropReturn => {
+	const objectRef = React.useRef<HTMLElement>(null);
+
+	const [{ handlerId, isOver }, dropRef] = useDrop<TItem, void, DropCollectedProps>({
+		accept: type,
+		collect(monitor) {
+			return {
+				handlerId: monitor.getHandlerId(),
+				isOver: monitor.isOver({ shallow: true })
+			};
+		},
+		drop(item) {
+			const draggedIndex = item.index;
+			const newIndex = index;
+
+			if (isOver && onDropItem) {
+				onDropItem(draggedIndex, newIndex);
+			}
+		},
+		hover(item, monitor) {
+			if (!objectRef.current || !onMoveItem) {
+				return;
+			}
+
+			const dragIndex = item.index;
+			const newIndex = index;
+
+			const hoverBoundingRect = objectRef.current?.getBoundingClientRect();
+			const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+			const clientOffset = monitor.getClientOffset();
+			if (!clientOffset) return;
+
+			const hoverClientY = clientOffset && clientOffset.y - hoverBoundingRect.top;
+			if (typeof dragIndex === 'number' && typeof newIndex === 'number') {
+				if (dragIndex === newIndex) {
+					// Don't replace items with themselves
+					return;
+				}
+
+				if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {
+					// Dragging downwards
+					if (dragIndex < newIndex && hoverClientY < hoverMiddleY) {
+						return;
+					}
+
+					// Dragging upwards
+					if (dragIndex > newIndex && hoverClientY > hoverMiddleY) {
+						return;
+					}
+				}
+
+				// Time to actually perform the action
+				onMoveItem(newIndex, dragIndex);
+				item.index = newIndex;
+			} else {
+				// Using numbers as indices doesn't work for nested list items with path like [1, 1, 0]
+				if (Array.isArray(dragIndex) && Array.isArray(newIndex))
+					if (dropSensitivity === DROP_SENSITIVITY.REGULAR) {
+						// Indices comparison to find item position in nested list
+						const minLength = Math.min(dragIndex.length, newIndex.length);
+						let areEqual = true;
+						let isLessThan = false;
+						let isGreaterThan = false;
+
+						for (let i = 0; i < minLength; i++) {
+							if (dragIndex[i] < newIndex[i]) {
+								isLessThan = true;
+								areEqual = false;
+								break;
+							} else if (dragIndex[i] > newIndex[i]) {
+								isGreaterThan = true;
+								areEqual = false;
+								break;
+							}
+						}
+
+						// Don't replace items with themselves
+						if (areEqual && dragIndex.length === newIndex.length) {
+							return;
+						}
+						// Dragging downwards
+						if (isLessThan && !isGreaterThan && hoverClientY < hoverMiddleY) {
+							return;
+						}
+
+						// Dragging upwards
+						if (isGreaterThan && !isLessThan && hoverClientY > hoverMiddleY) {
+							return;
+						}
+					}
+				onMoveItem(newIndex, dragIndex);
+				item.index = newIndex;
+			}
+		}
+	});
+
+	const getDragDirection = (monitor: DragSourceMonitor<TItem, void>) => {
+		if (
+			monitor &&
+			monitor.isDragging() &&
+			!monitor.didDrop() &&
+			monitor.getInitialClientOffset() &&
+			monitor.getClientOffset()
+		) {
+			const deltaY = monitor.getInitialClientOffset()!.y - monitor.getClientOffset()!.y;
+
+			if (deltaY > 0) return DIRECTIONS.UPWARD;
+
+			if (deltaY < 0) return DIRECTIONS.DOWNWARD;
+
+			return null;
+		}
+
+		return null;
+	};
+
+	const [{ isDragging, direction }, dragRef, dragPreviewRef] = useDrag({
+		type,
+		item() {
+			if (onStart) {
+				onStart();
+			}
+
+			/**
+			 * This will be attached and it helps define the preview sizes
+			 * when a component is flexy e.g. Relations
+			 */
+			const { width } = objectRef.current?.getBoundingClientRect() ?? {};
+
+			return { index, width, ...item };
+		},
+		end() {
+			if (onEnd) {
+				onEnd();
+			}
+		},
+		canDrag: active,
+		/**
+		 * This is useful when the item is in a virtualized list.
+		 * However, if we don't have an ID then we want the libraries
+		 * defaults to take care of this.
+		 */
+		isDragging: item?.id
+			? (monitor) => {
+					return item.id === monitor.getItem().id;
+				}
+			: undefined,
+		collect: (monitor) => ({
+			isDragging: monitor.isDragging(),
+			initialOffset: monitor.getInitialClientOffset(),
+			currentOffset: monitor.getClientOffset(),
+			direction: getDragDirection(monitor)
+		})
+	});
+
+	const handleKeyDown = useKeyboardDragAndDrop(active, index, {
+		onGrabItem,
+		onDropItem,
+		onCancel,
+		onMoveItem
+	});
+
+	return [
+		{ handlerId, isDragging, handleKeyDown, isOverDropTarget: isOver, direction },
+		objectRef,
+		dropRef,
+		dragRef,
+		dragPreviewRef
+	];
+};
+
+export type { UseDragAndDropReturn, UseDragAndDropOptions };
+export { useDragAndDrop, DIRECTIONS, DROP_SENSITIVITY };

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/hooks/useKeyboardDragAndDrop.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+
+export type UseKeyboardDragAndDropCallbacks<TIndex extends number | Array<number> = number> = {
+	onCancel?: (index: TIndex) => void;
+	onDropItem?: (currentIndex: TIndex, newIndex?: TIndex) => void;
+	onGrabItem?: (index: TIndex) => void;
+	onMoveItem?: (newIndex: TIndex, currentIndex: TIndex) => void;
+};
+
+/**
+ * Utility hook designed to implement keyboard accessibile drag and drop by
+ * returning an onKeyDown handler to be passed to the drag icon button.
+ *
+ * @internal - You should use `useDragAndDrop` instead.
+ */
+export const useKeyboardDragAndDrop = <TIndex extends number | Array<number> = number>(
+	active: boolean,
+	index: TIndex,
+	{ onCancel, onDropItem, onGrabItem, onMoveItem }: UseKeyboardDragAndDropCallbacks<TIndex>
+) => {
+	const [isSelected, setIsSelected] = React.useState(false);
+
+	const handleMove = (movement: 'UP' | 'DOWN') => {
+		if (!isSelected) {
+			return;
+		}
+		if (typeof index === 'number' && onMoveItem) {
+			if (movement === 'UP') {
+				onMoveItem((index - 1) as TIndex, index);
+			} else if (movement === 'DOWN') {
+				onMoveItem((index + 1) as TIndex, index);
+			}
+		}
+	};
+
+	const handleDragClick = () => {
+		if (isSelected) {
+			if (onDropItem) {
+				onDropItem(index);
+			}
+			setIsSelected(false);
+		} else {
+			if (onGrabItem) {
+				onGrabItem(index);
+			}
+			setIsSelected(true);
+		}
+	};
+
+	const handleCancel = () => {
+		if (isSelected) {
+			setIsSelected(false);
+
+			if (onCancel) {
+				onCancel(index);
+			}
+		}
+	};
+
+	const handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
+		if (!active) {
+			return;
+		}
+
+		if (e.key === 'Tab' && !isSelected) {
+			return;
+		}
+
+		e.preventDefault();
+
+		switch (e.key) {
+			case ' ':
+			case 'Enter':
+				handleDragClick();
+				break;
+
+			case 'Escape':
+				handleCancel();
+				break;
+
+			case 'ArrowDown':
+			case 'ArrowRight':
+				handleMove('DOWN');
+				break;
+
+			case 'ArrowUp':
+			case 'ArrowLeft':
+				handleMove('UP');
+				break;
+
+			default:
+		}
+	};
+
+	return handleKeyDown;
+};

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/hooks/usePrev.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export const usePrev = <T>(value: T): T | undefined => {
+	const ref = useRef<T>();
+
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
+
+	return ref.current;
+};

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/utils/dragAndDrop.ts

@@ -0,0 +1,8 @@
+export const ItemTypes = {
+	COMPONENT: 'component',
+	EDIT_FIELD: 'editField',
+	FIELD: 'field',
+	DYNAMIC_ZONE: 'dynamicZone',
+	RELATION: 'relation',
+	BLOCKS: 'blocks'
+} as const;

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/utils/paths.ts

@@ -0,0 +1,29 @@
+import get from 'lodash/get';
+
+/**
+ * This is typically used in circumstances where there are re-orderable pieces e.g. Dynamic Zones
+ * or Repeatable fields. It finds the _original_ location of the initial data using `__temp_key__` values
+ * which are added to the fields in the `INIT_FORM` reducer to give array data a stable (when you add
+ * a new item they wont have a server ID).
+ */
+export const getInitialDataPathUsingTempKeys =
+	(initialData: Record<string, any>, modifiedData: Record<string, any>) => (currentPath: string) => {
+		const splitPath = currentPath.split('.');
+
+		return splitPath.reduce<string[]>((acc, currentValue, index) => {
+			const initialDataParent = get(initialData, acc);
+			const modifiedDataTempKey = get(modifiedData, [...splitPath.slice(0, index), currentValue, '__temp_key__']);
+
+			if (Array.isArray(initialDataParent) && typeof modifiedDataTempKey === 'number') {
+				const initialDataIndex = initialDataParent.findIndex((entry) => entry.__temp_key__ === modifiedDataTempKey);
+
+				acc.push(initialDataIndex.toString());
+
+				return acc;
+			}
+
+			acc.push(currentValue);
+
+			return acc;
+		}, []);
+	};

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/utils/refs.ts

@@ -0,0 +1,19 @@
+import { MutableRefObject, Ref } from 'react';
+
+type PossibleRef<T> = Ref<T> | undefined;
+
+const setRef = <T>(ref: PossibleRef<T>, value: T) => {
+	if (typeof ref === 'function') {
+		ref(value);
+	} else if (ref !== null && ref !== undefined) {
+		(ref as MutableRefObject<T>).current = value;
+	}
+};
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+export const composeRefs = <T>(...refs: PossibleRef<T>[]) => {
+	return (node: T) => refs.forEach((ref) => setRef(ref, node));
+};

package/admin/src/components/StrapiCore/admin/admin/src/content-manager/utils/translations.ts

@@ -0,0 +1,3 @@
+const getTranslation = (id: string) => `content-manager.${id}`;
+
+export { getTranslation };