@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.0

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

@@ -1,64 +0,0 @@
-import {
-	checkAttr,
-	getBreakpointData,
-	getBreakpointNames,
-	tailwindClasses,
-} from '@eightshift/frontend-libs-tailwind/scripts';
-import { ImagePlaceholder } from '@eightshift/ui-components';
-import manifest from './../manifest.json';
-
-export const ImageEditor = (attributes) => {
-	const { additionalClass } = attributes;
-
-	const imageUse = checkAttr('imageUse', attributes, manifest);
-	const imageData = checkAttr('imageData', attributes, manifest);
-
-	if (!imageUse || typeof imageData?.['_default'] === 'undefined') {
-		return null;
-	}
-
-	const isDesktopFirst = imageData['_desktopFirst'] ?? false;
-
-	const breakpointNames = getBreakpointNames();
-	const breakpointData = getBreakpointData();
-
-	return (
-		<>
-			{imageData?.['_default']?.url && (
-				<picture className={additionalClass?.picture ?? ''}>
-					{breakpointNames.map((breakpointName) => {
-						if (!imageData?.[breakpointName]?.url) {
-							return null;
-						}
-
-						const breakpointWidth = breakpointData?.[breakpointName];
-
-						if (!breakpointWidth) {
-							return null;
-						}
-
-						return (
-							<source
-								key={breakpointName}
-								srcSet={imageData?.[breakpointName]?.url}
-								media={`(${isDesktopFirst ? 'max-width' : 'min-width'}: ${breakpointWidth}em)`}
-							/>
-						);
-					})}
-					<img
-						className={tailwindClasses(attributes, manifest, additionalClass?.image ?? additionalClass)}
-						src={imageData?.['_default'].url}
-					/>
-				</picture>
-			)}
-
-			{!imageData?.['_default']?.url && (
-				<ImagePlaceholder
-					style='simple'
-					size='large'
-					className={additionalClass?.imagePlaceholder}
-				/>
-			)}
-		</>
-	);
-};

package/blocks/init/src/Blocks/components/image/components/image-options.js

@@ -1,111 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import {
-	checkAttr,
-	getAttrKey,
-	MediaPicker,
-	generateOptionsFromValue,
-	getOption,
-	getHiddenOptions,
-	getResponsiveData,
-} from '@eightshift/frontend-libs-tailwind/scripts';
-import manifest from './../manifest.json';
-import { ComponentToggle, OptionSelect, Responsive, Spacer, Toggle } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import { truncateMiddle } from '@eightshift/ui-components/utilities';
-
-export const ImageOptions = (attributes) => {
-	const { setAttributes, hideOptions, additionalControls, ...rest } = attributes;
-
-	const hiddenOptions = getHiddenOptions(hideOptions);
-
-	const imageUse = checkAttr('imageUse', attributes, manifest);
-	const imageRoundedCorners = checkAttr('imageRoundedCorners', attributes, manifest);
-	const imageAspectRatio = checkAttr('imageAspectRatio', attributes, manifest);
-	const imageSize = checkAttr('imageSize', attributes, manifest);
-
-	const imageData = checkAttr('imageData', attributes, manifest);
-
-	const responsiveData = getResponsiveData(true);
-
-	return (
-		<ComponentToggle
-			label={manifest.title}
-			icon={icons.image}
-			onChange={(value) => setAttributes({ [getAttrKey('imageUse', attributes, manifest)]: value })}
-			useComponent={imageUse}
-			{...rest}
-		>
-			<Responsive
-				value={imageData}
-				onChange={(value) => setAttributes({ [getAttrKey('imageData', attributes, manifest)]: value })}
-				icon={icons.imageFile}
-				label={__('Image', 'eightshift-ui-components')}
-				options={generateOptionsFromValue(imageData, (v) =>
-					truncateMiddle(
-						v?.url?.replace(window.location.origin, '')?.replace(/\/wp-content\/uploads\/\d{4}\/\d{2}\//g, '') ??
-							__('Not set', '%g_textdomain%'),
-						15,
-					),
-				)}
-				hidden={hiddenOptions?.imagePicker}
-				{...responsiveData}
-			>
-				{({ breakpoint, currentValue, handleChange }) => (
-					<MediaPicker
-						onChange={({ id, url }) => handleChange({ id: id, url: url })}
-						imageId={currentValue?.id}
-						imageUrl={currentValue?.url}
-						noDelete={breakpoint !== '_default'}
-					/>
-				)}
-			</Responsive>
-
-			<Spacer hidden={hiddenOptions?.borderRadius} />
-
-			<OptionSelect
-				icon={icons.roundedCorners}
-				label={__('Rounded corners', '%g_textdomain%')}
-				options={getOption('imageRoundedCorners', attributes, manifest)}
-				value={imageRoundedCorners}
-				onChange={(value) =>
-					setAttributes({
-						[getAttrKey('imageRoundedCorners', attributes, manifest)]: value,
-					})
-				}
-				type='menu'
-				hidden={hiddenOptions?.borderRadius}
-				inline
-			/>
-
-			<Spacer hidden={hiddenOptions?.aspectRatio || hiddenOptions?.stretch} />
-
-			<OptionSelect
-				icon={icons.aspectRatio}
-				label={__('Aspect ratio', '%g_textdomain%')}
-				options={getOption('imageAspectRatio', attributes, manifest)}
-				value={imageAspectRatio}
-				onChange={(value) =>
-					setAttributes({
-						[getAttrKey('imageAspectRatio', attributes, manifest)]: value,
-					})
-				}
-				type='menu'
-				hidden={hiddenOptions?.aspectRatio}
-				inline
-			/>
-
-			<Toggle
-				icon={icons.expandXl}
-				label={__('Stretch', '%g_textdomain%')}
-				checked={imageSize === 'stretch'}
-				onChange={(value) =>
-					setAttributes({ [getAttrKey('imageSize', attributes, manifest)]: value ? 'stretch' : 'default' })
-				}
-				hidden={hiddenOptions?.stretch}
-			/>
-
-			<Spacer hidden={!additionalControls} />
-			{additionalControls}
-		</ComponentToggle>
-	);
-};

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

@@ -1,68 +0,0 @@
-<?php
-
-/**
- * Image component template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$globalManifest = Helpers::getSettings();
-$manifest = Helpers::getManifestByDir(__DIR__);
-
-$additionalClass = $attributes['additionalClass'] ?? '';
-
-$imageUse = Helpers::checkAttr('imageUse', $attributes, $manifest) ?? false;
-$imageData = Helpers::checkAttr('imageData', $attributes, $manifest);
-
-if (!$imageUse || empty($imageData['_default']['url'])) {
-	return;
-}
-
-$imageAlt = get_post_meta($imageData['_default']['id'], '_wp_attachment_image_alt', true) ?? '';
-
-$isDesktopFirst = $imageData['_desktopFirst'] ?? false;
-
-$breakpointData = Helpers::getSettingsGlobalVariablesBreakpoints();
-$breakpoints = Helpers::getTwBreakpoints($isDesktopFirst);
-
-if (!$isDesktopFirst) {
-	$breakpoints = array_reverse($breakpoints);
-}
-?>
-
-<picture
-	<?php if (!empty($additionalClass['picture'])) { ?>
-		class="<?php echo esc_attr($additionalClass['picture']); ?>"
-	<?php } ?>
->
-	<?php
-	foreach ($breakpoints as $breakpoint) { ?>
-		<?php
-		if (!isset($imageData[$breakpoint])) {
-			continue;
-		}
-
-		$value = $imageData[$breakpoint]['url'] ?? '';
-
-		if (empty($value)) {
-			continue;
-		}
-
-		$breakpointWidth = $breakpointData[str_replace('max-', '', $breakpoint)];
-
-		$widthMode = $isDesktopFirst ? 'max-width' : 'min-width';
-
-		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
-		echo '<source srcset="' . esc_url($value) . '" media="(' . $widthMode . ': ' . $breakpointWidth . 'em)" />';
-		?>
-	<?php } ?>
-
-	<img
-		src="<?php echo esc_url($imageData['_default']['url'] ?? ''); ?>"
-		alt="<?php echo esc_attr($imageAlt); ?>"
-		class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass['image'] ?? '')); ?>"
-	/>
-</picture>
-

package/blocks/init/src/Blocks/components/image/manifest.json

@@ -1,125 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
-	"componentName": "image",
-	"title": "Image",
-	"componentClass": "image",
-	"example": {
-		"attributes": {
-			"imageData": {
-				"_desktopFirst": false,
-				"_default": {
-					"id": "1",
-					"url": "https://loremflickr.com/1000/800"
-				}
-			},
-			"imageUse": true
-		}
-	},
-	"attributes": {
-		"imageData": {
-			"type": "object",
-			"default": {
-				"_desktopFirst": false,
-				"_default": {
-					"id": "",
-					"url": ""
-				}
-			}
-		},
-		"imageUse": {
-			"type": "boolean",
-			"default": true
-		},
-		"imageRoundedCorners": {
-			"type": "string",
-			"default": "none"
-		},
-		"imageAspectRatio": {
-			"type": "string",
-			"default": "auto"
-		},
-		"imageSize": {
-			"type": "string",
-			"default": "default"
-		}
-	},
-	"options": {
-		"imageRoundedCorners": [
-			{
-				"label": "0",
-				"value": "none"
-			},
-			{
-				"label": "4",
-				"value": "small"
-			},
-			{
-				"label": "8",
-				"value": "medium"
-			},
-			{
-				"label": "16",
-				"value": "large"
-			},
-			{
-				"label": "Full",
-				"value": "full"
-			}
-		],
-		"imageAspectRatio": [
-			{
-				"label": "Auto",
-				"value": "auto"
-			},
-			{
-				"label": "Square",
-				"value": "square"
-			},
-			{
-				"label": "3/2",
-				"value": "three-two"
-			},
-			{
-				"label": "5/4",
-				"value": "five-four"
-			},
-			{
-				"label": "16/9",
-				"value": "sixteen-nine"
-			},
-			{
-				"label": "21/9",
-				"value": "twentyone-nine"
-			}
-		]
-	},
-	"tailwind": {
-		"base": {
-			"twClasses": "object-cover"
-		},
-		"options": {
-			"imageRoundedCorners": {
-				"twClasses": {
-					"small": "rounded",
-					"medium": "rounded-lg",
-					"large": "rounded-2xl",
-					"full": "rounded-full"
-				}
-			},
-			"imageAspectRatio": {
-				"twClasses": {
-					"square": "aspect-square",
-					"three-two": "aspect-3/2",
-					"five-four": "aspect-5/4",
-					"sixteen-nine": "aspect-video",
-					"twentyone-nine": "aspect-21/9"
-				}
-			},
-			"imageSize": {
-				"twClasses": {
-					"stretch": "size-full"
-				}
-			}
-		}
-	}
-}

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

@@ -1,30 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getAttrKey, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
-import manifest from '../manifest.json';
-
-export const ListEditor = (attributes) => {
-	const { setAttributes, additionalClass, placeholder = __('Add content', '%g_textdomain%') } = attributes;
-
-	const listUse = checkAttr('listUse', attributes, manifest);
-
-	if (!listUse) {
-		return null;
-	}
-
-	const listContent = checkAttr('listContent', attributes, manifest);
-	const listType = checkAttr('listType', attributes, manifest);
-
-	return (
-		<div className={tailwindClasses(attributes, manifest, additionalClass)}>
-			<RichText
-				tagName={listType}
-				multiline='li'
-				placeholder={placeholder}
-				value={listContent}
-				onChange={(value) => setAttributes({ [getAttrKey('listContent', attributes, manifest)]: value })}
-				allowedFormats={['core/bold', 'core/link']}
-			/>
-		</div>
-	);
-};

package/blocks/init/src/Blocks/components/list/components/list-options.js

@@ -1,62 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { getOption, getAttrKey, checkAttr, getHiddenOptions } from '@eightshift/frontend-libs-tailwind/scripts';
-import { ComponentToggle, OptionSelect, HStack, ToggleButton } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import manifest from '../manifest.json';
-
-export const ListOptions = (attributes) => {
-	const { setAttributes, additionalControls, hideOptions, ...rest } = attributes;
-
-	const hiddenOptions = getHiddenOptions(hideOptions);
-
-	const listUse = checkAttr('listUse', attributes, manifest);
-	const listSize = checkAttr('listSize', attributes, manifest);
-	const listFontWeight = checkAttr('listFontWeight', attributes, manifest);
-	const listStyle = checkAttr('listStyle', attributes, manifest);
-
-	return (
-		<ComponentToggle
-			label={manifest.title}
-			icon={icons.listUnordered}
-			onChange={(value) => setAttributes({ [getAttrKey('listUse', attributes, manifest)]: value })}
-			useComponent={listUse}
-			{...rest}
-		>
-			<HStack>
-				<OptionSelect
-					options={getOption('listSize', attributes, manifest)}
-					onChange={(value) => setAttributes({ [getAttrKey('listSize', attributes, manifest)]: value })}
-					value={listSize}
-					aria-label={__('Font size', '%g_textdomain%')}
-					hidden={hiddenOptions.size}
-					type='menu'
-				/>
-
-				<ToggleButton
-					selected={listFontWeight === '700'}
-					icon={icons.bold}
-					onChange={(value) =>
-						setAttributes({ [getAttrKey('listFontWeight', attributes, manifest)]: value ? '700' : '400' })
-					}
-					tooltip={__('Bold', '%g_textdomain%')}
-					hidden={hiddenOptions.weight}
-				/>
-
-				<OptionSelect
-					value={listStyle}
-					onChange={(value) =>
-						setAttributes({
-							[getAttrKey('listStyle', attributes, manifest)]: value,
-							[getAttrKey('listType', attributes, manifest)]: value === 'decimal' ? 'ol' : 'ul',
-						})
-					}
-					aria-label={__('List style', '%g_textdomain%')}
-					options={getOption('listStyle', attributes, manifest)}
-					noItemLabel
-				/>
-			</HStack>
-
-			{additionalControls}
-		</ComponentToggle>
-	);
-};

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

@@ -1,32 +0,0 @@
-<?php
-
-/**
- * List component template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-
-$listUse = Helpers::checkAttr('listUse', $attributes, $manifest);
-
-if (!$listUse) {
-	return;
-}
-
-$additionalClass = $attributes['additionalClass'] ?? '';
-
-$listContent = Helpers::checkAttr('listContent', $attributes, $manifest);
-$listType = Helpers::checkAttr('listType', $attributes, $manifest);
-?>
-
-<<?php echo esc_attr($listType); ?>
-	class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass)); ?>"
->
-	<?php
-	// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
-	echo $listContent;
-	?>
-</<?php echo esc_attr($listType); ?>>

package/blocks/init/src/Blocks/components/list/manifest.json

@@ -1,127 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
-	"componentName": "list",
-	"title": "List",
-	"componentClass": "list",
-	"example": {
-		"attributes": {
-			"listContent": "<li>List item 1</li><li>List item 2</li><li>List item 3</li>",
-			"listType": "ul",
-			"listSize": "default",
-			"listColor": "primary500",
-			"listUse": true
-		}
-	},
-	"attributes": {
-		"listContent": {
-			"type": "string"
-		},
-		"listType": {
-			"type": "string",
-			"default": "ul"
-		},
-		"listStyle": {
-			"type": "string",
-			"default": "disc"
-		},
-		"listSize": {
-			"type": "string",
-			"default": "base"
-		},
-		"listFontWeight": {
-			"type": "string",
-			"default": "400"
-		},
-		"listUse": {
-			"type": "boolean",
-			"default": true
-		}
-	},
-	"options": {
-		"listSize": [
-			{
-				"label": "24",
-				"value": "lg"
-			},
-			{
-				"label": "20",
-				"value": "md"
-			},
-			{
-				"label": "16",
-				"value": "base"
-			},
-			{
-				"label": "14",
-				"value": "sm"
-			}
-		],
-		"listFontWeight": [
-			{
-				"label": "Normal",
-				"value": "400"
-			},
-			{
-				"label": "Bold",
-				"value": "700"
-			}
-		],
-		"listStyle": [
-			{
-				"label": "No list markers",
-				"value": "none",
-				"icon": "emptyCircle"
-			},
-			{
-				"label": "Numeric list",
-				"value": "decimal",
-				"icon": "listOrdered"
-			},
-			{
-				"label": "Bulleted list",
-				"value": "disc",
-				"icon": "listUnordered"
-			},
-			{
-				"label": "Checkmark list",
-				"value": "checks",
-				"icon": "optionList"
-			}
-		]
-	},
-	"tailwind": {
-		"base": {
-			"twClasses": "font-sans [&_a]:underline font-synthesis-none",
-			"twClassesEditorOnly": "font-sans [&>a]:underline font-synthesis-none"
-		},
-		"options": {
-			"listSize": {
-				"twClasses": {
-					"sm": "text-sm",
-					"base": "~sm/md:~text-sm/base",
-					"md": "~sm/md:~text-lg/2xl",
-					"lg": "~sm/md:~text-xl/3xl"
-				}
-			},
-			"listFontWeight": {
-				"twClasses": {
-					"700": "font-bold"
-				}
-			},
-			"listStyle": {
-				"twClasses": {
-					"none": "list-none",
-					"disc": "list-disc ml-[1.125em]",
-					"decimal": "list-decimal ml-[1.125em]",
-					"checks": "list-['✓_'] ml-[1em]"
-				},
-				"twClassesEditorOnly": {
-					"none": "*:list-none",
-					"disc": "*:list-disc *:ml-[1.125em]",
-					"decimal": "*:list-decimal *:ml-[1.125em]",
-					"checks": "*:list-['✓_'] *:ml-[1em]"
-				}
-			}
-		}
-	}
-}

package/blocks/init/src/Blocks/components/load-more/assets/index.js

@@ -1,19 +0,0 @@
-import domReady from '@wordpress/dom-ready';
-import manifest from './../manifest.json';
-
-domReady(async () => {
-	const selectors = `.${manifest.componentJsClass}`;
-	const elements = document.querySelectorAll(selectors);
-
-	if (!elements.length) {
-		return;
-	}
-
-	const { LoadMore } = await import('./load-more');
-
-	elements.forEach((element) => {
-		new LoadMore({
-			element,
-		}).init();
-	});
-});