diff --git a/plugins/woocommerce-admin/client/dashboard/store-performance/index.js b/plugins/woocommerce-admin/client/dashboard/store-performance/index.js
index 70e1e80831d..c808b1c4a10 100644
--- a/plugins/woocommerce-admin/client/dashboard/store-performance/index.js
+++ b/plugins/woocommerce-admin/client/dashboard/store-performance/index.js
@@ -9,9 +9,14 @@ import { Component } from '@wordpress/element';
/**
* Internal dependencies
*/
-import Card from 'components/card';
-import { EllipsisMenu, MenuItem, MenuTitle } from 'components/ellipsis-menu';
-import { SummaryList, SummaryNumber } from 'components/summary';
+import {
+ Card,
+ EllipsisMenu,
+ MenuItem,
+ MenuTitle,
+ SummaryList,
+ SummaryNumber,
+} from '@woocommerce/components';
import './style.scss';
class StorePerformance extends Component {
diff --git a/plugins/woocommerce-admin/client/dashboard/top-selling-products/index.js b/plugins/woocommerce-admin/client/dashboard/top-selling-products/index.js
index 32d04320fb6..6e299c79dbb 100644
--- a/plugins/woocommerce-admin/client/dashboard/top-selling-products/index.js
+++ b/plugins/woocommerce-admin/client/dashboard/top-selling-products/index.js
@@ -9,11 +9,10 @@ import { map } from 'lodash';
/**
* Internal dependencies
*/
-import Card from 'components/card';
+import { Card, Table } from '@woocommerce/components';
import { getAdminLink } from 'lib/nav-utils';
import { numberFormat } from 'lib/number';
import { formatCurrency, getCurrencyFormatDecimal } from 'lib/currency';
-import { Table } from 'components/table';
import './style.scss';
// Mock data until we fetch from an API
diff --git a/plugins/woocommerce-admin/client/index.js b/plugins/woocommerce-admin/client/index.js
index c62c96202e7..25b619142f4 100644
--- a/plugins/woocommerce-admin/client/index.js
+++ b/plugins/woocommerce-admin/client/index.js
@@ -6,7 +6,6 @@ import { APIProvider } from '@wordpress/components';
import { pick } from 'lodash';
import { render } from '@wordpress/element';
import { Provider as SlotFillProvider } from 'react-slot-fill';
-import 'react-dates/initialize';
/**
* Internal dependencies
diff --git a/plugins/woocommerce-admin/client/layout/activity-panel/activity-card/test/index.js b/plugins/woocommerce-admin/client/layout/activity-panel/activity-card/test/index.js
index c765db87af7..b643a346fd5 100644
--- a/plugins/woocommerce-admin/client/layout/activity-panel/activity-card/test/index.js
+++ b/plugins/woocommerce-admin/client/layout/activity-panel/activity-card/test/index.js
@@ -10,7 +10,7 @@ import { shallow } from 'enzyme';
* Internal dependencies
*/
import { ActivityCard } from '../';
-import Gravatar from 'components/gravatar';
+import { Gravatar } from '@woocommerce/components';
describe( 'ActivityCard', () => {
test( 'should have correct title', () => {
diff --git a/plugins/woocommerce-admin/client/layout/activity-panel/activity-header/index.js b/plugins/woocommerce-admin/client/layout/activity-panel/activity-header/index.js
index cfb0adb2b90..1428a164fb3 100644
--- a/plugins/woocommerce-admin/client/layout/activity-panel/activity-header/index.js
+++ b/plugins/woocommerce-admin/client/layout/activity-panel/activity-header/index.js
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
* Internal dependencies
*/
import './style.scss';
-import { EllipsisMenu } from 'components/ellipsis-menu';
+import { EllipsisMenu } from '@woocommerce/components';
import { H } from 'layout/section';
class ActivityHeader extends Component {
diff --git a/plugins/woocommerce-admin/client/layout/activity-panel/activity-outbound-link/index.js b/plugins/woocommerce-admin/client/layout/activity-panel/activity-outbound-link/index.js
index f8e63a53471..d93b2fd4fba 100644
--- a/plugins/woocommerce-admin/client/layout/activity-panel/activity-outbound-link/index.js
+++ b/plugins/woocommerce-admin/client/layout/activity-panel/activity-outbound-link/index.js
@@ -11,7 +11,7 @@ import Gridicon from 'gridicons';
* Internal dependencies
*/
import './style.scss';
-import Link from 'components/link';
+import { Link } from '@woocommerce/components';
const ActivityOutboundLink = props => {
const { href, type, className, children, ...restOfProps } = props;
diff --git a/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js b/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js
index ebd3f6261d1..618b764ea90 100644
--- a/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js
+++ b/plugins/woocommerce-admin/client/layout/activity-panel/panels/orders.js
@@ -14,12 +14,16 @@ import { noop } from 'lodash';
import { ActivityCard } from '../activity-card';
import ActivityHeader from '../activity-header';
import ActivityOutboundLink from '../activity-outbound-link';
-import { EllipsisMenu, MenuTitle, MenuItem } from 'components/ellipsis-menu';
+import {
+ EllipsisMenu,
+ Gravatar,
+ Flag,
+ MenuTitle,
+ MenuItem,
+ OrderStatus,
+} from '@woocommerce/components';
import { formatCurrency, getCurrencyFormatDecimal } from 'lib/currency';
import { getOrderRefundTotal } from 'lib/order-values';
-import Gravatar from 'components/gravatar';
-import Flag from 'components/flag';
-import OrderStatus from 'components/order-status';
import { Section } from 'layout/section';
function OrdersPanel( { orders } ) {
diff --git a/plugins/woocommerce-admin/client/layout/activity-panel/panels/reviews.js b/plugins/woocommerce-admin/client/layout/activity-panel/panels/reviews.js
index 964fb13d4c7..ce2f220c0dc 100644
--- a/plugins/woocommerce-admin/client/layout/activity-panel/panels/reviews.js
+++ b/plugins/woocommerce-admin/client/layout/activity-panel/panels/reviews.js
@@ -13,12 +13,8 @@ import { noop } from 'lodash';
*/
import { ActivityCard, ActivityCardPlaceholder } from '../activity-card';
import ActivityHeader from '../activity-header';
-import Gravatar from 'components/gravatar';
-import Link from 'components/link';
-import ProductImage from 'components/product-image';
-import { ReviewRating } from 'components/rating';
+import { Gravatar, Link, ProductImage, ReviewRating, SplitButton } from '@woocommerce/components';
import { Section } from 'layout/section';
-import SplitButton from 'components/split-button';
// TODO Pull proper data from the API
const demoReviews = [
diff --git a/plugins/woocommerce-admin/client/layout/header/index.js b/plugins/woocommerce-admin/client/layout/header/index.js
index bce5d0d2539..689f5526c1a 100644
--- a/plugins/woocommerce-admin/client/layout/header/index.js
+++ b/plugins/woocommerce-admin/client/layout/header/index.js
@@ -8,7 +8,6 @@ import classnames from 'classnames';
import { decodeEntities } from '@wordpress/html-entities';
import { Fill } from 'react-slot-fill';
import { isArray } from 'lodash';
-import Link from 'components/link';
import PropTypes from 'prop-types';
import ReactDom from 'react-dom';
@@ -17,6 +16,7 @@ import ReactDom from 'react-dom';
*/
import './style.scss';
import ActivityPanel from '../activity-panel';
+import { Link } from '@woocommerce/components';
class Header extends Component {
constructor() {
diff --git a/plugins/woocommerce-admin/lib/client-assets.php b/plugins/woocommerce-admin/lib/client-assets.php
index f525594ec96..637afca6305 100644
--- a/plugins/woocommerce-admin/lib/client-assets.php
+++ b/plugins/woocommerce-admin/lib/client-assets.php
@@ -1,4 +1,10 @@
admin_url(),
- 'wcAssetUrl' => plugins_url( 'assets/', WC_PLUGIN_FILE ),
- 'embedBreadcrumbs' => wc_admin_get_embed_breadcrumbs(),
- 'siteLocale' => esc_attr( get_bloginfo( 'language' ) ),
- 'currency' => wc_admin_currency_settings(),
- 'date' => array(
+ 'adminUrl' => admin_url(),
+ 'wcAssetUrl' => plugins_url( 'assets/', WC_PLUGIN_FILE ),
+ 'embedBreadcrumbs' => wc_admin_get_embed_breadcrumbs(),
+ 'siteLocale' => esc_attr( get_bloginfo( 'language' ) ),
+ 'currency' => wc_admin_currency_settings(),
+ 'date' => array(
'dow' => get_option( 'start_of_week', 0 ),
),
- 'orderStatuses' => wc_get_order_statuses(),
- 'siteTitle' => get_bloginfo( 'name' ),
+ 'orderStatuses' => wc_get_order_statuses(),
+ 'siteTitle' => get_bloginfo( 'name' ),
);
wp_add_inline_script(
- WC_ADMIN_APP,
- 'var wcSettings = '. json_encode( $settings ) . ';',
+ 'wc-components',
+ 'var wcSettings = ' . json_encode( $settings ) . ';',
'before'
);
- // Resets lodash to wp-admin's version of lodash
+ // Resets lodash to wp-admin's version of lodash.
wp_add_inline_script(
WC_ADMIN_APP,
'_.noConflict();',
diff --git a/plugins/woocommerce-admin/tests/js/jest.config.json b/plugins/woocommerce-admin/tests/js/jest.config.json
index a4b5a4da145..5541e2154b4 100644
--- a/plugins/woocommerce-admin/tests/js/jest.config.json
+++ b/plugins/woocommerce-admin/tests/js/jest.config.json
@@ -8,7 +8,8 @@
],
"moduleDirectories": ["node_modules", "/client"],
"moduleNameMapper": {
- "tinymce": "/tests/js/mocks/tinymce"
+ "tinymce": "/tests/js/mocks/tinymce",
+ "@woocommerce/components": "/client/components"
},
"setupFiles": [
"/node_modules/@wordpress/jest-preset-default/scripts/setup-globals.js",
diff --git a/plugins/woocommerce-admin/tests/js/setup-globals.js b/plugins/woocommerce-admin/tests/js/setup-globals.js
index d2c44d51624..4da8f2f6ae8 100644
--- a/plugins/woocommerce-admin/tests/js/setup-globals.js
+++ b/plugins/woocommerce-admin/tests/js/setup-globals.js
@@ -14,6 +14,8 @@ global.wp = {
},
};
+global.wc = {};
+
Object.defineProperty( global.wp, 'element', {
get: () => require( '@wordpress/element' ),
} );
@@ -22,6 +24,10 @@ Object.defineProperty( global.wp, 'date', {
get: () => require( '@wordpress/date' ),
} );
+Object.defineProperty( global.wc, 'components', {
+ get: () => require( '@woocommerce/components' ),
+} );
+
global.wcSettings = {
adminUrl: 'https://vagrant.local/wp/wp-admin/',
locale: 'en-US',
diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js
index bf1a85234b7..012bee0db8b 100644
--- a/plugins/woocommerce-admin/webpack.config.js
+++ b/plugins/woocommerce-admin/webpack.config.js
@@ -9,6 +9,7 @@ const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
const NODE_ENV = process.env.NODE_ENV || 'development';
const externals = {
+ '@woocommerce/components': { this: [ 'wc', 'components' ] },
'@wordpress/blocks': { this: [ 'wp', 'blocks' ] },
'@wordpress/components': { this: [ 'wp', 'components' ] },
'@wordpress/compose': { this: [ 'wp', 'compose' ] },
@@ -31,6 +32,7 @@ const webpackConfig = {
mode: NODE_ENV,
entry: {
index: './client/index.js',
+ components: './client/components/index.js',
embedded: './client/embedded.js',
},
output: {
@@ -85,9 +87,7 @@ const webpackConfig = {
'gutenberg-components': path.resolve( __dirname, 'node_modules/@wordpress/components/src' ),
},
},
- plugins: [
- new ExtractTextPlugin( 'css/[name].css' ),
- ],
+ plugins: [ new ExtractTextPlugin( 'css/[name].css' ) ],
};
if ( webpackConfig.mode !== 'production' ) {