newspack-components 2.2.1 → 3.0.0-alpha.2

package/dist/utils/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _keycodes = require("@wordpress/keycodes");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
+const InteractiveDiv = ({
+  style = {},
+  ...props
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  tabIndex: "0",
+  role: "button",
+  onKeyDown: event => _keycodes.ENTER === event.keyCode && props.onClick(),
+  style: {
+    cursor: 'pointer',
+    ...style
+  },
+  ...props
+});
+const confirmAction = message => {
+  // eslint-disable-next-line no-alert
+  if (confirm(message)) {
+    return true;
+  }
+  return false;
+};
+var _default = exports.default = {
+  InteractiveDiv,
+  confirmAction
+};

package/dist/{cjs/waiting → waiting}/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +9,7 @@ var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 require("./style.scss");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Waiting
  */
@@ -43,11 +43,10 @@ class Waiting extends _element.Component {
       'is-left': isLeft,
       'is-center': isCenter
     });
-    return (0, _jsxRuntime.jsx)(_components.Spinner, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {
       className: classes,
       ...otherProps
     });
   }
 }
-var _default = Waiting;
-exports.default = _default;
+var _default = exports.default = Waiting;

package/dist/web-preview/index.js

@@ -0,0 +1,191 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+var _components = require("@wordpress/components");
+var _ = require("../");
+require("./style.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+/**
+ * External dependencies.
+ */
+
+const PORTAL_PARENT_ID = 'newspack-components-web-preview-wrapper';
+
+/**
+ * Web Preview. A component to preview a website in an iframe, with device sizing options.
+ */
+class WebPreview extends _element.Component {
+  state = {
+    device: 'desktop',
+    loaded: false,
+    isPreviewVisible: false
+  };
+  constructor(props) {
+    super(props);
+    this.iframeRef = (0, _element.createRef)();
+  }
+
+  /**
+   * If a div with id PORTAL_PARENT_ID exists, assign it to class field.
+   * If not, create it and append to the body.
+   */
+  componentDidMount() {
+    const existingDOMElement = document.getElementById(PORTAL_PARENT_ID);
+    this.modalDOMElement = existingDOMElement || document.createElement('div');
+    if (!existingDOMElement) {
+      this.modalDOMElement.id = PORTAL_PARENT_ID;
+      document.body.appendChild(this.modalDOMElement);
+    }
+  }
+
+  /**
+   * Add or remove applicable body classes
+   */
+  componentDidUpdate() {
+    if (this.state.isPreviewVisible === true) {
+      document.body.classList.add('newspack-web-preview--open');
+    } else {
+      document.body.classList.remove('newspack-web-preview--open');
+    }
+  }
+
+  /**
+   * Create JSX for the modal
+   */
+  getWebPreviewModal = () => {
+    const {
+      beforeLoad = () => {},
+      onClose = () => {},
+      url
+    } = this.props;
+    const {
+      device,
+      loaded,
+      isPreviewVisible
+    } = this.state;
+    if (!this.modalDOMElement || !isPreviewVisible) {
+      return null;
+    }
+    const classes = (0, _classnames.default)('newspack-web-preview', device, loaded && 'is-loaded');
+    beforeLoad();
+    return (0, _element.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "newspack-web-preview__interior",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "newspack-web-preview__toolbar",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "newspack-web-preview__toolbar-left",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ButtonGroup, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+                onClick: () => this.setState({
+                  device: 'desktop'
+                }),
+                variant: 'desktop' === device && 'primary',
+                icon: _icons.desktop,
+                label: (0, _i18n.__)('Preview Desktop Size', 'newspack-plugin')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+                onClick: () => this.setState({
+                  device: 'tablet'
+                }),
+                variant: 'tablet' === device && 'primary',
+                icon: _icons.tablet,
+                label: (0, _i18n.__)('Preview Tablet Size', 'newspack-plugin')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+                onClick: () => this.setState({
+                  device: 'phone'
+                }),
+                variant: 'phone' === device && 'primary',
+                icon: _icons.mobile,
+                label: (0, _i18n.__)('Preview Phone Size', 'newspack-plugin')
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "newspack-web-preview__toolbar-right",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+              onClick: () => {
+                onClose();
+                this.setState({
+                  isPreviewVisible: false,
+                  loaded: false
+                });
+              },
+              icon: _icons.closeSmall,
+              label: (0, _i18n.__)('Close Preview', 'newspack-plugin')
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "newspack-web-preview__content",
+          children: [!loaded && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "newspack-web-preview__is-waiting",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
+              isLeft: true
+            }), (0, _i18n.__)('Loading…', 'newspack-plugin')]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
+            ref: this.iframeRef,
+            title: "web-preview",
+            src: url,
+            onLoad: () => {
+              this.setState({
+                loaded: true
+              });
+              this.props.onLoad(this.iframeRef.current);
+            }
+          })]
+        })]
+      })
+    }), this.modalDOMElement);
+  };
+  showPreview = () => {
+    this.setState({
+      isPreviewVisible: true
+    });
+  };
+
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      label,
+      variant,
+      /**
+       * Inversion of control - let the caller render
+       * the button that will trigger the modal
+       */
+      renderButton
+    } = this.props;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+      children: [renderButton ? renderButton({
+        showPreview: this.showPreview
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        variant: variant,
+        onClick: this.showPreview,
+        tabIndex: "0",
+        children: label
+      }), this.getWebPreviewModal()]
+    });
+  }
+}
+WebPreview.defaultProps = {
+  url: '//newspack.com',
+  label: (0, _i18n.__)('Preview', 'newspack-plugin'),
+  onLoad: () => {}
+};
+var _default = exports.default = WebPreview;

package/dist/{cjs/web-preview → 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/with-wizard/index.js

@@ -0,0 +1,328 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = withWizard;
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
+var _icons = require("@wordpress/icons");
+var _ = require("../");
+var _router = _interopRequireDefault(require("../proxied-imports/router"));
+var _footer = _interopRequireDefault(require("../footer"));
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+const {
+  Redirect,
+  Route
+} = _router.default;
+
+/**
+ * Higher-Order Component to provide plugin management and error handling to Newspack Wizards.
+ */
+function withWizard(WrappedComponent, requiredPlugins) {
+  return class WrappedWithWizard extends _element.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        complete: null,
+        error: null,
+        loading: requiredPlugins && requiredPlugins.length > 0 ? 1 : 0,
+        quietLoading: false
+      };
+      this.wrappedComponentRef = (0, _element.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
+     */
+    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__*/(0, _jsxRuntime.jsx)(_.Notice, {
+        isError: true,
+        className: "newspack-wizard__above-header",
+        noticeText: message,
+        rawHTML: true
+      });
+    };
+
+    /**
+     * 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__*/(0, _jsxRuntime.jsxs)(_.Modal, {
+        title: (0, _i18n.__)('Unrecoverable error'),
+        onRequestClose: () => window.location = fallbackURL,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
+          noticeText: message,
+          isError: true,
+          rawHTML: true
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Card, {
+          buttonsCard: true,
+          noBorder: true,
+          className: "justify-end",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+            isPrimary: true,
+            href: fallbackURL,
+            children: (0, _i18n.__)('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
+     */
+    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
+      }, () => {
+        // eslint-disable-next-line no-unused-expressions
+        complete && instance && instance.onWizardReady && instance.onWizardReady();
+      });
+    };
+
+    /**
+     * 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) => {
+        (0, _apiFetch.default)(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}
+     */
+    pluginRequirements = () => {
+      const {
+        complete
+      } = this.state;
+      /* After all plugins are loaded, redirect to / (this could be configurable) */
+      if (complete) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Redirect, {
+          from: "/plugin-requirements",
+          to: "/"
+        });
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Route, {
+        path: "/",
+        render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+          children: [complete !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "newspack-wizard__header",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "newspack-wizard__header__inner",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "newspack-wizard__title",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+                  isLink: true,
+                  href: newspack_urls.dashboard,
+                  label: (0, _i18n.__)('Return to Dashboard', 'newspack-plugin'),
+                  showTooltip: true,
+                  icon: _icons.home,
+                  iconSize: 36,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewspackIcon, {
+                    size: 36
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+                    children: requiredPlugins.length > 1 ? (0, _i18n.__)('Required plugins', 'newspack-plugin') : (0, _i18n.__)('Required plugin', 'newspack-plugin')
+                  })
+                })]
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "newspack-wizard newspack-wizard__content",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PluginInstaller, {
+              plugins: requiredPlugins,
+              onStatus: status => this.pluginInstallationStatus(status)
+            })
+          })]
+        })
+      });
+    };
+    getFallbackURL = () => {
+      if (typeof newspack_urls !== 'undefined') {
+        return newspack_urls.dashboard;
+      }
+    };
+
+    /**
+     * Render.
+     */
+    render() {
+      const {
+        simpleFooter
+      } = this.props;
+      const {
+        loading,
+        quietLoading,
+        error
+      } = this.state;
+      const loadingClasses = [loading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded'];
+      if (quietLoading) {
+        loadingClasses.push('newspack-wizard__is-loading-quiet');
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+        children: [this.getError(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: loadingClasses.join(' '),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+            pluginRequirements: requiredPlugins && this.pluginRequirements(),
+            clearError: this.clearError,
+            getError: this.getError,
+            errorData: error,
+            setError: this.setError,
+            isLoading: loading,
+            startLoading: this.startLoading,
+            doneLoading: this.doneLoading,
+            wizardApiFetch: this.wizardApiFetch,
+            ref: this.wrappedComponentRef,
+            ...this.props
+          })
+        }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer.default, {
+          simple: simpleFooter
+        })]
+      });
+    }
+  };
+}