newspack-components library

.gitignore

@@ -28,4 +28,6 @@ Thumbs.db
 /vendor/
 
 # Built files
-/assets/dist
+/assets/dist
+/assets/components/dist
+/assets/components/node_modules

assets/components/.npmrc

@@ -0,0 +1 @@
+package-lock=false

assets/components/README.md

@@ -0,0 +1,3 @@
+# Newspack Components
+
+This package contains UI components designed using the Muriel design system. Use these components for alternative, Muriel-styled versions of `@wordpress/components` components.

assets/components/copy-styles.js

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+
+/* eslint-disable import/no-nodejs-modules,no-console */
+
+// find all the packages
+const path = require( 'path' );
+const rcopy = require( 'recursive-copy' );
+
+const dir = process.cwd();
+
+const inputDir = path.join( dir, 'src' );
+const outputDirEsm = path.join( dir, 'dist', 'esm' );
+const outputDirCommon = path.join( dir, 'dist', 'cjs' );
+
+console.log( 'Copying styles %s', dir );
+
+const copyOptions = {
+	overwrite: true,
+	filter: [ '**/*.scss', '**/*.svg' ],
+	concurrency: 127,
+	debug: true,
+};
+
+rcopy( inputDir, outputDirEsm, copyOptions )
+	.then( results => {
+		console.log( 'copied %d files', results.length );
+	} )
+	.catch( err => {
+		console.error( err );
+	} );
+rcopy( inputDir, outputDirCommon, copyOptions )
+	.then( results => {
+		console.log( 'copied %d files', results.length );
+	} )
+	.catch( err => {
+		console.error( err );
+	} );
+rcopy( path.join( dir, '..', 'shared' ), path.join( dir, 'dist', 'shared' ) )
+	.then( results => {
+		console.log( 'Copied shared lib' );
+	} )
+	.catch( err => {
+		console.error( err );
+	} );

assets/components/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "newspack-components",
+  "version": "0.1.5",
+  "description": "Muriel design system components",
+  "author": "Automattic",
+  "license": "GPL-2.0-or-later",
+  "keywords": [
+    "wordpress",
+    "newspack",
+    "muriel",
+    "components"
+  ],
+  "bugs": {
+    "url": "https://github.com/Automattic/newspack-plugin/issues"
+  },
+  "homepage": "https://github.com/Automattic/newspack-plugin",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Automattic/newspack-plugin.git",
+    "directory": "assets/src/components"
+  },
+  "main": "dist/cjs/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@wordpress/components": "^7.3.1",
+    "@wordpress/element": "^2.3.0"
+  },
+  "devDependencies": {
+    "@automattic/calypso-build": "^2.0.0",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "recursive-copy": "2.0.10"
+  },
+  "babel": {
+    "ignore": [
+      "./node_modules"
+    ]
+  },
+  "scripts": {
+    "prepublishOnly": "transpile && node copy-styles.js",
+    "postpublish": "rm -r dist"
+  }
+}

assets/src/components/button/index.js → assets/components/src/button/index.js

@@ -11,7 +11,7 @@ import { Button as BaseComponent } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import murielClassnames from '../../shared/js/muriel-classnames';
+import murielClassnames from '../../../shared/js/muriel-classnames';
 
 import './style.scss';
 

assets/src/components/button/style.scss → assets/components/src/button/style.scss

@@ -2,7 +2,7 @@
  * Button styles,
  */
 
-@import '../../shared/scss/muriel-component';
+@import '../../../shared/scss/muriel-component';
 
 .muriel-button {
 	text-align: center;

assets/src/components/card/index.js → assets/components/src/card/index.js

@@ -10,7 +10,7 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import murielClassnames from '../../shared/js/muriel-classnames';
+import murielClassnames from '../../../shared/js/muriel-classnames';
 
 /**
  * Internal dependencies

assets/src/components/card/style.scss → assets/components/src/card/style.scss

@@ -2,7 +2,7 @@
  * Card styles.
  */
 
-@import '../../shared/scss/muriel-component';
+@import '../../../shared/scss/muriel-component';
 
 .muriel-card {
 	background: $muriel-white;

assets/src/components/checkbox-control/index.js → assets/components/src/checkbox-control/index.js

@@ -11,8 +11,9 @@ import { CheckboxControl as BaseComponent } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import murielClassnames from '../../shared/js/muriel-classnames';
-import InfoButton from '../../components/info-button';
+import murielClassnames from '../../../shared/js/muriel-classnames';
+import { InfoButton } from '../';
+
 import './style.scss';
 
 class CheckboxControl extends Component {

assets/src/components/checkbox-control/style.scss → assets/components/src/checkbox-control/style.scss

@@ -2,7 +2,7 @@
  * Checkbox styles.
  */
 
-@import '../../shared/scss/muriel-component';
+@import '../../../shared/scss/muriel-component';
 
 .muriel-checkbox {
 	display: block;

assets/src/components/checklist/index.js → assets/components/src/checklist/index.js

@@ -12,7 +12,7 @@ import { Dashicon } from '@wordpress/components';
 /**
  * Internal dependencies.
  */
-import murielClassnames from '../../shared/js/muriel-classnames';
+import murielClassnames from '../../../shared/js/muriel-classnames';
 import { Button, ProgressBar } from '../';
 import './style.scss';
 

assets/src/components/formatted-header/index.js → assets/components/src/formatted-header/index.js

@@ -10,7 +10,7 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import murielClassnames from '../../shared/js/muriel-classnames';
+import murielClassnames from '../../../shared/js/muriel-classnames';
 
 /**
  * Internal dependencies.

assets/src/components/formatted-header/style.scss → assets/components/src/formatted-header/style.scss

@@ -2,7 +2,7 @@
  * Formatted Header styles.
  */
 
-@import '../../shared/scss/muriel-component';
+@import '../../../shared/scss/muriel-component';
 
 .muriel-formatted-header {
 	text-align: center;

assets/src/components/image-upload/index.js → assets/components/src/image-upload/index.js

@@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import murielClassnames from '../../shared/js/muriel-classnames';
+import murielClassnames from '../../../shared/js/muriel-classnames';
 import './style.scss';
 
 /**

assets/src/components/image-upload/style.scss → assets/components/src/image-upload/style.scss

@@ -2,7 +2,7 @@
  * Image uploader styles.
  */
 
-@import '../../shared/scss/muriel-component';
+@import '../../../shared/scss/muriel-component';
 
 .muriel-image-upload {
 	button {

assets/src/components/index.js → assets/components/src/index.js

@@ -3,6 +3,7 @@ export { default as Card } from './card';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as Checklist } from './checklist';
 export { default as FormattedHeader } from './formatted-header';
+export { default as InfoButton } from './info-button';
 export { default as ImageUpload } from './image-upload';
 export { default as ProgressBar } from './progress-bar';
 export { default as SelectControl } from './select-control';

assets/src/components/info-button/style.scss → assets/components/src/info-button/style.scss

@@ -2,7 +2,7 @@
  * Info Button styles
  */
 
-@import '../../shared/scss/muriel-component';
+@import '../../../shared/scss/muriel-component';
 
 .muriel-info-button {
 	background-image: url( 'info_24px.svg' );

assets/src/components/select-control/index.js → assets/components/src/select-control/index.js

@@ -11,7 +11,7 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import murielClassnames from '../../shared/js/muriel-classnames';
+import murielClassnames from '../../../shared/js/muriel-classnames';
 import './style.scss';
 
 const SelectControl = withFocusOutside(

assets/src/components/task/index.js → assets/components/src/task/index.js

@@ -12,7 +12,7 @@ import { Dashicon } from '@wordpress/components';
 /**
  * Internal dependencies.
  */
-import Button from '../button';
+import { Button } from '../';
 import './style.scss';
 
 /**

assets/src/components/text-control/index.js → assets/components/src/text-control/index.js

@@ -11,7 +11,7 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import murielClassnames from '../../shared/js/muriel-classnames';
+import murielClassnames from '../../../shared/js/muriel-classnames';
 import './style.scss';
 
 const TextControl = withFocusOutside(

assets/src/components/text-control/style.scss → assets/components/src/text-control/style.scss

@@ -2,7 +2,7 @@
  * Text/Number Input styles.
  */
 
-@import '../../shared/scss/muriel-component';
+@import '../../../shared/scss/muriel-component';
 
 .muriel-input-text {
 	position: relative;

assets/src/wizards/componentsDemo/index.js → assets/wizards/componentsDemo/index.js

@@ -22,7 +22,7 @@ import {
 	Checklist,
 	Task,
 	SelectControl,
-} from '../../components';
+} from '../../components/src';
 import './style.scss';
 
 /**

package.json

@@ -13,7 +13,6 @@
     "@wordpress/browserslist-config": "^2.2.2",
     "@wordpress/components": "^7.3.1",
     "@wordpress/element": "^2.3.0",
-    "@wordpress/components": "^7.3.1",
     "autoprefixer": "^9.1.5",
     "chokidar-cli": "^1.2.1",
     "classnames": "^2.2.6",
@@ -53,10 +52,10 @@
   ],
   "jest": {
     "setupFilesAfterEnv": [
-      "<rootDir>/assets/src/setupTests.js"
+      "<rootDir>/assets/setupTests.js"
     ],
     "testMatch": [
-      "<rootDir>/**/src/**/*test.js?(x)",
+      "<rootDir>/**/*test.js?(x)",
       "!**/.eslintrc.*"
     ],
     "transform": {

webpack.config.js

@@ -11,15 +11,15 @@ const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.
 const path = require( 'path' );
 const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 
-const wizardsDir = path.join( __dirname, 'assets', 'src', 'wizards' );
+const wizardsDir = path.join( __dirname, 'assets', 'wizards' );
 
 // Get files for wizards scripts.
 const wizardsScripts = fs
   .readdirSync( wizardsDir )
-  .filter( wizard => fs.existsSync( path.join( __dirname, 'assets', 'src', 'wizards', wizard, 'index.js' ) ) );
+  .filter( wizard => fs.existsSync( path.join( __dirname, 'assets', 'wizards', wizard, 'index.js' ) ) );
 const wizardsScriptFiles = {}
 wizardsScripts.forEach( function( wizard ) {
-	wizardsScriptFiles[ wizard ] = path.join( __dirname, 'assets', 'src', 'wizards', wizard, 'index.js' );
+	wizardsScriptFiles[ wizard ] = path.join( __dirname, 'assets', 'wizards', wizard, 'index.js' );
 } );
 
 const webpackConfig = getBaseWebpackConfig(