newspack-components 2.2.1 → 3.0.0-alpha.2

package/dist/esm/plugin-installer/index.js

@@ -1,295 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * Plugin Installer
- */
-
-/**
- * WordPress dependencies.
- */
-import apiFetch from '@wordpress/api-fetch';
-import { Component } from '@wordpress/element';
-import { __ as alias__ } from '@wordpress/i18n';
-const __ = alias__;
-import { Icon, check } from '@wordpress/icons';
-
-/**
- * Internal dependencies.
- */
-import { ActionCard, Button, Waiting } from '../';
-import './style.scss';
-const PLUGIN_STATE_NONE = 0;
-const PLUGIN_STATE_ACTIVE = 1;
-const PLUGIN_STATE_INSTALLING = 2;
-const PLUGIN_STATE_ERROR = 3;
-
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-
-/**
- * Plugin installer.
- */
-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";
-class PluginInstaller extends Component {
-  constructor() {
-    var _this;
-    super(...arguments);
-    _this = this;
-    _defineProperty(this, "componentDidMount", () => {
-      const {
-        plugins
-      } = this.props;
-      this.retrievePluginInfo(plugins).then(() => {
-        if (this.props.autoInstall) {
-          this.installAllPlugins();
-        }
-      });
-    });
-    _defineProperty(this, "componentDidUpdate", prevProps => {
-      const {
-        autoInstall,
-        plugins
-      } = this.props;
-      const {
-        installationInitialized
-      } = this.state;
-      if (plugins !== prevProps.plugins) {
-        this.retrievePluginInfo(plugins);
-      }
-      if (autoInstall && !installationInitialized) {
-        this.installAllPlugins();
-      }
-    });
-    _defineProperty(this, "retrievePluginInfo", plugins => {
-      return new Promise(resolve => {
-        apiFetch({
-          path: '/newspack/v1/plugins/'
-        }).then(response => {
-          const pluginInfo = Object.keys(response).reduce((result, slug) => {
-            if (plugins.indexOf(slug) === -1) {
-              return result;
-            }
-            result[slug] = {
-              ...response[slug],
-              installationStatus: response[slug].Status === 'active' ? PLUGIN_STATE_ACTIVE : PLUGIN_STATE_NONE
-            };
-            return result;
-          }, {});
-          this.updatePluginInfo(pluginInfo).then(() => resolve());
-        });
-      });
-    });
-    _defineProperty(this, "installAllPlugins", () => {
-      const {
-        pluginInfo
-      } = this.state;
-      this.setState({
-        installationInitialized: true
-      });
-      const promises = Object.keys(pluginInfo).filter(slug => 'active' !== pluginInfo[slug].Status).map(slug => () => this.installPlugin(slug));
-      promises.reduce((promise, action) => promise.then(result => action().then(Array.prototype.concat.bind(result))), Promise.resolve([]));
-    });
-    _defineProperty(this, "installPlugin", slug => {
-      this.setInstallationStatus(slug, PLUGIN_STATE_INSTALLING);
-      const params = {
-        path: `/newspack/v1/plugins/${slug}/configure/`,
-        method: 'post'
-      };
-      return apiFetch(params).then(response => {
-        const {
-          pluginInfo
-        } = this.state;
-        this.props.onInstalled(slug);
-        this.updatePluginInfo({
-          ...pluginInfo,
-          [slug]: {
-            ...response,
-            installationStatus: PLUGIN_STATE_ACTIVE
-          }
-        });
-      }).catch(error => {
-        this.setInstallationStatus(slug, PLUGIN_STATE_ERROR, error.message);
-      });
-    });
-    _defineProperty(this, "setChecked", (slug, checked) => {
-      const {
-        pluginInfo
-      } = this.state;
-      this.updatePluginInfo({
-        ...pluginInfo,
-        [slug]: {
-          ...pluginInfo[slug],
-          checked
-        }
-      });
-    });
-    _defineProperty(this, "setInstallationStatus", function (slug, installationStatus) {
-      let notification = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-      const {
-        pluginInfo
-      } = _this.state;
-      _this.updatePluginInfo({
-        ...pluginInfo,
-        [slug]: {
-          ...pluginInfo[slug],
-          installationStatus,
-          notification
-        }
-      });
-    });
-    _defineProperty(this, "updatePluginInfo", pluginInfo => {
-      return new Promise(resolve => {
-        const {
-          onStatus
-        } = this.props;
-        this.setState({
-          pluginInfo
-        }, () => {
-          const complete = Object.values(pluginInfo).every(plugin => {
-            return 'active' === plugin.Status;
-          });
-          onStatus({
-            complete,
-            pluginInfo
-          });
-          resolve();
-        });
-      });
-    });
-    _defineProperty(this, "classForInstallationStatus", status => {
-      switch (status) {
-        case PLUGIN_STATE_ACTIVE:
-          return 'newspack-plugin-installer__status-active';
-        case PLUGIN_STATE_INSTALLING:
-          return 'newspack-plugin-installer__status-installing';
-        case PLUGIN_STATE_ERROR:
-          return 'newspack-plugin-installer__status-error';
-        default:
-          return 'newspack-plugin-installer__status-none';
-      }
-    });
-    this.state = {
-      pluginInfo: {},
-      installationInitialized: false
-    };
-  }
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      autoInstall,
-      isSmall,
-      withoutFooterButton
-    } = this.props;
-    const {
-      pluginInfo
-    } = this.state;
-    const {
-      is_atomic: isAtomic
-    } = window;
-    const slugs = Object.keys(pluginInfo);
-
-    // Store all plugin status info for installer button text value based on current status.
-    const currentPluginStatuses = [];
-    slugs.forEach(slug => {
-      const plugin = pluginInfo[slug];
-      currentPluginStatuses.push(plugin.Status);
-    });
-
-    // Make sure plugin status falls in either one of these, to handle button text.
-    const pluginInstalled = currentStatus => currentStatus === 'active' || currentStatus === 'inactive';
-    const buttonText = currentPluginStatuses.every(pluginInstalled) ? __('Activate', 'newspack') : __('Install', 'newspack');
-    const needsInstall = slugs.some(slug => {
-      const plugin = pluginInfo[slug];
-      return plugin.Status !== 'active' && plugin.installationStatus === PLUGIN_STATE_NONE;
-    });
-    return _jsxs(_Fragment, {
-      children: [(!pluginInfo || !Object.keys(pluginInfo).length) && _jsxs("div", {
-        className: "newspack-plugin-installer_is-waiting",
-        children: [_jsx(Waiting, {
-          isLeft: true
-        }), __('Retrieving plugin information…')]
-      }), pluginInfo && slugs.length > 0 && slugs.map(slug => {
-        const plugin = pluginInfo[slug];
-        const {
-          Name,
-          Description,
-          Download,
-          Status,
-          installationStatus,
-          notification
-        } = plugin;
-        const isWaiting = installationStatus === PLUGIN_STATE_INSTALLING;
-        const isButton = !isWaiting && Status !== 'active';
-        const installable = Download || pluginInstalled(Status);
-        let actionText;
-        if (installationStatus === PLUGIN_STATE_INSTALLING) {
-          actionText = 'inactive' === Status ? __('Activating…') : __('Installing…');
-        } else if (!installable) {
-          actionText = _jsxs("span", {
-            className: "newspack-plugin-installer__status",
-            children: [isAtomic ? __('Contact Newspack support to install', 'newspack') : __('Plugin must be installed manually', 'newspack'), _jsx("span", {
-              className: "newspack-checkbox-icon"
-            })]
-          });
-        } else if (Status === 'uninstalled') {
-          actionText = _jsxs("span", {
-            className: "newspack-plugin-installer__status",
-            children: [__('Install', 'newspack'), _jsx("span", {
-              className: "newspack-checkbox-icon"
-            })]
-          });
-        } else if (Status === 'inactive') {
-          actionText = _jsxs("span", {
-            className: "newspack-plugin-installer__status",
-            children: [__('Activate', 'newspack'), _jsx("span", {
-              className: "newspack-checkbox-icon"
-            })]
-          });
-        } else if (Status === 'active') {
-          actionText = _jsxs("span", {
-            className: "newspack-plugin-installer__status",
-            children: [__('Installed', 'newspack'), _jsx("span", {
-              className: "newspack-checkbox-icon newspack-checkbox-icon--checked",
-              children: _jsx(Icon, {
-                icon: check
-              })
-            })]
-          });
-        }
-        const classes = classnames('newspack-action-card__plugin-installer', this.classForInstallationStatus(installationStatus));
-        const onClick = isButton ? () => this.installPlugin(slug) : null;
-        return _jsx(ActionCard, {
-          title: Name,
-          description: Description,
-          disabled: !installable,
-          actionText: actionText,
-          isSmall: isSmall,
-          isWaiting: isWaiting,
-          onClick: onClick,
-          notification: notification,
-          notificationLevel: "error",
-          notificationHTML: true,
-          className: classes
-        }, slug);
-      }), !withoutFooterButton && !autoInstall && pluginInfo && slugs.length > 0 && _jsx("div", {
-        className: "newspack-buttons-card",
-        children: _jsx(Button, {
-          disabled: !needsInstall,
-          isPrimary: true,
-          onClick: this.installAllPlugins,
-          children: buttonText
-        })
-      })]
-    });
-  }
-}
-PluginInstaller.defaultProps = {
-  onStatus: () => {},
-  onInstalled: () => {}
-};
-export default PluginInstaller;

package/dist/esm/plugin-installer/style.scss

@@ -1,72 +0,0 @@
-/**
- * Plugin Installer
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-card {
-	.newspack-plugin-installer__status {
-		align-items: center;
-		display: flex;
-
-		.newspack-checkbox-icon {
-			margin-left: 4px;
-
-			svg {
-				height: inherit;
-				width: inherit;
-			}
-		}
-	}
-
-	&.newspack-plugin-installer__status-active,
-	&.newspack-plugin-installer__status-error,
-	&.newspack-plugin-installer__status-installing,
-	&.newspack-plugin-installer__status-none {
-		.newspack-action-card__region-top {
-			padding-left: 28px;
-		}
-
-		&.is-small {
-			.newspack-action-card__region-top {
-				padding-left: 20px;
-			}
-		}
-	}
-
-	&.newspack-plugin-installer__status-active {
-		box-shadow: inset 4px 0 0 wp-colors.$alert-green;
-
-		.newspack-plugin-installer__checkbox {
-			background: wp-colors.$alert-green;
-			box-shadow: none;
-		}
-
-		svg {
-			fill: white;
-		}
-	}
-
-	&.newspack-plugin-installer__status-error {
-		box-shadow: inset 4px 0 0 wp-colors.$alert-red;
-	}
-
-	&.newspack-plugin-installer__status-installing,
-	&.newspack-plugin-installer__status-none {
-		box-shadow: inset 4px 0 0 wp-colors.$gray-100;
-	}
-
-	// Is Small
-	&.is-small {
-		.newspack-plugin-installer__status {
-			.newspack-checkbox-icon {
-				height: 16px;
-				width: 16px;
-			}
-		}
-	}
-}
-
-.newspack-plugin-installer_is-waiting {
-	display: flex;
-}

package/dist/esm/plugin-settings/SettingsSection.js

@@ -1,136 +0,0 @@
-/**
- * Ads Settings Section.
- */
-
-/**
- * WordPress dependencies
- */
-import { Fragment, useState } from '@wordpress/element';
-import { applyFilters } from '@wordpress/hooks';
-import { __ as alias__ } from '@wordpress/i18n';
-const __ = alias__;
-import { CheckboxControl } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { ActionCard, Button, Grid, Notice, SelectControl, TextControl } from '../';
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const isSelectControl = setting => {
-  return Array.isArray(setting.options) && setting.options.length;
-};
-const getControlComponent = setting => {
-  if (isSelectControl(setting)) {
-    return SelectControl;
-  }
-  switch (setting.type) {
-    case 'checkbox':
-    case 'boolean':
-      return CheckboxControl;
-    default:
-      return TextControl;
-  }
-};
-const getControlType = setting => {
-  switch (setting.type) {
-    case 'int':
-    case 'integer':
-    case 'float':
-    case 'number':
-      return 'number';
-    case 'string':
-    case 'text':
-      return 'text';
-    case 'password':
-      return 'password';
-    case 'boolean':
-    case 'checkbox':
-      return 'checkbox';
-    default:
-      return null;
-  }
-};
-const SettingsSection = props => {
-  const [saveDisabled, setSaveDisabled] = useState(true);
-  const {
-    error,
-    sectionKey,
-    active,
-    title,
-    description,
-    fields,
-    disabled,
-    onChange,
-    onUpdate
-  } = props;
-  const getControlProps = setting => ({
-    disabled,
-    name: `${setting.section}_${setting.key}`,
-    type: getControlType(setting),
-    label: setting.description,
-    help: setting.help || null,
-    options: setting.options?.map(option => ({
-      value: option.value,
-      label: option.name || option.label
-    })) || null,
-    value: setting.value,
-    multiple: isSelectControl(setting) && setting.multiple ? true : null,
-    checked: setting.type === 'boolean' ? !!setting.value : null,
-    onChange: value => {
-      onChange(setting.key, value);
-      setSaveDisabled(false);
-    }
-  });
-  const createFilter = function (name) {
-    let defaultComponent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return applyFilters(`newspack.settingSection.${sectionKey}.${name}`, defaultComponent, props);
-  };
-  let columns = 2;
-  if (fields.length % 3 === 0) {
-    columns = 3;
-  } else if (fields.length === 1) {
-    columns = 1;
-  }
-  return _jsx(ActionCard, {
-    isMedium: true,
-    disabled: disabled,
-    title: title,
-    description: description,
-    toggleChecked: active,
-    hasGreyHeader: active || null === active,
-    toggleOnChange: active !== null ? value => onUpdate({
-      active: value
-    }) : null,
-    actionContent: (active || null === active) && createFilter('buttons', _jsx(Button, {
-      variant: "primary",
-      disabled: disabled || saveDisabled,
-      onClick: () => {
-        onUpdate();
-        setSaveDisabled(true);
-      },
-      children: __('Save Settings', 'newspack')
-    })),
-    children: (active || active === null) && _jsxs(Fragment, {
-      children: [error?.message && _jsx(Notice, {
-        noticeText: error.message,
-        isError: true
-      }), createFilter('beforeControls'), _jsx(Grid, {
-        columns: columns,
-        gutter: 32,
-        children: fields.map(setting => {
-          const Control = getControlComponent(setting); // eslint-disable-line @wordpress/no-unused-vars-before-return, no-unused-vars
-          return applyFilters(`newspack.settingsSection.${sectionKey}.control`, _jsx(Control, {
-            ...getControlProps(setting)
-          }, setting.key), {
-            sectionKey,
-            setting,
-            onChange
-          });
-        })
-      })]
-    })
-  });
-};
-export default SettingsSection;