@plusscommunities/pluss-feature-builder-web-d 1.0.2-beta.0

package/src/actions/wizardActions.js

@@ -0,0 +1,240 @@
+/**
+ * Wizard Actions for Feature Builder
+ * Manages wizard state including navigation, step validation, and mode switching
+ * Provides validation logic for overview, fields, and layout steps
+ * Coordinates with form state and step progression
+ *
+ * @namespace wizardActions
+ */
+
+// Import selectors for form state access
+import {
+	selectFormTitle,
+	selectFormIcon,
+	selectFormDisplayName,
+	selectFormLayout,
+	selectFormFields,
+} from "../selectors/featureBuilderSelectors";
+
+// Wizard action types
+export const SET_WIZARD_MODE = "SET_WIZARD_MODE";
+export const SET_NAVIGATION_STATE = "SET_NAVIGATION_STATE";
+export const UPDATE_STEP_VALIDATION = "UPDATE_STEP_VALIDATION";
+export const MARK_STEP_COMPLETE = "MARK_STEP_COMPLETE";
+export const RESET_WIZARD_STATE = "RESET_WIZARD_STATE";
+export const VALIDATE_AND_UPDATE_STEP = "VALIDATE_AND_UPDATE_STEP";
+
+// Mode setters
+export const setWizardMode = (mode) => ({
+	type: SET_WIZARD_MODE,
+	payload: mode,
+});
+
+// Navigation actions
+export const setNavigationState = (navigationState) => ({
+	type: SET_NAVIGATION_STATE,
+	payload: navigationState,
+});
+
+export const setCurrentStep = (step, previousStep = null) => ({
+	type: SET_NAVIGATION_STATE,
+	payload: {
+		currentStep: step,
+		previousStep,
+		canGoBack: step !== "welcome",
+		canGoForward: true,
+	},
+});
+
+export const goToStep = (step) => (dispatch, getState) => {
+	const state = getState()[require("../values.config").reducerKey];
+	const currentStep =
+		state &&
+		state.wizard &&
+		state.wizard.navigation &&
+		state.wizard.navigation.currentStep;
+
+	// Clear form submission state when changing steps
+	const { clearFormSubmissionState } = require("./formActions");
+	dispatch(clearFormSubmissionState());
+
+	dispatch(setCurrentStep(step, currentStep));
+};
+
+export const updateStepValidation = (step, isValid, errors = {}) => ({
+	type: UPDATE_STEP_VALIDATION,
+	payload: {
+		step,
+		isValid,
+		errors,
+	},
+});
+
+export const validateAndUpdateStep = (step) => (dispatch, getState) => {
+	// Use existing selectors to get form data
+	const state = getState();
+	const title = selectFormTitle(state);
+	const icon = selectFormIcon(state);
+	const displayName = selectFormDisplayName(state);
+	const layout = selectFormLayout(state);
+	const fields = selectFormFields(state);
+
+	const form = { title, icon, displayName, layout, fields };
+
+	const { isValid, errors } = getFormValidation(form, step);
+
+	dispatch(updateStepValidation(step, isValid, errors));
+
+	// If valid, mark as complete
+	if (isValid) {
+		dispatch({
+			type: MARK_STEP_COMPLETE,
+			payload: step,
+		});
+	}
+
+	return { isValid, errors };
+};
+
+// Step completion
+export const markStepComplete = (step) => ({
+	type: MARK_STEP_COMPLETE,
+	payload: step,
+});
+
+// Reset wizard state
+export const resetWizardState = () => ({
+	type: RESET_WIZARD_STATE,
+});
+
+const getFormValidation = (form, step) => {
+	// Return validation results for undefined form (prevent crashes)
+	if (!form) {
+		switch (step) {
+			case "overview":
+				return {
+					isValid: false,
+					errors: {
+						title: "Title is required",
+						displayName: "Display name is required",
+						icon: "Icon is required",
+					},
+				};
+			case "fields":
+				return {
+					isValid: false,
+					errors: {
+						missingTitle: "Title field is required",
+						missingImage: "Feature image field is required",
+						fieldLabels: "Some fields are missing labels",
+					},
+				};
+			case "layout":
+				return {
+					isValid: false,
+					errors: {
+						layoutType: "Layout type is required",
+					},
+				};
+			default:
+				return { isValid: false, errors: {} };
+		}
+	}
+
+	switch (step) {
+		case "overview": {
+			const hasTitle = form.title && form.title.trim().length > 0;
+			const hasDisplayName =
+				form.displayName && form.displayName.trim().length > 0;
+			const hasIcon = form.icon && form.icon.length > 0;
+
+			return {
+				isValid: hasTitle && hasDisplayName && hasIcon,
+				errors: {
+					title: !hasTitle ? "Title is required" : null,
+					displayName: !hasDisplayName ? "Display name is required" : null,
+					icon: !hasIcon ? "Icon is required" : null,
+				},
+			};
+		}
+		case "fields": {
+			const hasTitleField =
+				form.fields &&
+				form.fields.some((field) => field.id === "mandatory-title");
+			const hasImageField =
+				form.fields &&
+				form.fields.some((field) => field.id === "mandatory-feature-image");
+
+			// Check each field for missing labels and create field-specific errors
+			const fieldErrors = {};
+			let allFieldsHaveLabels = true;
+
+			if (form.fields) {
+				form.fields.forEach((field) => {
+					if (
+						(field.type === "text" ||
+							field.type === "description" ||
+							field.type === "title" ||
+							field.type === "image" ||
+							field.type === "gallery" ||
+							field.type === "feature-image" ||
+							field.type === "file" ||
+							field.type === "cta") &&
+						field.values
+					) {
+						if (!field.values.label || field.values.label.trim().length === 0) {
+							fieldErrors[field.id] = "Field label is required";
+							allFieldsHaveLabels = false;
+						}
+					}
+				});
+			}
+
+			return {
+				isValid: hasTitleField && hasImageField && allFieldsHaveLabels,
+				errors: {
+					missingTitle: !hasTitleField ? "Title field is required" : null,
+					missingImage: !hasImageField
+						? "Feature image field is required"
+						: null,
+					...fieldErrors,
+				},
+			};
+		}
+		case "layout": {
+			const hasLayoutType =
+				form.layout && form.layout.type && form.layout.type.length > 0;
+			return {
+				isValid: hasLayoutType,
+				errors: {
+					layoutType: !hasLayoutType ? "Layout type is required" : null,
+				},
+			};
+		}
+		default:
+			return { isValid: true, errors: {} };
+	}
+};
+
+export const setWizardModeAndSave = (mode) => (dispatch) => {
+	dispatch(setWizardMode(mode));
+};
+
+export const setCurrentStepAndSave =
+	(step, previousStep = null) =>
+	(dispatch) => {
+		dispatch(setCurrentStep(step, previousStep));
+	};
+
+export const updateStepValidationAndSave =
+	(step, isValid, errors = {}) =>
+	(dispatch) => {
+		dispatch(updateStepValidation(step, isValid, errors));
+		if (isValid) {
+			dispatch(markStepComplete(step));
+		}
+	};
+
+export const markStepCompleteAndSave = (step) => (dispatch) => {
+	dispatch(markStepComplete(step));
+};

package/src/components/ActivityCardExample.jsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { Button } from "../components";
+import { PlussCore } from "../feature.config";
+const { Text } = PlussCore.Components;
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUserCircle, faClock } from "@fortawesome/free-solid-svg-icons";
+import { capitalizeTextWithFallback } from "../utils/textUtils";
+import styles from "./ActivityCardExample.module.css";
+
+const ActivityCardExample = ({ displayName }) => {
+	// Handle "a/an" grammar correctly
+	const getArticle = (name) => {
+		if (!name) return "a";
+		const firstChar = name.toLowerCase().charAt(0);
+		// Handle vowel sounds and special cases
+		return ["a", "e", "i", "o", "u"].includes(firstChar) ? "an" : "a";
+	};
+
+	// Handle button click - show that it's a display-only button
+	const handleButtonClick = () => {
+		alert(
+			"This is just a preview of how your button will look. In the actual application, this button would create a new " +
+				(displayName || "item") +
+				".",
+		);
+	};
+
+	const exampleTitle = displayName
+		? `${capitalizeTextWithFallback(displayName, "")} Example`
+		: "Example Item";
+
+	return (
+		<div className={styles.activityCardExample}>
+			<Text type="formLabel" className={styles.title}>
+				Activity Feed Example
+			</Text>
+
+			{/* Additional info */}
+			<div className={styles.additionalInfo}>
+				<Text type="help" className={styles.infoText}>
+					This shows how your single page name will appear in real activity
+					feeds and on buttons throughout the application.
+				</Text>
+			</div>
+
+			<div className={styles.activityCard}>
+				{/* User Avatar */}
+				<div className={styles.profilePic}>
+					<FontAwesomeIcon icon={faUserCircle} className={styles.avatarIcon} />
+				</div>
+
+				{/* Activity Content */}
+				<div className={styles.activityContent}>
+					<div className={styles.activityText}>
+						<span className={styles.highlightedUser}>John Smith</span>
+						&nbsp;commented on {getArticle(displayName)}&nbsp;
+						<span className={styles.highlightedFeature}>
+							{capitalizeTextWithFallback(displayName, "item")}
+						</span>
+						:&nbsp;
+						<span className={styles.exampleTitle}>{exampleTitle}</span>
+					</div>
+
+					<div className={styles.activityTime}>
+						<FontAwesomeIcon icon={faClock} className={styles.timeIcon} /> 2
+						minutes ago
+					</div>
+				</div>
+			</div>
+
+			{/* Primary Add Button */}
+			<div className={styles.buttonContainer}>
+				<Button
+					buttonType="primary"
+					leftIcon="plus"
+					isActive
+					onClick={handleButtonClick}
+				>
+					New {capitalizeTextWithFallback(displayName, "Item")}
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default ActivityCardExample;

package/src/components/ActivityCardExample.module.css

@@ -0,0 +1,130 @@
+/* Activity Card Example Component Styles */
+.activityCardExample {
+	margin-top: 16px;
+	margin-bottom: 24px;
+}
+
+.title {
+	margin-bottom: 8px;
+	font-weight: 600;
+	color: var(--active-text);
+}
+
+.activityCard {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+	padding: 16px;
+	background: var(--bg-white);
+	border: 1px solid var(--linegrey);
+	border-radius: 8px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+	transition: box-shadow 0.2s ease;
+	margin-top: 12px;
+}
+
+.activityCard:hover {
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Profile Picture */
+.profilePic {
+	width: 34px;
+	height: 34px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--bg-bluegrey);
+	border-radius: 50%;
+	flex-shrink: 0;
+}
+
+.avatarIcon {
+	font-size: 20px;
+	color: var(--text-light);
+}
+
+/* Activity Content */
+.activityContent {
+	flex: 1;
+	min-width: 0;
+}
+
+.activityText {
+	font-size: 14px;
+	line-height: 1.4;
+	color: var(--active-text);
+	margin-bottom: 4px;
+	word-wrap: break-word;
+}
+
+.highlightedUser {
+	font-weight: 600;
+	color: var(--colour-blue);
+}
+
+.highlightedFeature {
+	font-weight: 600;
+	color: var(--colour-blue);
+}
+
+.exampleTitle {
+	color: var(--text-mid);
+	font-style: italic;
+}
+
+/* Activity Time */
+.activityTime {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	font-size: 12px;
+	color: var(--text-light);
+}
+
+.timeIcon {
+	font-size: 10px;
+	color: var(--text-light);
+}
+
+/* Additional Info */
+.additionalInfo {
+	margin-bottom: 8px;
+}
+
+.infoText {
+	font-size: 11px;
+	color: var(--text-light);
+	line-height: 1.3;
+}
+
+/* Primary Add Button */
+.buttonContainer {
+	margin-top: 20px;
+	display: flex;
+	justify-content: flex-start;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+	.activityCard {
+		padding: 12px;
+	}
+
+	.profilePic {
+		width: 30px;
+		height: 30px;
+	}
+
+	.avatarIcon {
+		font-size: 18px;
+	}
+
+	.activityText {
+		font-size: 13px;
+	}
+
+	.activityTime {
+		font-size: 11px;
+	}
+}

package/src/components/BackgroundLoader.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSync } from "@fortawesome/free-solid-svg-icons";
+import styles from "./BackgroundLoader.module.css";
+
+/**
+ * Background Loader component for overlay loading states
+ * Displays a spinning icon with text overlay for async operations
+ * Conditionally renders based on show prop
+ *
+ * @param {Object} props - Component props
+ * @param {string} [props.text="Updating..."] - Text to display alongside spinner
+ * @param {boolean} [props.show=true] - Whether the loader should be visible
+ * @returns {React.ReactElement|null} Background loader overlay or null if hidden
+ *
+ * @example
+ * <BackgroundLoader text="Saving data..." show={isLoading} />
+ *
+ * @example
+ * <BackgroundLoader />
+ */
+const BackgroundLoader = ({ text = "Updating...", show = true }) => {
+	if (!show) return null;
+
+	return (
+		<div className={styles.backgroundLoader}>
+			<FontAwesomeIcon icon={faSync} spin className={styles.icon} />
+			<span className={styles.text}>{text}</span>
+		</div>
+	);
+};
+
+export default BackgroundLoader;

package/src/components/BackgroundLoader.module.css

@@ -0,0 +1,46 @@
+.backgroundLoader {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.5rem 1rem;
+	background: rgba(255, 255, 255, 0.95);
+	border: 1px solid #e9ecef;
+	border-radius: 20px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	font-size: 0.875rem;
+	color: var(--text-bluegrey, #6c7a90);
+	position: fixed;
+	top: 1rem;
+	right: 1rem;
+	z-index: 1000;
+	animation: slideIn 0.3s ease-out;
+}
+
+.icon {
+	color: var(--colour-branding-main, #4a57b7);
+	font-size: 0.875rem;
+}
+
+.text {
+	font-weight: 500;
+}
+
+@keyframes slideIn {
+	from {
+		opacity: 0;
+		transform: translateX(20px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+@media (max-width: 768px) {
+	.backgroundLoader {
+		top: auto;
+		bottom: 1rem;
+		right: 1rem;
+		font-size: 0.75rem;
+	}
+}