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

package/dist/{cjs/handoff → handoff}/index.js

@@ -1,91 +1,94 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 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("../");
 var _assign = _interopRequireDefault(require("lodash/assign"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Handoff
  */
+
 /**
  * WordPress dependencies.
  */
+
 /**
  * Internal dependencies.
  */
-const __ = _i18n.__;
+
 /**
  * External dependencies.
  */
+
 class Handoff extends _element.Component {
   constructor() {
     super(...arguments);
-    (0, _defineProperty2.default)(this, "componentDidMount", () => {
-      this._isMounted = true;
-      const {
-        plugin
-      } = this.props;
-      this.retrievePluginInfo(plugin);
-    });
-    (0, _defineProperty2.default)(this, "componentWillUnmount", () => {
-      this._isMounted = false;
-    });
-    (0, _defineProperty2.default)(this, "retrievePluginInfo", plugin => {
-      const {
-        onReady
-      } = this.props;
-      (0, _apiFetch.default)({
-        path: '/newspack/v1/plugins/' + plugin
-      }).then(pluginInfo => {
-        if (this._isMounted) {
-          onReady(pluginInfo);
-          this.setState({
-            pluginInfo
-          });
-        }
-      });
-    });
-    (0, _defineProperty2.default)(this, "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 (0, _assign.default)(defaults, this.props);
-    });
-    (0, _defineProperty2.default)(this, "goToPlugin", plugin => {
-      const {
-        editLink,
-        showOnBlockEditor
-      } = this.props;
-      (0, _apiFetch.default)({
-        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;
-      });
-    });
     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;
+    (0, _apiFetch.default)({
+      path: '/newspack/v1/plugins/' + plugin
+    }).then(pluginInfo => {
+      if (this._isMounted) {
+        onReady(pluginInfo);
+        this.setState({
+          pluginInfo
+        });
+      }
+    });
+  };
+  textForPlugin = pluginInfo => {
+    const defaults = {
+      modalBody: null,
+      modalTitle: pluginInfo.Name && `${(0, _i18n.__)('Manage', 'newspack-plugin')} ${pluginInfo.Name}`,
+      primaryButton: pluginInfo.Name && `${(0, _i18n.__)('Manage', 'newspack-plugin')} ${pluginInfo.Name}`,
+      primaryModalButton: (0, _i18n.__)('Manage', 'newspack-plugin'),
+      dismissModalButton: (0, _i18n.__)('Dismiss', 'newspack-plugin')
+    };
+    return (0, _assign.default)(defaults, this.props);
+  };
+  goToPlugin = plugin => {
+    const {
+      editLink,
+      showOnBlockEditor
+    } = this.props;
+    (0, _apiFetch.default)({
+      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.
    */
@@ -123,8 +126,8 @@ class Handoff extends _element.Component {
       Status
     } = pluginInfo;
     const classes = (0, _classnames.default)(Configured && 'is-configured', className);
-    return (0, _jsxRuntime.jsxs)(_element.Fragment, {
-      children: [Name && 'active' === Status && (0, _jsxRuntime.jsx)(_.Button, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+      children: [Name && 'active' === Status && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
         className: classes,
         isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink,
         ...otherProps,
@@ -132,39 +135,39 @@ class Handoff extends _element.Component {
           showModal: true
         }) : this.goToPlugin(Slug),
         children: children ? children : primaryButton
-      }), Name && 'active' !== Status && (0, _jsxRuntime.jsx)(_.Button, {
+      }), Name && 'active' !== Status && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
         className: classes,
         variant: "secondary",
         disabled: true,
         ...otherProps,
-        children: Name + __(' not installed', 'newspack-plugin')
-      }), !Name && (0, _jsxRuntime.jsx)(_.Button, {
+        children: Name + (0, _i18n.__)(' not installed', 'newspack-plugin')
+      }), !Name && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
         className: classes,
         isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink,
         ...otherProps,
-        children: (0, _jsxRuntime.jsxs)(_element.Fragment, {
-          children: [!compact && (0, _jsxRuntime.jsx)(_.Waiting, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+          children: [!compact && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Waiting, {
             isLeft: true
-          }), __('Retrieving Plugin Info', 'newspack-plugin')]
+          }), (0, _i18n.__)('Retrieving Plugin Info', 'newspack-plugin')]
         })
-      }), showModal && (0, _jsxRuntime.jsxs)(_.Modal, {
+      }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Modal, {
         title: modalTitle,
         onRequestClose: () => this.setState({
           showModal: false
         }),
-        children: [(0, _jsxRuntime.jsx)("p", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           children: modalBody
-        }), (0, _jsxRuntime.jsxs)(_.Card, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Card, {
           buttonsCard: true,
           noBorder: true,
           className: "justify-end",
-          children: [(0, _jsxRuntime.jsx)(_.Button, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
             variant: "secondary",
             onClick: () => this.setState({
               showModal: false
             }),
             children: dismissModalButton
-          }), (0, _jsxRuntime.jsx)(_.Button, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
             variant: "primary",
             onClick: () => this.goToPlugin(Slug),
             children: primaryModalButton

package/dist/{cjs/handoff-message → handoff-message}/index.js

@@ -7,7 +7,7 @@ exports.default = HandoffMessage;
 var _element = require("@wordpress/element");
 var _consts = require("../consts");
 var _ = require("../");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies.
  */
@@ -40,8 +40,10 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
     // Clean up the notification when unmounting.
     return () => window.localStorage.removeItem(_consts.HANDOFF_KEY);
   }, []);
-  if (!handoffMessage) return null;
-  return (0, _jsxRuntime.jsx)(_.Notice, {
+  if (!handoffMessage) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Notice, {
     isHandoff: true,
     isDismissible: false,
     rawHTML: true,

package/dist/hooks/index.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var _interopRequireDefault = require( '@babel/runtime/helpers/interopRequireDefault' );
+Object.defineProperty( exports, '__esModule', {
+	value: true,
+} );
+exports.default = void 0;
+var _element = require( '@wordpress/element' );
+var _usePrompt = _interopRequireDefault( require( './usePrompt' ) );
+var _useObjectState = _interopRequireDefault( require( './useObjectState' ) );
+var _useOnClickOutside = _interopRequireDefault(
+	require( './useOnClickOutside' )
+);
+/**
+ * WordPress dependencies
+ */
+
+const useUniqueId = ( prefix ) => {
+	const id = ( 0, _element.useRef )(
+		`${ prefix }-${ Math.round( Math.random() * 99999 ) }`
+	);
+	return id.current;
+};
+var _default = ( exports.default = {
+	usePrompt: _usePrompt.default,
+	useObjectState: _useObjectState.default,
+	useOnClickOutside: _useOnClickOutside.default,
+	useUniqueId,
+} );

package/dist/hooks/index.ts

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

package/dist/{cjs/hooks → hooks}/useObjectState.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/dist/{cjs/hooks → hooks}/useObjectState.test.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _useObjectState = _interopRequireDefault(require("./useObjectState"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
 const INIT_STATE = {
   name: 'Foo',
   widgets: [1],
@@ -15,29 +15,29 @@ const INIT_STATE = {
 };
 const TestComponent = () => {
   const [state, updateState] = (0, _useObjectState.default)(INIT_STATE);
-  return (0, _jsxRuntime.jsxs)("div", {
-    children: [(0, _jsxRuntime.jsx)("input", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       placeholder: "state",
       onChange: () => {},
       value: JSON.stringify(state)
-    }), (0, _jsxRuntime.jsx)("button", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
       onClick: () => updateState({
         widgets: []
       }),
       children: "Remove widgets"
-    }), (0, _jsxRuntime.jsx)("button", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
       onClick: () => updateState({
         widgets: [1]
       }),
       children: "Add widget"
-    }), (0, _jsxRuntime.jsx)("button", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
       onClick: () => updateState({
         attributes: {
           bar: 2
         }
       }),
       children: "Nested update"
-    }), (0, _jsxRuntime.jsx)("input", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "text",
       value: state.name,
       onChange: e => updateState({
@@ -50,7 +50,7 @@ const TestComponent = () => {
 describe('useObjectState', () => {
   const getState = () => JSON.parse(_react2.screen.getByPlaceholderText('state').getAttribute('value'));
   beforeEach(() => {
-    (0, _react2.render)((0, _jsxRuntime.jsx)(TestComponent, {}));
+    (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(TestComponent, {}));
   });
   it('updates arrays', () => {
     expect(getState()).toStrictEqual(INIT_STATE);

package/dist/hooks/usePrompt.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var _interopRequireDefault = require( '@babel/runtime/helpers/interopRequireDefault' );
+Object.defineProperty( exports, '__esModule', {
+	value: true,
+} );
+exports.default = void 0;
+var _element = require( '@wordpress/element' );
+var _router = _interopRequireDefault( require( '../proxied-imports/router' ) );
+// https://gist.github.com/sibelius/60a4e11da1f826b8d60dc3975a1ac805
+
+/**
+ * External dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+const { useHistory } = _router.default;
+var _default = ( when, message ) => {
+	const history = useHistory();
+	const self = ( 0, _element.useRef )( null );
+	const onWindowOrTabClose = ( event ) => {
+		if ( ! when ) {
+			return;
+		}
+		if ( typeof event === 'undefined' ) {
+			event = window.event;
+		}
+		return message;
+	};
+	( 0, _element.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 || ( () => {} );
+};
+exports.default = _default;

package/dist/hooks/usePrompt.ts

@@ -0,0 +1,46 @@
+// 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: boolean, message: string ): ( () => void ) => {
+	const history = useHistory();
+	const self = useRef( null );
+
+	const onWindowOrTabClose = ( event: Event | undefined ) => {
+		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 as () => void )();
+			}
+			window.removeEventListener( 'beforeunload', onWindowOrTabClose );
+		};
+	}, [ message, when ] );
+
+	return self.current || ( () => {} );
+};

package/dist/image-upload/index.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _ = require("../");
+require("./style.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Image Upload
+ */
+
+/**
+ * WordPress dependencies.
+ */
+
+/**
+ * Internal dependencies.
+ */
+
+/**
+ * External dependencies.
+ */
+
+class ImageUpload extends _element.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: (0, _i18n.__)('Select or upload image'),
+        button: {
+          text: (0, _i18n.__)('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 = (0, _classnames.default)('newspack-image-upload__image', {
+      'newspack-image-upload__image--has-image': image
+    }, {
+      'newspack-image-upload__image--covering': isCovering
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)('newspack-image-upload', className),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "newspack-image-upload__header",
+        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          className: "newspack-image-upload__label",
+          children: label
+        }), info && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InfoButton, {
+          text: info
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes,
+        style: {
+          ...style
+        },
+        children: image?.url ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            "data-testid": "image-upload",
+            src: image.url,
+            alt: (0, _i18n.__)('Image preview', 'newspack-plugin')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "newspack-image-upload__controls",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+              disabled: disabled,
+              onClick: this.openModal,
+              isLink: true,
+              children: (0, _i18n.__)('Replace', 'newspack-plugin')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "sep"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+              disabled: disabled,
+              onClick: () => onChange(null),
+              isLink: true,
+              isDestructive: true,
+              children: (0, _i18n.__)('Remove', 'newspack-plugin')
+            })]
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Button, {
+          disabled: disabled,
+          onClick: this.openModal,
+          isLink: true,
+          children: buttonLabel ? buttonLabel : (0, _i18n.__)('Upload', 'newspack-plugin')
+        })
+      }), help && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "newspack-image-upload__help",
+        children: help
+      })]
+    });
+  };
+}
+var _default = exports.default = ImageUpload;

package/dist/{cjs/image-upload → image-upload}/index.test.js

@@ -1,15 +1,22 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = require("@testing-library/react");
 var _ = _interopRequireDefault(require("./"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
 describe('ImageUpload', () => {
   it('should render an add image button', () => {
     const {
       getByText
-    } = (0, _react2.render)((0, _jsxRuntime.jsx)(_.default, {}));
+    } = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {}));
     expect(getByText('Upload')).toBeInTheDocument();
   });
   it('should render replace and remove buttons if there is an image provided', () => {
@@ -20,7 +27,7 @@ describe('ImageUpload', () => {
     const {
       getByText,
       getByTestId
-    } = (0, _react2.render)((0, _jsxRuntime.jsx)(_.default, {
+    } = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       image: image
     }));
     expect(getByText('Remove')).toBeInTheDocument();

package/dist/{cjs/image-upload → image-upload}/style.scss

@@ -2,7 +2,7 @@
  * Image Upload
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-image-upload {
 	margin: 32px 0;
@@ -27,7 +27,7 @@
 		&--covering {
 			background-size: cover;
 		}
-		&:not( &--has-image ) {
+		&:not(&--has-image) {
 			.newspack-button {
 				background: white !important;
 				border-radius: 2px !important;
@@ -49,9 +49,9 @@
 			overflow: hidden;
 			&::before,
 			&::after {
-				border: 1px solid rgba( black, 0.54 );
+				border: 1px solid rgba(black, 0.54);
 				border-radius: 2px;
-				content: '';
+				content: "";
 				inset: 0;
 				position: absolute;
 				z-index: 0;
@@ -66,7 +66,7 @@
 				position: relative;
 			}
 			&::after {
-				background: rgba( white, 0.9 );
+				background: rgba(white, 0.9);
 				border-color: wp-colors.$gray-700;
 			}
 			&:focus-within,