newspack-components library

[claudiulodro]

This PR sets up the ability to publish our components to npm as a stand-alone package. This work is largely based on the two Calypso PRs linked below. Thanks to @ockham for pointing me in the right direction!

To test

1. In this repo, cd assets/src/components; npm install;.
2. npm publish --dry-run to see what would be published.
3. In a separate repo, get the latest version of the npm package (0.1.5+)
4. Try something like this to verify the components can be used in third-party applications:

import { TextControl, Button, Card } from 'newspack-components';
import { Component, render } from '@wordpress/element';

class PackageTest extends Component {
	render() {
		return (
			<Card>
				<TextControl
					label={'Text Input' }
					value=''
					onChange={ () => {} }
				/>
				<Button isPrimary >
					Button
				</Button>
			</Card>
		);
	}
}

render( <PackageTest />, document.getElementById( 'package-test' ) );

You should see something like this:

[ockham]

The issue here lies in the distinction of bundling vs transpilation. Webpack bundles (app) code for use in the browser, i.e. essentially turns import (ES Modules) and require (CommonJS) statements into big concatenated files (bundles), whereas transpilation maps each individual file to a transpiled one -- typically translating ES6+ into ES5. In other words, bundling is the very last step JS code undergoes before being shipped to the browser. (calypso-build's eponymous calypso-build script is essentially a Webpack alias.)

npm packages, by, definition (being Node modules) aren't bundled. They are however expected to be in CommonJS format. This means that import (ES Modules) syntax needs to be transpiled into require. There' a transpile script in calypso-build to do that, which we use in our monorepo for packaging the npms we publish from there (example).

[ockham]

On a higher level: Great to see an initiative to share components for re-use! As it happens, we've been working on a similar initiative in Calypso (Automattic/wp-calypso#32869, Automattic/wp-calypso#33154).

In order to avoid the proverbial 15 standards situation, I think it'd be great to coordinate. After all, we'd want one canonical source of truth for shared components across Automattic. Maybe we can schedule a Zoom call for stakeholders some time soon?

Looping in @Automattic/team-calypso 🙂

[blowery]

@ockham I'd love to be part of that call. /cc @griffbrad

[claudiulodro]

I've got things sorted and updated the instructions at the top of the PR. Let's definitely coordinate around components packaging with the Calypso team, as there is definitely some duplicated work we can try and avoid (e.g. we also have a ProgressBar component in this package and a Checklist component, and they look like the Calypso ones).

[justinshreve]

Awesome work Claudiu! Thank you for working on this. I was able to get this successfully running in our new onboarding work.

I only had one issue, with the .svg files being loaded directly from CSS files. You may need an appropriate loader to handle this file type.

I had to make sure the following like the following was in our webpack.config.js:

			{
				test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
				loader: 'url-loader',
			},

[justinshreve]

I've noticed a few behaviors with the components that differ from what I see in the Figma Component file. Let me know if you want me to help tackle these.

For inputs, the label should still be displayed when active:

I also noticed that the active class does not get applied if the input is empty. That means the input looks unfocused even though it is. There should be some kind of active but empty state.

I also noticed that if you tab/keyboard navigate into the inputs, the active class is not appended, even if you begin typing.

[claudiulodro]

@justinshreve I've created an issue for what you reported at #75 . If you want to tackle it, that would be super helpful (just assign yourself to the issue), otherwise we'll get it handled soon. Good catch and thanks!

[jeffersonrabb]

The double "src" in the new path structure seems confusing. Could we refactor the components to live in assets/components/src instead of assets/src/components/src? We could also relocate wizards and shared to be siblings of components.

[claudiulodro]

I've done the requested folder restructuring in 9305614. This should make things cleaner. I'm going to do some research around the best package name for this, then it should be good to merge.

[claudiulodro]

Let's keep the current published name (newspack-components). We only have one other software consuming this library, and only temporarily until calypso-ui has form field components. It may even be worth unpublishing this package once that happens, to reduce our maintenance burden. We can discuss that in the future. This should be ready to merge.

[jeffersonrabb]

OK, agreed about the package name, and possible plan to unpublish. Perhaps we should add a line to the README to indicate that this is not a stable release and is subject to change at any time, just in case someone we don't know installs and uses the package?

[claudiulodro]

Added disclaimer to readme. 👍