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

package/dist/esm/grid/style.scss

@@ -0,0 +1,166 @@
+/**
+ * Grid
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-grid {
+	display: grid;
+	grid-gap: 32px;
+	grid-auto-rows: min-content;
+	grid-template-columns: 1fr;
+	margin: 32px 0;
+
+	// No Margin
+	&--no-margin {
+		margin: 0;
+	}
+
+	// Gutter 0
+	&__gutter-0 {
+		grid-gap: 0;
+	}
+
+	// Gutter 8
+	&__gutter-8 {
+		grid-gap: 8px;
+	}
+
+	// Gutter 16
+	&__gutter-16 {
+		grid-gap: 16px;
+	}
+
+	// Gutter 24
+	&__gutter-24 {
+		grid-gap: 24px;
+	}
+
+	// Gutter 32
+	&__gutter-32 {
+		grid-gap: 32px;
+	}
+
+	// Row Gap 0
+	&__row-gap-0 {
+		grid-row-gap: 0;
+	}
+
+	// Row Gap 8
+	&__row-gap-8 {
+		grid-row-gap: 8px;
+	}
+
+	// Row Gap 16
+	&__row-gap-16 {
+		grid-row-gap: 16px;
+	}
+
+	// Row Gap 32
+	&__row-gap-32 {
+		grid-row-gap: 32px;
+	}
+
+	// Gutter 64
+	&__gutter-64 {
+		grid-gap: 64px;
+	}
+
+	// Columns 6
+	&__columns-6 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	// Media Queries - 744px
+	@media screen and ( min-width: 744px ) {
+		&__columns-2,
+		&__columns-3,
+		&__columns-4 {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		&__columns-6 {
+			grid-template-columns: repeat(3, 1fr);
+		}
+	}
+
+	// Media Queries - 1128px
+	@media screen and ( min-width: 1128px ) {
+		// Columns 3
+		&__columns-3 {
+			grid-template-columns: repeat(3, 1fr);
+		}
+
+		// Columns 4
+		&__columns-4 {
+			grid-template-columns: repeat(4, 1fr);
+		}
+
+		// Columns 6
+		&__columns-6 {
+			grid-template-columns: repeat(6, 1fr);
+		}
+
+		// Gutter 48
+		&__gutter-48 {
+			grid-gap: 48px;
+		}
+
+		// Gutter 64
+		&__gutter-64 {
+			grid-gap: 64px;
+		}
+	}
+
+	// Children
+	> * {
+		margin-bottom: 0 !important;
+		margin-top: 0 !important;
+	}
+
+	.components-base-control {
+		&__field,
+		&__help {
+			margin-bottom: 0;
+		}
+	}
+
+	.components-form-token-field {
+		&__input-container {
+			margin-bottom: 0;
+		}
+	}
+
+	// Cards
+	> .newspack-card {
+		> *:first-child {
+			margin-top: 0 !important;
+		}
+
+		> *:last-child {
+			margin-bottom: 0 !important;
+		}
+	}
+
+	// Table-like
+	&__thead {
+		background: rgba(black, 0.025);
+		border-bottom: 1px solid wp-colors.$gray-300;
+		border-top: 1px solid wp-colors.$gray-300;
+		color: wp-colors.$gray-900;
+
+		> *:not(.screen-reader-text) {
+			padding: 8px;
+		}
+	}
+
+	&__tbody {
+		border-bottom: 1px solid wp-colors.$gray-300;
+		padding: 8px 0;
+	}
+
+	&__thead + &__tbody,
+	&__tbody + &__tbody {
+		margin-top: -32px;
+	}
+}

package/dist/esm/handoff/index.js

@@ -0,0 +1,175 @@
+/**
+ * Handoff
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Component, Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import { Button, Card, Modal, Waiting } from '../';
+
+/**
+ * External dependencies.
+ */
+import assign from 'lodash/assign';
+import classnames from 'classnames';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+class Handoff extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      pluginInfo: [],
+      showModal: false
+    };
+  }
+  componentDidMount = () => {
+    this._isMounted = true;
+    const {
+      plugin
+    } = this.props;
+    this.retrievePluginInfo(plugin);
+  };
+  componentWillUnmount = () => {
+    this._isMounted = false;
+  };
+  retrievePluginInfo = plugin => {
+    const {
+      onReady
+    } = this.props;
+    apiFetch({
+      path: '/newspack/v1/plugins/' + plugin
+    }).then(pluginInfo => {
+      if (this._isMounted) {
+        onReady(pluginInfo);
+        this.setState({
+          pluginInfo
+        });
+      }
+    });
+  };
+  textForPlugin = pluginInfo => {
+    const defaults = {
+      modalBody: null,
+      modalTitle: pluginInfo.Name && `${__('Manage', 'newspack-plugin')} ${pluginInfo.Name}`,
+      primaryButton: pluginInfo.Name && `${__('Manage', 'newspack-plugin')} ${pluginInfo.Name}`,
+      primaryModalButton: __('Manage', 'newspack-plugin'),
+      dismissModalButton: __('Dismiss', 'newspack-plugin')
+    };
+    return assign(defaults, this.props);
+  };
+  goToPlugin = plugin => {
+    const {
+      editLink,
+      showOnBlockEditor
+    } = this.props;
+    apiFetch({
+      path: '/newspack/v1/plugins/' + plugin + '/handoff',
+      method: 'POST',
+      data: {
+        editLink,
+        handoffReturnUrl: window && window.location.href,
+        showOnBlockEditor: showOnBlockEditor ? true : false
+      }
+    }).then(response => {
+      window.location.href = response.HandoffLink;
+    });
+  };
+
+  /**
+   * Render.
+   */
+  render() {
+    const {
+      className,
+      children,
+      compact,
+      useModal,
+      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
+      modalTitle: _modalTitle,
+      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
+      modalBody: _modalBody,
+      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
+      onReady,
+      // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
+      editLink,
+      ...otherProps
+    } = this.props;
+    const {
+      pluginInfo,
+      showModal
+    } = this.state;
+    const {
+      modalBody,
+      modalTitle,
+      primaryButton,
+      primaryModalButton,
+      dismissModalButton
+    } = this.textForPlugin(pluginInfo);
+    const {
+      Configured,
+      Name,
+      Slug,
+      Status
+    } = pluginInfo;
+    const classes = classnames(Configured && 'is-configured', className);
+    return /*#__PURE__*/_jsxs(Fragment, {
+      children: [Name && 'active' === Status && /*#__PURE__*/_jsx(Button, {
+        className: classes,
+        isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink,
+        ...otherProps,
+        onClick: () => useModal ? this.setState({
+          showModal: true
+        }) : this.goToPlugin(Slug),
+        children: children ? children : primaryButton
+      }), Name && 'active' !== Status && /*#__PURE__*/_jsx(Button, {
+        className: classes,
+        variant: "secondary",
+        disabled: true,
+        ...otherProps,
+        children: Name + __(' not installed', 'newspack-plugin')
+      }), !Name && /*#__PURE__*/_jsx(Button, {
+        className: classes,
+        isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink,
+        ...otherProps,
+        children: /*#__PURE__*/_jsxs(Fragment, {
+          children: [!compact && /*#__PURE__*/_jsx(Waiting, {
+            isLeft: true
+          }), __('Retrieving Plugin Info', 'newspack-plugin')]
+        })
+      }), showModal && /*#__PURE__*/_jsxs(Modal, {
+        title: modalTitle,
+        onRequestClose: () => this.setState({
+          showModal: false
+        }),
+        children: [/*#__PURE__*/_jsx("p", {
+          children: modalBody
+        }), /*#__PURE__*/_jsxs(Card, {
+          buttonsCard: true,
+          noBorder: true,
+          className: "justify-end",
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "secondary",
+            onClick: () => this.setState({
+              showModal: false
+            }),
+            children: dismissModalButton
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "primary",
+            onClick: () => this.goToPlugin(Slug),
+            children: primaryModalButton
+          })]
+        })]
+      })]
+    });
+  }
+}
+Handoff.defaultProps = {
+  onReady: () => {}
+};
+export default Handoff;

package/dist/esm/handoff-message/index.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies.
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import { HANDOFF_KEY } from '../consts';
+import { Notice } from '../';
+
+/**
+ * Handoff Message Component.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function HandoffMessage() {
+  const [handoffMessage, setHandoffMessage] = useState(false);
+  useEffect(() => {
+    // Slight delay to allow for localStorage to be updated by RAS component.
+    setTimeout(() => {
+      const handoff = JSON.parse(localStorage.getItem(HANDOFF_KEY));
+      if (handoff?.message) {
+        setHandoffMessage(handoff.message);
+      } else {
+        setHandoffMessage(false);
+      }
+
+      // Clean up the notification if navigating away from the relevant page.
+      if (handoff?.url && -1 === window.location.href.indexOf(handoff.url)) {
+        window.localStorage.removeItem(HANDOFF_KEY);
+        setHandoffMessage(false);
+      }
+    }, 100);
+
+    // Clean up the notification when unmounting.
+    return () => window.localStorage.removeItem(HANDOFF_KEY);
+  }, []);
+  if (!handoffMessage) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Notice, {
+    isHandoff: true,
+    isDismissible: false,
+    rawHTML: true,
+    noticeText: handoffMessage
+  });
+}

package/dist/esm/hooks/useObjectState.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import isArray from 'lodash/isArray';
+import mergeWith from 'lodash/mergeWith';
+const mergeCustomizer = (objValue, srcValue) => {
+  if (isArray(objValue)) {
+    // If it's an array, replace it (instead of concatenating).
+    return srcValue;
+  }
+};
+
+/**
+ * A useState for an object.
+ * Nested objects will be nested, but arrays replaced.
+ */
+export default ((initial = {}) => {
+  const [stateObject, setStateObject] = useState(initial);
+  const runUpdate = update => setStateObject(_stateObject => mergeWith({}, _stateObject, update, mergeCustomizer));
+  const updateStateObject = keyOrUpdate => {
+    if (typeof keyOrUpdate === 'string') {
+      return value => runUpdate({
+        [keyOrUpdate]: value
+      });
+    }
+    runUpdate(keyOrUpdate);
+  };
+  return [stateObject, updateStateObject];
+});

package/dist/esm/hooks/useObjectState.test.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import useObjectState from './useObjectState';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const INIT_STATE = {
+  name: 'Foo',
+  widgets: [1],
+  attributes: {
+    bar: 0,
+    baz: 1
+  }
+};
+const TestComponent = () => {
+  const [state, updateState] = useObjectState(INIT_STATE);
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("input", {
+      placeholder: "state",
+      onChange: () => {},
+      value: JSON.stringify(state)
+    }), /*#__PURE__*/_jsx("button", {
+      onClick: () => updateState({
+        widgets: []
+      }),
+      children: "Remove widgets"
+    }), /*#__PURE__*/_jsx("button", {
+      onClick: () => updateState({
+        widgets: [1]
+      }),
+      children: "Add widget"
+    }), /*#__PURE__*/_jsx("button", {
+      onClick: () => updateState({
+        attributes: {
+          bar: 2
+        }
+      }),
+      children: "Nested update"
+    }), /*#__PURE__*/_jsx("input", {
+      type: "text",
+      value: state.name,
+      onChange: e => updateState({
+        name: e.target.value
+      }),
+      placeholder: "name"
+    })]
+  });
+};
+describe('useObjectState', () => {
+  const getState = () => JSON.parse(screen.getByPlaceholderText('state').getAttribute('value'));
+  beforeEach(() => {
+    render( /*#__PURE__*/_jsx(TestComponent, {}));
+  });
+  it('updates arrays', () => {
+    expect(getState()).toStrictEqual(INIT_STATE);
+    screen.getByText('Remove widgets').click();
+    expect(getState()).toMatchObject({
+      widgets: []
+    });
+    screen.getByText('Add widget').click();
+    expect(getState()).toMatchObject({
+      widgets: [1]
+    });
+  });
+  it('updates a simple value', () => {
+    fireEvent.change(screen.getByPlaceholderText('name'), {
+      target: {
+        value: 'Ramon'
+      }
+    });
+    expect(getState()).toMatchObject({
+      name: 'Ramon'
+    });
+  });
+  it('updates a nested object', () => {
+    screen.getByText('Nested update').click();
+    expect(getState()).toMatchObject({
+      attributes: {
+        bar: 2,
+        baz: 1
+      }
+    });
+  });
+});

package/dist/esm/hooks/useOnClickOutside.js

@@ -0,0 +1,31 @@
+// https://usehooks.com/useOnClickOutside/
+
+/**
+ * External dependencies.
+ */
+import { useEffect } from '@wordpress/element';
+const useOnClickOutside = (ref, handler) => {
+  useEffect(() => {
+    const listener = event => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  },
+  // Add ref and handler to effect dependencies
+  // It's worth noting that because passed in handler is a new ...
+  // ... function on every render that will cause this effect ...
+  // ... callback/cleanup to run every render. It's not a big deal ...
+  // ... but to optimize you can wrap handler in useCallback before ...
+  // ... passing it into this hook.
+  [ref, handler]);
+};
+export default useOnClickOutside;

package/dist/esm/image-upload/index.js

@@ -0,0 +1,140 @@
+/**
+ * Image Upload
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import { Button, InfoButton } from '../';
+import './style.scss';
+
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+class ImageUpload extends Component {
+  /**
+   * Constructor.
+   */
+  constructor() {
+    super(...arguments);
+    this.state = {
+      frame: false
+    };
+  }
+
+  /**
+   * Open the WP media modal.
+   */
+  openModal = () => {
+    if (this.state.frame) {
+      this.state.frame.open();
+      return;
+    }
+    this.setState({
+      frame: wp.media({
+        title: __('Select or upload image'),
+        button: {
+          text: __('Select')
+        },
+        library: {
+          type: 'image'
+        },
+        multiple: false
+      })
+    }, () => {
+      this.state.frame.on('select', this.handleImageSelect);
+      this.state.frame.open();
+    });
+  };
+
+  /**
+   * Update the state when an image is selected from the media modal.
+   */
+  handleImageSelect = () => {
+    const {
+      onChange
+    } = this.props;
+    const attachment = this.state.frame.state().get('selection').first().toJSON();
+    onChange(attachment);
+  };
+
+  /**
+   * Render.
+   */
+  render = () => {
+    const {
+      buttonLabel,
+      className,
+      disabled,
+      help,
+      image,
+      info,
+      isCovering,
+      label,
+      onChange,
+      style = {}
+    } = this.props;
+    const classes = classnames('newspack-image-upload__image', {
+      'newspack-image-upload__image--has-image': image
+    }, {
+      'newspack-image-upload__image--covering': isCovering
+    });
+    return /*#__PURE__*/_jsxs("div", {
+      className: classnames('newspack-image-upload', className),
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "newspack-image-upload__header",
+        children: [label && /*#__PURE__*/_jsx("label", {
+          className: "newspack-image-upload__label",
+          children: label
+        }), info && /*#__PURE__*/_jsx(InfoButton, {
+          text: info
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: classes,
+        style: {
+          ...style
+        },
+        children: image?.url ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("img", {
+            "data-testid": "image-upload",
+            src: image.url,
+            alt: __('Image preview', 'newspack-plugin')
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "newspack-image-upload__controls",
+            children: [/*#__PURE__*/_jsx(Button, {
+              disabled: disabled,
+              onClick: this.openModal,
+              isLink: true,
+              children: __('Replace', 'newspack-plugin')
+            }), /*#__PURE__*/_jsx("span", {
+              className: "sep"
+            }), /*#__PURE__*/_jsx(Button, {
+              disabled: disabled,
+              onClick: () => onChange(null),
+              isLink: true,
+              isDestructive: true,
+              children: __('Remove', 'newspack-plugin')
+            })]
+          })]
+        }) : /*#__PURE__*/_jsx(Button, {
+          disabled: disabled,
+          onClick: this.openModal,
+          isLink: true,
+          children: buttonLabel ? buttonLabel : __('Upload', 'newspack-plugin')
+        })
+      }), help && /*#__PURE__*/_jsx("p", {
+        className: "newspack-image-upload__help",
+        children: help
+      })]
+    });
+  };
+}
+export default ImageUpload;

package/dist/esm/image-upload/index.test.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import ImageUpload from './';
+import { jsx as _jsx } from "react/jsx-runtime";
+describe('ImageUpload', () => {
+  it('should render an add image button', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/_jsx(ImageUpload, {}));
+    expect(getByText('Upload')).toBeInTheDocument();
+  });
+  it('should render replace and remove buttons if there is an image provided', () => {
+    const image = {
+      id: 1234,
+      url: 'https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg'
+    };
+    const {
+      getByText,
+      getByTestId
+    } = render( /*#__PURE__*/_jsx(ImageUpload, {
+      image: image
+    }));
+    expect(getByText('Remove')).toBeInTheDocument();
+    expect(getByText('Replace')).toBeInTheDocument();
+    expect(getByTestId('image-upload')).toBeInTheDocument();
+    expect(getByTestId('image-upload').getAttribute('src')).toEqual(image.url);
+  });
+});