@eightshift/frontend-libs-tailwind 1.4.8 → 2.0.0

package/CHANGELOG.md

@@ -6,6 +6,24 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 ---
 
+## [2.0.0]
+
+### Removed
+- All legacy built-in blocks.
+
+### Changed
+- Updated WordPress dependency extraction webpack plugin - React 19 is now supported!
+- Updated dependencies.
+
+## [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 +193,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
+[2.0.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.5.0...2.0.0
+[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": "2.0.0",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",
@@ -34,48 +34,41 @@
 	"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",
-		"@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",
+		"@eightshift/ui-components": "^3.0.0",
+		"@stylistic/eslint-plugin-js": "^4.2.0",
+		"@stylistic/stylelint-plugin": "^3.1.2",
+		"@swc/core": "^1.11.11",
+		"@wordpress/api-fetch": "^7.20.0",
+		"@wordpress/block-editor": "^14.15.0",
+		"@wordpress/dependency-extraction-webpack-plugin": "^6.20.0",
+		"@wordpress/dom-ready": "^4.20.0",
+		"@wordpress/server-side-render": "^5.20.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.3",
 		"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.16.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",
-		"webpack-manifest-plugin": "^5.0.0",
+		"terser-webpack-plugin": "^5.3.14",
+		"webpack": "^5.98.0",
+		"webpack-cli": "^6.0.1",
+		"webpack-manifest-plugin": "^5.0.1",
 		"webpack-merge": "^6.0.1"
 	},
 	"devDependencies": {
-		"embla-carousel": "^8.5.1",
-		"fluid-tailwind": "^1.0.4",
-		"lint-staged": "^15.2.11",
-		"micromodal": "^0.4.10",
-		"ol": "^10.3.1",
-		"ol-mapbox-style": "^12.4.0",
-		"tailwindcss": "^3.4.17",
-		"tailwindcss-animate": "^1.0.7"
+		"lint-staged": "^15.5.0"
 	},
 	"sideEffects": false,
 	"lint-staged": {

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/blocks/init/assets/application-admin.js

@@ -1,10 +0,0 @@
-/**
- * Main entry point for styles, scripts, and other assets used in the WordPress admin.
- * Does not apply to the Block editor!
- */
-
-// Styles.
-import './styles/application-admin.css';
-
-// Scripts.
-import './scripts/application-admin';

package/blocks/init/assets/application.js

@@ -1,13 +0,0 @@
-/**
- * Main entry point for styles, scripts, and other assets used in the site frontend.
- * Don't load Block editor-related assets here!
- */
-
-// Styles.
-import './styles/application.css';
-
-// Scripts.
-import './scripts/application';
-
-// Images.
-import './images';

package/blocks/init/assets/images/index.js

@@ -1,5 +0,0 @@
-/**
- * Main entry point for project images.
- *
- * Used in the WordPress admin, Block editor, and frontend.
- */

package/blocks/init/assets/scripts/application-admin.js

@@ -1,7 +0,0 @@
-/**
- * Main entry point for scripts used in the WordPress admin.
- */
-
-import { dynamicImport } from '@eightshift/frontend-libs-tailwind/scripts/helpers';
-
-dynamicImport(require.context('./../../src/Blocks/components', true, /assets-admin\/index\.js$/));

package/blocks/init/assets/scripts/application.js

@@ -1,3 +0,0 @@
-/**
- * Main entry point for scripts used in the site frontend.
- */

package/blocks/init/assets/scripts/theme-colors.js

@@ -1,39 +0,0 @@
-/**
- * Theme color definitions, used in the Tailwind configuration file and during registration.
- */
-
-import colors from 'tailwindcss/colors';
-
-export const themeColors = {
-	transparent: 'transparent',
-	current: 'currentColor',
-	black: colors.black,
-	white: colors.white,
-	gray: colors.stone,
-	navy: {
-		50: '#eef8ff',
-		100: '#dcf0ff',
-		200: '#b2e3ff',
-		300: '#6dceff',
-		400: '#20b5ff',
-		500: '#009cff',
-		600: '#007bdf',
-		700: '#0061b4',
-		800: '#005395',
-		900: '#00447a',
-		950: '#002c54',
-	},
-	red: {
-		50: '#fff0f2',
-		100: '#ffdde1',
-		200: '#ffc1c9',
-		300: '#ff95a3',
-		400: '#ff596f',
-		500: '#ff2643',
-		600: '#fc0626',
-		700: '#c5001a',
-		800: '#af051b',
-		900: '#900c1d',
-		950: '#50000b',
-	},
-};

package/blocks/init/assets/styles/application-admin.css

@@ -1,6 +0,0 @@
-/**
- * Main entry point for styles used in the WordPress admin.
- */
-
-@import '~@eightshift/ui-components/dist/assets/fonts.css';
-@import '~@eightshift/ui-components/dist/assets/style.css';

package/blocks/init/assets/styles/application.css

@@ -1,3 +0,0 @@
-/**
- * Main entry point for styles used in the site frontend.
- */

package/blocks/init/src/Blocks/assets/application-blocks-editor.js

@@ -1,14 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks used for the `WordPress admin editor`.
- * This file registers styles and scripts.
- *
- * Usage: `WordPress admin editor`.
- */
-
-// Styles.
-import './styles/tailwind.css';
-import './styles/application-blocks-editor.css';
-import './styles/editor/editor-overrides.css';
-
-// Scripts.
-import './scripts/application-blocks-editor';

package/blocks/init/src/Blocks/assets/application-blocks-frontend.js

@@ -1,13 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks used for the `WordPress frontend screen`.
- * This file registers styles and scripts.
- *
- * Usage: `WordPress frontend screen`.
- */
-
-// Styles.
-import './styles/tailwind.css';
-import './styles/application-blocks-frontend.css';
-
-// Scripts.
-import './scripts/application-blocks-frontend';

package/blocks/init/src/Blocks/assets/application-blocks.js

@@ -1,9 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks used for the `WordPress frontend screen` and `WordPress admin editor`.
- * This file registers styles and scripts.
- *
- * Usage: `WordPress frontend screen` and `WordPress admin editor`.
- */
-
-// Styles.
-import './styles/application-blocks.css';

package/blocks/init/src/Blocks/assets/scripts/application-blocks-editor.js

@@ -1,65 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks scripts used for the `WordPress admin editor`.
- * This file registers blocks dynamically using `registerBlocks` helper method.
- * File names must follow the naming convention to be able to run dynamically.
- *
- * `src/blocks/custom/block_name/manifest.json`.
- * `src/blocks/custom/block_name/block_name.js`.
- *
- * Usage: `WordPress admin editor`.
- */
-
-import domReady from '@wordpress/dom-ready';
-import { setDefaultBlockName } from '@wordpress/blocks';
-import { select } from '@wordpress/data';
-import { registerBlocks, registerVariations, STORE_NAME } from '@eightshift/frontend-libs-tailwind/scripts/editor';
-import { Wrapper } from '../../wrapper/wrapper';
-import WrapperManifest from '../../wrapper/manifest.json';
-import globalSettingsRaw from '../../manifest.json';
-import { themeColors } from '../../../../assets/scripts/theme-colors';
-import { getColorData } from '@eightshift/frontend-libs-tailwind/scripts/editor/colors';
-import { dynamicImport } from '@eightshift/frontend-libs-tailwind/scripts';
-
-const globalSettings = {
-	...globalSettingsRaw,
-	globalVariables: {
-		...globalSettingsRaw.globalVariables,
-		colors: getColorData(themeColors),
-	},
-};
-
-registerBlocks(
-	globalSettings,
-	Wrapper,
-	WrapperManifest,
-	require.context('./../../components', true, /manifest\.json$/),
-	require.context('./../../custom', true, /manifest\.json$/),
-	require.context('./../../custom', true, /-block.js$/),
-	require.context('./../../custom', true, /-hooks.js$/),
-	require.context('./../../custom', true, /-transforms.js$/),
-	require.context('./../../custom', true, /-deprecations.js$/),
-	require.context('./../../custom', true, /-overrides.js$/),
-);
-
-registerVariations(
-	globalSettings,
-	require.context('./../../variations', true, /manifest.json$/),
-	require.context('./../../custom', true, /manifest.json$/),
-	require.context('./../../variations', true, /overrides.json$/),
-);
-
-// Import styles.
-dynamicImport(require.context('./../../components', true, /styles.css$/));
-dynamicImport(require.context('./../../custom', true, /styles.css$/));
-dynamicImport(require.context('./../../wrapper', true, /styles.css$/));
-
-dynamicImport(require.context('./../../components', true, /styles-editor.css$/));
-dynamicImport(require.context('./../../custom', true, /styles-editor.css$/));
-dynamicImport(require.context('./../../wrapper', true, /styles-editor.css$/));
-
-// Change the default block to the custom paragraph.
-// If changing this block update the blocks filter method in Blocks.php.
-domReady(() => {
-	const namespace = select(STORE_NAME).getSettingsNamespace();
-	setDefaultBlockName(`${namespace}/paragraph`);
-});

package/blocks/init/src/Blocks/assets/scripts/application-blocks-frontend.js

@@ -1,24 +0,0 @@
-/**
- * This is the main entry point for Block Editor blocks scripts used for the `WordPress frontend screen`.
- * This file registers all blocks additional scripts dynamically using `dynamicImport` helper method.
- * File names must follow naming convention to be able run dynamically.
- *
- * `src/blocks/custom/block_name/assets/index.js`.
- *
- * Usage: `WordPress frontend screen`.
- */
-import { dynamicImport } from '@eightshift/frontend-libs-tailwind/scripts/helpers';
-
-// Find all blocks and require assets index.js inside it.
-dynamicImport(require.context('./../../components', true, /assets\/index\.js$/));
-dynamicImport(require.context('./../../custom', true, /assets\/index\.js$/));
-
-// Output all styles.
-dynamicImport(require.context('./../../components', true, /styles.css$/));
-dynamicImport(require.context('./../../custom', true, /styles.css$/));
-dynamicImport(require.context('./../../wrapper', true, /styles.css$/));
-
-// Output all frontend-only styles.
-dynamicImport(require.context('./../../components', true, /styles-frontend.css$/));
-dynamicImport(require.context('./../../custom', true, /styles-frontend.css$/));
-dynamicImport(require.context('./../../wrapper', true, /styles-frontend.css$/));