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

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
+        })]
+      });
+    }
+  };
+}

package/dist/esm/with-wizard/style.scss

@@ -0,0 +1,282 @@
+/**
+ * With Wizard
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../../shared/scss/colors";
+
+// Reset Padding of the Admin Page
+
+.toplevel_page_newspack:not(.menu-top),
+body[class*="newspack_page_newspack-"],
+body[class*="admin_page_newspack-"] {
+	background: white;
+
+	#wpcontent {
+		padding-left: 0;
+	}
+
+	#wpbody-content {
+		padding-bottom: 220px;
+		min-height: 100vh;
+
+		@media screen and ( min-width: 783px ) {
+			padding-bottom: 202px;
+		}
+
+		@media screen and ( min-width: 1128px ) {
+			padding-bottom: 168px;
+		}
+	}
+}
+
+svg {
+	&.newspack--error {
+		fill: wp-colors.$alert-red;
+		transform: rotate(180deg);
+	}
+	&.newspack--success {
+		fill: wp-colors.$alert-green;
+	}
+}
+
+// Blue Screen
+
+.newspack-wizard__blue {
+	#wpwrap {
+		background: colors.$primary-500;
+	}
+
+	.newspack-footer {
+		background: colors.$primary-500;
+		border-color: colors.$primary-500;
+		justify-content: center;
+
+		&__logo {
+			background: inherit;
+		}
+	}
+
+	#wpfooter {
+		color: white;
+
+		a {
+			color: inherit;
+
+			&:active,
+			&:focus,
+			&:hover {
+				opacity: 0.75;
+			}
+		}
+	}
+}
+
+// Loading
+
+.newspack-wizard__is-loading {
+	background: white;
+	cursor: wait;
+	inset: 0;
+	position: absolute;
+
+	> * {
+		display: none !important;
+	}
+
+	&::before,
+	&::after {
+		animation: loading 2s ease-in-out infinite;
+		content: "";
+		display: block;
+	}
+
+	&::before {
+		background: colors.$primary-500;
+		box-shadow:
+			24px 0 0 white,
+			69px 0 0 -15px wp-colors.$gray-900,
+			99px 0 0 -15px wp-colors.$gray-900,
+			129px 0 0 -15px wp-colors.$gray-900,
+			159px 0 0 -15px wp-colors.$gray-900,
+			189px 0 0 -15px wp-colors.$gray-900;
+		height: 60px;
+		width: 60px;
+	}
+
+	&::after {
+		background: wp-colors.$gray-900;
+		box-shadow:
+			inset -40vw 0 0 0 white,
+			0 64px 0 0 wp-colors.$gray-700,
+			40vw 96px 0 0 white,
+			0 96px 0 0 wp-colors.$gray-700;
+		height: 24px;
+		margin: 68px auto 0;
+		max-width: 1040px;
+		width: calc(100% - ( 32px * 2 ));
+
+		@media screen and ( min-width: 744px ) {
+			box-shadow:
+				inset -400px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				200px 96px 0 0 white,
+				0 96px 0 0 wp-colors.$gray-700;
+			width: calc(100% - ( 64px * 2 ));
+		}
+
+		@media screen and ( min-width: 1224px ) {
+			box-shadow:
+				inset -600px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				512px 96px 0 0 white,
+				0 96px 0 0 wp-colors.$gray-700;
+			width: calc(100% - ( 64px * 2 ));
+		}
+	}
+
+	// Blue Screen
+	.newspack-wizard__blue & {
+		background: colors.$primary-500;
+
+		&::before {
+			animation: loading-quiet 1.25s ease-in-out infinite;
+			background: white;
+			border-radius: 0;
+			box-shadow: 0;
+			height: 8px;
+			left: 0;
+			margin: 0;
+			position: absolute;
+			right: 100%;
+			top: 0;
+			width: auto;
+		}
+
+		&::after {
+			display: none;
+		}
+	}
+
+	// Quiet
+	&-quiet {
+		position: relative;
+
+		&::before,
+		&::after {
+			content: "";
+			cursor: wait;
+			display: block;
+			left: 0;
+			position: fixed;
+			top: 46px;
+
+			@media screen and ( min-width: 783px ) {
+				top: 32px;
+				margin-left: 160px;
+
+				body.auto-fold & {
+					margin-left: 36px;
+				}
+			}
+
+			@media screen and ( min-width: 961px ) {
+				body.auto-fold & {
+					margin-left: 160px;
+				}
+
+				body.folded & {
+					margin-left: 36px;
+				}
+			}
+		}
+
+		&::before {
+			animation: loading-quiet 1.25s ease-in-out infinite;
+			background: colors.$primary-500;
+			height: 8px;
+			right: 100%;
+			z-index: 9999;
+		}
+
+		&::after {
+			background: rgba(white, 0.7);
+			bottom: 0;
+			right: 0;
+			z-index: 9998;
+		}
+	}
+}
+
+.newspack-wizard-section__is-loading {
+	background: white;
+	cursor: wait;
+	min-height: 150px;
+
+	> * {
+		display: none !important;
+	}
+
+	&::after {
+		animation: loading 2s ease-in-out infinite;
+		content: "";
+		display: block;
+		background: wp-colors.$gray-900;
+		box-shadow:
+			inset -40vw 0 0 0 white,
+			0 64px 0 0 wp-colors.$gray-700,
+			40vw 96px 0 0 white,
+			0 96px 0 0 wp-colors.$gray-700;
+		height: 24px;
+		margin: 0 auto;
+		max-width: 1040px;
+		width: 100%;
+
+		@media screen and ( min-width: 744px ) {
+			box-shadow:
+				inset -400px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				200px 96px 0 0 white,
+				0 96px 0 0 wp-colors.$gray-700;
+		}
+
+		@media screen and ( min-width: 1224px ) {
+			box-shadow:
+				inset -600px 0 0 0 white,
+				0 64px 0 0 wp-colors.$gray-700,
+				520px 96px 0 0 white,
+				0 96px 0 0 wp-colors.$gray-700;
+		}
+	}
+}
+
+@keyframes loading {
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.1;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes loading-quiet {
+	0% {
+		left: 0;
+		right: 100%;
+	}
+
+	50% {
+		left: 0;
+		right: 0;
+	}
+
+	100% {
+		left: 100%;
+		right: 0;
+	}
+}

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

@@ -0,0 +1,109 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import { category } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { Button, Handoff, NewspackIcon, Notice, HandoffMessage, TabbedNavigation } from '../';
+import { buttonProps } from '../../../shared/js/';
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Higher-Order Component to provide plugin management and error handling to Newspack Wizards.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function withWizardScreen(WrappedComponent, {
+  hidePrimaryButton
+} = {}) {
+  const WrappedWithWizardScreen = props => {
+    const {
+      className,
+      buttonText,
+      buttonAction,
+      buttonDisabled,
+      headerText,
+      subHeaderText,
+      tabbedNavigation,
+      secondaryButtonText,
+      secondaryButtonAction,
+      renderAboveContent,
+      disableUpcomingInTabbedNavigation
+    } = props;
+    const retrievedButtonProps = buttonProps(buttonAction);
+    const retrievedSecondaryButtonProps = buttonProps(secondaryButtonAction);
+    const SecondaryCTAComponent = retrievedSecondaryButtonProps.plugin ? Handoff : Button;
+    const shouldRenderPrimaryButton = buttonText && buttonAction;
+    const shouldRenderSecondaryButton = secondaryButtonText && secondaryButtonAction;
+    const renderPrimaryButton = (overridingProps = {}) => retrievedButtonProps.plugin ? /*#__PURE__*/_jsx(Handoff, {
+      isPrimary: true,
+      ...retrievedButtonProps,
+      ...overridingProps,
+      children: buttonText
+    }) : /*#__PURE__*/_jsx(Button, {
+      isPrimary: !buttonDisabled,
+      isSecondary: !!buttonDisabled,
+      disabled: buttonDisabled
+      // Allow overridingProps to set children.
+      // eslint-disable-next-line react/no-children-prop
+      ,
+      children: buttonText,
+      ...retrievedButtonProps,
+      ...overridingProps
+    });
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [newspack_aux_data.is_debug_mode && /*#__PURE__*/_jsx(Notice, {
+        debugMode: true
+      }), /*#__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: category,
+              iconSize: 36,
+              children: /*#__PURE__*/_jsx(NewspackIcon, {
+                size: 36
+              })
+            }), /*#__PURE__*/_jsxs("div", {
+              children: [headerText && /*#__PURE__*/_jsx("h2", {
+                children: headerText
+              }), subHeaderText && /*#__PURE__*/_jsx("span", {
+                children: subHeaderText
+              })]
+            })]
+          })
+        })
+      }), tabbedNavigation && /*#__PURE__*/_jsx(TabbedNavigation, {
+        disableUpcoming: disableUpcomingInTabbedNavigation,
+        items: tabbedNavigation.filter(item => !item.isHiddenInNav)
+      }), /*#__PURE__*/_jsx(HandoffMessage, {}), /*#__PURE__*/_jsxs("div", {
+        className: classnames('newspack-wizard newspack-wizard__content', className),
+        children: [typeof renderAboveContent === 'function' ? renderAboveContent() : null, /*#__PURE__*/_jsx(WrappedComponent, {
+          ...props,
+          renderPrimaryButton: renderPrimaryButton
+        }), (shouldRenderPrimaryButton || shouldRenderSecondaryButton) && /*#__PURE__*/_jsxs("div", {
+          className: "newspack-buttons-card",
+          children: [shouldRenderPrimaryButton && !hidePrimaryButton && renderPrimaryButton(), shouldRenderSecondaryButton && /*#__PURE__*/_jsx(SecondaryCTAComponent, {
+            isSecondary: true,
+            ...retrievedSecondaryButtonProps,
+            children: secondaryButtonText
+          })]
+        })]
+      })]
+    });
+  };
+  return WrappedWithWizardScreen;
+}