Packages: Move the components module partially to the packages folder

.gitignore

@@ -1,6 +1,7 @@
 # Directories/files that may be generated by this project
 build
 build-module
+build-style
 coverage
 node_modules
 gutenberg.zip

bin/packages/build.js

@@ -14,6 +14,9 @@ const glob = require( 'glob' );
 const babel = require( '@babel/core' );
 const chalk = require( 'chalk' );
 const mkdirp = require( 'mkdirp' );
+const sass = require( 'node-sass' );
+const postcss = require( 'postcss' );
+const deasync = require( 'deasync' );
 
 /**
  * Internal dependencies
@@ -29,6 +32,7 @@ const SRC_DIR = 'src';
 const BUILD_DIR = {
 	main: 'build',
 	module: 'build-module',
+	style: 'build-style',
 };
 const DONE = chalk.reset.inverse.bold.green( ' DONE ' );
 
@@ -68,6 +72,36 @@ function buildFile( file, silent ) {
 	buildFileFor( file, silent, 'module' );
 }
 
+function buildStyle( packagePath ) {
+	const styleFile = path.resolve( packagePath, SRC_DIR, 'style.scss' );
+	const outputFile = path.resolve( packagePath, BUILD_DIR.style, 'style.css' );
+	mkdirp.sync( path.dirname( outputFile ) );
+	const builtSass = sass.renderSync( {
+		file: styleFile,
+		includePaths: [ path.resolve( __dirname, '../../edit-post/assets/stylesheets' ) ],
+		data: (
+			[
+				'colors',
+				'breakpoints',
+				'variables',
+				'mixins',
+				'animations',
+				'z-index',
+			].map( ( imported ) => `@import "${ imported }";` ).join( ' ' )	+
+			fs.readFileSync( styleFile, 'utf8' )
+		),
+	} );
+
+	const postCSSSync = ( callback ) => {
+		postcss( require( './post-css-config' ) )
+			.process( builtSass.css, { from: 'src/app.css', to: 'dest/app.css' } )
+			.then( ( result ) => callback( null, result ) );
+	};
+
+	const result = deasync( postCSSSync )();
+	fs.writeFileSync( outputFile, result.css );
+}
+
 /**
  * Build a file for a specific environment
  *
@@ -109,6 +143,13 @@ function buildPackage( packagePath ) {
 	process.stdout.write( `${ path.basename( packagePath ) }\n` );
 
 	files.forEach( ( file ) => buildFile( file, true ) );
+
+	// Building styles
+	const styleFile = path.resolve( srcDir, 'style.scss' );
+	if ( fs.existsSync( styleFile ) ) {
+		buildStyle( packagePath );
+	}
+
 	process.stdout.write( `${ DONE }\n` );
 }
 

bin/packages/post-css-config.js

@@ -0,0 +1,64 @@
+module.exports = [
+	require( '@wordpress/postcss-themes' )( {
+		defaults: {
+			primary: '#0085ba',
+			secondary: '#11a0d2',
+			toggle: '#11a0d2',
+			button: '#0085ba',
+			outlines: '#007cba',
+		},
+		themes: {
+			'admin-color-light': {
+				primary: '#0085ba',
+				secondary: '#c75726',
+				toggle: '#11a0d2',
+				button: '#0085ba',
+				outlines: '#007cba',
+			},
+			'admin-color-blue': {
+				primary: '#82b4cb',
+				secondary: '#d9ab59',
+				toggle: '#82b4cb',
+				button: '#d9ab59',
+				outlines: '#417e9B',
+			},
+			'admin-color-coffee': {
+				primary: '#c2a68c',
+				secondary: '#9fa47b',
+				toggle: '#c2a68c',
+				button: '#c2a68c',
+				outlines: '#59524c',
+			},
+			'admin-color-ectoplasm': {
+				primary: '#a7b656',
+				secondary: '#c77430',
+				toggle: '#a7b656',
+				button: '#a7b656',
+				outlines: '#523f6d',
+			},
+			'admin-color-midnight': {
+				primary: '#e14d43',
+				secondary: '#77a6b9',
+				toggle: '#77a6b9',
+				button: '#e14d43',
+				outlines: '#497b8d',
+			},
+			'admin-color-ocean': {
+				primary: '#a3b9a2',
+				secondary: '#a89d8a',
+				toggle: '#a3b9a2',
+				button: '#a3b9a2',
+				outlines: '#5e7d5e',
+			},
+			'admin-color-sunrise': {
+				primary: '#d1864a',
+				secondary: '#c8b03c',
+				toggle: '#c8b03c',
+				button: '#d1864a',
+				outlines: '#837425',
+			},
+		},
+	} ),
+	require( 'autoprefixer' ),
+	require( 'postcss-color-function' ),
+];

components/code-editor/index.js

@@ -8,8 +8,8 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import CodeEditor from './editor';
-import Placeholder from '../placeholder';
-import Spinner from '../spinner';
+import Placeholder from '../../packages/components/src/placeholder';
+import Spinner from '../../packages/components/src/spinner';
 
 function loadScript() {
 	return new Promise( ( resolve, reject ) => {

components/index.js

@@ -1,80 +1,5 @@
-/**
- * Internal dependencies
- */
-import deprecated from './deprecated';
-
 // Components
-export { default as APIProvider } from './higher-order/with-api-data/provider';
-export { default as Autocomplete } from './autocomplete';
-export { default as BaseControl } from './base-control';
-export { default as Button } from './button';
-export { default as ButtonGroup } from './button-group';
-export { default as CheckboxControl } from './checkbox-control';
-export { default as ClipboardButton } from './clipboard-button';
 export { default as CodeEditor } from './code-editor';
-export { default as ColorPalette } from './color-palette';
-export { default as Dashicon } from './dashicon';
-export { DateTimePicker, DatePicker, TimePicker } from './date-time';
-export { default as Disabled } from './disabled';
-export { default as Draggable } from './draggable';
-export { default as DropZone } from './drop-zone';
-export { default as DropZoneProvider } from './drop-zone/provider';
-export { default as Dropdown } from './dropdown';
-export { default as DropdownMenu } from './dropdown-menu';
-export { default as ExternalLink } from './external-link';
-export { default as FocusableIframe } from './focusable-iframe';
-export { default as FontSizePicker } from './font-size-picker';
-export { default as FormFileUpload } from './form-file-upload';
-export { default as FormToggle } from './form-toggle';
-export { default as FormTokenField } from './form-token-field';
-export { default as IconButton } from './icon-button';
-export { default as KeyboardShortcuts } from './keyboard-shortcuts';
-export { default as MenuGroup } from './menu-group';
-export { default as MenuItem } from './menu-item';
-export { default as MenuItemsChoice } from './menu-items-choice';
-export { default as Modal } from './modal';
-export { default as ScrollLock } from './scroll-lock';
-export { NavigableMenu, TabbableContainer } from './navigable-container';
-export { default as Notice } from './notice';
-export { default as NoticeList } from './notice/list';
-export { default as Panel } from './panel';
-export { default as PanelBody } from './panel/body';
-export { default as PanelColor } from './panel/color';
-export { default as PanelHeader } from './panel/header';
-export { default as PanelRow } from './panel/row';
-export { default as Placeholder } from './placeholder';
-export { default as Popover } from './popover';
-export { default as QueryControls } from './query-controls';
-export { default as RadioControl } from './radio-control';
-export { default as RangeControl } from './range-control';
-export { default as ResponsiveWrapper } from './responsive-wrapper';
-export { default as SandBox } from './sandbox';
-export { default as SelectControl } from './select-control';
-export { default as Spinner } from './spinner';
-export { default as ServerSideRender } from './server-side-render';
-export { default as TabPanel } from './tab-panel';
-export { default as TextControl } from './text-control';
-export { default as TextareaControl } from './textarea-control';
-export { default as ToggleControl } from './toggle-control';
-export { default as Toolbar } from './toolbar';
-export { default as Tooltip } from './tooltip';
-export { default as TreeSelect } from './tree-select';
-export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
-
-// Higher-Order Components
-export { default as navigateRegions } from './higher-order/navigate-regions';
-export { default as withAPIData } from './higher-order/with-api-data';
-export { default as withContext } from './higher-order/with-context';
-export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';
-export { default as withFallbackStyles } from './higher-order/with-fallback-styles';
-export { default as withFilters } from './higher-order/with-filters';
-export { default as withFocusOutside } from './higher-order/with-focus-outside';
-export { default as withFocusReturn } from './higher-order/with-focus-return';
-export { default as withNotices } from './higher-order/with-notices';
-export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
+export * from '../packages/components/src';
 
-export const ifCondition = deprecated.ifCondition;
-export const withGlobalEvents = deprecated.withGlobalEvents;
-export const withInstanceId = deprecated.withInstanceId;
-export const withSafeTimeout = deprecated.withSafeTimeout;
-export const withState = deprecated.withState;
+import '../packages/components/src/style.scss';

docs/manifest.json

@@ -263,6 +263,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/browserslist-config/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/components",
+		"slug": "packages-components",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/compose",
 		"slug": "packages-compose",
@@ -419,12 +425,6 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/blocks/README.md",
 		"parent": "packages"
 	},
-	{
-		"title": "@wordpress/components",
-		"slug": "packages-components",
-		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/components/README.md",
-		"parent": "packages"
-	},
 	{
 		"title": "@wordpress/core-blocks",
 		"slug": "packages-core-blocks",

docs/tool/config.js

@@ -14,7 +14,6 @@ const npmReadyPackages = glob( 'packages/*/package.json' )
 // node modules.
 const gutenbergPackages = [
 	'blocks',
-	'components',
 	'core-blocks',
 	'edit-post',
 	'editor',

lib/client-assets.php

@@ -268,6 +268,7 @@ function gutenberg_register_scripts_and_styles() {
 			'wp-a11y',
 			'wp-api-request',
 			'wp-compose',
+			'wp-deprecated',
 			'wp-dom',
 			'wp-element',
 			'wp-html-entities',