Add Muriel TextControl to calypso-ui

[justinshreve]

This PR introduces a Muriel styled TextControl component to the calypso-ui package. The styles are implemented on top of @wordpress/components. This component has been lifted from https://github.com/Automattic/newspack-plugin. This PR also fixes the issues outlined in Automattic/newspack-plugin#75.

This will be used in WooCommerce onboarding, and it's related connection piece in Calypso, so that these styles match inputs on both sides of the flow.

Please note: if you look at the Muriel components Figma, not all of the various modes for the Muriel inputs have been implemented. Only the "contained" style that both Newspack and wc-admin are currently using. This is meant to be a start, that can be immediately consumed by these packages, and we can continue adding the alternatives in the future.

Screenshots

Testing instructions

• npm run distclean && npm ci
• npm start
• Visit http://calypso.localhost:3000/devdocs/design/text-control and look at / test the TextControl component.

[matticbot]

Test live: https://calypso.live/?branch=add/calypso-ui-text-control

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Webpack Runtime (~225 bytes removed 📉 [gzipped])

name      parsed_size           gzip_size
manifest      -1831 B  (-1.1%)     -225 B  (-0.7%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

App Entrypoints (~895 bytes removed 📉 [gzipped])

name        parsed_size           gzip_size
entry-main      -3805 B  (-0.2%)     -895 B  (-0.2%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~22060 bytes added 📈 [gzipped])

name                  parsed_size           gzip_size
gutenberg-editor         +13599 B  (+2.1%)    +3716 B  (+2.0%)
woocommerce               +5222 B  (+0.2%)    +1604 B  (+0.3%)
themes                    +5212 B  (+1.4%)    +1265 B  (+1.3%)
plans                     +5212 B  (+1.0%)    +1300 B  (+1.0%)
checkout                  +5212 B  (+0.6%)    +1297 B  (+0.6%)
activity                  +5212 B  (+0.7%)    +1346 B  (+1.3%)
domains                   +5138 B  (+0.6%)     +603 B  (+0.3%)
stats                     +5116 B  (+0.5%)    +1341 B  (+0.7%)
settings                  +5014 B  (+0.5%)    +1311 B  (+0.9%)
post-editor               +4701 B  (+0.2%)    +2557 B  (+0.5%)
import                    +3676 B  (+1.8%)     +966 B  (+1.8%)
settings-performance      +3037 B  (+1.6%)     +914 B  (+1.8%)
plugins                   +3019 B  (+0.6%)     +498 B  (+0.4%)
media                     +3011 B  (+0.8%)     +570 B  (+0.6%)
posts-pages               +2187 B  (+0.7%)     +446 B  (+0.6%)
posts-custom              +2187 B  (+0.8%)     +446 B  (+0.6%)
security                  +2175 B  (+0.5%)     +443 B  (+0.4%)
purchases                 +2175 B  (+0.2%)     +445 B  (+0.2%)
people                    +2175 B  (+0.6%)     +436 B  (+0.5%)
jetpack-connect           +2175 B  (+0.4%)     +448 B  (+0.3%)
help                      +2175 B  (+0.2%)     +446 B  (+0.3%)
export                    +2175 B  (+0.9%)     +443 B  (+0.7%)
concierge                 +2175 B  (+0.4%)     +444 B  (+0.7%)
comments                  +2175 B  (+0.2%)     +447 B  (+0.4%)
account                   +2175 B  (+0.7%)     +447 B  (+0.5%)
google-my-business        +2049 B  (+0.7%)     -492 B  (-0.6%)
settings-writing          +1936 B  (+0.2%)     -740 B  (-0.6%)
checklist                   -96 B  (-0.1%)      -13 B  (-0.0%)
email                       -74 B  (-0.0%)     -838 B  (-1.0%)
devdocs                     +59 B  (+0.0%)      -36 B  (-0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~304634 bytes added 📈 [gzipped])

name                                                         parsed_size            gzip_size
async-load-design-playground                                   +596330 B  (+35.3%)  +149041 B  (+38.4%)
async-load-design                                              +595721 B  (+32.8%)  +149097 B  (+35.5%)
async-load-signup-steps-domains                                  +5212 B   (+2.5%)    +1331 B   (+2.7%)
async-load-design-blocks                                         +4661 B   (+0.2%)    +1746 B   (+0.3%)
async-load-my-sites-checklist-wpcom-checklist-component-jsx      +2888 B   (+2.2%)       -3 B   (-0.0%)
async-load-post-editor-media-modal                               +2507 B   (+0.9%)     +627 B   (+0.8%)
async-load-signup-steps-plans-atomic-store                       +2175 B   (+2.1%)     +448 B   (+1.7%)
async-load-signup-steps-plans                                    +2175 B   (+1.6%)     +448 B   (+1.3%)
async-load-signup-steps-clone-point                              +2175 B   (+0.4%)     +448 B   (+1.1%)
async-load-reader-search-stream                                  +2175 B   (+1.9%)     +445 B   (+1.5%)
async-load-blocks-inline-help-popover                            +2175 B   (+0.3%)     +446 B   (+0.6%)
async-load-reader-following-manage                               +2138 B   (+1.6%)     +425 B   (+1.2%)
async-load-signup-steps-import-url                                +639 B   (+3.0%)     +161 B   (+2.6%)
async-load-blocks-inline-help                                      -96 B   (-0.1%)      -14 B   (-0.1%)
async-load-layout-guided-tours                                     +79 B   (+0.2%)      +19 B   (+0.2%)
async-load-components-web-preview-component                        -70 B   (-0.0%)      -31 B   (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[blowery]

what was this tripping?

[justinshreve]

I had was getting errors for duplicate-package-checker-webpack-plugin, webpack, but I've backed this change out for now.

  11:17  error  'webpack' should be listed in the project's dependencies. Run 'npm i -S webpack' to add it                                                                    import/no-extraneous-dependencies
  15:39  error  'duplicate-package-checker-webpack-plugin' should be listed in the project's dependencies. Run 'npm i -S duplicate-package-checker-webpack-plugin' to add it  import/no-extraneous-dependencies

[blowery]

ah, those are real errors. we're getting away with not having them in the root package.json because of how npm is current hoisting dependencies from packages/calypso-build. If we require or import them, they should be in the closest package.json.

[justinshreve]

Thanks for the feedback and tip @blowery. I've pushed some changes here, including an adjustment to the ProgressBar export to fix some tests that were failing because of window.

[jsnajdr]

Why don't we just import { ProgressBar } from @automattic/calypso-ui? The dist/esm` directory structure should be an encapsulated implementation detail of the package, not a commonly used part of public interface.

[justinshreve]

See p1560968242000900-slack-components

the tl;dr is that ScreenReader breaks SSR and ProgressBar breaks in tests because of window being undefined, if we pull in all of calypso-ui here (@wordpress/components loads some dependencies that use window).

There is a Gutenberg PR open to guard against the usage breaking this: WordPress/gutenberg#16227 -- so this is meant to be temporary.

[blowery]

The 149kb increase in design and playground is a bit concerning. I assume that's because we can't tree-shake @wordpress/components yet?

[justinshreve]

The 149kb increase in design and playground is a bit concerning. I assume that's because we can't tree-shake @wordpress/components yet?

I found WordPress/gutenberg#13910, so it looks like this hasn't been done yet.

[sgomes]

149kB compressed JS is quite substantial; that's 88% of the total recommended JS budget for an entire web application, and it'll take a long time to run and execute in a slow device on a slow network.

I realise this is just devdocs for now, but if the goal is to use these in Calypso, we definitely need to address the tree-shaking situation first, or risk making Calypso around 25% slower to load than it is now.

[justinshreve]

I might need some guidance on what to do here. This is the only component that we need like this on the Calypso side for our project. If #34138 doesn't help here, should I instead build these styles/behavior on top of the Calypso component and revisit making an exportable copy in the future?

[jsnajdr]

should I instead build these styles/behavior on top of the Calypso component and revisit making an exportable copy in the future?

I'd recommend to do it the way that's desirable from the long term view. If the bundle size increases now, we can accept that for some time. We've made a lot of performance and bundle size improvements over the last months and years, and we can take a short-term loan against these savings 🙂

It's good to be aware of the issue (we are) and have a plan to solve it (we do). It doesn't need to be a blocker.