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

package/dist/esm/web-preview/style.scss

@@ -2,8 +2,8 @@
  * Web Preview
  */
 
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-web-preview {
 	// Color
@@ -14,7 +14,7 @@
 	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
 	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
 
-	background: rgba( black, 0.7 );
+	background: rgba(black, 0.7);
 	box-sizing: border-box;
 	height: 100%;
 	left: 0;
@@ -54,7 +54,7 @@
 
 	&__content {
 		background: wp-colors.$gray-100;
-		height: calc( 100% - 49px );
+		height: calc(100% - 49px);
 		-webkit-overflow-scrolling: touch;
 		overflow-x: hidden;
 		width: 100%;
@@ -81,7 +81,7 @@
 		margin: -12px 0 0;
 		position: absolute;
 		top: 50%;
-		transform: translateX( -50% );
+		transform: translateX(-50%);
 	}
 
 	&__toolbar {

package/dist/esm/with-wizard/index.js

@@ -1,10 +1,8 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * WordPress dependencies.
  */
 import { Component, createRef, Fragment } from '@wordpress/element';
-import { __ as alias__ } from '@wordpress/i18n';
-const __ = alias__;
+import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { home } from '@wordpress/icons';
 
@@ -15,7 +13,7 @@ import { Button, Card, Modal, NewspackIcon, Notice, PluginInstaller } from '../'
 import Router from '../proxied-imports/router';
 import Footer from '../footer';
 import './style.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   Redirect,
   Route
@@ -28,248 +26,259 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
   return class WrappedWithWizard extends Component {
     constructor(props) {
       super(props);
-      _defineProperty(this, "componentDidMount", () => {
-        // If there are no requiredPlugins, fire onWizardReady as soon as component mounts.
-        if (!requiredPlugins) {
-          const instance = this.wrappedComponentRef.current;
-          // eslint-disable-next-line no-unused-expressions
-          instance && instance.onWizardReady && instance.onWizardReady();
-        }
-      });
-      /**
-       * Set the error. Called by Wizards when an error occurs.
-       *
-       * @return {Promise} Resolved after state update
-       */
-      _defineProperty(this, "setError", error => {
-        return new Promise(resolve => {
-          this.setState({
-            error: error || null
-          }, () => resolve());
-        });
+      this.state = {
+        complete: null,
+        error: null,
+        loading: requiredPlugins && requiredPlugins.length > 0 ? 1 : 0,
+        quietLoading: false
+      };
+      this.wrappedComponentRef = createRef();
+    }
+    componentDidMount = () => {
+      // If there are no requiredPlugins, fire onWizardReady as soon as component mounts.
+      if (!requiredPlugins) {
+        const instance = this.wrappedComponentRef.current;
+        // eslint-disable-next-line no-unused-expressions
+        instance && instance.onWizardReady && instance.onWizardReady();
+      }
+    };
+
+    /**
+     * Set the error. Called by Wizards when an error occurs.
+     *
+     * @return {Promise} Resolved after state update
+     */
+    setError = error => {
+      return new Promise(resolve => {
+        this.setState({
+          error: error || null
+        }, () => resolve());
       });
-      /**
-       * Render any errors that need rendering.
-       *
-       * @return {Component} Error UI
-       */
-      _defineProperty(this, "getError", () => {
-        const {
-          error
-        } = this.state;
-        if (!error) {
-          return null;
-        }
-        const parsedError = this.parseError(error);
-        const {
-          level
-        } = parsedError;
-        if ('fatal' === level) {
-          return this.getFatalError(parsedError);
-        }
-        return this.getErrorNotice(parsedError);
+    };
+
+    /**
+     * Render any errors that need rendering.
+     *
+     * @return {Component} Error UI
+     */
+    getError = () => {
+      const {
+        error
+      } = this.state;
+      if (!error) {
+        return null;
+      }
+      const parsedError = this.parseError(error);
+      const {
+        level
+      } = parsedError;
+      if ('fatal' === level) {
+        return this.getFatalError(parsedError);
+      }
+      return this.getErrorNotice(parsedError);
+    };
+
+    /**
+     * Get a notice-level error.
+     *
+     * @param {Error} error object already parsed by parseError
+     * @return {Component} Error notice
+     */
+    getErrorNotice = error => {
+      const {
+        message
+      } = error;
+      return /*#__PURE__*/_jsx(Notice, {
+        isError: true,
+        className: "newspack-wizard__above-header",
+        noticeText: message,
+        rawHTML: true
       });
-      /**
-       * Get a notice-level error.
-       *
-       * @param {Error} error object already parsed by parseError
-       * @return {Component} Error notice
-       */
-      _defineProperty(this, "getErrorNotice", error => {
-        const {
-          message
-        } = error;
-        return _jsx(Notice, {
-          isError: true,
-          className: "newspack-wizard__above-header",
+    };
+
+    /**
+     * Get a fatal-level error.
+     *
+     * @param {Error} error object already parsed by parseError
+     * @return {Component} React object
+     */
+    getFatalError = error => {
+      const fallbackURL = this.getFallbackURL();
+      if (!fallbackURL) {
+        return null;
+      }
+      const {
+        message
+      } = error;
+      return /*#__PURE__*/_jsxs(Modal, {
+        title: __('Unrecoverable error'),
+        onRequestClose: () => window.location = fallbackURL,
+        children: [/*#__PURE__*/_jsx(Notice, {
           noticeText: message,
+          isError: true,
           rawHTML: true
-        });
-      });
-      /**
-       * Get a fatal-level error.
-       *
-       * @param {Error} error object already parsed by parseError
-       * @return {Component} React object
-       */
-      _defineProperty(this, "getFatalError", error => {
-        const fallbackURL = this.getFallbackURL();
-        if (!fallbackURL) {
-          return null;
-        }
-        const {
-          message
-        } = error;
-        return _jsxs(Modal, {
-          title: __('Unrecoverable error'),
-          onRequestClose: () => window.location = fallbackURL,
-          children: [_jsx(Notice, {
-            noticeText: message,
-            isError: true,
-            rawHTML: true
-          }), _jsx(Card, {
-            buttonsCard: true,
-            noBorder: true,
-            className: "justify-end",
-            children: _jsx(Button, {
-              isPrimary: true,
-              href: fallbackURL,
-              children: __('Return to Dashboard', 'newspack-plugin')
-            })
-          })]
-        });
-      });
-      /**
-       * Get all the relevant info out of a raw API error response.
-       *
-       * @param {Object} error error object
-       * @return {Object} Error object with relevant fields and defaults
-       */
-      _defineProperty(this, "parseError", error => {
-        const {
-          data,
-          message,
-          code
-        } = error;
-        let level = 'fatal';
-        if (!!data && 'level' in data) {
-          level = data.level;
-        } else if ('rest_invalid_param' === code) {
-          level = 'notice';
-        }
-        return {
-          message,
-          level
-        };
+        }), /*#__PURE__*/_jsx(Card, {
+          buttonsCard: true,
+          noBorder: true,
+          className: "justify-end",
+          children: /*#__PURE__*/_jsx(Button, {
+            isPrimary: true,
+            href: fallbackURL,
+            children: __('Return to Dashboard', 'newspack-plugin')
+          })
+        })]
       });
-      /**
-       * Called when plugin installation is complete. Updates state and calls onWizardReady on the wrapped component.
-       */
-      _defineProperty(this, "pluginInstallationStatus", ({
+    };
+
+    /**
+     * Get all the relevant info out of a raw API error response.
+     *
+     * @param {Object} error error object
+     * @return {Object} Error object with relevant fields and defaults
+     */
+    parseError = error => {
+      const {
+        data,
+        message,
+        code
+      } = error;
+      let level = 'fatal';
+      if (!!data && 'level' in data) {
+        level = data.level;
+      } else if ('rest_invalid_param' === code) {
+        level = 'notice';
+      }
+      return {
+        message,
+        level
+      };
+    };
+
+    /**
+     * Called when plugin installation is complete. Updates state and calls onWizardReady on the wrapped component.
+     */
+    pluginInstallationStatus = ({
+      complete
+    }) => {
+      if (this.state.loading) {
+        this.doneLoading();
+      }
+      const instance = this.wrappedComponentRef.current;
+      this.setState({
         complete
-      }) => {
-        if (this.state.loading) {
-          this.doneLoading();
-        }
-        const instance = this.wrappedComponentRef.current;
-        this.setState({
-          complete
-        }, () => {
-          // eslint-disable-next-line no-unused-expressions
-          complete && instance && instance.onWizardReady && instance.onWizardReady();
-        });
+      }, () => {
+        // eslint-disable-next-line no-unused-expressions
+        complete && instance && instance.onWizardReady && instance.onWizardReady();
       });
-      /**
-       * Begin loading.
-       */
-      _defineProperty(this, "startLoading", quiet => {
-        if (quiet) {
-          this.setState(state => ({
-            quietLoading: state.quietLoading + 1
-          }));
-        } else {
-          this.setState(state => ({
-            loading: state.loading + 1
-          }));
-        }
-      });
-      /**
-       * End loading.
-       */
-      _defineProperty(this, "doneLoading", quiet => {
-        if (quiet) {
-          this.setState(state => ({
-            quietLoading: state.quietLoading - 1
-          }));
-        } else {
-          this.setState(state => ({
-            loading: state.loading - 1
-          }));
-        }
-      });
-      /**
-       * Replacement for core apiFetch that automatically manages wizard loading UI.
-       */
-      _defineProperty(this, "wizardApiFetch", args => {
-        const {
-          quiet
-        } = args;
-        this.startLoading(quiet);
-        return new Promise((resolve, reject) => {
-          apiFetch(args).then(response => {
-            this.doneLoading(quiet);
-            resolve(response);
-          }).catch(error => {
-            this.doneLoading(quiet);
-            reject(error);
-          });
+    };
+
+    /**
+     * Begin loading.
+     */
+    startLoading = quiet => {
+      if (quiet) {
+        this.setState(state => ({
+          quietLoading: state.quietLoading + 1
+        }));
+      } else {
+        this.setState(state => ({
+          loading: state.loading + 1
+        }));
+      }
+    };
+
+    /**
+     * End loading.
+     */
+    doneLoading = quiet => {
+      if (quiet) {
+        this.setState(state => ({
+          quietLoading: state.quietLoading - 1
+        }));
+      } else {
+        this.setState(state => ({
+          loading: state.loading - 1
+        }));
+      }
+    };
+
+    /**
+     * Replacement for core apiFetch that automatically manages wizard loading UI.
+     */
+    wizardApiFetch = args => {
+      const {
+        quiet
+      } = args;
+      this.startLoading(quiet);
+      return new Promise((resolve, reject) => {
+        apiFetch(args).then(response => {
+          this.doneLoading(quiet);
+          resolve(response);
+        }).catch(error => {
+          this.doneLoading(quiet);
+          reject(error);
         });
       });
-      /**
-       * Render a Route that checks for plugin installation requirements, and redirects to '/' when all are done.
-       *
-       * @return {void}
-       */
-      _defineProperty(this, "pluginRequirements", () => {
-        const {
-          complete
-        } = this.state;
-        /* After all plugins are loaded, redirect to / (this could be configurable) */
-        if (complete) {
-          return _jsx(Redirect, {
-            from: "/plugin-requirements",
-            to: "/"
-          });
-        }
-        return _jsx(Route, {
-          path: "/",
-          render: () => _jsxs(Fragment, {
-            children: [complete !== null && _jsx("div", {
-              className: "newspack-wizard__header",
-              children: _jsx("div", {
-                className: "newspack-wizard__header__inner",
-                children: _jsxs("div", {
-                  className: "newspack-wizard__title",
-                  children: [_jsx(Button, {
-                    isLink: true,
-                    href: newspack_urls.dashboard,
-                    label: __('Return to Dashboard', 'newspack-plugin'),
-                    showTooltip: true,
-                    icon: home,
-                    iconSize: 36,
-                    children: _jsx(NewspackIcon, {
-                      size: 36
-                    })
-                  }), _jsx("div", {
-                    children: _jsx("h2", {
-                      children: requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin')
-                    })
-                  })]
-                })
-              })
-            }), _jsx("div", {
-              className: "newspack-wizard newspack-wizard__content",
-              children: _jsx(PluginInstaller, {
-                plugins: requiredPlugins,
-                onStatus: status => this.pluginInstallationStatus(status)
-              })
-            })]
-          })
+    };
+
+    /**
+     * Render a Route that checks for plugin installation requirements, and redirects to '/' when all are done.
+     *
+     * @return {void}
+     */
+    pluginRequirements = () => {
+      const {
+        complete
+      } = this.state;
+      /* After all plugins are loaded, redirect to / (this could be configurable) */
+      if (complete) {
+        return /*#__PURE__*/_jsx(Redirect, {
+          from: "/plugin-requirements",
+          to: "/"
         });
+      }
+      return /*#__PURE__*/_jsx(Route, {
+        path: "/",
+        render: () => /*#__PURE__*/_jsxs(Fragment, {
+          children: [complete !== null && /*#__PURE__*/_jsx("div", {
+            className: "newspack-wizard__header",
+            children: /*#__PURE__*/_jsx("div", {
+              className: "newspack-wizard__header__inner",
+              children: /*#__PURE__*/_jsxs("div", {
+                className: "newspack-wizard__title",
+                children: [/*#__PURE__*/_jsx(Button, {
+                  isLink: true,
+                  href: newspack_urls.dashboard,
+                  label: __('Return to Dashboard', 'newspack-plugin'),
+                  showTooltip: true,
+                  icon: home,
+                  iconSize: 36,
+                  children: /*#__PURE__*/_jsx(NewspackIcon, {
+                    size: 36
+                  })
+                }), /*#__PURE__*/_jsx("div", {
+                  children: /*#__PURE__*/_jsx("h2", {
+                    children: requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin')
+                  })
+                })]
+              })
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: "newspack-wizard newspack-wizard__content",
+            children: /*#__PURE__*/_jsx(PluginInstaller, {
+              plugins: requiredPlugins,
+              onStatus: status => this.pluginInstallationStatus(status)
+            })
+          })]
+        })
       });
-      _defineProperty(this, "getFallbackURL", () => {
-        if (typeof newspack_urls !== 'undefined') {
-          return newspack_urls.dashboard;
-        }
-      });
-      this.state = {
-        complete: null,
-        error: null,
-        loading: requiredPlugins && requiredPlugins.length > 0 ? 1 : 0,
-        quietLoading: false
-      };
-      this.wrappedComponentRef = createRef();
-    }
+    };
+    getFallbackURL = () => {
+      if (typeof newspack_urls !== 'undefined') {
+        return newspack_urls.dashboard;
+      }
+    };
+
     /**
      * Render.
      */
@@ -286,10 +295,10 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
       if (quietLoading) {
         loadingClasses.push('newspack-wizard__is-loading-quiet');
       }
-      return _jsxs(Fragment, {
-        children: [this.getError(), _jsx("div", {
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [this.getError(), /*#__PURE__*/_jsx("div", {
           className: loadingClasses.join(' '),
-          children: _jsx(WrappedComponent, {
+          children: /*#__PURE__*/_jsx(WrappedComponent, {
             pluginRequirements: requiredPlugins && this.pluginRequirements(),
             clearError: this.clearError,
             getError: this.getError,
@@ -302,7 +311,7 @@ export default function withWizard(WrappedComponent, requiredPlugins) {
             ref: this.wrappedComponentRef,
             ...this.props
           })
-        }), !loading && _jsx(Footer, {
+        }), !loading && /*#__PURE__*/_jsx(Footer, {
           simple: simpleFooter
         })]
       });