@eightshift/frontend-libs-tailwind 2.0.7 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "2.0.7",
+	"version": "2.1.0",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",
@@ -35,39 +35,39 @@
 	"license": "MIT",
 	"dependencies": {
 		"@stylistic/eslint-plugin-js": "^4.4.1",
-		"@stylistic/stylelint-plugin": "^3.1.2",
-		"@swc/core": "^1.12.1",
-		"@wordpress/dependency-extraction-webpack-plugin": "^6.25.0",
-		"browserslist": "^4.25.0",
+		"@stylistic/stylelint-plugin": "^4.0.0",
+		"@swc/core": "^1.13.5",
+		"@wordpress/dependency-extraction-webpack-plugin": "^6.32.0",
+		"browserslist": "^4.26.3",
 		"css-loader": "^7.1.2",
 		"css-minimizer-webpack-plugin": "^7.0.2",
-		"eslint": "^9.29.0",
-		"eslint-config-prettier": "^10.1.5",
-		"eslint-plugin-prettier": "^5.5.0",
-		"globals": "^16.2.0",
+		"eslint": "^9.37.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-prettier": "^5.5.4",
+		"globals": "^16.4.0",
 		"husky": "^9.1.7",
-		"lightningcss": "^1.30.1",
-		"mini-css-extract-plugin": "^2.9.2",
+		"lightningcss": "^1.30.2",
+		"mini-css-extract-plugin": "^2.9.4",
 		"postcss": "^8.5.6",
-		"postcss-loader": "^8.1.1",
-		"prettier": "^3.5.3",
-		"prettier-plugin-tailwindcss": "^0.6.12",
-		"sonner": "^2.0.5",
-		"stylelint": "^16.20.0",
-		"stylelint-config-standard": "^38.0.0",
+		"postcss-loader": "^8.2.0",
+		"prettier": "^3.6.2",
+		"prettier-plugin-tailwindcss": "^0.6.14",
+		"sonner": "^2.0.7",
+		"stylelint": "^16.25.0",
+		"stylelint-config-standard": "^39.0.1",
 		"swc-loader": "^0.2.6",
 		"terser-webpack-plugin": "^5.3.14",
-		"webpack": "^5.99.9",
+		"webpack": "^5.102.0",
 		"webpack-cli": "^6.0.1",
 		"webpack-manifest-plugin": "^5.0.1",
 		"webpack-merge": "^6.0.1"
 	},
 	"devDependencies": {
-		"lint-staged": "^15.5.2",
-		"@wordpress/api-fetch": "^7.25.0"
+		"lint-staged": "^16.2.3",
+		"@wordpress/api-fetch": "^7.32.0"
 	},
 	"peerDependencies": {
-		"@eightshift/ui-components": "^5.0.0"
+		"@eightshift/ui-components": "^5.4.0"
 	},
 	"sideEffects": false,
 	"lint-staged": {

package/scripts/components/file-picker.js

@@ -1,7 +1,6 @@
-import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
-import { Button, HStack, VStack, FilePlaceholder, AnimatedVisibility } from '@eightshift/ui-components';
+import { Button, FilePickerShell } from '@eightshift/ui-components';
 import { icons } from '@eightshift/ui-components/icons';
 
 /**
@@ -16,6 +15,8 @@ import { icons } from '@eightshift/ui-components/icons';
  * @param {string[]} props.allowedTypes - Determines types of files which are allowed to be uploaded.
  * @param {ManageFileButtonKind} [props.kind] - The kind of file to manage. Controls labels and icons on the buttons.
  * @param {Object} [props.labels] - Custom UI labels for the buttons. Applies only if `kind` is set to `custom`.
+ * @param {Object} [props.buttonProps] - Props to pass to the trigger button.
+ * @param {boolean} [props.hidden] - If `true`, the component will not be rendered.
  *
  * @returns {JSX.Element} The ManageFileButton component.
  *
@@ -38,8 +39,16 @@ export const ManageFileButton = (props) => {
 		kind = 'file',
 
 		compact = false,
+
+		buttonProps,
+
+		hidden,
 	} = props;
 
+	if (hidden) {
+		return null;
+	}
+
 	const strings = {
 		file: {
 			buttonTooltip: {
@@ -160,7 +169,7 @@ export const ManageFileButton = (props) => {
 					<Button
 						onPress={open}
 						icon={compact && buttonIcon}
-						tooltip={buttonTooltip}
+						{...buttonProps}
 					>
 						{!compact && buttonLabel}
 					</Button>
@@ -229,46 +238,34 @@ export const FileSelector = (props) => {
 	};
 
 	return (
-		<VStack noWrap>
-			<FilePlaceholder
-				icon={fileIcons[kind] ?? icons.file}
-				fileName={fileName}
-			>
-				<HStack
-					noWrap
-					className='es:pl-1'
-				>
+		<FilePickerShell
+			icon={fileIcons[kind]}
+			fileName={fileName}
+			url={fileName}
+			noUrlContent={
+				<>
 					<ManageFileButton {...commonManageFileButtonProps} />
-					{!noUpload && (
-						<ManageFileButton
-							{...commonManageFileButtonProps}
-							type='upload'
-							compact
-						/>
-					)}
-				</HStack>
-			</FilePlaceholder>
 
-			<AnimatedVisibility
-				visible={(fileName ?? '').length > 0}
-				noInitial
-			>
-				<HStack noWrap>
 					<ManageFileButton
 						{...commonManageFileButtonProps}
-						currentId={fileId}
-						type='replace'
+						type='upload'
+						hidden={noUpload}
 					/>
-					{!noDelete && (
-						<Button
-							icon={icons.trash}
-							tooltip={removeTooltips[kind] ?? removeTooltips.file}
-							onPress={() => onChange({ id: undefined, url: undefined })}
-							type='danger'
-						/>
-					)}
-				</HStack>
-			</AnimatedVisibility>
-		</VStack>
+				</>
+			}
+		>
+			<ManageFileButton
+				{...commonManageFileButtonProps}
+				currentId={fileId}
+				type='replace'
+			/>
+
+			<Button
+				onPress={() => onChange({ id: undefined, url: undefined })}
+				hidden={noDelete}
+			>
+				{__('Remove', 'eightshift-frontend-libs-tailwind')}
+			</Button>
+		</FilePickerShell>
 	);
 };

package/scripts/components/media-picker.js

@@ -1,7 +1,5 @@
-import React from 'react';
 import { __ } from '@wordpress/i18n';
-import { Button, HStack, ImagePlaceholder } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
+import { Button, FilePickerShell } from '@eightshift/ui-components';
 import { ManageFileButton } from './file-picker';
 
 const MediaButton = (props) => {
@@ -20,19 +18,15 @@ const MediaButton = (props) => {
  * @param {Object} props - Component props.
  * @param {Function} props.onChange - The function that handles the change event.
  * @param {string} props.imageId - ID of the currently selected image. Used to mark the currently selected item when replacing the image.
- * @param {string} props.imageAlt - Alt text of the currently selected image.
  * @param {string} props.imageUrl - URL of the currently selected image.
  * @param {boolean} [props.noDelete] - If `true`, the delete button will be hidden.
  * @param {boolean} [props.noUpload] - If `true`, the upload button will be hidden.
- * @param {ImagePlaceholderImageMode} [props.imageMode='cover'] - Determines inner image display mode.
  * @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.
  *
  * @returns {JSX.Element} The MediaPicker component.
  *
- * @typedef {'cover'|'contain' | 'fill'} ImagePlaceholderImageMode
- *
  * @example
  * <MediaPicker
  * 	onChange={onChange}
@@ -43,69 +37,50 @@ const MediaButton = (props) => {
  *
  */
 export const MediaPicker = (props) => {
-	const {
-		onChange,
-		imageId,
-		imageAlt,
-		imageUrl,
-		noDelete,
-		noUpload,
-		imageMode,
-		hidden,
-		allowedTypes = ['image'],
-		className,
-	} = props;
+	const { onChange, imageId, imageUrl, noDelete, noUpload, hidden, allowedTypes = ['image'], className } = props;
 
 	if (hidden) {
 		return null;
 	}
 
 	return (
-		<HStack
-			className={className}
-			noWrap
-		>
-			<ImagePlaceholder
-				url={imageUrl}
-				alt={imageAlt}
-				imageMode={imageMode}
-			/>
-
-			{!imageUrl && (
+		<FilePickerShell
+			url={imageUrl}
+			type='image'
+			noUrlContent={
 				<>
 					<MediaButton
 						onChange={onChange}
 						allowedTypes={allowedTypes}
 					/>
-					{!noUpload && (
-						<MediaButton
-							onChange={onChange}
-							type='upload'
-							allowedTypes={allowedTypes}
-							compact
-						/>
-					)}
-				</>
-			)}
 
-			{imageUrl && (
-				<>
 					<MediaButton
-						type='replace'
 						onChange={onChange}
-						currentId={imageId}
+						type='upload'
 						allowedTypes={allowedTypes}
+						hidden={noUpload}
 					/>
-					{!noDelete && (
-						<Button
-							icon={icons.trash}
-							tooltip={__('Remove image', 'infobip')}
-							onPress={() => onChange({ id: undefined, url: undefined })}
-							type='danger'
-						/>
-					)}
 				</>
-			)}
-		</HStack>
+			}
+			className={className}
+		>
+			<MediaButton
+				type='replace'
+				onChange={onChange}
+				currentId={imageId}
+				allowedTypes={allowedTypes}
+				buttonProps={{
+					type: 'glass',
+				}}
+			/>
+
+			<Button
+				onPress={() => onChange({ id: undefined, url: undefined })}
+				type='glass'
+				hidden={noDelete}
+			>
+				{__('Remove', 'eightshift-frontend-libs-tailwind')}
+			</Button>
+		</FilePickerShell>
 	);
 };