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

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/index.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import usePrompt from './usePrompt';
+import useObjectState from './useObjectState';
+import useOnClickOutside from './useOnClickOutside';
+const useUniqueId = prefix => {
+  const id = useRef(`${prefix}-${Math.round(Math.random() * 99999)}`);
+  return id.current;
+};
+export default {
+  usePrompt,
+  useObjectState,
+  useOnClickOutside,
+  useUniqueId
+};

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/hooks/usePrompt.js

@@ -0,0 +1,40 @@
+// https://gist.github.com/sibelius/60a4e11da1f826b8d60dc3975a1ac805
+
+/**
+ * External dependencies.
+ */
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import Router from '../proxied-imports/router';
+const {
+  useHistory
+} = Router;
+export default ((when, message) => {
+  const history = useHistory();
+  const self = useRef(null);
+  const onWindowOrTabClose = event => {
+    if (!when) {
+      return;
+    }
+    if (typeof event === 'undefined') {
+      event = window.event;
+    }
+    return message;
+  };
+  useEffect(() => {
+    if (when) {
+      self.current = history.block(message);
+      window.addEventListener('beforeunload', onWindowOrTabClose);
+    }
+    return () => {
+      if (self.current) {
+        self.current();
+      }
+      window.removeEventListener('beforeunload', onWindowOrTabClose);
+    };
+  }, [message, when]);
+  return self.current || (() => {});
+});