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

package/dist/esm/autocomplete-with-suggestions/index.js

@@ -1,276 +0,0 @@
-/**
- * WordPress dependencies
- */
-import apiFetch from '@wordpress/api-fetch';
-import { Button, CheckboxControl, SelectControl } from '@wordpress/components';
-import { decodeEntities } from '@wordpress/html-entities';
-import { useEffect, useState } from '@wordpress/element';
-import { __ as alias__, _x as alias_x, sprintf } from '@wordpress/i18n';
-const __ = alias__,
-  _x = alias_x;
-import { addQueryArgs } from '@wordpress/url';
-
-/**
- * External dependencies.
- */
-import { AutocompleteTokenField } from '../';
-import './style.scss';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-const AutocompleteWithSuggestions = ({
-  fetchSavedPosts = false,
-  // If passed, will use this function to fetch saved data.
-  fetchSuggestions = false,
-  // If passed, will use this function to fetch suggestions data.
-  help = __('Begin typing search term, click autocomplete result to select.', 'newspack-plugin'),
-  hideHelp = false,
-  // If true, all help text will be hidden.
-  label = __('Search', 'newspack-plugin'),
-  maxItemsToSuggest = 0,
-  // If passed, will be used to determine "load more" state. Necessary if you want "load more" functionality when using a custom `fetchSuggestions` function.
-  multiSelect = false,
-  // If true, component can select multiple values at once.
-  onChange = false,
-  // Function to call when selections change.
-  onPostTypeChange = false,
-  // Funciton to call when the post type selector is changed.
-  postTypes = [{
-    slug: 'post',
-    label: 'Post'
-  }],
-  // If passed, will render a selector to change the post type queried for suggestions.
-  postTypeLabel = __('item', 'newspack-plugin'),
-  // String to describe the data being shown.
-  postTypeLabelPlural = __('items', 'newspack-plugin'),
-  // Plural string to describe the data being shown.
-  selectedItems = [],
-  // Array of saved items.
-  selectedPost = 0,
-  // Legacy prop when single-select was the only option.
-  suggestionsToFetch = 10 // Number of suggestions to fetch per query.
-}) => {
-  const [isLoading, setIsLoading] = useState(true);
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
-  const [suggestions, setSuggestions] = useState([]);
-  const [maxSuggestions, setMaxSuggestions] = useState(0);
-  const [postTypeToSearch, setPostTypeToSearch] = useState(postTypes[0].slug);
-  const classNames = ['newspack-autocomplete-with-suggestions'];
-  if (hideHelp) {
-    classNames.push('hide-help');
-  }
-
-  /**
-   * Fetch recent posts to show as suggestions.
-   */
-  useEffect(() => {
-    if (onPostTypeChange) {
-      onPostTypeChange(postTypeToSearch);
-    }
-    setIsLoading(true);
-    handleFetchSuggestions(null, 0, postTypeToSearch).then(_suggestions => {
-      if (0 < _suggestions.length) {
-        setSuggestions(_suggestions);
-      }
-    }).finally(() => setIsLoading(false));
-  }, [postTypeToSearch]);
-
-  /**
-   * Fetch more suggestions.
-   */
-  useEffect(() => {
-    if (isLoadingMore) {
-      handleFetchSuggestions(null, suggestions.length, postTypeToSearch).then(_suggestions => {
-        if (0 < _suggestions.length) {
-          setSuggestions(suggestions.concat(_suggestions));
-        }
-      }).finally(() => setIsLoadingMore(false));
-    }
-  }, [isLoadingMore]);
-
-  /**
-   * If passed a `fetchSavedPosts` prop, use that, otherwise, build it based on the selected post type.
-   */
-  const handleFetchSaved = fetchSavedPosts ? fetchSavedPosts : async (postIds = [], searchSlug = null) => {
-    const postTypeSlug = searchSlug || postTypeToSearch;
-    const endpoint = 'post' === postTypeSlug || 'page' === postTypeSlug ? postTypeSlug + 's' // Default post type endpoints are plural.
-    : postTypeSlug; // Custom post type endpoints are singular.
-    const posts = await apiFetch({
-      path: addQueryArgs('/wp/v2/' + endpoint, {
-        per_page: 100,
-        include: postIds.join(','),
-        _fields: 'id,title'
-      })
-    });
-    return posts.map(post => ({
-      value: parseInt(post.id),
-      label: decodeEntities(post.title) || __('(no title)', 'newspack-plugin')
-    }));
-  };
-
-  /**
-   * If passed a `fetchSuggestions` prop, use that, otherwise, build it based on the selected post type.
-   */
-  const handleFetchSuggestions = fetchSuggestions ? fetchSuggestions : async (search = null, offset = 0, searchSlug = null) => {
-    const postTypeSlug = searchSlug || postTypeToSearch;
-    const endpoint = 'post' === postTypeSlug || 'page' === postTypeSlug ? postTypeSlug + 's' // Default post type endpoints are plural.
-    : postTypeSlug; // Custom post type endpoints are singular.
-    const response = await apiFetch({
-      parse: false,
-      path: addQueryArgs('/wp/v2/' + endpoint, {
-        search,
-        offset,
-        per_page: suggestionsToFetch,
-        _fields: 'id,title'
-      })
-    });
-    const total = parseInt(response.headers.get('x-wp-total') || 0);
-    const posts = await response.json();
-    setMaxSuggestions(total);
-
-    // Format suggestions for FormTokenField display.
-    return posts.reduce((acc, post) => {
-      acc.push({
-        value: parseInt(post.id),
-        label: decodeEntities(post?.title.rendered) || __('(no title)', 'newspack-plugin')
-      });
-      return acc;
-    }, []);
-  };
-
-  /**
-   * Intercept onChange callback so we can decide whether to allow multiple selections.
-   */
-  const handleOnChange = _selections => {
-    // If only allowing one selection, just return the one selected item.
-    if (!multiSelect) {
-      return onChange(_selections);
-    }
-
-    // Handle legacy `selectedPost` prop.
-    const selections = selectedPost ? [...selectedItems, selectedPost] : [...selectedItems];
-
-    // Loop through new selections to determine whether to add or remove them.
-    _selections.forEach(_selection => {
-      const existingSelection = selections.findIndex(selection => parseInt(selection.value) === parseInt(_selection.value));
-      if (-1 < existingSelection) {
-        // If the selection is already selected, remove it.
-        selections.splice(existingSelection, 1);
-      } else {
-        // Otherwise, add it.
-        selections.push(_selection);
-      }
-    });
-
-    // Include currently selected post type in selection results.
-    onChange(selections.map(selection => ({
-      ...selection,
-      postType: postTypeToSearch
-    })));
-  };
-
-  /**
-   * Render selected item(s) for this component. Clicking on a selection deselects it.
-   */
-  const renderSelections = () => {
-    // Handle legacy `selectedPost` prop.
-    const selections = selectedPost ? [...selectedItems, selectedPost] : selectedItems;
-    const selectedMessage = multiSelect ? sprintf(
-    // Translators: %1: the length of selections. %2: the selection leabel.
-    __('%1$s %2$s selected', 'newspack-plugin'), selections.length, selections.length > 1 ? postTypeLabelPlural : postTypeLabel) :
-    // Translators: %s: The label for the selection.
-    sprintf(__('Selected %s', 'newspack-plugin'), postTypeLabel);
-    return _jsxs("div", {
-      className: "newspack-autocomplete-with-suggestions__selected-items",
-      children: [_jsxs("p", {
-        className: "newspack-autocomplete-with-suggestions__label",
-        children: [selectedMessage, 1 < selections.length && _x(' – ', 'separator character', 'newspack-plugin'), 1 < selections.length && _jsx(Button, {
-          onClick: () => onChange([]),
-          isLink: true,
-          isDestructive: true,
-          children: __('Clear all', 'newspack-plugin')
-        })]
-      }), selections.map(selection => _jsx(Button, {
-        className: "newspack-autocomplete-with-suggestions__selected-item-button",
-        isTertiary: true,
-        onClick: () => onChange(selections.filter(_selection => _selection.value !== selection.value)),
-        children: selection.label
-      }, selection.value))]
-    });
-  };
-
-  /**
-   * Render post type select dropdown.
-   */
-  const renderPostTypeSelect = () => {
-    return _jsx(SelectControl, {
-      label: sprintf(
-      // Translators: %s: The name of the type.
-      __('%s type', 'newspack-plugin'), postTypeLabel.charAt(0).toUpperCase() + postTypeLabel.slice(1)),
-      value: postTypeToSearch,
-      options: postTypes.map(postTypeOption => ({
-        label: postTypeOption.label,
-        value: postTypeOption.slug
-      })),
-      onChange: _postType => setPostTypeToSearch(_postType)
-    });
-  };
-
-  /**
-   * Render a single suggestion object that can be clicked to select it immediately.
-   *
-   * @param {Object} suggestion Suggestion object with value and label keys.
-   */
-  const renderSuggestion = suggestion => {
-    if (multiSelect) {
-      const selections = selectedPost ? [...selectedItems, selectedPost] : [...selectedItems];
-      const isSelected = !!selections.find(_selection => parseInt(_selection.value) === parseInt(suggestion.value) && _selection.label === suggestion.label);
-      return _jsx(CheckboxControl, {
-        checked: isSelected,
-        onChange: () => handleOnChange([suggestion]),
-        label: suggestion.label
-      }, suggestion.value);
-    }
-    return _jsx(Button, {
-      isLink: true,
-      onClick: () => handleOnChange([suggestion]),
-      children: suggestion.label
-    }, suggestion.value);
-  };
-
-  /**
-   * Render a list of suggestions that can be clicked to select instead of searching by title.
-   */
-  const renderSuggestions = () => {
-    if (0 === suggestions.length) {
-      return null;
-    }
-    const className = multiSelect ? 'newspack-autocomplete-with-suggestions__search-suggestions-multiselect' : 'newspack-autocomplete-with-suggestions__search-suggestions';
-    return _jsxs(_Fragment, {
-      children: [!hideHelp && _jsx("p", {
-        className: "newspack-autocomplete-with-suggestions__label",
-        children: /* Translators: %s: the name of a post type. */sprintf(__('Or, select a recent %s:', 'newspack-plugin'), postTypeLabel)
-      }), _jsxs("div", {
-        className: className,
-        children: [suggestions.map(renderSuggestion), suggestions.length < (maxItemsToSuggest || maxSuggestions) && _jsx(Button, {
-          disabled: isLoadingMore,
-          isSecondary: true,
-          onClick: () => setIsLoadingMore(true),
-          children: isLoadingMore ? __('Loading…', 'newspack-plugin') : __('Load more', 'newspack-plugin')
-        })]
-      })]
-    });
-  };
-  return _jsxs("div", {
-    className: classNames.join(' '),
-    children: [0 < selectedItems.length && renderSelections(), 1 < postTypes.length && renderPostTypeSelect(), _jsx(AutocompleteTokenField, {
-      tokens: [],
-      onChange: handleOnChange,
-      fetchSuggestions: async search => handleFetchSuggestions(search, 0, postTypeToSearch),
-      fetchSavedInfo: postIds => handleFetchSaved(postIds),
-      label: label,
-      loading: isLoading,
-      help: !hideHelp && help,
-      returnFullObjects: true
-    }), renderSuggestions()]
-  });
-};
-export default AutocompleteWithSuggestions;

package/dist/esm/autocomplete-with-suggestions/style.scss

@@ -1,163 +0,0 @@
-/**
-* Styles for AutocompleteWithSuggestions component.
-*/
-
-@use '~@wordpress/base-styles/colors' as wp-colors;
-
-.newspack-autocomplete-with-suggestions {
-	width: 100%;
-
-	&.hide-help {
-		> .components-base-control,
-		> .newspack-autocomplete-tokenfield,
-		> .newspack-autocomplete-with-suggestions__search-suggestions,
-		> .newspack-autocomplete-with-suggestions__search-suggestions-multiselect {
-			margin-top: 16px;
-		}
-	}
-	.components-select-control__input {
-		max-width: none;
-	}
-
-	.components-input-control__backdrop {
-		border-color: wp-colors.$gray-700 !important;
-	}
-
-	.newspack-autocomplete-with-suggestions__label,
-	.components-form-token-field__label,
-	.components-input-control__label,
-	.components-checkbox-control__label {
-		color: wp-colors.$gray-900 !important;
-	}
-
-	&__suggestions-spinner {
-		background: wp-colors.$gray-100;
-		border: 1px solid wp-colors.$gray-700;
-		border-radius: 2px;
-		cursor: progress;
-		margin: 16px 0;
-		padding: 32px;
-
-		.components-spinner {
-			display: block;
-			margin: 0 auto;
-			position: relative;
-			right: auto;
-			top: 0;
-		}
-	}
-
-	.newspack-autocomplete-tokenfield__help {
-		font-size: inherit;
-		margin-bottom: 8px !important;
-	}
-
-	.components-form-token-field {
-		&__input-container {
-			border-color: wp-colors.$gray-700;
-		}
-
-		&__suggestions-list {
-			border-top-color: wp-colors.$gray-700;
-			margin: 4px -4px -2px;
-		}
-
-		&__suggestion {
-			padding: 8px;
-		}
-	}
-
-	p.newspack-autocomplete-with-suggestions__label {
-		font-size: inherit;
-		margin: 0 0 8px;
-	}
-
-	&__selected-items {
-		border-bottom: 1px solid wp-colors.$gray-700;
-		display: flex;
-		flex-wrap: wrap;
-		gap: 8px;
-		margin-bottom: 16px;
-		padding-bottom: 12px;
-
-		p.newspack-autocomplete-with-suggestions__label {
-			flex: 0 0 100%;
-			margin: 0;
-		}
-	}
-
-	&__selected-item-button.components-button.is-tertiary {
-		background-color: wp-colors.$gray-300;
-		border-radius: 2px;
-		color: wp-colors.$gray-900;
-		font-size: 13px;
-		height: auto;
-		margin: 0;
-		padding-left: 8px;
-		padding-right: 8px;
-
-		&::after {
-			content: '✕';
-			margin-left: 8px;
-		}
-
-		&:hover {
-			box-shadow: none;
-			color: black;
-		}
-	}
-
-	&__search-suggestions,
-	&__search-suggestions-multiselect {
-		border-radius: 2px;
-		border: 1px solid wp-colors.$gray-700;
-		max-height: 178px;
-		overflow: visible auto;
-		padding: 8px 8px 0;
-
-		.components-button {
-			display: block;
-			line-height: normal;
-			margin: auto;
-
-			&.is-link {
-				color: wp-colors.$gray-900;
-				padding: 8px;
-				text-decoration: none;
-				width: 100%;
-
-				&:active:not( :disabled ),
-				&:hover:not( :disabled ) {
-					background: wp-colors.$gray-900;
-					background: var( --wp-admin-theme-color );
-					color: white;
-				}
-			}
-			&.is-secondary {
-				margin-bottom: 8px;
-				margin-top: 8px;
-				width: 100%;
-			}
-		}
-	}
-
-	&__search-suggestions {
-		border-radius: 2px;
-		border: 1px solid wp-colors.$gray-700;
-		padding: 0;
-
-		.components-button {
-			line-height: normal;
-
-			&:focus:not( :disabled ) {
-				border-radius: 0;
-				box-shadow: inset 0 0 0 1.5px wp-colors.$gray-900;
-				box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
-			}
-
-			&.is-secondary {
-				width: calc( 100% - 16px );
-			}
-		}
-	}
-}

package/dist/esm/button/index.js

@@ -1,48 +0,0 @@
-/**
- * Button
- */
-
-/**
- * WordPress dependencies.
- */
-import { Button as BaseComponent } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Router from '../proxied-imports/router';
-import './style.scss';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const {
-  useHistory
-} = Router;
-const Button = ({
-  href,
-  onClick,
-  ...otherProps
-}) => {
-  const history = useHistory();
-  const [isAwaitingOnClick, setIsAwaitingOnClick] = useState(false);
-
-  // If both onClick and href are present, await the onClick action an then redirect.
-  if (href && onClick) {
-    otherProps.onClick = async () => {
-      setIsAwaitingOnClick(true);
-      await onClick();
-      setIsAwaitingOnClick(false);
-      history.push((href || '').replace('#', ''));
-    };
-  } else {
-    otherProps.href = href;
-    otherProps.onClick = onClick;
-  }
-  if (isAwaitingOnClick) {
-    otherProps.disabled = true;
-  }
-  // @ts-ignore - @wordpress/components' Button can only have either href or onClick, not both.
-  return _jsx(BaseComponent, {
-    ...otherProps
-  });
-};
-export default Button;

package/dist/esm/button/style.scss

@@ -1,11 +0,0 @@
-/**
- * Button
- */
-
-.components-button {
-	&.is-destructive {
-		&:hover:not( :disabled ) {
-			box-shadow: none;
-		}
-	}
-}

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

@@ -1,64 +0,0 @@
-/**
- * Button Card
- */
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { Grid } from '../';
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-class ButtonCard extends Component {
-  /**
-   * Render
-   */
-  render() {
-    const {
-      chevron,
-      className,
-      desc,
-      grouped,
-      icon,
-      isDestructive,
-      isPressed,
-      isSmall,
-      title,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-button-card', className, chevron && 'has-chevron', grouped && 'grouped', icon && 'has-icon', isDestructive && 'is-destructive', isPressed && 'is-pressed', isSmall && 'is-small');
-    return _jsxs("a", {
-      className: classes,
-      ...otherProps,
-      children: [icon && _jsx(Icon, {
-        icon: icon,
-        height: 48,
-        width: 48
-      }), _jsxs(Grid, {
-        noMargin: true,
-        columns: 1,
-        gutter: 8,
-        children: [title && _jsx("h3", {
-          children: title
-        }), desc && _jsx("p", {
-          children: desc
-        })]
-      }), chevron && _jsx(Icon, {
-        icon: chevronRight,
-        height: 24,
-        width: 24
-      })]
-    });
-  }
-}
-export default ButtonCard;