@eightshift/frontend-libs-tailwind 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "2.0.0",
+	"version": "2.0.2",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",
@@ -27,28 +27,24 @@
 	},
 	"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.11",
-		"@wordpress/api-fetch": "^7.20.0",
-		"@wordpress/block-editor": "^14.15.0",
-		"@wordpress/dependency-extraction-webpack-plugin": "^6.20.0",
-		"@wordpress/dom-ready": "^4.20.0",
-		"@wordpress/server-side-render": "^5.20.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.3",
@@ -57,18 +53,19 @@
 		"postcss-loader": "^8.1.1",
 		"prettier": "^3.5.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"sonner": "^2.0.1",
-		"stylelint": "^16.16.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.1",
 		"webpack-merge": "^6.0.1"
 	},
 	"devDependencies": {
-		"lint-staged": "^15.5.0"
+		"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 '';
-					}
-				},
 			}),
 		);
 	}
@@ -78,6 +73,16 @@ export default (options) => {
 		});
 	}
 
+	// Module for MJS.
+	if (!options.overrides.includes('mjs')) {
+		module.rules.push({
+			test: /\.m?js/,
+			resolve: {
+				fullySpecified: false,
+			},
+		});
+	}
+
 	// Module for CSS.
 	if (!options.overrides.includes('css')) {
 		module.rules.push({

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/readme/packages.md

@@ -1,74 +0,0 @@
-# Packages readme
-
-This is a document explaining what each `package.json` package is used for.
-
-## Dependencies
-
-* @babel/cli - Adds terminal commands for babel.
-* @babel/core - Main Babel core package.
-* @babel/eslint-parser - JS Parser for babel.
-* @babel/eslint-plugin - JS Parser for babel plugin.
-* @dnd-kit/core - Modern helper for creating re-orderable react components
-* @dnd-kit/modifiers - Modern helper for creating re-orderable react components
-* @dnd-kit/sortable - Modern helper for creating re-orderable react components
-* @dnd-kit/utilities - Modern helper for creating re-orderable react components
-* @infinumjs/eslint-config-react-js - Adds JS linter config.
-* @swc/core - loader swc for faster build times.
-* @wordpress/api-fetch - WP package for api fetch.
-* @wordpress/dependency-extraction-webpack-plugin - Allows Webpack to read all @wordpress packages as external dependency.
-* @wordpress/dom-ready - WP package to load JS when dom is ready.
-* @wordpress/icons - WP icons package.
-* autoprefixer - Package for adding vendor prefix depending on your browserlist.
-* babel-loader - Loader used for Webpack.
-* browser-sync - Browser sync.
-* browser-sync-webpack-plugin - Browser sync plugin for Webpack.
-* classnames - Classnames package used in view components.
-* clean-webpack-plugin - Webpack plugin used to delete build folder.
-* core-js - Latest core Js to use in babel.
-* css-loader - Webpack loader user for css.
-* css-minimizer-webpack-plugin - Webpack plugin used to minimize output.
-* eslint - Package used for linting JS.
-* eslint-plugin-jsx-a11y - Package used for linting JS.
-* eslint-plugin-react - Package used for linting JS.
-* eslint-plugin-react-hooks - Package used for linting JS.
-* file-loader - Webpack loaded used for images and files.
-* husky - Package used for linting code on git commands.
-* import-glob - Webpack loader used for putting regex in css import.
-* media-blender - Package used for providing media queries.
-* mini-css-extract-plugin - Webpack plugin extracts CSS into separate files.
-* postcss - package for getting postcss options.
-* postcss-loader - Webpack loader used for postcss.
-* postcss-scss - package for parsing scss used for style linter.
-* promisify-child-process - Async child process library used in project setup.
-* raw-loader - Webpack loader used for files.
-* rc-slider - React slider component used in our components.
-* rc-tooltip - React tooltip component used in our components.
-* react-select - Select component for React.
-* regenerator-runtime - Used for Core-js polyfill.
-* sass - A pure JavaScript implementation of Sass
-* sass-loader - Webpack loader used for sass.
-* storybook - Storybook library used in projects.
-* style-loader - Webpack loader used for styles.
-* stylelint - Css linter.
-* stylelint-config-standard-scss - Css linter for scss type.
-* terser-webpack-plugin - Webpack plugin used for minimization.
-* webpack - Webpack library.
-* webpack-cli - Webpack cli library.
-* webpack-manifest-plugin - Webpack plugin used for outputting manifest.json.
-* webpack-merge - Webpack utility for merging multiple webpack files.
-
-## Dev dependencies
-
-* @babel/preset-env - Is a smart preset that allows you to use the latest JavaScript without needing to micromanage.
-* @babel/preset-react - Babel preset for React.
-* @eightshift/storybook - Our storybook used for frontend libs.
-* chalk - Terminal coloring library. Used in project setup.
-* del - Terminal delete library. Used in project setup.
-* gh-pages - Terminal GH pages lib for deployment to GH pages.
-* micromodal - Modal component used in the project here only for storybook.
-* ol - Map component used in the project here only for storybook.
-* ol-mapbox-style - Map component used in the project here only for storybook.
-* react-test-renderer - This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects.
-* replace-in-file - A simple utility to quickly replace text in one or more files or globs.
-* sassdoc - Sass docs library.
-* swiper - Swiper component used in the project here only for storybook.