@penskemediacorp/larva 1.23.0 → 1.26.0

package/lib/utils/getPatternPathsToLoad.js

@@ -1,20 +1,20 @@
 const fs = require( 'fs' );
 
 module.exports = function getPatternPathsToLoad( config ) {
-	let paths = [];
+	const paths = [];
 
 	if ( undefined === config ) {
 		throw new Error( `Pattern configuration is undefined.` );
-	};
+	}
 
 	// Look in projectPatternsDir first.
-	if( fs.existsSync( config.projectPatternsDir ) ) {
+	if ( fs.existsSync( config.projectPatternsDir ) ) {
 		paths.push( config.projectPatternsDir );
 	}
 
-	if( fs.existsSync( config.larvaPatternsDir ) ) {
+	if ( fs.existsSync( config.larvaPatternsDir ) ) {
 		paths.push( config.larvaPatternsDir );
 	}
 
 	return paths;
-}
+};

package/lib/utils/getPatternRoutes.js

@@ -16,43 +16,45 @@
  *
  * Return an array with routes for every pattern in the object.
  *
- * @param {object} patternsObj - An object with two levels of keys where patternObj['components']['c-link'] is an array of c-link variants.
- * @return {array} - An array of string routes e.g. [ '/components/c-link/', '/components/c-link/sponsored' ]
+ * @param {Object} patternsObj - An object with two levels of keys where patternObj['components']['c-link'] is an array of c-link variants.
+ * @return {Array} - An array of string routes e.g. [ '/components/c-link/', '/components/c-link/sponsored' ]
  */
 
 const chalk = require( 'chalk' );
 
 module.exports = function getPatternRoutes( patterns ) {
-
 	let patternRoutes = [];
 
 	try {
-
-		patternRoutes = Object.keys( patterns ).map( ( type ) => {
-
-			return Object.keys( patterns[type] ).map( ( name ) => {
-				let path = `${type}/${name}`;
-
-				if ( patterns[type][name].length > 1 ) {
-
-					return patterns[type][name].map( ( variant ) => {
-						if ( 'prototype' !== variant ) {
-							return path + '/' + variant;
-						} else {
-							return path;
+		patternRoutes = Object.keys( patterns )
+			.map( ( type ) => {
+				return Object.keys( patterns[ type ] )
+					.map( ( name ) => {
+						const path = `${ type }/${ name }`;
+
+						if ( patterns[ type ][ name ].length > 1 ) {
+							return patterns[ type ][ name ].map(
+								( variant ) => {
+									if ( 'prototype' !== variant ) {
+										return path + '/' + variant;
+									}
+									return path;
+								}
+							);
 						}
-					} );
-
-				} else {
-					return path;
-				}
-
-			} ).flat();
-
-		} ).flat();
+						return path;
+					} )
+					.flat();
+			} )
+			.flat();
 	} catch ( error ) {
-		console.error( chalk.red( 'Could not build the pattern routes. Is the pattern object structure correct?' ), error );
+		console.error(
+			chalk.red(
+				'Could not build the pattern routes. Is the pattern object structure correct?'
+			),
+			error
+		);
 	}
 
 	return patternRoutes;
-}
+};

package/lib/utils/getPatternType.js

@@ -1,9 +1,9 @@
 // Note 4/6/20 - This might not be necessary since we can use the directory name.
-module.exports = function getPatternType ( patternName ) {
+module.exports = function getPatternType( patternName ) {
 	const patternNamespace = patternName.substring( 0, 2 );
 	let patternType = 'modules';
 
-	if ( 'o-' ===  patternNamespace ) {
+	if ( 'o-' === patternNamespace ) {
 		patternType = 'objects';
 	}
 
@@ -12,4 +12,4 @@ module.exports = function getPatternType ( patternName ) {
 	}
 
 	return patternType;
-}
+};

package/lib/utils/getPatternVariants.js

@@ -1,17 +1,16 @@
 /**
- * Return an array of "variants", or the pattern.XX.js from a 
+ * Return an array of "variants", or the pattern.XX.js from a
  * given directory.
- * 
+ *
  * @param {string} startPath - the pattern directory to search.
  */
 
 const fs = require( 'fs' );
 
 // https://regex101.com/r/DgnTR4/2
-const regex = new RegExp( '(.[^.]+)\.(.+)\.js$' );
+const regex = new RegExp( '(.[^.]+).(.+).js$' );
 
 module.exports = function getPatternVariants( startPath ) {
-
 	// Only return Node prototype files that follow pattern name.XX.js
 	const files = fs.readdirSync( startPath ).filter( ( file ) => {
 		if ( /.+\..*\.js$/.test( file ) ) {
@@ -20,5 +19,5 @@ module.exports = function getPatternVariants( startPath ) {
 	} );
 
 	// Return array of the name of the variant e.g. XX in name.XX.js
-	return files.map( ( file ) => file.match( regex )[2] );
-};
+	return files.map( ( file ) => file.match( regex )[ 2 ] );
+};

package/lib/utils/getPatternsIndexPath.js

@@ -1,11 +1,11 @@
 const isCoreTheme = require( './isCoreTheme' );
 
 module.exports = function getPatternsIndexPath( config ) {
-	// TODO: add parent/child-esque logic for Larva patterns will occur i.e. the app 
+	// TODO: add parent/child-esque logic for Larva patterns will occur i.e. the app
 	// should look first in the theme, then in larvaPatternsDir.
 	// if ( isCoreTheme( config ) ) {
-		return config.larvaPatternsDir;
+	return config.larvaPatternsDir;
 	// } else {
 	// 	return config.projectPatternsDir;
 	// }
-}
+};

package/lib/utils/getSubDirectoryNames.js

@@ -5,19 +5,19 @@ const chalk = require( 'chalk' );
  * Get Subdirectory names
  *
  * @param {string} path path to a directory containing subdirectories.
- * @return {array} array of strings representing names of subdirectories.
+ * @return {Array} array of strings representing names of subdirectories.
  *
  * @link: https://stackoverflow.com/questions/18112204/get-all-directories-within-directory-nodejs
  **/
 
 module.exports = function getSubDirectoryNames( path ) {
 	try {
-		return fs.readdirSync( path ).filter( function( file ) {
+		return fs.readdirSync( path ).filter( function ( file ) {
 			if ( 'node_modules' !== file && 'fixtures' !== file ) {
 				return fs.statSync( path + '/' + file ).isDirectory();
 			}
-		});
+		} );
 	} catch {
-		console.error( path + ' doesn\'t exist.' );
+		console.error( path + " doesn't exist." );
 	}
-}
+};

package/lib/utils/isCoreTheme.js

@@ -1,8 +1,7 @@
-
 module.exports = function isCoreTheme( config ) {
 	if ( undefined === config.themePatternsDir ) {
 		return true;
 	}
 
 	return false;
-}
+};

package/lib/utils/renderSass.js

@@ -3,18 +3,21 @@ const path = require( 'path' );
 
 module.exports = function renderSass( sassData ) {
 	return new Promise( ( resolve, reject ) => {
-		sass.render( {
-			data: sassData,
-			includePaths: [
-				path.resolve( process.cwd(), './node_modules'), // Command should be run from same directory as node_modules
-				path.resolve( process.cwd(), './src')
-			]
-		}, ( err, result ) => {
-			if ( err ) {
-				reject( err );
-			}
+		sass.render(
+			{
+				data: sassData,
+				includePaths: [
+					path.resolve( process.cwd(), './node_modules' ), // Command should be run from same directory as node_modules
+					path.resolve( process.cwd(), './src' ),
+				],
+			},
+			( err, result ) => {
+				if ( err ) {
+					reject( err );
+				}
 
-			resolve( result );
-		});
-	});
-}
+				resolve( result );
+			}
+		);
+	} );
+};

package/lib/utils/spawnScript.js

@@ -5,7 +5,7 @@ const getArgsFromCli = require( './getArgsFromCli' );
 // Filter out the first CLI argument which is the Larva command,
 // and not needed for the binary.
 const cliArgsWithoutScriptName = ( () => {
-	let cliArgs = getArgsFromCli();
+	const cliArgs = getArgsFromCli();
 
 	if ( cliArgs.length ) {
 		cliArgs.shift();
@@ -15,12 +15,7 @@ const cliArgsWithoutScriptName = ( () => {
 } )();
 
 module.exports = function spawnScript( binaryFile, scriptArgs ) {
-
-	spawn.sync(
-		binaryFile,
-		[
-			... scriptArgs,
-			... cliArgsWithoutScriptName
-		], { stdio: 'inherit' }
-	);
+	spawn.sync( binaryFile, [ ...scriptArgs, ...cliArgsWithoutScriptName ], {
+		stdio: 'inherit',
+	} );
 };

package/lib/utils/writeJsonToFile.js

@@ -1,6 +1,6 @@
 const fs = require( 'fs' );
 
 module.exports = function writePatternDataToFile( filepath, data ) {
-	let json = JSON.stringify( data );
+	const json = JSON.stringify( data );
 	fs.writeFileSync( filepath, json );
-};
+};

package/lib/writeJson.js

@@ -9,30 +9,46 @@ const writeJsonToFile = require( './utils/writeJsonToFile' );
 
 // The fromLarva flag can come from CLI argument
 module.exports = function writeJson( patternConfig, fromLarva = false ) {
-
-	const sourceDirectory = ( true === fromLarva ) ? patternConfig.larvaPatternsDir : patternConfig.projectPatternsDir;
-	const ignoredModules  = patternConfig.ignoredModules ? patternConfig.ignoredModules : [];
-	const modulesArr      = getModuleNamesFromDirectory( sourceDirectory, ignoredModules );
+	const sourceDirectory =
+		true === fromLarva
+			? patternConfig.larvaPatternsDir
+			: patternConfig.projectPatternsDir;
+	const ignoredModules = patternConfig.ignoredModules
+		? patternConfig.ignoredModules
+		: [];
+	const modulesArr = getModuleNamesFromDirectory(
+		sourceDirectory,
+		ignoredModules
+	);
 
 	modulesArr.forEach( ( moduleName ) => {
-
 		const startPath = sourceDirectory + '/modules/' + moduleName;
 		const variants = getPatternVariants( startPath );
 
 		variants.forEach( ( variant ) => {
-
 			const moduleData = getPatternData( sourceDirectory, {
 				type: 'modules',
 				name: moduleName,
-				variant: variant
+				variant,
 			} );
 
-			const jsonDestPath = path.resolve( patternConfig.projectPatternsDir, '../../build/json/modules/' + moduleName + '.' + variant + '.json' );
+			const jsonDestPath = path.resolve(
+				patternConfig.projectPatternsDir,
+				'../../build/json/modules/' +
+					moduleName +
+					'.' +
+					variant +
+					'.json'
+			);
 
 			// If JSON data and module prototype are the same, pass, otherwise write the data to file
 			let hasChanged = true;
 			try {
-				if ( fs.existsSync( jsonDestPath ) && JSON.stringify( require( jsonDestPath ) ) === JSON.stringify( moduleData ) ) {
+				if (
+					fs.existsSync( jsonDestPath ) &&
+					JSON.stringify( require( jsonDestPath ) ) ===
+						JSON.stringify( moduleData )
+				) {
 					hasChanged = false;
 				}
 			} catch ( error ) {
@@ -41,13 +57,16 @@ module.exports = function writeJson( patternConfig, fromLarva = false ) {
 
 			if ( hasChanged ) {
 				writeJsonToFile( jsonDestPath, moduleData );
-				console.log( chalk.green.bold( `Wrote JSON for ${moduleName}.${variant}` ) );
+				console.log(
+					chalk.green.bold(
+						`Wrote JSON for ${ moduleName }.${ variant }`
+					)
+				);
 			} else {
-				console.log( chalk.grey( `No updates in ${moduleName}.${variant}` ) );
+				console.log(
+					chalk.grey( `No updates in ${ moduleName }.${ variant }` )
+				);
 			}
-		}
-
-		);
-
+		} );
 	} );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva",
-  "version": "1.23.0",
+  "version": "1.26.0",
   "description": "> TODO: description",
   "author": "laras126 <laras126@gmail.com>",
   "homepage": "https://github.com/Penske-Media-Corp/pmc-larva/tree/master/packages/larva#readme",
@@ -43,16 +43,16 @@
   "dependencies": {
     "@babel/core": "^7.10.5",
     "@babel/preset-env": "^7.10.4",
-    "@penskemediacorp/backstopjs-config": "^1.14.0",
-    "@penskemediacorp/eslint-config": "^1.14.0",
-    "@penskemediacorp/larva-css": "^1.23.0",
-    "@penskemediacorp/larva-js": "^1.20.0",
-    "@penskemediacorp/larva-patterns": "^1.23.0",
-    "@penskemediacorp/larva-scss": "^1.18.0",
-    "@penskemediacorp/larva-svg": "^1.14.0",
-    "@penskemediacorp/larva-tokens": "^1.23.0",
-    "@penskemediacorp/stylelint-config": "^1.14.0",
-    "@penskemediacorp/twig-to-php-parser": "^1.14.0",
+    "@penskemediacorp/backstopjs-config": "^1.26.0",
+    "@penskemediacorp/eslint-config": "^1.26.0",
+    "@penskemediacorp/larva-css": "^1.26.0",
+    "@penskemediacorp/larva-js": "^1.26.0",
+    "@penskemediacorp/larva-patterns": "^1.26.0",
+    "@penskemediacorp/larva-scss": "^1.26.0",
+    "@penskemediacorp/larva-svg": "^1.26.0",
+    "@penskemediacorp/larva-tokens": "^1.26.0",
+    "@penskemediacorp/stylelint-config": "^1.26.0",
+    "@penskemediacorp/twig-to-php-parser": "^1.26.0",
     "axios": "^0.21.1",
     "babel-loader": "^8.1.0",
     "chalk": "^4.1.0",
@@ -89,5 +89,8 @@
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12"
   },
-  "gitHead": "abe6cb4d369b01956710d05941708110e664fe86"
+  "devDependencies": {
+    "prettier": "npm:wp-prettier@^2.6.2"
+  },
+  "gitHead": "b9202e08f96e47041512b3b1a743c58f89b39152"
 }

package/scripts/build-html.js

@@ -9,14 +9,17 @@ const getAllPatternsObj = require( '../lib/utils/getAllPatternsObj' );
 
 const config = getAppConfiguration( 'patterns' );
 const cliArgs = getArgsFromCli();
-const source = 'larva' === cliArgs[1] ? 'larva' : 'project';
-const port = process.env.NODE_PORT || '3000' ;
+const source = 'larva' === cliArgs[ 1 ] ? 'larva' : 'project';
+const port = process.env.NODE_PORT || '3000';
 
 const urlBase = 'http://localhost:' + port + '/' + source;
 const buildPath = path.join( process.cwd(), './build/html/' + source );
 
 const patternsObj = ( () => {
-	const patternDir = 'larva' === source ? config.larvaPatternsDir : config.projectPatternsDir;
+	const patternDir =
+		'larva' === source
+			? config.larvaPatternsDir
+			: config.projectPatternsDir;
 	return getAllPatternsObj( patternDir );
 } )();
 
@@ -32,7 +35,7 @@ const staticPaths = [
 	'',
 ];
 
-staticPaths.forEach( p => {
+staticPaths.forEach( ( p ) => {
 	// Only build these paths for the larva source.
 	if ( p === 'style-guide' || p === 'css' ) {
 		if ( 'larva' !== source ) {
@@ -40,13 +43,17 @@ staticPaths.forEach( p => {
 		}
 	}
 
-	routesArr.push( p )
-});
-
-generateStatic( routesArr, buildPath, ( message ) => {
-
-	// TODO: copy assets into build path
-	// copy assets from larva package to static
-	// copy assets from project to assets
-	console.log( message );
-}, urlBase );
+	routesArr.push( p );
+} );
+
+generateStatic(
+	routesArr,
+	buildPath,
+	( message ) => {
+		// TODO: copy assets into build path
+		// copy assets from larva package to static
+		// copy assets from project to assets
+		console.log( message );
+	},
+	urlBase
+);

package/scripts/build-icons.js

@@ -1,14 +1,17 @@
 'use strict';
 
-const SVGSpriter = require('svg-sprite');
-const path = require('path');
-const mkdirp = require('mkdirp');
-const globby = require('globby');
-const fs = require('fs');
+const SVGSpriter = require( 'svg-sprite' );
+const path = require( 'path' );
+const mkdirp = require( 'mkdirp' );
+const globby = require( 'globby' );
+const fs = require( 'fs' );
 const svgoConfig = require( './config/svgo-config.json' );
 
 const projectIconsPath = path.join( process.cwd(), './src/svg/icons' );
-const larvaIconsPath = path.join( process.cwd(), './node_modules/@penskemediacorp/larva-svg/src' );
+const larvaIconsPath = path.join(
+	process.cwd(),
+	'./node_modules/@penskemediacorp/larva-svg/src'
+);
 
 // TODO: unfinished feature
 // const getSassVarsString = require( './lib/getSassVarsString' );
@@ -19,20 +22,20 @@ const config = {
 	mode: {
 		defs: {
 			example: true,
-			sprite: 'sprite.defs.svg'
-		}
+			sprite: 'sprite.defs.svg',
+		},
 	},
 	shape: {
 		id: {
 			separator: '',
 		},
 		transform: {
-			svgo: svgoConfig
-		}
+			svgo: svgoConfig,
+		},
 	},
 	svg: {
 		dimensionAttributes: false,
-	}
+	},
 };
 
 const spriter = new SVGSpriter( config );
@@ -40,21 +43,30 @@ const spriter = new SVGSpriter( config );
 const svgFiles = globby.sync( [ larvaIconsPath, projectIconsPath ], {
 	expandDirectories: {
 		extensions: [ 'svg' ],
-	}
-});
+	},
+} );
 
 // TODO: unfinished feature
 // let scssIcons = {};
 
-console.log( `Looking for icon SVGs in ${path.relative( process.cwd(), larvaIconsPath )} and ${path.relative( process.cwd(), projectIconsPath )}...` );
+console.log(
+	`Looking for icon SVGs in ${ path.relative(
+		process.cwd(),
+		larvaIconsPath
+	) } and ${ path.relative( process.cwd(), projectIconsPath ) }...`
+);
 
-svgFiles.forEach( file => {
+svgFiles.forEach( ( file ) => {
 	// TODO: unfinished feature.
 	// Build Sass vars object
 	// scssIcons[ path.basename( file, '.svg' ) ] = fs.readFileSync( file, { encoding: 'utf-8' } );
 
-	spriter.add( file, path.basename( file ), fs.readFileSync( file, { encoding: 'utf-8' } ) );
-});
+	spriter.add(
+		file,
+		path.basename( file ),
+		fs.readFileSync( file, { encoding: 'utf-8' } )
+	);
+} );
 
 console.log( 'Building SVG icon sprite...' );
 
@@ -63,18 +75,18 @@ console.log( 'Building SVG icon sprite...' );
 // fs.writeFileSync( path.join( process.cwd(), './build/a-icon-svg.scss' ), getSassVarsString( scssIcons ) );
 
 // Compile the sprite
-spriter.compile( function( error, result, cssData ) {
-
+spriter.compile( function ( error, result, cssData ) {
 	// Run through all configured output modes
-	for ( var mode in result ) {
-
+	for ( const mode in result ) {
 		// Run through all created resources and write them to disk
-		for ( var type in result[mode] ) {
-			mkdirp.sync( path.dirname( result[mode][type].path ) );
-			fs.writeFileSync( result[mode][type].path, result[mode][type].contents );
+		for ( const type in result[ mode ] ) {
+			mkdirp.sync( path.dirname( result[ mode ][ type ].path ) );
+			fs.writeFileSync(
+				result[ mode ][ type ].path,
+				result[ mode ][ type ].contents
+			);
 		}
-
 	}
 
 	console.log( 'Completed building SVG icon sprite.' );
-});
+} );

package/scripts/build-scss.js

@@ -9,7 +9,7 @@ const args = [
 	'--gulpfile',
 	gulpfilePath,
 	'--cwd',
-	process.cwd()
+	process.cwd(),
 ];
 
 spawnScript( './node_modules/.bin/gulp', args );

package/scripts/config/.eslintrc.json

@@ -7,5 +7,6 @@
 		"rules": {
 			"import/no-unresolved": "off"
 		}
-	} ]
+	} ],
+	"root": true
 }

package/scripts/config/gulpfile.js

@@ -65,7 +65,6 @@ const buildScss = (
 	minify = false,
 	generateImportantVariants = false
 ) => {
-
 	if ( minify ) {
 		sassOpts.outputStyle = 'compressed';
 	}

package/scripts/config/stylelint.config.js

@@ -1,5 +1,5 @@
 const rules = {
-	'extends': '@penskemediacorp/stylelint-config'
+	extends: '@penskemediacorp/stylelint-config',
 };
 
 module.exports = rules;