@plaudit/gutenberg-api-extensions 2.8.0 → 2.10.0

package/src/controls/AsynchronousFormTokenField.tsx

@@ -1,151 +0,0 @@
-import {Spinner, FormTokenField} from '@wordpress/components';
-import type {TokenItem} from "@wordpress/components/build-types/form-token-field/types";
-import {__} from "@wordpress/i18n";
-import {useEffect, useState} from '@wordpress/element';
-import debounce from "debounce";
-
-// The strange values correspond to the literals that are expected by TokenItem.status, which allows the assignment code to be cleaner
-export const enum ValidationState {
-	Valid = 'success',
-	Invalid = 'error',
-	Validating = 'validating'
-}
-
-export interface AsynchronousFormTokenFieldProps {
-	label: string;
-	value: string[];
-	onChange: (value: string[]) => void;
-
-	validationQuery(tokens: string[]): Promise<Array<TokenItem>>;
-	suggestionQuery(input: string): Promise<Array<string>>;
-	makeTokenFromSuggestion(suggestion: string): TokenItem;
-	validValues: Map<string, ValidationState>;
-	validator?: (value: string) => boolean;
-}
-
-export function AsynchronousFormTokenField(props: AsynchronousFormTokenFieldProps) {
-	const [isInitializing, setIsInitializing] = useState(true);
-	const [isLoading, setIsLoading] = useState(false);
-	const [isValidating, setIsValidating] = useState(false);
-
-	const [currentTokens, setCurrentTokens] = useState<Array<TokenItem>>([]);
-	const [suggestions, setSuggestions] = useState<Array<string>>([]);
-
-	const [myValidationRequestQueue] = useState<{queue: Promise<boolean>, currentRequest: number, trigger: (currentTokens: TokenItem[]) => void}>(() => ({
-		queue: Promise.resolve(true), currentRequest: 0,
-		trigger(currentTokens) {
-			const tokensInNeedOfValidation = currentTokens.filter(token => token.status === ValidationState.Validating);
-			if (tokensInNeedOfValidation.length > 0) {
-				setIsValidating(true);
-				const myNumber = ++myValidationRequestQueue.currentRequest;
-				myValidationRequestQueue.queue = myValidationRequestQueue.queue.then(async () => {
-					const tokensBeingValidatedList = tokensInNeedOfValidation.map(token => token.value).filter(value => !props.validValues.has(value));
-					if (tokensBeingValidatedList.length > 0) {
-						const tokensBeingValidated = new Set(tokensBeingValidatedList);
-						for (const value of tokensBeingValidatedList) {
-							props.validValues.set(value, ValidationState.Validating);
-						}
-						const validatedTokens = await props.validationQuery(tokensBeingValidatedList);
-
-						for (const validToken of validatedTokens) {
-							tokensBeingValidated.delete(validToken.value);
-							props.validValues.set(validToken.value, ValidationState.Valid);
-						}
-						for (const value of tokensBeingValidated) {
-							if (props.validValues.get(value) === ValidationState.Validating) {
-								props.validValues.set(value, ValidationState.Invalid);
-							}
-						}
-					}
-
-					if (myNumber === myValidationRequestQueue.currentRequest) {
-						let changed = false;
-						for (const token of currentTokens) {
-							if (token.status === ValidationState.Validating) {
-								const status = props.validValues.get(token.value);
-								if (status !== undefined && token.status !== status) {
-									changed = true;
-									token.status = status;
-								}
-							}
-						}
-						if (changed) {
-							setCurrentTokens(currentTokens);
-						}
-						setIsValidating(false);
-					}
-					return true;
-				});
-			}
-		}
-	}));
-
-	const [mySuggestionRequestQueue] = useState<{
-		queue: Promise<boolean>, currentRequest: number, debouncer: (input: string) => void
-	}>(() => ({
-		queue: Promise.resolve(true),
-		currentRequest: 0,
-		debouncer: debounce(input => {
-			if (input.length < 2) {
-				setSuggestions([]);
-			} else {
-				setIsLoading(true);
-				const myNumber = ++mySuggestionRequestQueue.currentRequest;
-				mySuggestionRequestQueue.queue = mySuggestionRequestQueue.queue.then(async () => {
-					if (myNumber === mySuggestionRequestQueue.currentRequest) {
-						setSuggestions(await props.suggestionQuery(input));
-						setIsLoading(false);
-					}
-					return true;
-				});
-			}
-		}, 500)
-	}));
-
-	useEffect(() => {
-		props.validationQuery(props.value).then(data => {
-			const tokenLabels = new Map<string, string|undefined>();
-			for (const rep of data) {
-				tokenLabels.set(rep.value, rep.title);
-				props.validValues.set(rep.value, ValidationState.Valid);
-			}
-
-			for (const value of props.value) {
-				if (!props.validValues.has(value)) {
-					props.validValues.set(value, ValidationState.Invalid);
-				}
-			}
-			setCurrentTokens(props.value.map(value => ({value, title: tokenLabels.get(value) ?? value, status: props.validValues.get(value)})));
-			setIsInitializing(false);
-		});
-	}, []);
-
-	useEffect(() => myValidationRequestQueue.trigger(currentTokens), [currentTokens]);
-
-	if (isInitializing) {
-		return <Spinner />;
-	}
-
-	const tokenTitleMappings = new Map(currentTokens.map(currentToken => [currentToken.value, currentToken.title]));
-
-	return <>
-		<FormTokenField
-			value={currentTokens}
-			label={props.label}
-			placeholder="Start typing to see suggestions"
-			suggestions={suggestions}
-			onChange={tokens => {
-				const tokenItems = tokens.map(token => typeof token === 'string' ? props.makeTokenFromSuggestion(token) : token);
-
-				props.onChange(tokenItems.map(token => token.value));
-				setCurrentTokens(tokenItems);
-			}}
-			__experimentalValidateInput={props.validator}
-			__experimentalAutoSelectFirstMatch={true}
-			displayTransform={token => tokenTitleMappings.get(token) ?? token}
-			onInputChange={mySuggestionRequestQueue.debouncer}
-		/>
-		{isLoading && <div><Spinner /><span className="components-form-token-field__help">{__("Updating Suggestions")}</span></div>}
-		{isValidating && <div><Spinner /><span className="components-form-token-field__help">{__("Validating")}</span></div>}
-	</>;
-}

package/src/controls/ExtendedPostPicker.tsx

@@ -1,50 +0,0 @@
-import apiFetch from '@wordpress/api-fetch';
-import {AsynchronousFormTokenField, ValidationState} from "./AsynchronousFormTokenField";
-import {useState} from "@wordpress/element";
-import {addQueryArgs} from "@wordpress/url";
-
-type ExtendedPostPickerProps = {
-	onChange: (value: string[]) => void;
-	label: string;
-	postTypes: string[];
-	placeholder: string;
-	value: string[]
-};
-
-export type ExtendedPostPickerConstructorProps = Partial<Omit<ExtendedPostPickerProps, 'onChange'|'value'|'label'>> & Pick<ExtendedPostPickerProps, 'onChange'|'value'|'label'>;
-
-async function makeAPIRequest(data: {search?: string, ids?: string, postTypes?: string}) {
-	return (await apiFetch<Array<{ id: number, title: string }>>({path: addQueryArgs("/plaudit/common/v1/post-table-search", data)}))
-		.map(item => ({id: item.id.toString(), title: item.title}));
-}
-export function ExtendedPostPicker(props: ExtendedPostPickerConstructorProps) {
-	const [validPostIds, _] = useState(new Map<string, ValidationState>());
-	const value = props.value ?? [];
-	return <AsynchronousFormTokenField
-		{...props}
-		value={value}
-		makeTokenFromSuggestion={token => {
-			if (isNumeric(token)) {
-				return {value: token, status: validPostIds.get(token) ?? ValidationState.Validating, title: token};
-			} else {
-				const tokenId = /\(#([0-9]+)\)$/.exec(token)?.[1];
-				if (tokenId) {
-					return {value: tokenId, status: validPostIds.get(tokenId) ?? ValidationState.Validating, title: token};
-				}
-				return {value: token, status: ValidationState.Invalid, title: token};
-			}
-		}}
-		suggestionQuery={input => makeAPIRequest({search: input, postTypes: props.postTypes?.join(',')})
-			.then(posts => posts.map(post => `${post.title} (#${post.id})`))}
-		validationQuery={idsBeingValidated => makeAPIRequest({ids: idsBeingValidated.join(','), postTypes: props.postTypes?.join(',')})
-			.then(posts => posts.map(post => ({value: post.id, title: post.title, status: ValidationState.Valid})))}
-		validValues={validPostIds}
-		validator={token => /\(#([0-9]+)\)$/.exec(token)?.[1] !== undefined}
-	/>;
-}
-
-function isNumeric(str: string|number) {
-	if (typeof str !== "string") return true; // we only process strings!
-	return !isNaN(str as any) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
-		!isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
-}

package/src/controls/InspectorPanel.tsx

@@ -1,16 +0,0 @@
-import type {PanelBodyProps} from "@wordpress/components/build-types/panel/types";
-import {InspectorControls} from "@wordpress/block-editor";
-import {PanelBody} from "@wordpress/components";
-
-import React from "react";
-
-type InspectorControlsType = {
-	// WordPress' types don't declare the group parameter, which is what we use to put the InspectorPanel in the correct spot
-	(props: InspectorControls.Props & { group?: string }): ReturnType<typeof InspectorControls>;
-} & (typeof InspectorControls);
-export function InspectorPanel(props: PanelBodyProps&{group?: string, condition?(): boolean}) {
-	const FullyTypedInspectorControls = InspectorControls as InspectorControlsType;
-	return <FullyTypedInspectorControls group={props.group}>
-		<PanelBody {...props} children={props.condition === undefined || props.condition() ? props.children : []} />
-	</FullyTypedInspectorControls>;
-}

package/src/controls/PickOne.tsx

@@ -1,80 +0,0 @@
-import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, BaseControl,
-	ColorPalette, RadioControl, SelectControl, useBaseControlProps
-} from "@wordpress/components";
-import type {ColorObject} from "@wordpress/components/build-types/color-palette/types";
-
-import type {PickableOptions, SimpleBlockControlProps} from "./types";
-
-import React, {type ReactElement} from "react";
-
-function makeSharedRadioAndSelectProps<T extends string>(props: SimpleBlockControlProps<T, string>&{options: PickableOptions<string>}) {
-	return {
-		label: props.label,
-		onChange(value: string) {
-			props.setAttributes({[props.attribute]: value});
-		},
-		options: props.options.map(([value, label]) => ({
-			value, label: typeof label === 'string' ? label : label.text
-		}))
-	} as Pick<Parameters<(typeof SelectControl)|(typeof RadioControl)>[0], 'label'|'options'>&{onChange(value: string): void};
-}
-
-export type PickOneFromToggleGroupProps<T extends string> = SimpleBlockControlProps<T, string|number>&{options: PickableOptions<string, {icon: ReactElement}>};
-export function PickOneFromToggleGroup<T extends string>(props: PickOneFromToggleGroupProps<T>) {
-	return <ToggleGroupControl
-		label={props.label}
-		value={props.attributes[props.attribute]}
-		onChange={value => props.setAttributes({[props.attribute]: value})}
-		children={
-			props.options.map(([value, label]) => typeof label === 'string'
-				? <ToggleGroupControlOption key={value} value={value} label={label} />
-				: <ToggleGroupControlOptionIcon key={value} value={value} label={label.text} icon={label.icon} />)
-		}
-	/>;
-}
-
-export function PickOneFromSelect<T extends string>(props: SimpleBlockControlProps<T, string>& { options: PickableOptions<string> }) {
-	return <SelectControl
-		{...makeSharedRadioAndSelectProps(props)}
-		value={props.attributes[props.attribute]}
-	/>;
-}
-export function PickOneFromRadios<T extends string>(props: SimpleBlockControlProps<T, string>& { options: PickableOptions<string> }) {
-	return <RadioControl
-		{...makeSharedRadioAndSelectProps(props)}
-		selected={props.attributes[props.attribute]}
-	/>;
-}
-
-export function PickOneFromColors<T extends string>(props: SimpleBlockControlProps<T, string>&{options: PickableOptions<string, {color?: string|undefined}>}) {
-	const valueToColorMap = new Map<string, string>();
-	const colorToValueMap = new Map<string, string>();
-	const colors: ColorObject[] = [];
-	for (const [value, display] of props.options) {
-		if (typeof display === 'string') {
-			colors.push({color: value, name: display});
-		} else if (display.color) {
-			valueToColorMap.set(value, display.color);
-			colorToValueMap.set(display.color, value);
-			colors.push({color: display.color, name: display.text});
-		} else {
-			colors.push({color: value, name: display.text});
-		}
-	}
-
-	const currentColor = valueToColorMap.get(props.attributes[props.attribute]) ?? props.attributes[props.attribute];
-	const {baseControlProps, controlProps} = useBaseControlProps({label: props.label});
-	return <BaseControl {...baseControlProps}>
-		<ColorPalette
-			{...controlProps}
-			disableCustomColors={true}
-			onChange={color => props.setAttributes({[props.attribute]: colorToValueMap.get(color ?? currentColor) ?? color ?? currentColor})}
-			colors={colors}
-			value={currentColor}
-			clearable={false}
-		/>
-	</BaseControl>;
-}

package/src/controls/SimpleToggle.tsx

@@ -1,9 +0,0 @@
-import {ToggleControl} from "@wordpress/components";
-
-import type {SimpleBlockControlProps} from "./types";
-
-import React from "react";
-
-export function SimpleToggle<T extends string>(props: SimpleBlockControlProps<T, boolean>) {
-	return <ToggleControl checked={props.attributes[props.attribute]} label={props.label} onChange={checked => props.setAttributes({[props.attribute]: checked})} />;
-}

package/src/controls/types.ts

@@ -1,11 +0,0 @@
-import type {BlockEditProps} from "@wordpress/blocks";
-
-export type SpecificValueBlockProps<T extends string, V> = {
-	attribute: T, attributes: BlockEditProps<Record<T, V>&Record<string, unknown>>['attributes'],
-	setAttributes: BlockEditProps<any>['setAttributes']
-}
-export type SimpleBlockControlProps<T extends string, V> = SpecificValueBlockProps<T, V>&{
-	label: string
-};
-
-export type PickableOptions<V extends string|number, T extends object = {}> = Array<[V, string|({text: string}&T)]>;

package/src/lib/plaudit-icons/column-1.tsx

@@ -1,8 +0,0 @@
-import React from "react";
-
-export const iconColumn1 = <svg width={34} height={24} viewBox="0 0 34 24">
-	<path
-		d="M32 2H2v20h30V2zM2 0C.9 0 0 .9 0 2v20c0 1.1.9 2 2 2h30c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2H2z"
-		fillRule="evenodd" clipRule="evenodd"
-	/>
-</svg>;

package/src/lib/plaudit-icons/column-2.tsx

@@ -1,8 +0,0 @@
-import React from "react";
-
-export const iconColumn2 = <svg width={34} height={24} viewBox="0 0 34 24">
-	<path
-		d="M32 0c1.1 0 2 .9 2 2v20c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V2C0 .9.9 0 2 0h30zm0 22V2H18v20h14zm-16 0H2V2h14v20z"
-		fillRule="evenodd" clipRule="evenodd"
-	/>
-</svg>;

package/src/lib/plaudit-icons/column-3.tsx

@@ -1,8 +0,0 @@
-import React from "react";
-
-export const iconColumn3 = <svg width={34} height={24} viewBox="0 0 34 24">
-	<path
-		d="M34 2c0-1.1-.9-2-2-2H2C.9 0 0 .9 0 2v20c0 1.1.9 2 2 2h30c1.1 0 2-.9 2-2V2zM21.5 22h-9V2h9v20zm2 0V2H32v20h-8.5zm-13 0H2V2h8.5v20z"
-		fillRule="evenodd" clipRule="evenodd"
-	/>
-</svg>;

package/src/lib/plaudit-icons/placement-center.tsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export const placementCenter = <svg version="1.1" x="0px" y="0px" focusable={false} viewBox="0 0 24 24" enableBackground="new 0 0 24 24" xmlSpace="preserve">
-	<path d="M20,11h-5V4H9v7H4v1.5h5V20h6v-7.5h5V11z" />
-</svg>;

package/src/lib/plaudit-icons/placement-end.tsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export const placementEnd = <svg version="1.1" x="0px" y="0px" focusable={false} viewBox="0 0 24 24" enableBackground="new 0 0 24 24" xmlSpace="preserve">
-	<path d="M15,4H9v11h6V4z M4,18.5V20h16v-1.5H4z" />
-</svg>;

package/src/lib/plaudit-icons/placement-start.tsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export const placementStart = <svg version="1.1" x="0px" y="0px" focusable={false} viewBox="0 0 24 24" enableBackground="new 0 0 24 24" xmlSpace="preserve">
-	<path d="M9,20h6V9H9V20z M4,4v1.5h16V4H4z" />
-</svg>;

package/src/lib/plaudit-icons/placement-stretch.tsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export const placementStretch = <svg version="1.1" x="0px" y="0px" focusable={false} viewBox="0 0 24 24" enableBackground="new 0 0 24 24" xmlSpace="preserve">
-	<path d="M8.8,6.5h6v11h-6V6.5z M4,18.5h16V20H4V18.5z M4,4h16v1.5H4V4z" />
-</svg>;

package/src/lib/plaudit-icons/plaudit-icon.tsx

@@ -1,6 +0,0 @@
-import React from "react";
-
-export const plauditIcon = <svg width={24} height={24} viewBox="0 0 139 157.6">
-	<path fill="#d20000"
-	      d="M83.3 39.1L101.6 9c2-3.2.9-7.1-2.4-8.5s-6.9.4-7.9 4l-9.7 33.9c-1.1 3.6-.3 4 1.7.7zm-43.9 19L9 40.5c-3.3-1.9-7.1-.7-8.5 2.6s.5 6.8 4.2 7.8l34.1 8.9c3.7 1 4 .2.6-1.7zm16.3-19c2 3.2 2.7 2.9 1.7-.7L47.6 4.5C46.5.8 43-1 39.7.5S35.3 5.8 37.3 9l18.4 30.1zm82.8 4c-1.4-3.3-5.2-4.5-8.5-2.6L99.5 58.1c-3.3 1.9-3 2.7.7 1.7l34.1-8.9c3.7-1 5.6-4.5 4.2-7.8zM88.8 57.7c-10.6-18.3-28-18.3-38.7 0l-38.7 66.6c-10.6 18.3-1.9 33.3 19.3 33.3h77.4c21.3 0 30-15 19.3-33.3L88.8 57.7zm-19.3 1c7.1 0 12.8 5.8 12.7 12.9s-5.8 12.8-12.9 12.7c-7 0-12.7-5.8-12.8-12.8.1-7.1 5.8-12.9 13-12.8zm32 91.2h-64c-17.6 0-24.8-8.1-16-18l32-35.9c8.8-9.9 23.2-9.9 32 0l32 35.9c8.8 9.9 1.6 17.9-16 18z" />
-</svg>;

package/src/lib/plaudit-icons/reusable-block-marker.tsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export const reusableBlockMarker = <svg viewBox="0 0 24 24">
-	<path d="M21.3 10.8l-5.6-5.6c-.7-.7-1.8-.7-2.5 0l-5.6 5.6c-.7.7-.7 1.8 0 2.5l5.6 5.6c.3.3.8.5 1.2.5s.9-.2 1.2-.5l5.6-5.6c.8-.7.8-1.9.1-2.5zm-1 1.4l-5.6 5.6c-.1.1-.3.1-.4 0l-5.6-5.6c-.1-.1-.1-.3 0-.4l5.6-5.6s.1-.1.2-.1.1 0 .2.1l5.6 5.6c.1.1.1.3 0 .4zm-16.6-.4L10 5.5l-1-1-6.3 6.3c-.7.7-.7 1.8 0 2.5L9 19.5l1.1-1.1-6.3-6.3c-.2 0-.2-.2-.1-.3z" />
-</svg>