@penskemediacorp/larva 1.25.0 → 1.28.0

package/index.js

@@ -3,5 +3,5 @@
 module.exports = {
 	clone: require( './lib/utils/clonePatternData' ),
 	getConfig: require( './lib/utils/getAppConfiguration' ),
-	__experimentalCloneWithFallback: require( './lib/utils/clonePatternData' )
+	__experimentalCloneWithFallback: require( './lib/utils/clonePatternData' ),
 };

package/lib/generateStatic.js

@@ -18,25 +18,29 @@ const themeAssetsConfig = getAppConfiguration( 'themeAssets' );
  * of each route, and write the content to directory structure that
  * mirrors the pattern routes.
  *
- * @param {array} routesArr  An array of routes in a pattern server, excluding the pattern source (i.e. larva or project).
+ * @param {Array} routesArr  An array of routes in a pattern server, excluding the pattern source (i.e. larva or project).
  *                           This is the result of getPatternRoutes.
  * @param {string} buildPath A directory where the HTML files should be written.
- * @param {function} done    A callback function to run when the site generation completes.
+ * @param {Function} done    A callback function to run when the site generation completes.
  * @param {string} urlBase   The base URL for the pattern library e.g. 'http://localhost:3001/larva'.
  *                           Pattern routes will be appended to this. Should not end in slash.
  *
  * @see {@link getPatternRoutes}.
  */
 
-
-module.exports = function generateStatic( routesArr, buildPath, done, urlBase = 'http://localhost:3000/larva' ) {
+module.exports = function generateStatic(
+	routesArr,
+	buildPath,
+	done,
+	urlBase = 'http://localhost:3000/larva'
+) {
 	const errors = [];
 
 	fs.mkdirpSync( buildPath );
 
 	// Copy assets from assets/build and assets/public
 	// to the static site build directory.
-	console.log( '\nCopying assets...\n')
+	console.log( '\nCopying assets...\n' );
 
 	// assets/public dir contains fonts and non-built things.
 	const publicAssetsSrc = ( () => {
@@ -44,90 +48,90 @@ module.exports = function generateStatic( routesArr, buildPath, done, urlBase =
 
 		// Fallback to assets in Larva
 		if ( ! fs.existsSync( pubPath ) ) {
-			pubPath = path.join( assetsConfig.path, 'public' )
+			pubPath = path.join( assetsConfig.path, 'public' );
 		}
 
 		return pubPath;
-	})();
+	} )();
 	const publicAssetsDest = path.join( buildPath, '../assets/public' );
 
-	const builtAssets = [
-		'js',
-		'css',
-		'tokens',
-		'images',
-		'svg'
-	];
+	const builtAssets = [ 'js', 'css', 'tokens', 'images', 'svg' ];
 
-	builtAssets.forEach( item => {
-		const dest = path.join( buildPath, `../assets/build/${item}` );
-		const src = path.join( assetsConfig.path, `build/${item}` );
+	builtAssets.forEach( ( item ) => {
+		const dest = path.join( buildPath, `../assets/build/${ item }` );
+		const src = path.join( assetsConfig.path, `build/${ item }` );
 
 		copySyncHelper( src, dest );
-	});
+	} );
 
 	copySyncHelper( publicAssetsSrc, publicAssetsDest );
 
 	const themeAssetKeys = Object.keys( themeAssetsConfig );
 
-	themeAssetKeys.forEach( key => {
-		const src = themeAssetsConfig[key];
-		const dest = path.join( buildPath, `../assets/theme/${key}` );
+	themeAssetKeys.forEach( ( key ) => {
+		const src = themeAssetsConfig[ key ];
+		const dest = path.join( buildPath, `../assets/theme/${ key }` );
 
 		copySyncHelper( src, dest );
-	});
+	} );
 
 	// Build the site.
 	// Cycle through the list of routes and write the response
 	// to files.
-	console.log( '\nBuilding site...\n');
+	console.log( '\nBuilding site...\n' );
 
 	try {
-
 		const promises = routesArr.map( ( route ) => {
-
 			const dir = path.join( buildPath, route );
-			const url = `${urlBase}/${route}`;
-
-			return axios.get( url ).then( ( response ) => {
-
-				if ( 200 === response.status ) {
-					mkdirp.sync( dir );
-					fs.writeFileSync( `${dir}/index.html`, response.data );
-					console.log( `Built ${route}.` );
-				}
-
-			} ).catch( ( e ) => {
-
-				if ( 'ECONNREFUSED' === e.code ) {
-					process.exitCode = 1;
-				} else {
-					mkdirp.sync( dir );
-					fs.writeFileSync( `${dir}/index.html`, e.message );
-
-					console.log( chalk.yellow( `Error writing ${route}: ${e.message}.` ) );
-				}
-
-			});
-
+			const url = `${ urlBase }/${ route }`;
+
+			return axios
+				.get( url )
+				.then( ( response ) => {
+					if ( 200 === response.status ) {
+						mkdirp.sync( dir );
+						fs.writeFileSync(
+							`${ dir }/index.html`,
+							response.data
+						);
+						console.log( `Built ${ route }.` );
+					}
+				} )
+				.catch( ( e ) => {
+					if ( 'ECONNREFUSED' === e.code ) {
+						process.exitCode = 1;
+					} else {
+						mkdirp.sync( dir );
+						fs.writeFileSync( `${ dir }/index.html`, e.message );
+
+						console.log(
+							chalk.yellow(
+								`Error writing ${ route }: ${ e.message }.`
+							)
+						);
+					}
+				} );
 		} );
 
-		axios.all( promises ).then( () => {
-
-			if ( errors.length > 0 ) {
-				console.log( errors );
-			}
-
-			done( chalk.green( `\nSite built to build/html/${path.basename( buildPath )}. Check output for issues.\n` ) );
-
-		} ).catch( ( e ) =>  {
-
-			done( chalk.bold.red( e ) );
-
-		});
+		axios
+			.all( promises )
+			.then( () => {
+				if ( errors.length > 0 ) {
+					console.log( errors );
+				}
 
+				done(
+					chalk.green(
+						`\nSite built to build/html/${ path.basename(
+							buildPath
+						) }. Check output for issues.\n`
+					)
+				);
+			} )
+			.catch( ( e ) => {
+				done( chalk.bold.red( e ) );
+			} );
 	} catch ( e ) {
 		console.error( e );
 	}
-
-}
+};

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 );
 		}
-
 	}
-}
+};