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

package/src/selectors/featureBuilderSelectors.js

@@ -0,0 +1,529 @@
+import { values } from "../values.config";
+
+/**
+ * Retrieves the feature builder state from the Redux store
+ *
+ * @param {Object} state - The Redux store state
+ * @returns {Object} The feature builder state or empty object if not found
+ */
+export const getFeatureBuilderState = (state) => state[values.reducerKey] || {};
+
+// ============ FORM SELECTORS ============
+
+/**
+ * Retrieves the form state from the feature builder state
+ *
+ * @param {Object} state - The Redux store state
+ * @returns {Object} The form state object or undefined
+ */
+export const selectFormState = (state) => getFeatureBuilderState(state).form;
+
+/**
+ * Retrieves the form title from the form state
+ *
+ * @param {Object} state - The Redux store state
+ * @returns {string|undefined} The form title or undefined if not set
+ */
+export const selectFormTitle = (state) => {
+	const formState = selectFormState(state);
+	return formState && formState.title;
+};
+
+/**
+ * Retrieves the form icon from the form state
+ *
+ * @param {Object} state - The Redux store state
+ * @returns {string|undefined} The form icon identifier or undefined if not set
+ */
+export const selectFormIcon = (state) => {
+	const formState = selectFormState(state);
+	return formState && formState.icon;
+};
+
+/**
+ * Retrieves the form display name from the form state
+ *
+ * @param {Object} state - The Redux store state
+ * @returns {string|undefined} The form display name or undefined if not set
+ */
+export const selectFormDisplayName = (state) => {
+	const formState = selectFormState(state);
+	return formState && formState.displayName;
+};
+
+/**
+ * Retrieves the form layout from the form state
+ *
+ * @param {Object} state - The Redux store state
+ * @returns {Object|undefined} The form layout object or undefined if not set
+ */
+export const selectFormLayout = (state) => {
+	const formState = selectFormState(state);
+	return formState && formState.layout;
+};
+
+/**
+ * Retrieves the form fields from the form state
+ *
+ * @param {Object} state - The Redux store state
+ * @returns {Array} Array of field definitions or empty array if not set
+ */
+export const selectFormFields = (state) => {
+	const formState = selectFormState(state);
+	return (formState && formState.fields) || [];
+};
+
+export const selectFormField = (fieldId) => (state) =>
+	selectFormFields(state).find((field) => field.id === fieldId);
+
+export const selectFormIsInitial = (state) => {
+	const formState = selectFormState(state);
+	return formState && formState._isInitial;
+};
+export const selectFormIsSubmitting = (state) => {
+	const formState = selectFormState(state);
+	return formState && formState._isSubmitting;
+};
+
+export const selectFormSubmitError = (state) => {
+	const formState = selectFormState(state);
+	return formState && formState._submitError;
+};
+
+export const selectFormSubmitSuccess = (state) => {
+	const formState = selectFormState(state);
+	return formState && formState._submitSuccess;
+};
+
+// ============ DEFINITION SELECTORS ============
+
+export const selectDefinitionState = (state) =>
+	getFeatureBuilderState(state).definition;
+
+export const selectDefinition = (state) => {
+	const definitionState = selectDefinitionState(state);
+	return definitionState && definitionState.definition;
+};
+export const selectDefinitionId = (state) => {
+	const definitionState = selectDefinitionState(state);
+	return definitionState && definitionState.id;
+};
+export const selectDefinitionIsLoading = (state) => {
+	const definitionState = selectDefinitionState(state);
+	return definitionState && definitionState.isLoading;
+};
+export const selectDefinitionError = (state) => {
+	const definitionState = selectDefinitionState(state);
+	return definitionState && definitionState.error;
+};
+export const selectDefinitionIsCreating = (state) => {
+	const definitionState = selectDefinitionState(state);
+	return definitionState && definitionState.isCreating;
+};
+export const selectDefinitionIsEditing = (state) => {
+	const definitionState = selectDefinitionState(state);
+	return definitionState && definitionState.isEditing;
+};
+
+// Check if we have a definition loaded
+export const selectHasDefinition = (state) => !!selectDefinition(state);
+
+// ============ LISTINGS SELECTORS ============
+
+export const selectListingsState = (state) =>
+	getFeatureBuilderState(state).listings;
+
+export const selectListings = (state) => {
+	const listingsState = selectListingsState(state);
+	return (listingsState && listingsState.listings) || [];
+};
+export const selectListingsIsLoading = (state) => {
+	const listingsState = selectListingsState(state);
+	return listingsState && listingsState.isLoading;
+};
+export const selectListingsError = (state) => {
+	const listingsState = selectListingsState(state);
+	return listingsState && listingsState.error;
+};
+export const selectListingsIsCreating = (state) => {
+	const listingsState = selectListingsState(state);
+	return listingsState && listingsState.isCreating;
+};
+export const selectListingsIsEditing = (state) => {
+	const listingsState = selectListingsState(state);
+	return listingsState && listingsState.isEditing;
+};
+export const selectListingsIsDeleting = (state) => {
+	const listingsState = selectListingsState(state);
+	return listingsState && listingsState.isDeleting;
+};
+export const selectListingsIsRestoring = (state) => {
+	const listingsState = selectListingsState(state);
+	return listingsState && listingsState.isRestoring;
+};
+export const selectListingsIsInitiallyLoaded = (state) => {
+	const listingsState = selectListingsState(state);
+	return listingsState && listingsState.isInitiallyLoaded;
+};
+
+// Get a specific listing by ID
+export const selectListingById = (listingId) => (state) => {
+	const listings = selectListings(state);
+
+	if (!listingId) {
+		return null;
+	}
+
+	const found = listings.find((listing) => {
+		const id = listing.id || listing._id;
+		return id === listingId;
+	});
+
+	return found;
+};
+
+// ============ SOFT DELETE SELECTORS ============
+
+// Get active (non-deleted) listings
+export const selectActiveListings = (state) => {
+	return selectListings(state).filter((listing) => !listing.deletedAt);
+};
+
+// Get deleted listings
+export const selectDeletedListings = (state) => {
+	return selectListings(state).filter((listing) => listing.deletedAt);
+};
+
+// Check if there are any deleted listings
+export const selectHasDeletedListings = (state) => {
+	return selectDeletedListings(state).length > 0;
+};
+
+// Check if there are any active listings
+export const selectHasActiveListings = (state) => {
+	return selectActiveListings(state).length > 0;
+};
+
+// Get count of deleted listings
+export const selectDeletedListingsCount = (state) => {
+	return selectDeletedListings(state).length;
+};
+
+// ============ COMBINED SELECTORS ============
+
+// Get the current feature definition ID (either from definition or fallback to config)
+export const selectCurrentFeatureDefinitionId = (state) =>
+	selectDefinitionId(state) || values.featureId;
+
+// Check if there are any unsaved changes in the form
+export const selectHasUnsavedChanges = (state) => {
+	const definition = selectDefinition(state);
+	const formTitle = selectFormTitle(state);
+	const formIcon = selectFormIcon(state);
+	const formDisplayName = selectFormDisplayName(state);
+	const formLayout = selectFormLayout(state);
+
+	if (!definition) return false;
+
+	return (
+		definition.title !== formTitle ||
+		definition.icon !== formIcon ||
+		definition.displayName !== formDisplayName ||
+		JSON.stringify(definition.layout) !== JSON.stringify(formLayout)
+	);
+};
+
+// Get validation state for the form
+export const selectFormValidation = (state) => {
+	const formFields = selectFormFields(state);
+	const title = selectFormTitle(state);
+	const displayName = selectFormDisplayName(state);
+	const icon = selectFormIcon(state);
+
+	const hasTitle = title && title.trim().length > 0;
+	const hasDisplayName = displayName && displayName.trim().length > 0;
+	const hasIcon = icon && icon.length > 0;
+	const hasValidFields = formFields.every((field) => {
+		if (
+			field.isMandatory &&
+			(field.type === "text" ||
+				field.type === "description" ||
+				field.type === "title" ||
+				field.type === "image" ||
+				field.type === "feature-image" ||
+				field.type === "file" ||
+				field.type === "cta")
+		) {
+			return field.values.label && field.values.label.trim().length > 0;
+		}
+		return true;
+	});
+
+	// Check summary field validation
+	const descriptionFields = formFields.filter(
+		(field) => field.type === "description",
+	);
+	const summaryFields = descriptionFields.filter(
+		(field) => field.values && field.values.useAsSummary === true,
+	);
+	const hasValidSummaryFields = summaryFields.length <= 1; // At most one summary field allowed
+
+	return {
+		isValid:
+			hasTitle &&
+			hasDisplayName &&
+			hasIcon &&
+			hasValidFields &&
+			hasValidSummaryFields,
+		hasTitle,
+		hasDisplayName,
+		hasIcon,
+		hasValidFields,
+		hasValidSummaryFields,
+		errors: {
+			title: !hasTitle ? "Title is required" : null,
+			displayName: !hasDisplayName ? "Display name is required" : null,
+			icon: !hasIcon ? "Icon is required" : null,
+			fields: !hasValidFields ? "Some required fields are missing" : null,
+			summary: !hasValidSummaryFields
+				? "Only one description field can be used as preview text"
+				: null,
+		},
+	};
+};
+
+// ============ WIZARD SELECTORS ============
+
+export const selectWizardState = (state) =>
+	getFeatureBuilderState(state).wizard;
+
+export const selectWizardMode = (state) => {
+	const wizardState = selectWizardState(state);
+	return wizardState && wizardState.mode;
+};
+
+// Mode detection selectors - wizard mode is the SINGLE SOURCE OF TRUTH for create/edit mode
+// Wizard mode is automatically synchronized with definition state through dispatched actions
+export const selectIsCreateMode = (state) =>
+	selectWizardMode(state) === "create";
+
+export const selectIsEditMode = (state) => selectWizardMode(state) === "edit";
+
+export const selectNavigationState = (state) => {
+	const wizardState = selectWizardState(state);
+	return wizardState && wizardState.navigation;
+};
+
+export const selectCurrentStep = (state) => {
+	const navigationState = selectNavigationState(state);
+	return navigationState && navigationState.currentStep;
+};
+
+export const selectCanGoBack = (state) => {
+	const navigationState = selectNavigationState(state);
+	return navigationState && navigationState.canGoBack;
+};
+
+export const selectPreviousStep = (state) => {
+	const navigationState = selectNavigationState(state);
+	return navigationState && navigationState.previousStep;
+};
+
+export const selectCanGoForward = (state) => {
+	const navigationState = selectNavigationState(state);
+	return navigationState && navigationState.canGoForward;
+};
+
+export const selectStepValidation = (state) => {
+	const wizardState = selectWizardState(state);
+	return wizardState && wizardState.stepValidation;
+};
+
+export const selectStepValidationState = (step) => (state) => {
+	const stepValidation = selectStepValidation(state);
+	return stepValidation && stepValidation[step];
+};
+
+export const selectIsStepValid = (step) => (state) => {
+	const stepValidationState = selectStepValidationState(step)(state);
+	return stepValidationState && stepValidationState.isValid;
+};
+
+export const selectStepErrors = (step) => (state) => {
+	const stepValidationState = selectStepValidationState(step)(state);
+	return stepValidationState ? stepValidationState.errors : {};
+};
+
+export const selectStepCompletion = (state) => {
+	const wizardState = selectWizardState(state);
+	return wizardState && wizardState.stepCompletion;
+};
+
+export const selectIsStepComplete = (step) => (state) => {
+	const stepCompletion = selectStepCompletion(state);
+	return stepCompletion && stepCompletion[step];
+};
+
+export const selectAllStepsComplete = (state) => {
+	const stepCompletion = selectStepCompletion(state);
+	if (!stepCompletion) return false;
+	return (
+		stepCompletion.overview && stepCompletion.fields && stepCompletion.layout
+	);
+};
+
+export const selectStepProgress = (state) => {
+	const stepCompletion = selectStepCompletion(state);
+	if (!stepCompletion) return { completed: 0, total: 3, percentage: 0 };
+
+	const completed = Object.values(stepCompletion).filter(Boolean).length;
+	const total = Object.keys(stepCompletion).length;
+	const percentage = Math.round((completed / total) * 100);
+
+	return { completed, total, percentage };
+};
+
+// Determine initial wizard mode based on definition existence
+export const selectInitialWizardMode = (state) => {
+	const hasDefinition = selectHasDefinition(state);
+	return hasDefinition ? "edit" : "create";
+};
+
+// Check if current step should be accessible in current mode
+export const selectIsStepAccessible = (step) => (state) => {
+	const mode = selectWizardMode(state);
+	const currentStep = selectCurrentStep(state);
+
+	if (mode === "edit") {
+		// In edit mode, all steps are accessible
+		return true;
+	}
+
+	// In create mode, check if we can access this step
+	switch (step) {
+		case "welcome":
+			return !selectHasDefinition(state);
+		case "overview":
+		case "fields":
+		case "layout":
+			// In create mode, can only access if we're not on welcome screen
+			return currentStep !== "welcome";
+		default:
+			return false;
+	}
+};
+
+// ============ LISTING UI SELECTORS ============
+
+// Get current sort method
+export const selectSortBy = (state) => {
+	const listingsState = selectListingsState(state);
+	return listingsState && listingsState.sortBy
+		? listingsState.sortBy
+		: "newest";
+};
+
+// Get show deleted toggle state
+export const selectShowDeleted = (state) => {
+	const listingsState = selectListingsState(state);
+	return listingsState && listingsState.showDeleted
+		? listingsState.showDeleted
+		: false;
+};
+
+// Get sorted and filtered listings
+export const selectSortedListings = (state) => {
+	const showDeleted = selectShowDeleted(state);
+	const sortBy = selectSortBy(state);
+	const activeListings = selectActiveListings(state);
+	const deletedListings = selectDeletedListings(state);
+
+	// Determine which listings to include
+	let listingsToShow = activeListings;
+	if (showDeleted) {
+		listingsToShow = [...activeListings, ...deletedListings];
+	}
+
+	// Sort the listings
+	switch (sortBy) {
+		case "newest":
+			return [...listingsToShow].sort((a, b) => {
+				const dateA = a.createdAt || a.order;
+				const dateB = b.createdAt || b.order;
+				return new Date(dateB) - new Date(dateA);
+			});
+		case "oldest":
+			return [...listingsToShow].sort((a, b) => {
+				const dateA = a.createdAt || a.order;
+				const dateB = b.createdAt || b.order;
+				return new Date(dateA) - new Date(dateB);
+			});
+		case "az":
+			return [...listingsToShow].sort((a, b) => {
+				const titleA = (a.fields && a.fields["mandatory-title"]) || "";
+				const titleB = (b.fields && b.fields["mandatory-title"]) || "";
+				return titleA.localeCompare(titleB);
+			});
+		case "za":
+			return [...listingsToShow].sort((a, b) => {
+				const titleA = (a.fields && a.fields["mandatory-title"]) || "";
+				const titleB = (b.fields && b.fields["mandatory-title"]) || "";
+				return titleB.localeCompare(titleA);
+			});
+		default:
+			return listingsToShow;
+	}
+};
+
+// ============ SUMMARY FIELD SELECTORS ============
+
+/**
+ * Get the description field that is marked as summary field
+ *
+ * @param {Object} state - The Redux store state
+ * @returns {Object|null} The field object marked as summary, or null if none found
+ */
+export const selectSummaryDescriptionField = (state) => {
+	const fields = selectFormFields(state);
+	return (
+		fields.find(
+			(field) =>
+				field.type === "description" &&
+				field.values &&
+				field.values.useAsSummary === true,
+		) || null
+	);
+};
+
+/**
+ * Get the field ID of the description field marked as summary
+ *
+ * @param {Object} state - The Redux store state
+ * @returns {string|null} The field ID marked as summary, or null if none found
+ */
+export const selectSummaryDescriptionFieldId = (state) => {
+	const summaryField = selectSummaryDescriptionField(state);
+	return summaryField ? summaryField.id : null;
+};
+
+/**
+ * Extract summary content from listing data based on the summary field configuration
+ *
+ * @param {Object} state - The Redux store state
+ * @param {Object} listing - The listing object containing field values
+ * @returns {string} The summary content or empty string if not found
+ */
+export const getSummaryDescriptionFromListing = (state, listing) => {
+	if (!listing || !listing.fields) {
+		return "";
+	}
+
+	const summaryField = selectSummaryDescriptionField(state);
+	if (!summaryField) {
+		// If no summary field is configured, return empty string
+		return "";
+	}
+
+	// Get the value from the listing's fields using the summary field's ID
+	return listing.fields[summaryField.id] || "";
+};

package/src/types/index.js

@@ -0,0 +1,91 @@
+/**
+ * Core type definitions for the Feature Builder
+ * This file contains JSDoc type definitions for all major entities
+ */
+
+/**
+ * @typedef {Object} Field
+ * @property {string} id - Unique identifier for the field
+ * @property {string} type - Field type (text, title, description, image, file, cta, feature-image, gallery)
+ * @property {string} label - Display label for the field
+ * @property {boolean} required - Whether the field is required
+ * @property {string} [placeholder] - Placeholder text for input fields
+ * @property {string} [helpText] - Help text displayed below the field
+ * @property {Object} [validation] - Validation rules for the field
+ * @property {Object} [options] - Additional options specific to field type
+ * @property {number} [order] - Display order of the field
+ */
+
+/**
+ * @typedef {Object} FormState
+ * @property {string} id - Feature definition ID
+ * @property {string} displayName - Display name for the feature
+ * @property {string} [description] - Description of the feature
+ * @property {string} icon - Icon identifier for the feature
+ * @property {Field[]} fields - Array of field definitions
+ * @property {Object} layout - Layout configuration
+ * @property {boolean} isInitial - Whether this is the initial state
+ * @property {boolean} isDirty - Whether the form has unsaved changes
+ * @property {Object} validation - Form validation state
+ */
+
+/**
+ * @typedef {Object} Listing
+ * @property {string} id - Unique identifier for the listing
+ * @property {string} featureDefinitionId - ID of the feature definition this belongs to
+ * @property {string} siteId - Site ID where this listing belongs
+ * @property {string} [title] - Listing title
+ * @property {string} [description] - Listing description
+ * @property {Object} [fieldValues] - Key-value pairs of field data
+ * @property {boolean} isActive - Whether the listing is active
+ * @property {boolean} isDeleted - Whether the listing is soft-deleted
+ * @property {string} [createdBy] - User ID who created this listing
+ * @property {string} [updatedBy] - User ID who last updated this listing
+ * @property {string} createdAt - Creation timestamp
+ * @property {string} updatedAt - Last update timestamp
+ */
+
+/**
+ * @typedef {Object} FeatureDefinition
+ * @property {string} id - Unique identifier for the feature definition
+ * @property {string} displayName - Human-readable name for the feature
+ * @property {string} [description] - Description of what the feature does
+ * @property {string} icon - Icon identifier
+ * @property {Field[]} fields - Array of field definitions
+ * @property {Object} layout - Layout configuration
+ * @property {boolean} isActive - Whether the feature definition is active
+ * @property {string} [createdBy] - User ID who created this feature definition
+ * @property {string} createdAt - Creation timestamp
+ * @property {string} updatedAt - Last update timestamp
+ */
+
+/**
+ * @typedef {Object} WizardState
+ * @property {string} mode - Current wizard mode ('create' | 'edit')
+ * @property {number} currentStep - Current step index
+ * @property {Object} validation - Validation state for each step
+ * @property {boolean} canProceed - Whether user can proceed to next step
+ * @property {boolean} isComplete - Whether wizard is complete
+ */
+
+/**
+ * @typedef {Object} ApiResponse
+ * @property {boolean} success - Whether the API call was successful
+ * @property {*} data - Response data payload
+ * @property {string} [message] - Optional message from the server
+ * @property {string} [error] - Error message if the call failed
+ */
+
+/**
+ * @typedef {Object} SortConfig
+ * @property {string} field - Field to sort by
+ * @property {string} direction - Sort direction ('asc' | 'desc')
+ */
+
+/**
+ * @typedef {Object} FilterConfig
+ * @property {string} [search] - Search term
+ * @property {boolean} [showDeleted] - Whether to include deleted items
+ * @property {Object} [fieldFilters] - Additional field-based filters
+ */
+

package/src/utils/textUtils.js

@@ -0,0 +1,89 @@
+/**
+ * Text utility functions for consistent formatting throughout the application
+ */
+
+/**
+ * Converts a string to Title Case (first letter of each word capitalized)
+ * Handles null, undefined, and empty string cases safely
+ *
+ * @param {string} text - The text to convert to Title Case
+ * @param {string} [fallback=""] - Fallback text if input is null/undefined
+ * @returns {string} - Title Cased text or fallback
+ *
+ * @example
+ * toTitleCase("hello world") // returns "Hello World"
+ * toTitleCase("feature builder") // returns "Feature Builder"
+ * toTitleCase("") // returns ""
+ * toTitleCase(null) // returns ""
+ * toTitleCase(undefined, "Default") // returns "Default"
+ */
+export const toTitleCase = (text, fallback = "") => {
+	if (text === null || text === undefined) {
+		return fallback;
+	}
+
+	if (typeof text !== "string") {
+		return fallback;
+	}
+
+	if (text.length === 0) {
+		return fallback;
+	}
+
+	return text
+		.toLowerCase()
+		.split(" ")
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+		.join(" ");
+};
+
+/**
+ * Capitalizes the first character of a string while preserving the rest
+ * Handles null, undefined, and empty string cases safely
+ *
+ * @param {string} text - The text to capitalize
+ * @param {string} [fallback=""] - Fallback text if input is null/undefined
+ * @returns {string} - Capitalized text or fallback
+ *
+ * @example
+ * capitalizeText("hello") // returns "Hello"
+ * capitalizeText("WORLD") // returns "WORLD"
+ * capitalizeText("") // returns ""
+ * capitalizeText(null) // returns ""
+ * capitalizeText(undefined, "item") // returns "item"
+ */
+export const capitalizeText = (text, fallback = "") => {
+	if (text === null || text === undefined) {
+		return fallback;
+	}
+
+	if (typeof text !== "string") {
+		return fallback;
+	}
+
+	if (text.length === 0) {
+		return fallback;
+	}
+
+	return text.charAt(0).toUpperCase() + text.slice(1);
+};
+
+/**
+ * Capitalizes text and ensures it's not empty by providing a fallback
+ *
+ * @param {string} text - The text to capitalize
+ * @param {string} fallback - Fallback text if input is empty/null/undefined
+ * @returns {string} - Capitalized text or fallback
+ *
+ * @example
+ * capitalizeTextWithFallback("hello", "Item") // returns "Hello"
+ * capitalizeTextWithFallback("", "Item") // returns "Item"
+ * capitalizeTextWithFallback(null, "Item") // returns "Item"
+ */
+export const capitalizeTextWithFallback = (text, fallback) => {
+	if (!text || (typeof text === "string" && text.trim().length === 0)) {
+		return capitalizeText(fallback, "");
+	}
+
+	return capitalizeText(text, fallback);
+};