@eightshift/frontend-libs-tailwind 1.0.0

package/scripts/editor/store.js

@@ -0,0 +1,213 @@
+import { register, createReduxStore, select, dispatch } from '@wordpress/data';
+
+// Store name defined by build version so we can have multiple themes and plugins.
+export const BUILD_VERSION = process.env.VERSION;
+export const STORE_NAME = `eightshift/${BUILD_VERSION}`;
+
+// Set default store state.
+const DEFAULT_STATE = {
+	blocks: {},
+	components: {},
+	config: {
+		useWrapper: true,
+	},
+	wrapper: {},
+	variations: {},
+	settings: {},
+	styles: [],
+	hasStylesUpdated: false,
+};
+
+// Define selectors - only getters.
+const selectors = {
+	getBlocks(state) {
+		return state.blocks;
+	},
+	getBlock(state, blockName) {
+		return state.blocks.find((block) => block.blockName === blockName);
+	},
+	getComponents(state) {
+		return state.components;
+	},
+	getComponent(state, componentName) {
+		return state.components.find((component) => component.componentName === componentName);
+	},
+	getVariations(state) {
+		return state.variations;
+	},
+	getVariation(state, name) {
+		return state.variations.find((variation) => variation.name === name);
+	},
+	getConfig(state) {
+		return state.config;
+	},
+	getConfigUseWrapper(state) {
+		return state.config.useWrapper;
+	},
+	getWrapper(state) {
+		return state.wrapper;
+	},
+	getSettings(state) {
+		return state.settings;
+	},
+	getSettingsNamespace(state) {
+		return state.settings.namespace;
+	},
+	getSettingsGlobalVariables(state) {
+		return state.settings.globalVariables;
+	},
+	getSettingsGlobalVariablesCustomBlockName(state) {
+		return state.settings.globalVariables.customBlocksName;
+	},
+	getSettingsGlobalVariablesBreakpoints(state) {
+		return state.settings.globalVariables.breakpoints;
+	},
+};
+
+// Define actions - getters and setters.
+const actions = {
+	setBlocks(blocks) {
+		return {
+			type: 'SET_BLOCKS',
+			blocks,
+		};
+	},
+	setComponents(components) {
+		return {
+			type: 'SET_COMPONENTS',
+			components,
+		};
+	},
+	setVariations(variations) {
+		return {
+			type: 'SET_VARIATIONS',
+			variations,
+		};
+	},
+	setConfigUseWrapper(config) {
+		return {
+			type: 'SET_CONFIG_USE_WRAPPER',
+			config,
+		};
+	},
+	setWrapper(wrapper) {
+		return {
+			type: 'SET_WRAPPER',
+			wrapper,
+		};
+	},
+	setSettings(settings) {
+		return {
+			type: 'SET_SETTINGS',
+			settings,
+		};
+	},
+	setSettingsGlobalVariablesBreakpoints(breakpoints) {
+		return {
+			type: 'SET_SETTINGS_GLOBAL_VARIABLES_BREAKPOINTS',
+			breakpoints,
+		};
+	},
+};
+
+// Define reducers - only setters.
+const reducer = (state = DEFAULT_STATE, action) => {
+	switch (action.type) {
+		case 'SET_BLOCKS': {
+			return {
+				...state,
+				blocks: action.blocks,
+			};
+		}
+		case 'SET_COMPONENTS': {
+			return {
+				...state,
+				components: action.components,
+			};
+		}
+		case 'SET_VARIATIONS': {
+			return {
+				...state,
+				variations: action.variations,
+			};
+		}
+		case 'SET_CONFIG_USE_WRAPPER': {
+			return {
+				...state,
+				config: {
+					...state.config,
+					useWrapper: action.config,
+				},
+			};
+		}
+		case 'SET_WRAPPER': {
+			return {
+				...state,
+				wrapper: action.wrapper,
+			};
+		}
+		case 'SET_SETTINGS': {
+			return {
+				...state,
+				settings: action.settings,
+			};
+		}
+		case 'SET_SETTINGS_GLOBAL_VARIABLES_BREAKPOINTS': {
+			return {
+				...state,
+				settings: {
+					...state.settings,
+					globalVariables: {
+						...state.settings.globalVariables,
+						breakpoints: action.breakpoints,
+					},
+				},
+			};
+		}
+		default: {
+			return state;
+		}
+	}
+};
+
+// Register the store.
+export const setStore = () => {
+	if (typeof window?.eightshift === 'undefined') {
+		window.eightshift = {};
+	}
+
+	register(
+		createReduxStore(STORE_NAME, {
+			selectors,
+			actions,
+			reducer,
+		}),
+	);
+};
+
+/**
+ * Set features config flag set in the global manifest settings.
+ *
+ * @access private
+ *
+ * @returns {void}
+ */
+export const setConfigFlags = () => {
+	const config = select(STORE_NAME).getSettings()?.config;
+
+	if (typeof config !== 'undefined') {
+		// useWrapper
+		if (typeof config?.useWrapper === 'boolean') {
+			dispatch(STORE_NAME).setConfigUseWrapper(config.useWrapper);
+		}
+	}
+};
+
+// Set global window data for easier debugging.
+export const setStoreGlobalWindow = () => {
+	if (typeof window?.eightshift?.store === 'undefined') {
+		window.eightshift.store = {};
+	}
+
+	window.eightshift.store[select(STORE_NAME).getSettingsNamespace()] = STORE_NAME;
+};

package/scripts/editor/tailwindcss.js

@@ -0,0 +1,224 @@
+import { checkAttr } from '../editor/attributes';
+import { clsx } from '@eightshift/ui-components/utilities';
+
+/**
+ * Gets Tailwind classes for the provided part.
+ *
+ * The part needs to be defined within the manifest, in the `tailwind` object.
+ *
+ * @param {string} attributes - Part name.
+ * @param {Object<string, mixed>} manifest - Component/block manifest.
+ * @param {...string?} custom - Custom classes to include in the ouptut.
+ *
+ * @returns {string} Output classes.
+ *
+ * @example
+ * const classes = getTwPart('intro', manifest);
+ *
+ * @example
+ * const classes = getTwPart('intro', manifest, 'p-4 bg-gray-100');
+ *
+ */
+export const getTwPart = (part, manifest, ...custom) => {
+	if (!part || !manifest || !manifest?.tailwind || Object.keys(manifest?.tailwind ?? {}).length === 0) {
+		return '';
+	}
+
+	const partClasses = manifest?.tailwind?.parts?.[part]?.twClassesEditor ?? manifest?.tailwind?.parts?.[part]?.twClasses ?? '';
+
+	return clsx(partClasses, ...custom);
+};
+
+/**
+ * Get Tailwind classes from attributes and manifest.
+ *
+ * @param {Object<string, mixed>} attributes - Current attribute value.
+ * @param {Object<string, mixed>} manifest - Component/block manifest.
+ * @param {...string?} custom - Custom classes to include in the ouptut.
+ *
+ * @returns {string} Output classes
+ *
+ * @example
+ * const classes = getTwClasses(attributes, manifest);
+ *
+ * @example
+ * const classes = getTwClasses(attributes, manifest, 'p-4 bg-gray-100');
+ *
+ */
+export const getTwClasses = (attributes, manifest, ...custom) => {
+	if (!attributes || !manifest || !manifest?.tailwind || Object.keys(manifest?.tailwind ?? {}).length === 0) {
+		return '';
+	}
+
+	const baseClasses = manifest?.tailwind?.base?.twClassesEditor ?? manifest?.tailwind?.base?.twClasses ?? '';
+
+	const mainClasses = Object.entries(manifest?.tailwind?.options ?? {}).reduce((current, [attributeName, { responsive, twClasses, twClassesEditor }]) => {
+		const value = checkAttr(attributeName, attributes, manifest, true);
+
+		if (!value) {
+			return current;
+		}
+
+		if (!responsive) {
+			return [...current, twClassesEditor?.[value] ?? twClasses?.[value]];
+		}
+
+		const responsiveClasses = Object.keys(value).reduce((curr, breakpoint) => {
+			if (breakpoint === '_desktopFirst') {
+				return curr;
+			}
+
+			const currentClasses = twClassesEditor?.[value[breakpoint]] ?? twClasses?.[value[breakpoint]];
+
+			if (breakpoint === '_default') {
+				return [...curr, currentClasses];
+			}
+
+			if (Array.isArray(currentClasses)) {
+				return [...curr, ...currentClasses.split(' ').map((currentClass) => `${breakpoint}:${currentClass}`)];
+			}
+
+			return [...curr, `${breakpoint}:${currentClasses}`];
+		}, []);
+
+		return [...current, ...responsiveClasses];
+	}, []);
+
+	const combinationClasses = manifest?.tailwind?.combinations?.reduce((current, { attributes: conditions, twClasses, twClassesEditor }) => {
+		const conditionKeys = Object.keys(conditions);
+
+		for (const key of conditionKeys) {
+			const value = checkAttr(key, attributes, manifest, true);
+
+			const isArrayCondition = Array.isArray(conditions[key]);
+
+			if (!value) {
+				return current;
+			} else if (isArrayCondition && !conditions[key].includes(value)) {
+				return current;
+			} else if (!isArrayCondition && value !== conditions[key]) {
+				return current;
+			}
+		}
+
+		return [...current, twClassesEditor ?? twClasses];
+	}, []) ?? [];
+
+	return clsx(baseClasses, ...mainClasses, ...combinationClasses, ...custom);
+};
+
+/**
+ * Custom transformer for JSON files. Required for processing responsive classes.
+ *
+ * @returns {Object} Custom transformation object for JSON.
+ *
+ * @example
+ * // Tailwind config
+ * module.exports = {
+ *   content: {
+ *     // ...
+ *     transform: processEightshiftClasses(breakpointNames),
+ *   },
+ * }
+ *
+ * @example
+ * // Tailwind config
+ * module.exports = {
+ *   content: {
+ *     // ...
+ *     transform: {
+ *       ...processEightshiftClasses(breakpointNames),
+ *       // Your transformations.
+ *     },
+ *   },
+ * }
+ *
+ */
+export const processEightshiftClasses = (breakpoints) => ({
+	// Make sure to include all the custom ES classes from JSON manifests.
+	json: (rawContent) => {
+		if (!(rawContent.includes('tailwind'))) {
+			return rawContent;
+		}
+
+		const content = JSON.parse(rawContent);
+
+		const results = Array.from(extractKeys(content));
+
+		const combinedResults = combineAndRemoveDuplicates(results);
+
+		for (let key in combinedResults) {
+			let combined = combinedResults[key].split(' ');
+			combined = [...new Set(combined)];
+			combinedResults[key] = combined.join(' ');
+		}
+
+		const responsiveVars = combinedResults?.responsive?.split(' ')?.map((cls) => {
+			return breakpoints.reduce((curr, breakpoint) => `${curr} ${breakpoint}:${cls} max-${breakpoint}:${cls}`, cls)
+		})?.join(' ') ?? '';
+
+		const nonResponsiveVars = combinedResults?.regular ?? '';
+
+		return `${nonResponsiveVars} ${responsiveVars}`.trim();
+	}
+});
+
+/**
+ * Converts global manifest breakpoints to Tailwind screen definitions.
+ *
+ * @param {Object<string, Number>} breakpointData - Breakpoint data from global manifest.
+ *
+ * @returns {Object} Tailwind screen definitions.
+ *
+ * @example
+ * // Tailwind config
+ * module.exports = {
+ *   // ...
+ *   theme: {
+ *     screens: getScreens(globalManifest.globalVariables.breakpoints),
+ *     // ...
+ *   },
+ * }
+ *
+ */
+export const getScreens = (breakpointData, unit = 'rem') => {
+	return Object.entries(breakpointData ?? []).reduce((acc, [key, value]) => ({
+		...acc,
+		[key]: `${value}${unit}`,
+	}), {});
+};
+
+export const generateOptionsFromValue = (value, getLabel = (v) => v) => {
+	return Object.entries(value).filter(([breakpoint]) => breakpoint !== '_desktopFirst').map(([breakpoint, innerValue]) => ({
+		value: innerValue,
+		label: getLabel(innerValue, breakpoint),
+	}));
+}
+
+// Utilities
+function* extractKeys(obj, parentKey = '', isResponsive = false) {
+	isResponsive = obj['responsive'] === true ? true : isResponsive;
+	let resultKey = isResponsive ? "responsive" : "regular";
+
+	for (let key in obj) {
+		let newKey = parentKey ? `${parentKey}.${key}` : key;
+		if (typeof obj[key] === 'object' && obj[key] !== null) {
+			yield* extractKeys(obj[key], newKey, isResponsive);
+		} else if (newKey.includes('twClasses')) {
+			if (typeof obj[key] === 'object') {
+				for (let subKey in obj[key]) {
+					yield {key: `${newKey}.${subKey}`, value: obj[key][subKey], responsive: resultKey};
+				}
+			} else {
+				yield {key: newKey, value: obj[key], responsive: resultKey};
+			}
+		}
+	}
+}
+
+const combineAndRemoveDuplicates = (results) => {
+	return results.reduce((acc, {key, value, responsive}) => {
+		acc[responsive] = acc[responsive] ? `${acc[responsive]} ${value}` : value;
+		return acc;
+	}, {});
+}

package/scripts/editor/utility.js

@@ -0,0 +1,47 @@
+/**
+ * Prepares the hidden option object from provided string, for use within the component.
+ *
+ * @param {Object} props - Component props.
+ *
+ * @returns {Object} Disabled component reference.
+ *
+ * @example
+ * // ButtonEditor
+ * <IconEditor hideOptions='size' />
+ *
+ * // IconEditor
+ * const hiddenOptions = getHiddenOptions(attributes.hideOptions);
+ *
+ * ...
+ *
+ * {!hiddenOptions.size && <MyOptionComponent />}
+ *
+ */
+export const getHiddenOptions = (options) => {
+	if (!options) {
+		return {};
+	}
+
+	return Object.fromEntries(options.split(',').map((item) => [item.trim(), true]));
+};
+
+/**
+ * Returns a unique ID, generally used with CSS variable generation.
+ *
+ * @access public
+ *
+ * @return {string}
+ *
+ * Usage:
+ * ```js
+ * getUnique();
+ * ```
+ *
+ * Output:
+ * ```js
+ * mg2shbh9
+ * ```
+ */
+export const getUnique = () => {
+	return (Math.random() + 1).toString(36).substring(4);
+};

package/scripts/helpers/breakpoints.js

@@ -0,0 +1,48 @@
+import { select } from '@wordpress/data';
+import { STORE_NAME } from '../editor/store';
+
+export const getGlobalManifest = () => select(STORE_NAME)?.getSettings();
+
+export const getBreakpointNames = () => {
+	const breakpoints = select(STORE_NAME)?.getSettings()?.globalVariables?.breakpoints;
+
+	return Object.entries(breakpoints)
+		.toSorted((a, b) => b[1] - a[1])
+		.map(([name]) => name).toReversed();
+};
+
+export const getBreakpointData = (convertToPx = false) => {
+	const breakpoints = select(STORE_NAME)?.getSettings()?.globalVariables?.breakpoints;
+
+	if (convertToPx) {
+		return Object.fromEntries(
+			Object.entries(breakpoints)
+				.map(([name, value]) => [
+					name,
+					value * 16,
+				])
+		);
+	}
+
+	return breakpoints;
+};
+
+export const getBreakpointUiData = () => select(STORE_NAME)?.getSettings()?.globalVariables?.breakpointData;
+
+export const getResponsiveData = (convertToPx = false) => {
+	const uiData = getBreakpointUiData();
+
+	const baseData = {
+		breakpoints: getBreakpointNames(),
+		breakpointData: getBreakpointData(convertToPx),
+	};
+
+	if (!uiData) {
+		return baseData;
+	}
+
+	return {
+		...baseData,
+		breakpointUiData: uiData,
+	};
+};

package/scripts/helpers/cookies.js

@@ -0,0 +1,65 @@
+/**
+ * Helper to set and unset cookies.
+ */
+export const cookies = {
+	/**
+	 * Set a cookie value
+	 *
+	 * @param {string} key   - Unique cookie key.
+	 * @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.
+	 *
+	 * @access public
+	 *
+	 * @returns {void}
+	 *
+	 * Usage:
+	 * ```js
+	 * cookies.setCookie('gdpr', '2', cookies.setOneDay(), '/');
+	 * ```
+	 */
+	setCookie(key, value, time, path) {
+		const expires = new Date();
+		expires.setTime(expires.getTime() + (time));
+		let pathValue = '';
+
+		if (typeof path !== 'undefined') {
+			pathValue = `path=${path};`;
+		}
+
+		document.cookie = `${key}=${value};${pathValue}expires=${expires.toUTCString()}`;
+	},
+
+	/**
+	 * Get a cookie
+	 *
+	 * @param {string} key Unique cookie key.
+	 *
+	 * @return Cookie value or null if the cookie doesn't exist.
+	 *
+	 * Usage:
+	 * ```js
+	 * cookies.getCookie('gdpr');
+	 * ```
+	 */
+	getCookie(key) {
+		const keyValue = document.cookie.match(`(^|;) ?${key}=([^;]*)(;|$)`);
+		return keyValue ? keyValue[2] : null;
+	},
+	setHalfDay() {
+		return 43200000;
+	},
+	setOneDay() {
+		return 86400000;
+	},
+	setOneYear() {
+		return 31540000000;
+	},
+	setHalfAnHour() {
+		return 1800000;
+	},
+	setOneMonth() {
+		return 2628000000;
+	},
+};

package/scripts/helpers/dynamic-import.js

@@ -0,0 +1,19 @@
+/**
+ * Loop all paths required using require.context method.
+ * Used to get (require) all the files using the `require.context` method.
+ * It will find all files recursively in the folder using a regex.
+ *
+ * @param {object} paths - All `require.context` paths to iterate.
+ *
+ * @access public
+ *
+ * @returns {void}
+ *
+ * Usage:
+ * ```js
+ * dynamicImport(require.context('./../../custom', true, /assets\/index.js$/));
+ * ```
+ */
+export function dynamicImport(paths) {
+	paths.keys().forEach(paths);
+}

package/scripts/helpers/index.js

@@ -0,0 +1,11 @@
+// All exports are sorted in alphabetical order.
+
+export {
+	getBreakpointData,
+	getBreakpointNames,
+	getGlobalManifest,
+	getBreakpointUiData,
+	getResponsiveData,
+} from './breakpoints';
+export { cookies } from './cookies';
+export { dynamicImport } from './dynamic-import';

package/scripts/index.js

@@ -0,0 +1,22 @@
+// Components.
+export { BlockInserter } from './components/block-inserter';
+export { ManageFileButton, FileSelector } from './components/file-picker';
+export { MediaPicker } from './components/media-picker';
+export { ServerSideRender } from './components/server-side-render';
+export { ThemeOptionsPage, EsThemeOptionsContext } from './components/settings/settings';
+
+// Editor.
+export * from './editor/attributes';
+export * from './editor/colors';
+export * from './editor/editor';
+export * from './editor/fetch';
+export * from './editor/options';
+export * from './editor/utility';
+export * from './editor/tailwindcss';
+export { getAttributes, getExample, getFullBlockName, getFullBlockNameVariation, registerBlocks, registerVariations } from './editor/registration';
+export { STORE_NAME, BUILD_VERSION, setStore, setStoreGlobalWindow, setConfigFlags } from './editor/store';
+
+// Helpers.
+export { getBreakpointData, getBreakpointNames, getGlobalManifest, getBreakpointUiData, getResponsiveData } from './helpers/breakpoints';
+export { cookies } from './helpers/cookies';
+export { dynamicImport } from './helpers/dynamic-import';

package/scripts/plugins/index.js

@@ -0,0 +1,3 @@
+// All exports are sorted in alphabetical order.
+
+export { yoastSeo } from './yoast-seo';