@penskemediacorp/larva 1.25.0 → 1.26.0

package/lib/server.js

@@ -1,5 +1,5 @@
 const path = require( 'path' );
-const express = require('express');
+const express = require( 'express' );
 const { marked } = require( 'marked' );
 const fs = require( 'fs' );
 const globby = require( 'globby' );
@@ -8,12 +8,12 @@ const {
 	TwingEnvironment,
 	TwingLoaderFilesystem,
 	TwingFilter,
-	TwingFunction
-} = require('twing');
+	TwingFunction,
+} = require( 'twing' );
 
 const fontData = require( '../../larva-tokens/lib/font-data' );
 
-const getAppConfiguration = require('./utils/getAppConfiguration' );
+const getAppConfiguration = require( './utils/getAppConfiguration' );
 const getPatternPathsToLoad = require( './utils/getPatternPathsToLoad' );
 const getPatternData = require( './utils/getPatternData' );
 const getAllPatternsObj = require( './utils/getAllPatternsObj' );
@@ -26,34 +26,34 @@ const assetsConfig = getAppConfiguration( 'assets' );
 const themeAssetsConfig = getAppConfiguration( 'themeAssets' );
 const twigPaths = getPatternPathsToLoad( patternConfig );
 
-let loader = new TwingLoaderFilesystem( twigPaths );
+const loader = new TwingLoaderFilesystem( twigPaths );
 
 // Add markdown filter
 const markdownFilter = new TwingFilter( 'markdown', ( string ) => {
 	if ( string ) {
 		return Promise.resolve( marked( string ) );
-	} else {
-		const noDocsMessage = '**This needs docs!** <br>Create a README.md in the pattern\'s directory and add details about using this pattern in markdown.';
-
-		return Promise.resolve( marked( noDocsMessage ) );
 	}
-});
+	const noDocsMessage =
+		"**This needs docs!** <br>Create a README.md in the pattern's directory and add details about using this pattern in markdown.";
+
+	return Promise.resolve( marked( noDocsMessage ) );
+} );
 
 // Support `{{ item|markup }}` syntax for outputting escaped content within loops.
 const markupFilter = new TwingFilter(
 	'markup',
 	( string ) => Promise.resolve( string ),
 	{},
-	{ is_safe: ['html'] }
+	{ is_safe: [ 'html' ] }
 );
 
 const kebabify = ( name ) => {
-	let kebabCase = [];
+	const kebabCase = [];
 
 	// TODO: find a more concise way of turning a string into an iterable
-	for (let i = 0; i < name.length; i++) {
-		let letter = name[i];
-		kebabCase[i] = letter;
+	for ( let i = 0; i < name.length; i++ ) {
+		const letter = name[ i ];
+		kebabCase[ i ] = letter;
 	}
 
 	return kebabCase.reduce( ( a, b ) => {
@@ -61,47 +61,51 @@ const kebabify = ( name ) => {
 			return a.toLowerCase() + '-';
 		}
 		return a.toLowerCase() + b.toLowerCase();
-	});
+	} );
 };
 
 // TODO: Could be an array/iterator if the namespace can be extracted from the key, the larva.config API could
 // change to `patterns: { larva: /larva/path/here/, project: /project/path/here }`
 loader.addPath( patternConfig.larvaPatternsDir, 'larva' );
 
-if( fs.existsSync( patternConfig.projectPatternsDir ) ) {
+if ( fs.existsSync( patternConfig.projectPatternsDir ) ) {
 	loader.addPath( patternConfig.projectPatternsDir, 'project' );
 }
 
-let twing = new TwingEnvironment( loader, { debug: true } );
+const twing = new TwingEnvironment( loader, { debug: true } );
 
 twing.addFilter( markdownFilter );
 twing.addFilter( markupFilter );
 
 // Add custom function support for doing wp action: {{ wp_action( ... ) }}
-twing.addFunction(new TwingFunction('wp_action',() => {
-	// We're relying on twig-to-php-parser for translation, so just return empty string for now
-	return Promise.resolve('');
-}));
+twing.addFunction(
+	new TwingFunction( 'wp_action', () => {
+		// We're relying on twig-to-php-parser for translation, so just return empty string for now
+		return Promise.resolve( '' );
+	} )
+);
 
-let patterns = {
+const patterns = {
 	larva: getAllPatternsObj( patternConfig.larvaPatternsDir ),
-	project: getAllPatternsObj( patternConfig.projectPatternsDir )
+	project: getAllPatternsObj( patternConfig.projectPatternsDir ),
 };
 
 // Use the project version if it exists, else use the larva version
 if ( fs.existsSync( assetsConfig.path ) ) {
-	app.use( '/assets' , express.static( assetsConfig.path ) );
+	app.use( '/assets', express.static( assetsConfig.path ) );
 }
 
 // Expose any theme directories with assets in the express server
 const themeAssetKeys = Object.keys( themeAssetsConfig );
 
-themeAssetKeys.forEach( key => {
-	app.use( '/assets/theme/' + key , express.static( themeAssetsConfig[key] ) );
-});
-
-app.use( '/:source?/css', function (req, res) {
+themeAssetKeys.forEach( ( key ) => {
+	app.use(
+		'/assets/theme/' + key,
+		express.static( themeAssetsConfig[ key ] )
+	);
+} );
 
+app.use( '/:source?/css', function ( req, res ) {
 	/**
 	 * Generate Larva CSS Docs
 	 *
@@ -118,8 +122,14 @@ app.use( '/:source?/css', function (req, res) {
 	 */
 
 	const postcss = require( 'postcss' );
-	const cssPath = path.join( process.cwd(), './node_modules/@penskemediacorp/larva/build/css/larva.css' );
-	const sassPath = path.join( process.cwd(), './node_modules/@penskemediacorp/larva-css/src/' );
+	const cssPath = path.join(
+		process.cwd(),
+		'./node_modules/@penskemediacorp/larva/build/css/larva.css'
+	);
+	const sassPath = path.join(
+		process.cwd(),
+		'./node_modules/@penskemediacorp/larva-css/src/'
+	);
 
 	const hasTokens = [
 		'u-background-color',
@@ -132,65 +142,62 @@ app.use( '/:source?/css', function (req, res) {
 	];
 
 	const baseNames = ( () => {
-
-		let files = globby.sync( sassPath, {
+		const files = globby.sync( sassPath, {
 			expandDirectories: {
-				files: ['*.scss']
-			}
+				files: [ '*.scss' ],
+			},
 		} );
 
 		return files.map( ( item ) => {
-			let parts = item.split( '/' );
-			let baseName = parts[ parts.length - 1 ].split( '.' );
-			return baseName[0];
+			const parts = item.split( '/' );
+			const baseName = parts[ parts.length - 1 ].split( '.' );
+			return baseName[ 0 ];
 		} );
 	} )();
 
 	const cssString = fs.readFileSync( cssPath );
 
-	const cssRoot = postcss.parse( cssString )
+	const cssRoot = postcss.parse( cssString );
 
 	const generatedSpec = ( () => {
-		let obj = {};
+		const obj = {};
 
 		baseNames.forEach( ( item ) => {
-			obj[item] = {
+			obj[ item ] = {
 				selectors: [],
-				tokens: false
+				tokens: false,
 			};
-		})
+		} );
 
 		return obj;
 	} )();
 
-	cssRoot.walkRules( rule => {
-
-		Object.keys( generatedSpec ).forEach( key => {
-			let regex = new RegExp( '.*lrv-' + key + '.*', 'g' );
+	cssRoot.walkRules( ( rule ) => {
+		Object.keys( generatedSpec ).forEach( ( key ) => {
+			const regex = new RegExp( '.*lrv-' + key + '.*', 'g' );
 
 			if ( -1 !== hasTokens.indexOf( key ) ) {
-				generatedSpec[key]['tokens'] = true;
+				generatedSpec[ key ].tokens = true;
 			}
 
 			if ( rule.selector.match( regex ) ) {
-				generatedSpec[key]['selectors'].push( rule.selector );
+				generatedSpec[ key ].selectors.push( rule.selector );
 			}
-
-		});
-
+		} );
 	} );
 
-	req.params[ 'name' ] = 'Larva CSS';
-	req.params[ 'spec' ] = generatedSpec;
-
-	req.params[ 'source' ] = 'larva';
-	req.params[ 'pattern_nav' ] = patterns;
+	req.params.name = 'Larva CSS';
+	req.params.spec = generatedSpec;
 
-	twing.render( 'css.html', req.params ).then( output => res.end( output ) );
-});
+	req.params.source = 'larva';
+	req.params.pattern_nav = patterns;
 
-app.get( '/:source/:type/:name/:variant?', function (req, res) {
+	twing
+		.render( 'css.html', req.params )
+		.then( ( output ) => res.end( output ) );
+} );
 
+app.get( '/:source/:type/:name/:variant?', function ( req, res ) {
 	let patternsPath;
 
 	if ( 'larva' === req.params.source ) {
@@ -202,83 +209,98 @@ app.get( '/:source/:type/:name/:variant?', function (req, res) {
 	}
 
 	// Support query parameters for conditionally loading stylesheets and scripts
-	req.params[ 'query' ] = req.query;
-	req.params[ 'pattern_nav' ] = patterns;
-	req.params[ 'data' ] = undefined !== patternsPath ? getPatternData( patternsPath, req.params ) : null;
-	req.params[ 'brand' ] = req.query.tokens ? req.query.tokens : brandConfig;
-	req.params[ 'variants' ] = patterns[req.params.source][req.params.type][req.params.name];
+	req.params.query = req.query;
+	req.params.pattern_nav = patterns;
+	req.params.data =
+		undefined !== patternsPath
+			? getPatternData( patternsPath, req.params )
+			: null;
+	req.params.brand = req.query.tokens ? req.query.tokens : brandConfig;
+	req.params.variants =
+		patterns[ req.params.source ][ req.params.type ][ req.params.name ];
 
 	if ( 'algorithms' !== req.params.type ) {
-		req.params[ 'json_pretty' ] = JSON.stringify( req.params[ 'data' ], null, '\t' );
+		req.params.json_pretty = JSON.stringify( req.params.data, null, '\t' );
 	}
 
-	twing.render( 'pattern.html', req.params ).then( ( output ) => {
-		res.end( output );
-	}).catch( e => {
-		const errorMessage = `Cannot render template! \n\n${e}`;
+	twing
+		.render( 'pattern.html', req.params )
+		.then( ( output ) => {
+			res.end( output );
+		} )
+		.catch( ( e ) => {
+			const errorMessage = `Cannot render template! \n\n${ e }`;
 
-		console.log( e );
+			console.log( e );
 
-		res.end( errorMessage );
-	} );
-});
-
-app.get( '/:source?/style-guide', function (req, res ) {
+			res.end( errorMessage );
+		} );
+} );
 
+app.get( '/:source?/style-guide', function ( req, res ) {
 	const brand = req.query.tokens ? req.query.tokens : brandConfig;
 	const tokensPath = path.join( assetsConfig.path, 'build/tokens' );
 
-	const tokensData = (() => {
+	const tokensData = ( () => {
 		try {
-			return require( path.join( tokensPath, `${brand}.json` ) );
+			return require( path.join( tokensPath, `${ brand }.json` ) );
 		} catch ( e ) {
 			return null;
 		}
-	})();
+	} )();
 
 	const colorsByProperty = ( () => {
 		if ( ! tokensData ) return;
 
-		const colorTokens = Object.keys( tokensData ).filter( item => item.includes( 'COLOR' ) );
-		const colorNames = colorTokens.map( token => kebabify( token ) );
-
-		return colorNames.reduce( (acc, curr) => {
-			Object.keys( acc ).forEach( key => {
-				if ( curr.startsWith( key ) ) {
-					acc[key].push( 'lrv-u-' + curr );
-				}
-			});
-
-			return acc;
-		}, {
-			color: [],
-			'background-color': [],
-			'border-color': []
-		});
-	})();
-
-	req.params[ 'name' ] = `Style Guide`;
-	req.params[ 'font_styles' ] = fontData.groupedSelectors;
-	req.params[ 'colors' ] = colorsByProperty;
-	req.params[ 'brand' ] = req.query.tokens ? req.query.tokens : brandConfig;
-	req.params[ 'pattern_nav' ] = patterns;
-
-	twing.render( 'style-guide/index.html', req.params ).then( output => res.end( output ) ).catch( e => {
-		const errorMessage = `Cannot render template! \n\n${e}`;
+		const colorTokens = Object.keys( tokensData ).filter( ( item ) =>
+			item.includes( 'COLOR' )
+		);
+		const colorNames = colorTokens.map( ( token ) => kebabify( token ) );
+
+		return colorNames.reduce(
+			( acc, curr ) => {
+				Object.keys( acc ).forEach( ( key ) => {
+					if ( curr.startsWith( key ) ) {
+						acc[ key ].push( 'lrv-u-' + curr );
+					}
+				} );
+
+				return acc;
+			},
+			{
+				color: [],
+				'background-color': [],
+				'border-color': [],
+			}
+		);
+	} )();
 
-		console.log( e );
+	req.params.name = `Style Guide`;
+	req.params.font_styles = fontData.groupedSelectors;
+	req.params.colors = colorsByProperty;
+	req.params.brand = req.query.tokens ? req.query.tokens : brandConfig;
+	req.params.pattern_nav = patterns;
 
-		res.end( errorMessage );
-	} );
+	twing
+		.render( 'style-guide/index.html', req.params )
+		.then( ( output ) => res.end( output ) )
+		.catch( ( e ) => {
+			const errorMessage = `Cannot render template! \n\n${ e }`;
 
-});
+			console.log( e );
 
-app.get( '/:source?/:type?', function (req, res) {
-	req.params[ 'source' ] = 'larva';
-	req.params[ 'type' ] = req.params.type;
-	req.params[ 'pattern_nav' ] = patterns;
-	req.params[ 'brand' ] = req.query.tokens ? req.query.tokens : brandConfig;
-	twing.render( 'index.html', req.params ).then( output => res.end( output ) );
-});
+			res.end( errorMessage );
+		} );
+} );
+
+app.get( '/:source?/:type?', function ( req, res ) {
+	req.params.source = 'larva';
+	req.params.type = req.params.type;
+	req.params.pattern_nav = patterns;
+	req.params.brand = req.query.tokens ? req.query.tokens : brandConfig;
+	twing
+		.render( 'index.html', req.params )
+		.then( ( output ) => res.end( output ) );
+} );
 
 module.exports = app;

package/lib/start.js

@@ -4,4 +4,4 @@ const port = process.env.NODE_PORT || 3000;
 
 app.listen( port, () => {
 	console.log( 'Larva server is listening on port ' + port );
-});
+} );

package/lib/utils/clonePatternData.js

@@ -10,4 +10,4 @@ module.exports = function clonePatternData( slug ) {
 	} catch {
 		return clonedeep( require( path.join( larvaPatternsDir, slug ) ) );
 	}
-}
+};

package/lib/utils/copySyncHelper.js

@@ -14,20 +14,19 @@ const chalk = require( 'chalk' );
  */
 
 module.exports = function copySyncHelper( src, dest ) {
-
 	const name = path.basename( src );
 
 	try {
 		fs.copySync( src, dest );
 
-		console.log( `Copied '${name}'.` );
+		console.log( `Copied '${ name }'.` );
 	} catch ( e ) {
-
 		if ( 'ENOENT' === e.code ) {
-			console.log( chalk.grey( `Can't find '${name}' to copy, skipping.` ) );
+			console.log(
+				chalk.grey( `Can't find '${ name }' to copy, skipping.` )
+			);
 		} else {
 			console.error( e );
 		}
-
 	}
-}
+};

package/lib/utils/getAllPatternsObj.js

@@ -13,36 +13,41 @@ const config = getAppConfiguration( 'patterns' );
  * return an object representing all the pattern types, patterns, and their variants.
  *
  * @param {string} startPath - Path to look in for all patterns. Should be assets/src/patterns.
- * @return {object} - Object representing all patterns and variants
+ * @return {Object} - Object representing all patterns and variants
  */
 
 module.exports = function getAllPatternsObj( startPath ) {
-
 	const patternDirs = getSubDirectoryNames( startPath );
 
-	let obj = {};
+	const obj = {};
 
 	try {
 		patternDirs.map( ( patternType ) => {
 			let patterns = [];
-			obj[patternType] = {};
+			obj[ patternType ] = {};
 
 			// Modules can be ignored, which maybe is unecessary
 			// but for now continue on that path.
 			if ( 'modules' === patternType ) {
-				patterns = getModuleNamesFromDirectory( startPath, config.ignoredModules );
+				patterns = getModuleNamesFromDirectory(
+					startPath,
+					config.ignoredModules
+				);
 			} else {
-				patterns = getSubDirectoryNames( path.join( startPath, patternType ) );
+				patterns = getSubDirectoryNames(
+					path.join( startPath, patternType )
+				);
 			}
 
 			patterns.map( ( pattern ) => {
-				obj[patternType][pattern] = getPatternVariants( path.join( startPath, `${patternType}/${pattern}` ) );
+				obj[ patternType ][ pattern ] = getPatternVariants(
+					path.join( startPath, `${ patternType }/${ pattern }` )
+				);
 			} );
-
 		} );
 	} catch ( e ) {
 		console.error( e );
 	}
 
 	return obj;
-}
+};

package/lib/utils/getAppConfiguration.js

@@ -18,64 +18,66 @@ const path = require( 'path' );
  */
 
 const defaultConfig = {
-
 	eslint: {
-		configFile: path.join( __dirname, '../../scripts/config/.eslintrc.json' ),
+		configFile: path.join(
+			__dirname,
+			'../../scripts/config/.eslintrc.json'
+		),
 	},
 
 	webpack: {
 		aliases: {
 			'@js': path.resolve( './src/js' ),
 			'@npm': path.resolve( './node_modules' ),
-			'@larva-js': path.resolve( './node_modules/@penskemediacorp/larva-js/src' ),
+			'@larva-js': path.resolve(
+				'./node_modules/@penskemediacorp/larva-js/src'
+			),
 		},
 		entries: {
 			'larva-ui': path.resolve( './entries/larva-ui.entry.js' ),
-			common: path.resolve( './entries/common.entry.js' )
-		}
+			common: path.resolve( './entries/common.entry.js' ),
+		},
 	},
 
 	patterns: {
-		larvaPatternsDir: path.resolve( './node_modules/@penskemediacorp/larva-patterns' ),
+		larvaPatternsDir: path.resolve(
+			'./node_modules/@penskemediacorp/larva-patterns'
+		),
 		projectPatternsDir: path.resolve( './src/patterns' ),
 	},
 
 	assets: {
 		path: ( () => {
-
 			// Fragile way to detect existing Larva sites
 			if ( fs.existsSync( path.resolve( './build/css' ) ) ) {
 				return path.resolve( './' );
 			}
 
 			return path.resolve( './node_modules/@penskemediacorp/larva' );
-		})(),
+		} )(),
 	},
 
 	themeAssets: {},
 };
 
 module.exports = function getAppConfiguration( key, usePackageDefault = true ) {
-
 	try {
-
 		let appRoot = process.cwd();
 
 		if ( 'test' === process.env.NODE_ENV ) {
 			appRoot = path.join( __dirname, '../../__tests__/fixtures/' );
 		}
 
-		let config = require( `${appRoot}/larva.config.js` );
+		const config = require( `${ appRoot }/larva.config.js` );
 
 		// If config not found in approot, fallback to package default in root
-		if ( undefined === config[key] && usePackageDefault ) {
+		if ( undefined === config[ key ] && usePackageDefault ) {
 			return defaultConfig[ key ];
 		}
 
-		return config[key];
-
+		return config[ key ];
 	} catch ( error ) {
-		console.warn( 'Using default configuration. ');
+		console.warn( 'Using default configuration. ' );
 
 		return defaultConfig[ key ];
 	}

package/lib/utils/getArgsFromCli.js

@@ -1,3 +1,3 @@
 module.exports = function getArgsFromCli() {
-	return process.argv.slice(2);
-}
+	return process.argv.slice( 2 );
+};

package/lib/utils/getModuleNamesFromDirectory.js

@@ -1,11 +1,18 @@
 const getSubDirectoryNames = require( './getSubDirectoryNames' );
 const path = require( 'path' );
 
-module.exports = function getModuleNamesFromDirectory( directory, ignoredModules = [] ) {
-	let moduleNames = getSubDirectoryNames( path.join( directory , 'modules' ) );
+module.exports = function getModuleNamesFromDirectory(
+	directory,
+	ignoredModules = []
+) {
+	const moduleNames = getSubDirectoryNames(
+		path.join( directory, 'modules' )
+	);
 
 	return moduleNames.filter( ( moduleName ) => {
-		return ! moduleName.startsWith( '_' ) && -1 === ignoredModules.indexOf( moduleName );
-	});
-
-}
+		return (
+			! moduleName.startsWith( '_' ) &&
+			-1 === ignoredModules.indexOf( moduleName )
+		);
+	} );
+};

package/lib/utils/getPatternData.js

@@ -4,31 +4,39 @@ const path = require( 'path' );
  * Get Pattern Data
  *
  * @param {string} patternsPath
- * @param {object} params Object containing name of pattern
+ * @param {Object} params Object containing name of pattern
  */
 function getPatternData( patternsPath, params ) {
-
 	const variant = params.variant || 'prototype';
-	const patternPath = path.join( patternsPath, params.type, params.name, params.name + '.' + variant + '.js' );
-	const jsonPath = path.join( patternsPath, params.type, params.name, params.name + '.json' )
+	const patternPath = path.join(
+		patternsPath,
+		params.type,
+		params.name,
+		params.name + '.' + variant + '.js'
+	);
+	const jsonPath = path.join(
+		patternsPath,
+		params.type,
+		params.name,
+		params.name + '.json'
+	);
 
 	try {
 		return require( patternPath );
-	} catch( e ) {
+	} catch ( e ) {
 		const originalError = e;
 
 		try {
 			// Backwards compat for Deadline when patterns were stored as JSON
-			let patternData = require( jsonPath );
+			const patternData = require( jsonPath );
 			return patternData;
 		} catch ( e ) {
 			return {
-				message: `Error getting data for "${params.name}".<br>There is likely a problem with ${params.name}.${variant}.js.`,
-				error: originalError
-			}
+				message: `Error getting data for "${ params.name }".<br>There is likely a problem with ${ params.name }.${ variant }.js.`,
+				error: originalError,
+			};
 		}
 	}
-
 }
 
-module.exports = getPatternData;
+module.exports = getPatternData;