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

package/dist/esm/footer/style.scss

@@ -1,82 +0,0 @@
-/**
- * Footer
- */
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-footer {
-	align-items: stretch;
-	background: white;
-	border: 0 solid wp-colors.$gray-300;
-	border-width: 1px 0;
-	bottom: 0;
-	color: wp-colors.$gray-700;
-	display: flex;
-	flex-wrap: wrap;
-	font-size: 12px;
-	justify-content: space-between;
-	left: 0;
-	line-height: 16px;
-	position: absolute;
-	right: 0;
-
-	@media screen and ( min-width: 783px ) {
-		bottom: 40px;
-		flex-wrap: nowrap;
-	}
-
-	&__inner {
-		align-items: center;
-		display: flex;
-		flex: 0 0 100%;
-
-		@media screen and ( min-width: 783px ) {
-			flex: 1 1 auto;
-		}
-	}
-
-	ul {
-		display: flex;
-		flex-wrap: wrap;
-		margin: 0;
-		padding: 7px 8px;
-	}
-
-	li {
-		margin: 8px;
-
-		a {
-			align-items: flex-end;
-			color: inherit;
-			display: flex;
-
-			&:active,
-			&:focus,
-			&:hover {
-				color: wp-colors.$gray-900;
-			}
-		}
-	}
-
-	&__logo {
-		align-items: center;
-		background: wp-colors.$gray-900;
-		display: flex;
-		margin: 0 0 -1px;
-		padding: 16px;
-		width: 100%;
-
-		@media screen and ( min-width: 783px ) {
-			margin: -1px 0 -1px 8px;
-			max-width: 33.33%;
-			width: auto;
-		}
-
-		.patrons-logo {
-			display: block;
-			fill: white;
-			max-height: 16px;
-			width: auto;
-		}
-	}
-}

package/dist/esm/form-token-field/index.js

@@ -1,49 +0,0 @@
-/**
- * Form Token Field
- */
-
-/**
- * WordPress dependencies.
- */
-import { FormTokenField as BaseComponent } from '@wordpress/components';
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies.
- */
-import './style.scss';
-
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-class FormTokenField extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      description,
-      hideHelpFromVision,
-      hideLabelFromVision,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-form-token-field__input-container', className);
-    return _jsxs("div", {
-      className: classnames({
-        'newspack-form-token-field--label-hidden': hideLabelFromVision,
-        'newspack-form-token-field--help-hidden': hideHelpFromVision
-      }, 'newspack-form-token-field'),
-      children: [_jsx(BaseComponent, {
-        className: classes,
-        ...otherProps
-      }), description && _jsx("p", {
-        className: "newspack-form-token-field__help",
-        children: description
-      })]
-    });
-  }
-}
-export default FormTokenField;

package/dist/esm/global-notices/index.js

@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { parse } from 'qs';
-
-/**
- * Internal dependencies
- */
-import { Notice } from '../';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const GlobalNotices = () => {
-  const notice = parse(window.location.search)['newspack-notice'];
-  if (!notice) {
-    return null;
-  }
-  return notice.split(',').map((text, i) => {
-    if (text.indexOf('_error_') === 0) {
-      return _jsx(Notice, {
-        isError: true,
-        noticeText: text.replace('_error_', ''),
-        rawHTML: true
-      }, i);
-    }
-    return _jsx(Notice, {
-      isSuccess: true,
-      noticeText: text
-    }, i);
-  });
-};
-export default GlobalNotices;

package/dist/esm/grid/index.js

@@ -1,29 +0,0 @@
-/**
- * Grid
- */
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const Grid = ({
-  className = '',
-  columns = 2,
-  gutter = 32,
-  noMargin = false,
-  rowGap = 0,
-  ...otherProps
-}) => {
-  const classes = classnames('newspack-grid', noMargin && 'newspack-grid--no-margin', columns && 'newspack-grid__columns-' + columns, gutter && 'newspack-grid__gutter-' + gutter, rowGap && 'newspack-grid__row-gap-' + rowGap, className);
-  return _jsx("div", {
-    className: classes,
-    ...otherProps
-  });
-};
-export default Grid;

package/dist/esm/handoff/index.js

@@ -1,176 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * Handoff
- */
-
-/**
- * WordPress dependencies.
- */
-import apiFetch from '@wordpress/api-fetch';
-import { Component, Fragment } from '@wordpress/element';
-import { __ as alias__ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies.
- */
-const __ = alias__;
-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 "@emotion/react/jsx-runtime";
-class Handoff extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "componentDidMount", () => {
-      this._isMounted = true;
-      const {
-        plugin
-      } = this.props;
-      this.retrievePluginInfo(plugin);
-    });
-    _defineProperty(this, "componentWillUnmount", () => {
-      this._isMounted = false;
-    });
-    _defineProperty(this, "retrievePluginInfo", plugin => {
-      const {
-        onReady
-      } = this.props;
-      apiFetch({
-        path: '/newspack/v1/plugins/' + plugin
-      }).then(pluginInfo => {
-        if (this._isMounted) {
-          onReady(pluginInfo);
-          this.setState({
-            pluginInfo
-          });
-        }
-      });
-    });
-    _defineProperty(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 assign(defaults, this.props);
-    });
-    _defineProperty(this, "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;
-      });
-    });
-    this.state = {
-      pluginInfo: [],
-      showModal: false
-    };
-  }
-  /**
-   * 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 _jsxs(Fragment, {
-      children: [Name && 'active' === Status && _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 && _jsx(Button, {
-        className: classes,
-        variant: "secondary",
-        disabled: true,
-        ...otherProps,
-        children: Name + __(' not installed', 'newspack-plugin')
-      }), !Name && _jsx(Button, {
-        className: classes,
-        isSecondary: !otherProps.isPrimary && !otherProps.isTertiary && !otherProps.isLink,
-        ...otherProps,
-        children: _jsxs(Fragment, {
-          children: [!compact && _jsx(Waiting, {
-            isLeft: true
-          }), __('Retrieving Plugin Info', 'newspack-plugin')]
-        })
-      }), showModal && _jsxs(Modal, {
-        title: modalTitle,
-        onRequestClose: () => this.setState({
-          showModal: false
-        }),
-        children: [_jsx("p", {
-          children: modalBody
-        }), _jsxs(Card, {
-          buttonsCard: true,
-          noBorder: true,
-          className: "justify-end",
-          children: [_jsx(Button, {
-            variant: "secondary",
-            onClick: () => this.setState({
-              showModal: false
-            }),
-            children: dismissModalButton
-          }), _jsx(Button, {
-            variant: "primary",
-            onClick: () => this.goToPlugin(Slug),
-            children: primaryModalButton
-          })]
-        })]
-      })]
-    });
-  }
-}
-Handoff.defaultProps = {
-  onReady: () => {}
-};
-export default Handoff;

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

@@ -1,45 +0,0 @@
-/**
- * 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 "@emotion/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 _jsx(Notice, {
-    isHandoff: true,
-    isDismissible: false,
-    rawHTML: true,
-    noticeText: handoffMessage
-  });
-}

package/dist/esm/hooks/index.js

@@ -1,17 +0,0 @@
-/**
- * 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

@@ -1,30 +0,0 @@
-/**
- * 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

@@ -1,82 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import useObjectState from './useObjectState';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const INIT_STATE = {
-  name: 'Foo',
-  widgets: [1],
-  attributes: {
-    bar: 0,
-    baz: 1
-  }
-};
-const TestComponent = () => {
-  const [state, updateState] = useObjectState(INIT_STATE);
-  return _jsxs("div", {
-    children: [_jsx("input", {
-      placeholder: "state",
-      onChange: () => {},
-      value: JSON.stringify(state)
-    }), _jsx("button", {
-      onClick: () => updateState({
-        widgets: []
-      }),
-      children: "Remove widgets"
-    }), _jsx("button", {
-      onClick: () => updateState({
-        widgets: [1]
-      }),
-      children: "Add widget"
-    }), _jsx("button", {
-      onClick: () => updateState({
-        attributes: {
-          bar: 2
-        }
-      }),
-      children: "Nested update"
-    }), _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(_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

@@ -1,31 +0,0 @@
-// 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

@@ -1,40 +0,0 @@
-// 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 || (() => {});
-});