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

package/src/selectors/featureBuilderSelectors.js

@@ -1,533 +0,0 @@
-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?.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?.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?.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?.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?.fields || [];
-};
-
-export const selectFormField = (fieldId) => (state) =>
-	selectFormFields(state).find((field) => field.id === fieldId);
-
-export const selectFormIsInitial = (state) => {
-	const formState = selectFormState(state);
-	return formState?._isInitial;
-};
-export const selectFormIsSubmitting = (state) => {
-	const formState = selectFormState(state);
-	return formState?._isSubmitting;
-};
-
-export const selectFormSubmitError = (state) => {
-	const formState = selectFormState(state);
-	return formState?._submitError;
-};
-
-export const selectFormSubmitSuccess = (state) => {
-	const formState = selectFormState(state);
-	return formState?._submitSuccess;
-};
-
-// ============ DEFINITION SELECTORS ============
-
-export const selectDefinitionState = (state) =>
-	getFeatureBuilderState(state).definition;
-
-export const selectDefinition = (state) => {
-	const definitionState = selectDefinitionState(state);
-	return definitionState?.definition;
-};
-export const selectDefinitionId = (state) => {
-	const definitionState = selectDefinitionState(state);
-	return definitionState?.id;
-};
-export const selectDefinitionIsLoading = (state) => {
-	const definitionState = selectDefinitionState(state);
-	return definitionState?.isLoading;
-};
-export const selectDefinitionError = (state) => {
-	const definitionState = selectDefinitionState(state);
-	return definitionState?.error;
-};
-export const selectDefinitionIsCreating = (state) => {
-	const definitionState = selectDefinitionState(state);
-	return definitionState?.isCreating;
-};
-export const selectDefinitionIsEditing = (state) => {
-	const definitionState = selectDefinitionState(state);
-	return definitionState?.isEditing;
-};
-export const selectDefinitionMode = (state) => {
-	const definitionState = selectDefinitionState(state);
-	return definitionState?.mode;
-};
-
-// Check if we have a definition loaded or if we've determined the mode
-// This is used by hiddenFromFeaturePicker to determine if feature should be shown
-export const selectHasDefinition = (state) => {
-	const definition = selectDefinition(state);
-	return !!definition;
-};
-
-// ============ LISTINGS SELECTORS ============
-
-export const selectListingsState = (state) =>
-	getFeatureBuilderState(state).listings;
-
-export const selectListings = (state) => {
-	const listingsState = selectListingsState(state);
-	return listingsState?.listings || [];
-};
-export const selectListingsIsLoading = (state) => {
-	const listingsState = selectListingsState(state);
-	return listingsState?.isLoading;
-};
-export const selectListingsError = (state) => {
-	const listingsState = selectListingsState(state);
-	return listingsState?.error;
-};
-export const selectListingsIsCreating = (state) => {
-	const listingsState = selectListingsState(state);
-	return listingsState?.isCreating;
-};
-export const selectListingsIsEditing = (state) => {
-	const listingsState = selectListingsState(state);
-	return listingsState?.isEditing;
-};
-export const selectListingsIsDeleting = (state) => {
-	const listingsState = selectListingsState(state);
-	return listingsState?.isDeleting;
-};
-export const selectListingsIsRestoring = (state) => {
-	const listingsState = selectListingsState(state);
-	return listingsState?.isRestoring;
-};
-export const selectListingsIsInitiallyLoaded = (state) => {
-	const listingsState = selectListingsState(state);
-	return 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?.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?.navigation;
-};
-
-export const selectCurrentStep = (state) => {
-	const navigationState = selectNavigationState(state);
-	return navigationState?.currentStep;
-};
-
-export const selectCanGoBack = (state) => {
-	const navigationState = selectNavigationState(state);
-	return navigationState?.canGoBack;
-};
-
-export const selectPreviousStep = (state) => {
-	const navigationState = selectNavigationState(state);
-	return navigationState?.previousStep;
-};
-
-export const selectCanGoForward = (state) => {
-	const navigationState = selectNavigationState(state);
-	return navigationState?.canGoForward;
-};
-
-export const selectStepValidation = (state) => {
-	const wizardState = selectWizardState(state);
-	return wizardState?.stepValidation;
-};
-
-export const selectStepValidationState = (step) => (state) => {
-	const stepValidation = selectStepValidation(state);
-	return stepValidation?.[step];
-};
-
-export const selectIsStepValid = (step) => (state) => {
-	const stepValidationState = selectStepValidationState(step)(state);
-	return stepValidationState?.isValid;
-};
-
-export const selectStepErrors = (step) => (state) => {
-	const stepValidationState = selectStepValidationState(step)(state);
-	return stepValidationState?.errors || {};
-};
-
-export const selectStepCompletion = (state) => {
-	const wizardState = selectWizardState(state);
-	return wizardState?.stepCompletion;
-};
-
-export const selectIsStepComplete = (step) => (state) => {
-	const stepCompletion = selectStepCompletion(state);
-	return 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?.sortBy || "newest";
-};
-
-// Get show deleted toggle state
-export const selectShowDeleted = (state) => {
-	const listingsState = selectListingsState(state);
-	return 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

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

@@ -1,89 +0,0 @@
-/**
- * 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);
-};