From 6928e41c8afd7daa3a709afdda7eee48218473b7 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 17 Jul 2018 12:39:51 +0100 Subject: [PATCH] Packages: Move the components module partially to the packages folder (#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 --- .gitignore | 1 + bin/packages/build.js | 41 +++ bin/packages/post-css-config.js | 64 ++++ components/code-editor/index.js | 4 +- components/index.js | 79 +---- docs/manifest.json | 12 +- docs/tool/config.js | 1 - lib/client-assets.php | 1 + package-lock.json | 331 ++++++++++++++++++ package.json | 14 +- packages/components/.npmrc | 1 + packages/components/README.md | 29 ++ packages/components/package.json | 58 +++ .../components/src}/README.md | 0 .../components/src}/autocomplete/README.md | 0 .../components/src}/autocomplete/index.js | 1 - .../components/src}/autocomplete/style.scss | 0 .../src}/autocomplete/test/index.js | 0 .../components/src}/base-control/README.md | 0 .../components/src}/base-control/index.js | 5 - .../components/src}/base-control/style.scss | 0 .../components/src}/button-group/index.js | 5 - .../components/src}/button-group/style.scss | 0 .../components/src}/button/README.md | 0 .../components/src}/button/index.js | 5 - .../components/src}/button/style.scss | 0 .../components/src}/button/test/index.js | 0 .../src}/checkbox-control/README.md | 0 .../components/src}/checkbox-control/index.js | 1 - .../src}/checkbox-control/style.scss | 0 .../components/src}/clipboard-button/index.js | 0 .../components/src}/color-palette/index.js | 5 +- .../components/src}/color-palette/style.scss | 0 .../test/__snapshots__/index.js.snap | 0 .../src}/color-palette/test/index.js | 0 .../components/src}/dashicon/index.js | 7 +- .../components/src}/dashicon/style.scss | 0 .../components/src}/dashicon/test/index.js | 0 .../components/src}/date-time/README.md | 0 .../components/src}/date-time/date.js | 0 .../components/src}/date-time/index.js | 1 - .../components/src}/date-time/style.scss | 3 +- .../components/src}/date-time/test/time.js | 0 .../components/src}/date-time/time.js | 0 .../components/src}/deprecated.js | 0 .../components/src}/disabled/README.md | 0 .../components/src}/disabled/index.js | 5 - .../components/src}/disabled/style.scss | 0 .../components/src}/disabled/test/index.js | 0 .../components/src}/draggable/README.md | 0 .../components/src}/draggable/index.js | 5 - .../components/src}/draggable/style.scss | 0 .../components/src}/drop-zone/README.md | 0 .../components/src}/drop-zone/index.js | 1 - .../components/src}/drop-zone/provider.js | 0 .../components/src}/drop-zone/style.scss | 0 .../components/src}/dropdown-menu/README.md | 0 .../components/src}/dropdown-menu/index.js | 1 - .../components/src}/dropdown-menu/style.scss | 0 .../src}/dropdown-menu/test/index.js | 0 .../components/src}/dropdown/README.md | 0 .../components/src}/dropdown/index.js | 0 .../components/src}/dropdown/test/index.js | 0 .../components/src}/external-link/index.js | 1 - .../components/src}/external-link/style.scss | 0 .../src}/focusable-iframe/README.md | 0 .../components/src}/focusable-iframe/index.js | 0 .../src}/font-size-picker/README.md | 0 .../components/src}/font-size-picker/index.js | 1 - .../src}/font-size-picker/style.scss | 0 .../components/src}/form-file-upload/index.js | 1 - .../src}/form-file-upload/style.scss | 0 .../src}/form-file-upload/test/index.js | 0 .../components/src}/form-toggle/index.js | 5 - .../components/src}/form-toggle/style.scss | 0 .../components/src}/form-toggle/test/index.js | 0 .../src}/form-token-field/README.md | 0 .../components/src}/form-token-field/index.js | 1 - .../src}/form-token-field/style.scss | 0 .../src}/form-token-field/suggestions-list.js | 0 .../src}/form-token-field/test/index.js | 0 .../form-token-field/test/lib/fixtures.js | 0 .../test/lib/token-field-wrapper.js | 0 .../src}/form-token-field/token-input.js | 0 .../components/src}/form-token-field/token.js | 0 .../components/src}/higher-order/README.md | 0 .../higher-order/navigate-regions/README.md | 0 .../higher-order/navigate-regions/index.js | 1 - .../higher-order/navigate-regions/style.scss | 0 .../src}/higher-order/with-api-data/README.md | 0 .../src}/higher-order/with-api-data/index.js | 0 .../higher-order/with-api-data/provider.js | 0 .../higher-order/with-api-data/request.js | 0 .../src}/higher-order/with-api-data/routes.js | 0 .../higher-order/with-api-data/test/index.js | 0 .../with-api-data/test/request.js | 0 .../higher-order/with-api-data/test/routes.js | 0 .../with-constrained-tabbing/README.md | 0 .../with-constrained-tabbing/index.js | 0 .../src}/higher-order/with-context/README.md | 0 .../src}/higher-order/with-context/index.js | 0 .../higher-order/with-context/test/index.js | 0 .../with-fallback-styles/index.js | 0 .../src}/higher-order/with-filters/README.md | 0 .../src}/higher-order/with-filters/index.js | 0 .../higher-order/with-filters/test/index.js | 0 .../higher-order/with-focus-outside/README.md | 0 .../higher-order/with-focus-outside/index.js | 0 .../with-focus-outside/test/index.js | 0 .../higher-order/with-focus-return/index.js | 0 .../with-focus-return/test/index.js | 0 .../src}/higher-order/with-notices/index.js | 0 .../with-spoken-messages/index.js | 0 .../with-spoken-messages/test/index.js | 0 .../components/src}/icon-button/index.js | 1 - .../components/src}/icon-button/style.scss | 0 .../components/src}/icon-button/test/index.js | 0 packages/components/src/index.js | 79 +++++ .../src}/keyboard-shortcuts/README.md | 0 .../src}/keyboard-shortcuts/index.js | 0 .../src}/keyboard-shortcuts/test/index.js | 0 .../components/src}/menu-group/index.js | 1 - .../components/src}/menu-group/style.scss | 0 .../test/__snapshots__/index.js.snap | 0 .../components/src}/menu-group/test/index.js | 0 .../components/src}/menu-item/index.js | 1 - .../components/src}/menu-item/shortcut.js | 5 - .../components/src}/menu-item/style.scss | 0 .../test/__snapshots__/index.js.snap | 0 .../components/src}/menu-item/test/index.js | 0 .../src}/menu-items-choice/index.js | 0 .../components/src}/modal/README.md | 0 .../components/src}/modal/aria-helper.js | 0 .../components/src}/modal/frame.js | 1 - .../components/src}/modal/header.js | 1 - .../components/src}/modal/index.js | 1 - .../components/src}/modal/style.scss | 0 .../components/src}/modal/test/aria-helper.js | 0 .../src}/navigable-container/README.md | 0 .../src}/navigable-container/index.js | 0 .../src}/navigable-container/test/index.js | 0 .../components/src}/notice/README.md | 0 .../components/src}/notice/index.js | 5 - .../components/src}/notice/list.js | 0 .../components/src}/notice/style.scss | 0 .../notice/test/__snapshots__/index.js.snap | 0 .../components/src}/notice/test/index.js | 0 .../components/src}/panel/body.js | 0 .../components/src}/panel/color.js | 1 - .../components/src}/panel/header.js | 0 .../components/src}/panel/index.js | 1 - .../components/src}/panel/row.js | 0 .../components/src}/panel/style.scss | 0 .../panel/test/__snapshots__/color.js.snap | 0 .../components/src}/panel/test/body.js | 0 .../components/src}/panel/test/color.js | 0 .../components/src}/panel/test/header.js | 0 .../components/src}/panel/test/index.js | 0 .../components/src}/panel/test/row.js | 0 .../components/src}/placeholder/index.js | 1 - .../components/src}/placeholder/style.scss | 0 .../components/src}/placeholder/test/index.js | 0 .../components/src}/popover/README.md | 0 .../components/src}/popover/detect-outside.js | 0 .../components/src}/popover/index.js | 1 - .../components/src}/popover/style.scss | 0 .../components/src}/popover/test/index.js | 0 .../components/src}/popover/test/utils.js | 0 .../components/src}/popover/utils.js | 0 .../src}/query-controls/category-select.js | 0 .../components/src}/query-controls/index.js | 0 .../components/src}/query-controls/terms.js | 0 .../components/src}/radio-control/README.md | 0 .../components/src}/radio-control/index.js | 1 - .../components/src}/radio-control/style.scss | 0 .../components/src}/range-control/README.md | 0 .../components/src}/range-control/index.js | 1 - .../components/src}/range-control/style.scss | 0 .../src}/range-control/test/index.js | 0 .../src}/responsive-wrapper/index.js | 5 - .../src}/responsive-wrapper/style.scss | 0 .../components/src}/sandbox/README.md | 0 .../components/src}/sandbox/index.js | 0 .../components/src}/scroll-lock/README.md | 0 .../components/src}/scroll-lock/index.js | 5 - .../components/src/scroll-lock/style.scss | 0 .../components/src}/scroll-lock/test/index.js | 0 .../components/src}/select-control/README.md | 0 .../components/src}/select-control/index.js | 1 - .../components/src}/select-control/style.scss | 0 .../src}/server-side-render/README.md | 0 .../src}/server-side-render/index.js | 0 .../src}/server-side-render/test/index.js | 0 .../components/src}/slot-fill/README.md | 0 .../components/src}/slot-fill/fill.js | 0 .../components/src}/slot-fill/index.js | 0 .../components/src}/slot-fill/provider.js | 0 .../components/src}/slot-fill/slot.js | 0 .../components/src}/slot-fill/test/index.js | 0 .../components/src}/slot-fill/test/slot.js | 0 .../components/src}/spinner/index.js | 0 packages/components/src/style.scss | 36 ++ .../components/src}/tab-panel/README.md | 0 .../components/src}/tab-panel/index.js | 0 .../components/src}/tab-panel/test/index.js | 0 .../components/src}/text-control/README.md | 0 .../components/src}/text-control/index.js | 1 - .../components/src}/text-control/style.scss | 0 .../src}/textarea-control/README.md | 0 .../components/src}/textarea-control/index.js | 1 - .../src}/textarea-control/style.scss | 0 .../components/src}/toggle-control/README.md | 0 .../components/src}/toggle-control/index.js | 1 - .../components/src}/toggle-control/style.scss | 0 .../src}/toggle-control/test/index.js | 0 .../components/src}/toolbar/index.js | 1 - .../components/src}/toolbar/style.scss | 0 .../components/src}/toolbar/test/index.js | 0 .../components/src}/tooltip/README.md | 0 .../components/src}/tooltip/index.js | 1 - .../components/src}/tooltip/style.scss | 0 .../components/src}/tooltip/test/index.js | 0 .../components/src}/tree-select/README.md | 0 .../components/src}/tree-select/index.js | 0 test/unit/setup-mocks.js | 4 +- webpack.config.js | 65 +--- 226 files changed, 664 insertions(+), 249 deletions(-) create mode 100644 bin/packages/post-css-config.js create mode 100644 packages/components/.npmrc create mode 100644 packages/components/README.md create mode 100644 packages/components/package.json rename {components => packages/components/src}/README.md (100%) rename {components => packages/components/src}/autocomplete/README.md (100%) rename {components => packages/components/src}/autocomplete/index.js (99%) rename {components => packages/components/src}/autocomplete/style.scss (100%) rename {components => packages/components/src}/autocomplete/test/index.js (100%) rename {components => packages/components/src}/base-control/README.md (100%) rename {components => packages/components/src}/base-control/index.js (90%) rename {components => packages/components/src}/base-control/style.scss (100%) rename {components => packages/components/src}/button-group/index.js (83%) rename {components => packages/components/src}/button-group/style.scss (100%) rename {components => packages/components/src}/button/README.md (100%) rename {components => packages/components/src}/button/index.js (94%) rename {components => packages/components/src}/button/style.scss (100%) rename {components => packages/components/src}/button/test/index.js (100%) rename {components => packages/components/src}/checkbox-control/README.md (100%) rename {components => packages/components/src}/checkbox-control/index.js (97%) rename {components => packages/components/src}/checkbox-control/style.scss (100%) rename {components => packages/components/src}/clipboard-button/index.js (100%) rename {components => packages/components/src}/color-palette/index.js (99%) rename {components => packages/components/src}/color-palette/style.scss (100%) rename {components => packages/components/src}/color-palette/test/__snapshots__/index.js.snap (100%) rename {components => packages/components/src}/color-palette/test/index.js (100%) rename {components => packages/components/src}/dashicon/index.js (99%) rename {components => packages/components/src}/dashicon/style.scss (100%) rename {components => packages/components/src}/dashicon/test/index.js (100%) rename {components => packages/components/src}/date-time/README.md (100%) rename {components => packages/components/src}/date-time/date.js (100%) rename {components => packages/components/src}/date-time/index.js (95%) rename {components => packages/components/src}/date-time/style.scss (95%) rename {components => packages/components/src}/date-time/test/time.js (100%) rename {components => packages/components/src}/date-time/time.js (100%) rename {components => packages/components/src}/deprecated.js (100%) rename {components => packages/components/src}/disabled/README.md (100%) rename {components => packages/components/src}/disabled/index.js (97%) rename {components => packages/components/src}/disabled/style.scss (100%) rename {components => packages/components/src}/disabled/test/index.js (100%) rename {components => packages/components/src}/draggable/README.md (100%) rename {components => packages/components/src}/draggable/index.js (98%) rename {components => packages/components/src}/draggable/style.scss (100%) rename {components => packages/components/src}/drop-zone/README.md (100%) rename {components => packages/components/src}/drop-zone/index.js (98%) rename {components => packages/components/src}/drop-zone/provider.js (100%) rename {components => packages/components/src}/drop-zone/style.scss (100%) rename {components => packages/components/src}/dropdown-menu/README.md (100%) rename {components => packages/components/src}/dropdown-menu/index.js (98%) rename {components => packages/components/src}/dropdown-menu/style.scss (100%) rename {components => packages/components/src}/dropdown-menu/test/index.js (100%) rename {components => packages/components/src}/dropdown/README.md (100%) rename {components => packages/components/src}/dropdown/index.js (100%) rename {components => packages/components/src}/dropdown/test/index.js (100%) rename {components => packages/components/src}/external-link/index.js (97%) rename {components => packages/components/src}/external-link/style.scss (100%) rename {components => packages/components/src}/focusable-iframe/README.md (100%) rename {components => packages/components/src}/focusable-iframe/index.js (100%) rename {components => packages/components/src}/font-size-picker/README.md (100%) rename {components => packages/components/src}/font-size-picker/index.js (98%) rename {components => packages/components/src}/font-size-picker/style.scss (100%) rename {components => packages/components/src}/form-file-upload/index.js (97%) rename {components => packages/components/src}/form-file-upload/style.scss (100%) rename {components => packages/components/src}/form-file-upload/test/index.js (100%) rename {components => packages/components/src}/form-toggle/index.js (95%) rename {components => packages/components/src}/form-toggle/style.scss (100%) rename {components => packages/components/src}/form-toggle/test/index.js (100%) rename {components => packages/components/src}/form-token-field/README.md (100%) rename {components => packages/components/src}/form-token-field/index.js (99%) rename {components => packages/components/src}/form-token-field/style.scss (100%) rename {components => packages/components/src}/form-token-field/suggestions-list.js (100%) rename {components => packages/components/src}/form-token-field/test/index.js (100%) rename {components => packages/components/src}/form-token-field/test/lib/fixtures.js (100%) rename {components => packages/components/src}/form-token-field/test/lib/token-field-wrapper.js (100%) rename {components => packages/components/src}/form-token-field/token-input.js (100%) rename {components => packages/components/src}/form-token-field/token.js (100%) rename {components => packages/components/src}/higher-order/README.md (100%) rename {components => packages/components/src}/higher-order/navigate-regions/README.md (100%) rename {components => packages/components/src}/higher-order/navigate-regions/index.js (99%) rename {components => packages/components/src}/higher-order/navigate-regions/style.scss (100%) rename {components => packages/components/src}/higher-order/with-api-data/README.md (100%) rename {components => packages/components/src}/higher-order/with-api-data/index.js (100%) rename {components => packages/components/src}/higher-order/with-api-data/provider.js (100%) rename {components => packages/components/src}/higher-order/with-api-data/request.js (100%) rename {components => packages/components/src}/higher-order/with-api-data/routes.js (100%) rename {components => packages/components/src}/higher-order/with-api-data/test/index.js (100%) rename {components => packages/components/src}/higher-order/with-api-data/test/request.js (100%) rename {components => packages/components/src}/higher-order/with-api-data/test/routes.js (100%) rename {components => packages/components/src}/higher-order/with-constrained-tabbing/README.md (100%) rename {components => packages/components/src}/higher-order/with-constrained-tabbing/index.js (100%) rename {components => packages/components/src}/higher-order/with-context/README.md (100%) rename {components => packages/components/src}/higher-order/with-context/index.js (100%) rename {components => packages/components/src}/higher-order/with-context/test/index.js (100%) rename {components => packages/components/src}/higher-order/with-fallback-styles/index.js (100%) rename {components => packages/components/src}/higher-order/with-filters/README.md (100%) rename {components => packages/components/src}/higher-order/with-filters/index.js (100%) rename {components => packages/components/src}/higher-order/with-filters/test/index.js (100%) rename {components => packages/components/src}/higher-order/with-focus-outside/README.md (100%) rename {components => packages/components/src}/higher-order/with-focus-outside/index.js (100%) rename {components => packages/components/src}/higher-order/with-focus-outside/test/index.js (100%) rename {components => packages/components/src}/higher-order/with-focus-return/index.js (100%) rename {components => packages/components/src}/higher-order/with-focus-return/test/index.js (100%) rename {components => packages/components/src}/higher-order/with-notices/index.js (100%) rename {components => packages/components/src}/higher-order/with-spoken-messages/index.js (100%) rename {components => packages/components/src}/higher-order/with-spoken-messages/test/index.js (100%) rename {components => packages/components/src}/icon-button/index.js (98%) rename {components => packages/components/src}/icon-button/style.scss (100%) rename {components => packages/components/src}/icon-button/test/index.js (100%) create mode 100644 packages/components/src/index.js rename {components => packages/components/src}/keyboard-shortcuts/README.md (100%) rename {components => packages/components/src}/keyboard-shortcuts/index.js (100%) rename {components => packages/components/src}/keyboard-shortcuts/test/index.js (100%) rename {components => packages/components/src}/menu-group/index.js (97%) rename {components => packages/components/src}/menu-group/style.scss (100%) rename {components => packages/components/src}/menu-group/test/__snapshots__/index.js.snap (100%) rename {components => packages/components/src}/menu-group/test/index.js (100%) rename {components => packages/components/src}/menu-item/index.js (98%) rename {components => packages/components/src}/menu-item/shortcut.js (78%) rename {components => packages/components/src}/menu-item/style.scss (100%) rename {components => packages/components/src}/menu-item/test/__snapshots__/index.js.snap (100%) rename {components => packages/components/src}/menu-item/test/index.js (100%) rename {components => packages/components/src}/menu-items-choice/index.js (100%) rename {components => packages/components/src}/modal/README.md (100%) rename {components => packages/components/src}/modal/aria-helper.js (100%) rename {components => packages/components/src}/modal/frame.js (99%) rename {components => packages/components/src}/modal/header.js (97%) rename {components => packages/components/src}/modal/index.js (99%) rename {components => packages/components/src}/modal/style.scss (100%) rename {components => packages/components/src}/modal/test/aria-helper.js (100%) rename {components => packages/components/src}/navigable-container/README.md (100%) rename {components => packages/components/src}/navigable-container/index.js (100%) rename {components => packages/components/src}/navigable-container/test/index.js (100%) rename {components => packages/components/src}/notice/README.md (100%) rename {components => packages/components/src}/notice/index.js (92%) rename {components => packages/components/src}/notice/list.js (100%) rename {components => packages/components/src}/notice/style.scss (100%) rename {components => packages/components/src}/notice/test/__snapshots__/index.js.snap (100%) rename {components => packages/components/src}/notice/test/index.js (100%) rename {components => packages/components/src}/panel/body.js (100%) rename {components => packages/components/src}/panel/color.js (97%) rename {components => packages/components/src}/panel/header.js (100%) rename {components => packages/components/src}/panel/index.js (94%) rename {components => packages/components/src}/panel/row.js (100%) rename {components => packages/components/src}/panel/style.scss (100%) rename {components => packages/components/src}/panel/test/__snapshots__/color.js.snap (100%) rename {components => packages/components/src}/panel/test/body.js (100%) rename {components => packages/components/src}/panel/test/color.js (100%) rename {components => packages/components/src}/panel/test/header.js (100%) rename {components => packages/components/src}/panel/test/index.js (100%) rename {components => packages/components/src}/panel/test/row.js (100%) rename {components => packages/components/src}/placeholder/index.js (97%) rename {components => packages/components/src}/placeholder/style.scss (100%) rename {components => packages/components/src}/placeholder/test/index.js (100%) rename {components => packages/components/src}/popover/README.md (100%) rename {components => packages/components/src}/popover/detect-outside.js (100%) rename {components => packages/components/src}/popover/index.js (99%) rename {components => packages/components/src}/popover/style.scss (100%) rename {components => packages/components/src}/popover/test/index.js (100%) rename {components => packages/components/src}/popover/test/utils.js (100%) rename {components => packages/components/src}/popover/utils.js (100%) rename {components => packages/components/src}/query-controls/category-select.js (100%) rename {components => packages/components/src}/query-controls/index.js (100%) rename {components => packages/components/src}/query-controls/terms.js (100%) rename {components => packages/components/src}/radio-control/README.md (100%) rename {components => packages/components/src}/radio-control/index.js (98%) rename {components => packages/components/src}/radio-control/style.scss (100%) rename {components => packages/components/src}/range-control/README.md (100%) rename {components => packages/components/src}/range-control/index.js (98%) rename {components => packages/components/src}/range-control/style.scss (100%) rename {components => packages/components/src}/range-control/test/index.js (100%) rename {components => packages/components/src}/responsive-wrapper/index.js (92%) rename {components => packages/components/src}/responsive-wrapper/style.scss (100%) rename {components => packages/components/src}/sandbox/README.md (100%) rename {components => packages/components/src}/sandbox/index.js (100%) rename {components => packages/components/src}/scroll-lock/README.md (100%) rename {components => packages/components/src}/scroll-lock/index.js (97%) rename components/scroll-lock/index.scss => packages/components/src/scroll-lock/style.scss (100%) rename {components => packages/components/src}/scroll-lock/test/index.js (100%) rename {components => packages/components/src}/select-control/README.md (100%) rename {components => packages/components/src}/select-control/index.js (98%) rename {components => packages/components/src}/select-control/style.scss (100%) rename {components => packages/components/src}/server-side-render/README.md (100%) rename {components => packages/components/src}/server-side-render/index.js (100%) rename {components => packages/components/src}/server-side-render/test/index.js (100%) rename {components => packages/components/src}/slot-fill/README.md (100%) rename {components => packages/components/src}/slot-fill/fill.js (100%) rename {components => packages/components/src}/slot-fill/index.js (100%) rename {components => packages/components/src}/slot-fill/provider.js (100%) rename {components => packages/components/src}/slot-fill/slot.js (100%) rename {components => packages/components/src}/slot-fill/test/index.js (100%) rename {components => packages/components/src}/slot-fill/test/slot.js (100%) rename {components => packages/components/src}/spinner/index.js (100%) create mode 100644 packages/components/src/style.scss rename {components => packages/components/src}/tab-panel/README.md (100%) rename {components => packages/components/src}/tab-panel/index.js (100%) rename {components => packages/components/src}/tab-panel/test/index.js (100%) rename {components => packages/components/src}/text-control/README.md (100%) rename {components => packages/components/src}/text-control/index.js (97%) rename {components => packages/components/src}/text-control/style.scss (100%) rename {components => packages/components/src}/textarea-control/README.md (100%) rename {components => packages/components/src}/textarea-control/index.js (97%) rename {components => packages/components/src}/textarea-control/style.scss (100%) rename {components => packages/components/src}/toggle-control/README.md (100%) rename {components => packages/components/src}/toggle-control/index.js (98%) rename {components => packages/components/src}/toggle-control/style.scss (100%) rename {components => packages/components/src}/toggle-control/test/index.js (100%) rename {components => packages/components/src}/toolbar/index.js (99%) rename {components => packages/components/src}/toolbar/style.scss (100%) rename {components => packages/components/src}/toolbar/test/index.js (100%) rename {components => packages/components/src}/tooltip/README.md (100%) rename {components => packages/components/src}/tooltip/index.js (99%) rename {components => packages/components/src}/tooltip/style.scss (100%) rename {components => packages/components/src}/tooltip/test/index.js (100%) rename {components => packages/components/src}/tree-select/README.md (100%) rename {components => packages/components/src}/tree-select/index.js (100%) diff --git a/.gitignore b/.gitignore index e998f95a794de..17bf246a27711 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ # Directories/files that may be generated by this project build build-module +build-style coverage node_modules gutenberg.zip diff --git a/bin/packages/build.js b/bin/packages/build.js index 2e1e14f5a5294..96634b3322d82 100755 --- a/bin/packages/build.js +++ b/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` ); } diff --git a/bin/packages/post-css-config.js b/bin/packages/post-css-config.js new file mode 100644 index 0000000000000..b72487044cf61 --- /dev/null +++ b/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' ), +]; diff --git a/components/code-editor/index.js b/components/code-editor/index.js index 546f0afe67329..083229dc60075 100644 --- a/components/code-editor/index.js +++ b/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 ) => { diff --git a/components/index.js b/components/index.js index e016168939a1f..23381ba91b09d 100644 --- a/components/index.js +++ b/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'; diff --git a/docs/manifest.json b/docs/manifest.json index a7dcc05fdf4b3..3efafeb88c966 100644 --- a/docs/manifest.json +++ b/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", diff --git a/docs/tool/config.js b/docs/tool/config.js index f58d8189743f9..70c7f2b9529b2 100644 --- a/docs/tool/config.js +++ b/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', diff --git a/lib/client-assets.php b/lib/client-assets.php index d2769721f7fa8..256e933470c8f 100644 --- a/lib/client-assets.php +++ b/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', diff --git a/package-lock.json b/package-lock.json index 6a3ae7804fd3c..cccd8a23564ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3032,6 +3032,311 @@ "version": "file:packages/browserslist-config", "dev": true }, + "@wordpress/components": { + "version": "file:packages/components", + "requires": { + "@wordpress/a11y": "file:packages/a11y", + "@wordpress/api-request": "file:packages/api-request", + "@wordpress/compose": "file:packages/compose", + "@wordpress/deprecated": "file:packages/deprecated", + "@wordpress/dom": "file:packages/dom", + "@wordpress/element": "file:packages/element", + "@wordpress/hooks": "file:packages/hooks", + "@wordpress/i18n": "file:packages/i18n", + "@wordpress/is-shallow-equal": "file:packages/is-shallow-equal", + "@wordpress/keycodes": "file:packages/keycodes", + "classnames": "^2.2.5", + "clipboard": "^1.7.1", + "dom-scroll-into-view": "^1.2.1", + "http-build-query": "^0.7.0", + "lodash": "^4.17.10", + "memize": "^1.0.5", + "moment": "^2.22.1", + "mousetrap": "^1.6.2", + "react-click-outside": "^2.3.1", + "react-color": "^2.13.4", + "react-datepicker": "^1.4.1", + "rememo": "^3.0.0", + "uuid": "^3.1.0" + }, + "dependencies": { + "@wordpress/a11y": { + "version": "file:packages/a11y", + "bundled": true, + "requires": { + "@wordpress/dom-ready": "^1.0.3" + }, + "dependencies": { + "@wordpress/dom-ready": { + "version": "1.1.0", + "bundled": true + } + } + }, + "@wordpress/api-request": { + "version": "file:packages/api-request", + "bundled": true, + "requires": { + "jquery": "^3.3.1" + }, + "dependencies": { + "jquery": { + "version": "3.3.1", + "bundled": true + } + } + }, + "@wordpress/deprecated": { + "version": "file:packages/deprecated", + "bundled": true + }, + "@wordpress/dom": { + "version": "file:packages/dom", + "bundled": true, + "requires": { + "element-closest": "^2.0.2", + "lodash": "^4.17.10", + "tinymce": "^4.7.2" + }, + "dependencies": { + "element-closest": { + "version": "2.0.2", + "bundled": true + }, + "lodash": { + "version": "4.17.10", + "bundled": true + }, + "tinymce": { + "version": "4.8.0", + "bundled": true + } + } + }, + "@wordpress/element": { + "version": "file:packages/element", + "bundled": true, + "requires": { + "lodash": "^4.17.10", + "react": "^16.4.1", + "react-dom": "^16.4.1" + }, + "dependencies": { + "@wordpress/deprecated": { + "version": "file:packages/deprecated", + "bundled": true + }, + "@wordpress/is-shallow-equal": { + "version": "file:packages/is-shallow-equal", + "bundled": true + }, + "asap": { + "version": "2.0.6", + "bundled": true + }, + "core-js": { + "version": "1.2.7", + "bundled": true + }, + "encoding": { + "version": "0.1.12", + "bundled": true, + "requires": { + "iconv-lite": "~0.4.13" + } + }, + "fbjs": { + "version": "0.8.17", + "bundled": true, + "requires": { + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + } + }, + "iconv-lite": { + "version": "0.4.23", + "bundled": true, + "requires": { + "safer-buffer": ">= 2.1.2 < 3" + } + }, + "is-stream": { + "version": "1.1.0", + "bundled": true + }, + "isomorphic-fetch": { + "version": "2.2.1", + "bundled": true, + "requires": { + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" + } + }, + "js-tokens": { + "version": "4.0.0", + "bundled": true + }, + "lodash": { + "version": "4.17.10", + "bundled": true + }, + "loose-envify": { + "version": "1.4.0", + "bundled": true, + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, + "node-fetch": { + "version": "1.7.3", + "bundled": true, + "requires": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + }, + "object-assign": { + "version": "4.1.1", + "bundled": true + }, + "promise": { + "version": "7.3.1", + "bundled": true, + "requires": { + "asap": "~2.0.3" + } + }, + "prop-types": { + "version": "15.6.2", + "bundled": true, + "requires": { + "loose-envify": "^1.3.1", + "object-assign": "^4.1.1" + } + }, + "react": { + "version": "16.4.1", + "bundled": true, + "requires": { + "fbjs": "^0.8.16", + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.0" + } + }, + "react-dom": { + "version": "16.4.1", + "bundled": true, + "requires": { + "fbjs": "^0.8.16", + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.0" + } + }, + "safer-buffer": { + "version": "2.1.2", + "bundled": true + }, + "setimmediate": { + "version": "1.0.5", + "bundled": true + }, + "ua-parser-js": { + "version": "0.7.18", + "bundled": true + }, + "whatwg-fetch": { + "version": "2.0.4", + "bundled": true + } + } + }, + "@wordpress/hooks": { + "version": "file:packages/hooks", + "bundled": true + }, + "@wordpress/i18n": { + "version": "file:packages/i18n", + "bundled": true, + "requires": { + "gettext-parser": "^1.3.1", + "jed": "^1.1.1", + "lodash": "^4.17.5", + "memize": "^1.0.5" + }, + "dependencies": { + "encoding": { + "version": "0.1.12", + "bundled": true, + "requires": { + "iconv-lite": "~0.4.13" + } + }, + "gettext-parser": { + "version": "1.4.0", + "bundled": true, + "requires": { + "encoding": "^0.1.12", + "safe-buffer": "^5.1.1" + } + }, + "iconv-lite": { + "version": "0.4.23", + "bundled": true, + "requires": { + "safer-buffer": ">= 2.1.2 < 3" + } + }, + "jed": { + "version": "1.1.1", + "bundled": true + }, + "lodash": { + "version": "4.17.10", + "bundled": true + }, + "memize": { + "version": "1.0.5", + "bundled": true + }, + "safe-buffer": { + "version": "5.1.2", + "bundled": true + }, + "safer-buffer": { + "version": "2.1.2", + "bundled": true + } + } + }, + "@wordpress/is-shallow-equal": { + "version": "file:packages/is-shallow-equal", + "bundled": true + }, + "@wordpress/keycodes": { + "version": "file:packages/keycodes", + "bundled": true, + "requires": { + "lodash": "^4.17.10" + }, + "dependencies": { + "lodash": { + "version": "4.17.10", + "bundled": true + } + } + }, + "lodash": { + "version": "4.17.10", + "bundled": true + } + } + }, "@wordpress/compose": { "version": "file:packages/compose", "requires": { @@ -3097,6 +3402,16 @@ "lodash": "^4.17.10", "react": "^16.4.1", "react-dom": "^16.4.1" + }, + "dependencies": { + "prop-types": { + "version": "15.6.2", + "bundled": true, + "requires": { + "loose-envify": "^1.3.1", + "object-assign": "^4.1.1" + } + } } }, "@wordpress/hooks": { @@ -4941,6 +5256,12 @@ "integrity": "sha512-XBaoWE9RW8pPdPQNibZsW2zh8TW6gcarXp1FZPwT8Uop8ScSNldJEWf2k9l3HeTqdrEwsOsFcq74RiJECW34yA==", "dev": true }, + "bindings": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.2.1.tgz", + "integrity": "sha1-FK1hE4EtLTfXLme0ystLtyZQXxE=", + "dev": true + }, "block-stream": { "version": "0.0.9", "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", @@ -6906,6 +7227,16 @@ "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==", "dev": true }, + "deasync": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/deasync/-/deasync-0.1.13.tgz", + "integrity": "sha512-/6ngYM7AapueqLtvOzjv9+11N2fHDSrkxeMF1YPE20WIfaaawiBg+HZH1E5lHrcJxlKR42t6XPOEmMmqcAsU1g==", + "dev": true, + "requires": { + "bindings": "~1.2.1", + "nan": "^2.0.7" + } + }, "debug": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", diff --git a/package.json b/package.json index bfd8501b9e18a..8cdeb168fba5e 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@wordpress/api-request": "file:packages/api-request", "@wordpress/autop": "file:packages/autop", "@wordpress/blob": "file:packages/blob", + "@wordpress/components": "file:packages/components", "@wordpress/compose": "file:packages/compose", "@wordpress/core-data": "file:packages/core-data", "@wordpress/data": "file:packages/data", @@ -38,29 +39,23 @@ "@wordpress/viewport": "file:packages/viewport", "@wordpress/wordcount": "file:packages/wordcount", "classnames": "2.2.5", - "clipboard": "1.7.1", "dom-react": "2.2.1", "dom-scroll-into-view": "1.2.1", "element-closest": "2.0.2", "equivalent-key-map": "0.2.0", "eslint-plugin-wordpress": "git://github.com/WordPress-Coding-Standards/eslint-plugin-wordpress.git#1774343f6226052a46b081e01db3fca8793cc9f1", "hpq": "1.2.0", - "http-build-query": "0.7.0", "jquery": "3.3.1", "js-beautify": "1.6.14", "lodash": "4.17.10", "memize": "1.0.5", "moment": "2.22.1", "moment-timezone": "0.5.16", - "mousetrap": "1.6.2", "prop-types": "15.5.10", "querystringify": "1.0.0", "re-resizable": "4.4.8", "react": "16.4.1", "react-autosize-textarea": "3.0.2", - "react-click-outside": "2.3.1", - "react-color": "2.13.4", - "react-datepicker": "1.4.1", "react-dom": "16.4.1", "redux": "3.7.2", "redux-multi": "0.1.12", @@ -95,6 +90,7 @@ "concurrently": "3.5.0", "core-js": "2.5.7", "cross-env": "3.2.4", + "deasync": "0.1.13", "deep-freeze": "0.0.1", "doctrine": "2.1.0", "eslint": "4.16.0", @@ -149,9 +145,9 @@ }, "scripts": { "prebuild": "npm run check-engines", - "clean:packages": "rimraf ./packages/*/build ./packages/*/build-module", - "prebuild:packages": "npm run clean:packages && cross-env INCLUDE_PACKAGES=babel-plugin-import-jsx-pragma SKIP_JSX_PRAGMA_TRANSFORM=1 node ./bin/packages/build.js", - "build:packages": "cross-env EXCLUDE_PACKAGES=babel-plugin-import-jsx-pragma node ./bin/packages/build.js", + "clean:packages": "rimraf ./packages/*/build ./packages/*/build-module ./packages/*/build-style", + "prebuild:packages": "npm run clean:packages && cross-env INCLUDE_PACKAGES=babel-plugin-import-jsx-pragma,postcss-themes SKIP_JSX_PRAGMA_TRANSFORM=1 node ./bin/packages/build.js", + "build:packages": "cross-env EXCLUDE_PACKAGES=babel-plugin-import-jsx-pragma,postcss-themes node ./bin/packages/build.js", "build": "npm run build:packages && cross-env NODE_ENV=production webpack", "check-engines": "check-node-version --package", "ci": "concurrently \"npm run lint\" \"npm run test-unit:coverage-ci\"", diff --git a/packages/components/.npmrc b/packages/components/.npmrc new file mode 100644 index 0000000000000..43c97e719a5a8 --- /dev/null +++ b/packages/components/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/packages/components/README.md b/packages/components/README.md new file mode 100644 index 0000000000000..3ba3f12c6a6aa --- /dev/null +++ b/packages/components/README.md @@ -0,0 +1,29 @@ +Components +========== + +This packages includes a library of generic WordPress components to be used for creating common UI elements shared between screens and features of the WordPress dashboard. + +## Installation + +Install the module + +```bash +npm install @wordpress/components --save +``` + +## Usage + +Within Gutenberg, these components can be accessed by importing from the `components` root directory: + +```jsx +/** + * WordPress dependencies + */ +import { Button } from '@wordpress/components'; + +export default function MyButton() { + return ; +} +``` + +

Code is Poetry.

diff --git a/packages/components/package.json b/packages/components/package.json new file mode 100644 index 0000000000000..1b20d54e8a698 --- /dev/null +++ b/packages/components/package.json @@ -0,0 +1,58 @@ +{ + "name": "@wordpress/components", + "version": "1.0.0-alpha.1", + "description": "UI Compoonents for WordPress", + "author": "The WordPress Contributors", + "license": "GPL-2.0-or-later", + "keywords": [ + "wordpress", + "components" + ], + "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/components/README.md", + "repository": { + "type": "git", + "url": "https://github.com/WordPress/gutenberg.git" + }, + "bugs": { + "url": "https://github.com/WordPress/gutenberg/issues" + }, + "files": [ + "build", + "build-module", + "build-style" + ], + "main": "build/index.js", + "module": "build-module/index.js", + "dependencies": { + "@wordpress/a11y": "file:../a11y", + "@wordpress/api-request": "file:../api-request", + "@wordpress/compose": "file:../compose", + "@wordpress/deprecated": "file:../deprecated", + "@wordpress/dom": "file:../dom", + "@wordpress/element": "file:../element", + "@wordpress/hooks": "file:../hooks", + "@wordpress/i18n": "file:../i18n", + "@wordpress/is-shallow-equal": "file:../is-shallow-equal", + "@wordpress/keycodes": "file:../keycodes", + "classnames": "^2.2.5", + "clipboard": "^1.7.1", + "dom-scroll-into-view": "^1.2.1", + "http-build-query": "^0.7.0", + "lodash": "^4.17.10", + "memize": "^1.0.5", + "moment": "^2.22.1", + "mousetrap": "^1.6.2", + "react-click-outside": "^2.3.1", + "react-color": "^2.13.4", + "react-datepicker": "^1.4.1", + "rememo": "^3.0.0", + "uuid": "^3.1.0" + }, + "devDependencies": { + "enzyme": "^3.3.0", + "react-test-renderer": "^16.4.1" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/components/README.md b/packages/components/src/README.md similarity index 100% rename from components/README.md rename to packages/components/src/README.md diff --git a/components/autocomplete/README.md b/packages/components/src/autocomplete/README.md similarity index 100% rename from components/autocomplete/README.md rename to packages/components/src/autocomplete/README.md diff --git a/components/autocomplete/index.js b/packages/components/src/autocomplete/index.js similarity index 99% rename from components/autocomplete/index.js rename to packages/components/src/autocomplete/index.js index 78753c2ba097f..6554ef74d58f2 100644 --- a/components/autocomplete/index.js +++ b/packages/components/src/autocomplete/index.js @@ -16,7 +16,6 @@ import { withInstanceId, compose } from '@wordpress/compose'; /** * Internal dependencies */ -import './style.scss'; import withFocusOutside from '../higher-order/with-focus-outside'; import Button from '../button'; import Popover from '../popover'; diff --git a/components/autocomplete/style.scss b/packages/components/src/autocomplete/style.scss similarity index 100% rename from components/autocomplete/style.scss rename to packages/components/src/autocomplete/style.scss diff --git a/components/autocomplete/test/index.js b/packages/components/src/autocomplete/test/index.js similarity index 100% rename from components/autocomplete/test/index.js rename to packages/components/src/autocomplete/test/index.js diff --git a/components/base-control/README.md b/packages/components/src/base-control/README.md similarity index 100% rename from components/base-control/README.md rename to packages/components/src/base-control/README.md diff --git a/components/base-control/index.js b/packages/components/src/base-control/index.js similarity index 90% rename from components/base-control/index.js rename to packages/components/src/base-control/index.js index 695293cec35eb..f7b155ef56b46 100644 --- a/components/base-control/index.js +++ b/packages/components/src/base-control/index.js @@ -3,11 +3,6 @@ */ import classnames from 'classnames'; -/** - * Internal dependencies - */ -import './style.scss'; - function BaseControl( { id, label, help, className, children } ) { return (
diff --git a/components/base-control/style.scss b/packages/components/src/base-control/style.scss similarity index 100% rename from components/base-control/style.scss rename to packages/components/src/base-control/style.scss diff --git a/components/button-group/index.js b/packages/components/src/button-group/index.js similarity index 83% rename from components/button-group/index.js rename to packages/components/src/button-group/index.js index df65e99cb8068..b864ff7ccc701 100644 --- a/components/button-group/index.js +++ b/packages/components/src/button-group/index.js @@ -3,11 +3,6 @@ */ import classnames from 'classnames'; -/** - * Internal dependencies - */ -import './style.scss'; - function ButtonGroup( { className, ...props } ) { const classes = classnames( 'components-button-group', className ); diff --git a/components/button-group/style.scss b/packages/components/src/button-group/style.scss similarity index 100% rename from components/button-group/style.scss rename to packages/components/src/button-group/style.scss diff --git a/components/button/README.md b/packages/components/src/button/README.md similarity index 100% rename from components/button/README.md rename to packages/components/src/button/README.md diff --git a/components/button/index.js b/packages/components/src/button/index.js similarity index 94% rename from components/button/index.js rename to packages/components/src/button/index.js index b36d6a4208107..44e38cfc67c69 100644 --- a/components/button/index.js +++ b/packages/components/src/button/index.js @@ -8,11 +8,6 @@ import classnames from 'classnames'; */ import { createElement, forwardRef } from '@wordpress/element'; -/** - * Internal dependencies - */ -import './style.scss'; - export function Button( props, ref ) { const { href, diff --git a/components/button/style.scss b/packages/components/src/button/style.scss similarity index 100% rename from components/button/style.scss rename to packages/components/src/button/style.scss diff --git a/components/button/test/index.js b/packages/components/src/button/test/index.js similarity index 100% rename from components/button/test/index.js rename to packages/components/src/button/test/index.js diff --git a/components/checkbox-control/README.md b/packages/components/src/checkbox-control/README.md similarity index 100% rename from components/checkbox-control/README.md rename to packages/components/src/checkbox-control/README.md diff --git a/components/checkbox-control/index.js b/packages/components/src/checkbox-control/index.js similarity index 97% rename from components/checkbox-control/index.js rename to packages/components/src/checkbox-control/index.js index 286f5ab2feb80..04d584cdff6e1 100644 --- a/components/checkbox-control/index.js +++ b/packages/components/src/checkbox-control/index.js @@ -7,7 +7,6 @@ import { withInstanceId } from '@wordpress/compose'; * Internal dependencies */ import BaseControl from '../base-control'; -import './style.scss'; function CheckboxControl( { label, className, heading, checked, help, instanceId, onChange, ...props } ) { const id = `inspector-checkbox-control-${ instanceId }`; diff --git a/components/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss similarity index 100% rename from components/checkbox-control/style.scss rename to packages/components/src/checkbox-control/style.scss diff --git a/components/clipboard-button/index.js b/packages/components/src/clipboard-button/index.js similarity index 100% rename from components/clipboard-button/index.js rename to packages/components/src/clipboard-button/index.js diff --git a/components/color-palette/index.js b/packages/components/src/color-palette/index.js similarity index 99% rename from components/color-palette/index.js rename to packages/components/src/color-palette/index.js index aa633859f762e..cc03d27b7309b 100644 --- a/components/color-palette/index.js +++ b/packages/components/src/color-palette/index.js @@ -8,15 +8,14 @@ import { map } from 'lodash'; /** * WordPress dependencies */ -import Dropdown from '../dropdown'; -import Tooltip from '../tooltip'; import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies */ -import './style.scss'; import Button from '../button'; +import Dropdown from '../dropdown'; +import Tooltip from '../tooltip'; export default function ColorPalette( { colors, disableCustomColors = false, value, onChange } ) { function applyOrUnset( color ) { diff --git a/components/color-palette/style.scss b/packages/components/src/color-palette/style.scss similarity index 100% rename from components/color-palette/style.scss rename to packages/components/src/color-palette/style.scss diff --git a/components/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap similarity index 100% rename from components/color-palette/test/__snapshots__/index.js.snap rename to packages/components/src/color-palette/test/__snapshots__/index.js.snap diff --git a/components/color-palette/test/index.js b/packages/components/src/color-palette/test/index.js similarity index 100% rename from components/color-palette/test/index.js rename to packages/components/src/color-palette/test/index.js diff --git a/components/dashicon/index.js b/packages/components/src/dashicon/index.js similarity index 99% rename from components/dashicon/index.js rename to packages/components/src/dashicon/index.js index c65c1d9287747..8caabd4e5174b 100644 --- a/components/dashicon/index.js +++ b/packages/components/src/dashicon/index.js @@ -6,15 +6,10 @@ OR if you're looking to change now SVGs get output, you'll need to edit strings !!! */ /** - * External dependencies + * WordPress dependencies */ import { Component } from '@wordpress/element'; -/** - * Internal dependencies - */ -import './style.scss'; - export default class Dashicon extends Component { shouldComponentUpdate( nextProps ) { return ( diff --git a/components/dashicon/style.scss b/packages/components/src/dashicon/style.scss similarity index 100% rename from components/dashicon/style.scss rename to packages/components/src/dashicon/style.scss diff --git a/components/dashicon/test/index.js b/packages/components/src/dashicon/test/index.js similarity index 100% rename from components/dashicon/test/index.js rename to packages/components/src/dashicon/test/index.js diff --git a/components/date-time/README.md b/packages/components/src/date-time/README.md similarity index 100% rename from components/date-time/README.md rename to packages/components/src/date-time/README.md diff --git a/components/date-time/date.js b/packages/components/src/date-time/date.js similarity index 100% rename from components/date-time/date.js rename to packages/components/src/date-time/date.js diff --git a/components/date-time/index.js b/packages/components/src/date-time/index.js similarity index 95% rename from components/date-time/index.js rename to packages/components/src/date-time/index.js index 8793d3ae4c799..80ee3174d6d22 100644 --- a/components/date-time/index.js +++ b/packages/components/src/date-time/index.js @@ -1,7 +1,6 @@ /** * Internal dependencies */ -import './style.scss'; import { default as DatePicker } from './date'; import { default as TimePicker } from './time'; diff --git a/components/date-time/style.scss b/packages/components/src/date-time/style.scss similarity index 95% rename from components/date-time/style.scss rename to packages/components/src/date-time/style.scss index d01a819d5a1b0..93b8b4bf3fc10 100644 --- a/components/date-time/style.scss +++ b/packages/components/src/date-time/style.scss @@ -14,7 +14,8 @@ $datepicker__muted-color: #ccc; $datepicker__navigation-disabled-color: lighten($datepicker__muted-color, 10%); $datepicker__border-color: $light-gray-500; -@import '~react-datepicker/src/stylesheets/datepicker'; +// Lerna hoist packages, so can't reference with ~ +@import '../../../../node_modules/react-datepicker/src/stylesheets/datepicker'; .react-datepicker__month-container { float: none; diff --git a/components/date-time/test/time.js b/packages/components/src/date-time/test/time.js similarity index 100% rename from components/date-time/test/time.js rename to packages/components/src/date-time/test/time.js diff --git a/components/date-time/time.js b/packages/components/src/date-time/time.js similarity index 100% rename from components/date-time/time.js rename to packages/components/src/date-time/time.js diff --git a/components/deprecated.js b/packages/components/src/deprecated.js similarity index 100% rename from components/deprecated.js rename to packages/components/src/deprecated.js diff --git a/components/disabled/README.md b/packages/components/src/disabled/README.md similarity index 100% rename from components/disabled/README.md rename to packages/components/src/disabled/README.md diff --git a/components/disabled/index.js b/packages/components/src/disabled/index.js similarity index 97% rename from components/disabled/index.js rename to packages/components/src/disabled/index.js index 3bbd9bdb85cce..d335c6553c036 100644 --- a/components/disabled/index.js +++ b/packages/components/src/disabled/index.js @@ -10,11 +10,6 @@ import classnames from 'classnames'; import { createContext, Component } from '@wordpress/element'; import { focus } from '@wordpress/dom'; -/** - * Internal dependencies - */ -import './style.scss'; - const { Consumer, Provider } = createContext( false ); /** diff --git a/components/disabled/style.scss b/packages/components/src/disabled/style.scss similarity index 100% rename from components/disabled/style.scss rename to packages/components/src/disabled/style.scss diff --git a/components/disabled/test/index.js b/packages/components/src/disabled/test/index.js similarity index 100% rename from components/disabled/test/index.js rename to packages/components/src/disabled/test/index.js diff --git a/components/draggable/README.md b/packages/components/src/draggable/README.md similarity index 100% rename from components/draggable/README.md rename to packages/components/src/draggable/README.md diff --git a/components/draggable/index.js b/packages/components/src/draggable/index.js similarity index 98% rename from components/draggable/index.js rename to packages/components/src/draggable/index.js index d713a1a812be9..f6c85d6d40834 100644 --- a/components/draggable/index.js +++ b/packages/components/src/draggable/index.js @@ -10,11 +10,6 @@ import classnames from 'classnames'; import { Component } from '@wordpress/element'; import { withSafeTimeout } from '@wordpress/compose'; -/** - * Internal Dependencies - */ -import './style.scss'; - const dragImageClass = 'components-draggable__invisible-drag-image'; const cloneWrapperClass = 'components-draggable__clone'; const cloneHeightTransformationBreakpoint = 700; diff --git a/components/draggable/style.scss b/packages/components/src/draggable/style.scss similarity index 100% rename from components/draggable/style.scss rename to packages/components/src/draggable/style.scss diff --git a/components/drop-zone/README.md b/packages/components/src/drop-zone/README.md similarity index 100% rename from components/drop-zone/README.md rename to packages/components/src/drop-zone/README.md diff --git a/components/drop-zone/index.js b/packages/components/src/drop-zone/index.js similarity index 98% rename from components/drop-zone/index.js rename to packages/components/src/drop-zone/index.js index 1b2f00516d589..46241bbc17a2d 100644 --- a/components/drop-zone/index.js +++ b/packages/components/src/drop-zone/index.js @@ -13,7 +13,6 @@ import { Component } from '@wordpress/element'; /** * Internal dependencies */ -import './style.scss'; import Dashicon from '../dashicon'; class DropZone extends Component { diff --git a/components/drop-zone/provider.js b/packages/components/src/drop-zone/provider.js similarity index 100% rename from components/drop-zone/provider.js rename to packages/components/src/drop-zone/provider.js diff --git a/components/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss similarity index 100% rename from components/drop-zone/style.scss rename to packages/components/src/drop-zone/style.scss diff --git a/components/dropdown-menu/README.md b/packages/components/src/dropdown-menu/README.md similarity index 100% rename from components/dropdown-menu/README.md rename to packages/components/src/dropdown-menu/README.md diff --git a/components/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js similarity index 98% rename from components/dropdown-menu/index.js rename to packages/components/src/dropdown-menu/index.js index f5b88caa1d2d8..771464917ceab 100644 --- a/components/dropdown-menu/index.js +++ b/packages/components/src/dropdown-menu/index.js @@ -11,7 +11,6 @@ import { DOWN } from '@wordpress/keycodes'; /** * Internal dependencies */ -import './style.scss'; import IconButton from '../icon-button'; import Dashicon from '../dashicon'; import Dropdown from '../dropdown'; diff --git a/components/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss similarity index 100% rename from components/dropdown-menu/style.scss rename to packages/components/src/dropdown-menu/style.scss diff --git a/components/dropdown-menu/test/index.js b/packages/components/src/dropdown-menu/test/index.js similarity index 100% rename from components/dropdown-menu/test/index.js rename to packages/components/src/dropdown-menu/test/index.js diff --git a/components/dropdown/README.md b/packages/components/src/dropdown/README.md similarity index 100% rename from components/dropdown/README.md rename to packages/components/src/dropdown/README.md diff --git a/components/dropdown/index.js b/packages/components/src/dropdown/index.js similarity index 100% rename from components/dropdown/index.js rename to packages/components/src/dropdown/index.js diff --git a/components/dropdown/test/index.js b/packages/components/src/dropdown/test/index.js similarity index 100% rename from components/dropdown/test/index.js rename to packages/components/src/dropdown/test/index.js diff --git a/components/external-link/index.js b/packages/components/src/external-link/index.js similarity index 97% rename from components/external-link/index.js rename to packages/components/src/external-link/index.js index 6a484111ff665..d766c6353ea6c 100644 --- a/components/external-link/index.js +++ b/packages/components/src/external-link/index.js @@ -13,7 +13,6 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import Dashicon from '../dashicon'; -import './style.scss'; function ExternalLink( { href, children, className, rel = '', ...additionalProps } ) { rel = uniq( compact( [ diff --git a/components/external-link/style.scss b/packages/components/src/external-link/style.scss similarity index 100% rename from components/external-link/style.scss rename to packages/components/src/external-link/style.scss diff --git a/components/focusable-iframe/README.md b/packages/components/src/focusable-iframe/README.md similarity index 100% rename from components/focusable-iframe/README.md rename to packages/components/src/focusable-iframe/README.md diff --git a/components/focusable-iframe/index.js b/packages/components/src/focusable-iframe/index.js similarity index 100% rename from components/focusable-iframe/index.js rename to packages/components/src/focusable-iframe/index.js diff --git a/components/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md similarity index 100% rename from components/font-size-picker/README.md rename to packages/components/src/font-size-picker/README.md diff --git a/components/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js similarity index 98% rename from components/font-size-picker/index.js rename to packages/components/src/font-size-picker/index.js index 30f34ebb25cf1..e3ba345ca2ff8 100644 --- a/components/font-size-picker/index.js +++ b/packages/components/src/font-size-picker/index.js @@ -12,7 +12,6 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import './style.scss'; import Button from '../button'; import ButtonGroup from '../button-group'; import RangeControl from '../range-control'; diff --git a/components/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss similarity index 100% rename from components/font-size-picker/style.scss rename to packages/components/src/font-size-picker/style.scss diff --git a/components/form-file-upload/index.js b/packages/components/src/form-file-upload/index.js similarity index 97% rename from components/form-file-upload/index.js rename to packages/components/src/form-file-upload/index.js index c4cb139449b85..461f83c263888 100644 --- a/components/form-file-upload/index.js +++ b/packages/components/src/form-file-upload/index.js @@ -6,7 +6,6 @@ import { Component } from '@wordpress/element'; /** * Internal dependencies */ -import './style.scss'; import IconButton from '../icon-button'; class FormFileUpload extends Component { diff --git a/components/form-file-upload/style.scss b/packages/components/src/form-file-upload/style.scss similarity index 100% rename from components/form-file-upload/style.scss rename to packages/components/src/form-file-upload/style.scss diff --git a/components/form-file-upload/test/index.js b/packages/components/src/form-file-upload/test/index.js similarity index 100% rename from components/form-file-upload/test/index.js rename to packages/components/src/form-file-upload/test/index.js diff --git a/components/form-toggle/index.js b/packages/components/src/form-toggle/index.js similarity index 95% rename from components/form-toggle/index.js rename to packages/components/src/form-toggle/index.js index 8ccb4f10b64be..0847003c763da 100644 --- a/components/form-toggle/index.js +++ b/packages/components/src/form-toggle/index.js @@ -4,11 +4,6 @@ import classnames from 'classnames'; import { noop } from 'lodash'; -/** - * Internal dependencies - */ -import './style.scss'; - function FormToggle( { className, checked, id, onChange = noop, ...props } ) { const wrapperClasses = classnames( 'components-form-toggle', diff --git a/components/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss similarity index 100% rename from components/form-toggle/style.scss rename to packages/components/src/form-toggle/style.scss diff --git a/components/form-toggle/test/index.js b/packages/components/src/form-toggle/test/index.js similarity index 100% rename from components/form-toggle/test/index.js rename to packages/components/src/form-toggle/test/index.js diff --git a/components/form-token-field/README.md b/packages/components/src/form-token-field/README.md similarity index 100% rename from components/form-token-field/README.md rename to packages/components/src/form-token-field/README.md diff --git a/components/form-token-field/index.js b/packages/components/src/form-token-field/index.js similarity index 99% rename from components/form-token-field/index.js rename to packages/components/src/form-token-field/index.js index 61d960374138c..0612f51683ecd 100644 --- a/components/form-token-field/index.js +++ b/packages/components/src/form-token-field/index.js @@ -14,7 +14,6 @@ import { withInstanceId } from '@wordpress/compose'; /** * Internal dependencies */ -import './style.scss'; import Token from './token'; import TokenInput from './token-input'; import SuggestionsList from './suggestions-list'; diff --git a/components/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss similarity index 100% rename from components/form-token-field/style.scss rename to packages/components/src/form-token-field/style.scss diff --git a/components/form-token-field/suggestions-list.js b/packages/components/src/form-token-field/suggestions-list.js similarity index 100% rename from components/form-token-field/suggestions-list.js rename to packages/components/src/form-token-field/suggestions-list.js diff --git a/components/form-token-field/test/index.js b/packages/components/src/form-token-field/test/index.js similarity index 100% rename from components/form-token-field/test/index.js rename to packages/components/src/form-token-field/test/index.js diff --git a/components/form-token-field/test/lib/fixtures.js b/packages/components/src/form-token-field/test/lib/fixtures.js similarity index 100% rename from components/form-token-field/test/lib/fixtures.js rename to packages/components/src/form-token-field/test/lib/fixtures.js diff --git a/components/form-token-field/test/lib/token-field-wrapper.js b/packages/components/src/form-token-field/test/lib/token-field-wrapper.js similarity index 100% rename from components/form-token-field/test/lib/token-field-wrapper.js rename to packages/components/src/form-token-field/test/lib/token-field-wrapper.js diff --git a/components/form-token-field/token-input.js b/packages/components/src/form-token-field/token-input.js similarity index 100% rename from components/form-token-field/token-input.js rename to packages/components/src/form-token-field/token-input.js diff --git a/components/form-token-field/token.js b/packages/components/src/form-token-field/token.js similarity index 100% rename from components/form-token-field/token.js rename to packages/components/src/form-token-field/token.js diff --git a/components/higher-order/README.md b/packages/components/src/higher-order/README.md similarity index 100% rename from components/higher-order/README.md rename to packages/components/src/higher-order/README.md diff --git a/components/higher-order/navigate-regions/README.md b/packages/components/src/higher-order/navigate-regions/README.md similarity index 100% rename from components/higher-order/navigate-regions/README.md rename to packages/components/src/higher-order/navigate-regions/README.md diff --git a/components/higher-order/navigate-regions/index.js b/packages/components/src/higher-order/navigate-regions/index.js similarity index 99% rename from components/higher-order/navigate-regions/index.js rename to packages/components/src/higher-order/navigate-regions/index.js index 8154ed95136a9..26285da5b9260 100644 --- a/components/higher-order/navigate-regions/index.js +++ b/packages/components/src/higher-order/navigate-regions/index.js @@ -12,7 +12,6 @@ import { createHigherOrderComponent } from '@wordpress/compose'; /** * Internal Dependencies */ -import './style.scss'; import KeyboardShortcuts from '../../keyboard-shortcuts'; export default createHigherOrderComponent( diff --git a/components/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss similarity index 100% rename from components/higher-order/navigate-regions/style.scss rename to packages/components/src/higher-order/navigate-regions/style.scss diff --git a/components/higher-order/with-api-data/README.md b/packages/components/src/higher-order/with-api-data/README.md similarity index 100% rename from components/higher-order/with-api-data/README.md rename to packages/components/src/higher-order/with-api-data/README.md diff --git a/components/higher-order/with-api-data/index.js b/packages/components/src/higher-order/with-api-data/index.js similarity index 100% rename from components/higher-order/with-api-data/index.js rename to packages/components/src/higher-order/with-api-data/index.js diff --git a/components/higher-order/with-api-data/provider.js b/packages/components/src/higher-order/with-api-data/provider.js similarity index 100% rename from components/higher-order/with-api-data/provider.js rename to packages/components/src/higher-order/with-api-data/provider.js diff --git a/components/higher-order/with-api-data/request.js b/packages/components/src/higher-order/with-api-data/request.js similarity index 100% rename from components/higher-order/with-api-data/request.js rename to packages/components/src/higher-order/with-api-data/request.js diff --git a/components/higher-order/with-api-data/routes.js b/packages/components/src/higher-order/with-api-data/routes.js similarity index 100% rename from components/higher-order/with-api-data/routes.js rename to packages/components/src/higher-order/with-api-data/routes.js diff --git a/components/higher-order/with-api-data/test/index.js b/packages/components/src/higher-order/with-api-data/test/index.js similarity index 100% rename from components/higher-order/with-api-data/test/index.js rename to packages/components/src/higher-order/with-api-data/test/index.js diff --git a/components/higher-order/with-api-data/test/request.js b/packages/components/src/higher-order/with-api-data/test/request.js similarity index 100% rename from components/higher-order/with-api-data/test/request.js rename to packages/components/src/higher-order/with-api-data/test/request.js diff --git a/components/higher-order/with-api-data/test/routes.js b/packages/components/src/higher-order/with-api-data/test/routes.js similarity index 100% rename from components/higher-order/with-api-data/test/routes.js rename to packages/components/src/higher-order/with-api-data/test/routes.js diff --git a/components/higher-order/with-constrained-tabbing/README.md b/packages/components/src/higher-order/with-constrained-tabbing/README.md similarity index 100% rename from components/higher-order/with-constrained-tabbing/README.md rename to packages/components/src/higher-order/with-constrained-tabbing/README.md diff --git a/components/higher-order/with-constrained-tabbing/index.js b/packages/components/src/higher-order/with-constrained-tabbing/index.js similarity index 100% rename from components/higher-order/with-constrained-tabbing/index.js rename to packages/components/src/higher-order/with-constrained-tabbing/index.js diff --git a/components/higher-order/with-context/README.md b/packages/components/src/higher-order/with-context/README.md similarity index 100% rename from components/higher-order/with-context/README.md rename to packages/components/src/higher-order/with-context/README.md diff --git a/components/higher-order/with-context/index.js b/packages/components/src/higher-order/with-context/index.js similarity index 100% rename from components/higher-order/with-context/index.js rename to packages/components/src/higher-order/with-context/index.js diff --git a/components/higher-order/with-context/test/index.js b/packages/components/src/higher-order/with-context/test/index.js similarity index 100% rename from components/higher-order/with-context/test/index.js rename to packages/components/src/higher-order/with-context/test/index.js diff --git a/components/higher-order/with-fallback-styles/index.js b/packages/components/src/higher-order/with-fallback-styles/index.js similarity index 100% rename from components/higher-order/with-fallback-styles/index.js rename to packages/components/src/higher-order/with-fallback-styles/index.js diff --git a/components/higher-order/with-filters/README.md b/packages/components/src/higher-order/with-filters/README.md similarity index 100% rename from components/higher-order/with-filters/README.md rename to packages/components/src/higher-order/with-filters/README.md diff --git a/components/higher-order/with-filters/index.js b/packages/components/src/higher-order/with-filters/index.js similarity index 100% rename from components/higher-order/with-filters/index.js rename to packages/components/src/higher-order/with-filters/index.js diff --git a/components/higher-order/with-filters/test/index.js b/packages/components/src/higher-order/with-filters/test/index.js similarity index 100% rename from components/higher-order/with-filters/test/index.js rename to packages/components/src/higher-order/with-filters/test/index.js diff --git a/components/higher-order/with-focus-outside/README.md b/packages/components/src/higher-order/with-focus-outside/README.md similarity index 100% rename from components/higher-order/with-focus-outside/README.md rename to packages/components/src/higher-order/with-focus-outside/README.md diff --git a/components/higher-order/with-focus-outside/index.js b/packages/components/src/higher-order/with-focus-outside/index.js similarity index 100% rename from components/higher-order/with-focus-outside/index.js rename to packages/components/src/higher-order/with-focus-outside/index.js diff --git a/components/higher-order/with-focus-outside/test/index.js b/packages/components/src/higher-order/with-focus-outside/test/index.js similarity index 100% rename from components/higher-order/with-focus-outside/test/index.js rename to packages/components/src/higher-order/with-focus-outside/test/index.js diff --git a/components/higher-order/with-focus-return/index.js b/packages/components/src/higher-order/with-focus-return/index.js similarity index 100% rename from components/higher-order/with-focus-return/index.js rename to packages/components/src/higher-order/with-focus-return/index.js diff --git a/components/higher-order/with-focus-return/test/index.js b/packages/components/src/higher-order/with-focus-return/test/index.js similarity index 100% rename from components/higher-order/with-focus-return/test/index.js rename to packages/components/src/higher-order/with-focus-return/test/index.js diff --git a/components/higher-order/with-notices/index.js b/packages/components/src/higher-order/with-notices/index.js similarity index 100% rename from components/higher-order/with-notices/index.js rename to packages/components/src/higher-order/with-notices/index.js diff --git a/components/higher-order/with-spoken-messages/index.js b/packages/components/src/higher-order/with-spoken-messages/index.js similarity index 100% rename from components/higher-order/with-spoken-messages/index.js rename to packages/components/src/higher-order/with-spoken-messages/index.js diff --git a/components/higher-order/with-spoken-messages/test/index.js b/packages/components/src/higher-order/with-spoken-messages/test/index.js similarity index 100% rename from components/higher-order/with-spoken-messages/test/index.js rename to packages/components/src/higher-order/with-spoken-messages/test/index.js diff --git a/components/icon-button/index.js b/packages/components/src/icon-button/index.js similarity index 98% rename from components/icon-button/index.js rename to packages/components/src/icon-button/index.js index c6c35863bab98..c1196d894a53c 100644 --- a/components/icon-button/index.js +++ b/packages/components/src/icon-button/index.js @@ -12,7 +12,6 @@ import { Component } from '@wordpress/element'; /** * Internal dependencies */ -import './style.scss'; import Tooltip from '../tooltip'; import Button from '../button'; import Dashicon from '../dashicon'; diff --git a/components/icon-button/style.scss b/packages/components/src/icon-button/style.scss similarity index 100% rename from components/icon-button/style.scss rename to packages/components/src/icon-button/style.scss diff --git a/components/icon-button/test/index.js b/packages/components/src/icon-button/test/index.js similarity index 100% rename from components/icon-button/test/index.js rename to packages/components/src/icon-button/test/index.js diff --git a/packages/components/src/index.js b/packages/components/src/index.js new file mode 100644 index 0000000000000..347de394d523f --- /dev/null +++ b/packages/components/src/index.js @@ -0,0 +1,79 @@ +/** + * 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 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 const ifCondition = deprecated.ifCondition; +export const withGlobalEvents = deprecated.withGlobalEvents; +export const withInstanceId = deprecated.withInstanceId; +export const withSafeTimeout = deprecated.withSafeTimeout; +export const withState = deprecated.withState; diff --git a/components/keyboard-shortcuts/README.md b/packages/components/src/keyboard-shortcuts/README.md similarity index 100% rename from components/keyboard-shortcuts/README.md rename to packages/components/src/keyboard-shortcuts/README.md diff --git a/components/keyboard-shortcuts/index.js b/packages/components/src/keyboard-shortcuts/index.js similarity index 100% rename from components/keyboard-shortcuts/index.js rename to packages/components/src/keyboard-shortcuts/index.js diff --git a/components/keyboard-shortcuts/test/index.js b/packages/components/src/keyboard-shortcuts/test/index.js similarity index 100% rename from components/keyboard-shortcuts/test/index.js rename to packages/components/src/keyboard-shortcuts/test/index.js diff --git a/components/menu-group/index.js b/packages/components/src/menu-group/index.js similarity index 97% rename from components/menu-group/index.js rename to packages/components/src/menu-group/index.js index 423365d1f34ea..0083206650690 100644 --- a/components/menu-group/index.js +++ b/packages/components/src/menu-group/index.js @@ -13,7 +13,6 @@ import { withInstanceId } from '@wordpress/compose'; /** * Internal dependencies */ -import './style.scss'; import { NavigableMenu } from '../navigable-container'; export function MenuGroup( { diff --git a/components/menu-group/style.scss b/packages/components/src/menu-group/style.scss similarity index 100% rename from components/menu-group/style.scss rename to packages/components/src/menu-group/style.scss diff --git a/components/menu-group/test/__snapshots__/index.js.snap b/packages/components/src/menu-group/test/__snapshots__/index.js.snap similarity index 100% rename from components/menu-group/test/__snapshots__/index.js.snap rename to packages/components/src/menu-group/test/__snapshots__/index.js.snap diff --git a/components/menu-group/test/index.js b/packages/components/src/menu-group/test/index.js similarity index 100% rename from components/menu-group/test/index.js rename to packages/components/src/menu-group/test/index.js diff --git a/components/menu-item/index.js b/packages/components/src/menu-item/index.js similarity index 98% rename from components/menu-item/index.js rename to packages/components/src/menu-item/index.js index 842d3131d8ad2..8bbdf95c03e00 100644 --- a/components/menu-item/index.js +++ b/packages/components/src/menu-item/index.js @@ -12,7 +12,6 @@ import { cloneElement } from '@wordpress/element'; /** * Internal dependencies */ -import './style.scss'; import Button from '../button'; import Shortcut from './shortcut'; import IconButton from '../icon-button'; diff --git a/components/menu-item/shortcut.js b/packages/components/src/menu-item/shortcut.js similarity index 78% rename from components/menu-item/shortcut.js rename to packages/components/src/menu-item/shortcut.js index 3124c354687fd..582104e2511a8 100644 --- a/components/menu-item/shortcut.js +++ b/packages/components/src/menu-item/shortcut.js @@ -1,8 +1,3 @@ -/** - * Internal dependencies - */ -import './style.scss'; - function MenuItemsShortcut( { shortcut } ) { if ( ! shortcut ) { return null; diff --git a/components/menu-item/style.scss b/packages/components/src/menu-item/style.scss similarity index 100% rename from components/menu-item/style.scss rename to packages/components/src/menu-item/style.scss diff --git a/components/menu-item/test/__snapshots__/index.js.snap b/packages/components/src/menu-item/test/__snapshots__/index.js.snap similarity index 100% rename from components/menu-item/test/__snapshots__/index.js.snap rename to packages/components/src/menu-item/test/__snapshots__/index.js.snap diff --git a/components/menu-item/test/index.js b/packages/components/src/menu-item/test/index.js similarity index 100% rename from components/menu-item/test/index.js rename to packages/components/src/menu-item/test/index.js diff --git a/components/menu-items-choice/index.js b/packages/components/src/menu-items-choice/index.js similarity index 100% rename from components/menu-items-choice/index.js rename to packages/components/src/menu-items-choice/index.js diff --git a/components/modal/README.md b/packages/components/src/modal/README.md similarity index 100% rename from components/modal/README.md rename to packages/components/src/modal/README.md diff --git a/components/modal/aria-helper.js b/packages/components/src/modal/aria-helper.js similarity index 100% rename from components/modal/aria-helper.js rename to packages/components/src/modal/aria-helper.js diff --git a/components/modal/frame.js b/packages/components/src/modal/frame.js similarity index 99% rename from components/modal/frame.js rename to packages/components/src/modal/frame.js index 1d903c40eabe1..ad710f1f8841f 100644 --- a/components/modal/frame.js +++ b/packages/components/src/modal/frame.js @@ -14,7 +14,6 @@ import clickOutside from 'react-click-outside'; /** * Internal dependencies */ -import './style.scss'; import withFocusReturn from '../higher-order/with-focus-return'; import withConstrainedTabbing from '../higher-order/with-constrained-tabbing'; diff --git a/components/modal/header.js b/packages/components/src/modal/header.js similarity index 97% rename from components/modal/header.js rename to packages/components/src/modal/header.js index 4ce5fec67f766..c9710d810bb3b 100644 --- a/components/modal/header.js +++ b/packages/components/src/modal/header.js @@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies. */ import IconButton from '../icon-button'; -import './style.scss'; const ModalHeader = ( { icon, title, onClose, closeLabel, headingId } ) => { const label = closeLabel ? closeLabel : __( 'Close dialog' ); diff --git a/components/modal/index.js b/packages/components/src/modal/index.js similarity index 99% rename from components/modal/index.js rename to packages/components/src/modal/index.js index a97930f1d8e56..a65c45f4b1ecd 100644 --- a/components/modal/index.js +++ b/packages/components/src/modal/index.js @@ -13,7 +13,6 @@ import { withInstanceId } from '@wordpress/compose'; /** * Internal dependencies */ -import './style.scss'; import ModalFrame from './frame'; import ModalHeader from './header'; import * as ariaHelper from './aria-helper'; diff --git a/components/modal/style.scss b/packages/components/src/modal/style.scss similarity index 100% rename from components/modal/style.scss rename to packages/components/src/modal/style.scss diff --git a/components/modal/test/aria-helper.js b/packages/components/src/modal/test/aria-helper.js similarity index 100% rename from components/modal/test/aria-helper.js rename to packages/components/src/modal/test/aria-helper.js diff --git a/components/navigable-container/README.md b/packages/components/src/navigable-container/README.md similarity index 100% rename from components/navigable-container/README.md rename to packages/components/src/navigable-container/README.md diff --git a/components/navigable-container/index.js b/packages/components/src/navigable-container/index.js similarity index 100% rename from components/navigable-container/index.js rename to packages/components/src/navigable-container/index.js diff --git a/components/navigable-container/test/index.js b/packages/components/src/navigable-container/test/index.js similarity index 100% rename from components/navigable-container/test/index.js rename to packages/components/src/navigable-container/test/index.js diff --git a/components/notice/README.md b/packages/components/src/notice/README.md similarity index 100% rename from components/notice/README.md rename to packages/components/src/notice/README.md diff --git a/components/notice/index.js b/packages/components/src/notice/index.js similarity index 92% rename from components/notice/index.js rename to packages/components/src/notice/index.js index e8fa2ca7482a1..0fa733695d71f 100644 --- a/components/notice/index.js +++ b/packages/components/src/notice/index.js @@ -9,11 +9,6 @@ import classnames from 'classnames'; */ import { __ } from '@wordpress/i18n'; -/** - * Internal Dependencies - */ -import './style.scss'; - function Notice( { className, status, children, onRemove = noop, isDismissible = true } ) { const classNames = classnames( className, 'notice notice-alt notice-' + status, { 'is-dismissible': isDismissible, diff --git a/components/notice/list.js b/packages/components/src/notice/list.js similarity index 100% rename from components/notice/list.js rename to packages/components/src/notice/list.js diff --git a/components/notice/style.scss b/packages/components/src/notice/style.scss similarity index 100% rename from components/notice/style.scss rename to packages/components/src/notice/style.scss diff --git a/components/notice/test/__snapshots__/index.js.snap b/packages/components/src/notice/test/__snapshots__/index.js.snap similarity index 100% rename from components/notice/test/__snapshots__/index.js.snap rename to packages/components/src/notice/test/__snapshots__/index.js.snap diff --git a/components/notice/test/index.js b/packages/components/src/notice/test/index.js similarity index 100% rename from components/notice/test/index.js rename to packages/components/src/notice/test/index.js diff --git a/components/panel/body.js b/packages/components/src/panel/body.js similarity index 100% rename from components/panel/body.js rename to packages/components/src/panel/body.js diff --git a/components/panel/color.js b/packages/components/src/panel/color.js similarity index 97% rename from components/panel/color.js rename to packages/components/src/panel/color.js index a59ba3bbce998..c93887f7eff95 100644 --- a/components/panel/color.js +++ b/packages/components/src/panel/color.js @@ -6,7 +6,6 @@ import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies */ -import './style.scss'; import PanelBody from './body'; function PanelColor( { colorValue, colorName, title, ...props } ) { diff --git a/components/panel/header.js b/packages/components/src/panel/header.js similarity index 100% rename from components/panel/header.js rename to packages/components/src/panel/header.js diff --git a/components/panel/index.js b/packages/components/src/panel/index.js similarity index 94% rename from components/panel/index.js rename to packages/components/src/panel/index.js index 7d64f50a700b3..96e9daf8e647b 100644 --- a/components/panel/index.js +++ b/packages/components/src/panel/index.js @@ -6,7 +6,6 @@ import classnames from 'classnames'; /** * Internal dependencies */ -import './style.scss'; import PanelHeader from './header'; function Panel( { header, className, children } ) { diff --git a/components/panel/row.js b/packages/components/src/panel/row.js similarity index 100% rename from components/panel/row.js rename to packages/components/src/panel/row.js diff --git a/components/panel/style.scss b/packages/components/src/panel/style.scss similarity index 100% rename from components/panel/style.scss rename to packages/components/src/panel/style.scss diff --git a/components/panel/test/__snapshots__/color.js.snap b/packages/components/src/panel/test/__snapshots__/color.js.snap similarity index 100% rename from components/panel/test/__snapshots__/color.js.snap rename to packages/components/src/panel/test/__snapshots__/color.js.snap diff --git a/components/panel/test/body.js b/packages/components/src/panel/test/body.js similarity index 100% rename from components/panel/test/body.js rename to packages/components/src/panel/test/body.js diff --git a/components/panel/test/color.js b/packages/components/src/panel/test/color.js similarity index 100% rename from components/panel/test/color.js rename to packages/components/src/panel/test/color.js diff --git a/components/panel/test/header.js b/packages/components/src/panel/test/header.js similarity index 100% rename from components/panel/test/header.js rename to packages/components/src/panel/test/header.js diff --git a/components/panel/test/index.js b/packages/components/src/panel/test/index.js similarity index 100% rename from components/panel/test/index.js rename to packages/components/src/panel/test/index.js diff --git a/components/panel/test/row.js b/packages/components/src/panel/test/row.js similarity index 100% rename from components/panel/test/row.js rename to packages/components/src/panel/test/row.js diff --git a/components/placeholder/index.js b/packages/components/src/placeholder/index.js similarity index 97% rename from components/placeholder/index.js rename to packages/components/src/placeholder/index.js index 354730b720c99..bbeb256d8a8ea 100644 --- a/components/placeholder/index.js +++ b/packages/components/src/placeholder/index.js @@ -7,7 +7,6 @@ import { isString } from 'lodash'; /** * Internal dependencies */ -import './style.scss'; import Dashicon from '../dashicon'; /** diff --git a/components/placeholder/style.scss b/packages/components/src/placeholder/style.scss similarity index 100% rename from components/placeholder/style.scss rename to packages/components/src/placeholder/style.scss diff --git a/components/placeholder/test/index.js b/packages/components/src/placeholder/test/index.js similarity index 100% rename from components/placeholder/test/index.js rename to packages/components/src/placeholder/test/index.js diff --git a/components/popover/README.md b/packages/components/src/popover/README.md similarity index 100% rename from components/popover/README.md rename to packages/components/src/popover/README.md diff --git a/components/popover/detect-outside.js b/packages/components/src/popover/detect-outside.js similarity index 100% rename from components/popover/detect-outside.js rename to packages/components/src/popover/detect-outside.js diff --git a/components/popover/index.js b/packages/components/src/popover/index.js similarity index 99% rename from components/popover/index.js rename to packages/components/src/popover/index.js index 4ba6fd0e7df68..44de4506a34b8 100644 --- a/components/popover/index.js +++ b/packages/components/src/popover/index.js @@ -15,7 +15,6 @@ import { ESCAPE } from '@wordpress/keycodes'; /** * Internal dependencies */ -import './style.scss'; import { computePopoverPosition } from './utils'; import withFocusReturn from '../higher-order/with-focus-return'; import withConstrainedTabbing from '../higher-order/with-constrained-tabbing'; diff --git a/components/popover/style.scss b/packages/components/src/popover/style.scss similarity index 100% rename from components/popover/style.scss rename to packages/components/src/popover/style.scss diff --git a/components/popover/test/index.js b/packages/components/src/popover/test/index.js similarity index 100% rename from components/popover/test/index.js rename to packages/components/src/popover/test/index.js diff --git a/components/popover/test/utils.js b/packages/components/src/popover/test/utils.js similarity index 100% rename from components/popover/test/utils.js rename to packages/components/src/popover/test/utils.js diff --git a/components/popover/utils.js b/packages/components/src/popover/utils.js similarity index 100% rename from components/popover/utils.js rename to packages/components/src/popover/utils.js diff --git a/components/query-controls/category-select.js b/packages/components/src/query-controls/category-select.js similarity index 100% rename from components/query-controls/category-select.js rename to packages/components/src/query-controls/category-select.js diff --git a/components/query-controls/index.js b/packages/components/src/query-controls/index.js similarity index 100% rename from components/query-controls/index.js rename to packages/components/src/query-controls/index.js diff --git a/components/query-controls/terms.js b/packages/components/src/query-controls/terms.js similarity index 100% rename from components/query-controls/terms.js rename to packages/components/src/query-controls/terms.js diff --git a/components/radio-control/README.md b/packages/components/src/radio-control/README.md similarity index 100% rename from components/radio-control/README.md rename to packages/components/src/radio-control/README.md diff --git a/components/radio-control/index.js b/packages/components/src/radio-control/index.js similarity index 98% rename from components/radio-control/index.js rename to packages/components/src/radio-control/index.js index 5fa3c5eb87150..2aec3eaca43d4 100644 --- a/components/radio-control/index.js +++ b/packages/components/src/radio-control/index.js @@ -13,7 +13,6 @@ import { withInstanceId } from '@wordpress/compose'; * Internal dependencies */ import BaseControl from '../base-control'; -import './style.scss'; function RadioControl( { label, className, selected, help, instanceId, onChange, options = [] } ) { const id = `inspector-radio-control-${ instanceId }`; diff --git a/components/radio-control/style.scss b/packages/components/src/radio-control/style.scss similarity index 100% rename from components/radio-control/style.scss rename to packages/components/src/radio-control/style.scss diff --git a/components/range-control/README.md b/packages/components/src/range-control/README.md similarity index 100% rename from components/range-control/README.md rename to packages/components/src/range-control/README.md diff --git a/components/range-control/index.js b/packages/components/src/range-control/index.js similarity index 98% rename from components/range-control/index.js rename to packages/components/src/range-control/index.js index 353df5d10a9dc..b63ace4b7dd77 100644 --- a/components/range-control/index.js +++ b/packages/components/src/range-control/index.js @@ -14,7 +14,6 @@ import { withInstanceId } from '@wordpress/compose'; * Internal dependencies */ import { BaseControl, Button, Dashicon } from '../'; -import './style.scss'; function RangeControl( { className, diff --git a/components/range-control/style.scss b/packages/components/src/range-control/style.scss similarity index 100% rename from components/range-control/style.scss rename to packages/components/src/range-control/style.scss diff --git a/components/range-control/test/index.js b/packages/components/src/range-control/test/index.js similarity index 100% rename from components/range-control/test/index.js rename to packages/components/src/range-control/test/index.js diff --git a/components/responsive-wrapper/index.js b/packages/components/src/responsive-wrapper/index.js similarity index 92% rename from components/responsive-wrapper/index.js rename to packages/components/src/responsive-wrapper/index.js index 3b9957862647f..5965b425d5eb8 100644 --- a/components/responsive-wrapper/index.js +++ b/packages/components/src/responsive-wrapper/index.js @@ -8,11 +8,6 @@ import classnames from 'classnames'; */ import { cloneElement, Children } from '@wordpress/element'; -/** - * Internal dependencies - */ -import './style.scss'; - function ResponsiveWrapper( { naturalWidth, naturalHeight, children } ) { if ( Children.count( children ) !== 1 ) { return null; diff --git a/components/responsive-wrapper/style.scss b/packages/components/src/responsive-wrapper/style.scss similarity index 100% rename from components/responsive-wrapper/style.scss rename to packages/components/src/responsive-wrapper/style.scss diff --git a/components/sandbox/README.md b/packages/components/src/sandbox/README.md similarity index 100% rename from components/sandbox/README.md rename to packages/components/src/sandbox/README.md diff --git a/components/sandbox/index.js b/packages/components/src/sandbox/index.js similarity index 100% rename from components/sandbox/index.js rename to packages/components/src/sandbox/index.js diff --git a/components/scroll-lock/README.md b/packages/components/src/scroll-lock/README.md similarity index 100% rename from components/scroll-lock/README.md rename to packages/components/src/scroll-lock/README.md diff --git a/components/scroll-lock/index.js b/packages/components/src/scroll-lock/index.js similarity index 97% rename from components/scroll-lock/index.js rename to packages/components/src/scroll-lock/index.js index aaea8ce84f419..0d600aac62f14 100644 --- a/components/scroll-lock/index.js +++ b/packages/components/src/scroll-lock/index.js @@ -3,11 +3,6 @@ */ import { Component } from '@wordpress/element'; -/** - * Internal dependencies - */ -import './index.scss'; - /** * Creates a ScrollLock component bound to the specified document. * diff --git a/components/scroll-lock/index.scss b/packages/components/src/scroll-lock/style.scss similarity index 100% rename from components/scroll-lock/index.scss rename to packages/components/src/scroll-lock/style.scss diff --git a/components/scroll-lock/test/index.js b/packages/components/src/scroll-lock/test/index.js similarity index 100% rename from components/scroll-lock/test/index.js rename to packages/components/src/scroll-lock/test/index.js diff --git a/components/select-control/README.md b/packages/components/src/select-control/README.md similarity index 100% rename from components/select-control/README.md rename to packages/components/src/select-control/README.md diff --git a/components/select-control/index.js b/packages/components/src/select-control/index.js similarity index 98% rename from components/select-control/index.js rename to packages/components/src/select-control/index.js index 3413a409b8c68..3d1755060e113 100644 --- a/components/select-control/index.js +++ b/packages/components/src/select-control/index.js @@ -12,7 +12,6 @@ import { withInstanceId } from '@wordpress/compose'; * Internal dependencies */ import BaseControl from '../base-control'; -import './style.scss'; function SelectControl( { help, diff --git a/components/select-control/style.scss b/packages/components/src/select-control/style.scss similarity index 100% rename from components/select-control/style.scss rename to packages/components/src/select-control/style.scss diff --git a/components/server-side-render/README.md b/packages/components/src/server-side-render/README.md similarity index 100% rename from components/server-side-render/README.md rename to packages/components/src/server-side-render/README.md diff --git a/components/server-side-render/index.js b/packages/components/src/server-side-render/index.js similarity index 100% rename from components/server-side-render/index.js rename to packages/components/src/server-side-render/index.js diff --git a/components/server-side-render/test/index.js b/packages/components/src/server-side-render/test/index.js similarity index 100% rename from components/server-side-render/test/index.js rename to packages/components/src/server-side-render/test/index.js diff --git a/components/slot-fill/README.md b/packages/components/src/slot-fill/README.md similarity index 100% rename from components/slot-fill/README.md rename to packages/components/src/slot-fill/README.md diff --git a/components/slot-fill/fill.js b/packages/components/src/slot-fill/fill.js similarity index 100% rename from components/slot-fill/fill.js rename to packages/components/src/slot-fill/fill.js diff --git a/components/slot-fill/index.js b/packages/components/src/slot-fill/index.js similarity index 100% rename from components/slot-fill/index.js rename to packages/components/src/slot-fill/index.js diff --git a/components/slot-fill/provider.js b/packages/components/src/slot-fill/provider.js similarity index 100% rename from components/slot-fill/provider.js rename to packages/components/src/slot-fill/provider.js diff --git a/components/slot-fill/slot.js b/packages/components/src/slot-fill/slot.js similarity index 100% rename from components/slot-fill/slot.js rename to packages/components/src/slot-fill/slot.js diff --git a/components/slot-fill/test/index.js b/packages/components/src/slot-fill/test/index.js similarity index 100% rename from components/slot-fill/test/index.js rename to packages/components/src/slot-fill/test/index.js diff --git a/components/slot-fill/test/slot.js b/packages/components/src/slot-fill/test/slot.js similarity index 100% rename from components/slot-fill/test/slot.js rename to packages/components/src/slot-fill/test/slot.js diff --git a/components/spinner/index.js b/packages/components/src/spinner/index.js similarity index 100% rename from components/spinner/index.js rename to packages/components/src/spinner/index.js diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss new file mode 100644 index 0000000000000..d0752daa837f4 --- /dev/null +++ b/packages/components/src/style.scss @@ -0,0 +1,36 @@ +@import './autocomplete/style.scss'; +@import './base-control/style.scss'; +@import './button-group/style.scss'; +@import './button/style.scss'; +@import './checkbox-control/style.scss'; +@import './color-palette/style.scss'; +@import './dashicon/style.scss'; +@import './date-time/style.scss'; +@import './disabled/style.scss'; +@import './draggable/style.scss'; +@import './drop-zone/style.scss'; +@import './dropdown-menu/style.scss'; +@import './external-link/style.scss'; +@import './font-size-picker/style.scss'; +@import './form-file-upload/style.scss'; +@import './form-toggle/style.scss'; +@import './form-token-field/style.scss'; +@import './higher-order/navigate-regions/style.scss'; +@import './icon-button/style.scss'; +@import './menu-group/style.scss'; +@import './menu-item/style.scss'; +@import './modal/style.scss'; +@import './notice/style.scss'; +@import './panel/style.scss'; +@import './placeholder/style.scss'; +@import './popover/style.scss'; +@import './radio-control/style.scss'; +@import './range-control/style.scss'; +@import './responsive-wrapper/style.scss'; +@import './scroll-lock/style.scss'; +@import './select-control/style.scss'; +@import './text-control/style.scss'; +@import './textarea-control/style.scss'; +@import './toggle-control/style.scss'; +@import './toolbar/style.scss'; +@import './tooltip/style.scss'; diff --git a/components/tab-panel/README.md b/packages/components/src/tab-panel/README.md similarity index 100% rename from components/tab-panel/README.md rename to packages/components/src/tab-panel/README.md diff --git a/components/tab-panel/index.js b/packages/components/src/tab-panel/index.js similarity index 100% rename from components/tab-panel/index.js rename to packages/components/src/tab-panel/index.js diff --git a/components/tab-panel/test/index.js b/packages/components/src/tab-panel/test/index.js similarity index 100% rename from components/tab-panel/test/index.js rename to packages/components/src/tab-panel/test/index.js diff --git a/components/text-control/README.md b/packages/components/src/text-control/README.md similarity index 100% rename from components/text-control/README.md rename to packages/components/src/text-control/README.md diff --git a/components/text-control/index.js b/packages/components/src/text-control/index.js similarity index 97% rename from components/text-control/index.js rename to packages/components/src/text-control/index.js index 0025dfa05d5ee..1a215882d2c80 100644 --- a/components/text-control/index.js +++ b/packages/components/src/text-control/index.js @@ -7,7 +7,6 @@ import { withInstanceId } from '@wordpress/compose'; * Internal dependencies */ import BaseControl from '../base-control'; -import './style.scss'; function TextControl( { label, value, help, className, instanceId, onChange, type = 'text', ...props } ) { const id = `inspector-text-control-${ instanceId }`; diff --git a/components/text-control/style.scss b/packages/components/src/text-control/style.scss similarity index 100% rename from components/text-control/style.scss rename to packages/components/src/text-control/style.scss diff --git a/components/textarea-control/README.md b/packages/components/src/textarea-control/README.md similarity index 100% rename from components/textarea-control/README.md rename to packages/components/src/textarea-control/README.md diff --git a/components/textarea-control/index.js b/packages/components/src/textarea-control/index.js similarity index 97% rename from components/textarea-control/index.js rename to packages/components/src/textarea-control/index.js index 5315a83e94f47..e0f3ce6de429d 100644 --- a/components/textarea-control/index.js +++ b/packages/components/src/textarea-control/index.js @@ -7,7 +7,6 @@ import { withInstanceId } from '@wordpress/compose'; * Internal dependencies */ import BaseControl from '../base-control'; -import './style.scss'; function TextareaControl( { label, value, help, instanceId, onChange, rows = 4, className, ...props } ) { const id = `inspector-textarea-control-${ instanceId }`; diff --git a/components/textarea-control/style.scss b/packages/components/src/textarea-control/style.scss similarity index 100% rename from components/textarea-control/style.scss rename to packages/components/src/textarea-control/style.scss diff --git a/components/toggle-control/README.md b/packages/components/src/toggle-control/README.md similarity index 100% rename from components/toggle-control/README.md rename to packages/components/src/toggle-control/README.md diff --git a/components/toggle-control/index.js b/packages/components/src/toggle-control/index.js similarity index 98% rename from components/toggle-control/index.js rename to packages/components/src/toggle-control/index.js index 4bae84ba3e4ef..413516232fd0f 100644 --- a/components/toggle-control/index.js +++ b/packages/components/src/toggle-control/index.js @@ -14,7 +14,6 @@ import { withInstanceId } from '@wordpress/compose'; */ import FormToggle from '../form-toggle'; import BaseControl from './../base-control'; -import './style.scss'; class ToggleControl extends Component { constructor() { diff --git a/components/toggle-control/style.scss b/packages/components/src/toggle-control/style.scss similarity index 100% rename from components/toggle-control/style.scss rename to packages/components/src/toggle-control/style.scss diff --git a/components/toggle-control/test/index.js b/packages/components/src/toggle-control/test/index.js similarity index 100% rename from components/toggle-control/test/index.js rename to packages/components/src/toggle-control/test/index.js diff --git a/components/toolbar/index.js b/packages/components/src/toolbar/index.js similarity index 99% rename from components/toolbar/index.js rename to packages/components/src/toolbar/index.js index 83b577474bcd9..9504304dd3492 100644 --- a/components/toolbar/index.js +++ b/packages/components/src/toolbar/index.js @@ -7,7 +7,6 @@ import { flatMap } from 'lodash'; /** * Internal dependencies */ -import './style.scss'; import IconButton from '../icon-button'; /** diff --git a/components/toolbar/style.scss b/packages/components/src/toolbar/style.scss similarity index 100% rename from components/toolbar/style.scss rename to packages/components/src/toolbar/style.scss diff --git a/components/toolbar/test/index.js b/packages/components/src/toolbar/test/index.js similarity index 100% rename from components/toolbar/test/index.js rename to packages/components/src/toolbar/test/index.js diff --git a/components/tooltip/README.md b/packages/components/src/tooltip/README.md similarity index 100% rename from components/tooltip/README.md rename to packages/components/src/tooltip/README.md diff --git a/components/tooltip/index.js b/packages/components/src/tooltip/index.js similarity index 99% rename from components/tooltip/index.js rename to packages/components/src/tooltip/index.js index 8ac957bbfde9e..006825866b1f8 100644 --- a/components/tooltip/index.js +++ b/packages/components/src/tooltip/index.js @@ -17,7 +17,6 @@ import { /** * Internal dependencies */ -import './style.scss'; import Popover from '../popover'; /** diff --git a/components/tooltip/style.scss b/packages/components/src/tooltip/style.scss similarity index 100% rename from components/tooltip/style.scss rename to packages/components/src/tooltip/style.scss diff --git a/components/tooltip/test/index.js b/packages/components/src/tooltip/test/index.js similarity index 100% rename from components/tooltip/test/index.js rename to packages/components/src/tooltip/test/index.js diff --git a/components/tree-select/README.md b/packages/components/src/tree-select/README.md similarity index 100% rename from components/tree-select/README.md rename to packages/components/src/tree-select/README.md diff --git a/components/tree-select/index.js b/packages/components/src/tree-select/index.js similarity index 100% rename from components/tree-select/index.js rename to packages/components/src/tree-select/index.js diff --git a/test/unit/setup-mocks.js b/test/unit/setup-mocks.js index fb17fc325cb07..5930fbba510df 100644 --- a/test/unit/setup-mocks.js +++ b/test/unit/setup-mocks.js @@ -4,8 +4,8 @@ // // See: https://github.com/airbnb/enzyme/issues/1604 // See: https://github.com/airbnb/enzyme/pull/1592/files -jest.mock( '../../components/button', () => { - const { Button: RawButton } = require.requireActual( '../../components/button' ); +jest.mock( '../../packages/components/src/button', () => { + const { Button: RawButton } = require.requireActual( '../../packages/components/src/button' ); const { Component } = require( 'react' ); return class Button extends Component { diff --git a/webpack.config.js b/webpack.config.js index 7ad43d44b5582..0ecd50d106a46 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -41,70 +41,7 @@ const extractConfig = { { loader: 'postcss-loader', options: { - plugins: [ - 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' ), - ], + plugins: require( './bin/packages/post-css-config' ), }, }, {