newspack-components 3.0.0-alpha.1 → 3.0.0-alpha.3

package/dist/cjs/plugin-installer/index.js

@@ -1,11 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
@@ -13,17 +12,19 @@ var _icons = require("@wordpress/icons");
 var _ = require("../");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Plugin Installer
  */
+
 /**
  * WordPress dependencies.
  */
-const __ = _i18n.__;
+
 /**
  * Internal dependencies.
  */
+
 const PLUGIN_STATE_NONE = 0;
 const PLUGIN_STATE_ACTIVE = 1;
 const PLUGIN_STATE_INSTALLING = 2;
@@ -39,143 +40,144 @@ const PLUGIN_STATE_ERROR = 3;
 class PluginInstaller extends _element.Component {
   constructor() {
     super(...arguments);
-    (0, _defineProperty2.default)(this, "componentDidMount", () => {
-      const {
-        plugins
-      } = this.props;
-      this.retrievePluginInfo(plugins).then(() => {
-        if (this.props.autoInstall) {
-          this.installAllPlugins();
-        }
-      });
-    });
-    (0, _defineProperty2.default)(this, "componentDidUpdate", prevProps => {
-      const {
-        autoInstall,
-        plugins
-      } = this.props;
-      const {
-        installationInitialized
-      } = this.state;
-      if (plugins !== prevProps.plugins) {
-        this.retrievePluginInfo(plugins);
-      }
-      if (autoInstall && !installationInitialized) {
+    this.state = {
+      pluginInfo: {},
+      installationInitialized: false
+    };
+  }
+  componentDidMount = () => {
+    const {
+      plugins
+    } = this.props;
+    this.retrievePluginInfo(plugins).then(() => {
+      if (this.props.autoInstall) {
         this.installAllPlugins();
       }
     });
-    (0, _defineProperty2.default)(this, "retrievePluginInfo", plugins => {
-      return new Promise(resolve => {
-        (0, _apiFetch.default)({
-          path: '/newspack/v1/plugins/'
-        }).then(response => {
-          const pluginInfo = Object.keys(response).reduce((result, slug) => {
-            if (plugins.indexOf(slug) === -1) {
-              return result;
-            }
-            result[slug] = {
-              ...response[slug],
-              installationStatus: response[slug].Status === 'active' ? PLUGIN_STATE_ACTIVE : PLUGIN_STATE_NONE
-            };
+  };
+  componentDidUpdate = prevProps => {
+    const {
+      autoInstall,
+      plugins
+    } = this.props;
+    const {
+      installationInitialized
+    } = this.state;
+    if (plugins !== prevProps.plugins) {
+      this.retrievePluginInfo(plugins);
+    }
+    if (autoInstall && !installationInitialized) {
+      this.installAllPlugins();
+    }
+  };
+  retrievePluginInfo = plugins => {
+    return new Promise(resolve => {
+      (0, _apiFetch.default)({
+        path: '/newspack/v1/plugins/'
+      }).then(response => {
+        const pluginInfo = Object.keys(response).reduce((result, slug) => {
+          if (plugins.indexOf(slug) === -1) {
             return result;
-          }, {});
-          this.updatePluginInfo(pluginInfo).then(() => resolve());
-        });
-      });
-    });
-    (0, _defineProperty2.default)(this, "installAllPlugins", () => {
-      const {
-        pluginInfo
-      } = this.state;
-      this.setState({
-        installationInitialized: true
-      });
-      const promises = Object.keys(pluginInfo).filter(slug => 'active' !== pluginInfo[slug].Status).map(slug => () => this.installPlugin(slug));
-      promises.reduce((promise, action) => promise.then(result => action().then(Array.prototype.concat.bind(result))), Promise.resolve([]));
-    });
-    (0, _defineProperty2.default)(this, "installPlugin", slug => {
-      this.setInstallationStatus(slug, PLUGIN_STATE_INSTALLING);
-      const params = {
-        path: `/newspack/v1/plugins/${slug}/configure/`,
-        method: 'post'
-      };
-      return (0, _apiFetch.default)(params).then(response => {
-        const {
-          pluginInfo
-        } = this.state;
-        this.props.onInstalled(slug);
-        this.updatePluginInfo({
-          ...pluginInfo,
-          [slug]: {
-            ...response,
-            installationStatus: PLUGIN_STATE_ACTIVE
           }
-        });
-      }).catch(error => {
-        this.setInstallationStatus(slug, PLUGIN_STATE_ERROR, error.message);
+          result[slug] = {
+            ...response[slug],
+            installationStatus: response[slug].Status === 'active' ? PLUGIN_STATE_ACTIVE : PLUGIN_STATE_NONE
+          };
+          return result;
+        }, {});
+        this.updatePluginInfo(pluginInfo).then(() => resolve());
       });
     });
-    (0, _defineProperty2.default)(this, "setChecked", (slug, checked) => {
+  };
+  installAllPlugins = () => {
+    const {
+      pluginInfo
+    } = this.state;
+    this.setState({
+      installationInitialized: true
+    });
+    const promises = Object.keys(pluginInfo).filter(slug => 'active' !== pluginInfo[slug].Status).map(slug => () => this.installPlugin(slug));
+    promises.reduce((promise, action) => promise.then(result => action().then(Array.prototype.concat.bind(result))), Promise.resolve([]));
+  };
+  installPlugin = slug => {
+    this.setInstallationStatus(slug, PLUGIN_STATE_INSTALLING);
+    const params = {
+      path: `/newspack/v1/plugins/${slug}/configure/`,
+      method: 'post'
+    };
+    return (0, _apiFetch.default)(params).then(response => {
       const {
         pluginInfo
       } = this.state;
+      this.props.onInstalled(slug);
       this.updatePluginInfo({
         ...pluginInfo,
         [slug]: {
-          ...pluginInfo[slug],
-          checked
+          ...response,
+          installationStatus: PLUGIN_STATE_ACTIVE
         }
       });
+    }).catch(error => {
+      this.setInstallationStatus(slug, PLUGIN_STATE_ERROR, error.message);
+    });
+  };
+  setChecked = (slug, checked) => {
+    const {
+      pluginInfo
+    } = this.state;
+    this.updatePluginInfo({
+      ...pluginInfo,
+      [slug]: {
+        ...pluginInfo[slug],
+        checked
+      }
     });
-    (0, _defineProperty2.default)(this, "setInstallationStatus", (slug, installationStatus, notification = null) => {
+  };
+  setInstallationStatus = (slug, installationStatus, notification = null) => {
+    const {
+      pluginInfo
+    } = this.state;
+    this.updatePluginInfo({
+      ...pluginInfo,
+      [slug]: {
+        ...pluginInfo[slug],
+        installationStatus,
+        notification
+      }
+    });
+  };
+  updatePluginInfo = pluginInfo => {
+    return new Promise(resolve => {
       const {
+        onStatus
+      } = this.props;
+      this.setState({
         pluginInfo
-      } = this.state;
-      this.updatePluginInfo({
-        ...pluginInfo,
-        [slug]: {
-          ...pluginInfo[slug],
-          installationStatus,
-          notification
-        }
-      });
-    });
-    (0, _defineProperty2.default)(this, "updatePluginInfo", pluginInfo => {
-      return new Promise(resolve => {
-        const {
-          onStatus
-        } = this.props;
-        this.setState({
+      }, () => {
+        const complete = Object.values(pluginInfo).every(plugin => {
+          return 'active' === plugin.Status;
+        });
+        onStatus({
+          complete,
           pluginInfo
-        }, () => {
-          const complete = Object.values(pluginInfo).every(plugin => {
-            return 'active' === plugin.Status;
-          });
-          onStatus({
-            complete,
-            pluginInfo
-          });
-          resolve();
         });
+        resolve();
       });
     });
-    (0, _defineProperty2.default)(this, "classForInstallationStatus", status => {
-      switch (status) {
-        case PLUGIN_STATE_ACTIVE:
-          return 'newspack-plugin-installer__status-active';
-        case PLUGIN_STATE_INSTALLING:
-          return 'newspack-plugin-installer__status-installing';
-        case PLUGIN_STATE_ERROR:
-          return 'newspack-plugin-installer__status-error';
-        default:
-          return 'newspack-plugin-installer__status-none';
-      }
-    });
-    this.state = {
-      pluginInfo: {},
-      installationInitialized: false
-    };
-  }
+  };
+  classForInstallationStatus = status => {
+    switch (status) {
+      case PLUGIN_STATE_ACTIVE:
+        return 'newspack-plugin-installer__status-active';
+      case PLUGIN_STATE_INSTALLING:
+        return 'newspack-plugin-installer__status-installing';
+      case PLUGIN_STATE_ERROR:
+        return 'newspack-plugin-installer__status-error';
+      default:
+        return 'newspack-plugin-installer__status-none';
+    }
+  };
+
   /**
    * Render.
    */
@@ -202,17 +204,17 @@ class PluginInstaller extends _element.Component {
 
     // Make sure plugin status falls in either one of these, to handle button text.
     const pluginInstalled = currentStatus => currentStatus === 'active' || currentStatus === 'inactive';
-    const buttonText = currentPluginStatuses.every(pluginInstalled) ? __('Activate', 'newspack-plugin') : __('Install', 'newspack-plugin');
+    const buttonText = currentPluginStatuses.every(pluginInstalled) ? (0, _i18n.__)('Activate', 'newspack-plugin') : (0, _i18n.__)('Install', 'newspack-plugin');
     const needsInstall = slugs.some(slug => {
       const plugin = pluginInfo[slug];
       return plugin.Status !== 'active' && plugin.installationStatus === PLUGIN_STATE_NONE;
     });
-    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [(!pluginInfo || !Object.keys(pluginInfo).length) && (0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(!pluginInfo || !Object.keys(pluginInfo).length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "newspack-plugin-installer_is-waiting",
-        children: [(0, _jsxRuntime.jsx)(_.Waiting, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
           isLeft: true
-        }), __('Retrieving plugin information…', 'newspack-plugin')]
+        }), (0, _i18n.__)('Retrieving plugin information…', 'newspack-plugin')]
       }), pluginInfo && slugs.length > 0 && slugs.map(slug => {
         const plugin = pluginInfo[slug];
         const {
@@ -228,34 +230,34 @@ class PluginInstaller extends _element.Component {
         const installable = Download || pluginInstalled(Status);
         let actionText;
         if (installationStatus === PLUGIN_STATE_INSTALLING) {
-          actionText = 'inactive' === Status ? __('Activating…') : __('Installing…');
+          actionText = 'inactive' === Status ? (0, _i18n.__)('Activating…') : (0, _i18n.__)('Installing…');
         } else if (!installable) {
-          actionText = (0, _jsxRuntime.jsxs)("span", {
+          actionText = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
             className: "newspack-plugin-installer__status",
-            children: [isAtomic ? __('Contact Newspack support to install', 'newspack-plugin') : __('Plugin must be installed manually', 'newspack-plugin'), (0, _jsxRuntime.jsx)("span", {
+            children: [isAtomic ? (0, _i18n.__)('Contact Newspack support to install', 'newspack-plugin') : (0, _i18n.__)('Plugin must be installed manually', 'newspack-plugin'), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "newspack-checkbox-icon"
             })]
           });
         } else if (Status === 'uninstalled') {
-          actionText = (0, _jsxRuntime.jsxs)("span", {
+          actionText = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
             className: "newspack-plugin-installer__status",
-            children: [__('Install', 'newspack'), (0, _jsxRuntime.jsx)("span", {
+            children: [(0, _i18n.__)('Install', 'newspack'), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "newspack-checkbox-icon"
             })]
           });
         } else if (Status === 'inactive') {
-          actionText = (0, _jsxRuntime.jsxs)("span", {
+          actionText = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
             className: "newspack-plugin-installer__status",
-            children: [__('Activate', 'newspack-plugin'), (0, _jsxRuntime.jsx)("span", {
+            children: [(0, _i18n.__)('Activate', 'newspack-plugin'), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "newspack-checkbox-icon"
             })]
           });
         } else if (Status === 'active') {
-          actionText = (0, _jsxRuntime.jsxs)("span", {
+          actionText = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
             className: "newspack-plugin-installer__status",
-            children: [__('Installed', 'newspack-plugin'), (0, _jsxRuntime.jsx)("span", {
+            children: [(0, _i18n.__)('Installed', 'newspack-plugin'), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "newspack-checkbox-icon newspack-checkbox-icon--checked",
-              children: (0, _jsxRuntime.jsx)(_icons.Icon, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
                 icon: _icons.check
               })
             })]
@@ -263,7 +265,7 @@ class PluginInstaller extends _element.Component {
         }
         const classes = (0, _classnames.default)('newspack-action-card__plugin-installer', this.classForInstallationStatus(installationStatus));
         const onClick = isButton ? () => this.installPlugin(slug) : null;
-        return (0, _jsxRuntime.jsx)(_.ActionCard, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ActionCard, {
           title: Name,
           description: Description,
           disabled: !installable,
@@ -276,9 +278,9 @@ class PluginInstaller extends _element.Component {
           notificationHTML: true,
           className: classes
         }, slug);
-      }), !withoutFooterButton && !autoInstall && pluginInfo && slugs.length > 0 && (0, _jsxRuntime.jsx)("div", {
+      }), !withoutFooterButton && !autoInstall && pluginInfo && slugs.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "newspack-buttons-card",
-        children: (0, _jsxRuntime.jsx)(_.Button, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
           disabled: !needsInstall,
           isPrimary: true,
           onClick: this.installAllPlugins,

package/dist/cjs/plugin-installer/style.scss

@@ -2,7 +2,7 @@
  * Plugin Installer
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-card {
 	.newspack-plugin-installer__status {

package/dist/cjs/plugin-settings/SettingsSection.js

@@ -10,17 +10,19 @@ var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _ = require("../");
 require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Ads Settings Section.
  */
+
 /**
  * WordPress dependencies
  */
-const __ = _i18n.__;
+
 /**
  * Internal dependencies
  */
+
 const isSelectControl = setting => {
   return Array.isArray(setting.options) && setting.options.length;
 };
@@ -95,7 +97,7 @@ const SettingsSection = props => {
   } else if (fields.length === 1) {
     columns = 1;
   }
-  return (0, _jsxRuntime.jsx)(_.ActionCard, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ActionCard, {
     isMedium: true,
     disabled: disabled,
     title: title,
@@ -105,25 +107,25 @@ const SettingsSection = props => {
     toggleOnChange: active !== null ? value => onUpdate({
       active: value
     }) : null,
-    actionContent: (active || null === active) && createFilter('buttons', (0, _jsxRuntime.jsx)(_.Button, {
+    actionContent: (active || null === active) && createFilter('buttons', /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
       variant: "primary",
       disabled: disabled || saveDisabled,
       onClick: () => {
         onUpdate();
         setSaveDisabled(true);
       },
-      children: __('Save Settings', 'newspack')
+      children: (0, _i18n.__)('Save Settings', 'newspack')
     })),
-    children: (active || active === null) && (0, _jsxRuntime.jsxs)(_element.Fragment, {
-      children: [error?.message && (0, _jsxRuntime.jsx)(_.Notice, {
+    children: (active || active === null) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+      children: [error?.message && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
         noticeText: error.message,
         isError: true
-      }), createFilter('beforeControls'), (0, _jsxRuntime.jsx)(_.Grid, {
+      }), createFilter('beforeControls'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Grid, {
         columns: columns,
         gutter: 32,
         children: fields.map(setting => {
           const Control = getControlComponent(setting); // eslint-disable-line @wordpress/no-unused-vars-before-return, no-unused-vars
-          return (0, _hooks.applyFilters)(`newspack.settingsSection.${sectionKey}.control`, (0, _jsxRuntime.jsx)(Control, {
+          return (0, _hooks.applyFilters)(`newspack.settingsSection.${sectionKey}.control`, /*#__PURE__*/(0, _jsxRuntime.jsx)(Control, {
             ...getControlProps(setting)
           }, setting.key), {
             sectionKey,