@eightshift/frontend-libs-tailwind 2.2.0 → 2.4.0

package/linters/base.config.mjs

@@ -1,6 +1,6 @@
-// import react from 'eslint-plugin-react';
-// import reactHooks from 'eslint-plugin-react-hooks';
-import stylistic from '@stylistic/eslint-plugin-js';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import stylistic from '@stylistic/eslint-plugin';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import globals from 'globals';
 
@@ -23,9 +23,9 @@ export default [
 			},
 		},
 		plugins: {
-			// react,
-			// 'react-hooks': reactHooks,
-			'@stylistic/js': stylistic,
+			react,
+			'react-hooks': reactHooks,
+			'@stylistic': stylistic,
 		},
 		rules: {
 			'newline-before-return': 'error',
@@ -35,7 +35,7 @@ export default [
 			'no-nested-ternary': 'error',
 			'no-underscore-dangle': ['error', { allowAfterThis: true }],
 			'no-void': 'error',
-			'@stylistic/js/semi': 'error',
+			'@stylistic/semi': 'error',
 			'max-len': [
 				'error',
 				{
@@ -61,21 +61,20 @@ export default [
 				},
 			],
 			// React-specific.
-			// Note: React rules are temporarily disabled until the plugin gets full compatibility with ESLint 9.
-			// 'consistent-return': 'warn',
-			// 'no-param-reassign': 'warn',
-			// 'react-hooks/rules-of-hooks': 'error',
-			// // 'react-hooks/exhaustive-deps': ['error', { additionalHooks: '(useSafeLayoutEffect|useUpdateEffect)' }],
-			// 'react/prop-types': ['error', { skipUndeclared: true }],
-			// 'react/react-in-jsx-scope': 'off',
-			// 'react/self-closing-comp': ['warn', { component: true, html: true }],
-			// 'react/no-unknown-property': ['error', { ignore: ['css'] }],
+			'consistent-return': 'warn',
+			'no-param-reassign': 'warn',
+			'react-hooks/rules-of-hooks': 'error',
+			'react-hooks/exhaustive-deps': ['warn', { additionalHooks: '(useSafeLayoutEffect|useUpdateEffect)' }],
+			'react/prop-types': ['error', { skipUndeclared: true }],
+			'react/react-in-jsx-scope': 'off',
+			'react/self-closing-comp': ['warn', { component: true, html: true }],
+			'react/no-unknown-property': ['error', { ignore: ['css'] }],
+		},
+		settings: {
+			react: {
+				version: '18',
+			},
 		},
-		// settings: {
-		// 	react: {
-		// 		version: '18',
-		// 	},
-		// },
 	},
 	eslintPluginPrettierRecommended,
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "2.2.0",
+	"version": "2.4.0",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",
@@ -34,40 +34,42 @@
 	"homepage": "https://github.com/infinum/eightshift-frontend-libs-tailwind#readme",
 	"license": "MIT",
 	"dependencies": {
-		"@stylistic/eslint-plugin-js": "^4.4.1",
-		"@stylistic/stylelint-plugin": "^4.0.0",
-		"@swc/core": "^1.13.5",
-		"@wordpress/dependency-extraction-webpack-plugin": "^6.33.0",
-		"browserslist": "^4.26.3",
-		"css-loader": "^7.1.2",
-		"css-minimizer-webpack-plugin": "^7.0.2",
-		"eslint": "^9.38.0",
+		"@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",
+		"browserslist": "^4.28.1",
+		"css-loader": "^7.1.4",
+		"css-minimizer-webpack-plugin": "^7.0.4",
+		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-prettier": "^5.5.4",
-		"globals": "^16.4.0",
+		"eslint-plugin-prettier": "^5.5.5",
+		"globals": "^16.5.0",
 		"husky": "^9.1.7",
-		"lightningcss": "^1.30.2",
-		"mini-css-extract-plugin": "^2.9.4",
+		"lightningcss": "^1.31.1",
+		"mini-css-extract-plugin": "^2.10.0",
 		"postcss": "^8.5.6",
-		"postcss-loader": "^8.2.0",
-		"prettier": "^3.6.2",
-		"prettier-plugin-tailwindcss": "^0.7.1",
+		"postcss-loader": "^8.2.1",
+		"prettier": "^3.8.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
 		"sonner": "^2.0.7",
-		"stylelint": "^16.25.0",
+		"stylelint": "^16.26.1",
 		"stylelint-config-standard": "^39.0.1",
-		"swc-loader": "^0.2.6",
-		"terser-webpack-plugin": "^5.3.14",
-		"webpack": "^5.102.1",
+		"swc-loader": "^0.2.7",
+		"terser-webpack-plugin": "^5.3.16",
+		"webpack": "^5.105.2",
 		"webpack-cli": "^6.0.1",
-		"webpack-manifest-plugin": "^5.0.1",
-		"webpack-merge": "^6.0.1"
+		"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.5",
-		"@wordpress/api-fetch": "^7.33.0"
+		"lint-staged": "^16.2.7",
+		"@wordpress/api-fetch": "^7.39.0"
 	},
 	"peerDependencies": {
-		"@eightshift/ui-components": "^5.6.1"
+		"@eightshift/ui-components": "^6.1.0"
 	},
 	"sideEffects": false,
 	"lint-staged": {

package/scripts/components/media-picker.js

@@ -24,6 +24,7 @@ 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.
  *
@@ -37,7 +38,17 @@ const MediaButton = (props) => {
  *
  */
 export const MediaPicker = (props) => {
-	const { onChange, imageId, imageUrl, noDelete, noUpload, hidden, allowedTypes = ['image'], className } = props;
+	const {
+		onChange,
+		imageId,
+		imageUrl,
+		noDelete,
+		noUpload,
+		hidden,
+		allowedTypes = ['image'],
+		className,
+		__useSmartImageNext,
+	} = props;
 
 	if (hidden) {
 		return null;
@@ -63,6 +74,7 @@ export const MediaPicker = (props) => {
 				</>
 			}
 			className={className}
+			__useSmartImageNext={__useSmartImageNext}
 		>
 			{({ isDark, isTransparent }) => {
 				let buttonType = 'default';