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

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

@@ -1,311 +0,0 @@
-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 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 "@emotion/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);
-      _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());
-        });
-      });
-      /**
-       * 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);
-      });
-      /**
-       * 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",
-          noticeText: message,
-          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
-        };
-      });
-      /**
-       * Called when plugin installation is complete. Updates state and calls onWizardReady on the wrapped component.
-       */
-      _defineProperty(this, "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.
-       */
-      _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);
-          });
-        });
-      });
-      /**
-       * 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)
-              })
-            })]
-          })
-        });
-      });
-      _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();
-    }
-    /**
-     * 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 _jsxs(Fragment, {
-        children: [this.getError(), _jsx("div", {
-          className: loadingClasses.join(' '),
-          children: _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 && _jsx(Footer, {
-          simple: simpleFooter
-        })]
-      });
-    }
-  };
-}

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

@@ -1,260 +0,0 @@
-/**
- * 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

@@ -1,110 +0,0 @@
-/**
- * WordPress dependencies.
- */
-import { __ as alias__ } from '@wordpress/i18n';
-const __ = alias__;
-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 "@emotion/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 ? _jsx(Handoff, {
-      isPrimary: true,
-      ...retrievedButtonProps,
-      ...overridingProps,
-      children: buttonText
-    }) : _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 _jsxs(_Fragment, {
-      children: [newspack_aux_data.is_debug_mode && _jsx(Notice, {
-        debugMode: true
-      }), _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: category,
-              iconSize: 36,
-              children: _jsx(NewspackIcon, {
-                size: 36
-              })
-            }), _jsxs("div", {
-              children: [headerText && _jsx("h2", {
-                children: headerText
-              }), subHeaderText && _jsx("span", {
-                children: subHeaderText
-              })]
-            })]
-          })
-        })
-      }), tabbedNavigation && _jsx(TabbedNavigation, {
-        disableUpcoming: disableUpcomingInTabbedNavigation,
-        items: tabbedNavigation.filter(item => !item.isHiddenInNav)
-      }), _jsx(HandoffMessage, {}), _jsxs("div", {
-        className: classnames('newspack-wizard newspack-wizard__content', className),
-        children: [typeof renderAboveContent === 'function' ? renderAboveContent() : null, _jsx(WrappedComponent, {
-          ...props,
-          renderPrimaryButton: renderPrimaryButton
-        }), (shouldRenderPrimaryButton || shouldRenderSecondaryButton) && _jsxs("div", {
-          className: "newspack-buttons-card",
-          children: [shouldRenderPrimaryButton && !hidePrimaryButton && renderPrimaryButton(), shouldRenderSecondaryButton && _jsx(SecondaryCTAComponent, {
-            isSecondary: true,
-            ...retrievedSecondaryButtonProps,
-            children: secondaryButtonText
-          })]
-        })]
-      })]
-    });
-  };
-  return WrappedWithWizardScreen;
-}