Release 9.0.0 - Tailwind

.prettierrc

@@ -1,12 +1,12 @@
 {
-  "plugins": ["prettier-plugin-tailwindcss"],
-  "useTabs": true,
-  "jsxSingleQuote": true,
-  "singleQuote": true,
-  "singleAttributePerLine": true,
-  "printWidth": 180,
-  "arrowParens": "always",
-  "bracketSpacing": true,
-  "semi": true,
-  "trailingComma": "all"
+	"plugins": ["prettier-plugin-tailwindcss"],
+	"useTabs": true,
+	"jsxSingleQuote": true,
+	"singleQuote": true,
+	"singleAttributePerLine": true,
+	"printWidth": 120,
+	"arrowParens": "always",
+	"bracketSpacing": true,
+	"semi": true,
+	"trailingComma": "all"
 }

.stylelintrc

@@ -1,4 +1,4 @@
 {
-	"extends": "./node_modules/@eightshift/frontend-libs/linters/stylelint.config.js",
+	"extends": "./node_modules/@eightshift/frontend-libs-tailwind/linters/stylelint.config.js",
 	"ignoreFiles": "public/**/*.css"
 }

eslint.config.mjs

@@ -1,3 +1,3 @@
-import config from '@eightshift/frontend-libs/linters/eslint.config.mjs';
+import config from '@eightshift/frontend-libs-tailwind/linters/eslint.config.mjs';
 
 export default config;

package.json

@@ -20,7 +20,7 @@
 	},
 	"homepage": "https://github.com/infinum/eightshift-forms#readme",
 	"scripts": {
-		"lintStyle": "stylelint **/*.scss",
+		"lintStyle": "stylelint **/*.css",
 		"lintJs": "eslint src/",
 		"lint": "eslint",
 		"start": "webpack --watch --mode development",
@@ -40,15 +40,20 @@
 		"lint-staged": "^16.2.7"
 	},
 	"dependencies": {
-		"@eightshift/frontend-libs": "^12.1.9",
-		"@eightshift/ui-components": "^5.6.1",
+		"@eightshift/frontend-libs-tailwind": "^2.3.0",
+		"@eightshift/ui-components": "^6.0.6",
 		"autosize": "^6.0.1",
 		"baseline-browser-mapping": "^2.9.18",
 		"caniuse-lite": "^1.0.30001766",
 		"choices.js": "^11.1.0",
 		"dropzone": "^6.0.0-beta.2",
 		"flatpickr": "^4.6.13",
-		"reactflow": "^11.11.4"
+		"reactflow": "^11.11.4",
+		"@tailwindcss/postcss": "^4.1.17",
+		"@tailwindcss/typography": "^0.5.19",
+		"tailwindcss": "^4.1.17",
+		"tailwindcss-motion": "^1.1.1",
+		"tailwindcss-react-aria-components": "^2.0.1"
 	},
 	"lint-staged": {
 		"*.js": "eslint",

postcss.config.js

@@ -1,9 +1,5 @@
-/* eslint-disable import/no-extraneous-dependencies, global-require */
-
-const autoprefixer = require('autoprefixer');
-
 module.exports = {
-	plugins: [
-		autoprefixer,
-	],
+	plugins: {
+		'@tailwindcss/postcss': {},
+	},
 };

preprocess-tailwind.js

@@ -0,0 +1,74 @@
+const fs = require('fs');
+const glob = require('glob');
+
+// Make sure to change this in your project!
+const BREAKPOINTS = ['sm', 'md'];
+
+const JSON_GLOB_PATTERN = 'src/**/manifest.json'; // Recursively find all manifest.json files
+
+const OUTPUT_FILE = 'es-tw-responsive-classes.txt'; // A file Tailwind will scan
+
+let classes = new Set();
+
+const verbose = process.argv.includes('--verbose');
+
+const getAllClasses = (input) => {
+	return Object.values(input).forEach((value) => {
+		value.split(' ').forEach((cls) => {
+			// classes.add(cls);
+
+			BREAKPOINTS.forEach((bp) => {
+				classes.add(`${bp}:${cls}`);
+				classes.add(`max-${bp}:${cls}`);
+			});
+		});
+	});
+};
+
+function processJsonFile(jsonPath) {
+	const content = fs.readFileSync(jsonPath, 'utf-8');
+	const json = JSON.parse(content);
+
+	if (!json?.tailwind?.options) {
+		return '';
+	}
+
+	classes = new Set();
+
+	const responsiveOptions = Object.values(json?.tailwind?.options)?.filter((option) => option.responsive);
+
+	responsiveOptions.forEach(({ twClasses, twClassesEditor, twClassesEditorOnly }) => {
+		if (twClasses) {
+			getAllClasses(twClasses);
+		}
+
+		if (twClassesEditor) {
+			getAllClasses(twClassesEditor);
+		}
+
+		if (twClassesEditorOnly) {
+			getAllClasses(twClassesEditorOnly);
+		}
+	});
+
+	return [...classes].join(' ');
+}
+
+// Find all manifest.json files inside src/
+const manifestFiles = glob.sync(JSON_GLOB_PATTERN);
+
+// Using Set to avoid duplicates.
+const allClasses = new Set();
+
+// Process manifests.
+manifestFiles.forEach((filePath) => {
+	if (verbose) {
+		console.log(`├─ ${filePath}`);
+	}
+
+	processJsonFile(filePath)
+		.split(/\s+/)
+		.forEach((cls) => allClasses.add(cls));
+});
+
+fs.writeFileSync(OUTPUT_FILE, [...allClasses].join(' '));

src/Blocks/assets/application-admin-all.js

@@ -5,5 +5,9 @@
  * Usage: `WordPress admin all`.
  */
 
+import { dynamicImport } from '@eightshift/frontend-libs-tailwind/scripts/helpers';
+
 // Styles.
-import './styles/admin-all.scss';
+import './styles/admin-all.css';
+
+dynamicImport(require.context('./../components', true, /styles-admin-all\.css$/));

src/Blocks/assets/application-admin.js

@@ -5,8 +5,12 @@
  * Usage: `WordPress admin`.
  */
 
+import { dynamicImport } from '@eightshift/frontend-libs-tailwind/scripts/helpers';
+
 // Styles.
-import './styles/admin.scss';
+import './styles/admin.css';
+
+dynamicImport(require.context('./../components', true, /styles-admin\.css$/));
 
 // Scripts.
 import './scripts/admin';

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

@@ -5,11 +5,15 @@
  * Usage: `WordPress admin editor`.
  */
 
+import { dynamicImport } from '@eightshift/frontend-libs-tailwind/scripts';
+
 // Images.
 import './images/blocks-editor';
 
 // Styles.
-import './styles/blocks-editor.scss';
+import './styles/blocks-editor.css';
+
+dynamicImport(require.context('./../components', true, /styles-editor\.css$/));
 
 // Scripts.
 import './scripts/blocks-editor';

src/Blocks/assets/application-blocks-frontend-mandatory.js

@@ -9,4 +9,4 @@
 import './images/blocks-frontend-mandatory';
 
 // Styles.
-import './styles/blocks-frontend-mandatory.scss';
+import './styles/blocks-frontend-mandatory.css';

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

@@ -6,7 +6,7 @@
  */
 
 // Styles.
-import './styles/blocks-frontend.scss';
+import './styles/blocks-frontend.css';
 
 // Scripts.
 import './scripts/blocks-frontend';

src/Blocks/assets/scripts/admin.js

@@ -8,7 +8,12 @@
  * Usage: `WordPress admin `.
  */
 
- import { dynamicImport } from '@eightshift/frontend-libs/scripts/helpers';
+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-admin\/index\.js$/));
+dynamicImport(require.context('./../../custom', true, /assets-admin\/index\.js$/));
+
+// Output all frontend-only styles.
+dynamicImport(require.context('./../../components', true, /styles-admin.css$/));
+dynamicImport(require.context('./../../custom', true, /styles-admin.css$/));

src/Blocks/assets/scripts/blocks-editor.js

@@ -11,11 +11,10 @@
  */
 
 import { unregisterBlockType } from '@wordpress/blocks';
-import {
-	registerBlocks,
-	outputCssVariablesGlobal,
-} from '@eightshift/frontend-libs/scripts/editor';
+import { registerBlocks } from '@eightshift/frontend-libs-tailwind/scripts/editor';
+import { dynamicImport } from '@eightshift/frontend-libs-tailwind/scripts';
 import globalManifest from '../../manifest.json';
+import './editor-hooks';
 import './store';
 
 registerBlocks(
@@ -31,8 +30,9 @@ registerBlocks(
 	require.context('./../../custom', true, /-overrides.js$/),
 );
 
-// Output global css variables.
-outputCssVariablesGlobal();
+// Import styles.
+dynamicImport(require.context('./../../components', true, /styles-editor.css$/));
+dynamicImport(require.context('./../../custom', true, /styles-editor.css$/));
 
 if (esFormsLocalization?.currentPostType?.isForms) {
 	globalManifest?.unregisterBlocks?.forms?.forEach((block) => unregisterBlockType(block));
@@ -45,4 +45,3 @@ if (esFormsLocalization?.currentPostType?.isResults) {
 if (esFormsLocalization?.currentPostType?.isCommon) {
 	globalManifest?.unregisterBlocks?.common?.forEach((block) => unregisterBlockType(block));
 }
-

src/Blocks/assets/scripts/blocks-frontend.js

@@ -8,7 +8,15 @@
  * Usage: `WordPress frontend screen`.
  */
 
-import { dynamicImport } from '@eightshift/frontend-libs/scripts/helpers';
+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 frontend-only styles.
+dynamicImport(require.context('./../../components', true, /styles-frontend.css$/));
+dynamicImport(require.context('./../../custom', true, /styles-frontend.css$/));
+
+// Images.
+dynamicImport(require.context('./../images', true, /.svg$/));

src/Blocks/assets/scripts/editor-hooks.js

@@ -0,0 +1,109 @@
+/* global esFormsLocalization */
+
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { Field } from '../../custom/field/field-block';
+import formsManifest from '../../custom/forms/manifest.json';
+import manifestField from '../../components/field/manifest.json';
+import manifestConditionalTags from '../../components/conditional-tags/manifest.json';
+import globalManifest from '../../manifest.json';
+import { camelCase, clsx, upperFirst } from '@eightshift/ui-components/utilities';
+
+const { namespace, allowedBlocksList } = globalManifest;
+
+const onlyFields = [
+	...allowedBlocksList.formsCpt,
+	...allowedBlocksList.other,
+	...allowedBlocksList.fieldsIntegration,
+	...allowedBlocksList.fieldsWithChildren,
+	...allowedBlocksList.integrationsNoBuilder,
+	...allowedBlocksList.integrationsBuilder,
+];
+
+// Wrap none forms block with field block.
+const setNoneEightshiftFormsBlocksField = createHigherOrderComponent((BlockEdit) => {
+	return (innerProps) => {
+		const { name } = innerProps;
+
+		// Change only none forms blocks in forms post type.
+		if (esFormsLocalization?.currentPostType.isForms && !name.includes(esFormsLocalization?.postTypes?.forms)) {
+			return (
+				<Field {...innerProps}>
+					<BlockEdit {...innerProps} />
+				</Field>
+			);
+		}
+
+		// Return normal flow.
+		return <BlockEdit {...innerProps} />;
+	};
+}, 'setNoneEightshiftFormsBlocksField');
+
+// Add none forms block attributes from field block.
+function setNoneEightshiftBlocksFieldAttributes(settings, name) {
+	// Change only none forms blocks in forms post type.
+	if (esFormsLocalization?.currentPostType.isForms && !name.includes(esFormsLocalization?.postTypes?.forms)) {
+		return {
+			...settings,
+			attributes: {
+				...settings.attributes,
+				...manifestField.attributes,
+				...manifestConditionalTags.attributes,
+			},
+		};
+	}
+
+	return settings;
+}
+
+// Set editor block list block.
+const setEditorBlockListBlock = createHigherOrderComponent((BlockListBlock) => {
+	return (innerProps) => {
+		const { name, attributes, clientId } = innerProps;
+
+		if (esFormsLocalization?.currentPostType.isForms && !onlyFields.includes(name)) {
+			let key = `${attributes.blockName}${upperFirst(camelCase(attributes.blockName))}FieldWidthLarge`;
+
+			if (esFormsLocalization.additionalBlocks.includes(name)) {
+				key = 'fieldWidthLarge';
+			}
+
+			const fieldWidthLarge = attributes?.[key];
+
+			const componentClass = clsx(
+				fieldWidthLarge && `esf:col-span-${fieldWidthLarge}!`,
+				attributes.blockClass,
+				globalManifest.globalVariables.customBlocksName,
+			);
+
+			const updatedProps = {
+				...innerProps,
+				className: componentClass,
+			};
+
+			return <BlockListBlock {...updatedProps} />;
+		}
+
+		if (name === formsManifest.blockName) {
+			const componentClass = clsx(attributes.blockClass, globalManifest.globalVariables.customBlocksName);
+
+			const updatedProps = {
+				...innerProps,
+				className: componentClass,
+			};
+
+			return (
+				<BlockListBlock
+					{...updatedProps}
+					wrapperProps={{ 'data-id': clientId }}
+				/>
+			);
+		}
+
+		return <BlockListBlock {...innerProps} />;
+	};
+}, 'setEditorBlockListBlock');
+
+addFilter('editor.BlockEdit', namespace, setNoneEightshiftFormsBlocksField);
+addFilter('blocks.registerBlockType', namespace, setNoneEightshiftBlocksFieldAttributes);
+addFilter('editor.BlockListBlock', namespace, setEditorBlockListBlock);