newspack-components 2.2.1 → 3.0.0-alpha.2

package/dist/cjs/web-preview/index.js

@@ -1,189 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-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("@emotion/react/jsx-runtime");
-/**
- * WordPress dependencies.
- */
-const __ = _i18n.__;
-/**
- * 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 {
-  constructor(props) {
-    super(props);
-    (0, _defineProperty2.default)(this, "state", {
-      device: 'desktop',
-      loaded: false,
-      isPreviewVisible: false
-    });
-    /**
-     * Create JSX for the modal
-     */
-    (0, _defineProperty2.default)(this, "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)((0, _jsxRuntime.jsx)("div", {
-        className: classes,
-        children: (0, _jsxRuntime.jsxs)("div", {
-          className: "newspack-web-preview__interior",
-          children: [(0, _jsxRuntime.jsxs)("div", {
-            className: "newspack-web-preview__toolbar",
-            children: [(0, _jsxRuntime.jsx)("div", {
-              className: "newspack-web-preview__toolbar-left",
-              children: (0, _jsxRuntime.jsxs)(_components.ButtonGroup, {
-                children: [(0, _jsxRuntime.jsx)(_components.Button, {
-                  onClick: () => this.setState({
-                    device: 'desktop'
-                  }),
-                  variant: 'desktop' === device && 'primary',
-                  icon: _icons.desktop,
-                  label: __('Preview Desktop Size', 'newspack')
-                }), (0, _jsxRuntime.jsx)(_components.Button, {
-                  onClick: () => this.setState({
-                    device: 'tablet'
-                  }),
-                  variant: 'tablet' === device && 'primary',
-                  icon: _icons.tablet,
-                  label: __('Preview Tablet Size', 'newspack')
-                }), (0, _jsxRuntime.jsx)(_components.Button, {
-                  onClick: () => this.setState({
-                    device: 'phone'
-                  }),
-                  variant: 'phone' === device && 'primary',
-                  icon: _icons.mobile,
-                  label: __('Preview Phone Size', 'newspack')
-                })]
-              })
-            }), (0, _jsxRuntime.jsx)("div", {
-              className: "newspack-web-preview__toolbar-right",
-              children: (0, _jsxRuntime.jsx)(_components.Button, {
-                onClick: () => {
-                  onClose();
-                  this.setState({
-                    isPreviewVisible: false,
-                    loaded: false
-                  });
-                },
-                icon: _icons.closeSmall,
-                label: __('Close Preview', 'newspack')
-              })
-            })]
-          }), (0, _jsxRuntime.jsxs)("div", {
-            className: "newspack-web-preview__content",
-            children: [!loaded && (0, _jsxRuntime.jsxs)("div", {
-              className: "newspack-web-preview__is-waiting",
-              children: [(0, _jsxRuntime.jsx)(_.Waiting, {
-                isLeft: true
-              }), __('Loading…', 'newspack')]
-            }), (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);
-    });
-    (0, _defineProperty2.default)(this, "showPreview", () => {
-      this.setState({
-        isPreviewVisible: true
-      });
-    });
-    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');
-    }
-  }
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      label,
-      variant,
-      /**
-       * Inversion of control - let the caller render
-       * the button that will trigger the modal
-       */
-      renderButton
-    } = this.props;
-    return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-      children: [renderButton ? renderButton({
-        showPreview: this.showPreview
-      }) : (0, _jsxRuntime.jsx)(_components.Button, {
-        variant: variant,
-        onClick: this.showPreview,
-        tabIndex: "0",
-        children: label
-      }), this.getWebPreviewModal()]
-    });
-  }
-}
-WebPreview.defaultProps = {
-  url: '//newspack.com',
-  label: __('Preview', 'newspack'),
-  onLoad: () => {}
-};
-var _default = WebPreview;
-exports.default = _default;

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

@@ -1,318 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = withWizard;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-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("@emotion/react/jsx-runtime");
-/**
- * WordPress dependencies.
- */
-const __ = _i18n.__;
-/**
- * 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);
-      (0, _defineProperty2.default)(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
-       */
-      (0, _defineProperty2.default)(this, "setError", error => {
-        return new Promise(resolve => {
-          this.setState({
-            error: error || null
-          }, () => resolve());
-        });
-      });
-      /**
-       * Render any errors that need rendering.
-       *
-       * @return {Component} Error UI
-       */
-      (0, _defineProperty2.default)(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);
-      });
-      /**
-       * Get a notice-level error.
-       *
-       * @param {Error} error object already parsed by parseError
-       * @return {Component} Error notice
-       */
-      (0, _defineProperty2.default)(this, "getErrorNotice", error => {
-        const {
-          message
-        } = error;
-        return (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
-       */
-      (0, _defineProperty2.default)(this, "getFatalError", error => {
-        const fallbackURL = this.getFallbackURL();
-        if (!fallbackURL) {
-          return null;
-        }
-        const {
-          message
-        } = error;
-        return (0, _jsxRuntime.jsxs)(_.Modal, {
-          title: __('Unrecoverable error'),
-          onRequestClose: () => window.location = fallbackURL,
-          children: [(0, _jsxRuntime.jsx)(_.Notice, {
-            noticeText: message,
-            isError: true,
-            rawHTML: true
-          }), (0, _jsxRuntime.jsx)(_.Card, {
-            buttonsCard: true,
-            noBorder: true,
-            className: "justify-end",
-            children: (0, _jsxRuntime.jsx)(_.Button, {
-              isPrimary: true,
-              href: fallbackURL,
-              children: __('Return to Dashboard', 'newspack')
-            })
-          })]
-        });
-      });
-      /**
-       * 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
-       */
-      (0, _defineProperty2.default)(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
-        };
-      });
-      /**
-       * Called when plugin installation is complete. Updates state and calls onWizardReady on the wrapped component.
-       */
-      (0, _defineProperty2.default)(this, "pluginInstallationStatus", _ref => {
-        let {
-          complete
-        } = _ref;
-        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.
-       */
-      (0, _defineProperty2.default)(this, "startLoading", quiet => {
-        if (quiet) {
-          this.setState(state => ({
-            quietLoading: state.quietLoading + 1
-          }));
-        } else {
-          this.setState(state => ({
-            loading: state.loading + 1
-          }));
-        }
-      });
-      /**
-       * End loading.
-       */
-      (0, _defineProperty2.default)(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.
-       */
-      (0, _defineProperty2.default)(this, "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}
-       */
-      (0, _defineProperty2.default)(this, "pluginRequirements", () => {
-        const {
-          complete
-        } = this.state;
-        /* After all plugins are loaded, redirect to / (this could be configurable) */
-        if (complete) {
-          return (0, _jsxRuntime.jsx)(Redirect, {
-            from: "/plugin-requirements",
-            to: "/"
-          });
-        }
-        return (0, _jsxRuntime.jsx)(Route, {
-          path: "/",
-          render: () => (0, _jsxRuntime.jsxs)(_element.Fragment, {
-            children: [complete !== null && (0, _jsxRuntime.jsx)("div", {
-              className: "newspack-wizard__header",
-              children: (0, _jsxRuntime.jsx)("div", {
-                className: "newspack-wizard__header__inner",
-                children: (0, _jsxRuntime.jsxs)("div", {
-                  className: "newspack-wizard__title",
-                  children: [(0, _jsxRuntime.jsx)(_.Button, {
-                    isLink: true,
-                    href: newspack_urls.dashboard,
-                    label: __('Return to Dashboard', 'newspack'),
-                    showTooltip: true,
-                    icon: _icons.home,
-                    iconSize: 36,
-                    children: (0, _jsxRuntime.jsx)(_.NewspackIcon, {
-                      size: 36
-                    })
-                  }), (0, _jsxRuntime.jsx)("div", {
-                    children: (0, _jsxRuntime.jsx)("h2", {
-                      children: requiredPlugins.length > 1 ? __('Required plugins', 'newspack') : __('Required plugin', 'newspack')
-                    })
-                  })]
-                })
-              })
-            }), (0, _jsxRuntime.jsx)("div", {
-              className: "newspack-wizard newspack-wizard__content",
-              children: (0, _jsxRuntime.jsx)(_.PluginInstaller, {
-                plugins: requiredPlugins,
-                onStatus: status => this.pluginInstallationStatus(status)
-              })
-            })]
-          })
-        });
-      });
-      (0, _defineProperty2.default)(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 = (0, _element.createRef)();
-    }
-    /**
-     * 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 (0, _jsxRuntime.jsxs)(_element.Fragment, {
-        children: [this.getError(), (0, _jsxRuntime.jsx)("div", {
-          className: loadingClasses.join(' '),
-          children: (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 && (0, _jsxRuntime.jsx)(_footer.default, {
-          simple: simpleFooter
-        })]
-      });
-    }
-  };
-}