@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "1.5.0",
+	"version": "2.0.1",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",
@@ -27,55 +27,45 @@
 	},
 	"scripts": {
 		"lintStyle": "stylelint **/*.css",
-		"lintJs": "npx eslint",
+		"lintJs": "bunx eslint",
 		"lint": "npm run lintJs && npm run lintStyle",
 		"prepare": "husky"
 	},
 	"homepage": "https://github.com/infinum/eightshift-frontend-libs-tailwind#readme",
 	"license": "MIT",
 	"dependencies": {
-		"@eightshift/ui-components": "^3.0.0",
+		"@eightshift/ui-components": "^3.0.1",
 		"@stylistic/eslint-plugin-js": "^4.2.0",
 		"@stylistic/stylelint-plugin": "^3.1.2",
-		"@swc/core": "^1.11.8",
-		"@wordpress/api-fetch": "^7.19.0",
-		"@wordpress/block-editor": "^14.14.0",
-		"@wordpress/dependency-extraction-webpack-plugin": "^5.9.0",
-		"@wordpress/dom-ready": "^4.19.0",
-		"@wordpress/server-side-render": "^5.19.0",
+		"@swc/core": "^1.11.22",
+		"@wordpress/dependency-extraction-webpack-plugin": "^6.22.0",
 		"browserslist": "^4.24.4",
 		"css-loader": "^7.1.2",
 		"css-minimizer-webpack-plugin": "^7.0.2",
-		"eslint": "^9.22.0",
-		"eslint-config-prettier": "^10.1.1",
-		"eslint-plugin-prettier": "^5.2.3",
+		"eslint": "^9.25.1",
+		"eslint-config-prettier": "^10.1.2",
+		"eslint-plugin-prettier": "^5.2.6",
 		"globals": "^16.0.0",
 		"husky": "^9.1.7",
-		"lightningcss": "^1.29.2",
+		"lightningcss": "^1.29.3",
 		"mini-css-extract-plugin": "^2.9.2",
 		"postcss": "^8.5.3",
 		"postcss-loader": "^8.1.1",
 		"prettier": "^3.5.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"sonner": "^2.0.1",
-		"stylelint": "^16.15.0",
-		"stylelint-config-standard": "^37.0.0",
+		"sonner": "^2.0.3",
+		"stylelint": "^16.19.0",
+		"stylelint-config-standard": "^38.0.0",
 		"swc-loader": "^0.2.6",
 		"terser-webpack-plugin": "^5.3.14",
-		"webpack": "^5.98.0",
+		"webpack": "^5.99.6",
 		"webpack-cli": "^6.0.1",
-		"webpack-manifest-plugin": "^5.0.0",
+		"webpack-manifest-plugin": "^5.0.1",
 		"webpack-merge": "^6.0.1"
 	},
 	"devDependencies": {
-		"embla-carousel": "^8.5.2",
-		"fluid-tailwind": "^1.0.4",
-		"lint-staged": "^15.4.3",
-		"micromodal": "^0.4.10",
-		"ol": "^10.4.0",
-		"ol-mapbox-style": "^12.5.0",
-		"tailwindcss": "^4.0.12",
-		"tailwindcss-animate": "^1.0.7"
+		"lint-staged": "^15.5.1",
+		"@wordpress/api-fetch": "^7.22.0"
 	},
 	"sideEffects": false,
 	"lint-staged": {

package/schemas/globalManifest.json

@@ -29,6 +29,11 @@
 					"type": "boolean",
 					"description": "Set to 'false' to disable wrapper.",
 					"default": true
+				},
+				"useLegacyComponents": {
+					"type": "boolean",
+					"description": "Set to 'true' to use legacy components.",
+					"default": false
 				}
 			}
 		},

package/scripts/components/picker-placeholder.js

@@ -64,7 +64,7 @@ export const PickerPlaceholder = (props) => {
 			<RichLabel
 				icon={icon}
 				label={title}
-				className='col-span-2 mb-2 font-medium !text-gray-400 select-none'
+				className='col-span-2 mb-2 select-none font-medium !text-gray-400'
 			/>
 
 			<span className='es:col-span-2 es:select-none es:justify-self-center'>{presetsHeading}</span>

package/scripts/editor/colors.js

@@ -16,9 +16,9 @@ import { upperFirst } from '@eightshift/ui-components/utilities';
  */
 export const getPaletteColors = () =>
 	useSelect((select) => {
-		const colors = select(STORE_NAME).getSettings().globalVariables.colors;
+		const colors = select(STORE_NAME).getSettings()?.globalVariables?.colors;
 
-		return colors.reduce(
+		return colors?.reduce(
 			(obj, item) => ({
 				...obj,
 				[item.slug]: item,

package/scripts/editor/options.js

@@ -116,7 +116,7 @@ export const getOptionColors = (colors) => {
 		return Object.values(coreColors);
 	}
 
-	return colors.map((colorName) => coreColors[colorName]);
+	return colors.map((colorName) => coreColors?.[colorName]);
 };
 
 /**

package/scripts/editor/registration.js

@@ -31,7 +31,7 @@ import { camelCase, kebabCase, lowerFirst, upperFirst } from '@eightshift/ui-com
  * Usage:
  * ```js
  * registerBlocks(
- *   globalSettings,
+ *   globalManifest,
  *   Wrapper,
  *   WrapperManifest,
  *   require.context('./../../components', true, /manifest.json$/),
@@ -49,9 +49,9 @@ export const registerBlocks = (
 	globalManifest = {},
 	wrapperComponent = null,
 	wrapperManifest = {},
-	componentsManifestPath,
-	blocksManifestPath,
-	blocksEditComponentPath,
+	componentsManifestPath = null,
+	blocksManifestPath = null,
+	blocksEditComponentPath = null,
 	hooksComponentPath = null,
 	transformsComponentPath = null,
 	deprecationsComponentPath = null,
@@ -226,9 +226,6 @@ export const registerVariations = (
 ) => {
 	const variationsManifests = variationsManifestPath.keys().map(variationsManifestPath);
 
-	// Set all store values.
-	dispatch(STORE_NAME).setVariations(variationsManifests);
-
 	// Iterate blocks to register.
 	variationsManifests.map((variationManifest) => {
 		const { active = true } = variationManifest;

package/scripts/editor/store.js

@@ -10,6 +10,7 @@ const DEFAULT_STATE = {
 	components: {},
 	config: {
 		useWrapper: true,
+		useLegacyComponents: true,
 	},
 	wrapper: {},
 	variations: {},
@@ -44,6 +45,9 @@ const selectors = {
 	getConfigUseWrapper(state) {
 		return state.config.useWrapper;
 	},
+	getConfigUseLegacyComponents(state) {
+		return state.config.useLegacyComponents;
+	},
 	getWrapper(state) {
 		return state.wrapper;
 	},
@@ -90,6 +94,12 @@ const actions = {
 			config,
 		};
 	},
+	setConfigUseLegacyComponents(config) {
+		return {
+			type: 'SET_CONFIG_USE_LEGACY_COMPONENTS',
+			config,
+		};
+	},
 	setWrapper(wrapper) {
 		return {
 			type: 'SET_WRAPPER',
@@ -140,6 +150,15 @@ const reducer = (state = DEFAULT_STATE, action) => {
 				},
 			};
 		}
+		case 'SET_CONFIG_USE_LEGACY_COMPONENTS': {
+			return {
+				...state,
+				config: {
+					...state.config,
+					useLegacyComponents: action.config,
+				},
+			};
+		}
 		case 'SET_WRAPPER': {
 			return {
 				...state,

package/scripts/helpers/cookies.js

@@ -2,7 +2,6 @@
  * Helper to set and unset cookies.
  */
 export const cookies = {
-
 	/**
 	 * Set a cookie value
 	 *
@@ -10,32 +9,41 @@ export const cookies = {
 	 * @param {string} value - Cookie value.
 	 * @param {number} time  - Number denoting the expiration of the cookie.
 	 * @param {string} path  - URL path that must exist in the requested URL in order to send the Cookie header.
-	 * @param {string?} domain - Cookie domain. Optional.
+	 * @param {string} domain  - Domain name of the server that set the cookie.
+	 * @param {boolean} secure - A secure cookie is only sent to the server with an encrypted request over the HTTPS protocol.
+	 * @param {string} sameSite - A SameSite cookie prevents the browser from sending this cookie along with cross-site requests
+	 *
 	 * @access public
 	 *
-	 * @returns {void}
+	 * @returns {boolean}
 	 *
 	 * Usage:
 	 * ```js
-	 * cookies.setCookie('gdpr', '2', cookies.setOneDay(), '/');
+	 * cookies.setCookie('gdpr', '2', cookies.setOneDay(), '/', '.example.com', true, 'Strict');
 	 * ```
 	 */
-	setCookie(key, value, time, path, domain) {
+	setCookie(key, value, time, path, domain, secure = true, sameSite = 'Lax') {
 		const expires = new Date();
-		expires.setTime(expires.getTime() + (time));
-		
-		let pathValue = '';
-		let domainValue = '';
+		expires.setTime(expires.getTime() + time);
 
-		if (typeof path !== 'undefined') {
-			pathValue = `;path=${path}`;
-		}
+		const cookieParts = {
+			value: `${key}=${value}`,
+			expires: `expires=${expires.toUTCString()}`,
+			sameSite: `SameSite=${sameSite}`,
+			path: path ? `path=${path}` : '',
+			domain: domain ? `domain=${domain}` : '',
+			secure: secure ? 'Secure' : '',
+		};
 
-		if (typeof domain !== 'undefined') {
-			domainValue = `;domain=${domain}`;
-		}
+		try {
+			document.cookie = Object.values(cookieParts).filter(Boolean).join('; ');
+
+			return true;
+		} catch (e) {
+			console.error('Failed to set cookie:', e);
 
-		document.cookie = `${key}=${value}${pathValue}${domainValue};expires=${expires.toUTCString()}`;
+			return false;
+		}
 	},
 
 	/**

package/scripts/plugins/yoast-seo.js

@@ -1,7 +1,7 @@
 import domReady from '@wordpress/dom-ready';
 import apiFetch from '@wordpress/api-fetch';
-import { subscribe, select } from '@wordpress/data';
-import { debounce, isEmpty } from '@eightshift/ui-components/utilities';
+import { addAction } from '@wordpress/hooks';
+import { select } from '@wordpress/data';
 
 /* global YoastSEO */
 
@@ -9,61 +9,87 @@ import { debounce, isEmpty } from '@eightshift/ui-components/utilities';
  * Attributes with this key will be passed as custom data to YoastSEO's analysis.
  * See https://developer.yoast.com/customization/yoast-seo/adding-custom-data-analysis for more info.
  */
-export const yoastSeo = () => {
+export const yoastSeo = (options) => {
+	const filterPriority = options?.filterPriority || 20;
+	const filterName = options?.filterName || 'EightshiftCustomSeo';
+
 	domReady(() => {
-		// Bailout if plugin is missing.
-		if (typeof YoastSEO === 'undefined' && typeof YoastSEO?.app === 'undefined') {
+		// Ensure YoastSEO.js is present and can access the necessary features.
+		if (
+			typeof YoastSEO === 'undefined' ||
+			typeof YoastSEO.analysis === 'undefined' ||
+			typeof YoastSEO.analysis.worker === 'undefined'
+		) {
 			return;
 		}
 
-		// Local variable content, used to update Yoast modifications.
-		let content = '';
-		let isDataAvailable = false;
+		// Initialize the state and dirty flag.
+		let state = '';
+		let isDirty = true;
+
+		/**
+		 * This function fetches the content of the post from the API.
+		 * It will only fetch the content data and will not refresh the content.
+		 *
+		 * @param {boolean} shouldReload Should the content be refreshed after fetching.
+		 */
+		const fetchContent = async (shouldReload = true) => {
+			// Set the dirty flag to false.
+			isDirty = false;
+
+			// Find API url for single item.
+			const apiUrl = select('core/editor')?.getCurrentPost()?.['_links']?.['wp:action-publish']?.[0]?.href;
 
-		YoastSEO.app.registerPlugin('EightshiftCustomSeo', { status: 'ready' });
-		YoastSEO.app.registerModification('content', () => content, 'EightshiftCustomSeo', 5);
+			if (typeof apiUrl === 'undefined') {
+				return;
+			}
 
-		// Subscribe to changes.
-		subscribe(
-			// Small debounce for more optimisations in loading.
-			debounce(() => {
-				// Filter only when saved or autosaved.
-				const isSavingPost = wp.data.select('core/editor').isSavingPost();
-				const isAutosavingPost = wp.data.select('core/editor').isAutosavingPost();
+			// Fetch content from the api with only content data in it.
+			const response = await apiFetch({
+				url: `${apiUrl}?_fields=content`,
+				method: 'GET',
+			});
 
-				// Get the new current post when ready.
-				const currentPost = select('core/editor').getCurrentPost();
+			// Set the content to the state.
+			state = response?.content?.rendered || '';
 
-				// Filter subscribes. Check only if post is saving, autosaving or initial load.
-				if (isEmpty(currentPost) || (isDataAvailable && !isSavingPost && !isAutosavingPost)) {
-					return;
-				}
+			// Refresh the content if needed.
+			if (shouldReload) {
+				YoastSEO.app.refresh();
+			}
+		};
 
-				isDataAvailable = true;
+		/**
+		 * This function is called by the editor to save the content of the post.
+		 * It will refresh the content after the save is done.
+		 *
+		 * @param {string} edits The content of the post.
+		 *
+		 * @return {string} The content of the post.
+		 */
+		const onSaveCallback = (edits) => {
+			fetchContent();
 
-				// Find API url for single item.
-				const apiUrl = currentPost['_links']['wp:action-publish'][0].href;
+			return edits;
+		};
 
-				if (typeof apiUrl === 'undefined') {
-					return;
-				}
+		/**
+		 * This function is called by YoastSEO to get the content of the post.
+		 *
+		 * @return {string} The content of the post.
+		 */
+		const registerYoastSeoPlugin = () => {
+			// Set the dirty flag to true.
+			if (isDirty) {
+				fetchContent(false);
+			}
 
-				// Fetch content from the api with only content data in it.
-				apiFetch({
-					url: `${apiUrl}?_fields=content`,
-					method: 'GET',
-				}).then((response) => {
-					const fetchedContent = response?.content?.rendered;
+			return state;
+		};
 
-					if (typeof content === 'undefined' && fetchedContent === content) {
-						return;
-					}
-					// Updating global variable content.
-					content = fetchedContent;
-					// Refreshing Yoast input.
-					YoastSEO.app.pluggable.refresh();
-				});
-			}, 50),
-		);
+		// Register the filter and the plugin.
+		addAction('editor.savePost', filterName, onSaveCallback);
+		YoastSEO.app.registerPlugin(filterName, { status: 'ready' });
+		YoastSEO.app.registerModification('content', registerYoastSeoPlugin, filterName, filterPriority);
 	});
 };

package/webpack/base.mjs

@@ -53,11 +53,6 @@ export default (options) => {
 		plugins.push(
 			new DependencyExtractionWebpackPlugin({
 				outputFormat: 'json',
-				requestToExternal: function (request) {
-					if (request === '@wordpress/dom-ready') {
-						return '';
-					}
-				},
 			}),
 		);
 	}

package/webpack/helpers.mjs

@@ -10,7 +10,6 @@ import path from 'path';
  *
  * @param {string} projectDir Current project directory absolute path.
  * @param {string} projectPathConfig Project path relative to project root.
- * @param {string} assetsPathConfig Assets path after projectPath location.
  * @param {string} blocksAssetsPathConfig Path of the block assets.
  * @param {string} outputPathConfig Public output path after projectPath location.
  * @param {string} blocksManifestSettingsPath Main global settings manifest.json path after projectPath location.
@@ -19,7 +18,6 @@ import path from 'path';
 function getConfig(
 	projectDir,
 	projectPathConfig,
-	assetsPathConfig = 'assets',
 	blocksAssetsPathConfig = 'src/Blocks/assets',
 	outputPathConfig = 'public',
 	blocksManifestSettingsPath = 'src/Blocks/manifest.json',
@@ -38,7 +36,6 @@ function getConfig(
 
 	// Clear all slashes from user config.
 	const projectPathConfigClean = projectPathConfig.replace(/^\/|\/$/g, '');
-	const assetsPathConfigClean = assetsPathConfig.replace(/^\/|\/$/g, '');
 	const blocksAssetsPathConfigClean = blocksAssetsPathConfig.replace(/^\/|\/$/g, '');
 	const outputPathConfigClean = outputPathConfig.replace(/^\/|\/$/g, '');
 	const blocksManifestSettingsPathClean = blocksManifestSettingsPath.replace(/^\/|\/$/g, '');
@@ -56,8 +53,7 @@ function getConfig(
 		publicPath: path.join('/', projectPathConfigClean, outputPathConfigClean, '/'),
 
 		// Source files entries absolute locations.
-		applicationEntry: path.resolve(absolutePath, assetsPathConfigClean, 'application.js'),
-		applicationAdminEntry: path.resolve(absolutePath, assetsPathConfigClean, 'application-admin.js'),
+		applicationAdminEntry: path.resolve(absolutePath, blocksAssetsPathConfigClean, 'application-admin.js'),
 		applicationBlocksEntry: path.resolve(absolutePath, blocksAssetsPathConfigClean, 'application-blocks.js'),
 		applicationBlocksEditorEntry: path.resolve(
 			absolutePath,

package/webpack/index.mjs

@@ -21,7 +21,6 @@ const eightshiftConfig = (mode, optionsData = {}) => {
 	options.config = getConfig(
 		optionsData.config.projectDir,
 		optionsData.config.projectPath,
-		optionsData.config.assetsPath,
 		optionsData.config.blocksAssetsPath,
 		optionsData.config.outputPath,
 		optionsData.config.blocksManifestSettingsPath,

package/webpack/project.mjs

@@ -18,11 +18,6 @@ export default (options) => {
 		library: '[name]',
 	};
 
-	// Load Application Entrypoint.
-	if (!options.overrides.includes('application') && fs.existsSync(options.config.applicationEntry)) {
-		entry.application = options.config.applicationEntry;
-	}
-
 	// Load ApplicationAdmin Entrypoint.
 	if (!options.overrides.includes('applicationAdmin') && fs.existsSync(options.config.applicationAdminEntry)) {
 		entry.applicationAdmin = options.config.applicationAdminEntry;

package/blocks/init/assets/application-admin.js

@@ -1,10 +0,0 @@
-/**
- * Main entry point for styles, scripts, and other assets used in the WordPress admin.
- * Does not apply to the Block editor!
- */
-
-// Styles.
-import './styles/application-admin.css';
-
-// Scripts.
-import './scripts/application-admin';

package/blocks/init/assets/application.js

@@ -1,13 +0,0 @@
-/**
- * Main entry point for styles, scripts, and other assets used in the site frontend.
- * Don't load Block editor-related assets here!
- */
-
-// Styles.
-import './styles/application.css';
-
-// Scripts.
-import './scripts/application';
-
-// Images.
-import './images';

package/blocks/init/assets/images/index.js

@@ -1,5 +0,0 @@
-/**
- * Main entry point for project images.
- *
- * Used in the WordPress admin, Block editor, and frontend.
- */

package/blocks/init/assets/scripts/application-admin.js

@@ -1,7 +0,0 @@
-/**
- * Main entry point for scripts used in the WordPress admin.
- */
-
-import { dynamicImport } from '@eightshift/frontend-libs-tailwind/scripts/helpers';
-
-dynamicImport(require.context('./../../src/Blocks/components', true, /assets-admin\/index\.js$/));

package/blocks/init/assets/scripts/application.js

@@ -1,3 +0,0 @@
-/**
- * Main entry point for scripts used in the site frontend.
- */

package/blocks/init/assets/scripts/theme-colors.js

@@ -1,39 +0,0 @@
-/**
- * Theme color definitions, used in the Tailwind configuration file and during registration.
- */
-
-import colors from 'tailwindcss/colors';
-
-export const themeColors = {
-	transparent: 'transparent',
-	current: 'currentColor',
-	black: colors.black,
-	white: colors.white,
-	gray: colors.stone,
-	navy: {
-		50: '#eef8ff',
-		100: '#dcf0ff',
-		200: '#b2e3ff',
-		300: '#6dceff',
-		400: '#20b5ff',
-		500: '#009cff',
-		600: '#007bdf',
-		700: '#0061b4',
-		800: '#005395',
-		900: '#00447a',
-		950: '#002c54',
-	},
-	red: {
-		50: '#fff0f2',
-		100: '#ffdde1',
-		200: '#ffc1c9',
-		300: '#ff95a3',
-		400: '#ff596f',
-		500: '#ff2643',
-		600: '#fc0626',
-		700: '#c5001a',
-		800: '#af051b',
-		900: '#900c1d',
-		950: '#50000b',
-	},
-};

package/blocks/init/assets/styles/application-admin.css

@@ -1,6 +0,0 @@
-/**
- * Main entry point for styles used in the WordPress admin.
- */
-
-@import '~@eightshift/ui-components/dist/assets/fonts.css';
-@import '~@eightshift/ui-components/dist/assets/style.css';

package/blocks/init/assets/styles/application.css

@@ -1,3 +0,0 @@
-/**
- * Main entry point for styles used in the site frontend.
- */

package/blocks/init/src/Blocks/assets/application-blocks-editor.js

@@ -1,14 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks used for the `WordPress admin editor`.
- * This file registers styles and scripts.
- *
- * Usage: `WordPress admin editor`.
- */
-
-// Styles.
-import './styles/tailwind.css';
-import './styles/application-blocks-editor.css';
-import './styles/editor/editor-overrides.css';
-
-// Scripts.
-import './scripts/application-blocks-editor';

package/blocks/init/src/Blocks/assets/application-blocks-frontend.js

@@ -1,13 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks used for the `WordPress frontend screen`.
- * This file registers styles and scripts.
- *
- * Usage: `WordPress frontend screen`.
- */
-
-// Styles.
-import './styles/tailwind.css';
-import './styles/application-blocks-frontend.css';
-
-// Scripts.
-import './scripts/application-blocks-frontend';

package/blocks/init/src/Blocks/assets/application-blocks.js

@@ -1,9 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks used for the `WordPress frontend screen` and `WordPress admin editor`.
- * This file registers styles and scripts.
- *
- * Usage: `WordPress frontend screen` and `WordPress admin editor`.
- */
-
-// Styles.
-import './styles/application-blocks.css';