@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.0

package/blocks/init/src/Blocks/custom/accordion-item/components/accordion-item-editor.js

@@ -1,60 +0,0 @@
-import React, { useId, useState, useRef } from 'react';
-import { __ } from '@wordpress/i18n';
-import { BlockInserter, checkAttr, getAttrKey, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
-import { RichText, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-import manifest from '../manifest.json';
-import { JsxSvg } from '@eightshift/ui-components/icons';
-import { AnimatedVisibility } from '@eightshift/ui-components';
-
-export const AccordionItemEditor = ({ attributes, setAttributes, clientId }) => {
-	const accordionItemLabel = checkAttr('accordionItemLabel', attributes, manifest);
-
-	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps(blockProps, {
-		renderAppender: () => (
-			<BlockInserter
-				clientId={clientId}
-				small
-			/>
-		),
-	});
-
-	const [expanded, setExpanded] = useState(false);
-
-	return (
-		<>
-			<div
-				aria-expanded={expanded}
-				className={tailwindClasses('trigger', attributes, manifest)}
-			>
-				<RichText
-					placeholder={__('Section title', '%g_textdomain%')}
-					value={accordionItemLabel}
-					onChange={(value) => setAttributes({ [getAttrKey('accordionItemLabel', attributes, manifest)]: value })}
-					allowedFormats={['core/bold']}
-					className='mr-auto w-fit'
-				/>
-
-				<button
-					onClick={(e) => setExpanded(!expanded)}
-					className={tailwindClasses('editor-trigger', attributes, manifest)}
-				>
-					<JsxSvg
-						svg={manifest.resources.icon}
-						className={tailwindClasses('editor-trigger-icon', attributes, manifest, expanded && 'rotate-45')}
-					/>
-				</button>
-			</div>
-
-			<AnimatedVisibility
-				visible={expanded}
-				noInitial
-			>
-				<div
-					{...innerBlocksProps}
-					className={tailwindClasses('content-container', attributes, manifest)}
-				/>
-			</AnimatedVisibility>
-		</>
-	);
-};

package/blocks/init/src/Blocks/custom/accordion-item/manifest.json

@@ -1,69 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
-	"blockName": "accordion-item",
-	"title": "Accordion item",
-	"description" : "Single accordion panel.",
-	"category": "eightshift",
-	"icon": {
-		"src": "es-accordion"
-	},
-	"keywords": [
-		"accordion",
-		"item"
-	],
-	"example": {
-		"innerBlocks": [
-			{
-				"name": "eightshift-boilerplate/heading",
-				"attributes": {
-					"headingHeadingContent": "Lorem ipsum dolor sit amet"
-				}
-			},
-			{
-				"name": "eightshift-boilerplate/paragraph",
-				"attributes": {
-					"paragraphParagraphContent": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam est id semper aliquet. Aenean accumsan lacus justo, a lacinia turpis semper condimentum. "
-				}
-			}
-		]
-	},
-	"attributes": {
-		"accordionItemLabel": {
-			"type": "string"
-		},
-
-		"wrapperUse": {
-			"type": "boolean",
-			"default": false
-		},
-		"wrapperNoControls": {
-			"type": "boolean",
-			"default": true
-		}
-	},
-	"hasInnerBlocks": true,
-	"resources": {
-		"icon": "<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 3v18m-9-9h18' stroke='#14142B' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' fill='none'/></svg>"
-	},
-	"parent": [
-		"eightshift-boilerplate/accordion"
-	],
-	"tailwind": {
-		"parts": {
-			"trigger": {
-				"twClasses": "flex items-center justify-between gap-2 group px-2 py-4 w-full border-t border-t-gray-400 text-sm font-medium focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30 transition [&>svg]:size-5 [&>svg]:transition-transform [&[aria-expanded=true]>svg]:rotate-45",
-				"twClassesEditorOnly": "flex items-center justify-between gap-2 group px-2 py-4 w-full border-t border-t-gray-400 text-sm font-medium"
-			},
-			"content-container": {
-				"twClasses": "pl-2 pr-8 pb-4 animate-in fade-in duration-500 fill-mode-forwards",
-				"twClassesEditorOnly": "pl-2 pr-8 pb-4 *:!m-0"
-			},
-			"editor-trigger": {
-				"twClassesEditorOnly": "focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30 transition"
-			},
-			"editor-trigger-icon": {
-				"twClassesEditorOnly": "size-5 transition duration-300"
-			}
-		}
-	}
-}

package/blocks/init/src/Blocks/custom/button/button-block.js

@@ -1,13 +0,0 @@
-import { ButtonEditor } from './components/button-editor';
-import { ButtonOptions } from './components/button-options';
-import { GutenbergBlock } from '@eightshift/frontend-libs-tailwind/scripts';
-
-export const Button = (props) => {
-	return (
-		<GutenbergBlock
-			{...props}
-			options={ButtonOptions}
-			editor={ButtonEditor}
-		/>
-	);
-};

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

@@ -1,11 +0,0 @@
-<?php
-
-/**
- * Button block template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-echo Helpers::render('button', Helpers::props('button', $attributes));

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

@@ -1,12 +0,0 @@
-import { props } from '@eightshift/frontend-libs-tailwind/scripts';
-import { ButtonEditor as EditorComponent } from '../../../components/button/components/button-editor';
-
-export const ButtonEditor = ({ attributes, setAttributes }) => {
-	return (
-		<EditorComponent
-			{...props('button', attributes, {
-				setAttributes,
-			})}
-		/>
-	);
-};

package/blocks/init/src/Blocks/custom/button/components/button-options.js

@@ -1,12 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { props } from '@eightshift/frontend-libs-tailwind/scripts';
-import { ButtonOptions as OptionsComponent } from '../../../components/button/components/button-options';
-
-export const ButtonOptions = ({ attributes, setAttributes }) => {
-	return (
-		<OptionsComponent
-			{...props('button', attributes, { setAttributes })}
-			controlOnly
-		/>
-	);
-};

package/blocks/init/src/Blocks/custom/button/manifest.json

@@ -1,18 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
-	"blockName": "button",
-	"title": "Button",
-	"description": "The most common interactive element.",
-	"category": "eightshift",
-	"icon": {
-		"src": "es-button"
-	},
-	"keywords": [
-		"button",
-		"btn",
-		"link"
-	],
-	"components": {
-		"button": "button"
-	}
-}

package/blocks/init/src/Blocks/custom/card/card-block.js

@@ -1,13 +0,0 @@
-import { CardEditor } from './components/card-editor';
-import { CardOptions } from './components/card-options';
-import { GutenbergBlock } from '@eightshift/frontend-libs-tailwind/scripts';
-
-export const Card = (props) => {
-	return (
-		<GutenbergBlock
-			{...props}
-			options={CardOptions}
-			editor={CardEditor}
-		/>
-	);
-};

package/blocks/init/src/Blocks/custom/card/card.php

@@ -1,11 +0,0 @@
-<?php
-
-/**
- * Card block template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-echo Helpers::render('card', Helpers::props('card', $attributes));

package/blocks/init/src/Blocks/custom/card/components/card-editor.js

@@ -1,12 +0,0 @@
-import { props } from '@eightshift/frontend-libs-tailwind/scripts';
-import { CardEditor as EditorComponent } from '../../../components/card/components/card-editor';
-
-export const CardEditor = ({ attributes, setAttributes }) => {
-	return (
-		<EditorComponent
-			{...props('card', attributes, {
-				setAttributes,
-			})}
-		/>
-	);
-};

package/blocks/init/src/Blocks/custom/card/components/card-options.js

@@ -1,15 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { props, getOptions } from '@eightshift/frontend-libs-tailwind/scripts';
-import { CardOptions as OptionsComponent } from '../../../components/card/components/card-options';
-import manifest from './../manifest.json';
-
-export const CardOptions = ({ attributes, setAttributes }) => {
-	return (
-		<OptionsComponent
-			{...props('card', attributes, {
-				setAttributes,
-				options: getOptions(attributes, manifest),
-			})}
-		/>
-	);
-};

package/blocks/init/src/Blocks/custom/card/manifest.json

@@ -1,18 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
-	"blockName": "card",
-	"title": "Card",
-	"description" : "A bit of text, image, and a button all wrapped up in a beautiful combination.",
-	"category": "eightshift",
-	"icon": {
-		"src": "es-card"
-	},
-	"keywords": [
-		"Service",
-		"Box",
-		"Card"
-	],
-	"components": {
-		"card": "card"
-	}
-}

package/blocks/init/src/Blocks/custom/carousel/assets/index.js

@@ -1,46 +0,0 @@
-import domReady from '@wordpress/dom-ready';
-import manifest from '../manifest.json';
-import EmblaCarousel from 'embla-carousel';
-import { addPagination } from './pagination';
-import { setUpNavigation } from './navigation';
-
-domReady(async () => {
-	const { blockJsClass } = manifest;
-
-	const selector = `.${blockJsClass}`;
-	const elements = document.querySelectorAll(selector);
-
-	if (!elements.length) {
-		return;
-	}
-
-	elements.forEach((element) => {
-		const container = element.querySelector(`${selector}-container`);
-
-		if (!container) {
-			return;
-		}
-
-		const loop = element.hasAttribute('data-loop');
-
-		const embla = EmblaCarousel(container, {
-			loop: loop,
-			skipSnaps: true,
-		});
-
-		const prevButton = element.querySelector(`${selector}-prev`);
-		const nextButton = element.querySelector(`${selector}-next`);
-
-		if (prevButton && nextButton) {
-			const removeNavigationHandlers = setUpNavigation(embla, prevButton, nextButton);
-			embla.on('destroy', removeNavigationHandlers);
-		}
-
-		const paginationContainer = element.querySelector(`${selector}-pagination`);
-
-		if (paginationContainer) {
-			const removePaginationHandlers = addPagination(embla, paginationContainer);
-			embla.on('destroy', removePaginationHandlers);
-		}
-	});
-});

package/blocks/init/src/Blocks/custom/carousel/assets/navigation.js

@@ -1,31 +0,0 @@
-// Based on Embla carousel docs.
-
-const setUpNavigationStateChange = (emblaApi, prevBtn, nextBtn) => {
-	const toggleNavigationState = () => {
-		prevBtn.disabled = !emblaApi.canScrollPrev();
-		nextBtn.disabled = !emblaApi.canScrollNext();
-	};
-
-	emblaApi.on('select', toggleNavigationState).on('init', toggleNavigationState).on('reInit', toggleNavigationState);
-
-	return () => {
-		prevBtn.removeAttribute('disabled');
-		nextBtn.removeAttribute('disabled');
-	};
-};
-
-export const setUpNavigation = (emblaApi, prevBtn, nextBtn) => {
-	const scrollPrev = () => emblaApi.scrollPrev();
-	const scrollNext = () => emblaApi.scrollNext();
-
-	prevBtn.addEventListener('click', scrollPrev, false);
-	nextBtn.addEventListener('click', scrollNext, false);
-
-	const removeNavigationStateChangeEvents = setUpNavigationStateChange(emblaApi, prevBtn, nextBtn);
-
-	return () => {
-		removeNavigationStateChangeEvents();
-		prevBtn.removeEventListener('click', scrollPrev, false);
-		nextBtn.removeEventListener('click', scrollNext, false);
-	};
-};

package/blocks/init/src/Blocks/custom/carousel/assets/pagination.js

@@ -1,40 +0,0 @@
-// Based on Embla carousel docs.
-
-export const addPagination = (emblaApi, dotsNode) => {
-	let dotNodes = [];
-
-	const addDots = () => {
-		dotsNode.innerHTML = '';
-
-		dotNodes = emblaApi.scrollSnapList().map((_, index) => {
-			const elem = document.createElement('button');
-			elem.className =
-				'size-2.5 rounded-full border border-gray-500 transition hover:scale-105 focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30';
-
-			elem.addEventListener('click', () => emblaApi.scrollTo(index), false);
-			dotsNode.appendChild(elem);
-
-			return elem;
-		});
-	};
-
-	const toggleDotBtnsActive = () => {
-		const previous = emblaApi.previousScrollSnap();
-		const selected = emblaApi.selectedScrollSnap();
-		['border-navy-500', 'bg-navy-500', 'shadow-sm', 'shadow-navy-500/30'].forEach((className) => {
-			dotNodes[previous].classList.remove(className);
-			dotNodes[selected].classList.add(className);
-		});
-	};
-
-	emblaApi
-		.on('init', addDots)
-		.on('reInit', addDots)
-		.on('init', toggleDotBtnsActive)
-		.on('reInit', toggleDotBtnsActive)
-		.on('select', toggleDotBtnsActive);
-
-	return () => {
-		dotsNode.innerHTML = '';
-	};
-};

package/blocks/init/src/Blocks/custom/carousel/carousel-block.js

@@ -1,21 +0,0 @@
-import { useSelect } from '@wordpress/data';
-import { GutenbergBlock, overrideInnerBlockAttributes } from '@eightshift/frontend-libs-tailwind/scripts/editor';
-import { CarouselOptions } from './components/carousel-options';
-import { CarouselEditor } from './components/carousel-editor';
-
-export const Carousel = (props) => {
-	useSelect((select) => {
-		overrideInnerBlockAttributes(select, props.clientId, {
-			wrapperUse: false,
-			wrapperNoControls: true,
-		});
-	});
-
-	return (
-		<GutenbergBlock
-			{...props}
-			options={CarouselOptions}
-			editor={CarouselEditor}
-		/>
-	);
-};

package/blocks/init/src/Blocks/custom/carousel/carousel.php

@@ -1,61 +0,0 @@
-<?php
-
-/**
- * Carousel block template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-
-$blockJsClass = $manifest['blockJsClass'] ?? $attributes['blockJsClass'] ?? '';
-
-$carouselLoop = Helpers::checkAttr('carouselLoop', $attributes, $manifest);
-$carouselNavigation = Helpers::checkAttr('carouselNavigation', $attributes, $manifest);
-$carouselPagination = Helpers::checkAttr('carouselPagination', $attributes, $manifest);
-?>
-
-<div
-	class="<?php echo esc_attr($blockJsClass); ?>"
-	<?php if ($carouselLoop) { ?>
-		data-loop
-	<?php } ?>
->
-	<?php if ($carouselNavigation || $carouselPagination) { ?>
-		<div class="hidden sm:flex items-center justify-center gap-2 mb-4">
-			<?php if ($carouselPagination) { ?>
-				<div class="<?php echo esc_attr(Helpers::classnames(["{$blockJsClass}-pagination", $carouselNavigation ? 'mr-auto' : '', 'max-sm:hidden space-x-0.5'])); ?>"></div>
-			<?php } ?>
-
-			<?php
-			if ($carouselNavigation) {
-				echo Helpers::render('button', [
-					'iconName' => 'back-arrow',
-					'buttonSize' => 'square',
-					'buttonVariant' => 'primary',
-					'buttonColor' => 'navy-800',
-					'additionalClass' => "{$blockJsClass}-prev",
-				]),
-				Helpers::render('button', [
-					'iconName' => 'forward-arrow',
-					'buttonSize' => 'square',
-					'buttonVariant' => 'primary',
-					'buttonColor' => 'navy-800',
-					'additionalClass' => "{$blockJsClass}-next",
-				]);
-			}
-			?>
-		</div>
-	<?php } ?>
-
-	<div class="<?php echo esc_attr(Helpers::tailwindClasses('container', $attributes, $manifest, "{$blockJsClass}-container")); ?>">
-		<div class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest)); ?>">
-			<?php
-			// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
-			echo $renderContent;
-			?>
-		</div>
-	</div>
-</div>

package/blocks/init/src/Blocks/custom/carousel/components/carousel-editor.js

@@ -1,25 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-import { BlockInserter, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
-import manifest from '../manifest.json';
-
-export const CarouselEditor = ({ attributes, clientId }) => {
-	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps(blockProps, {
-		renderAppender: false,
-		orientation: 'horizontal',
-	});
-
-	return (
-		<div className='flex items-center gap-2'>
-			<div className={tailwindClasses('container', attributes, manifest)}>
-				<div
-					{...innerBlocksProps}
-					className={tailwindClasses(attributes, manifest)}
-				/>
-			</div>
-
-			<BlockInserter clientId={clientId} />
-		</div>
-	);
-};

package/blocks/init/src/Blocks/custom/carousel/components/carousel-options.js

@@ -1,47 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { checkAttr, getAttrKey, getOption } from '@eightshift/frontend-libs-tailwind/scripts';
-import { OptionSelect, Spacer, Toggle } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import manifest from './../manifest.json';
-
-export const CarouselOptions = ({ attributes, setAttributes }) => {
-	const carouselLoop = checkAttr('carouselLoop', attributes, manifest);
-	const carouselNavigation = checkAttr('carouselNavigation', attributes, manifest);
-	const carouselPagination = checkAttr('carouselPagination', attributes, manifest);
-	const carouselItemGap = checkAttr('carouselItemGap', attributes, manifest);
-
-	return (
-		<>
-			<OptionSelect
-				icon={icons.gutter}
-				label={__('Item gap', '%g_textdomain%')}
-				value={carouselItemGap}
-				onChange={(value) => setAttributes({ [getAttrKey('carouselItemGap', attributes, manifest)]: value })}
-				options={getOption('carouselItemGap', attributes, manifest)}
-			/>
-
-			<Spacer />
-
-			<Toggle
-				icon={icons.loopMode}
-				label={__('Loop', '%g_textdomain%')}
-				checked={carouselLoop}
-				onChange={(value) => setAttributes({ [getAttrKey('carouselLoop', attributes, manifest)]: value })}
-			/>
-
-			<Toggle
-				icon={icons.navigationButtons}
-				label={__('Prev/next buttons', '%g_textdomain%')}
-				checked={carouselNavigation}
-				onChange={(value) => setAttributes({ [getAttrKey('carouselNavigation', attributes, manifest)]: value })}
-			/>
-
-			<Toggle
-				icon={icons.pagination}
-				label={__('Pagination', '%g_textdomain%')}
-				checked={carouselPagination}
-				onChange={(value) => setAttributes({ [getAttrKey('carouselPagination', attributes, manifest)]: value })}
-			/>
-		</>
-	);
-};