@eightshift/frontend-libs-tailwind 1.4.7 → 1.5.0

package/CHANGELOG.md

@@ -6,6 +6,21 @@ 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
+
+- `domain parameter` to setCookie function.
+
 ## [1.4.7]
 
 ### Changed
@@ -169,6 +184,8 @@ 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
 [1.4.5]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.4...1.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "1.4.7",
+	"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 />
+		</>
 	);
 };

package/scripts/helpers/cookies.js

@@ -2,6 +2,7 @@
  * Helper to set and unset cookies.
  */
 export const cookies = {
+
 	/**
 	 * Set a cookie value
 	 *
@@ -9,7 +10,7 @@ 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.
 	 * @access public
 	 *
 	 * @returns {void}
@@ -19,16 +20,22 @@ export const cookies = {
 	 * cookies.setCookie('gdpr', '2', cookies.setOneDay(), '/');
 	 * ```
 	 */
-	setCookie(key, value, time, path) {
+	setCookie(key, value, time, path, domain) {
 		const expires = new Date();
-		expires.setTime(expires.getTime() + time);
+		expires.setTime(expires.getTime() + (time));
+		
 		let pathValue = '';
+		let domainValue = '';
 
 		if (typeof path !== 'undefined') {
-			pathValue = `path=${path};`;
+			pathValue = `;path=${path}`;
+		}
+
+		if (typeof domain !== 'undefined') {
+			domainValue = `;domain=${domain}`;
 		}
 
-		document.cookie = `${key}=${value};${pathValue}expires=${expires.toUTCString()}`;
+		document.cookie = `${key}=${value}${pathValue}${domainValue};expires=${expires.toUTCString()}`;
 	},
 
 	/**