newspack-components 2.0.1 → 2.1.0

package/src/wizard/index.js

@@ -0,0 +1,133 @@
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies.
+ */
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { category } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { Footer, Notice, Button, NewspackIcon, TabbedNavigation, PluginInstaller } from '../';
+import Router from '../proxied-imports/router';
+import registerStore, { WIZARD_STORE_NAMESPACE } from './store';
+import { useWizardData } from './store/utils';
+import WizardError from './components/WizardError';
+
+registerStore();
+
+const { HashRouter, Redirect, Route, Switch } = Router;
+
+const Wizard = ( {
+	sections = [],
+	apiSlug,
+	headerText,
+	subHeaderText,
+	hasSimpleFooter,
+	className,
+	renderAboveSections,
+	requiredPlugins = [],
+} ) => {
+	const isLoading = useSelect( select => select( WIZARD_STORE_NAMESPACE ).isLoading() );
+	const isQuietLoading = useSelect( select => select( WIZARD_STORE_NAMESPACE ).isQuietLoading() );
+
+	// Trigger initial data fetch. Some sections might not use the wizard data,
+	// but for consistency, fetching is triggered regardless of the section.
+	useSelect( select => select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( apiSlug ) );
+
+	let displayedSections = sections.filter( section => ! section.isHidden );
+
+	const [ pluginRequirementsSatisfied, setPluginRequirementsSatisfied ] = useState(
+		requiredPlugins.length === 0
+	);
+	if ( ! pluginRequirementsSatisfied ) {
+		headerText =
+			requiredPlugins.length > 1
+				? __( 'Required plugins', 'newspack' )
+				: __( 'Required plugin', 'newspack' );
+		displayedSections = [
+			{
+				path: '/',
+				render: () => (
+					<PluginInstaller
+						plugins={ requiredPlugins }
+						onStatus={ ( { complete } ) => setPluginRequirementsSatisfied( complete ) }
+					/>
+				),
+			},
+		];
+	}
+
+	return (
+		<>
+			<WizardError />
+			<div
+				className={ classnames(
+					isLoading ? 'newspack-wizard__is-loading' : 'newspack-wizard__is-loaded',
+					{
+						'newspack-wizard__is-loading-quiet': isQuietLoading,
+					}
+				) }
+			>
+				<HashRouter hashType="slash">
+					{ newspack_aux_data.is_debug_mode && <Notice debugMode /> }
+					<div className="bg-white">
+						<div className="newspack-wizard__header__inner">
+							<div className="newspack-wizard__title">
+								<Button
+									isLink
+									href={ newspack_urls.dashboard }
+									label={ __( 'Return to Dashboard', 'newspack' ) }
+									showTooltip={ true }
+									icon={ category }
+									iconSize={ 36 }
+								>
+									<NewspackIcon size={ 36 } />
+								</Button>
+								<div>
+									{ headerText && <h2>{ headerText }</h2> }
+									{ subHeaderText && <span>{ subHeaderText }</span> }
+								</div>
+							</div>
+						</div>
+					</div>
+
+					{ displayedSections.length > 1 && <TabbedNavigation items={ displayedSections } /> }
+
+					<Switch>
+						{ displayedSections.map( ( section, index ) => {
+							const SectionComponent = section.render;
+							return (
+								<Route key={ index } path={ section.path }>
+									<div
+										className={ classnames(
+											'newspack-wizard newspack-wizard__content',
+											className
+										) }
+									>
+										{ 'function' === typeof renderAboveSections ? renderAboveSections() : null }
+										<SectionComponent />
+									</div>
+								</Route>
+							);
+						} ) }
+						<Redirect to={ displayedSections[ 0 ].path } />
+					</Switch>
+				</HashRouter>
+			</div>
+			{ ! isLoading && <Footer simple={ hasSimpleFooter } /> }
+		</>
+	);
+};
+
+Wizard.useWizardData = useWizardData;
+
+Wizard.STORE_NAMESPACE = WIZARD_STORE_NAMESPACE;
+
+export default Wizard;

package/src/wizard/store/index.js

@@ -0,0 +1,126 @@
+/**
+ * External dependencies.
+ */
+import { set, get, isEmpty } from 'lodash';
+
+/**
+ * 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 = ( state = DEFAULT_STATE, { type, payload = {} } ) => {
+	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( { slug, section = '', payloadPath = false, updatePayload = null } ) {
+		// 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 ) ) {
+			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 )
+				.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/src/wizard/store/utils.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies.
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { WIZARD_STORE_NAMESPACE } from '.';
+
+export const createAction = type => payload => ( { type, payload } );
+
+export const useWizardData = ( wizardName, defaultValue = {} ) =>
+	useSelect( select =>
+		select( WIZARD_STORE_NAMESPACE ).getWizardAPIData( `newspack-${ wizardName }-wizard` )
+	) || defaultValue;

package/dist/cjs/button-group/index.js

@@ -1,57 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _element = require("@wordpress/element");
-
-var _components = require("@wordpress/components");
-
-require("./style.scss");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
-/**
- * WordPress dependencies.
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * External dependencies
- */
-
-/**
- * Button Group.
- */
-class ButtonGroup extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      noMargin,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-button-group', {
-      'newspack-button-group--no-margin': noMargin
-    }, className);
-    return (0, _jsxRuntime.jsx)(_components.ButtonGroup, {
-      className: classes,
-      ...otherProps
-    });
-  }
-
-}
-
-var _default = ButtonGroup;
-exports.default = _default;

package/dist/cjs/button-group/style.scss

@@ -1,68 +0,0 @@
-/**
- * Button Group
- */
-
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-button-group {
-	display: block;
-	&:not( .newspack-button-group--no-margin ) {
-		margin: 32px 0;
-	}
-
-	.newspack-button {
-		padding: 11px 17px !important;
-		&:active,
-		&:focus,
-		&:hover,
-		&.is-pressed {
-			position: relative;
-		}
-
-		&.is-pressed {
-			position: relative;
-			z-index: 2;
-			background-color: $primary-050 !important;
-			color: $gray-900 !important;
-			border: none !important;
-			&:focus {
-				box-shadow: 0 0 0 1px white, 0 0 0 2px $primary-500 !important;
-			}
-			&::after {
-				content: '';
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: calc( 100% - 6px );
-				height: calc( 100% - 6px );
-				border: 3px solid $primary-500;
-			}
-		}
-	}
-}
-
-body[class*='admin-color-'] {
-	.newspack-button-group {
-		.newspack-button {
-			border-radius: 0;
-			box-shadow: none;
-
-			&:first-child {
-				&,
-				&::after {
-					border-bottom-left-radius: 3px;
-					border-top-left-radius: 3px;
-				}
-			}
-
-			&:last-child {
-				&,
-				&::after {
-					border-bottom-right-radius: 3px;
-					border-top-right-radius: 3px;
-				}
-			}
-		}
-	}
-}

package/dist/cjs/checkbox-control/index.js

@@ -1,63 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _element = require("@wordpress/element");
-
-var _components = require("@wordpress/components");
-
-var _ = require("../");
-
-require("./style.scss");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
-/**
- * Checkbox Control
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * External dependencies
- */
-class CheckboxControl extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      checked,
-      tooltip,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-checkbox-control', className);
-    return (0, _jsxRuntime.jsxs)("div", {
-      className: classes,
-      children: [(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
-        checked: Boolean(checked),
-        ...otherProps
-      }), tooltip && (0, _jsxRuntime.jsx)(_.InfoButton, {
-        text: tooltip
-      })]
-    });
-  }
-
-}
-
-var _default = CheckboxControl;
-exports.default = _default;

package/dist/cjs/checkbox-control/style.scss

@@ -1,78 +0,0 @@
-/**
- * Checkbox styles.
- */
-
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-checkbox-control {
-	color: $gray-700;
-	display: flex;
-	font-size: 14px;
-	line-height: 24px;
-	margin: 32px 0;
-
-	label {
-		color: inherit;
-		font-size: inherit;
-		line-height: inherit;
-		margin: 0;
-	}
-
-	.components-checkbox-control__input-container {
-		display: block;
-		margin: 0;
-		margin-right: 8px;
-
-		@media screen and ( min-width: 600px ) {
-			margin-bottom: 2px;
-			margin-top: 2px;
-		}
-	}
-
-	.components-checkbox-control__input[type='checkbox'] {
-		margin: 0;
-
-		&:checked {
-			background-color: $primary-500;
-			border-color: $primary-500;
-		}
-
-		&:focus {
-			border-color: $primary-500;
-			box-shadow: 0 0 0 2px white, 0 0 0 3.5px $primary-500;
-		}
-	}
-
-	.components-base-control__help {
-		color: inherit;
-		font-size: inherit;
-		font-style: italic;
-		line-height: inherit;
-		margin: 0;
-		margin-left: 28px;
-	}
-
-	// Multiple Checkbox Controls
-
-	& + & {
-		margin-top: -16px;
-	}
-
-	// Reset
-
-	.components-base-control {
-		font-size: inherit;
-		line-height: inherit;
-	}
-
-	.components-base-control__field {
-		display: flex;
-		margin: 0;
-	}
-
-	.components-base-control__label {
-		display: block;
-		margin: 0;
-	}
-}

package/dist/cjs/preview-box/index.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _i18n = require("@wordpress/i18n");
-
-require("./style.scss");
-
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
-/**
- * WordPress dependencies
- */
-const __ = _i18n.__;
-
-const PreviewBox = _ref => {
-  let {
-    children
-  } = _ref;
-  return (0, _jsxRuntime.jsxs)("div", {
-    className: "newspack-preview-box",
-    children: [(0, _jsxRuntime.jsx)("div", {
-      className: "newspack-preview-box__label",
-      children: __('Preview', 'newspack')
-    }), (0, _jsxRuntime.jsx)("div", {
-      className: "newspack-preview-box__content",
-      children: children
-    })]
-  });
-};
-
-var _default = PreviewBox;
-exports.default = _default;

package/dist/cjs/preview-box/style.scss

@@ -1,18 +0,0 @@
-@import '../../../shared/scss/colors';
-@import '~@wordpress/base-styles/colors';
-
-.newspack-preview-box {
-	margin: 32px 0;
-
-	&__label {
-		color: $gray-900;
-		font-weight: bold;
-	}
-
-	&__content {
-		background: $gray-100;
-		border: 1px solid $gray-300;
-		border-radius: 3px;
-		padding: 11px 8px;
-	}
-}

package/dist/cjs/textarea-control/index.js

@@ -1,54 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _components = require("@wordpress/components");
-
-var _element = require("@wordpress/element");
-
-require("./style.scss");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
-/**
- * Textarea Control
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * External dependencies
- */
-class TextareaControl extends _element.Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      ...otherProps
-    } = this.props;
-    const classes = (0, _classnames.default)('newspack-textarea-control', className);
-    return (0, _jsxRuntime.jsx)(_components.TextareaControl, {
-      className: classes,
-      ...otherProps
-    });
-  }
-
-}
-
-var _default = TextareaControl;
-exports.default = _default;