@penskemediacorp/larva 1.7.0-alpha.0 → 1.7.2

package/scripts/prod-js.js

@@ -0,0 +1,12 @@
+const path = require( 'path' );
+
+const spawnScript = require( '../lib/utils/spawnScript' );
+
+const configPath = path.join( __dirname, './config/webpack.config.js' );
+
+const args = [
+	`--config=${ configPath }`,
+	'--mode=production'
+];
+
+spawnScript( './node_modules/.bin/webpack', args );

package/scripts/prod-scss.js

@@ -0,0 +1,24 @@
+const path = require( 'path' );
+
+const getArgsFromCli = require( '../lib/utils/getArgsFromCli' );
+const spawnScript = require( '../lib/utils/spawnScript' );
+
+const gulpfilePath = path.join( __dirname, './config/gulpfile.js' );
+
+const cliArgs = getArgsFromCli();
+const generateImportantVariants = '--generate-important-variants' === cliArgs[1];
+
+// Remove our arg so Gulp doesn't complain about an undefined task.
+if ( generateImportantVariants ) {
+	process.argv.pop();
+}
+
+const args = [
+	generateImportantVariants ? 'prod-scss-with-important-variants' : 'prod-scss',
+	'--gulpfile',
+	gulpfilePath,
+	'--cwd',
+	process.cwd(),
+];
+
+spawnScript( './node_modules/.bin/gulp', args );

package/scripts/prod.js

@@ -0,0 +1,122 @@
+/**
+ * Run a production ready build in a Larva project.
+ *
+ * ## OPTIONS
+ *
+ * [--help]
+ * : Display usage and examples for this command.
+ *
+ * [--parse]
+ * : Run the Twig-to-PHP parser.
+ *
+ * [--parser]
+ * : Alias for --parse.
+ *
+ * [--json]
+ * : Run the write-json script.
+ *
+ * [--write-json]
+ * : Alias for --json.
+ *
+ * [--css]
+ * : Build CSS assets.
+ *
+ * [--scss]
+ * : Alias for --css.
+ *
+ * [--js]
+ * : Build JavaScript assets.
+ *
+ * [--svg]
+ * : Build SVG assets.
+ *
+ * ## EXAMPLES
+ *
+ *     # Run a full build
+ *     $ npx @penskemediacorp/larva prod
+ *
+ *     # Only run the write-json script.
+ *     $ npx @penskemediacorp/larva prod --write-json
+ *
+ *     # Run builds for CSS & JavaScript.
+ *     $ npx @penskemediacorp/larva prod --css --js
+ *
+ *     # Help command.
+ *     $ npx @penskemediacorp/larva prod --help
+ */
+
+// Dependencies.
+const path = require( 'path' );
+const shell = require( 'shelljs' );
+
+// Construct some paths to point our scripts at.
+const binPath = path.resolve( __dirname, '../bin/larva.js' ); // For sibling scripts.
+
+// CLI arguments.
+const getArgsFromCli = require( '../lib/utils/getArgsFromCli' );
+const cliArgs = getArgsFromCli();
+
+// Handle help command.
+if ( cliArgs.includes( '--help' ) ) {
+	shell.exec( `npx @penskemediacorp/larva help prod` );
+	return;
+}
+
+// Run the Twig-to-PHP parser.
+if (
+	1 === cliArgs.length
+	|| cliArgs.includes( '--parser' )
+	|| cliArgs.includes( '--parse' )
+) {
+	console.log( 'Parsing Twig templates\n\n' );
+	shell.exec( `npx @penskemediacorp/twig-to-php-parser` );
+} else {
+	console.log( 'Skipping Twig templates\n' );
+}
+
+// Run the write-json script.
+if (
+	1 === cliArgs.length
+	|| cliArgs.includes( '--json' )
+	|| cliArgs.includes( '--write-json' )
+) {
+	console.log( 'Building JSON assets\n\n' );
+	shell.exec( `${binPath} write-json` );
+} else {
+	console.log( 'Skipping write-json\n' );
+}
+
+// Build CSS/SCSS.
+if (
+	1 === cliArgs.length
+	|| cliArgs.includes( '--css' )
+	|| cliArgs.includes( '--scss' )
+) {
+	console.log( 'Building CSS assets\n\n' );
+	shell.exec( `${binPath} prod-scss` );
+} else {
+	console.log( 'Skipping building CSS\n' );
+}
+
+// Build JS.
+if (
+	1 === cliArgs.length
+	|| cliArgs.includes( '--js' )
+) {
+	console.log( 'Building JavaScript assets\n\n' );
+	shell.exec( `${binPath} prod-js` );
+} else {
+	console.log( 'Skipping building JavaScript\n' );
+}
+
+// Build SVG.
+if (
+	1 === cliArgs.length
+	|| cliArgs.includes( '--svg' )
+) {
+	console.log( 'Building SVG assets\n\n' );
+	shell.exec( `${binPath} build-icons` );
+	shell.exec( "npx svgo -f src/svg -o build/svg" );
+} else {
+	console.log( 'Skipping building the SVGs\n' );
+}

package/scripts/server.js

@@ -0,0 +1,11 @@
+const path = require( 'path' );
+
+const spawnScript = require( '../lib/utils/spawnScript' );
+
+const scriptLocation = path.join( __dirname, '../lib/start.js' );
+
+const args = [
+	scriptLocation
+];
+
+spawnScript( './node_modules/.bin/nodemon', args );

package/scripts/start.js

@@ -0,0 +1,36 @@
+/**
+ * Start the Larva server.
+ *
+ * ## OPTIONS
+ *
+ * [--help]
+ * : Display usage and examples for this command.
+ *
+ * ## EXAMPLES
+ *
+ *     # Start server.
+ *     $ npx @penskemediacorp/larva start
+ *
+ *     # Help command.
+ *     $ npx @penskemediacorp/larva start --help
+ */
+
+// Dependencies.
+const path = require( 'path' );
+const shell = require( 'shelljs' );
+
+// CLI arguments.
+const getArgsFromCli = require( '../lib/utils/getArgsFromCli' );
+const cliArgs = getArgsFromCli();
+
+// Handle help command.
+if ( cliArgs.includes( '--help' ) ) {
+    shell.exec( `npx @penskemediacorp/larva help start` );
+    return;
+}
+
+// Construct some paths to point our scripts at.
+const binPath = path.resolve( __dirname, '../bin/larva.js' ); // For sibling scripts.
+const patternsPath = path.resolve( process.cwd(), './src/patterns' ); // Relative path to the patterns.
+
+shell.exec( `${binPath} server --watch ${patternsPath} -e twig,html,js` );

package/scripts/upgrade.js

@@ -0,0 +1,99 @@
+/**
+ * Lint JavaScript and CSS files in a Larva project.
+ *
+ * ## OPTIONS
+ *
+ * [--help]
+ * : Display usage and examples for this command.
+ *
+ * [--version]
+ * : Optional. Version of Larva to install. Defaults to 'latest'.
+ *
+ * [--skip-css]
+ * : Skip building CSS assets.
+ *
+ * [--skip-js]
+ * : Skip building JavaScript assets.
+ *
+ * [--skip-build]
+ * : Skip building any assets.
+ *
+ * ## EXAMPLES
+ *
+ *     # Upgrade to latest and kickoff a build.
+ *     $ npx @penskemediacorp/larva upgrade
+ *
+ *     # Skip building CSS assets.
+ *     $ npx @penskemediacorp/larva upgrade --skip-css
+ *
+ *     # Skip both CSS and JavaScript assets.
+ *     $ npx @penskemediacorp/larva upgrade --skip-css --skip-js
+ *
+ *     # Skip the entire build.
+ *     $ npx @penskemediacorp/larva upgrade --skip-build
+ *
+ *     # Upgrade to a specific version
+ *     $ npx @penskemediacorp/larva upgrade --version=0.6.0
+ *
+ *     # Help command.
+ *     $ npx @penskemediacorp/larva upgrade --help
+ */
+// Dependencies.
+const path = require( 'path' );
+const shell = require( 'shelljs' );
+
+// Construct some paths to point our scripts at.
+const binPath = path.resolve( __dirname, '../bin/larva.js' ); // For sibling scripts.
+
+// CLI arguments.
+const getArgsFromCli = require( '../lib/utils/getArgsFromCli' );
+const cliArgs = getArgsFromCli();
+
+// Handle help command.
+if ( cliArgs.includes( '--help' ) ) {
+	shell.exec( `npx @penskemediacorp/larva help upgrade` );
+	return;
+}
+
+// Parse the --version flag. Defaults to 'latest'.
+const getVersionArg = () => {
+
+    // Loop through our args, looking for `--version=`.
+	const versionFlag = cliArgs.find( ( cliArg ) => {
+		if ( ! cliArg.includes( '--version=' ) ) {
+			return false;
+		}
+		return true;
+	} );
+
+    // Did not find it.
+	if ( ! versionFlag ) {
+		return 'latest';
+	}
+
+    // Trip the value down to just the version.
+	const version = versionFlag.replace( '--version=', '' );
+	return version ? version : 'latest';
+};
+
+// Update Larva version installed.
+console.log( `Installing Larva@${getVersionArg()}\n\n` );
+shell.exec( `npm install @penskemediacorp/larva@${getVersionArg()}` );
+
+// Build CSS.
+if (
+	! cliArgs.includes( '--skip-css' )
+	|| cliArgs.includes( '--skip-build' )
+) {
+	console.log( 'Building CSS assets\n\n' );
+	shell.exec( `${binPath} prod-scss` );
+}
+
+// Build JavaScript.
+if (
+	! cliArgs.includes( '--skip-js' )
+	|| cliArgs.includes( '--skip-build' )
+) {
+	console.log( 'Building JavaScript assets\n\n' );
+	shell.exec( `${binPath} prod-js` );
+}

package/scripts/write-json.js

@@ -0,0 +1,14 @@
+const chalk = require( 'chalk' );
+
+const getAppConfiguration = require( '../lib/utils/getAppConfiguration' );
+const getArgsFromCli = require( '../lib/utils/getArgsFromCli' );
+const writeJson = require( '../lib/writeJson' );
+
+const config = getAppConfiguration( 'patterns' );
+const cliArgs = getArgsFromCli();
+
+let fromLarva = 'larva' === cliArgs[1] ? true : false;
+
+console.log( chalk.bold( `\n---- ${cliArgs[1] || 'Project'} JSON ----\n` ) );
+
+writeJson( config, fromLarva );

package/__tests__/_test-boilerplate.js

@@ -1,12 +0,0 @@
-const assert = require( 'assert' );
-const path = require( 'path' );
-const fixture = path.join( __dirname, '../../fixtures' );
-
-// const { getProjectNodeModulesPath } = require( '../../../lib/utils/utils' );
-// const appConfiguration = require( '../../../lib/utils/getAppConfiguration' )('patterns');
-
-describe( 'describe the test', () => {
-	it( 'does a thing', () => {
-		// assert.equal( 1, 1);
-	});
-});

package/__tests__/fixtures/src/patterns/04-components/c-nav-link/c-nav-link.json

@@ -1,3 +0,0 @@
-{
-	"modifier_class": "not expected"
-}

package/__tests__/fixtures/src/patterns/04-components/c-nav-link/c-nav-link.prototype.js

@@ -1,3 +0,0 @@
-module.exports = {
-	"modifier_class": ""
-};

package/__tests__/fixtures/src/patterns/04-components/c-nav-link/c-nav-link.twig

@@ -1,3 +0,0 @@
-<a class="c-nav-link {{ c_nav_link_classes }}" href="{{ c_nav_link_url }}">
-	{{ c_nav_link_text }}
-</a>

package/__tests__/fixtures/src/patterns/05-objects/o-crap/o-crap.json

@@ -1,3 +0,0 @@
-{
-	"o_crap_classes": "hello class here"
-}

package/__tests__/fixtures/src/patterns/05-objects/o-crap/o-crap.twig

@@ -1 +0,0 @@
-<p class="o-crap {{ modifier_class }} {{ o_crap_classes }}">{{ o_crap_text }}</p>

package/__tests__/fixtures/src/patterns/05-objects/o-nav/o-nav.twig

@@ -1,14 +0,0 @@
-<nav class="o-nav {{ modifier_class }} {{ o_nav_classes }}" data-dropdown="{{ o_nav_data_attributes }}">
-
-	{% if o_nav_title_text %}
-		<h4 class="o-nav__title {{ o_nav_title_classes }}" data-dropdown-list-item="{{ o_nav_title_data_attributes }}"> {{ o_nav_title_text }}</h4>
-	{% endif %}
-
-	<ul class="o-nav__list {{ o_nav_list_classes }}" data-dropdown-list="{{ o_nav_list_data_attributes }}">
-		{% for item in o_nav_list_items %}
-			<li class="o-nav__list-item {{ o_nav_list_item_classes }}" data-dropdown-list-item="{{ o_nav_list_item_data_attributes }}">
-				{% include "../../04-components/c-nav-link/c-nav-link.twig" with item %}
-			</li>
-		{% endfor %}
-	</ul>
-</nav>

package/__tests__/fixtures/src/patterns/06-algorithms/a-icon/a-icon.common.inline.scss

@@ -1,3 +0,0 @@
-.pmc-a-icon {
-	color: red;
-}

package/__tests__/fixtures/src/patterns/06-algorithms/a-wrapper/a-wrapper.common.inline.scss

@@ -1,3 +0,0 @@
-.pmc-a-wrapper {
-	margin: auto;
-}

package/__tests__/fixtures/src/patterns/07-utilities/u-test-three.common.async.scss

@@ -1,3 +0,0 @@
-.u-test-three {
-	display: flex;
-}

package/__tests__/fixtures/src/patterns/07-utilities/u-test-two.common.inline.scss

@@ -1,8 +0,0 @@
-$color_list: (
-	blue: #429AE7,
-	orange: #F77841,
-);
-
-.test-two {
-	background-color: map-get( $color_list, blue );
-}

package/__tests__/fixtures/src/patterns/07-utilities/u-test.common.inline.scss

@@ -1,8 +0,0 @@
-$color_list: (
-	blue: #429AE7,
-	orange: #F77841,
-);
-
-.test {
-	color: map-get( $color_list, orange );
-}

package/__tests__/fixtures/src/patterns/08-modules/breadcrumbs/breadcrumbs.twig

@@ -1 +0,0 @@
-{% include "@larva/o-nav.twig" with o_nav %}

package/__tests__/lib/build.test.js

@@ -1,20 +0,0 @@
-const fs = require( 'fs' );
-const assert = require( 'assert' );
-const path = require( 'path' );
-const build = require( '../../lib/build' );
-const fixture = path.join( __dirname, '../fixtures' );
-const getScssResultFilePath = require( '../../lib/utils/getScssResultFilePath' );
-
-const changedFilePathStub = path.join( fixture, './src/patterns/06-algorithms/a-wrapper/a-wrapper.common.inline.scss' );
-const resultFileStub = getScssResultFilePath( changedFilePathStub, 'common.inline' );
-
-const beforeStat = fs.statSync( resultFileStub ).atime;
-
-describe( 'build', () => {
-	
-	// Not a great test, but better than nothing?
-	it( 'accesses the file to build', () => {
-		build( 'common.inline', changedFilePathStub );
-		assert.notEqual( fs.statSync( resultFileStub ).atime, beforeStat );
-	});
-});

package/__tests__/lib/utils/buildPatternFilePath.test.js

@@ -1,18 +0,0 @@
-const assert = require( 'assert' );
-const path = require( 'path' );
-const fixture = path.resolve( __dirname, '../../fixtures' );
-const buildPatternFilePath = require( '../../../lib/utils/buildPatternFilePath' );
-
-const expectedPathForLarva = fixture + '/src/patterns/objects/o-nav/o-nav.json';
-const expectedPathForProject = '/assets/src/patterns/objects/o-nav/o-nav.json';
-
-describe( 'buildPatternFilePath', () => {
-
-	it( 'builds a path for o-nav json in larva', () => {
-		assert.equal( buildPatternFilePath( fixture + '/src/patterns', 'o-nav', '.json' ), expectedPathForLarva );
-	});
-
-	it( 'builds a path for o-nav json in consuming project', () => {
-		assert.equal( buildPatternFilePath( '/assets/src/patterns', 'o-nav', '.json' ), expectedPathForProject );
-	});
-});

package/__tests__/lib/utils/concatenateFileData.test.js

@@ -1,26 +0,0 @@
-'use strict';
-
-const path = require( 'path' ); 
-const { concatenateFileData } = require( '../../../lib/utils/utils' );
-const fixture = path.resolve( __dirname, '../../fixtures' );
-
-describe( 'concatenateFileData', () => {
-	it( 'concats data from files in array', () => {
-		let paths = [
-			path.join( fixture, './src/patterns/07-utilities/u-test.common.inline.scss' ),
-			path.join( fixture, './src/patterns/07-utilities/u-test-two.common.inline.scss' ),
-		];
-
-		let stringsExpected = [
-			'.test',
-			'.test-two'
-		];
-
-		return concatenateFileData( paths ).then( ( result ) => {
-			stringsExpected.forEach( string => {
-				expect( result ).toContain( string );
-			});
-		});
-
-	});
-});

package/__tests__/lib/utils/getPatternDataPath.test.js

@@ -1,19 +0,0 @@
-const assert = require( 'assert' );
-const path = require( 'path' );
-const fixture = path.join( __dirname, '../../fixtures' );
-const getPatternDataPath = require( '../../../lib/utils/getPatternDataPath' );
-
-const expectedPrototypePath = path.join( fixture, 'src/patterns/components/c-nav-link/c-nav-link.prototype.js' );
-const expectedJsonPath = path.join( fixture, 'src/patterns/objects/o-crap/o-crap.json' );
-
-describe( 'getPatternDataPath', () => {
-	it( 'gets the path to .prototype.js if it exists', () => {
-		assert.equal( getPatternDataPath( fixture + '/src/patterns', 'c-nav-link' ), expectedPrototypePath );
-	});
-
-	it( 'gets the path to .json if .prototype does not exist', () => {
-		assert.equal( getPatternDataPath( fixture + '/src/patterns', 'o-crap' ), expectedJsonPath );
-	});
-});
-
-

package/__tests__/lib/utils/getPatternDigit.test.js

@@ -1,13 +0,0 @@
-const assert = require( 'assert' );
-const getPatternDigit = require( '../../../lib/utils/getPatternDigit' );
-
-describe( 'getPatternDigit', () => {
-
-	it( 'returns 05 for objects', () => {
-		assert.equal( getPatternDigit( 'o-nav' ), '05-' );
-	});
-
-	it( 'returns 08 for no namespace (modules)', () => {
-		assert.equal( getPatternDigit( 'breadcrumbs' ), '08-' );
-	});
-});

package/__tests__/lib/utils/getScssPathsWithExtension.test.js

@@ -1,29 +0,0 @@
-const path = require( 'path' ); 
-const { getScssPathsWithExtension } = require( '../../../lib/utils/utils' );
-const fixture = path.resolve( __dirname, '../../fixtures' );
-const changedFilePathStub = path.join( fixture, './src/patterns/06-algorithms/a-wrapper/a-wrapper.common.inline.scss' );
-
-describe('getScssPathsWithExtension', () => {
-
-	it( 'gets files from nested directories', () => {
-		return getScssPathsWithExtension( 'common.inline', changedFilePathStub )
-		.then( ( result ) => {
-			expect( result.length ).toBe( 4 ); // 2 in algorithms, 2 in utilities
-			console.log( result );
-			
-			result.forEach( string => {
-				expect( path.parse( string ).name ).toContain( 'common.inline' );
-			});
-		});
-	});
-
-	it('gets only files with the .common.inline.scss extension', () => {
-		return getScssPathsWithExtension( 'common.inline', changedFilePathStub )
-		.then( ( result ) => {
-			expect( result.length ).toBe( 1 );
-			result.forEach( string => {
-				expect( path.parse( string ).name ).toContain( 'common.inline' );
-			});
-		});
-	});
-});

package/__tests__/lib/utils/getScssResultCss.test.js

@@ -1,16 +0,0 @@
-const assert = require( 'assert' );
-const path = require( 'path' );
-const fixture = path.join( __dirname, '../../fixtures' );
-const changedFilePath = path.join( fixture, './src/patterns/06-algorithms/a-wrapper/a-wrapper.common.inline.scss' );
-
-const getScssResultCss = require( '../../../lib/utils/getScssResultCss' );
-
-describe( 'getScssResultCss', () => {
-	it( 'returns css from multiple scss files', () => {
-		
-		return getScssResultCss( 'common.inline', changedFilePath ).then( ( result ) => {
-			// This string will be overridden if the files are not concatenating properly.
-			expect( result ).toEqual( expect.stringContaining( '.pmc-a-icon' ) );
-		});
-	});
-});

package/__tests__/lib/utils/getScssResultFilePath.test.js

@@ -1,14 +0,0 @@
-const assert = require( 'assert' );
-const path = require( 'path' );
-const fixture = path.join( __dirname, '../../fixtures' );
-const getScssResultFilePath = require( '../../../lib/utils/getScssResultFilePath' );
-
-const stubSassFilePath = '/path/to/css-utilities/src/07-utilities/u-thing/u-display.common.inline.scss';
-
-const expectedResultFilePath = '/path/to/css-utilities/build/css/common.inline.css';
-
-describe( 'getScssResultFilePath', () => {
-	it( 'gets the path of the output CSS file path', () => {
-		assert.equal( getScssResultFilePath( stubSassFilePath, 'common.inline' ), expectedResultFilePath );
-	});
-});

package/lib/build.js

@@ -1,16 +0,0 @@
-'use strict';
-
-const chalk = require( 'chalk' );
-const fs = require( 'fs' );
-const path = require( 'path' );
-const getScssResultFilePath = require( './utils/getScssResultFilePath' );
-const getScssResultCss = require( './utils/getScssResultCss' );
-
-module.exports = function build( extension, changedFilePath ) {
-	let resultFile = getScssResultFilePath( changedFilePath, extension );
-	
-	getScssResultCss( extension, changedFilePath ).then( ( resultCss ) => {
-		fs.writeFileSync( resultFile, resultCss );
-	}).catch( e => console.error( e ) );
-
-};

package/lib/utils/buildPatternFilePath.js

@@ -1,13 +0,0 @@
-const getPatternType = require( './getPatternType' );
-const getPatternDigit = require( './getPatternDigit' );
-
-module.exports = function buildPatternFilePath( patternsPath, name, ext ) {
-	const patternType = getPatternType( name );
-	let patternDigit = getPatternDigit( name );
-
-	// if ( patternsPath.includes( 'larva' ) ) {
-		patternDigit = '';
-	// }
-
-	return patternsPath + '/' + patternDigit + patternType + '/' + name +'/' + name + ext;
-}

package/lib/utils/concatenateFileData.js

@@ -1,19 +0,0 @@
-const fs = require( 'fs' );
-const path = require( 'path' );
-
-module.exports = function concatenateFileData( filePaths ) {
-
-	return new Promise( ( resolve, reject ) => {
-		let data = '';
-		
-		filePaths.forEach( filePath => {
-			data += fs.readFileSync( filePath ).toString();
-		});
-		
-		if ( data === '' ) {
-			reject( 'No content with this file extension.' );
-		}
-
-		resolve( data );
-	});
-}

package/lib/utils/getPatternDataPath.js

@@ -1,16 +0,0 @@
-const fs = require( 'fs' );
-const chalk = require( 'chalk' );
-const buildPatternFilePath = require( './buildPatternFilePath' );
-
-module.exports = function getPatternDataPath( patternsPath, patternName ) {
-	const protoPath = buildPatternFilePath( patternsPath, patternName, '.prototype.js' ).toString();
-	const jsonPath = buildPatternFilePath( patternsPath, patternName, '.json' ).toString();
-
-	if ( fs.existsSync( protoPath ) ) {
-		return protoPath;
-	} else if ( fs.existsSync( jsonPath ) ) {
-		return jsonPath;
-	}
-
-	throw new Error( chalk.red( `Couldn\'t find a .prototype.js or .json file for ${patternName}.\nLooked in ${patternsPath}.` ) );
-}