Merge pull request #2056 from woocommerce/dev/externalize-wp-packages

Externalize all `@wordpress` packages via DEWP
woocommerce · Aug 15, 2023 · 7b75f5d · 7b75f5d
2 parents 59ae6eb + bf5269f
commit 7b75f5d
Show file tree

Hide file tree

Showing 33 changed files with 47 additions and 293 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -43,15 +43,6 @@ module.exports = {
 				additionalHooks: 'useSelect',
 			},
 		],
-		// When a file imports from both `@wordpress/components` and `extracted/@wordpress/components`
-		// at the same time, it would get the "no-duplicates" warning. It should be considered a
-		// false positive when working on the externalization process. So here we temporarily change
-		// to use "no-duplicate-imports" instead.
-		//
-		// TODO: After the externalizations of `@wordpress/*` and `@woocommerce/*` are complete,
-		//       remove the following two lines of rule settings.
-		'import/no-duplicates': 'off',
-		'no-duplicate-imports': 'warn',
 	},
 	overrides: [
 		{

diff --git a/.externalized.json b/.externalized.json
@@ -1 +1 @@
-["@woocommerce/components","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/navigation","@woocommerce/settings","@wordpress/a11y","@wordpress/api-fetch","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/deprecated","@wordpress/dom","@wordpress/element","@wordpress/escape-html","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/is-shallow-equal","@wordpress/keycodes","@wordpress/priority-queue","@wordpress/rich-text","@wordpress/url","@wordpress/warning","extracted/@wordpress/components","lodash","moment","react","react-dom"]
+["@woocommerce/components","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/navigation","@woocommerce/settings","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/deprecated","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/primitives","@wordpress/url","lodash","moment","react","react-dom"]
diff --git a/js/src/components/app-button/index.js b/js/src/components/app-button/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Button } from 'extracted/@wordpress/components';
+import { Button } from '@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
 import classnames from 'classnames';

diff --git a/js/src/components/app-radio-content-control/index.scss b/js/src/components/app-radio-content-control/index.scss
@@ -10,6 +10,7 @@
 	// by placing them on the same brid.
 	.components-radio-control,
 	.components-base-control__field,
+	.components-base-control__field .components-flex,
 	.components-radio-control__option {
 		display: contents;
 	}

diff --git a/js/src/components/app-standalone-toggle-control/index.scss b/js/src/components/app-standalone-toggle-control/index.scss
@@ -4,10 +4,12 @@
 	display: inline-block;
 
 	// remove the margins specified in ToggleControl component.
+	.components-base-control {
+		margin-bottom: 0;
+	}
+
 	.components-toggle-control {
 		.components-base-control__field {
-			margin-bottom: 0;
-
 			.components-form-toggle {
 				margin-right: 0;
 

diff --git a/js/src/components/app-tooltip/index.js b/js/src/components/app-tooltip/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Tooltip } from 'extracted/@wordpress/components';
+import { Tooltip } from '@wordpress/components';
 import { Children } from '@wordpress/element';
 
 /**

diff --git a/js/src/components/dismissible-notice/index.js b/js/src/components/dismissible-notice/index.js
diff --git a/js/src/components/dismissible-notice/index.test.js b/js/src/components/dismissible-notice/index.test.js
diff --git a/js/src/components/faqs-panel/index.js b/js/src/components/faqs-panel/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Panel, PanelBody, PanelRow } from 'extracted/@wordpress/components';
+import { Panel, PanelBody, PanelRow } from '@wordpress/components';
 import { recordEvent } from '@woocommerce/tracks';
 import classnames from 'classnames';
 

diff --git a/js/src/components/google-ads-account-card/connected-google-ads-account-card.js b/js/src/components/google-ads-account-card/connected-google-ads-account-card.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { ExternalLink } from 'extracted/@wordpress/components';
+import { ExternalLink } from '@wordpress/components';
 
 /**
  * Internal dependencies

diff --git a/js/src/components/help-popover/index.js b/js/src/components/help-popover/index.js
@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
-import { Popover } from 'extracted/@wordpress/components';
+import { Popover } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import GridiconHelpOutline from 'gridicons/dist/help-outline';
 import { recordEvent } from '@woocommerce/tracks';

diff --git a/js/src/components/paid-ads/asset-group/final-url-card.js b/js/src/components/paid-ads/asset-group/final-url-card.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { useState } from '@wordpress/element';
-import { ExternalLink } from 'extracted/@wordpress/components';
+import { ExternalLink } from '@wordpress/components';
 
 /**
  * Internal dependencies

diff --git a/js/src/components/paid-ads/assetSpecs.js b/js/src/components/paid-ads/assetSpecs.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { ExternalLink } from 'extracted/@wordpress/components';
+import { ExternalLink } from '@wordpress/components';
 import { Fragment, createInterpolateElement } from '@wordpress/element';
 
 /**

diff --git a/js/src/components/paid-ads/audience-section.scss b/js/src/components/paid-ads/audience-section.scss
@@ -3,20 +3,10 @@
 	// Repeat selector to make it higher priority.
 	.components-input-control__container.components-input-control__container {
 		.components-select-control__input {
-			min-height: $gla-size-control-height;
 			padding-left: $grid-unit-20;
 		}
 	}
 
-	// Adjust labels of <SelectControl> imported from @wordpress/components.
-	// Repeat selector to make it higher priority.
-	.components-base-control .components-select-control {
-		.components-input-control__label {
-			padding-bottom: 0;
-			margin-bottom: $grid-unit-10;
-		}
-	}
-
 	// Adjust help text of <SelectControl> imported from @wordpress/components.
 	.components-base-control__help {
 		margin: 0;

diff --git a/js/src/components/paid-ads/billing-card/billing-setup-card.js b/js/src/components/paid-ads/billing-card/billing-setup-card.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { ExternalLink } from 'extracted/@wordpress/components';
+import { ExternalLink } from '@wordpress/components';
 
 /**
  * Internal dependencies

diff --git a/js/src/components/pre-launch-check-item/index.js b/js/src/components/pre-launch-check-item/index.js
@@ -2,8 +2,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
-import { Panel, PanelBody, PanelRow } from 'extracted/@wordpress/components';
+import {
+	Panel,
+	PanelBody,
+	PanelRow,
+	CheckboxControl,
+} from '@wordpress/components';
 import { recordEvent } from '@woocommerce/tracks';
 import { useRef } from '@wordpress/element';
 

diff --git a/js/src/css/shared/_gutenberg-components.scss b/js/src/css/shared/_gutenberg-components.scss
@@ -1,12 +1,5 @@
 // Scope the old styles of core components to GLA pages to avoid styling conflicts with other non-GLA pages.
 .gla-admin-page {
-	// WP 6.1 Compatibility (@wordpress/components 21.0.6 imported by @woocommerce/components)
-	// The style of `DatePicker` component was significantly changed as per the new implementations.
-	// This import could be removed after:
-	// - It's fixed from @woocommerce/components
-	// - or @wordpress/components is changed to be imported via (WC)DEWP
-	@import "node_modules/@wordpress/components/src/date-time/date/datepicker"; /* stylelint-disable-line no-invalid-position-at-import-rule */
-
 	.components-button {
 		// Hack to show correct font color for disabled primary destructive button.
 		// The color style is copied from https://github.com/WordPress/gutenberg/blob/%40wordpress/components%4012.0.8/packages/components/src/button/style.scss#L67-L72
@@ -51,35 +44,9 @@
 			font-size: inherit;
 		}
 	}
-}
 
-// hack to fix radio button selected style bug caused by woocommerce-admin.
-.components-radio-control__input[type="radio"]:checked::before {
-	border: none;
-}
-
-// hack to fix InputControl suffix's empty right margin.
-.components-input-control__suffix {
-	margin-right: $grid-unit;
-}
-
-// Hack to fix the Tooltip position of the top-right side close button in a Modal component.
-// The follow up can be found here: https://github.com/woocommerce/google-listings-and-ads/issues/203
-.components-modal {
-	&__screen-overlay {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	&__frame {
-		@include break-small {
-			transform: initial;
-			position: relative;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-		}
+	// Adjust InputControl suffix's empty right margin.
+	.components-input-control__suffix {
+		margin-right: $grid-unit;
 	}
 }