@eightshift/frontend-libs-tailwind 1.0.0 → 1.1.0

package/scripts/editor/attributes.js

@@ -34,10 +34,7 @@ export const overrideInnerBlockAttributes = (select, clientId, attributesObject
 	const block = getBlock(clientId);
 
 	block.innerBlocks.map((item) => {
-		const {
-			attributes,
-			name,
-		} = item;
+		const { attributes, name } = item;
 
 		if (!exclude.includes(name)) {
 			for (const attribute in attributesObject) {
@@ -78,7 +75,7 @@ export const overrideInnerBlockAttributes = (select, clientId, attributesObject
  *       "type": "boolean"
  *     },
  *   },
-*    "buttonContent": {
+ *    "buttonContent": {
  *       "type": "string"
  *     },
  *   }
@@ -226,7 +223,6 @@ export const getAttrKey = (key, attributes, manifest) => {
  * Additional keys that are passed are defined in the includes array.
  */
 export const props = (newName, attributes, manual = {}) => {
-
 	const output = {};
 
 	// Check which attributes we need to include.
@@ -250,7 +246,7 @@ export const props = (newName, attributes, manual = {}) => {
 	const blockName = process.env.NODE_ENV === 'test' ? attributes.blockName.default : attributes.blockName;
 
 	// Populate prefix key for recursive checks of attribute names.
-	const prefix = (typeof attributes.prefix === 'undefined') ? camelCase(blockName) : attributes['prefix'];
+	const prefix = typeof attributes.prefix === 'undefined' ? camelCase(blockName) : attributes['prefix'];
 
 	// Set component prefix.
 	if (prefix === '') {
@@ -261,7 +257,6 @@ export const props = (newName, attributes, manual = {}) => {
 
 	// Iterate over attributes.
 	for (const [key, value] of Object.entries(attributes)) {
-
 		// Includes attributes from iteration.
 		if (includes.includes(key)) {
 			Object.assign(output, { [key]: value });
@@ -278,7 +273,6 @@ export const props = (newName, attributes, manual = {}) => {
 	if (!isEmpty(manual)) {
 		// Iterate manual attributes.
 		for (let [key, value] of Object.entries(manual)) {
-
 			// Includes attributes from iteration.
 			if (includes.includes(key)) {
 				Object.assign(output, { [key]: value });

package/scripts/editor/colors.js

@@ -14,51 +14,53 @@ import { upperFirst } from '@eightshift/ui-components/utilities';
  * getPaletteColors()
  * ```
  */
-export const getPaletteColors = () => useSelect((select) => {
-	const colors = select(STORE_NAME).getSettings().globalVariables.colors;
+export const getPaletteColors = () =>
+	useSelect((select) => {
+		const colors = select(STORE_NAME).getSettings().globalVariables.colors;
 
-	return colors.reduce(
-		(obj, item) => ({
-			...obj,
-			[item.slug]: item,
-		}),
-		{}
-	);
-});
+		return colors.reduce(
+			(obj, item) => ({
+				...obj,
+				[item.slug]: item,
+			}),
+			{},
+		);
+	});
 
-export const getColorData = (themeColors) => Object.entries(themeColors ?? {})?.reduce((curr, [name, value]) => {
-	if (name === 'current') {
-		return curr;
-	}
+export const getColorData = (themeColors) =>
+	Object.entries(themeColors ?? {})?.reduce((curr, [name, value]) => {
+		if (name === 'current') {
+			return curr;
+		}
 
-	if (name === 'transparent') {
-		return [
-			...curr,
-			{
-				name: 'Transparent',
-				slug: 'transparent',
-				color: '#00000000',
-			}
-		];
-	}
+		if (name === 'transparent') {
+			return [
+				...curr,
+				{
+					name: 'Transparent',
+					slug: 'transparent',
+					color: '#00000000',
+				},
+			];
+		}
+
+		if (typeof value === 'string') {
+			return [
+				...curr,
+				{
+					name: upperFirst(name),
+					slug: name,
+					color: value,
+				},
+			];
+		}
 
-	if (typeof value === 'string') {
 		return [
 			...curr,
-			{
-				name: upperFirst(name),
-				slug: name,
-				color: value,
-			}
+			...Object.entries(value).map(([shade, color]) => ({
+				name: `${upperFirst(name)} ${shade}`,
+				slug: `${name}-${shade}`,
+				color,
+			})),
 		];
-	}
-
-	return [
-		...curr,
-		...Object.entries(value).map(([shade, color]) => ({
-			name: `${upperFirst(name)} ${shade}`,
-			slug: `${name}-${shade}`,
-			color,
-		})),
-	];
-}, []) ?? [];
+	}, []) ?? [];

package/scripts/editor/editor.js

@@ -74,6 +74,7 @@ export const unlockPostEditing = (blockClientId, attributeKey) => {
 export const lockIfUndefined = (blockClientId, attributeKey, value) => {
 	if (typeof value === 'undefined' || value === null || value === '') {
 		lockPostEditing(blockClientId, attributeKey);
+
 		return;
 	}
 	unlockPostEditing(blockClientId, attributeKey);
@@ -104,36 +105,28 @@ export const lockIfUndefined = (blockClientId, attributeKey, value) => {
  *
  */
 export const GutenbergBlock = (props) => {
-	const {
-		options: OptionsComponent,
-		toolbar: ToolbarComponent,
-		editor: EditorComponent,
-		noOptionsContainer = false,
-		title,
-	} = props;
+	const { options: OptionsComponent, toolbar: ToolbarComponent, editor: EditorComponent, noOptionsContainer = false, title } = props;
 
 	return (
 		<>
-			{OptionsComponent &&
+			{OptionsComponent && (
 				<InspectorControls>
-					{!noOptionsContainer &&
+					{!noOptionsContainer && (
 						<ContainerPanel title={title ?? upperFirst(props?.attributes?.blockName)}>
 							<OptionsComponent {...props} />
 						</ContainerPanel>
-					}
+					)}
 					{noOptionsContainer && <OptionsComponent {...props} />}
 				</InspectorControls>
-			}
+			)}
 
-			{ToolbarComponent &&
+			{ToolbarComponent && (
 				<BlockControls>
 					<ToolbarComponent {...props} />
 				</BlockControls>
-			}
+			)}
 
-			{EditorComponent &&
-				<EditorComponent {...props} />
-			}
+			{EditorComponent && <EditorComponent {...props} />}
 		</>
 	);
 };

package/scripts/editor/fetch.js

@@ -1,4 +1,6 @@
-import { unescapeHTML } from '@eightshift/ui-components/utilities';
+import { truncate, unescapeHTML } from '@eightshift/ui-components/utilities';
+import { addQueryArgs } from '@wordpress/url';
+import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Returns a function that fetches data from WordPress REST API.
@@ -7,13 +9,14 @@ import { unescapeHTML } from '@eightshift/ui-components/utilities';
  * @param {Object} options - Additional options.
  * @param {Function} [options.processId] - Function to process the ID. `(itemData: Object) => id: string | Number`
  * @param {Function} [options.processLabel] - Function to process the label. `(itemData: Object) => label: string`
+ * @param {string} [options.labelProp='title'] - Property to use as a label. Overriden by `processLabel`.
  * @param {Function} [options.processMetadata] - Function to process the metadata. `(itemData: Object) => metadata: Object`
  * @param {number} [options.perPage=30] - Number of items to fetch per page.
- * @param {string} [options.urlBase='<origin>/wp-json'] - Base URL for the API.
  * @param {string} [options.routePrefix='wp/v2'] - Route prefix for the API.
  * @param {string} [options.fields='id,title'] - A comma-separated list of field names to fetch from the API. Good to include as it makes the query faster and the output terser.
  * @param {SearchColumnsConfig} [options.searchColumns] - Allows narrowing the search scope.
  * @param {boolean} [options.noUnescapeTitle] - If `true`, the post title will not unescape HTML entities.
+ * @param {Number?} [options.truncateTitle=26] - If set, the title will be truncated to this length.
  *
  * @returns {Function} The `(searchText, [abortSignal]) => Promise` function.
  *
@@ -37,49 +40,53 @@ import { unescapeHTML } from '@eightshift/ui-components/utilities';
 export function fetchFromWpRest(endpoint, options = {}) {
 	const {
 		processId = ({ id }) => id,
-		processLabel = ({ title }) => unescapeHTML(title),
+		labelProp = 'title',
+		processLabel = (item) => item[labelProp],
 		processMetadata = () => null,
 		perPage = 30,
-		urlBase = `${window.location.origin}/wp-json`,
 		routePrefix = 'wp/v2',
 		fields = 'id,title',
 		searchColumns,
 		noUnescapeTitle = false,
-		...params
+		truncateTitle = 32,
+		...additionalParams
 	} = options;
 
 	return async (searchText = '', abortSignal) => {
-		const url = new URL(`${urlBase}/${routePrefix}/${endpoint}/`);
-
-		url.searchParams.append('per_page', perPage);
+		let params = {
+			per_page: perPage,
+		};
 
 		if (fields?.length > 0) {
-			url.searchParams.append('_fields', fields);
+			params['_fields'] = fields;
 		}
 
 		if (searchColumns?.length > 0) {
-			url.searchParams.append('search_columns', Array.isArray(searchColumns) ? searchColumns.join(',') : searchColumns);
+			params.search_columns = Array.isArray(searchColumns) ? searchColumns.join(',') : searchColumns;
 		}
 
 		if (Object.keys(params).length > 0) {
-			for (const [key, value] of Object.entries(params)) {
-				url.searchParams.append(key, value);
-			}
+			params = {
+				...params,
+				...additionalParams,
+			};
 		}
 
 		if (searchText?.length > 0) {
-			url.searchParams.append('search', searchText);
+			params.search = searchText;
 		}
 
-		const newData = await fetch(url.toString(), {
+		const newData = await apiFetch({
+			path: addQueryArgs(`${routePrefix}/${endpoint}/`, params),
 			signal: abortSignal,
 		});
 
-		const newDataJson = await newData.json();
+		return newData.map((item) => {
+			const rawLabel = !noUnescapeTitle ? unescapeHTML(processLabel(item)) : processLabel(item);
+			const truncatedLabel = Number.isInteger(truncateTitle) && truncateTitle > 0 ? truncate(rawLabel, truncateTitle) : rawLabel;
 
-		return [...newDataJson].map((item) => {
 			return {
-				label: noUnescapeTitle ? unescapeHTML(processLabel(item)) : processLabel(item),
+				label: truncatedLabel,
 				value: processId(item),
 				metadata: processMetadata(item),
 			};
@@ -89,7 +96,7 @@ export function fetchFromWpRest(endpoint, options = {}) {
 
 export const wpSearchRoute = fetchFromWpRest('search', {
 	processId: ({ url }) => url,
-	processLabel: ({ title }) => title,
+	labelProp: 'title',
 	processMetadata: ({ type, subtype }) => ({ type, subtype }),
 	additionalParam: {
 		type: 'post',

package/scripts/editor/hooks.js

@@ -39,6 +39,7 @@ export const blocksFilterHook = createHigherOrderComponent((BlockListBlock) => {
 				},
 			};
 		}
+
 		return <BlockListBlock {...updatedProps} />;
 	};
 }, 'blocksFilterHook');

package/scripts/editor/options.js

@@ -36,7 +36,6 @@ import { lowerFirst, camelCase } from '@eightshift/ui-components/utilities';
  * ```
  */
 export const getOption = (key, attributes, manifest, isColor = false) => {
-
 	// Check if there is prefix in the attributes object.
 	const options = attributes?.['options'] || {};
 
@@ -61,7 +60,6 @@ export const getOption = (key, attributes, manifest, isColor = false) => {
 
 	// Check the provided options overrides.
 	if (Object.prototype.hasOwnProperty.call(options, newKey)) {
-
 		// If color type use color output.
 		if (isColor) {
 			return getOptionColors(options[newKey]);
@@ -69,7 +67,7 @@ export const getOption = (key, attributes, manifest, isColor = false) => {
 
 		// Used for array of objects (selectControl options). If so check override by value key.
 		if (typeof componentOptions[key][0] === 'object') {
-			return componentOptions[key].filter((item) => options[newKey].includes((item.value)));
+			return componentOptions[key].filter((item) => options[newKey].includes(item.value));
 		}
 
 		// If array only user array value for check.
@@ -140,7 +138,7 @@ export const getOptions = (attributes = {}, manifest = {}) => {
 	const componentName = manifest['componentName'];
 
 	const output = {};
-	const prefix = (typeof attributes['prefix'] === 'undefined') ? '' : attributes['prefix'];
+	const prefix = typeof attributes['prefix'] === 'undefined' ? '' : attributes['prefix'];
 
 	for (const [key, value] of Object.entries(optionsManifest)) {
 		const newKey = key.replace(`${lowerFirst(camelCase(componentName))}`, '');