@caweb/cli 1.1.0 → 1.3.0

package/lib/{download-sources.js → wordpress/download-sources.js}

@@ -29,81 +29,6 @@ const pipeline = util.promisify( stream.pipeline );
 const extractZip = util.promisify( zip );
 const rimraf = util.promisify( rim );
 
-/**
- * Download CAWeb Resources.
- * 
- * @param {Object}   spinner The spinner object to show progress.
- * @return {WPConfig} The config object we've loaded.
- */
-async function downloadSources( 
-	{ 
-		spinner,
-		config
-	}  
-	) {
-	const progresses = {};
-	const getProgressSetter = ( id ) => ( progress ) => {
-		progresses[ id ] = progress;
-		spinner.text =
-			`Downloading ${id}.\n` +
-			Object.entries( progresses )
-				.map(
-					( [ key, value ] ) =>
-						`  - ${ key }: ${ ( value * 100 ).toFixed( 0 ) }/100%`
-				)
-				.join( '\n' );
-	};
-
-	const { workDirectoryPath } = config;
-	const { development: dev, tests: test } = config.env;
-
-	let pluginDir = path.resolve(workDirectoryPath, 'plugins');
-	let themeDir = path.resolve(workDirectoryPath, 'themes');
-
-	let sources = dowloadPlugins(pluginDir);
-
-	// Add Divi Theme and plugin to sources.
-	if( (undefined !== dev.config.ET_USERNAME && 
-		undefined !== dev.config.ET_API_KEY) || 
-		(undefined !== test.config.ET_USERNAME && 
-		undefined !== test.config.ET_API_KEY)
-	){
-		let url = 'https://www.elegantthemes.com/api/api_downloads.php';
-		let user = undefined !== dev.config.ET_USERNAME ? dev.config.ET_USERNAME : test.config.ET_USERNAME;
-		let key = undefined !== dev.config.ET_API_KEY ? dev.config.ET_API_KEY : test.config.ET_API_KEY;
-		
-		// Add Divi sources.
-		sources = sources.concat( [
-			{
-				basename: 'Divi',
-				url: `${url}?api_update=1&theme=Divi&api_key=${key}&username=${user}`,
-				path: path.join(themeDir, 'Divi'),
-				type: 'zip'
-			},
-			{
-				basename: 'Divi Plugin',
-				url: `${url}?api_update=1&theme=divi-builder&api_key=${key}&username=${user}`,
-				path: path.join(pluginDir, 'divi-builder'),
-				type: 'zip'
-			}
-		]);
-	}
-
-	// Ensure plugin/theme directory exists for downloading resources.
-	fs.ensureDir(themeDir);
-	fs.ensureDir(pluginDir);
-
-	 await Promise.all(
-		sources.map( ( source ) =>
-			downloadSource( source, {
-				onProgress: getProgressSetter( source.basename ),
-				spinner,
-			} )
-		)
-	);
-	
-};
-
 /**
  * Downloads the given source if necessary. The specific action taken depends
  * on the source type. The source is downloaded to source.path.
@@ -256,7 +181,7 @@ function dowloadPlugins(pluginDir){
 	return [
 		{
 			basename: 'Design System',
-			url: 'https://github.com/CA-CODE-Works/design-system-wordpress.git',
+			url: 'https://github.com/CAWebPublishing/design-system-wordpress.git',
 			ref: 'main',
 			path: path.join(pluginDir, 'design-system-wordpress'),
 			clonePath: path.join(pluginDir, 'design-system-wordpress'),
@@ -272,6 +197,77 @@ function dowloadPlugins(pluginDir){
 	]
 }
 
-export {
-	downloadSources
-}
+/**
+ * Download CAWeb Resources.
+ * 
+ * @param {Object}   spinner The spinner object to show progress.
+ * @return {WPConfig} The config object we've loaded.
+ */
+export async function downloadSources( 
+	{ 
+		spinner,
+		config
+	}  
+	) {
+	const progresses = {};
+	const getProgressSetter = ( id ) => ( progress ) => {
+		progresses[ id ] = progress;
+		spinner.text =
+			`Downloading ${id}.\n` +
+			Object.entries( progresses )
+				.map(
+					( [ key, value ] ) =>
+						`  - ${ key }: ${ ( value * 100 ).toFixed( 0 ) }/100%`
+				)
+				.join( '\n' );
+	};
+
+	const { workDirectoryPath } = config;
+	const { development: dev, tests: test } = config.env;
+
+	let pluginDir = path.resolve(workDirectoryPath, 'plugins');
+	let themeDir = path.resolve(workDirectoryPath, 'themes');
+
+	let sources = dowloadPlugins(pluginDir);
+
+	// Add Divi Theme and plugin to sources.
+	if( (undefined !== dev.config.ET_USERNAME && 
+		undefined !== dev.config.ET_API_KEY) || 
+		(undefined !== test.config.ET_USERNAME && 
+		undefined !== test.config.ET_API_KEY)
+	){
+		let url = 'https://www.elegantthemes.com/api/api_downloads.php';
+		let user = undefined !== dev.config.ET_USERNAME ? dev.config.ET_USERNAME : test.config.ET_USERNAME;
+		let key = undefined !== dev.config.ET_API_KEY ? dev.config.ET_API_KEY : test.config.ET_API_KEY;
+		
+		// Add Divi sources.
+		sources = sources.concat( [
+			{
+				basename: 'Divi',
+				url: `${url}?api_update=1&theme=Divi&api_key=${key}&username=${user}`,
+				path: path.join(themeDir, 'Divi'),
+				type: 'zip'
+			},
+			{
+				basename: 'Divi Plugin',
+				url: `${url}?api_update=1&theme=divi-builder&api_key=${key}&username=${user}`,
+				path: path.join(pluginDir, 'divi-builder'),
+				type: 'zip'
+			}
+		]);
+	}
+
+	// Ensure plugin/theme directory exists for downloading resources.
+	fs.ensureDir(themeDir);
+	fs.ensureDir(pluginDir);
+
+	 await Promise.all(
+		sources.map( ( source ) =>
+			downloadSource( source, {
+				onProgress: getProgressSetter( source.basename ),
+				spinner,
+			} )
+		)
+	);
+	
+};

package/lib/wordpress/index.js

@@ -0,0 +1,16 @@
+import { activateCAWeb, configureCAWeb } from "./caweb.js";
+import { downloadSources } from "./download-sources.js";
+import { configureDivi, isDiviThemeActive } from "./divi.js";
+import { configureWordPress, isMultisite, convertToMultisite, generateHTAccess } from "./wordpress.js";
+
+export {
+    activateCAWeb,
+    configureCAWeb,
+    downloadSources,
+	configureDivi,
+	isDiviThemeActive,
+	configureWordPress,
+	isMultisite,
+	convertToMultisite,
+	generateHTAccess
+}

package/lib/{options.js → wordpress/options.js}

@@ -170,7 +170,7 @@ const github_options = {
 	},
 	CAWEB_GIT_USER: {
 		name: 'caweb_username',
-		defaultValue: 'CA-CODE-Works',
+		defaultValue: 'CAWebPublishing',
 		label: 'Username'
 	},
 	CAWEB_ACCESS_TOKEN: {

package/lib/{wordpress.js → wordpress/wordpress.js}

@@ -1,18 +1,14 @@
 /**
  * External dependencies
  */
-import fs from 'fs-extra';
-import path from 'node:path';
+import fs from 'fs';
+import path from 'path';
 
 /**
  * Internal dependencies
  */
-import {runCLICmds} from './docker.js';
+import {runCLICmds} from '../helpers.js';
 
-/**
- * Promisified dependencies
- */
-const { writeFile } = fs.promises;
 
 /**
  * Checks whether WordPress environment is a multisite installation.
@@ -128,7 +124,7 @@ async function generateHTAccess(environment, workDirectoryPath, subdomain){
 
 	let folder = 'development' === environment ? 'WordPress' : 'Tests-WordPress'
 
-	await writeFile(path.join(workDirectoryPath, folder, '.htaccess'), htaccess);
+	fs.writeFileSync(path.join(workDirectoryPath, folder, '.htaccess'), htaccess);
 
 }
 

package/package.json

@@ -1,55 +1,47 @@
 {
   "name": "@caweb/cli",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "CAWebPublishing Command Line Interface.",
   "exports": "./lib/env.js",
   "type": "module",
-  "node": ">=16",
-  "files": [
-    "bin",
-    "lib"
-  ],
-  "directories": {
-    "doc": "docs",
-    "lib": "lib"
-  },
+  "node": ">=20",
+  "author": "CAWebPublishing",
+  "license": "ISC",
   "bin": {
     "caweb": "bin/caweb"
   },
+  "files": [
+    "assets",
+    "bin",
+    "commands",
+    "configs",
+    "gen",
+    "lib",
+    "template"
+  ],
   "scripts": {
-    "caweb": "caweb",
-    "wp-env": "wp-env",
-    "local": "npm pack && npm i caweb-cli-%npm_package_version%.tgz",
     "test": "echo \"Error: run tests from root\" && exit 0"
   },
+  "homepage": "https://github.com/CAWebPublishing/caweb-cli#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/CAWebPublishing/caweb-cli.git"
   },
+  "bugs": {
+    "url": "https://github.com/CAWebPublishing/caweb-cli/issues"
+  },
   "keywords": [
     "caweb",
     "cagov"
   ],
-  "author": "CAWebPublishing",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/CAWebPublishing/caweb-cli/issues"
-  },
   "publishConfig": {
     "access": "public"
   },
-  "homepage": "https://github.com/CAWebPublishing/caweb-cli#readme",
-  "dependencies": {
-    "@wordpress/env": "^9.0.0",
-    "chalk": "^4.0.0",
-    "commander": "^11.1.0",
-    "fs-extra": "^11.1.1"
-  },
   "config": {
-    "WP_VER": "6.4.2",
+    "WP_VER": "6.4.3",
     "PHP_VER": "8.1",
+    "CREATE_BLOCK_VER": "4.32.0",
     "DEFAULTS": {
-      "WP_DEFAULT_THEME": "CAWeb",
       "FS_METHOD": "direct",
       "WP_DEBUG": true,
       "WP_DEBUG_LOG": true,
@@ -63,5 +55,28 @@
       "SITECOOKIEPATH": "",
       "CONCATENATE_SCRIPTS": false
     }
+  },
+  "dependencies": {
+    "@wordpress/env": "^9.2.0",
+    "@wordpress/scripts": "^27.1.0",
+    "accessibility-checker": "^3.1.67",
+    "autoprefixer": "^10.4.17",
+    "axios": "^1.6.7",
+    "chalk": "^5.3.0",
+    "commander": "^12.0.0",
+    "cross-spawn": "^7.0.3",
+    "css-loader": "^6.10.0",
+    "docker-compose": "^0.24.3",
+    "handlebars-loader": "^1.7.3",
+    "html-to-json-parser": "^2.0.0",
+    "html-webpack-plugin": "^5.6.0",
+    "mini-css-extract-plugin": "^2.8.0",
+    "ora": "^8.0.1",
+    "postcss-loader": "^8.1.0",
+    "resolve-bin": "^1.0.1",
+    "sass-loader": "^14.1.0",
+    "terminal-link": "^3.0.0",
+    "url": "^0.11.3",
+    "webpack": "^5.90.1"
   }
 }

package/template/assets/css/popover.css

@@ -0,0 +1,80 @@
+
+  .popover-content {
+    position: absolute;
+    display: flex;
+    flex-direction: column-reverse;
+    row-gap: .5rem;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    background-color: white;
+    padding: 1rem;
+    z-index: 100;
+    outline: 0;
+    border-radius: .5rem;
+    overflow: visible;
+    pointer-events: none;
+    --shadow-color: 220 3% 15%;
+    --shadow-strength: 1%;
+    box-shadow:  5px 7px 15px grey;
+  }
+  .popover-content:focus {
+    outline: 2px solid var(--highlight-color, #fec02f);
+  }
+  
+  .popover-container {
+    position: relative;
+    width: fit-content;
+  }
+  
+  .popover-content::before {
+    content: '';
+    position: absolute;
+    width: 1rem;
+    height: 1rem;
+    left: 0;
+    top: 50%;
+    background-color: white;
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+  .popover-revealed {
+    width: max-content;
+    height: max-content;
+    left: var(--x);
+    top: var(--y);
+    transform: translateY(-50%);
+  }
+  @media screen and (max-width: 950px) {
+    .popover-content::before {
+      content: none;
+    }
+    .popover-revealed {
+      left: calc(50% + var(--x-offset-m, 0%));
+      transform: translate(-50%, 0);
+    }
+  }
+  
+  .popover-legend {
+    display: flex;
+    flex-direction: row;
+    gap: .75rem;
+    align-items: flex-start;
+  }
+  
+  .popover-legend svg {
+    height: 1.5em;
+  }
+
+  .popover-revealed p {
+    font-weight: 400;
+    font-size: 1em;
+  }
+  
+  .popover-header {
+    margin: 0;
+  }
+  
+  .popover-stat {
+    margin: 0 0 .5rem 0;
+  }

package/template/assets/js/popover.js

@@ -0,0 +1,30 @@
+jQuery( document ).ready( function ( $ ) { // eslint-disable-line
+	$( document ).on( 'mouseover', '.popover', function ( ele ) {
+		togglePopover( ele.currentTarget.id );
+	} );
+
+	$( document ).on( 'mouseout', '.popover', function ( ele ) {
+		togglePopover( ele.currentTarget.id, false );
+	} );
+
+	function togglePopover( id, popin = true ) {
+		if ( undefined !== id ) {
+			const current = $( '#' + id );
+			const popver = $( '#' + id + '-popover' );
+
+			if ( popin ) {
+				current.addClass( 'highlighted' );
+
+				if ( undefined !== popver ) {
+					$( popver ).addClass( 'popover-revealed' );
+				}
+			} else {
+				current.removeClass( 'highlighted' );
+
+				if ( undefined !== popver ) {
+					$( popver ).removeClass( 'popover-revealed' );
+				}
+			}
+		}
+	}
+} );

package/template/block/edit.js.mustache

@@ -0,0 +1,48 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#richtext
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#innerblocks
+ */
+import { useBlockProps, RichText, InnerBlocks } from '@wordpress/block-editor';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * Those files can contain any CSS code that gets applied to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './editor.scss';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function Edit(props) {
+	let { 
+		setAttributes, 
+		attributes: {}
+	} = props;
+
+	const blockProps = useBlockProps();
+
+    return(
+		<div {...blockProps}>
+			<p>Render Block Output</p>
+		</div>
+	);
+}

package/template/block/editor.scss.mustache

@@ -0,0 +1,5 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */

package/template/block/index.js.mustache

@@ -0,0 +1,40 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor. All other files
+ * get applied to the editor only.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './style.scss';
+import './editor.scss';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
+ */
+registerBlockType( metadata.name, {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+	/**
+	 * @see ./save.js
+	 */
+	save,
+} );

package/template/block/save.js.mustache

@@ -0,0 +1,21 @@
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
+ */
+ import { InnerBlocks } from '@wordpress/block-editor';
+
+ /**
+  * The save function defines the way in which the different attributes should
+  * be combined into the final markup, which is then serialized by the block
+  * editor into `post_content`.
+  *
+  * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
+  *
+  * @return {WPElement} Element to render.
+  */
+ export default function save(props) {
+	 return <InnerBlocks.Content />;
+ }
+ 

package/template/block/style.scss.mustache

@@ -0,0 +1,6 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */

package/template/index.cjs

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+const { join } = require( 'path' );
+const { capitalCase } = require( 'change-case' );
+
+/**
+ * Internal dependencies
+ */
+const blockSlug = process.argv[ 2 ];
+const blockSlugTitle = capitalCase( blockSlug );
+
+const customScripts = {};
+
+const npmDependencies = [ 
+	'@wordpress/icons@9.22.0' 
+];
+
+const npmDevDependencies = [];
+
+// assetsPath: join( __dirname, 'assets' ),
+module.exports = {
+	pluginTemplatesPath: join( __dirname, 'plugin' ),
+	blockTemplatesPath: join( __dirname, 'block' ),
+	defaultValues: {
+		pluginURI: `https://github.com/CAWebPublishing/${ blockSlug }`,
+		plugin: true,
+		description: `${ blockSlugTitle } Gutenberg Block`,
+		version: '1.2.0',
+		author: 'CAWebPublishing',
+		license: 'GPL-2.0-or-later',
+		licenseURI: 'https://www.gnu.org/licenses/gpl-2.0.html',
+		namespace: 'caweb',
+		category: 'cagov-design-system',
+		textdomain: 'cagov-design-system',
+		dashicon: 'format-aside',
+		supports: {
+			html: true,
+		},
+		attributes: {},
+		example: {
+			attributes: {}
+		},
+		customScripts: customScripts,
+		npmDependencies: npmDependencies,
+		npmDevDependencies: npmDevDependencies,
+	},
+};