@penskemediacorp/larva 1.2.0-alpha.0 → 1.2.0

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__/larva.test.js

@@ -1,7 +0,0 @@
-'use strict';
-
-const larva = require('@larva/patterns');
-
-describe('larva', () => {
-    tests.todo( 'should exist' );
-});

package/lib/larva.js

@@ -1,7 +0,0 @@
-'use strict';
-
-module.exports = larva;
-
-function larva() {
-	// TODO
-}

package/lib/patterns.js

@@ -1,48 +0,0 @@
-const { TwingEnvironment, TwingLoaderFilesystem, TwingLoaderArray, TwingLoaderChain } = require('twing');
-const path = require( 'path' );
-const fs = require( 'fs' );
-const app = require('express')();
-const port = process.env.NODE_PORT || 3000;
-
-// Could do something like this to trim down pathing:
-// function larva( patternName ) {
-// 	let patternDir = 'modules';
-
-// 	if ( 'o-' === patternName.substring( 0, 2 ) ) {
-// 		patternDir = 'objects';
-// 	}
-
-// 	if ( 'c-' === patternName.substring( 0, 2 ) ) {
-// 		patternDir = 'components';
-// 	}
-
-// 	return fs.readFileSync( path.resolve( __dirname, '../src/' + patternDir + '/' + patternName + '/' + patternName +'.twig'), 'utf8' );
-// }
-
-// let loader1 = new TwingLoaderArray({
-// 	'@larva/o-tease-list.twig': larva( 'o-tease-list' ),
-// 	'@larva/o-tease.twig': larva( 'o-tease' ),
-// 	'@larva/c-title.twig': larva( 'c-title' ),
-// 	'@larva/c-figure.twig': larva( 'c-figure' ),
-// });
-
-let loader = new TwingLoaderFilesystem( path.resolve( __dirname, '../node_modules/' ) );
-
-loader.addPath( path.resolve( __dirname, '../src/' ), 'larva');
-
-let twing = new TwingEnvironment( loader );
-
-app.get( '/', function (req, res) {
-	res.end( twing.render( 'index.twig', { data: data, 'pattern': 'Welcome' } ) );
-})
-
-app.get( '/:type/:name', function (req, res) {
-
-	let data = require( '../src/' + req.params.type + '/' + req.params.name +'/' + req.params.name + '-prototype' );
-	req.params[ 'data' ] = data;
-	res.end( twing.render( 'index.twig', req.params ) );
-})
-
-app.listen(port, () => {
-	console.log('Node.js Express server listening on port '+port);
-});

package/setup.scss

@@ -1 +0,0 @@
-@import '01-tools/tools';

package/src/02-generic/breakpoint-label.scss

@@ -1,33 +0,0 @@
-// Add a label in the bottom right to indicate the current breakpoint.
-@import '../setup.scss';
-
-body::after {
-	position: fixed;
-	bottom: 0;
-	right: 0;
-	padding: 1rem 2rem;
-	background-color: navy;
-	color: lemonchiffon;
-	font-family: sans-serif;
-	content: 'between mobile and tablet';
-
-	@media( max-width: $pmc-screen-mobile ) {
-		content: 'mobile-max';
-		background-color: dodgerblue;
-	}
-
-	@media( min-width: $pmc-screen-tablet ) {
-		content: 'tablet';
-		background-color: coral;
-	}
-
-	@media( min-width: $pmc-screen-desktop ) {
-		content: 'desktop';
-		background-color: rebeccapurple;
-	}
-
-	@media( min-width: $pmc-screen-desktop-xl ) {
-		content: 'desktop-xl';
-		background-color: orangered;
-	}
-}

package/src/06-algorithms/a-glue/a-glue.html

@@ -1,4 +0,0 @@
-<div class="a-glue-parent">
-	<img src="http://placehold.it/300x300" alt="">
-	<p class="a-glue {{ modifier_class }} kss-box">Glued Element</p>
-</div>

package/src/06-algorithms/a-glue/a-glue.scss

@@ -1,56 +0,0 @@
-// Glue
-//
-// This is a handy utility for positioning one element over another when no
-// media queries are necessary (though it could be adapted to use media queries
-// with @breakpoint suffixes. Read more here: https://notlaura.com/u-glue/
-//
-// Usage notes
-// 1. Apply `a-glue-parent` to the parent element of the glued item.
-// 2. Apply `a-glue` to the item to glue.
-// 3. Apply a modifier of `a-glue--tr-0`, `a-glue--b-100p`, etc. to position the glued item. These modifiers do not need to be in breakpoints, unless the glued item is positioned relatively below the breakpoint (which is not the browser default). They should follow the same naming as u-margin and u-padding classes.
-//
-// .a-glue--tr-0 - Glue an item to the top right.
-// .a-glue--t-100p - Glue an item at 100% of it's parent's height.
-//
-// Markup: a-glue.html
-//
-// Style Guide: Algorithms.Glue
-
-@import '~@setup';
-
-@mixin _pmc-a-glue-base {
-	position: absolute;
-	z-index: $z-index-middle-bottom;
-	top: var( --a-glue-top, initial );
-	bottom: var( --a-glue-bottom, initial );
-	right: var( --a-glue-right, initial );
-	left: var( --a-glue-left, initial );
-}
-
-.pmc-a-glue-parent {
-	position: relative;
-}
-
-.pmc-a-glue {
-	// Fallback is top left for everything.
-	top: 0;
-	left: 0;
-
-	@include _pmc-a-glue-base;
-}
-
-.pmc-a-glue--l-0 {
-	--a-glue-left: 0;
-}
-
-.pmc-a-glue--r-0 {
-	--a-glue-right: 0;
-}
-
-.pmc-a-glue--t-0 {
-	--a-glue-top: 0;
-}
-
-.pmc-a-glue--b-0 {
-	--a-glue-bottom: 0;
-}

package/src/06-algorithms/a-glue/index.js

@@ -1 +0,0 @@
-import './a-glue.scss';

package/src/06-algorithms/a-grid.scss

@@ -1,29 +0,0 @@
-@import '../setup';
-
-.pmc-a-grid {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: start;
-
-	@supports ( display: grid ) {
-		--cols: 1;
-
-		display: grid;
-		grid-gap: 1.25rem;
-		grid-template-columns: repeat( var( --cols ), minmax( 0, 1fr ) );
-	}
-}
-
-.pmc-a-grid-item {
-	// Remove flex charactaristics to honor flex-basis value.
-	flex: none;
-	padding: 0.625rem;
-
-	@supports ( display: grid ) {
-		padding: 0;
-	}
-}
-
-@mixin pmc-a-grid( $grids ) {
-	@include _grid-class-generator( $grids );
-};

package/src/07-utilities/u-background.scss

@@ -1,5 +0,0 @@
-@import '../setup';
-
-@mixin pmc-u-background( $colors, $color_list ) {
-	@include _color-class-generator( 'background-color', $colors, $color_list );
-}

package/src/07-utilities/u-color.scss

@@ -1,5 +0,0 @@
-@import '../setup';
-
-@mixin pmc-u-color( $colors, $color_list ) {
-	@include _color-class-generator( 'color', $colors, $color_list );
-}

package/src/07-utilities/u-crop.scss

@@ -1,5 +0,0 @@
-@import '../setup';
-
-@mixin pmc-u-crop( $aspect-ratios ) {
-	@include _crop-class-generator( $aspect-ratios );
-}

package/src/07-utilities/u-flex.scss

@@ -1,35 +0,0 @@
-// Flex
-//
-// Utility patterns can be either atomic utilities (single classes applying properties and values)
-// or more fully-featured utilities such as the `u-grid` or `u-bg-dots` that provide a means of
-// grouping related declarations and applying variations.
-//
-// **Naming:** `.u-flex-[property]-[value]`
-//
-// .pmc-u-flex - Display flex.
-// .pmc-u-flex-direction-column - Flex direction column.
-// .pmc-u-flex-justify-content-center - Justify content center.
-// .pmc-u-flex-align-items-start - Align items start.
-// .pmc-u-flex-order-n1 - Order -1.
-//
-// Style guide: Utilities.Flex
-
-.pmc-u-flex {
-	display: flex;
-}
-
-.pmc-u-flex-direction-column {
-	flex-direction: column;
-}
-
-.pmc-u-flex-justify-content-center {
-	justify-content: center;
-}
-
-.pmc-u-flex-align-items-start {
-	align-items: flex-start;
-}
-
-.pmc-u-flex-wrap-wrap {
-	flex-wrap: wrap;
-}

package/src/07-utilities/u-margin.scss

@@ -1,5 +0,0 @@
-@import '../setup';
-
-@mixin pmc-u-margin( $margins ) {
-	@include _spacing-class-generator( 'margin', $margins );
-}

package/src/07-utilities/u-padding.scss

@@ -1,5 +0,0 @@
-@import '../setup';
-
-@mixin pmc-u-padding( $paddings ) {
-	@include _spacing-class-generator( 'padding', $paddings );
-}

package/src/07-utilities/u-text.scss

@@ -1,33 +0,0 @@
-@import '../setup';
-
-.pmc-u-text-transform-uppercase {
-	text-transform: uppercase;
-}
-
-.pmc-u-text-align-center {
-	text-align: center;
-}
-
-.pmc-u-text-align-right {
-	text-align: right;
-}
-
-.pmc-u-text-align-left {
-	text-align: left;
-}
-
-@mixin pmc-u-font-family( $tokens, $available_tokens ) {
-	@include _text-class-generator('font-family', $tokens, $available_tokens);
-}
-
-@mixin pmc-u-line-height( $tokens, $available_tokens ) {
-	@include _text-class-generator('line-height', $tokens, $available_tokens);
-}
-
-@mixin pmc-u-font-size( $tokens ) {
-	@include _text-class-generator('font-size', $tokens);
-}
-
-@mixin pmc-u-font-weight( $tokens, $available_tokens ) {
-	@include _text-class-generator('font-weight', $tokens, $available_tokens);
-}

package/src/07-utilities/utilities.scss

@@ -1,5 +0,0 @@
-@import 'u-crop';
-@import 'u-flex';
-@import 'u-margin';
-@import 'u-padding';
-@import 'u-text';

package/static/css/components.css

@@ -1,4 +0,0 @@
-.c-nav-link,
-.c-nav-link:hover {
-  color: currentColor;
-  text-decoration: none; }

package/static/css/objects.css

@@ -1,21 +0,0 @@
-.o-nav__list {
-  list-style-type: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0; }
-
-.o-nav--flexy .o-nav__list {
-  display: flex;
-  justify-content: center;
-  align-items: center; }
-
-.o-nav--horizontal .o-nav__list {
-  display: flex;
-  align-items: center; }
-
-.o-nav--flexy .o-nav__list-item {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem; }
-
-.o-nav--flexy .o-nav__list-item:last-child {
-  border-right: 0; }