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

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

@@ -0,0 +1,183 @@
+/**
+ * WordPress dependencies.
+ */
+import { Component, createRef, Fragment, createPortal } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { closeSmall, desktop, mobile, tablet } from '@wordpress/icons';
+import { Button, ButtonGroup } from '@wordpress/components';
+
+/**
+ * Internal dependencies.
+ */
+import { Waiting } from '../';
+import './style.scss';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 Component {
+  state = {
+    device: 'desktop',
+    loaded: false,
+    isPreviewVisible: false
+  };
+  constructor(props) {
+    super(props);
+    this.iframeRef = 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 = classnames('newspack-web-preview', device, loaded && 'is-loaded');
+    beforeLoad();
+    return createPortal( /*#__PURE__*/_jsx("div", {
+      className: classes,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "newspack-web-preview__interior",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "newspack-web-preview__toolbar",
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "newspack-web-preview__toolbar-left",
+            children: /*#__PURE__*/_jsxs(ButtonGroup, {
+              children: [/*#__PURE__*/_jsx(Button, {
+                onClick: () => this.setState({
+                  device: 'desktop'
+                }),
+                variant: 'desktop' === device && 'primary',
+                icon: desktop,
+                label: __('Preview Desktop Size', 'newspack-plugin')
+              }), /*#__PURE__*/_jsx(Button, {
+                onClick: () => this.setState({
+                  device: 'tablet'
+                }),
+                variant: 'tablet' === device && 'primary',
+                icon: tablet,
+                label: __('Preview Tablet Size', 'newspack-plugin')
+              }), /*#__PURE__*/_jsx(Button, {
+                onClick: () => this.setState({
+                  device: 'phone'
+                }),
+                variant: 'phone' === device && 'primary',
+                icon: mobile,
+                label: __('Preview Phone Size', 'newspack-plugin')
+              })]
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: "newspack-web-preview__toolbar-right",
+            children: /*#__PURE__*/_jsx(Button, {
+              onClick: () => {
+                onClose();
+                this.setState({
+                  isPreviewVisible: false,
+                  loaded: false
+                });
+              },
+              icon: closeSmall,
+              label: __('Close Preview', 'newspack-plugin')
+            })
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "newspack-web-preview__content",
+          children: [!loaded && /*#__PURE__*/_jsxs("div", {
+            className: "newspack-web-preview__is-waiting",
+            children: [/*#__PURE__*/_jsx(Waiting, {
+              isLeft: true
+            }), __('Loading…', 'newspack-plugin')]
+          }), /*#__PURE__*/_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__*/_jsxs(Fragment, {
+      children: [renderButton ? renderButton({
+        showPreview: this.showPreview
+      }) : /*#__PURE__*/_jsx(Button, {
+        variant: variant,
+        onClick: this.showPreview,
+        tabIndex: "0",
+        children: label
+      }), this.getWebPreviewModal()]
+    });
+  }
+}
+WebPreview.defaultProps = {
+  url: '//newspack.com',
+  label: __('Preview', 'newspack-plugin'),
+  onLoad: () => {}
+};
+export default WebPreview;

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

@@ -0,0 +1,155 @@
+/**
+ * Web Preview
+ */
+
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-web-preview {
+	// Color
+	--wp-admin-theme-color: #{colors.$primary-500};
+	--wp-admin-theme-color--rgb: #{colors.$primary-500--rgb};
+	--wp-admin-theme-color-darker-10: #{colors.$primary-600};
+	--wp-admin-theme-color-darker-10--rgb: #{colors.$primary-600--rgb};
+	--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);
+	box-sizing: border-box;
+	height: 100%;
+	left: 0;
+	margin: 0;
+	max-width: 100%;
+	padding: 32px;
+	position: fixed;
+	top: 0;
+	width: 100%;
+	z-index: 99999;
+
+	&.phone iframe {
+		max-width: 380px;
+	}
+
+	&.tablet iframe {
+		max-width: 768px;
+	}
+
+	&.is-loaded iframe {
+		opacity: 1;
+	}
+
+	&--open {
+		overflow: hidden;
+	}
+
+	&__interior {
+		animation: appear-animation 125ms ease-in-out;
+		animation-fill-mode: forwards;
+		background: white;
+		border-radius: 2px;
+		overflow: hidden;
+		height: 100%;
+		width: 100%;
+	}
+
+	&__content {
+		background: wp-colors.$gray-100;
+		height: calc(100% - 49px);
+		-webkit-overflow-scrolling: touch;
+		overflow-x: hidden;
+		width: 100%;
+
+		iframe {
+			background: #fff;
+			display: block;
+			height: 100%;
+			margin: 0 auto;
+			max-width: 100%;
+			opacity: 0;
+			outline: 1px solid wp-colors.$gray-300;
+			padding: 0;
+			pointer-events: all;
+			transition: max-width 125ms ease-in-out, opacity 250ms ease-in-out;
+			width: 100%;
+		}
+	}
+
+	&__is-waiting {
+		align-items: center;
+		display: flex;
+		left: 50%;
+		margin: -12px 0 0;
+		position: absolute;
+		top: 50%;
+		transform: translateX(-50%);
+	}
+
+	&__toolbar {
+		border-bottom: 1px solid wp-colors.$gray-300;
+		display: flex;
+		padding: 6px;
+
+		&-left {
+			flex: 0 0 auto;
+
+			.newspack-button-group {
+				display: flex;
+				margin: 0;
+			}
+
+			.newspack-button {
+				display: none;
+				padding: 0 !important;
+
+				&.is-selected {
+					background: colors.$primary-500;
+					color: white;
+
+					&:active,
+					&:focus,
+					&:hover {
+						box-shadow: none !important;
+						color: white;
+						outline: none;
+					}
+
+					&:focus {
+						box-shadow: inset 0 0 0 1px colors.$primary-500, inset 0 0 0 3px white !important;
+					}
+				}
+
+				@media screen and ( min-width: 528px ) {
+					&.is-phone,
+					&.is-tablet {
+						display: flex;
+					}
+				}
+
+				@media screen and ( min-width: 816px ) {
+					&.is-desktop {
+						display: flex;
+					}
+				}
+			}
+		}
+
+		&-right {
+			display: flex;
+			flex: 1;
+			justify-content: flex-end;
+		}
+
+		.newspack-button {
+			border-radius: 0 !important;
+		}
+	}
+}
+
+@keyframes appear-animation {
+	from {
+		margin-top: 32px;
+	}
+	to {
+		margin-top: 0;
+	}
+}

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

@@ -0,0 +1,320 @@
+/**
+ * WordPress dependencies.
+ */
+import { Component, createRef, Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import apiFetch from '@wordpress/api-fetch';
+import { home } from '@wordpress/icons';
+
+/**
+ * Internal dependencies.
+ */
+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 "react/jsx-runtime";
+const {
+  Redirect,
+  Route
+} = Router;
+
+/**
+ * Higher-Order Component to provide plugin management and error handling to Newspack Wizards.
+ */
+export default function withWizard(WrappedComponent, requiredPlugins) {
+  return class WrappedWithWizard extends Component {
+    constructor(props) {
+      super(props);
+      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
+     */
+    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 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
+        }), /*#__PURE__*/_jsx(Card, {
+          buttonsCard: true,
+          noBorder: true,
+          className: "justify-end",
+          children: /*#__PURE__*/_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
+     */
+    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) => {
+        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}
+     */
+    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)
+            })
+          })]
+        })
+      });
+    };
+    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__*/_jsxs(Fragment, {
+        children: [this.getError(), /*#__PURE__*/_jsx("div", {
+          className: loadingClasses.join(' '),
+          children: /*#__PURE__*/_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__*/_jsx(Footer, {
+          simple: simpleFooter
+        })]
+      });
+    }
+  };
+}