@eightshift/frontend-libs-tailwind 1.0.0

package/scripts/components/file-picker.js

@@ -0,0 +1,243 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+import { Button, HStack, VStack, FilePlaceholder, AnimatedVisibility } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+/**
+ * A customizable button for managing files from the Media library.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @property {ManageFileButtonType} [props.type] - The type of the button (browse, upload, replace).
+ * @property {Function} props.onChange - Function that handles the change event.
+ * @property {string} [props.currentId] - ID of the currently selected item. Used for the 'replace' type, to mark the currently selected item.
+ * @property {boolean} [props.compact] - Whether the button is compact (icon-only).
+ * @property {string[]} props.allowedTypes - Determines types of files which are allowed to be uploaded.
+ * @property {ManageFileButtonKind} [props.kind] - The kind of file to manage. Controls labels and icons on the buttons.
+ * @property {Object} [props.labels] - Custom UI labels for the buttons. Applies only if `kind` is set to `custom`.
+ *
+ * @returns {JSX.Element} The ManageFileButton component.
+ *
+ * @typedef {'browse' | 'upload' | 'replace'} ManageFileButtonType
+ * @typedef {'file' | 'image' | 'video' | 'subtitle' | 'geoJson' | 'custom'} ManageFileButtonKind
+ *
+ * @example
+ * <ManageFileButton />
+ *
+ */
+export const ManageFileButton = (props) => {
+	const {
+		type = 'browse',
+		onChange,
+		currentId,
+
+		labels,
+		allowedTypes,
+
+		kind = 'file',
+
+		compact = false,
+	} = props;
+
+	const strings = {
+		file: {
+			buttonTooltip: {
+				browse: __('Select a file from Media library', '%g_textdomain%'),
+				upload: __('Upload a file', '%g_textdomain%'),
+				replace: __('Replace file', '%g_textdomain%'),
+			},
+			buttonLabel: {
+				browse: __('Select', '%g_textdomain%'),
+				upload: __('Upload', '%g_textdomain%'),
+				replace: __('Replace', '%g_textdomain%'),
+			},
+			modalTitle: {
+				browse: __('Select a file', '%g_textdomain%'),
+				upload: __('Upload a file', '%g_textdomain%'),
+				replace: __('Select a new file', '%g_textdomain%'),
+			},
+			buttonIcon: {
+				browse: icons.itemSelect,
+				upload: icons.upload,
+				replace: icons.swap,
+			},
+		},
+		video: {
+			buttonTooltip: {
+				browse: __('Select a video from Media library', '%g_textdomain%'),
+				upload: __('Upload a video', '%g_textdomain%'),
+				replace: __('Replace video', '%g_textdomain%'),
+			},
+			modalTitle: {
+				browse: __('Select a video', '%g_textdomain%'),
+				upload: __('Upload a video', '%g_textdomain%'),
+				replace: __('Select a new video', '%g_textdomain%'),
+			},
+		},
+		image: {
+			buttonTooltip: {
+				browse: __('Select an image from Media library', '%g_textdomain%'),
+				upload: __('Upload an image', '%g_textdomain%'),
+				replace: __('Replace image', '%g_textdomain%'),
+			},
+			modalTitle: {
+				browse: __('Select an image', '%g_textdomain%'),
+				upload: __('Upload an image', '%g_textdomain%'),
+				replace: __('Select a new image', '%g_textdomain%'),
+			},
+		},
+		subtitle: {
+			buttonTooltip: {
+				browse: __('Select a subtitle file', '%g_textdomain%'),
+				upload: __('Upload a subtitle file', '%g_textdomain%'),
+				replace: __('Replace subtitle file', '%g_textdomain%'),
+			},
+			modalTitle: {
+				browse: __('Select a subtitle file', '%g_textdomain%'),
+				upload: __('Upload a subtitle file', '%g_textdomain%'),
+				replace: __('Select a new subtitle file', '%g_textdomain%'),
+			},
+		},
+		geoJson: {
+			buttonTooltip: {
+				browse: __('Select a GeoJSON file', '%g_textdomain%'),
+				upload: __('Upload a GeoJSON file', '%g_textdomain%'),
+				replace: __('Replace GeoJSON file', '%g_textdomain%'),
+			},
+			modalTitle: {
+				browse: __('Select a GeoJSON file', '%g_textdomain%'),
+				upload: __('Upload a GeoJSON file', '%g_textdomain%'),
+				replace: __('Select a new GeoJSON file', '%g_textdomain%'),
+			},
+		},
+		custom: {
+			buttonTooltip: labels?.buttonTooltip,
+			buttonLabel: labels?.buttonLabel,
+			modalTitle: labels?.modalTitle,
+			buttonIcon: labels?.buttonIcon,
+		},
+	};
+
+	const buttonTooltip = strings?.[kind]?.buttonTooltip?.[type] ?? strings.file.buttonTooltip?.[type];
+	const buttonLabel = strings?.[kind]?.buttonLabel?.[type] ?? strings.file.buttonLabel?.[type];
+	const buttonIcon = strings?.[kind]?.buttonIcon?.[type] ?? strings.file.buttonIcon?.[type];
+	const modalTitle = strings?.[kind]?.modalTitle?.[type] ?? strings.file.modalTitle?.[type];
+
+	return (
+		<MediaUploadCheck>
+			<MediaUpload
+				onSelect={({ id, url, ...rest }) => onChange({ id, url, ...rest })}
+				allowedTypes={allowedTypes}
+				value={type === 'replace' && currentId}
+				title={modalTitle}
+				mode={type === 'upload' ? 'upload' : 'browse'}
+				render={({ open }) => (
+					<Button
+						onPress={open}
+						icon={compact && buttonIcon}
+						tooltip={buttonTooltip}
+					>
+						{!compact && buttonLabel}
+					</Button>
+				)}
+			/>
+		</MediaUploadCheck>
+	);
+};
+
+/**
+ * Renders a component for managing a media file
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @property {Function} props.onChange - The function that handles the change event.
+ * @property {string} props.fileId - ID of the currently selected file. Used to mark the currently selected item when replacing the file.
+ * @property {string} props.fileName - URL of the currently selected image.
+ * @property {boolean} [props.noDelete] - If `true`, the delete button will be hidden.
+ * @property {boolean} [props.noUpload] - If `true`, the upload button will be hidden.
+ * @property {string[]} props.allowedTypes - Determines types of files which are allowed to be uploaded.
+ * @property {FileKind} [props.kind] - The kind of file to manage.
+ * @property {Object} [props.labels] - Custom UI labels for the buttons. Applies only if `kind` is set to `custom`.
+ *
+ * @returns {JSX.Element} The FileSelector component.
+ *
+ * @typedef {'file' | 'image' | 'video' | 'subtitle' | 'geoJson' | 'custom'} FileKind
+ *
+ * @example
+ * <FileSelector
+ * 	onChange={onChange}
+ * 	fileId={fileId}
+ * 	fileName={fileName}
+ * 	allowedTypes={['video']}
+ * />
+ *
+ */
+export const FileSelector = (props) => {
+	const { onChange, fileId, fileName, noDelete, noUpload, labels, allowedTypes, kind = 'file' } = props;
+
+	const commonManageFileButtonProps = {
+		onChange,
+		allowedTypes,
+		kind,
+		labels,
+	};
+
+	const removeTooltips = {
+		file: __('Remove file', '%g_textdomain%'),
+		image: __('Remove image', '%g_textdomain%'),
+		video: __('Remove video', '%g_textdomain%'),
+		subtitle: __('Remove subtitle file', '%g_textdomain%'),
+		geoJson: __('Remove GeoJSON file', '%g_textdomain%'),
+		custom: labels?.removeTooltip,
+	};
+
+	const fileIcons = {
+		image: icons.imageFile,
+		video: icons.videoFile,
+		subtitle: icons.closedCaptions,
+		geoJson: icons.fileMetadata,
+		custom: labels?.removeIcon,
+	};
+
+	return (
+		<VStack noWrap>
+			<FilePlaceholder
+				icon={fileIcons[kind] ?? icons.file}
+				fileName={fileName}
+			>
+				<HStack noWrap className='es-uic-pl-1'>
+					<ManageFileButton {...commonManageFileButtonProps} />
+					{!noUpload && (
+						<ManageFileButton
+							{...commonManageFileButtonProps}
+							type='upload'
+							compact
+						/>
+					)}
+				</HStack>
+			</FilePlaceholder>
+
+			<AnimatedVisibility
+				visible={fileName}
+				noInitial
+			>
+				<HStack noWrap>
+					<ManageFileButton
+						{...commonManageFileButtonProps}
+						currentId={fileId}
+						type='replace'
+					/>
+					{!noDelete && (
+						<Button
+							icon={icons.trash}
+							tooltip={removeTooltips[kind] ?? removeTooltips.file}
+							onPress={() => onChange({ id: undefined, url: undefined })}
+							type='danger'
+						/>
+					)}
+				</HStack>
+			</AnimatedVisibility>
+		</VStack>
+	);
+};

package/scripts/components/index.js

@@ -0,0 +1,6 @@
+export { BlockInserter } from './block-inserter';
+export { LinkSectionEditor } from './link-section-editor';
+export { ManageFileButton, FileSelector } from './file-picker';
+export { MediaPicker } from './media-picker';
+export { ServerSideRender } from './server-side-render';
+export { ThemeOptionsPage, EsThemeOptionsContext } from './settings/settings';

package/scripts/components/link-section-editor.js

@@ -0,0 +1,319 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/block-editor';
+import { Button } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+/**
+ * Link section editor.
+ *
+ * @component
+ * @param {object} props - Component props.
+ * @param {{ header: string, items: [{ text: string, url: string, newTab: boolean }] }[]} props.links - Link data.
+ * @param {Function} props.onChange - Function to call when links are changed.
+ * @param {object} props.classNames - Classes to pass to inner components.
+ *
+ * @returns {object} LinkSectionEditor component.
+ *
+ * @example
+ * const links = [
+ * 	{
+ * 		header: 'Section 1',
+ * 		items: [
+ * 			{
+ * 				text: 'Link 1',
+ * 				url: 'https://example.com',
+ * 				newTab: false,
+ * 			},
+ * 			{
+ * 				text: 'Link 2',
+ * 				url: 'https://example.com',
+ * 				newTab: false,
+ * 			},
+ * 		],
+ * 	},
+ * 	{
+ * 		header: 'Section 2',
+ * 		items: [
+ * 			{
+ * 				text: 'Link 1',
+ * 				url: 'https://example.com',
+ * 				newTab: false,
+ * 			},
+ * 			{
+ * 				text: 'Link 2',
+ * 				url: 'https://example.com',
+ * 				newTab: false,
+ * 			},
+ * 		],
+ * 	},
+ * ];
+ *
+ * <LinkSectionEditor
+ * 	links={links}
+ * 	onChange={(newLinks) => setAttributes({ links: newLinks })}
+ * 	classNames={{
+ * 		sectionContainer: 'section-container',
+ * 		sectionTitle: 'section-title',
+ * 		link: 'link',
+ * 	}}
+ * />;
+ */
+export const LinkSectionEditor = (props) => {
+	const { links, onChange, classNames } = props;
+
+	const defaultLink = {
+		text: '',
+		url: '',
+		newTab: false,
+	};
+
+	const defaultSection = {
+		header: '',
+		items: [defaultLink],
+	};
+
+	const addSection = useCallback(
+		(index = -1) => {
+			if (index < 0) {
+				onChange([...links, defaultSection]);
+				return;
+			}
+
+			const before = links.slice(0, index + 1);
+			const after = links.slice(index + 1);
+
+			onChange([...before, defaultSection, ...after]);
+		},
+		[links, onChange],
+	);
+
+	const addLink = useCallback(
+		(items, itemIndex, index = -1) => {
+			if (index < 0) {
+				updateItem(itemIndex, {
+					items: [defaultLink, ...items],
+				});
+				return;
+			}
+			const before = items.slice(0, index + 1);
+			const after = items.slice(index + 1);
+
+			updateItem(itemIndex, {
+				items: [...before, defaultLink, ...after],
+			});
+		},
+		[links, onChange],
+	);
+
+	const updateItem = useCallback(
+		(index, value) => {
+			const newValue = [...links];
+
+			newValue[index] = {
+				...newValue[index],
+				...value,
+			};
+
+			onChange(newValue);
+		},
+		[links, onChange],
+	);
+
+	const updateInnerItem = useCallback(
+		(index, innerIndex, value) => {
+			const newValue = [...links];
+
+			newValue[index].items[innerIndex] = {
+				...newValue[index].items[innerIndex],
+				...value,
+			};
+
+			onChange(newValue);
+		},
+		[links, onChange],
+	);
+
+	const jumpToEnd = useCallback(
+		(element) => {
+			if (!element) {
+				return;
+			}
+
+			const textNode = element.childNodes[0];
+
+			if (!textNode) {
+				return;
+			}
+
+			const selection = document.getSelection();
+			selection.removeAllRanges();
+
+			const range = document.createRange();
+			range.setStart(textNode, textNode?.length);
+			range.setEnd(textNode, textNode?.length);
+
+			selection.addRange(range);
+		},
+		[links, onChange],
+	);
+
+	const handleKeyDown = useCallback(
+		(event, index, i, text) => {
+			const { code, target } = event;
+
+			const { baseNode, baseOffset } = document.getSelection();
+
+			if (!baseNode || !target.contains(baseNode)) {
+				return;
+			}
+
+			if (baseOffset === text.length && code === 'Enter' && !(event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				addLink(links[index].items, index, i);
+
+				setTimeout(() => {
+					target.nextElementSibling?.focus();
+				}, 25);
+			} else if (baseOffset === text.length && code === 'Enter' && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				addSection(index);
+
+				setTimeout(() => {
+					target.parentElement.nextElementSibling?.querySelector('[contenteditable="true"]')?.focus();
+				}, 25);
+			} else if (code === 'Backspace' && text === '') {
+				event.preventDefault();
+
+				jumpToEnd(target.previousElementSibling);
+
+				updateItem(index, {
+					items: links[index].items.filter((_, j) => j !== i),
+				});
+			} else if (code === 'Delete' && links?.[index].items[i + 1]?.text?.length < 1) {
+				event.preventDefault();
+
+				updateItem(index, {
+					items: links[index].items.filter((_, j) => j !== i + 1),
+				});
+			}
+		},
+		[links, onChange],
+	);
+
+	// keyDown handling for section headers.
+	const handleSectionKeyDown = useCallback(
+		(event, index, items, header) => {
+			const { code, target } = event;
+
+			const { baseNode, baseOffset } = document.getSelection();
+
+			if (!target.contains(baseNode)) {
+				return;
+			}
+
+			if (baseOffset === header.length && code === 'Enter' && !(event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+
+				// Add a link to the first spot.
+				if (items.length > 1 || items?.[0]?.text !== '') {
+					addLink(links[index].items, index);
+				}
+
+				// Focus on that link.
+				setTimeout(() => {
+					target.nextElementSibling?.focus();
+				}, 25);
+			} else if (baseOffset === header.length && code === 'Enter' && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+
+				// Add a section.
+				addSection(index);
+
+				// Focus on next text input.
+				setTimeout(() => {
+					target.parentElement.nextElementSibling?.querySelector('[contenteditable="true"]')?.focus();
+				}, 25);
+			} else if (code === 'Backspace' && header === '' && (items?.length < 1 || items?.every(({ text }) => text === ''))) {
+				event.preventDefault();
+
+				// Jump to end of previous input.
+				jumpToEnd(target.parentElement.previousElementSibling?.querySelector('[contenteditable="true"]:last-of-type'));
+
+				// Remove current element.
+				setTimeout(() => {
+					onChange(links.filter((_, i) => i !== index));
+				}, 25);
+			}
+		},
+		[links, onChange],
+	);
+
+	return (
+		<>
+			{links.map(({ items, header }, index) => {
+				return (
+					<div className={classNames?.sectionContainer} key={index}>
+						<RichText
+							placeholder={__('Section', 'eightshift-frontend-libs')}
+							value={header}
+							onChange={(value) => updateItem(index, { header: value })}
+							allowedFormats={[]}
+							className={classNames?.sectionTitle}
+							onKeyDown={(event) => handleSectionKeyDown(event, index, items, header)}
+							withoutInteractiveFormatting
+							disableLineBreaks
+						/>
+
+						{items.map(({ text }, i) => {
+							return (
+								<RichText
+									key={i}
+									placeholder={__('Item', 'eightshift-frontend-libs')}
+									value={text}
+									onChange={(value) => updateInnerItem(index, i, { text: value })}
+									allowedFormats={[]}
+									className={classNames?.link}
+									onKeyDown={(event) => handleKeyDown(event, index, i, text)}
+									withoutInteractiveFormatting
+									disableLineBreaks
+								/>
+							);
+						})}
+
+						<Button
+							size='small'
+							icon={icons.add}
+							tooltip={__('Add link', 'eightshift-frontend-libs')}
+							onPress={({ target }) => {
+								updateItem(index, {
+									items: [...links[index].items, defaultLink],
+								});
+
+								setTimeout(() => {
+									target?.previousElementSibling?.focus();
+								}, 20);
+							}}
+						/>
+					</div>
+				);
+			})}
+
+			<Button
+				onPress={({ target }) => {
+					addSection();
+
+					setTimeout(() => {
+						target?.previousElementSibling?.querySelector('[contenteditable="true"]')?.focus();
+					}, 20);
+				}}
+				icon={icons.add}
+				tooltip={__('Add a section', 'eightshift-frontend-libs')}
+				className='justify-self-start'
+			>
+				{__('Section', 'eightshift-frontend-libs')}
+			</Button>
+		</>
+	);
+};

package/scripts/components/media-picker.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Button, HStack, ImagePlaceholder } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { ManageFileButton } from '@eightshift/frontend-libs-tailwind/scripts/components/file-picker';
+
+const MediaButton = (props) => {
+	return (
+		<ManageFileButton
+			{...props}
+			kind='image'
+			allowedTypes={['image']}
+		/>
+	);
+};
+
+/**
+ * Renders a component for managing a media file
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @property {Function} props.onChange - The function that handles the change event.
+ * @property {string} props.imageId - ID of the currently selected image. Used to mark the currently selected item when replacing the image.
+ * @property {string} props.imageAlt - Alt text of the currently selected image.
+ * @property {string} props.imageUrl - URL of the currently selected image.
+ * @property {boolean} [props.noDelete] - If `true`, the delete button will be hidden.
+ * @property {boolean} [props.noUpload] - If `true`, the upload button will be hidden.
+ * @param {ImagePlaceholderImageMode} [props.imageMode='cover'] - Determines inner image display mode.
+ *
+ * @returns {JSX.Element} The MediaPicker component.
+ *
+ * @typedef {'cover'|'contain' | 'fill'} ImagePlaceholderImageMode
+ *
+ * @example
+ * <MediaPicker
+ * 	onChange={onChange}
+ * 	imageId={imageId}
+ * 	imageAlt={imageAlt}
+ * 	imageUrl={imageUrl}
+ * />
+ *
+ */
+export const MediaPicker = (props) => {
+	const { onChange, imageId, imageAlt, imageUrl, noDelete, noUpload, imageMode } = props;
+
+	return (
+		<HStack noWrap>
+			<ImagePlaceholder
+				url={imageUrl}
+				alt={imageAlt}
+				imageMode={imageMode}
+			/>
+
+			{!imageUrl && (
+				<>
+					<MediaButton onChange={onChange} />
+					{!noUpload && (
+						<MediaButton
+							onChange={onChange}
+							type='upload'
+							compact
+						/>
+					)}
+				</>
+			)}
+
+			{imageUrl && (
+				<>
+					<MediaButton
+						type='replace'
+						onChange={onChange}
+						imageId={imageId}
+					/>
+					{!noDelete && (
+						<Button
+							icon={icons.trash}
+							tooltip={__('Remove image', 'infobip')}
+							onPress={() => onChange({ id: undefined, url: undefined })}
+							type='danger'
+						/>
+					)}
+				</>
+			)}
+		</HStack>
+	);
+};

package/scripts/components/server-side-render.js

@@ -0,0 +1,37 @@
+import GutenbergSsr from '@wordpress/server-side-render';
+import { clsx } from '@eightshift/ui-components/utilities';
+
+/**
+ * Wraps Gutenberg's ServerSideRender component with a bit of extra styles.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} props.block - Fully qualified block name.
+ * @param {Object} props.attributes - Block attributes.
+ * @param {string} props.className - Classes to pass to the rendered content wrapper.
+ *
+ * @returns {JSX.Element} The ServerSideRender component.
+ *
+ * @example
+ * <ServerSideRender
+ *  block="core/latest-posts"
+ *  attributes={{
+ *   myProp: true,
+ *  }}
+ * />
+ *
+ */
+export const ServerSideRender = (props) => {
+	const { block, attributes, className, ...rest } = props;
+	return (
+		<GutenbergSsr
+			{...rest}
+			block={block}
+			attributes={attributes}
+			className={clsx(
+				'es-uic-pointer-events-none es-uic-rounded-lg es-uic-border es-uic-border-dotted es-uic-border-gray-300 es-uic-p-2 es-uic-flow-root',
+				className,
+			)}
+		/>
+	);
+};