@eightshift/frontend-libs-tailwind 2.4.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "2.4.0",
+	"version": "3.0.0",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",
@@ -34,42 +34,42 @@
 	"homepage": "https://github.com/infinum/eightshift-frontend-libs-tailwind#readme",
 	"license": "MIT",
 	"dependencies": {
-		"@stylistic/eslint-plugin": "^5.8.0",
-		"@stylistic/stylelint-plugin": "^4.0.1",
-		"@swc/core": "^1.15.11",
-		"@wordpress/dependency-extraction-webpack-plugin": "^6.39.0",
+		"@stylistic/eslint-plugin": "^5.10.0",
+		"@stylistic/stylelint-plugin": "^5.0.1",
+		"@swc/core": "^1.15.18",
+		"@wordpress/dependency-extraction-webpack-plugin": "^6.41.0",
 		"browserslist": "^4.28.1",
 		"css-loader": "^7.1.4",
-		"css-minimizer-webpack-plugin": "^7.0.4",
-		"eslint": "^9.39.2",
+		"css-minimizer-webpack-plugin": "^8.0.0",
+		"eslint": "^10.0.3",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-prettier": "^5.5.5",
-		"globals": "^16.5.0",
+		"globals": "^17.4.0",
 		"husky": "^9.1.7",
-		"lightningcss": "^1.31.1",
-		"mini-css-extract-plugin": "^2.10.0",
-		"postcss": "^8.5.6",
+		"lightningcss": "^1.32.0",
+		"mini-css-extract-plugin": "^2.10.1",
+		"postcss": "^8.5.8",
 		"postcss-loader": "^8.2.1",
 		"prettier": "^3.8.1",
 		"prettier-plugin-tailwindcss": "^0.7.2",
 		"sonner": "^2.0.7",
-		"stylelint": "^16.26.1",
-		"stylelint-config-standard": "^39.0.1",
+		"stylelint": "^17.4.0",
+		"stylelint-config-standard": "^40.0.0",
 		"swc-loader": "^0.2.7",
-		"terser-webpack-plugin": "^5.3.16",
-		"webpack": "^5.105.2",
-		"webpack-cli": "^6.0.1",
+		"terser-webpack-plugin": "^5.4.0",
+		"webpack": "^5.105.4",
+		"webpack-cli": "^7.0.2",
 		"webpack-manifest-plugin": "^6.0.1",
 		"webpack-merge": "^6.0.1",
 		"eslint-plugin-react": "^7.37.5",
 		"eslint-plugin-react-hooks": "^7.0.1"
 	},
 	"devDependencies": {
-		"lint-staged": "^16.2.7",
-		"@wordpress/api-fetch": "^7.39.0"
+		"lint-staged": "^16.4.0",
+		"@wordpress/api-fetch": "^7.41.0"
 	},
 	"peerDependencies": {
-		"@eightshift/ui-components": "^6.1.0"
+		"@eightshift/ui-components": "^7.0.0"
 	},
 	"sideEffects": false,
 	"lint-staged": {

package/scripts/components/block-inserter.js

@@ -1,9 +1,8 @@
-import React from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { Inserter } from '@wordpress/block-editor';
 import { useSuspenseSelect } from '@wordpress/data';
 import { Button } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
+import { add } from '@eightshift/ui-components/icons';
 import { clsx } from '@eightshift/ui-components/utilities';
 
 /**
@@ -70,7 +69,7 @@ export const BlockInserter = (props) => {
 					<Button
 						onPress={onToggle}
 						disabled={disabled}
-						icon={icons.add}
+						icon={add}
 						size={small ? 'small' : 'default'}
 						className={clsx(className, 'es:font-sans')}
 					>

package/scripts/components/file-picker.js

@@ -1,7 +1,16 @@
 import { __ } from '@wordpress/i18n';
 import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
 import { Button, FilePickerShell } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
+import {
+	animationFile,
+	closedCaptions,
+	fileMetadata,
+	imageFile,
+	itemSelect,
+	swap,
+	upload,
+	videoFile,
+} from '@eightshift/ui-components/icons';
 
 /**
  * A customizable button for managing files from the Media library.
@@ -62,9 +71,9 @@ export const ManageFileButton = (props) => {
 				replace: __('Select a new file', 'eightshift-frontend-libs-tailwind'),
 			},
 			buttonIcon: {
-				browse: icons.itemSelect,
-				upload: icons.upload,
-				replace: icons.swap,
+				browse: itemSelect,
+				upload: upload,
+				replace: swap,
 			},
 		},
 		video: {
@@ -180,12 +189,12 @@ export const FileSelector = (props) => {
 	};
 
 	const fileIcons = {
-		image: icons.imageFile,
-		video: icons.videoFile,
-		subtitle: icons.closedCaptions,
-		geoJson: icons.fileMetadata,
-		lottie: icons.animationFile,
-		rive: icons.animationFile,
+		image: imageFile,
+		video: videoFile,
+		subtitle: closedCaptions,
+		geoJson: fileMetadata,
+		lottie: animationFile,
+		rive: animationFile,
 		custom: labels?.removeIcon,
 	};
 

package/scripts/components/link-section-editor.js

@@ -2,7 +2,7 @@ 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';
+import { add } from '@eightshift/ui-components/icons';
 
 /**
  * Link section editor.
@@ -292,7 +292,7 @@ export const LinkSectionEditor = (props) => {
 
 						<Button
 							size='small'
-							icon={icons.add}
+							icon={add}
 							tooltip={__('Add link', 'eightshift-frontend-libs')}
 							onPress={({ target }) => {
 								updateItem(index, {
@@ -316,7 +316,7 @@ export const LinkSectionEditor = (props) => {
 						target?.previousElementSibling?.querySelector('[contenteditable="true"]')?.focus();
 					}, 20);
 				}}
-				icon={icons.add}
+				icon={add}
 				tooltip={__('Add a section', 'eightshift-frontend-libs')}
 				className='justify-self-start'
 			>

package/scripts/components/media-picker.js

@@ -24,7 +24,6 @@ const MediaButton = (props) => {
  * @param {boolean} [props.hidden] - If `true`, the component will be hidden.
  * @param {string[]} [props.allowedTypes=['image']] - Determines types of files which are allowed to be uploaded.
  * @param {string} [props.className] - Classes to add to the button wrapper.
- * @param {boolean} [props.__useSmartImageNext] - If `true`, the component will use the `__SmartImageNext` for image preview and processing.
  *
  * @returns {JSX.Element} The MediaPicker component.
  *
@@ -38,17 +37,7 @@ const MediaButton = (props) => {
  *
  */
 export const MediaPicker = (props) => {
-	const {
-		onChange,
-		imageId,
-		imageUrl,
-		noDelete,
-		noUpload,
-		hidden,
-		allowedTypes = ['image'],
-		className,
-		__useSmartImageNext,
-	} = props;
+	const { onChange, imageId, imageUrl, noDelete, noUpload, hidden, allowedTypes = ['image'], className } = props;
 
 	if (hidden) {
 		return null;
@@ -74,7 +63,6 @@ export const MediaPicker = (props) => {
 				</>
 			}
 			className={className}
-			__useSmartImageNext={__useSmartImageNext}
 		>
 			{({ isDark, isTransparent }) => {
 				let buttonType = 'default';

package/scripts/components/picker-placeholder.js

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { RichLabel, Button } from '@eightshift/ui-components';
-import { icons, blockIcons, BlockIcon } from '@eightshift/ui-components/icons';
+import { blockIcons, BlockIcon, componentGeneric, Icon } from '@eightshift/ui-components/icons';
 import { dispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
 import { BlockInserter } from '@eightshift/frontend-libs-tailwind/scripts';
@@ -13,7 +13,7 @@ import { BlockInserter } from '@eightshift/frontend-libs-tailwind/scripts';
  * @param {string|JSX.Element} [props.title] - Block name. Overrides manifest value (if provided).
  * @param {Array} [props.presets] - Presets to show the user.
  * @param {string} props.presets.name - Preset name.
- * @param {string} props.presets.icon - Icon name. (See `icons` object in `@eightshift/ui-components/icons`).
+ * @param {string} props.presets.icon - Icon name. (from `@eightshift/ui-components/icons`).
  * @param {array} [props.presets.blocks] - Inner blocks to be added by the preset.
  * @param {object} [props.presets.attributes] - Attributes to set to the current block.
  * @param {string|JSX.Element} [props.blockIcon] - Block icon to show next to the title. Can either be a string (icon/block icon name - block icons have precedence), or a JSX element.
@@ -47,13 +47,12 @@ export const PickerPlaceholder = (props) => {
 	const blockIcon = rawBlockIcon ?? manifest?.icon?.src;
 	const presets = rawPresets ?? manifest?.layoutPresets;
 
-	let icon = blockIcon ?? icons.componentGeneric;
-
-	if (blockIcon in blockIcons) {
-		icon = <BlockIcon iconName={blockIcon} />;
-	} else if (blockIcon in icons) {
-		icon = icons[blockIcon];
-	}
+	let icon = (
+		<Icon
+			icon={blockIcon}
+			fallback={blockIcon in blockIcons ? <BlockIcon iconName={blockIcon} /> : componentGeneric}
+		/>
+	);
 
 	if (hidden) {
 		return null;
@@ -64,7 +63,7 @@ export const PickerPlaceholder = (props) => {
 			<RichLabel
 				icon={icon}
 				label={title}
-				className='col-span-2 mb-2 select-none font-medium !text-gray-400'
+				className='col-span-2 mb-2 font-medium !text-gray-400 select-none'
 			/>
 
 			<span className='es:col-span-2 es:select-none es:justify-self-center'>{presetsHeading}</span>
@@ -82,7 +81,7 @@ export const PickerPlaceholder = (props) => {
 
 							await dispatch('core/block-editor').insertBlocks(blocksToInsert, 0, clientId);
 						}}
-						icon={icons?.[icon]}
+						icon={<Icon icon={icon} />}
 						size='large'
 					>
 						{name}

package/scripts/components/settings/settings.js

@@ -3,7 +3,7 @@
 import { Toaster } from 'sonner';
 import { __ } from '@wordpress/i18n';
 import { Button, OptionsPanelHeader } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
+import { save } from '@eightshift/ui-components/icons';
 import { createContext } from '@wordpress/element';
 import { useThemeOptions } from './use-theme-options';
 
@@ -25,8 +25,8 @@ export const ThemeOptionsPage = ({
 					actions={
 						<Button
 							onPress={() => saveSettings()}
-							disabled={isLoading}
-							icon={isLoading ? icons.moreH : icons.save}
+							pending={isLoading}
+							icon={save}
 						>
 							{isLoading
 								? __('Saving...', 'eightshift-frontend-libs-tailwind')