RNA: Components package (#20148)

- The RNA Components package initial structure
- Moving the JetpackLogo component from Jetpack to the RNA Components package

.github/renovate.json

@@ -13,6 +13,7 @@
 			"groupName": "Monorepo packages",
 			"matchPackageNames": [
 				"@automattic/eslint-changed",
+				"@automattic/jetpack-components",
 				"@automattic/jetpack-connection",
 				"automattic/jetpack-a8c-mc-stats",
 				"automattic/jetpack-abtest",

projects/js-packages/components/.gitattributes

@@ -0,0 +1,6 @@
+# Files not needed to be distributed in the package.
+.gitattributes    export-ignore
+node_modules      export-ignore
+
+# Files to exclude from the mirror repo
+/changelog/**     production-exclude

projects/js-packages/components/.nycrc

@@ -0,0 +1,5 @@
+{
+	"extensions": [".js", ".jsx"],
+	"exclude": "**/test/*.jsx",
+	"reporter": "clover"
+}

projects/js-packages/components/CHANGELOG.md

@@ -0,0 +1,3 @@
+# Changelog
+
+### This is a list detailing changes for the Jetpack RNA Components package releases.

projects/js-packages/components/README.md

@@ -0,0 +1,4 @@
+Components Package
+=========
+
+The package includes a set of individual components shared between RNA packages.

projects/js-packages/components/changelog/add-rna-components

@@ -0,0 +1,4 @@
+Significance: major
+Type: added
+
+Add JetpackLogo component.

projects/js-packages/components/components/jetpack-logo/README.md

@@ -0,0 +1,18 @@
+JetpackLogo
+========
+
+Component that renders the Jetpack SVG logo.
+It consists of the Jetpack symbol followed by the name.
+It takes width and height properties but defaults to 32px in height.
+
+#### How to use:
+
+```js
+<JetpackLogo height={ 48 } className="jp-logo" />
+```
+
+#### Props
+
+* `className`: String - (default: `jetpack-logo`) the class name set on the SVG element.
+* `height`: Number - (default: 32) set the height of the logo.
+* `width`: Number - (optional) set the width of the logo.

projects/js-packages/components/components/jetpack-logo/index.jsx

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+
+class JetpackLogo extends React.Component {
+	static propTypes = {
+		className: PropTypes.string,
+		width: PropTypes.number,
+		height: PropTypes.number,
+	};
+
+	static defaultProps = {
+		className: 'jetpack-logo',
+		height: 32,
+	};
+
+	render() {
+		return (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				x="0px"
+				y="0px"
+				viewBox="0 0 118 32"
+				{ ...this.props }
+			>
+				<path
+					fill="#00BE28"
+					d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M15,19H7l8-16V19z M17,29V13h8L17,29z"
+				/>
+				<path d="M41.3,26.6c-0.5-0.7-0.9-1.4-1.3-2.1c2.3-1.4,3-2.5,3-4.6V8h-3V6h6v13.4C46,22.8,45,24.8,41.3,26.6z" />
+				<path d="M65,18.4c0,1.1,0.8,1.3,1.4,1.3c0.5,0,2-0.2,2.6-0.4v2.1c-0.9,0.3-2.5,0.5-3.7,0.5c-1.5,0-3.2-0.5-3.2-3.1V12H60v-2h2.1V7.1 H65V10h4v2h-4V18.4z" />
+				<path d="M71,10h3v1.3c1.1-0.8,1.9-1.3,3.3-1.3c2.5,0,4.5,1.8,4.5,5.6s-2.2,6.3-5.8,6.3c-0.9,0-1.3-0.1-2-0.3V28h-3V10z M76.5,12.3 c-0.8,0-1.6,0.4-2.5,1.2v5.9c0.6,0.1,0.9,0.2,1.8,0.2c2,0,3.2-1.3,3.2-3.9C79,13.4,78.1,12.3,76.5,12.3z" />
+				<path d="M93,22h-3v-1.5c-0.9,0.7-1.9,1.5-3.5,1.5c-1.5,0-3.1-1.1-3.1-3.2c0-2.9,2.5-3.4,4.2-3.7l2.4-0.3v-0.3c0-1.5-0.5-2.3-2-2.3 c-0.7,0-2.3,0.5-3.7,1.1L84,11c1.2-0.4,3-1,4.4-1c2.7,0,4.6,1.4,4.6,4.7L93,22z M90,16.4l-2.2,0.4c-0.7,0.1-1.4,0.5-1.4,1.6 c0,0.9,0.5,1.4,1.3,1.4s1.5-0.5,2.3-1V16.4z" />
+				<path d="M104.5,21.3c-1.1,0.4-2.2,0.6-3.5,0.6c-4.2,0-5.9-2.4-5.9-5.9c0-3.7,2.3-6,6.1-6c1.4,0,2.3,0.2,3.2,0.5V13 c-0.8-0.3-2-0.6-3.2-0.6c-1.7,0-3.2,0.9-3.2,3.6c0,2.9,1.5,3.8,3.3,3.8c0.9,0,1.9-0.2,3.2-0.7V21.3z" />
+				<path d="M110,15.2c0.2-0.3,0.2-0.8,3.8-5.2h3.7l-4.6,5.7l5,6.3h-3.7l-4.2-5.8V22h-3V6h3V15.2z" />
+				<path d="M58.5,21.3c-1.5,0.5-2.7,0.6-4.2,0.6c-3.6,0-5.8-1.8-5.8-6c0-3.1,1.9-5.9,5.5-5.9s4.9,2.5,4.9,4.9c0,0.8,0,1.5-0.1,2h-7.3 c0.1,2.5,1.5,2.8,3.6,2.8c1.1,0,2.2-0.3,3.4-0.7C58.5,19,58.5,21.3,58.5,21.3z M56,15c0-1.4-0.5-2.9-2-2.9c-1.4,0-2.3,1.3-2.4,2.9 C51.6,15,56,15,56,15z" />
+			</svg>
+		);
+	}
+}
+
+export default JetpackLogo;

projects/js-packages/components/components/jetpack-logo/test/component.jsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+import ShallowRenderer from 'react-test-renderer/shallow';
+
+/**
+ * Internal dependencies
+ */
+import JetpackLogo from '../index';
+
+describe( 'JetpackLogo', () => {
+	const testProps = {
+		className: 'sample-classname',
+	};
+
+	describe( 'Render the JetpackLogo component', () => {
+		const renderer = new ShallowRenderer();
+		renderer.render( <JetpackLogo { ...testProps } /> );
+
+		const wrapper = shallow( renderer.getRenderOutput() );
+
+		it( 'component exists', () => {
+			expect( wrapper.find( 'JetpackLogo' ) ).to.exist;
+		} );
+
+		it( 'validate the class name', () => {
+			expect( wrapper.hasClass( 'sample-classname' ) ).to.equal( true );
+		} );
+	} );
+} );

projects/js-packages/components/composer.json

@@ -0,0 +1,30 @@
+{
+	"name": "automattic/js-components",
+	"description": "Jetpack Components Package.",
+	"license": "GPL-2.0-or-later",
+	"require": {},
+	"require-dev": {
+		"automattic/jetpack-changelogger": "1.2.x-dev"
+	},
+	"scripts": {
+		"test-js": [
+			"Composer\\Config::disableProcessTimeout",
+			"pnpm install",
+			"pnpm run test"
+		],
+		"test-coverage": [
+			"Composer\\Config::disableProcessTimeout",
+			"pnpm install",
+			"pnpx nyc --report-dir=\"$COVERAGE_DIR\" pnpm run test"
+		]
+	},
+	"repositories": [
+		{
+			"type": "path",
+			"url": "../../packages/*",
+			"options": {
+				"monorepo": true
+			}
+		}
+	]
+}

projects/js-packages/components/index.jsx

@@ -0,0 +1,17 @@
+/*
+This program is free software; you can redistribute it and/or
+modify it under the terms of the GNU General Public License
+as published by the Free Software Foundation; either version 2
+of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program; if not, write to the Free Software
+Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+export { default as JetpackLogo } from './components/jetpack-logo';

projects/js-packages/components/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "@automattic/jetpack-components",
+	"version": "0.1.0-alpha",
+	"description": "Jetpack Components Package",
+	"author": "Automattic",
+	"license": "GPL-2.0-or-later",
+	"dependencies": {
+		"@wordpress/browserslist-config": "3.0.1",
+		"@wordpress/components": "9.2.6",
+		"@wordpress/i18n": "^3.9.0",
+		"lodash": "4.17.21",
+		"prop-types": "^15.7.2"
+	},
+	"devDependencies": {
+		"jetpack-js-test-runner": "workspace:*",
+		"nyc": "15.1.0",
+		"react": "16.14.0",
+		"react-dom": "16.14.0",
+		"react-test-renderer": "16.14.0"
+	},
+	"peerDependencies": {
+		"react": "^16.13.1",
+		"react-dom": "^16.13.1"
+	},
+	"type": "module",
+	"sideEffects": [
+		"*.css",
+		"*.scss"
+	],
+	"scripts": {
+		"test": "NODE_ENV=test NODE_PATH=tests:. js-test-runner --jsdom --initfile=test-main.jsx 'glob:./!(node_modules)/**/test/*.jsx'"
+	},
+	"engines": {
+		"node": "^14.16.0",
+		"pnpm": "^6.5.0",
+		"yarn": "use pnpm instead - see docs/yarn-upgrade.md"
+	}
+}

projects/js-packages/components/test-main.jsx

@@ -0,0 +1,7 @@
+/**
+ * External dependencies
+ */
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure( { adapter: new Adapter() } );

projects/packages/connection-ui/_inc/components/header/index.jsx

@@ -3,6 +3,7 @@
  */
 import React from 'react';
 import { __ } from '@wordpress/i18n';
+import { JetpackLogo } from '@automattic/jetpack-components';
 
 /**
  * Internal dependencies
@@ -17,6 +18,7 @@ import './style.scss';
 const Header = () => {
 	return (
 		<div className="jetpack-cui__header">
+			<JetpackLogo />
 			<h1>{ __( 'Connection Manager', 'jetpack' ) }</h1>
 		</div>
 	);

projects/packages/connection-ui/changelog/add-rna-components

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added the Jetpack logo to the header.

projects/packages/connection-ui/package.json

@@ -15,6 +15,7 @@
 	},
 	"dependencies": {
 		"@automattic/calypso-build": "6.5.0",
+		"@automattic/jetpack-components": "workspace:^0.1.0-alpha",
 		"@automattic/jetpack-connection": "workspace:^0.4.0-alpha",
 		"@babel/core": "7.12.10",
 		"@babel/helper-module-imports": "7.12.5",

projects/plugins/jetpack/_inc/client/components/jetpack-logo/README.md

@@ -1,18 +1,5 @@
 JetpackLogo
 ========
 
-Component that renders the Jetpack SVG logo.
-It consists of the Jetpack symbol followed by the name.
-It takes width and height properties but defaults to 32px in height.
-
-#### How to use:
-
-```js
-<JetpackLogo height={ 48 } className="jp-logo" />
-```
-
-#### Props
-
-* `className`: String - (default: `jetpack-logo`) the class name set on the SVG element.
-* `height`: Number - (default: 32) set the height of the logo.
-* `width`: Number - (optional) set the width of the logo.
+The component is deprecated.
+Use `@automattic/jetpack-components` instead.