@total_onion/onion-library 3.1.0 → 3.2.0

package/index.js

@@ -0,0 +1,10 @@
+import VideoController from './onion-videocontroller/onion-videocontroller.js';
+import ModalController from './onion-modalcontroller/onion-modalcontroller.js';
+export * from './onion-utils.mjs';
+export * from './entry-animation-observer.js';
+
+export default VideoController;
+export { VideoController, ModalController };
+export { default as modalController } from './onion-modalcontroller/onion-modalcontroller.js';
+export { default as videoController } from './onion-videocontroller/onion-videocontroller.js';
+export { default as onionLoader } from './onion-loader.js';

package/onion-loader.js

@@ -52,27 +52,35 @@ function lazyloaderInit() {
 	options.debugLogMessages && console.log('Lazy Loader initialized!');
 	options.lazyBlocksToSearchFor = [];
 	assetArray.forEach((asset) => {
-		if (
-			options.filePrefix === 'nodemodules' &&
-			asset.assetKey.includes('-v3')
-		) {
+		// if (
+		// 	asset.assetKey.includes('-v3') &&
+		// 	!asset.assetKey.includes('sub-block')
+		// ) {
+		// 	options.assetMap[asset.assetKey] = {
+		// 		js: () =>
+		// 			import(
+		// 				`Assets/blocks/${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
+		// 			),
+		// 		// import(
+		// 		// 	`NodeModules/@total_onion/onion-library/components/block-${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
+		// 		// ),
+		// 		css: options.ignoreCss === true
+		// 	};
+		// }
+		if (asset.assetKey.includes('-v3')) {
 			options.assetMap[asset.assetKey] = {
 				js: () =>
 					import(
-						`NodeModules/@total_onion/onion-library/components/block-${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
+						`Assets/sub-blocks/${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
 					),
-				css: options.ignoreCss === true
+				css: options.ignoreCss === false
 			};
-		} else {
 		}
-		if (
-			options.filePrefix === 'nodemodules' &&
-			!asset.assetKey.includes('-v3')
-		) {
+		if (!asset.assetKey.includes('-v3')) {
 			options.assetMap[asset.assetKey] = {
 				js: () =>
 					import(
-						`Assets/js/blocks/${asset.assetKey}${options.fileSuffixJs}`
+						`Assets/blocks/${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
 					),
 				css: options.ignoreCss === false
 			};
@@ -236,7 +244,7 @@ export function loadCss(assetKey) {
 				assetKey.includes('-v3')
 			) {
 				import(
-					/* webpackChunkName: "[request]" */ `NodeModules/@total_onion/onion-library/components/block-${assetKey}/${assetKey}${options.fileSuffixCss}`
+					/* webpackChunkName: "[request]" */ `Assets/sub-blocks/${assetKey}/${assetKey}${options.fileSuffixCss}`
 				).then(() => resolve(true));
 			} else if (
 				options.css === true &&
@@ -244,7 +252,7 @@ export function loadCss(assetKey) {
 				!assetKey.includes('-v3')
 			) {
 				import(
-					/* webpackChunkName: "[request]" */ `Assets/scss/blocks/${assetKey}${options.fileSuffixCss}`
+					/* webpackChunkName: "[request]" */ `Assets/blocks/${assetKey}/${assetKey}${options.fileSuffixCss}`
 				).then(() => resolve(true));
 			} else {
 				return resolve(true);

package/onion-utils.mjs

@@ -88,24 +88,24 @@ export function inCriticalCssConfig(assetKey) {
 	return true;
 }
 
-/**
- * Dynamically loads the css for the block if it has not already been included in critical css or the css property is set to false.
- * @param {string} assetKey The assetkey string of the block.
- * @param {object} options The options object which will at the very least contain the css property set to true.
- * @returns {promise}
- */
-export function loadCss(assetKey, options = { css: true }) {
-	const promise = new Promise((resolve) => {
-		if (options.css === true && !inCriticalCssConfig(assetKey)) {
-			import(
-				/* webpackChunkName: "[request]" */ `Assets/scss/blocks/${assetKey}.scss`
-			).then(() => resolve(true));
-		} else {
-			return resolve(true);
-		}
-	});
-	return promise;
-}
+// /**
+//  * Dynamically loads the css for the block if it has not already been included in critical css or the css property is set to false.
+//  * @param {string} assetKey The assetkey string of the block.
+//  * @param {object} options The options object which will at the very least contain the css property set to true.
+//  * @returns {promise}
+//  */
+// export function loadCss(assetKey, options = { css: true }) {
+// 	const promise = new Promise((resolve) => {
+// 		if (options.css === true && !inCriticalCssConfig(assetKey)) {
+// 			import(
+// 				/* webpackChunkName: "[request]" */ `Assets/scss/blocks/${assetKey}.scss`
+// 			).then(() => resolve(true));
+// 		} else {
+// 			return resolve(true);
+// 		}
+// 	});
+// 	return promise;
+// }
 
 /**
  * Checks for browser, device and OS and then adds the relevant classes to the html tag.
@@ -680,7 +680,6 @@ const api = {
 	isEmailValid,
 	isInViewport,
 	isTablet,
-	loadCss,
 	mobileCheck,
 	resizeDebouncer,
 	supportsWebp,

package/package.json

@@ -1,8 +1,31 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "3.1.0",
+	"version": "3.2.0",
 	"description": "Component library",
-	"main": "index.js",
+	"type": "module",
+	"main": "./index.js",
+	"module": "./index.js",
+	"exports": {
+		".": "./index.js",
+		"./onion-utils": "./onion-utils.mjs",
+		"./onion-utils.mjs": "./onion-utils.mjs",
+		"./onion-loader": "./onion-loader.js",
+		"./onion-loader.js": "./onion-loader.js",
+		"./entry-animation-observer": "./entry-animation-observer.js",
+		"./entry-animation-observer.js": "./entry-animation-observer.js",
+		"./onion-videocontroller": "./onion-videocontroller/onion-videocontroller.js",
+		"./onion-videocontroller.js": "./onion-videocontroller/onion-videocontroller.js",
+		"./onion-modalcontroller": "./onion-modalcontroller/onion-modalcontroller.js",
+		"./onion-modalcontroller.js": "./onion-modalcontroller/onion-modalcontroller.js"
+	},
+	"files": [
+		"index.js",
+		"onion-utils.mjs",
+		"onion-loader.js",
+		"entry-animation-observer.js",
+		"onion-videocontroller",
+		"onion-modalcontroller"
+	],
 	"scripts": {
 		"build": "node build-library.js",
 		"test": ""
@@ -18,8 +41,7 @@
 	},
 	"homepage": "https://github.com/TotalOnion/onion-library#readme",
 	"dependencies": {
-		"lottie-web": "^5.13.0",
-		"swiper": "^14.1.0"
+		"@vimeo/player": "^2.26.0"
 	},
 	"devDependencies": {
 		"autoprefixer": "^10.4.27",
@@ -36,6 +58,8 @@
 		"postcss-preset-env": "^11.2.0",
 		"prettier": "^2.6.2",
 		"url-loader": "^4.1.1",
-		"yargs": "^17.4.1"
+		"yargs": "^17.4.1",
+		"lottie-web": "^5.13.0",
+		"swiper": "^14.1.0"
 	}
 }

package/.github/workflows/npm-publish.yml

@@ -1,38 +0,0 @@
-# This workflow will run tests using node and then publish a package to NPM when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: Node.js Package
-
-on:
-  release:
-    types: [published]
-    branches:
-      - master
-permissions:
-  id-token: write  # Required for OIDC
-  contents: read
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 24
-      # Ensure npm 11.5.1 or later is installed
-      - name: Update npm
-        run: npm install -g npm@latest
-      - run: npm ci
-
-
-  publish:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 24
-          registry-url: https://registry.npmjs.org/
-      - run: npm publish

package/.prettierrc

@@ -1,22 +0,0 @@
-{
-	"useTabs": true,
-	"overrides": [
-		{
-			"files": "*.test.js",
-			"options": {
-				"semi": true
-			}
-		},
-		{
-			"files": ["*.js", "*.css", "*.scss"],
-			"options": {
-				"useTabs": true,
-				"semi": true,
-				"singleQuote": true,
-				"trailingComma": "none",
-				"tabWidth": 4,
-				"bracketSpacing": false
-			}
-		}
-	]
-}

package/__spec__/copyBlockComponent.spec.js

@@ -1,94 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const { promisify } = require('util');
-
-// Import the function to be tested
-const updateComponent = require('../update-component');
-
-// Promisify the fs functions used in the copyBlockComponent function
-const readdirPromisified = promisify(fs.readdir);
-const accessPromisified = promisify(fs.access);
-
-// Create a utility function to remove the file (used after each test)
-const removeFile = async (filePath) => {
-	try {
-		await fs.promises.unlink(filePath);
-	} catch (err) {
-		// If the file doesn't exist, ignore the error
-		if (err.code !== 'ENOENT') {
-			console.error('Error removing the file:', err);
-		}
-	}
-};
-
-xdescribe('copyBlockComponent function', () => {
-	const libraryPath = 'testFiles/library'; // Assuming the libraryPath is defined for the tests
-	const componentName = 'TestComponent';
-
-	// Before each test, create the source directory with some test files
-	beforeEach(async () => {
-		try {
-			const sourceDir = path.join(libraryPath, 'components', componentName);
-			await fs.promises.mkdir(sourceDir, { recursive: true });
-			await fs.promises.writeFile(path.join(sourceDir, 'TestComponent.php'), 'Test PHP content');
-			await fs.promises.writeFile(path.join(sourceDir, 'TestComponent.js'), 'Test JS content');
-			await fs.promises.writeFile(path.join(sourceDir, 'TestComponent.scss'), 'Test SCSS content');
-			await fs.promises.writeFile(path.join(sourceDir, 'TestComponent.json'), 'Test JSON content');
-			await fs.promises.writeFile(path.join(sourceDir, 'TestComponent.twig'), 'Test Twig content');
-			await fs.promises.writeFile(path.join(sourceDir, 'TestComponent.vue'), 'Test Vue content');
-			await fs.promises.writeFile(path.join(sourceDir, 'TestComponent.extra'), 'Test Extra content');
-			await fs.promises.writeFile(path.join(sourceDir, 'TestComponent.spec'), 'Test Spec content');
-		} catch (err) {
-			console.error('Error creating the source directory:', err);
-		}
-	});
-
-	// After each test, remove the source and destination files
-	afterEach(async () => {
-		try {
-			const sourceDir = path.join(libraryPath, 'components', componentName);
-			await fs.promises.rmdir(sourceDir, { recursive: true });
-			await removeFile('./inc/acf-blocks/TestComponent.php');
-			await removeFile('./assets/js/blocks/TestComponent.js');
-			await removeFile('./assets/scss/blocks/TestComponent.scss');
-			await removeFile('./acf-json/TestComponent.json');
-			await removeFile('./views/blocks/TestComponent.twig');
-			await removeFile('./assets/vue/blocks/TestComponent.vue');
-			await removeFile('./assets/scss/blocks/TestComponent/TestComponent.extra');
-		} catch (err) {
-			console.error('Error cleaning up the test files:', err);
-		}
-	});
-
-	it('should copy files from source to destination based on the file types', async () => {
-		// Call the function to be tested
-		await updateComponent.copyBlockComponent(componentName);
-
-		// Assert that the destination files exist for each file type
-		const destinationFiles = [
-			'./inc/acf-blocks/TestComponent.php',
-			'./assets/js/blocks/TestComponent.js',
-			'./assets/scss/blocks/TestComponent.scss',
-			'./acf-json/TestComponent.json',
-			'./views/blocks/TestComponent.twig',
-			'./assets/vue/blocks/TestComponent.vue',
-			'./assets/scss/blocks/TestComponent/TestComponent.extra',
-		];
-
-		for (const filePath of destinationFiles) {
-			const fileExists = await accessPromisified(filePath)
-				.then(() => true)
-				.catch(() => false);
-				expect(fileExists).toBe(true);
-		}
-
-		// Assert that the destination files contain the same content as the source files
-		const sourceDir = path.join(libraryPath, 'components', componentName);
-		const fileTypes = ['php', 'js', 'scss', 'json', 'twig', 'vue', 'extra'];
-		for (const fileType of fileTypes) {
-			const sourceContent = await fs.promises.readFile(path.join(sourceDir, `TestComponent.${fileType}`), 'utf-8');
-			const destinationContent = await fs.promises.readFile(path.join(`./${fileType === 'extra' ? 'assets/scss/blocks/TestComponent' : fileType}s/TestComponent.${fileType}`), 'utf-8');
-			expect(destinationContent).toBe(sourceContent);
-		}
-	});
-});

package/__spec__/copyFile.spec.js

@@ -1,78 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const updateComponent = require('../update-component');
-
-
-describe('copyFile function', () => {
-	const sourceFilePath = './__spec__/files/source.txt';
-	const destinationFilePath = './__spec__/files/destination.txt';
-
-	// Helper function to delete a file if it exists
-	const deleteFileIfExists = (filePath) => {
-		if (fs.existsSync(filePath)) {
-			fs.unlinkSync(destinationFilePath);
-		}
-	};
-
-	beforeEach(() => {
-		deleteFileIfExists(destinationFilePath);
-		jest.resetModules();
-		jest.clearAllMocks();
-	});
-	afterEach(() => {
-		deleteFileIfExists(destinationFilePath);
-	});
-
-
-	// Test case 1: Ensure the file is copied when destination does not exists
-	test('copies file if it does not exist', async () => {
-		await updateComponent.copyFile(sourceFilePath, destinationFilePath);
-
-		// Wait for a short delay to allow the asynchronous operation to complete
-		await new Promise((resolve) => setTimeout(resolve, 150)); // Adjust the delay time as needed
-
-		expect(fs.existsSync(destinationFilePath)).toBe(true);
-	});
-
-	// Test case 2: Ensure the file is copied even if the destination exists
-	test('overwrite file when destination file already exists', async () => {
-		// Create a dummy destination file to simulate an existing file
-		fs.writeFileSync(destinationFilePath, 'Dummy content Newer');
-
-		await updateComponent.copyFile(sourceFilePath, destinationFilePath);
-		// Wait for a short delay to allow the asynchronous operation to complete
-		await new Promise((resolve) => setTimeout(resolve, 50)); // Adjust the delay time as needed
-
-		// Assert that the destination file still exists after the function call
-		expect(fs.existsSync(destinationFilePath)).toBe(true);
-
-		// get file content
-		const destinationContent = fs.readFileSync(destinationFilePath, 'utf8');
-
-		// content should be 
-		expect(destinationContent).toBe('Dummy content');
-	});
-
-	// Test case 3: Ensure the function handles errors properly
-	test('handles errors when copying the file', async () => {
-		// Create a dummy destination file to simulate an existing file
-		// fs.writeFileSync(destinationFilePath, 'Dummy content');
-		const sourceFilePath = './__spec__/nonexistent_source.txt';
-
-		// Ensure that console.error is called with the error message
-		const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-		
-		await updateComponent.copyFileKeeping(sourceFilePath, destinationFilePath);
-		// Wait for a short delay to allow the asynchronous operation to complete
-		await new Promise((resolve) => setTimeout(resolve, 50)); // Adjust the delay time as needed
-
-		// Assert that console.error was called with the expected error message
-		expect(consoleErrorSpy).toHaveBeenCalled();
-
-		// Restore the original console.error function
-		consoleErrorSpy.mockRestore();
-	});
-
-});

package/__spec__/copyFileKeeping.spec.js

@@ -1,74 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-// const path = require('path');
-const updateComponent = require('../update-component');
-
-describe('copyFileKeeping', () => {
-	const sourceFilePath = './__spec__/files/source.txt';
-	const destinationFilePath = './__spec__/files/destination.txt';
-
-	// Helper function to delete a file if it exists
-	const deleteFileIfExists = (filePath) => {
-		if (fs.existsSync(filePath)) {
-			fs.unlinkSync(destinationFilePath);
-		}
-	};
-
-	beforeEach(() => {
-		deleteFileIfExists(destinationFilePath);
-		jest.resetModules();
-		jest.clearAllMocks();
-	});
-	afterEach(() => {
-		deleteFileIfExists(destinationFilePath);
-	});
-
-	// Test case 1: Ensure the file is copied when destination does not exists
-	test('copies file if it does not exist', async () => {
-		await updateComponent.copyFileKeeping(sourceFilePath, destinationFilePath);
-
-		// Wait for a short delay to allow the asynchronous operation to complete
-		await new Promise((resolve) => setTimeout(resolve, 50)); // Adjust the delay time as needed
-
-		expect(fs.existsSync(destinationFilePath)).toBe(true);
-	});
-
-	// Test case 2: Ensure the file is NOT copied when destination exists
-	test('copies file when destination file already exists', async () => {
-		// Create a dummy destination file to simulate an existing file
-		fs.writeFileSync(destinationFilePath, 'Dummy content Newer');
-
-		await updateComponent.copyFileKeeping(sourceFilePath, destinationFilePath);
-		// Wait for a short delay to allow the asynchronous operation to complete
-		await new Promise((resolve) => setTimeout(resolve, 50)); // Adjust the delay time as needed
-
-		// Assert that the destination file still exists after the function call
-		expect(fs.existsSync(destinationFilePath)).toBe(true);
-
-		// get file content
-		const destinationContent = fs.readFileSync(destinationFilePath, 'utf8');
-
-		expect(destinationContent).toBe('Dummy content Newer');
-	});
-
-	// Test case 3: Ensure the function handles errors properly
-	test('handles errors when copying the file', async () => {
-		// Create a dummy destination file to simulate an existing file
-		// fs.writeFileSync(destinationFilePath, 'Dummy content');
-		const sourceFilePath = './__spec__/nonexistent_source.txt';
-
-		// Ensure that console.error is called with the error message
-		const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-		
-		await updateComponent.copyFileKeeping(sourceFilePath, destinationFilePath);
-		// Wait for a short delay to allow the asynchronous operation to complete
-		await new Promise((resolve) => setTimeout(resolve, 50)); // Adjust the delay time as needed
-
-		// Assert that console.error was called with the expected error message
-		expect(consoleErrorSpy).toHaveBeenCalled();
-
-		// Restore the original console.error function
-		consoleErrorSpy.mockRestore();
-	});
-});

package/__spec__/files/source.txt

@@ -1 +0,0 @@
-Dummy content

package/__spec__/update-all-components.spec.js

@@ -1,99 +0,0 @@
-'use strict';
-
-const glob = require('glob');
-const fs = jest.mock('fs');
-const updateAllComponents = require('../update-all-components');
-
-describe('getComponentsList', () => {
-	afterEach(() => {
-		jest.resetModules(); // Reset all mocked modules after each test
-	});
-
-	it('returns the correct components list when project-components-list.json is found', () => {
-		const projectComponentsList = {
-			"block": [
-				"accordion",
-				"standard-content-v2"
-			],
-			"fields": [
-				"video-standard",
-				"responsive-show-hide"
-			],
-			"admin": [
-				"filter-pages-by-block",
-				"resizable-editor-sidebar"
-			]
-		};
-
-		jest.mock('fs', () => ({
-			existsSync: jest.fn().mockReturnValue(true),
-			readFileSync: jest
-				.fn()
-				.mockReturnValue(JSON.stringify(projectComponentsList)),
-		}));
-
-		const result = updateAllComponents.getComponentsList();
-
-		// random order
-		result.map(m => expect([
-			"block-accordion",
-			"block-standard-content-v2",
-
-			"admin-core-mixins",
-			"admin-core-design-system",
-			"admin-core-generic",
-			"admin-core-critical",
-			"admin-core-functions",
-
-			"admin-filter-pages-by-block",
-			"admin-resizable-editor-sidebar",
-			"fields-video-standard",
-			"fields-responsive-show-hide",
-
-			"admin-core-cta",
-			"admin-core-root-variables",
-			"admin-core-css-sizing-vars",
-			"admin-core-colour-data-config",
-			"admin-core-wordpress-block-editor-preview",
-			"admin-core-editor-cta-style-select",
-			"admin-core-gradient-designer",
-			"admin-core-typography",
-		]).toContain(m));
-	});
-
-	it('returns the correct components list when project-components-list.json is not found', () => {
-		jest.mock('fs', () => ({
-			existsSync: jest.fn().mockReturnValue(false), // Simulate 'project-components-list.json' not existing
-		}));
-
-		jest.mock('glob', () => ({
-			// mock components in the filesystem
-			sync: jest.fn().mockReturnValue([
-				`./node_modules/@pernod-ricard-global-cms/cbl-component-library/components/component1`,
-				`./node_modules/@pernod-ricard-global-cms/cbl-component-library/components/component2`,
-			]),
-		}));
-		const result = updateAllComponents.getComponentsList();
-
-		// random order
-		result.map(m => expect([
-			"admin-core-mixins",
-			"admin-core-design-system",
-			"admin-core-generic",
-			"admin-core-critical",
-			"admin-core-functions",
-
-			"component1",
-			"component2",
-			
-			"admin-core-cta",
-			"admin-core-root-variables",
-			"admin-core-css-sizing-vars",
-			"admin-core-colour-data-config",
-			"admin-core-wordpress-block-editor-preview",
-			"admin-core-editor-cta-style-select",
-			"admin-core-gradient-designer",
-			"admin-core-typography",
-		]).toContain(m));
-	});
-});