Extensions: Add Dashboard Section

plugins/woocommerce-admin/docs/examples/extensions/dashboard-section/js/global-prices.js

@@ -0,0 +1,43 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import moment from 'moment';
+
+/**
+ * WooCommerce dependencies
+ */
+import { Card, Chart } from '@woocommerce/components';
+import { formatCurrency } from '@woocommerce/currency';
+
+const data = [];
+
+for ( let i = 1; i <= 20; i++ ) {
+	const date = moment().subtract( i, 'days' );
+	data.push( {
+		date: date.format( 'YYYY-MM-DDT00:00:00' ),
+		primary: {
+			label: 'Global Apple Prices, last 20 days',
+			labelDate: date.format( 'YYYY-MM-DD 00:00:00' ),
+			value: Math.floor( Math.random() * 100 ),
+		},
+	} );
+}
+
+const GlobalPrices = () => {
+	return (
+		<Card className="woocommerce-dashboard__chart-block" title="Global Apple Prices">
+			<Chart
+				title="Global Apple Prices"
+				interval="day"
+				data={ data.reverse() }
+				dateParser="%Y-%m-%dT%H:%M:%S"
+				showHeaderControls={ false }
+				valueType={ 'currency' }
+				tooltipValueFormat={ formatCurrency }
+			/>
+		</Card>
+	);
+};
+
+export default GlobalPrices;

plugins/woocommerce-admin/docs/examples/extensions/dashboard-section/js/index.js

@@ -0,0 +1,133 @@
+/** @format */
+/**
+ * External dependencies
+ */
+
+import { addFilter } from '@wordpress/hooks';
+import { Component, Fragment } from '@wordpress/element';
+import { TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * WooCommerce dependencies
+ */
+import { EllipsisMenu, MenuTitle, MenuItem, SectionHeader } from '@woocommerce/components';
+
+/**
+ * Internal dependencies
+ */
+import UpcomingEvents from './upcoming-events';
+import GlobalPrices from './global-prices';
+
+const config = [
+	{
+		title: 'Granny Smith',
+		events: [ { date: '2020-01-02', title: 'The Granny Apple Fair' } ],
+	},
+	{
+		title: 'Golden Delicious',
+		events: [
+			{ date: '2020-04-15', title: 'Madrid Manzana Dorada' },
+			{ date: '2020-05-07', title: 'Golden CO Golden Delicious Day' },
+		],
+	},
+	{
+		title: 'Gala',
+		events: [ { date: '2020-08-31', title: 'The Met Gala Pomme' } ],
+	},
+	{
+		title: 'Braeburn',
+		events: [ { date: '2020-08-18', title: 'Mt. Aoraki Crisper' } ],
+	},
+];
+
+const dashboardItems = [
+	{ title: 'Upcoming Events', component: UpcomingEvents, key: 'upcoming-events' },
+	{ title: 'Global Apple Prices', component: GlobalPrices, key: 'global-prices' },
+];
+
+class Section extends Component {
+	renderMenu() {
+		const {
+			hiddenBlocks,
+			onToggleHiddenBlock,
+			onTitleBlur,
+			onTitleChange,
+			titleInput,
+			onMove,
+			onRemove,
+			isFirst,
+			isLast,
+			controls: Controls,
+		} = this.props;
+
+		return (
+			<EllipsisMenu
+				label={ __( 'Choose Apples', 'woocommerce-admin' ) }
+				renderContent={ ( { onToggle } ) => (
+					<Fragment>
+						<MenuTitle>{ __( 'My Apples', 'woocommerce-admin' ) }</MenuTitle>
+						{ dashboardItems.map( item => (
+							<MenuItem
+								checked={ ! hiddenBlocks.includes( item.key ) }
+								isCheckbox
+								isClickable
+								key={ item.key }
+								onInvoke={ () => onToggleHiddenBlock( item.key )() }
+							>
+								{ item.title }
+							</MenuItem>
+						) ) }
+						<div className="woocommerce-ellipsis-menu__item">
+							<TextControl
+								label={ __( 'Section Title', 'woocommerce-admin' ) }
+								onBlur={ onTitleBlur }
+								onChange={ onTitleChange }
+								required
+								value={ titleInput }
+							/>
+						</div>
+						<Controls
+							onToggle={ onToggle }
+							onMove={ onMove }
+							onRemove={ onRemove }
+							isFirst={ isFirst }
+							isLast={ isLast }
+						/>
+					</Fragment>
+				) }
+			/>
+		);
+	}
+
+	render() {
+		const { title, hiddenBlocks } = this.props;
+
+		return (
+			<Fragment>
+				<SectionHeader title={ title } menu={ this.renderMenu() } />
+				<div className="woocommerce-dashboard__columns">
+					{ dashboardItems.map( item => {
+						return hiddenBlocks.includes( item.key ) ? null : (
+							<item.component key={ item.key } config={ config } />
+						);
+					} ) }
+				</div>
+			</Fragment>
+		);
+	}
+}
+
+addFilter( 'woocommerce_dashboard_default_sections', 'plugin-domain', sections => {
+	return [
+		...sections,
+		{
+			key: 'dashboard-apples',
+			component: Section,
+			title: __( 'Apples', 'woocommerce-admin' ),
+			isVisible: true,
+			icon: 'carrot',
+			hiddenBlocks: [],
+		},
+	];
+} );

plugins/woocommerce-admin/docs/examples/extensions/dashboard-section/js/upcoming-events.js

@@ -0,0 +1,39 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { flatten } from 'lodash';
+
+/**
+ * WooCommerce dependencies
+ */
+import { TableCard } from '@woocommerce/components';
+
+const UpcomingEvents = ( { config } ) => {
+	const rows = flatten(
+		config.map( apple => {
+			return apple.events.map( event => {
+				return [
+					{ display: apple.title, value: 'variety' },
+					{ display: event.title, value: 'event' },
+					{ display: event.date, value: 'date' },
+				];
+			} );
+		} )
+	);
+	return (
+		<TableCard
+			title={ 'Upcoming Events' }
+			headers={ [
+				{ label: 'Variety', key: 'variety' },
+				{ label: 'Event', key: 'event' },
+				{ label: 'Date', key: 'date' },
+			] }
+			rows={ rows }
+			rowsPerPage={ 100 }
+			totalRows={ 1 }
+		/>
+	);
+};
+
+export default UpcomingEvents;

plugins/woocommerce-admin/docs/examples/extensions/dashboard-section/woocommerce-admin-dashboard-section.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * Plugin Name: WooCommerce Admin Dashboard Section Example
+ *
+ * @package WC_Admin
+ */
+
+/**
+ * Register the JS.
+ */
+function dashboard_section_register_script() {
+
+	if ( ! class_exists( 'WC_Admin_Loader' ) || ! WC_Admin_Loader::is_admin_page() ) {
+		return;
+	}
+
+	wp_register_script(
+		'add-report',
+		plugins_url( '/dist/index.js', __FILE__ ),
+		array(
+			'wp-hooks',
+			'wp-element',
+			'wp-i18n',
+			'wc-components',
+		),
+		filemtime( dirname( __FILE__ ) . '/dist/index.js' ),
+		true
+	);
+
+	wp_enqueue_script( 'add-report' );
+}
+add_action( 'admin_enqueue_scripts', 'dashboard_section_register_script' );

plugins/woocommerce-admin/docs/examples/extensions/examples.config.js

@@ -6,6 +6,7 @@ const path = require( 'path' );
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
 const fs = require( 'fs' );
 const woocommerceAdminConfig = require( path.resolve( __dirname, '../../../webpack.config.js' ) );
+const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 
 const extArg = process.argv.find( arg => arg.startsWith( '--ext=' ) );
 
@@ -55,6 +56,13 @@ const webpackConfig = {
 					},
 				},
 			},
+			{
+				test: /\.s?css$/,
+				use: [
+					MiniCssExtractPlugin.loader,
+					'css-loader',
+				],
+			},
 		],
 	},
 	resolve: {
@@ -73,6 +81,9 @@ const webpackConfig = {
 				to: path.resolve( __dirname, `../../../../${ extension }/` ),
 			},
 		] ),
+		new MiniCssExtractPlugin( {
+			filename: '[name]/dist/style.css',
+		} ),
 	],
 };