newspack-components 2.2.1 → 3.0.0-alpha.2

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

@@ -1,313 +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 } from "@emotion/react/jsx-runtime";
-import { 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')
-            })
-          })]
-        });
-      });
-      /**
-       * 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", _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.
-       */
-      _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'),
-                    showTooltip: true,
-                    icon: home,
-                    iconSize: 36,
-                    children: _jsx(NewspackIcon, {
-                      size: 36
-                    })
-                  }), _jsx("div", {
-                    children: _jsx("h2", {
-                      children: requiredPlugins.length > 1 ? __('Required plugins', 'newspack') : __('Required plugin', 'newspack')
-                    })
-                  })]
-                })
-              })
-            }), _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-screen/index.js

@@ -1,116 +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 } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-export default function withWizardScreen(WrappedComponent) {
-  let {
-    hidePrimaryButton
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  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 = function () {
-      let overridingProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      return 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'),
-              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;
-}

package/dist/esm/wizard/components/WizardError.js

@@ -1,69 +0,0 @@
-/**
- * WordPress dependencies.
- */
-import { __ as alias__ } from '@wordpress/i18n';
-const __ = alias__;
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies.
- */
-import { Button, Card, Modal, Notice } from '../..';
-import { WIZARD_STORE_NAMESPACE } from '../store';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const parseError = _ref => {
-  let {
-    data,
-    message,
-    code
-  } = _ref;
-  let level = 'fatal';
-  if (!!data && 'level' in data) {
-    level = data.level;
-  } else if ('rest_invalid_param' === code) {
-    level = 'notice';
-  }
-  return {
-    message,
-    level
-  };
-};
-const WizardError = () => {
-  const error = useSelect(select => select(WIZARD_STORE_NAMESPACE).getError());
-  if (!error) {
-    return null;
-  }
-  const {
-    level,
-    message
-  } = parseError(error);
-  if ('fatal' === level) {
-    const fallbackURL = typeof newspack_urls !== 'undefined' && newspack_urls.dashboard;
-    return _jsxs(Modal, {
-      title: __('Unrecoverable error'),
-      onRequestClose: fallbackURL ? () => window.location = fallbackURL : undefined,
-      children: [_jsx(Notice, {
-        noticeText: message,
-        isError: true,
-        rawHTML: true
-      }), fallbackURL && _jsx(Card, {
-        buttonsCard: true,
-        noBorder: true,
-        className: "justify-end",
-        children: _jsx(Button, {
-          isPrimary: true,
-          href: fallbackURL,
-          children: __('Return to Dashboard', 'newspack')
-        })
-      })]
-    });
-  }
-  return _jsx(Notice, {
-    isError: true,
-    className: "newspack-wizard__above-header",
-    noticeText: message,
-    rawHTML: true
-  });
-};
-export default WizardError;

package/dist/esm/wizard/index.js

@@ -1,126 +0,0 @@
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies.
- */
-import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { __ as alias__ } from '@wordpress/i18n';
-const __ = alias__;
-import { category } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { Footer, Notice, Button, NewspackIcon, TabbedNavigation, PluginInstaller, HandoffMessage } from '../';
-import Router from '../proxied-imports/router';
-import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
-import { useWizardData } from './store/utils';
-import WizardError from './components/WizardError';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-registerStore();
-const {
-  HashRouter,
-  Redirect,
-  Route,
-  Switch
-} = Router;
-const Wizard = _ref => {
-  let {
-    sections = [],
-    apiSlug,
-    headerText,
-    subHeaderText,
-    hasSimpleFooter,
-    className,
-    renderAboveSections,
-    requiredPlugins = []
-  } = _ref;
-  const isLoading = useSelect(select => select(WIZARD_STORE_NAMESPACE).isLoading());
-  const isQuietLoading = useSelect(select => select(WIZARD_STORE_NAMESPACE).isQuietLoading());
-
-  // Trigger initial data fetch. Some sections might not use the wizard data,
-  // but for consistency, fetching is triggered regardless of the section.
-  useSelect(select => select(WIZARD_STORE_NAMESPACE).getWizardAPIData(apiSlug));
-  let displayedSections = sections.filter(section => !section.isHidden);
-  const [pluginRequirementsSatisfied, setPluginRequirementsSatisfied] = useState(requiredPlugins.length === 0);
-  if (!pluginRequirementsSatisfied) {
-    headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack') : __('Required plugin', 'newspack');
-    displayedSections = [{
-      path: '/',
-      render: () => _jsx(PluginInstaller, {
-        plugins: requiredPlugins,
-        onStatus: _ref2 => {
-          let {
-            complete
-          } = _ref2;
-          return setPluginRequirementsSatisfied(complete);
-        }
-      })
-    }];
-  }
-  return _jsxs(_Fragment, {
-    children: [_jsx("div", {
-      className: classnames(isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded', {
-        'newspack-wizard__is-loading-quiet': isQuietLoading
-      }),
-      children: _jsxs(HashRouter, {
-        hashType: "slash",
-        children: [newspack_aux_data.is_debug_mode && _jsx(Notice, {
-          debugMode: true
-        }), _jsx("div", {
-          className: "bg-white",
-          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'),
-                showTooltip: true,
-                icon: category,
-                iconSize: 36,
-                children: _jsx(NewspackIcon, {
-                  size: 36
-                })
-              }), _jsxs("div", {
-                children: [headerText && _jsx("h2", {
-                  children: headerText
-                }), subHeaderText && _jsx("span", {
-                  children: subHeaderText
-                })]
-              })]
-            })
-          })
-        }), displayedSections.length > 1 && _jsx(TabbedNavigation, {
-          items: displayedSections,
-          children: _jsx(WizardError, {})
-        }), _jsx(HandoffMessage, {}), _jsxs(Switch, {
-          children: [displayedSections.map((section, index) => {
-            const SectionComponent = section.render;
-            return _jsx(Route, {
-              path: section.path,
-              children: _jsxs("div", {
-                className: classnames('newspack-wizard newspack-wizard__content', className),
-                children: ['function' === typeof renderAboveSections ? renderAboveSections() : null, _jsx(SectionComponent, {})]
-              })
-            }, index);
-          }), _jsx(Redirect, {
-            to: displayedSections[0].path
-          })]
-        })]
-      })
-    }), !isLoading && _jsx(Footer, {
-      simple: hasSimpleFooter
-    })]
-  });
-};
-Wizard.useWizardData = useWizardData;
-Wizard.STORE_NAMESPACE = WIZARD_STORE_NAMESPACE;
-export default Wizard;