@eightshift/frontend-libs-tailwind 1.4.8 → 1.5.0

package/CHANGELOG.md

@@ -6,6 +6,15 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 ---
 
+## [1.5.0]
+
+### Added
+- Rive-related strings to `FilePicker`.
+
+### Changed
+- Updated dependencies.
+- Updated internal components to use ES UIC 2.x/3.x classnames.
+
 ## [1.4.8]
 
 ### Added
@@ -175,6 +184,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 - Initial release.
 
 [Unreleased]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/master...HEAD
+[1.5.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.8...1.5.0
 [1.4.8]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.7...1.4.8
 [1.4.7]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.6...1.4.7
 [1.4.6]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.5...1.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "1.4.8",
+	"version": "1.5.0",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",
@@ -34,47 +34,47 @@
 	"homepage": "https://github.com/infinum/eightshift-frontend-libs-tailwind#readme",
 	"license": "MIT",
 	"dependencies": {
-		"@eightshift/ui-components": "^1.9.1",
-		"@stylistic/eslint-plugin-js": "^2.12.1",
-		"@stylistic/stylelint-plugin": "^3.1.1",
-		"@swc/core": "^1.10.1",
-		"@wordpress/api-fetch": "^7.14.0",
-		"@wordpress/block-editor": "^14.9.0",
+		"@eightshift/ui-components": "^3.0.0",
+		"@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.14.0",
-		"@wordpress/server-side-render": "^5.14.0",
-		"browserslist": "^4.24.3",
+		"@wordpress/dom-ready": "^4.19.0",
+		"@wordpress/server-side-render": "^5.19.0",
+		"browserslist": "^4.24.4",
 		"css-loader": "^7.1.2",
-		"css-minimizer-webpack-plugin": "^7.0.0",
-		"eslint": "^9.17.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-prettier": "^5.2.1",
-		"globals": "^15.13.0",
+		"css-minimizer-webpack-plugin": "^7.0.2",
+		"eslint": "^9.22.0",
+		"eslint-config-prettier": "^10.1.1",
+		"eslint-plugin-prettier": "^5.2.3",
+		"globals": "^16.0.0",
 		"husky": "^9.1.7",
-		"lightningcss": "^1.28.2",
+		"lightningcss": "^1.29.2",
 		"mini-css-extract-plugin": "^2.9.2",
-		"postcss": "^8.4.49",
+		"postcss": "^8.5.3",
 		"postcss-loader": "^8.1.1",
-		"prettier": "^3.4.2",
-		"prettier-plugin-tailwindcss": "^0.6.9",
-		"sonner": "^1.7.1",
-		"stylelint": "^16.12.0",
-		"stylelint-config-standard": "^36.0.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",
 		"swc-loader": "^0.2.6",
-		"terser-webpack-plugin": "^5.3.11",
-		"webpack": "^5.97.1",
-		"webpack-cli": "^5.1.4",
+		"terser-webpack-plugin": "^5.3.14",
+		"webpack": "^5.98.0",
+		"webpack-cli": "^6.0.1",
 		"webpack-manifest-plugin": "^5.0.0",
 		"webpack-merge": "^6.0.1"
 	},
 	"devDependencies": {
-		"embla-carousel": "^8.5.1",
+		"embla-carousel": "^8.5.2",
 		"fluid-tailwind": "^1.0.4",
-		"lint-staged": "^15.2.11",
+		"lint-staged": "^15.4.3",
 		"micromodal": "^0.4.10",
-		"ol": "^10.3.1",
-		"ol-mapbox-style": "^12.4.0",
-		"tailwindcss": "^3.4.17",
+		"ol": "^10.4.0",
+		"ol-mapbox-style": "^12.5.0",
+		"tailwindcss": "^4.0.12",
 		"tailwindcss-animate": "^1.0.7"
 	},
 	"sideEffects": false,

package/scripts/components/block-inserter.js

@@ -72,7 +72,7 @@ export const BlockInserter = (props) => {
 						disabled={disabled}
 						icon={icons.add}
 						size={small ? 'small' : 'default'}
-						className={clsx(className, 'es-uic-font-sans')}
+						className={clsx(className, 'es:font-sans')}
 					>
 						{labelText}
 					</Button>

package/scripts/components/file-picker.js

@@ -123,6 +123,18 @@ export const ManageFileButton = (props) => {
 				replace: __('Select a new Lottie animation', 'eightshift-frontend-libs-tailwind'),
 			},
 		},
+		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'),
+				replace: __('Select a new Rive animation', 'eightshift-frontend-libs-tailwind'),
+			},
+		},
 		custom: {
 			buttonTooltip: labels?.buttonTooltip,
 			buttonLabel: labels?.buttonLabel,
@@ -174,7 +186,7 @@ export const ManageFileButton = (props) => {
  *
  * @returns {JSX.Element} The FileSelector component.
  *
- * @typedef {'file' | 'image' | 'video' | 'subtitle' | 'geoJson' | 'lottie' | 'custom'} FileKind
+ * @typedef {'file' | 'image' | 'video' | 'subtitle' | 'geoJson' | 'lottie' | 'rive' | 'custom'} FileKind
  *
  * @example
  * <FileSelector
@@ -202,6 +214,7 @@ export const FileSelector = (props) => {
 		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,
 	};
 
@@ -211,6 +224,7 @@ export const FileSelector = (props) => {
 		subtitle: icons.closedCaptions,
 		geoJson: icons.fileMetadata,
 		lottie: icons.animationFile,
+		rive: icons.animationFile,
 		custom: labels?.removeIcon,
 	};
 
@@ -222,7 +236,7 @@ export const FileSelector = (props) => {
 			>
 				<HStack
 					noWrap
-					className='es-uic-pl-1'
+					className='es:pl-1'
 				>
 					<ManageFileButton {...commonManageFileButtonProps} />
 					{!noUpload && (
@@ -236,7 +250,7 @@ export const FileSelector = (props) => {
 			</FilePlaceholder>
 
 			<AnimatedVisibility
-				visible={fileName}
+				visible={(fileName ?? '').length > 0}
 				noInitial
 			>
 				<HStack noWrap>

package/scripts/components/picker-placeholder.js

@@ -60,14 +60,14 @@ export const PickerPlaceholder = (props) => {
 	}
 
 	return (
-		<div className='es-uic-font-sans es-uic-border-gray-200 es-uic-mx-auto es-uic-grid es-uic-max-w-72 es-uic-grid-cols-2 es-uic-gap-1.5 es-uic-rounded-lg es-uic-border es-uic-p-3 es-uic-text-xs es-uic-shadow-lg'>
+		<div className='es:font-sans es:border-gray-200 es:mx-auto es:grid es:max-w-72 es:grid-cols-2 es:gap-1.5 es:rounded-lg es:border es:p-3 es:text-xs es:shadow-lg'>
 			<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-uic-col-span-2 es-uic-select-none es-uic-justify-self-center'>{presetsHeading}</span>
+			<span className='es:col-span-2 es:select-none es:justify-self-center'>{presetsHeading}</span>
 
 			{presets.map(({ name, icon, blocks: blockData, attributes: attrsToSet }, index) => {
 				return (
@@ -92,11 +92,9 @@ export const PickerPlaceholder = (props) => {
 
 			{inserter && (
 				<>
-					<span className='es-uic-col-span-2 es-uic-select-none es-uic-justify-self-center'>
-						{__('or', 'fe-libs-tailwind')}
-					</span>
+					<span className='es:col-span-2 es:select-none es:justify-self-center'>{__('or', 'fe-libs-tailwind')}</span>
 
-					<div className='es-uic-col-span-2 es-uic-justify-self-center'>
+					<div className='es:col-span-2 es:justify-self-center'>
 						{inserter}
 
 						{inserter === true && (

package/scripts/components/server-side-render.js

@@ -30,7 +30,7 @@ export const ServerSideRender = (props) => {
 			block={block}
 			attributes={attributes}
 			className={clsx(
-				'es-uic-pointer-events-none es-uic-rounded-lg es-uic-border es-uic-border-dotted es-uic-border-gray-300 es-uic-p-2 es-uic-flow-root',
+				'es:pointer-events-none es:rounded-lg es:border es:border-dotted es:border-gray-300 es:p-2 es:flow-root',
 				className,
 			)}
 		/>

package/scripts/components/settings/settings.js

@@ -2,10 +2,9 @@
 
 import { Toaster } from 'sonner';
 import { __ } from '@wordpress/i18n';
-import { Button, HStack } from '@eightshift/ui-components';
+import { Button, OptionsPanelHeader } from '@eightshift/ui-components';
 import { icons } from '@eightshift/ui-components/icons';
 import { createContext } from '@wordpress/element';
-import { clsx } from '@eightshift/ui-components/utilities';
 import { useThemeOptions } from './use-theme-options';
 
 export const EsThemeOptionsContext = createContext(null);
@@ -19,25 +18,27 @@ export const ThemeOptionsPage = ({
 	const { isLoading, saveSettings } = themeOptions;
 
 	return (
-		<EsThemeOptionsContext.Provider value={themeOptions}>
-			<Toaster richColors />
-			<div className={clsx('es-uic-space-y-4', isLoading && 'es-uic-pointer-events-none es-uic-opacity-60')}>
-				<HStack className='es-uic-justify-between'>
-					<h1>{title}</h1>
-
-					<Button
-						onPress={() => saveSettings()}
-						disabled={isLoading}
-						icon={isLoading ? icons.moreH : icons.save}
-					>
-						{isLoading
-							? __('Saving...', 'eightshift-frontend-libs-tailwind')
-							: __('Save', 'eightshift-frontend-libs-tailwind')}
-					</Button>
-				</HStack>
+		<>
+			<EsThemeOptionsContext.Provider value={themeOptions}>
+				<OptionsPanelHeader
+					title={title}
+					actions={
+						<Button
+							onPress={() => saveSettings()}
+							disabled={isLoading}
+							icon={isLoading ? icons.moreH : icons.save}
+						>
+							{isLoading
+								? __('Saving...', 'eightshift-frontend-libs-tailwind')
+								: __('Save', 'eightshift-frontend-libs-tailwind')}
+						</Button>
+					}
+				/>
 
 				{children}
-			</div>
-		</EsThemeOptionsContext.Provider>
+			</EsThemeOptionsContext.Provider>
+
+			<Toaster richColors />
+		</>
 	);
 };