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

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

@@ -0,0 +1,133 @@
+/**
+ * Ads Settings Section.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment, useState } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { ActionCard, Button, Grid, Notice, SelectControl, TextControl } from '../';
+import './style.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "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 = (name, defaultComponent = 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 /*#__PURE__*/_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', /*#__PURE__*/_jsx(Button, {
+      variant: "primary",
+      disabled: disabled || saveDisabled,
+      onClick: () => {
+        onUpdate();
+        setSaveDisabled(true);
+      },
+      children: __('Save Settings', 'newspack')
+    })),
+    children: (active || active === null) && /*#__PURE__*/_jsxs(Fragment, {
+      children: [error?.message && /*#__PURE__*/_jsx(Notice, {
+        noticeText: error.message,
+        isError: true
+      }), createFilter('beforeControls'), /*#__PURE__*/_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`, /*#__PURE__*/_jsx(Control, {
+            ...getControlProps(setting)
+          }, setting.key), {
+            sectionKey,
+            setting,
+            onChange
+          });
+        })
+      })]
+    })
+  });
+};
+export default SettingsSection;

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

@@ -0,0 +1,220 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies.
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Component, Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import { SectionHeader, Notice } from '../';
+import SettingsSection from './SettingsSection';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+class PluginSettings extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      inFlight: false,
+      settings: {},
+      error: null
+    };
+  }
+  fetchSettings = () => {
+    const {
+      afterFetch,
+      pluginSlug,
+      isWizard
+    } = this.props;
+    this.setState({
+      inFlight: true
+    });
+    apiFetch({
+      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
+      });
+    });
+  };
+  componentDidMount() {
+    this.fetchSettings();
+  }
+  getSettingsValues = sectionKey => {
+    return this.state.settings[sectionKey]?.reduce((map, setting) => {
+      map[setting.key] = setting.value;
+      return map;
+    }, {}) || {};
+  };
+  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
+      }
+    });
+  };
+  handleSectionUpdate = sectionKey => data => {
+    const {
+      afterUpdate,
+      pluginSlug,
+      isWizard
+    } = this.props;
+    this.setState({
+      inFlight: true
+    });
+    apiFetch({
+      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.
+   */
+  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.
+   */
+  getSectionTitle = sectionKey => {
+    return this.getSectionInfo(sectionKey)?.description;
+  };
+
+  /**
+   * Get the section description.
+   *
+   * @param {string} sectionKey The section name.
+   * @return {string} The section description.
+   */
+  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.
+   */
+  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.
+   */
+  getSectionFields = sectionKey => {
+    return this.state.settings[sectionKey]?.filter(setting => setting.key && setting.key !== 'active');
+  };
+
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      title,
+      description,
+      hasGreyHeader,
+      children
+    } = this.props;
+    const {
+      settings,
+      inFlight,
+      error
+    } = this.state;
+    return /*#__PURE__*/_jsxs(Fragment, {
+      children: [title && /*#__PURE__*/_jsx(SectionHeader, {
+        title: title,
+        description: description
+      }), error && /*#__PURE__*/_jsx(Notice, {
+        isError: true,
+        noticeText: error.message
+      }), /*#__PURE__*/_jsxs("div", {
+        className: classnames('newspack-plugin-settings', {
+          'newspack-wizard-section__is-loading': inFlight && !Object.keys(settings).length
+        }),
+        children: [Object.keys(settings).map(sectionKey => /*#__PURE__*/_jsx(SettingsSection, {
+          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;
+export default PluginSettings;

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

@@ -0,0 +1,7 @@
+.newspack-card:not(.newspack-settings__no-border) {
+	.newspack-action-card__region-children {
+		> .newspack-grid {
+			margin: 32px 0 0 !important;
+		}
+	}
+}

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

@@ -0,0 +1,216 @@
+/**
+ * WordPress dependencies.
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Component, Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import { ActionCard, Waiting } from '../';
+import './style.scss';
+
+/**
+ * Plugin toggle group component.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+class PluginToggle extends Component {
+  state = {
+    pluginInfo: {}
+  };
+  componentDidMount = () => {
+    this.retrievePluginInfo();
+  };
+
+  /**
+   * Retrieve complete data about Newspack plugins.
+   */
+  retrievePluginInfo = () => {
+    return new Promise(() => {
+      apiFetch({
+        path: '/newspack/v1/plugins/'
+      }).then(pluginInfo => this.setState({
+        pluginInfo
+      }));
+    });
+  };
+
+  /**
+   * Install/activate or remove a plugin.
+   */
+  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
+        }
+      }
+    }, () => {
+      apiFetch(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')
+            }
+          }
+        });
+      });
+    });
+  };
+
+  /**
+   * 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 /*#__PURE__*/_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);
+    });
+  }
+
+  /**
+   * Prepare plugins data for render. Change all keys to camelCase, merge API-fetched data with prop.
+   */
+  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.
+   */
+  classNameForPlugin = plugin => {
+    const {
+      status,
+      inFlight
+    } = plugin;
+    if (inFlight) {
+      return 'in-flight';
+    }
+    if (!status) {
+      return 'loading';
+    }
+  };
+
+  /**
+   * Generate the ActionCard action text for a plugin.
+   */
+  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 /*#__PURE__*/_jsxs(Fragment, {
+        children: [__('Installing…', 'newspack-plugin'), " ", /*#__PURE__*/_jsx(Waiting, {
+          isRight: true
+        })]
+      });
+    }
+    if ('deactivate' === inFlight) {
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [__('Deactivating…', 'newspack-plugin'), " ", /*#__PURE__*/_jsx(Waiting, {
+          isRight: true
+        })]
+      });
+    }
+    if (!name) {
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [__('Loading…', 'newspack-plugin'), " ", /*#__PURE__*/_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.
+   */
+  errorForPlugin = plugin => {
+    const {
+      slug
+    } = plugin;
+    const {
+      pluginInfo
+    } = this.state;
+    return pluginInfo[slug]?.error || null;
+  };
+
+  /**
+   * Get installation/activation status for a plugin.
+   */
+  isPluginInstalledAndActive = plugin => {
+    const {
+      status
+    } = plugin;
+    return status === 'active';
+  };
+}
+export default PluginToggle;

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

@@ -0,0 +1,20 @@
+/**
+ * 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/esm/popover/index.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { Popover as BaseComponent } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Popover
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+class Popover extends Component {
+  /**
+   * Render
+   */
+  render() {
+    const {
+      className,
+      padding,
+      ...otherProps
+    } = this.props;
+    const classes = classnames('newspack-popover', padding && 'newspack-popover__padding-' + padding, className);
+    return /*#__PURE__*/_jsx(BaseComponent, {
+      className: classes,
+      ...otherProps
+    });
+  }
+}
+Popover.defaultProps = {
+  padding: false
+};
+export default Popover;