newspack-components 2.2.1 → 3.0.0-alpha.2

package/dist/esm/handoff/index.js

@@ -1,177 +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 } from "@emotion/react/jsx-runtime";
-import { 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')} ${pluginInfo.Name}`,
-        primaryButton: pluginInfo.Name && `${__('Manage', 'newspack')} ${pluginInfo.Name}`,
-        primaryModalButton: __('Manage', 'newspack'),
-        dismissModalButton: __('Dismiss', 'newspack')
-      };
-      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')
-      }), !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')]
-        })
-      }), 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,31 +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 (function () {
-  let initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  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,83 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import useObjectState from './useObjectState';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { 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,43 +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;
-    }
-    if (event) {
-      event.returnValue = message;
-    }
-    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;
-});

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

@@ -1,141 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * Image Upload
- */
-
-/**
- * WordPress dependencies.
- */
-import { Component } from '@wordpress/element';
-import { __ as alias__ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies.
- */
-const __ = alias__;
-import { Button, InfoButton } from '../';
-import './style.scss';
-
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-class ImageUpload extends Component {
-  /**
-   * Constructor.
-   */
-  constructor() {
-    super(...arguments);
-    /**
-     * Open the WP media modal.
-     */
-    _defineProperty(this, "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.
-     */
-    _defineProperty(this, "handleImageSelect", () => {
-      const {
-        onChange
-      } = this.props;
-      const attachment = this.state.frame.state().get('selection').first().toJSON();
-      onChange(attachment);
-    });
-    /**
-     * Render.
-     */
-    _defineProperty(this, "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 _jsxs("div", {
-        className: classnames('newspack-image-upload', className),
-        children: [_jsxs("div", {
-          className: "newspack-image-upload__header",
-          children: [label && _jsx("label", {
-            className: "newspack-image-upload__label",
-            children: label
-          }), info && _jsx(InfoButton, {
-            text: info
-          })]
-        }), _jsx("div", {
-          className: classes,
-          style: {
-            ...style
-          },
-          children: image?.url ? _jsxs(_Fragment, {
-            children: [_jsx("img", {
-              "data-testid": "image-upload",
-              src: image.url,
-              alt: __('Image preview', 'newspack')
-            }), _jsxs("div", {
-              className: "newspack-image-upload__controls",
-              children: [_jsx(Button, {
-                disabled: disabled,
-                onClick: this.openModal,
-                isLink: true,
-                children: __('Replace', 'newspack')
-              }), _jsx("span", {
-                className: "sep"
-              }), _jsx(Button, {
-                disabled: disabled,
-                onClick: () => onChange(null),
-                isLink: true,
-                isDestructive: true,
-                children: __('Remove', 'newspack')
-              })]
-            })]
-          }) : _jsx(Button, {
-            disabled: disabled,
-            onClick: this.openModal,
-            isLink: true,
-            children: buttonLabel ? buttonLabel : __('Upload', 'newspack')
-          })
-        }), help && _jsx("p", {
-          className: "newspack-image-upload__help",
-          children: help
-        })]
-      });
-    });
-    this.state = {
-      frame: false
-    };
-  }
-}
-export default ImageUpload;

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import ImageUpload from './';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-describe('ImageUpload', () => {
-  it('should render an add image button', () => {
-    const {
-      getByText
-    } = render(_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(_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);
-  });
-});

package/dist/esm/index.js

@@ -1,47 +0,0 @@
-export { default as Accordion } from './accordion';
-export { default as ActionCard } from './action-card';
-export { default as AutocompleteTokenField } from './autocomplete-tokenfield';
-export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions';
-export { default as Button } from './button';
-export { default as ButtonCard } from './button-card';
-export { default as Card } from './card';
-export { default as CategoryAutocomplete } from './category-autocomplete';
-export { default as ColorPicker } from './color-picker';
-export { default as CustomSelectControl } from './custom-select-control';
-export { default as FormTokenField } from './form-token-field';
-export { default as Footer } from './footer';
-export { default as Handoff } from './handoff';
-export { default as HandoffMessage } from './handoff-message';
-export { default as InfoButton } from './info-button';
-export { default as ImageUpload } from './image-upload';
-export { default as GlobalNotices } from './global-notices';
-export { default as Grid } from './grid';
-export { default as Modal } from './modal';
-export { default as NewspackIcon } from './newspack-icon';
-export { default as NewspackLogo } from './newspack-logo';
-export { default as Notice } from './notice';
-export { default as PatronsLogo } from './patrons-logo';
-export { default as PluginInstaller } from './plugin-installer';
-export { default as PluginSettings } from './plugin-settings';
-export { default as PluginToggle } from './plugin-toggle';
-export { default as Popover } from './popover';
-export { default as ProgressBar } from './progress-bar';
-export { default as RadioControl } from './radio-control';
-export { default as SectionHeader } from './section-header';
-export { default as SelectControl } from './select-control';
-export { default as DateRangePicker } from './date-range-picker';
-export { default as Settings } from './settings';
-export { default as StepsList } from './steps-list';
-export { default as StepsListItem } from './steps-list-item';
-export { default as StyleCard } from './style-card';
-export { default as TabbedNavigation } from './tabbed-navigation';
-export { default as TextControl } from './text-control';
-export { default as Waiting } from './waiting';
-export { default as WebPreview } from './web-preview';
-export { default as Wizard } from './wizard';
-export { default as withWizard } from './with-wizard';
-export { default as withWizardScreen } from './with-wizard-screen';
-export { default as Router } from './proxied-imports/router';
-export { default as hooks } from './hooks';
-export { default as utils } from './utils';
-import './style.scss';

package/dist/esm/info-button/index.js

@@ -1,42 +0,0 @@
-/**
- * Info Button
- */
-
-/**
- * WordPress dependencies.
- */
-import { Component } from '@wordpress/element';
-import { Tooltip } from '@wordpress/components';
-import { Icon, info } from '@wordpress/icons';
-
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies.
- */
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-class InfoButton extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      ...otherProps
-    } = this.props;
-    return _jsx(Tooltip, {
-      ...otherProps,
-      children: _jsx("span", {
-        className: classnames('newspack-info-button', className),
-        children: _jsx(Icon, {
-          icon: info
-        })
-      })
-    });
-  }
-}
-export default InfoButton;