Skip to content

Commit

Permalink
Packages: Move the components module partially to the packages folder (
Browse files Browse the repository at this point in the history
…#7640)

* Preparing the components package to be reusable

* Adding Stylesheet build support to the packages

* Fix postcss config (the wordpress dependency is not working properly)

* Tweaks to the build styles script

* Fix components package.json deps

* Tweak README

* fix unit tests

* Fix the scroll lock style import

* Components: Add a few tweaks to the configuration of components package

* Fix the components docs config

* Remove useless/moved file

* Adding the deprecated package to wp-components dependencies
  • Loading branch information
youknowriad authored Jul 17, 2018
1 parent 3343e8c commit 6928e41
Show file tree
Hide file tree
Showing 226 changed files with 664 additions and 249 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Directories/files that may be generated by this project
build
build-module
build-style
coverage
node_modules
gutenberg.zip
Expand Down
41 changes: 41 additions & 0 deletions bin/packages/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 ' );

Expand Down Expand Up @@ -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
*
Expand Down Expand Up @@ -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` );
}

Expand Down
64 changes: 64 additions & 0 deletions bin/packages/post-css-config.js
Original file line number Diff line number Diff line change
@@ -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' ),
];
4 changes: 2 additions & 2 deletions components/code-editor/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) => {
Expand Down
79 changes: 2 additions & 77 deletions components/index.js
Original file line number Diff line number Diff line change
@@ -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';
12 changes: 6 additions & 6 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
1 change: 0 additions & 1 deletion docs/tool/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ const npmReadyPackages = glob( 'packages/*/package.json' )
// node modules.
const gutenbergPackages = [
'blocks',
'components',
'core-blocks',
'edit-post',
'editor',
Expand Down
1 change: 1 addition & 0 deletions lib/client-assets.php
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Loading

0 comments on commit 6928e41

Please sign in to comment.