@eightshift/frontend-libs-tailwind 2.0.7 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "2.0.7",
+	"version": "2.1.1",
 	"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.5.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,15 +39,18 @@ export const ManageFileButton = (props) => {
 		kind = 'file',
 
 		compact = false,
+
+		buttonProps,
+
+		hidden,
 	} = props;
 
+	if (hidden) {
+		return null;
+	}
+
 	const strings = {
 		file: {
-			buttonTooltip: {
-				browse: __('Select a file from Media library', 'eightshift-frontend-libs-tailwind'),
-				upload: __('Upload a file', 'eightshift-frontend-libs-tailwind'),
-				replace: __('Replace file', 'eightshift-frontend-libs-tailwind'),
-			},
 			buttonLabel: {
 				browse: __('Select', 'eightshift-frontend-libs-tailwind'),
 				upload: __('Upload', 'eightshift-frontend-libs-tailwind'),
@@ -64,11 +68,6 @@ export const ManageFileButton = (props) => {
 			},
 		},
 		video: {
-			buttonTooltip: {
-				browse: __('Select a video from Media library', 'eightshift-frontend-libs-tailwind'),
-				upload: __('Upload a video', 'eightshift-frontend-libs-tailwind'),
-				replace: __('Replace video', 'eightshift-frontend-libs-tailwind'),
-			},
 			modalTitle: {
 				browse: __('Select a video', 'eightshift-frontend-libs-tailwind'),
 				upload: __('Upload a video', 'eightshift-frontend-libs-tailwind'),
@@ -76,11 +75,6 @@ export const ManageFileButton = (props) => {
 			},
 		},
 		image: {
-			buttonTooltip: {
-				browse: __('Select an image from Media library', 'eightshift-frontend-libs-tailwind'),
-				upload: __('Upload an image', 'eightshift-frontend-libs-tailwind'),
-				replace: __('Replace image', 'eightshift-frontend-libs-tailwind'),
-			},
 			modalTitle: {
 				browse: __('Select an image', 'eightshift-frontend-libs-tailwind'),
 				upload: __('Upload an image', 'eightshift-frontend-libs-tailwind'),
@@ -88,11 +82,6 @@ export const ManageFileButton = (props) => {
 			},
 		},
 		subtitle: {
-			buttonTooltip: {
-				browse: __('Select a subtitle file', 'eightshift-frontend-libs-tailwind'),
-				upload: __('Upload a subtitle file', 'eightshift-frontend-libs-tailwind'),
-				replace: __('Replace subtitle file', 'eightshift-frontend-libs-tailwind'),
-			},
 			modalTitle: {
 				browse: __('Select a subtitle file', 'eightshift-frontend-libs-tailwind'),
 				upload: __('Upload a subtitle file', 'eightshift-frontend-libs-tailwind'),
@@ -100,11 +89,6 @@ export const ManageFileButton = (props) => {
 			},
 		},
 		geoJson: {
-			buttonTooltip: {
-				browse: __('Select a GeoJSON file', 'eightshift-frontend-libs-tailwind'),
-				upload: __('Upload a GeoJSON file', 'eightshift-frontend-libs-tailwind'),
-				replace: __('Replace GeoJSON file', 'eightshift-frontend-libs-tailwind'),
-			},
 			modalTitle: {
 				browse: __('Select a GeoJSON file', 'eightshift-frontend-libs-tailwind'),
 				upload: __('Upload a GeoJSON file', 'eightshift-frontend-libs-tailwind'),
@@ -112,11 +96,6 @@ export const ManageFileButton = (props) => {
 			},
 		},
 		lottie: {
-			buttonTooltip: {
-				browse: __('Select a Lottie animation', 'eightshift-frontend-libs-tailwind'),
-				upload: __('Upload a Lottie animation', 'eightshift-frontend-libs-tailwind'),
-				replace: __('Replace Lottie animation', 'eightshift-frontend-libs-tailwind'),
-			},
 			modalTitle: {
 				browse: __('Select a Lottie animation', 'eightshift-frontend-libs-tailwind'),
 				upload: __('Upload a Lottie animation', 'eightshift-frontend-libs-tailwind'),
@@ -124,11 +103,6 @@ export const ManageFileButton = (props) => {
 			},
 		},
 		rive: {
-			buttonTooltip: {
-				browse: __('Select a Rive animation', 'eightshift-frontend-libs-tailwind'),
-				upload: __('Upload a Rive animation', 'eightshift-frontend-libs-tailwind'),
-				replace: __('Replace Rive animation', 'eightshift-frontend-libs-tailwind'),
-			},
 			modalTitle: {
 				browse: __('Select a Rive animation', 'eightshift-frontend-libs-tailwind'),
 				upload: __('Upload a Rive animation', 'eightshift-frontend-libs-tailwind'),
@@ -136,14 +110,12 @@ export const ManageFileButton = (props) => {
 			},
 		},
 		custom: {
-			buttonTooltip: labels?.buttonTooltip,
 			buttonLabel: labels?.buttonLabel,
 			modalTitle: labels?.modalTitle,
 			buttonIcon: labels?.buttonIcon,
 		},
 	};
 
-	const buttonTooltip = strings?.[kind]?.buttonTooltip?.[type] ?? strings.file.buttonTooltip?.[type];
 	const buttonLabel = strings?.[kind]?.buttonLabel?.[type] ?? strings.file.buttonLabel?.[type];
 	const buttonIcon = strings?.[kind]?.buttonIcon?.[type] ?? strings.file.buttonIcon?.[type];
 	const modalTitle = strings?.[kind]?.modalTitle?.[type] ?? strings.file.modalTitle?.[type];
@@ -160,7 +132,7 @@ export const ManageFileButton = (props) => {
 					<Button
 						onPress={open}
 						icon={compact && buttonIcon}
-						tooltip={buttonTooltip}
+						{...buttonProps}
 					>
 						{!compact && buttonLabel}
 					</Button>
@@ -207,17 +179,6 @@ export const FileSelector = (props) => {
 		labels,
 	};
 
-	const removeTooltips = {
-		file: __('Remove file', 'eightshift-frontend-libs-tailwind'),
-		image: __('Remove image', 'eightshift-frontend-libs-tailwind'),
-		video: __('Remove video', 'eightshift-frontend-libs-tailwind'),
-		subtitle: __('Remove subtitle file', 'eightshift-frontend-libs-tailwind'),
-		geoJson: __('Remove GeoJSON file', 'eightshift-frontend-libs-tailwind'),
-		lottie: __('Remove Lottie animation', 'eightshift-frontend-libs-tailwind'),
-		rive: __('Remove Rive animation', 'eightshift-frontend-libs-tailwind'),
-		custom: labels?.removeTooltip,
-	};
-
 	const fileIcons = {
 		image: icons.imageFile,
 		video: icons.videoFile,
@@ -229,46 +190,36 @@ 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}
+				buttonProps={{ className: 'es:grow' }}
+				currentId={fileId}
+				type='replace'
+			/>
+
+			<Button
+				onPress={() => onChange({ id: undefined, url: undefined })}
+				className='es:grow'
+				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,64 @@ 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 && (
+				</>
+			}
+			className={className}
+		>
+			{({ isDark, isTransparent }) => {
+				let buttonType = 'default';
+
+				if (!isTransparent) {
+					buttonType = isDark ? 'glass' : 'glassDark';
+				}
+
+				return (
+					<>
+						<MediaButton
+							type='replace'
+							onChange={onChange}
+							currentId={imageId}
+							allowedTypes={allowedTypes}
+							buttonProps={{
+								type: buttonType,
+								className: 'es:grow',
+							}}
+						/>
+
 						<Button
-							icon={icons.trash}
-							tooltip={__('Remove image', 'infobip')}
 							onPress={() => onChange({ id: undefined, url: undefined })}
-							type='danger'
-						/>
-					)}
-				</>
-			)}
-		</HStack>
+							className='es:grow'
+							type={buttonType}
+							hidden={noDelete}
+						>
+							{__('Remove', 'eightshift-frontend-libs-tailwind')}
+						</Button>
+					</>
+				);
+			}}
+		</FilePickerShell>
 	);
 };