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

package/dist/cjs/plugin-settings/index.js

@@ -1,221 +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 _classnames = _interopRequireDefault(require("classnames"));
-var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var _ = require("../");
-var _SettingsSection = _interopRequireDefault(require("./SettingsSection"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * External dependencies
- */
-/**
- * WordPress dependencies.
- */
-/**
- * Internal dependencies.
- */
-const __ = _i18n.__;
-class PluginSettings extends _element.Component {
-  constructor() {
-    super(...arguments);
-    (0, _defineProperty2.default)(this, "fetchSettings", () => {
-      const {
-        afterFetch,
-        pluginSlug,
-        isWizard
-      } = this.props;
-      this.setState({
-        inFlight: true
-      });
-      (0, _apiFetch.default)({
-        path: isWizard ? `/newspack/v1/wizard/${pluginSlug}/settings` : `/${pluginSlug}/v1/settings`
-      }).then(settings => {
-        this.setState({
-          settings,
-          error: null
-        });
-        if ('function' === typeof afterFetch) {
-          afterFetch(settings);
-        }
-      }).catch(error => {
-        this.setState({
-          error
-        });
-      }).finally(() => {
-        this.setState({
-          inFlight: false
-        });
-      });
-    });
-    (0, _defineProperty2.default)(this, "getSettingsValues", sectionKey => {
-      return this.state.settings[sectionKey]?.reduce((map, setting) => {
-        map[setting.key] = setting.value;
-        return map;
-      }, {}) || {};
-    });
-    (0, _defineProperty2.default)(this, "handleSettingChange", sectionKey => (key, value) => {
-      const sectionSettings = [...this.state.settings[sectionKey]];
-      sectionSettings.forEach(setting => {
-        if (setting.key === key) {
-          setting.value = value;
-        }
-      });
-      this.setState({
-        settings: {
-          ...this.state.settings,
-          [sectionKey]: sectionSettings
-        }
-      });
-    });
-    (0, _defineProperty2.default)(this, "handleSectionUpdate", sectionKey => data => {
-      const {
-        afterUpdate,
-        pluginSlug,
-        isWizard
-      } = this.props;
-      this.setState({
-        inFlight: true
-      });
-      (0, _apiFetch.default)({
-        path: isWizard ? `/newspack/v1/wizard/${pluginSlug}/settings` : `/${pluginSlug}/v1/settings`,
-        method: 'POST',
-        data: {
-          section: sectionKey,
-          settings: data ? data : this.getSettingsValues(sectionKey)
-        }
-      }).then(settings => {
-        this.setState({
-          settings: {
-            ...this.state.settings,
-            [sectionKey]: settings[sectionKey]
-          },
-          error: null
-        });
-        if ('function' === typeof afterUpdate) {
-          afterUpdate(settings);
-        }
-      }).catch(error => {
-        this.setState({
-          error
-        });
-      }).finally(() => {
-        this.setState({
-          inFlight: false
-        });
-      });
-    });
-    /**
-     * Get the section setting containing section information.
-     *
-     * @param {string} sectionKey The section name.
-     * @return {Object} The section setting.
-     */
-    (0, _defineProperty2.default)(this, "getSectionInfo", sectionKey => {
-      return this.state.settings[sectionKey]?.find(setting => !setting.key || setting.key === 'active');
-    });
-    /**
-     * Get the section title.
-     *
-     * @param {string} sectionKey The section name.
-     * @return {string} The section title.
-     */
-    (0, _defineProperty2.default)(this, "getSectionTitle", sectionKey => {
-      return this.getSectionInfo(sectionKey)?.description;
-    });
-    /**
-     * Get the section description.
-     *
-     * @param {string} sectionKey The section name.
-     * @return {string} The section description.
-     */
-    (0, _defineProperty2.default)(this, "getSectionDescription", sectionKey => {
-      return this.getSectionInfo(sectionKey)?.help;
-    });
-    /**
-     * Get whether a section is active.
-     *
-     * @param {string} sectionKey The section name.
-     * @return {?boolean} Whether the section is active or not. Null if the section is not found or does not support activation.
-     */
-    (0, _defineProperty2.default)(this, "isSectionActive", sectionKey => {
-      const {
-        settings
-      } = this.state;
-      const activation = settings[sectionKey]?.find(setting => setting.key === 'active');
-      if (!activation) {
-        return null;
-      }
-      return activation.value;
-    });
-    /**
-     * Get list of section field settings.
-     *
-     * @param {string} sectionKey The section name.
-     * @return {?Array} List of section fields.
-     */
-    (0, _defineProperty2.default)(this, "getSectionFields", sectionKey => {
-      return this.state.settings[sectionKey]?.filter(setting => setting.key && setting.key !== 'active');
-    });
-    this.state = {
-      inFlight: false,
-      settings: {},
-      error: null
-    };
-  }
-  componentDidMount() {
-    this.fetchSettings();
-  }
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      title,
-      description,
-      hasGreyHeader,
-      children
-    } = this.props;
-    const {
-      settings,
-      inFlight,
-      error
-    } = this.state;
-    return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-      children: [title && (0, _jsxRuntime.jsx)(_.SectionHeader, {
-        title: title,
-        description: description
-      }), error && (0, _jsxRuntime.jsx)(_.Notice, {
-        isError: true,
-        noticeText: error.message
-      }), (0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames.default)('newspack-plugin-settings', {
-          'newspack-wizard-section__is-loading': inFlight && !Object.keys(settings).length
-        }),
-        children: [Object.keys(settings).map(sectionKey => (0, _jsxRuntime.jsx)(_SettingsSection.default, {
-          disabled: inFlight,
-          sectionKey: sectionKey,
-          title: this.getSectionTitle(sectionKey),
-          description: this.getSectionDescription(sectionKey),
-          active: this.isSectionActive(sectionKey),
-          fields: this.getSectionFields(sectionKey),
-          onChange: this.handleSettingChange(sectionKey),
-          onUpdate: this.handleSectionUpdate(sectionKey),
-          hasGreyHeader: hasGreyHeader
-        }, sectionKey)), children]
-      })]
-    });
-  }
-}
-PluginSettings.defaultProps = {
-  title: __('General Settings', 'newspack-plugin')
-};
-PluginSettings.Section = _SettingsSection.default;
-var _default = exports.default = PluginSettings;

package/dist/cjs/plugin-toggle/index.js

@@ -1,218 +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 _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
-var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var _ = require("../");
-require("./style.scss");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * WordPress dependencies.
- */
-/**
- * Internal dependencies.
- */
-const __ = _i18n.__;
-/**
- * Plugin toggle group component.
- */
-class PluginToggle extends _element.Component {
-  constructor(...args) {
-    super(...args);
-    (0, _defineProperty2.default)(this, "state", {
-      pluginInfo: {}
-    });
-    (0, _defineProperty2.default)(this, "componentDidMount", () => {
-      this.retrievePluginInfo();
-    });
-    /**
-     * Retrieve complete data about Newspack plugins.
-     */
-    (0, _defineProperty2.default)(this, "retrievePluginInfo", () => {
-      return new Promise(() => {
-        (0, _apiFetch.default)({
-          path: '/newspack/v1/plugins/'
-        }).then(pluginInfo => this.setState({
-          pluginInfo
-        }));
-      });
-    });
-    /**
-     * Install/activate or remove a plugin.
-     */
-    (0, _defineProperty2.default)(this, "managePlugin", (plugin, value) => {
-      const {
-        plugins
-      } = this.props;
-      const {
-        pluginInfo
-      } = this.state;
-      const action = value ? 'configure' : 'deactivate';
-      const params = {
-        path: `/newspack/v1/plugins/${plugin}/${action}/`,
-        method: 'post'
-      };
-      this.setState({
-        pluginInfo: {
-          ...pluginInfo,
-          [plugin]: {
-            ...pluginInfo[plugin],
-            inFlight: action
-          }
-        }
-      }, () => {
-        (0, _apiFetch.default)(params).then(response => {
-          const {
-            shouldRefreshAfterUpdate
-          } = plugins[plugin];
-          this.setState(({
-            pluginInfo: currentPluginInfo
-          }) => ({
-            pluginInfo: {
-              ...currentPluginInfo,
-              [plugin]: response
-            }
-          }), () => shouldRefreshAfterUpdate && location.reload());
-        }).catch(e => {
-          this.setState({
-            pluginInfo: {
-              ...pluginInfo,
-              [plugin]: {
-                ...pluginInfo[plugin],
-                error: e.message || __('There was an error managing this plugin.', 'newspack-plugin')
-              }
-            }
-          });
-        });
-      });
-    });
-    /**
-     * Prepare plugins data for render. Change all keys to camelCase, merge API-fetched data with prop.
-     */
-    (0, _defineProperty2.default)(this, "prepareDataForRender", (pluginsFromProps, pluginsFromAPI) => Object.keys(pluginsFromProps).map(pluginSlug => pluginsFromAPI[pluginSlug] ? Object.keys(pluginsFromAPI[pluginSlug]).reduce((accumulator, key) => ({
-      ...accumulator,
-      [key.charAt(0).toLowerCase() + key.slice(1)]: pluginsFromAPI[pluginSlug][key]
-    }), {}) : {}).map(plugin => Object.assign(plugin, pluginsFromProps[plugin.slug])));
-    /**
-     * Generate a classname for the ActionCard based on plugin state. Applies 'in-flight' class if an API is underway and 'loading' if the plugin data is not yet available.
-     */
-    (0, _defineProperty2.default)(this, "classNameForPlugin", plugin => {
-      const {
-        status,
-        inFlight
-      } = plugin;
-      if (inFlight) {
-        return 'in-flight';
-      }
-      if (!status) {
-        return 'loading';
-      }
-    });
-    /**
-     * Generate the ActionCard action text for a plugin.
-     */
-    (0, _defineProperty2.default)(this, "actionTextForPlugin", plugin => {
-      const {
-        actionText,
-        editPath,
-        href,
-        inFlight,
-        name
-      } = plugin;
-      // Show spinner when plugin data is unavailable, or when an API call is in flight.
-      if ('configure' === inFlight) {
-        return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-          children: [__('Installing…', 'newspack-plugin'), " ", (0, _jsxRuntime.jsx)(_.Waiting, {
-            isRight: true
-          })]
-        });
-      }
-      if ('deactivate' === inFlight) {
-        return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-          children: [__('Deactivating…', 'newspack-plugin'), " ", (0, _jsxRuntime.jsx)(_.Waiting, {
-            isRight: true
-          })]
-        });
-      }
-      if (!name) {
-        return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-          children: [__('Loading…', 'newspack-plugin'), " ", (0, _jsxRuntime.jsx)(_.Waiting, {
-            isRight: true
-          })]
-        });
-      }
-      // No action button at all if the plugin isn't installed and active.
-      if (!this.isPluginInstalledAndActive(plugin)) {
-        return null;
-      }
-      if (href || editPath) {
-        return actionText ? actionText : __('Configure', 'newspack-plugin');
-      }
-    });
-    /**
-     * Get error message for this plugin.
-     */
-    (0, _defineProperty2.default)(this, "errorForPlugin", plugin => {
-      const {
-        slug
-      } = plugin;
-      const {
-        pluginInfo
-      } = this.state;
-      return pluginInfo[slug]?.error || null;
-    });
-    /**
-     * Get installation/activation status for a plugin.
-     */
-    (0, _defineProperty2.default)(this, "isPluginInstalledAndActive", plugin => {
-      const {
-        status
-      } = plugin;
-      return status === 'active';
-    });
-  }
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      plugins
-    } = this.props;
-    const {
-      pluginInfo
-    } = this.state;
-    return this.prepareDataForRender(plugins, pluginInfo).map((plugin, index) => {
-      const {
-        name,
-        description,
-        href,
-        slug,
-        editPath
-      } = plugin;
-      const pluginStatus = this.isPluginInstalledAndActive(plugin);
-      const handoff = !href && pluginStatus && editPath ? slug : null;
-      const error = this.errorForPlugin(plugin);
-      return (0, _jsxRuntime.jsx)(_.ActionCard, {
-        className: this.classNameForPlugin(plugin),
-        title: name,
-        description: description,
-        actionText: this.actionTextForPlugin(plugin),
-        handoff: handoff,
-        href: href,
-        toggle: true,
-        toggleChecked: this.isPluginInstalledAndActive(plugin),
-        toggleOnChange: value => this.managePlugin(slug, value),
-        notification: error,
-        notificationHTML: error,
-        notificationLevel: "error"
-      }, index);
-    });
-  }
-}
-var _default = exports.default = PluginToggle;

package/dist/cjs/plugin-toggle/style.scss

@@ -1,20 +0,0 @@
-/**
- * Plugin Toggle
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-action-card {
-	&.in-flight,
-	&.loading {
-		opacity: 0.5;
-
-		.newspack-action-card__region-right {
-			.newspack-button {
-				color: wp-colors.$gray-700;
-				pointer-events: none;
-				text-decoration: none;
-			}
-		}
-	}
-}

package/dist/cjs/popover/style.scss

@@ -1,161 +0,0 @@
-/**
- * Popover
- */
-
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-popover {
-	.components-popover__content {
-		min-width: 238px;
-
-		.newspack-button {
-			color: wp-colors.$gray-700;
-			display: flex;
-			font-weight: normal;
-			padding: 6px 8px;
-
-			&:hover {
-				color: colors.$primary-500;
-
-				.components-menu-items__item-icon {
-					fill: currentcolor;
-				}
-			}
-
-			&:focus:not( :disabled ) {
-				box-shadow: inset 0 0 0 2px colors.$primary-500;
-				position: relative;
-				z-index: 1;
-			}
-
-			&.is-link {
-				border-radius: 2px;
-				padding: 6px 8px;
-				text-decoration: none;
-
-				&:not( .is-destructive ) {
-					color: wp-colors.$gray-700;
-
-					&:active,
-					&:active:enabled,
-					&:focus,
-					&:focus:enabled &:hover,
-					&:not( :disabled, [aria-disabled='true'], .is-default ):hover {
-						color: colors.$primary-500;
-					}
-				}
-
-				&:focus,
-				&:focus:enabled {
-					outline: none;
-				}
-			}
-
-			&.is-destructive:not( :focus ) {
-				box-shadow: none !important;
-			}
-
-			.components-menu-items__item-icon {
-				fill: wp-colors.$gray-900;
-			}
-
-			.components-menu-item__item {
-				display: flex;
-				width: 100%;
-			}
-		}
-
-		.components-menu-group__label {
-			color: wp-colors.$gray-900;
-			font-size: 12px;
-			font-weight: bold;
-			line-height: 16px;
-			margin: 0;
-			padding: 10px 8px;
-		}
-
-		.screen-reader-text {
-			display: flex;
-		}
-
-		.newspack-select-control {
-			margin: 0;
-			width: 100%;
-
-			.components-select-control {
-				select.components-select-control__input {
-					height: 36px;
-					min-height: 36px;
-
-					&:focus ~ div.components-input-control__backdrop {
-						border-color: colors.$primary-500;
-						box-shadow: inset 0 0 0 1px colors.$primary-500;
-					}
-				}
-
-				div.components-input-control__backdrop {
-					padding: 0;
-				}
-			}
-		}
-
-		.newspack-form-token-field {
-			margin: 0;
-			text-align: left;
-
-			.newspack-form-token-field__input-container {
-				min-height: 36px;
-				padding: 3px 5px;
-			}
-
-			.components-form-token-field__suggestions-list {
-				margin: 5px -3px -11px;
-			}
-
-			.components-form-token-field__label {
-				display: block;
-			}
-		}
-
-		.newspack-toggle-control {
-			margin: 0;
-
-			.components-base-control__field {
-				margin: 3px 0;
-			}
-
-			.components-form-toggle {
-				border-top: 0;
-			}
-		}
-	}
-
-	&:not( .is-without-arrow )::before {
-		border-color: wp-colors.$gray-300;
-	}
-
-	&.is-from-bottom {
-		margin-bottom: 2px;
-	}
-
-	&.is-from-top {
-		margin-top: 2px;
-	}
-
-	&.components-animate__appear {
-		animation: none;
-	}
-
-	&__padding-8 {
-		.components-popover__content {
-			padding: 8px;
-		}
-	}
-
-	&__padding-16 {
-		.components-popover__content {
-			padding: 16px;
-		}
-	}
-}

package/dist/cjs/progress-bar/style.scss

@@ -1,42 +0,0 @@
-/**
- * Progress Bar
- */
-
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-progress-bar {
-	margin: 32px 0;
-
-	& &__headings {
-		align-items: center;
-		display: flex;
-		justify-content: space-between;
-		margin-bottom: 8px;
-
-		h2,
-		p {
-			margin-bottom: 0;
-			margin-top: 0;
-		}
-
-		p {
-			margin-left: auto;
-		}
-	}
-
-	&__container {
-		background-color: wp-colors.$gray-100;
-		border-radius: 4px;
-		height: 8px;
-		overflow: hidden;
-		position: relative;
-		z-index: 1;
-	}
-
-	&__bar {
-		background-color: colors.$primary-500;
-		height: 8px;
-		transition: width 125ms ease-in-out;
-	}
-}

package/dist/cjs/proxied-imports/router.js

@@ -1,14 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var ReactRouterDOM = _interopRequireWildcard(require("react-router-dom"));
-/**
- * A proxy for react-router-dom.
- * Ensures that both components and the plugin use the same instance of
- * React Router, even if there are node_modules in components.
- */
-var _default = exports.default = ReactRouterDOM;