@eightshift/frontend-libs-tailwind 1.0.0

package/blocks/init/src/Blocks/assets/scripts/link-section-editor.js

@@ -0,0 +1,258 @@
+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';
+
+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);
+	});
+
+	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);
+	});
+
+	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}>
+						<RichText
+							placeholder={__('Section', '%g_textdomain%')}
+							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
+									placeholder={__('Item', '%g_textdomain%')}
+									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', '%g_textdomain%')}
+							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', '%g_textdomain%')}
+				className='justify-self-start'
+			>
+				{__('Section', '%g_textdomain%')}
+			</Button>
+		</>
+	);
+};

package/blocks/init/src/Blocks/assets/scripts/shared.js

@@ -0,0 +1,25 @@
+import { getColorData } from '@eightshift/frontend-libs-tailwind/scripts';
+import { themeColors } from '../../../../assets/scripts/theme-colors';
+
+const colorData = getColorData(themeColors);
+
+export const getColorOption = (key, manifest) => {
+	if (!manifest?.options?.[key]) {
+		throw new Error(
+			`The key ${key} is not defined in the manifest options for ${manifest?.componentName ?? manifest?.title}.`,
+		);
+	}
+
+	return colorData?.filter(({ slug }) => manifest?.options?.[key]?.includes(slug)) ?? [];
+};
+
+export const rotationClassName = {
+	'to-t': 'rotate-0',
+	'to-tr': 'rotate-45',
+	'to-r': 'rotate-90',
+	'to-br': 'rotate-135',
+	'to-b': 'rotate-180',
+	'to-bl': '-rotate-135',
+	'to-l': '-rotate-90',
+	'to-tl': '-rotate-45',
+};

package/blocks/init/src/Blocks/assets/styles/application-blocks-editor.css

@@ -0,0 +1,15 @@
+/**
+ * This is the main entry point for Block Editor blocks styles used for the `WordPress admin editor`.
+ * File names must follow naming convention to be able to run dynamically.
+ *
+ * `src/blocks/custom/block_name/block_name-editor.css`.
+ *
+ * Usage: `WordPress admin editor`.
+ *
+ */
+
+/* Eightshift UI components */
+@import '~@eightshift/ui-components/dist/assets/fonts.css';
+@import '~@eightshift/ui-components/dist/assets/wp-font-enhancements.css';
+@import '~@eightshift/ui-components/dist/assets/wp-ui-enhancements.css';
+@import '~@eightshift/ui-components/dist/assets/style.css';

package/blocks/init/src/Blocks/assets/styles/application-blocks-frontend.css

@@ -0,0 +1,12 @@
+/**
+ * This is the main entry point for Block Editor blocks styles used for the `WordPress frontend screen`.
+ * File names must follow naming convention to be able to run dynamically.
+ *
+ * `src/blocks/custom/block_name/block_name-editor.css`.
+ *
+ * Usage: `WordPress frontend screen`.
+ *
+ */
+
+/* OpenLayers */
+@import '~ol/ol.css';

package/blocks/init/src/Blocks/assets/styles/editor/editor-overrides.css

@@ -0,0 +1,15 @@
+.editor-styles-wrapper .wp-block:not(.editor-post-title, .block-list-appender) {
+	@apply !max-w-full;
+}
+
+.editor-post-title {
+	@apply text-3xl max-w-screen-md;
+}
+
+.edit-post-visual-editor__post-title-wrapper {
+	@apply !m-0 !px-4 !py-6 bg-gray-50;
+}
+
+.editor-styles-wrapper.block-editor-writing-flow {
+	@apply p-0;
+}

package/blocks/init/src/Blocks/assets/styles/tailwind.css

@@ -0,0 +1,34 @@
+/* Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&display=swap');
+
+/* stylelint-disable scss/at-rule-no-unknown */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+	.font-soft-0 {
+		font-variation-settings: 'SOFT' 0, 'WONK' 0;
+	}
+
+	.font-soft-25 {
+		font-variation-settings: 'SOFT' 25, 'WONK' 0;
+	}
+
+	.font-soft-50 {
+		font-variation-settings: 'SOFT' 50, 'WONK' 0;
+	}
+
+	.font-soft-100 {
+		font-variation-settings: 'SOFT' 100, 'WONK' 0;
+	}
+
+	.wp-admin-bar-offset {
+		@apply wp-logged-in-mobile:top-[46px] wp-logged-in:top-[32px];
+	}
+
+	.wp-admin-bar-pt {
+		@apply wp-logged-in-mobile:pt-[46px] wp-logged-in:pt-[32px];
+	}
+}

package/blocks/init/src/Blocks/components/admin-theme-options/admin-theme-options.php

@@ -0,0 +1,20 @@
+<?php
+
+/**
+ * Theme options settings screen component template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace%\ThemeOptions\ThemeOptions;
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+$patterns = wp_json_encode(ThemeOptions::getPatterns());
+?>
+
+<input type="hidden" id="es-pattern-data" value="<?php echo esc_attr($patterns); ?>">
+
+<div class="wrap" id="es-theme-options">
+	<?php echo esc_html__('Loading...', '%g_textdomain%'); ?>
+</div>

package/blocks/init/src/Blocks/components/admin-theme-options/assets-admin/index.js

@@ -0,0 +1,36 @@
+import domReady from '@wordpress/dom-ready';
+import { __ } from '@wordpress/i18n';
+import { createRoot } from '@wordpress/element';
+import { ThemeOptionsPage } from '@eightshift/frontend-libs-tailwind/scripts';
+import { Parts } from './pages/parts';
+import { Tabs, TabList, Tab, TabPanel } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+
+domReady(() => {
+	const rootElement = document.getElementById('es-theme-options');
+
+	if (!rootElement) {
+		return;
+	}
+
+	const root = createRoot(rootElement);
+	const patterns = JSON.parse(document.getElementById('es-pattern-data')?.value ?? '[]');
+
+	root.render(
+		<ThemeOptionsPage>
+			<Tabs>
+				<TabList>
+					<Tab
+						icon={icons.wrench}
+						label={__('Parts', '%g_textdomain%')}
+					/>
+				</TabList>
+				<TabPanel>
+					<Parts patterns={patterns} />
+				</TabPanel>
+			</Tabs>
+		</ThemeOptionsPage>,
+	);
+});
+
+// https://developer.wordpress.org/news/2024/03/26/how-to-use-wordpress-react-components-for-plugin-pages/

package/blocks/init/src/Blocks/components/admin-theme-options/assets-admin/pages/parts.js

@@ -0,0 +1,55 @@
+import { __ } from '@wordpress/i18n';
+import { Select, OptionsPanel, OptionsPanelSection, Spacer } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { useContext } from '@wordpress/element';
+import { EsThemeOptionsContext } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const Parts = ({ patterns }) => {
+	const { settings, updateSettings, isLoading } = useContext(EsThemeOptionsContext);
+	return (
+		<OptionsPanel>
+			<OptionsPanelSection>
+				<Select
+					label={__('Header', '%g_textdomain%')}
+					icon={icons.header}
+					value={settings?.header}
+					onChange={(value) => updateSettings({ header: value })}
+					options={patterns}
+					className='es-uic-w-48'
+					disabled={isLoading}
+					simpleValue
+					clearable
+					inline
+				/>
+
+				<Select
+					label={__('Footer', '%g_textdomain%')}
+					icon={icons.footer}
+					value={settings?.footer}
+					onChange={(value) => updateSettings({ footer: value })}
+					options={patterns}
+					className='es-uic-w-48'
+					disabled={isLoading}
+					simpleValue
+					clearable
+					inline
+				/>
+
+				<Spacer size='s' />
+
+				<Select
+					label={__('404 page', '%g_textdomain%')}
+					icon={icons.emptyCircle}
+					value={settings?.fourOhFour}
+					onChange={(value) => updateSettings({ fourOhFour: value })}
+					options={patterns}
+					className='es-uic-w-48'
+					disabled={isLoading}
+					simpleValue
+					clearable
+					inline
+				/>
+			</OptionsPanelSection>
+		</OptionsPanel>
+	);
+};

package/blocks/init/src/Blocks/components/admin-theme-options/manifest.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
+	"componentName": "admin-theme-options",
+	"title": "Theme options"
+}

package/blocks/init/src/Blocks/components/button/assets/index.js

@@ -0,0 +1,22 @@
+import domReady from '@wordpress/dom-ready';
+
+domReady(() => {
+	const elements = document.querySelectorAll('.button[href^="#"]');
+
+	if (!elements.length) {
+		return;
+	}
+
+	elements.forEach((element) => {
+		element.addEventListener('click', (event) => {
+			event.preventDefault();
+			const target = document.querySelector(event.currentTarget.getAttribute('href'));
+
+			window.scrollTo({
+				top: target.offsetTop,
+				left: 0,
+				behavior: 'smooth',
+			});
+		});
+	});
+});

package/blocks/init/src/Blocks/components/button/button.php

@@ -0,0 +1,77 @@
+<?php
+
+/**
+ * Button component template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$buttonUse = Helpers::checkAttr('buttonUse', $attributes, $manifest);
+
+if (!$buttonUse) {
+	return;
+}
+
+$additionalClass = $attributes['additionalClass'] ?? '';
+$additionalAttributes = $attributes['additionalAttributes'] ?? [];
+$buttonId = Helpers::checkAttr('buttonId', $attributes, $manifest);
+
+$buttonUrl = Helpers::checkAttr('buttonUrl', $attributes, $manifest);
+$buttonIsNewTab = Helpers::checkAttr('buttonIsNewTab', $attributes, $manifest);
+
+$buttonContent = Helpers::checkAttr('buttonContent', $attributes, $manifest);
+
+$buttonAriaLabel = Helpers::checkAttr('buttonAriaLabel', $attributes, $manifest);
+
+$buttonAttrs = [];
+
+if (!empty($additionalAttributes)) {
+	$buttonAttrs = $additionalAttributes;
+}
+
+if (!empty($buttonUrl)) {
+	$buttonAttrs['href'] = $buttonUrl;
+}
+
+if ($buttonIsNewTab) {
+	$buttonAttrs['target'] = '_blank';
+	$buttonAttrs['rel'] = 'noopener noreferrer';
+}
+
+if (!empty($buttonId)) {
+	$buttonAttrs['id'] = $buttonId;
+}
+
+if (!empty($buttonAriaLabel)) {
+	$buttonAttrs['aria-label'] = $buttonAriaLabel;
+}
+
+$buttonAttrs['class'] = Helpers::getTwClasses($attributes, $manifest, 'button', $additionalClass);
+
+$buttonTag = !empty($buttonUrl) ? 'a' : 'button';
+?>
+
+<<?php echo $buttonTag; // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped ?>
+	<?php
+	foreach ($buttonAttrs as $key => $value) {
+		if (empty($key) && empty($value)) {
+			continue;
+		}
+
+		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+		echo "{$key}=" . '"' . esc_attr($value) . '"';
+	}
+	?>
+>
+	<?php
+	echo Helpers::render('icon', Helpers::props('icon', $attributes));
+	?>
+
+	<?php if (!empty($buttonContent)) { ?>
+		<span><?php echo esc_html($buttonContent); ?></span>
+	<?php } ?>
+</<?php echo $buttonTag; // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped ?>>

package/blocks/init/src/Blocks/components/button/components/button-editor.js

@@ -0,0 +1,40 @@
+import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/block-editor';
+import { checkAttr, getAttrKey, getTwClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { IconEditor } from '../../icon/components/icon-editor';
+import manifest from './../manifest.json';
+
+export const ButtonEditor = (attributes) => {
+	const { componentClass } = manifest;
+
+	const {
+		setAttributes,
+		additionalClass,
+		placeholder = __('Add content', '%g_textdomain%'),
+	} = attributes;
+
+	const buttonContent = checkAttr('buttonContent', attributes, manifest);
+	const buttonUse = checkAttr('buttonUse', attributes, manifest);
+
+	if (!buttonUse) {
+		return null;
+	}
+
+	return (
+		<div className={getTwClasses(attributes, manifest, additionalClass)}>
+			<IconEditor
+				{...props('icon', attributes, {
+					blockClass: componentClass,
+				})}
+			/>
+
+			<RichText
+				placeholder={placeholder}
+				value={buttonContent}
+				onChange={(value) => setAttributes({ [getAttrKey('buttonContent', attributes, manifest)]: value })}
+				keepPlaceholderOnFocus
+				allowedFormats={[]}
+			/>
+		</div>
+	);
+};