newspack-components 2.2.1 → 3.0.0-alpha.2

package/dist/esm/wizard/store/index.js

@@ -1,155 +0,0 @@
-/**
- * External dependencies.
- */
-import set from 'lodash/set';
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
-
-/**
- * WordPress dependencies.
- */
-import apiFetch from '@wordpress/api-fetch';
-import { createReduxStore, register, dispatch, select } from '@wordpress/data';
-import { createAction } from './utils.js';
-export const WIZARD_STORE_NAMESPACE = 'newspack/wizards';
-const DEFAULT_STATE = {
-  isLoading: true,
-  isQuietLoading: false,
-  apiData: {},
-  error: null
-};
-
-/**
- * wordpress/data does not trigger a component re-render
- * on deep state change (via lodash's set function)
- * unless the state was cloned first.
- */
-const clone = objectToClone => JSON.parse(JSON.stringify(objectToClone));
-const reducer = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_STATE;
-  let {
-    type,
-    payload = {}
-  } = arguments.length > 1 ? arguments[1] : undefined;
-  switch (type) {
-    case 'START_LOADING_DATA':
-      if (payload.isQuietLoading) {
-        return {
-          ...state,
-          isQuietLoading: true
-        };
-      }
-      return {
-        ...state,
-        isLoading: true
-      };
-    case 'FINISH_LOADING_DATA':
-      return {
-        ...state,
-        isLoading: false,
-        isQuietLoading: false
-      };
-    case 'SET_API_DATA':
-      return set(clone(state), ['apiData', payload.slug], payload.data);
-    case 'UPDATE_WIZARD_SETTINGS':
-      return set(clone(state), ['apiData', payload.slug, ...payload.path], payload.value);
-    case 'SET_ERROR':
-      return {
-        ...state,
-        error: payload
-      };
-    default:
-      return state;
-  }
-};
-const actions = {
-  // Regular actions.
-  startLoadingData: createAction('START_LOADING_DATA'),
-  finishLoadingData: createAction('FINISH_LOADING_DATA'),
-  fetchFromAPI: createAction('FETCH_FROM_API'),
-  setAPIDataForWizard: createAction('SET_API_DATA'),
-  updateWizardSettings: createAction('UPDATE_WIZARD_SETTINGS'),
-  setError: createAction('SET_ERROR'),
-  // Async actions. These will not show up in Redux devtools.
-  saveWizardSettings(_ref) {
-    let {
-      slug,
-      section = '',
-      payloadPath = false,
-      updatePayload = null
-    } = _ref;
-    return function* () {
-      // Optionally data can be updated before saving - an immediate update case
-      // (without an explicit "save" action).
-      if (updatePayload) {
-        yield actions.updateWizardSettings({
-          slug,
-          ...updatePayload
-        });
-      }
-      const wizardState = select(WIZARD_STORE_NAMESPACE).getWizardAPIData(slug);
-      const updatedData = yield actions.fetchFromAPI({
-        path: `/newspack/v1/wizard/${slug}/${section}`,
-        method: 'POST',
-        data: payloadPath ? get(wizardState, payloadPath) : wizardState,
-        isQuietFetch: true
-      });
-      if (!isEmpty(updatedData) && !updatedData.error) {
-        return actions.setAPIDataForWizard({
-          slug,
-          data: updatedData
-        });
-      }
-    }();
-  },
-  *wizardApiFetch(fetchConfig) {
-    // Just a proxy to fetchFromAPI, but it has to be a generator.
-    const result = yield actions.fetchFromAPI(fetchConfig);
-    return result;
-  }
-};
-const selectors = {
-  isLoading: state => state.isLoading,
-  isQuietLoading: state => state.isQuietLoading,
-  getWizardAPIData: (state, slug) => state.apiData[slug] || {},
-  getError: state => state.error
-};
-const store = createReduxStore(WIZARD_STORE_NAMESPACE, {
-  reducer,
-  actions,
-  selectors,
-  controls: {
-    FETCH_FROM_API: action => {
-      dispatch(WIZARD_STORE_NAMESPACE).startLoadingData({
-        isQuietLoading: Boolean(action.payload.isQuietFetch)
-      });
-      return apiFetch(action.payload).then(data => {
-        dispatch(WIZARD_STORE_NAMESPACE).setError(null);
-        return data;
-      }).catch(error => {
-        dispatch(WIZARD_STORE_NAMESPACE).setError(error);
-        return {
-          error
-        };
-      }).finally(result => {
-        dispatch(WIZARD_STORE_NAMESPACE).finishLoadingData();
-        return result;
-      });
-    }
-  },
-  resolvers: {
-    *getWizardAPIData(slug) {
-      if (slug) {
-        const data = yield actions.fetchFromAPI({
-          path: `/newspack/v1/wizard/${slug}`
-        });
-        return actions.setAPIDataForWizard({
-          slug,
-          data
-        });
-      }
-      return actions.finishLoadingData();
-    }
-  }
-});
-export default (() => register(store));

package/dist/esm/wizard/store/utils.js

@@ -1,17 +0,0 @@
-/**
- * WordPress dependencies.
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { WIZARD_STORE_NAMESPACE } from '.';
-export const createAction = type => payload => ({
-  type,
-  payload
-});
-export const useWizardData = function (wizardName) {
-  let defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useSelect(select => select(WIZARD_STORE_NAMESPACE).getWizardAPIData(`newspack-${wizardName}-wizard`)) || defaultValue;
-};

package/src/grid/index.js

@@ -1,44 +0,0 @@
-/**
- * Grid
- */
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-class Grid extends Component {
-	/**
-	 * Render
-	 */
-	render() {
-		const { className, columns, gutter, noMargin, rowGap, ...otherProps } = this.props;
-		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 <div className={ classes } { ...otherProps } />;
-	}
-}
-
-Grid.defaultProps = {
-	columns: 2,
-	gutter: 32,
-	rowGap: null,
-};
-
-export default Grid;

package/src/text-control/index.js

@@ -1,56 +0,0 @@
-/**
- * Text Control
- */
-
-/**
- * WordPress dependencies
- */
-import { TextControl as BaseComponent } from '@wordpress/components';
-import { Component, createRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
-class TextControl extends Component {
-	constructor( props ) {
-		super( props );
-		this.wrapperRef = createRef();
-	}
-	componentDidMount() {
-		if ( this.wrapperRef.current ) {
-			const labelEl = this.wrapperRef.current.querySelector( 'label' );
-			if ( labelEl ) {
-				labelEl.setAttribute( 'data-required-text', __( '(required)', 'newspack' ) );
-			}
-		}
-	}
-	/**
-	 * Render.
-	 */
-	render() {
-		const { className, required, isWide, withMargin = true, ...otherProps } = this.props;
-		const classes = classNames(
-			'newspack-text-control',
-			{ 'newspack-text-control--wide': isWide },
-			{ 'newspack-text-control--with-margin': withMargin },
-			className
-		);
-		return required ? (
-			<div ref={ this.wrapperRef } className="newspack-text-control--required">
-				<BaseComponent className={ classes } required={ required } { ...otherProps } />
-			</div>
-		) : (
-			<BaseComponent className={ classes } { ...otherProps } />
-		);
-	}
-}
-
-export default TextControl;