@plusscommunities/pluss-feature-builder-web-a 1.0.7 → 1.0.9-beta.3

package/src/actions/wizardActions.js

@@ -1,228 +0,0 @@
-import {
-	selectFormTitle,
-	selectFormIcon,
-	selectFormDisplayName,
-	selectFormLayout,
-	selectFormFields,
-} from "../selectors/featureBuilderSelectors";
-
-import { clearFormSubmissionState } from "./formActions";
-
-import { values } from "../values.config";
-
-// Wizard action types
-const REDUCER_PREFIX = values.reducerKey.toUpperCase();
-export const SET_WIZARD_MODE = `${REDUCER_PREFIX}_SET_WIZARD_MODE`;
-export const SET_NAVIGATION_STATE = `${REDUCER_PREFIX}_SET_NAVIGATION_STATE`;
-export const UPDATE_STEP_VALIDATION = `${REDUCER_PREFIX}_UPDATE_STEP_VALIDATION`;
-export const MARK_STEP_COMPLETE = `${REDUCER_PREFIX}_MARK_STEP_COMPLETE`;
-export const RESET_WIZARD_STATE = `${REDUCER_PREFIX}_RESET_WIZARD_STATE`;
-export const VALIDATE_AND_UPDATE_STEP = `${REDUCER_PREFIX}_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()[values.reducerKey];
-	const currentStep = state?.wizard?.navigation?.currentStep;
-
-	// Clear form submission state when changing steps
-	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?.trim().length > 0;
-			const hasDisplayName = form.displayName?.trim().length > 0;
-			const hasIcon = 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?.some(
-				(field) => field.id === "mandatory-title",
-			);
-			const hasImageField = 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?.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

@@ -1,86 +0,0 @@
-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

@@ -1,130 +0,0 @@
-/* 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

@@ -1,33 +0,0 @@
-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

@@ -1,46 +0,0 @@
-.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;
-	}
-}