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

package/src/components/listing/ListingFileInput.module.css

@@ -0,0 +1,192 @@
+/* Enhanced File Input Styles - Based on existing PlussCore FileInput styling */
+
+/* Main container for enhanced file input */
+.listingFileInput {
+	width: 100%;
+}
+
+/* Drop zone area - reusing existing imageInput styling */
+.listingFileInput__dropZone {
+	width: 100%;
+	margin-bottom: 1rem;
+}
+
+/* Drop zone error state */
+.listingFileInput__dropZone--error {
+	border: 1px solid var(--colour-error);
+	border-radius: var(--border-radius-base);
+	padding: 0.25rem;
+	background-color: var(--colour-error-light, rgba(220, 53, 69, 0.05));
+}
+
+.listingFileInput__dropZone .imageInputOuter-single {
+	width: 100%;
+}
+
+.listingFileInput__dropZone .imageInput {
+	width: 100%;
+	margin-right: 0;
+}
+
+/* File list container */
+.listingFileInput__fileList {
+	margin-top: 1rem;
+}
+
+/* Individual file item */
+.fileListItem {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 0.75rem;
+	background-color: var(--bg-white);
+	margin-bottom: 0.5rem;
+	transition: all var(--transition-base) ease-in-out;
+}
+
+.fileListItem:hover {
+	box-shadow: 0 0 4px var(--colour-branding-action-alpha20);
+}
+
+.fileListItem__icon {
+	color: var(--text-bluegrey);
+	font-size: var(--font-size-base);
+	flex-shrink: 0;
+	width: 1.5rem;
+	text-align: center;
+}
+
+.fileListItem__input {
+	min-width: 0;
+	flex-grow: 1;
+}
+
+.fileListItem__nameInput {
+}
+
+.fileListItem__originalName {
+	flex: 0 1 200px;
+	color: var(--text-bluegrey);
+	font-size: 16px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.fileListItem__actions {
+	flex-shrink: 0;
+}
+
+.fileListItem__removeButton {
+	font-size: 16px;
+	width: 1.75rem;
+	height: 1.75rem;
+	border-radius: var(--border-radius-full);
+	background-color: transparent;
+	border: none;
+	display: flex;
+	color: var(--colour-branding-main);
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+	min-height: auto;
+	transition: all var(--transition-base) ease-in-out;
+}
+
+.fileListItem__removeButton:hover:not(:disabled) {
+	color: var(--colour-branding-light);
+}
+
+.fileListItem__removeButton:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+/* Add more files button */
+.listingFileInput__addMore {
+	margin-top: 0.75rem;
+	text-align: center;
+}
+
+.listingFileInput__addMoreButton {
+	font-size: var(--font-size-sm);
+	padding: 0.5rem 1rem;
+}
+
+/* Upload progress styling */
+.fileListItem--uploading {
+	background-color: var(--colour-branding-secondary-light);
+	border-color: var(--colour-branding-action);
+}
+
+.fileListItem__progress {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: var(--font-size-xs);
+	color: var(--colour-branding-action);
+}
+
+.fileListItem__spinner {
+	color: var(--colour-branding-action);
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+	.fileListItem {
+		flex-direction: column;
+		align-items: stretch;
+		gap: 0.5rem;
+	}
+
+	.fileListItem__icon {
+		text-align: center;
+	}
+
+	.fileListItem__actions {
+		text-align: center;
+	}
+}
+
+/* Integration with existing field styling */
+.listingFileInput__dropZone .imageInput_upload {
+	background-color: var(--bg-white);
+	transition: all var(--transition-base) ease-in-out;
+}
+
+.listingFileInput__dropZone .imageInput_upload:hover {
+	background-color: var(--bg-bluegrey);
+}
+
+.listingFileInput__dropZone .imageInput_dropZoneActive {
+	background-color: var(--bg-bluegrey);
+}
+
+.listingFileInput__dropZone .imageInput_icon {
+	width: 1.5rem;
+	height: 2rem;
+	margin: 0 auto;
+	display: block;
+}
+
+.listingFileInput__dropZone .imageInput_helpText {
+	font-size: var(--font-size-base);
+	color: var(--colour-lightgrey);
+	margin-top: 1.25rem;
+	text-align: center;
+}
+
+.listingFileInput__dropZone .imageInput_button {
+	text-align: center;
+	margin-top: 1rem;
+}

package/src/components/listing/ListingForm.jsx

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { PlussCore } from "../../feature.config";
+const { Components } = PlussCore;
+const { Text, Button } = Components;
+import ListingField from "./ListingField.jsx";
+import styles from "./ListingForm.module.css";
+import formStyles from "../../screens/Form.module.css";
+
+const ListingForm = ({
+	featureDefinition,
+	onSubmit,
+	mode = "create",
+	initialData,
+	onChange,
+	disabled = false,
+	hideSubmitButton = false,
+	formData: externalFormData,
+	setFormData: externalSetFormData,
+	formErrors = {},
+	showErrors = false,
+	formErrorMessage = null, // For form-level validation errors like "Form data is invalid"
+}) => {
+	// Use external state if provided, otherwise use internal state (backward compatibility)
+	const [internalFormData, setInternalFormData] = useState(
+		initialData?.fields || {},
+	);
+	const formData =
+		externalFormData !== undefined ? externalFormData : internalFormData;
+	const setFormData = externalSetFormData || setInternalFormData;
+
+	React.useEffect(() => {
+		// Only update if using internal state
+		if (!externalSetFormData) {
+			setFormData(initialData?.fields || {});
+		}
+	}, [initialData, externalSetFormData]);
+
+	const handleFieldChange = (fieldId, value) => {
+		const newFormData = { ...formData, [fieldId]: value };
+
+		setFormData(newFormData);
+		if (onChange) {
+			onChange();
+		}
+	};
+
+	return (
+		<div className={styles.root}>
+			{/* Form-level error message */}
+			{formErrorMessage && (
+				<div className={formStyles.errorMessageContainer}>
+					<Text className={formStyles.errorMessage}>{formErrorMessage}</Text>
+				</div>
+			)}
+
+			{featureDefinition.fields
+				.slice()
+				.sort((a, b) => a.order - b.order)
+				.map((field) => (
+					<ListingField
+						key={field.id}
+						field={field}
+						value={formData[field.id]}
+						onChange={handleFieldChange}
+						showError={showErrors && formErrors[field.id]}
+						errorMessage={formErrors[field.id]}
+						isActive={showErrors && formErrors[field.id]}
+						disabled={disabled}
+					/>
+				))}
+
+			{!hideSubmitButton && (
+				<Button
+					onClick={() => onSubmit({ fields: formData })}
+					disabled={disabled}
+					isActive={true}
+					buttonType="primary"
+				>
+					{disabled
+						? "Saving..."
+						: mode === "create"
+							? "Create Listing"
+							: "Update Listing"}
+				</Button>
+			)}
+		</div>
+	);
+};
+
+export default ListingForm;

package/src/components/listing/ListingForm.module.css

@@ -0,0 +1,38 @@
+/* ListingForm CSS Module */
+
+/* Block */
+.root {
+	display: flex;
+	flex-direction: column;
+	background-color: var(--bg-white);
+	gap: 1.25rem;
+}
+
+.button {
+	background-color: var(--colour-blue);
+	color: var(--bg-white);
+	border: none;
+	padding: 1rem 1.5rem;
+	border-radius: var(--border-radius-md);
+	cursor: pointer;
+	font-size: var(--font-size-base);
+	font-weight: var(--font-weight-semibold);
+	transition:
+		background-color var(--transition-base) ease,
+		transform var(--transition-fast) ease;
+	min-height: 3rem;
+	box-shadow: 0 2px 4px var(--text-dark-alpha20);
+}
+
+.button:hover:not(.button--disabled) {
+	background-color: var(--colour-darkblue);
+	transform: translateY(-1px);
+	box-shadow: 0 4px 8px var(--text-dark-alpha20);
+}
+
+.button--disabled {
+	background-color: var(--linegrey);
+	cursor: not-allowed;
+	transform: none;
+	box-shadow: none;
+}

package/src/components/listing/ListingGalleryInput.jsx

@@ -0,0 +1,236 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useEffect, useRef, useState } from "react";
+import { ImageInput, Text } from "../../components";
+import { iconImports } from "../../components/iconImports.js";
+import styles from "./ListingField.module.css";
+import galleryStyles from "./ListingGalleryInput.module.css";
+
+const ListingGalleryInput = ({
+	field,
+	value,
+	onChange,
+	showError,
+	errorMessage,
+	disabled = false,
+}) => {
+	const imageInputRef = useRef(null);
+	const [images, setImages] = useState([]);
+	const [validationErrors, setValidationErrors] = useState([]);
+
+	// Initialize images from value prop
+	useEffect(() => {
+		if (Array.isArray(value)) {
+			setImages(value);
+		} else if (value && typeof value === "string") {
+			// Handle legacy single image string
+			setImages([value]);
+		} else {
+			setImages([]);
+		}
+	}, [value]);
+
+	const handleGalleryChange = (imageData) => {
+		let newImages = [];
+
+		// Handle different data structures from ImageInput
+		if (Array.isArray(imageData)) {
+			newImages = imageData
+				.map((img) => {
+					if (typeof img === "object" && img !== null) {
+						return img.url || img.src || img.imageUrl || JSON.stringify(img);
+					}
+					return img;
+				})
+				.filter((img) => img && img !== ""); // Remove empty values
+		} else if (typeof imageData === "object" && imageData !== null) {
+			newImages = [
+				imageData.url ||
+					imageData.src ||
+					imageData.imageUrl ||
+					JSON.stringify(imageData),
+			];
+		} else if (imageData && imageData !== "") {
+			newImages = [imageData];
+		}
+
+		setImages(newImages);
+
+		// Validate images
+		const errors = validateGallery(newImages);
+		setValidationErrors(errors);
+
+		// Pass array to parent
+		onChange(field.id, newImages);
+	};
+
+	const validateGallery = (imageArray) => {
+		const errors = [];
+		const { values } = field;
+
+		// Required field validation
+		if (values.isRequired && (!imageArray || imageArray.length === 0)) {
+			errors.push(`${values.label} is required`);
+		}
+
+		// Minimum images validation
+		if (values.minImages && imageArray.length < values.minImages) {
+			errors.push(
+				`Minimum ${values.minImages} image${values.minImages > 1 ? "s" : ""} required`,
+			);
+		}
+
+		// Maximum images validation
+		if (values.maxImages && imageArray.length > values.maxImages) {
+			errors.push(
+				`Maximum ${values.maxImages} image${values.maxImages > 1 ? "s" : ""} allowed`,
+			);
+		}
+
+		return errors;
+	};
+
+	const hasError = () => {
+		if (showError) return true;
+		return validationErrors.length > 0;
+	};
+
+	const getErrorMessage = () => {
+		if (errorMessage) return errorMessage;
+		if (validationErrors.length > 0) {
+			return validationErrors[0]; // Show first validation error
+		}
+		return `${field.values.label} is required`;
+	};
+
+	const getImageCountText = () => {
+		const { minImages, maxImages } = field.values;
+		const count = images.length;
+
+		if (minImages && maxImages) {
+			return `${count} / ${minImages}-${maxImages} images`;
+		} else if (minImages) {
+			return `${count} / ${minImages}+ images`;
+		} else if (maxImages) {
+			return `${count} / ${maxImages} images`;
+		}
+		return `${count} images`;
+	};
+
+	const removeImage = (indexToRemove) => {
+		const newImages = images.filter((_, index) => index !== indexToRemove);
+		setImages(newImages);
+
+		const errors = validateGallery(newImages);
+		setValidationErrors(errors);
+
+		onChange(field.id, newImages);
+	};
+
+	return (
+		<div>
+			{/* Field header with icon and description */}
+			<div className={styles.listingField__header}>
+				<div className={styles.listingField__icon}>
+					<FontAwesomeIcon icon={iconImports.image} />
+				</div>
+				<div className={styles.listingField__content}>
+					<h3 className={styles.listingField__title}>Image Gallery</h3>
+					<p className={styles.listingField__description}>
+						Upload multiple photos or images to create a gallery
+					</p>
+				</div>
+			</div>
+
+			<Text type="formLabel" className={galleryStyles.formLabel}>
+				{field.values.label}
+				{field.values.isRequired && (
+					<span className={styles.requiredAsterisk}>*</span>
+				)}
+			</Text>
+
+			{/* Image count indicator */}
+			<Text type="help" className={galleryStyles.imageCountText}>
+				{getImageCountText()}
+			</Text>
+
+			<div className={galleryStyles.galleryContainer}>
+				<div className={hasError() ? galleryStyles.galleryErrorWrapper : ""}>
+					<ImageInput
+						ref={imageInputRef}
+						containerStyle={{ width: "100%", height: 200 }}
+						className="imageInputOuter-grid"
+						refreshCallback={handleGalleryChange}
+						hasDefault={null}
+						multiple={true}
+						limit={field.values.maxImages}
+						disabled={disabled}
+						noCompress={false}
+						grid={true}
+						simpleStyle={true}
+					/>
+					{/* ImageInput expects a string URL for hasDefault, but we have an array.
+						 For now, passing null to prevent url.split error */}
+				</div>
+
+				{/* Image preview grid */}
+				{images.length > 0 && (
+					<div className={galleryStyles.imagePreviewContainer}>
+						<Text type="formLabel" className={galleryStyles.formLabel}>
+							Current Images ({images.length})
+						</Text>
+						<div
+							className={galleryStyles.imageGrid}
+							style={{
+								"--columns": Math.min(images.length, 4),
+							}}
+						>
+							{images.map((image, index) => {
+								return (
+									<div key={`image-${index}`} className={galleryStyles.imageItem}>
+										<img
+											src={image}
+											alt={`Gallery item ${index + 1}`}
+											className={galleryStyles.imageThumbnail}
+										/>
+										{!disabled && (
+											<button
+												type="button"
+												onClick={() => removeImage(index)}
+												className={galleryStyles.removeImageButton}
+											>
+												<FontAwesomeIcon icon={iconImports.minusCircle} />
+											</button>
+										)}
+									</div>
+								);
+							})}
+						</div>
+					</div>
+				)}
+
+				{hasError() && (
+					<Text type="help" className={galleryStyles.errorMessage}>
+						{getErrorMessage()}
+					</Text>
+				)}
+			</div>
+
+			{field.values.helpText && (
+				<Text type="help" className={galleryStyles.helpText}>
+					{field.values.helpText}
+				</Text>
+			)}
+
+			{/* Validation hints */}
+			{field.values.minImages || field.values.maxImages ? (
+				<Text type="help" className={galleryStyles.validationHint}>
+					{field.values.minImages && `Min: ${field.values.minImages} images`}
+					{field.values.minImages && field.values.maxImages && " | "}
+					{field.values.maxImages && `Max: ${field.values.maxImages} images`}
+				</Text>
+			) : null}
+		</div>
+	);
+};
+
+export default ListingGalleryInput;

package/src/components/listing/ListingGalleryInput.module.css

@@ -0,0 +1,131 @@
+/* ListingGalleryInput BEM CSS Module */
+
+/* Gallery container styles */
+.galleryContainer {
+	margin-top: 0.75rem;
+}
+
+/* Error border wrapper */
+.galleryErrorWrapper {
+	border: 1px solid var(--colour-error);
+	border-radius: var(--border-radius-base);
+	padding: 0.25rem;
+	background-color: var(--colour-error-light, rgba(220, 53, 69, 0.05));
+}
+
+/* Image preview grid container */
+.imagePreviewContainer {
+	margin-top: 1rem;
+}
+
+.imageGrid {
+	display: grid;
+	grid-template-columns: repeat(var(--columns, 4), 1fr);
+	gap: 1rem;
+	margin-top: 0.5rem;
+}
+
+/* Responsive grid for different screen sizes */
+@media (max-width: 768px) {
+	.imageGrid {
+		grid-template-columns: repeat(3, 1fr);
+		gap: 0.75rem;
+	}
+}
+
+@media (max-width: 480px) {
+	.imageGrid {
+		grid-template-columns: repeat(2, 1fr);
+		gap: 0.5rem;
+	}
+}
+
+/* Individual image item */
+.imageItem {
+	position: relative;
+	border-radius: var(--border-radius-lg);
+	overflow: hidden;
+	background-color: var(--bg-bluegrey);
+	transition:
+		transform var(--transition-base) ease,
+		box-shadow var(--transition-base) ease;
+}
+
+.imageItem:hover {
+	transform: translateY(-2px);
+	box-shadow: var(--shadow-lg);
+}
+
+.imageThumbnail {
+	width: 100%;
+	height: 100px;
+	object-fit: cover;
+	display: block;
+	aspect-ratio: 1;
+}
+
+/* Remove image button */
+.removeImageButton {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	background: transparent;
+	color: var(--colour-branding-primary);
+	border: none;
+	border-radius: var(--border-radius-full);
+	width: 1.75rem;
+	height: 1.75rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	opacity: 0;
+	transition: opacity var(--transition-base) ease;
+}
+
+.imageItem:hover .removeImageButton {
+	opacity: 1;
+}
+
+.removeImageButton:hover:not(:disabled) {
+	color: var(--colour-branding-light);
+}
+
+.removeImageButton:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+/* Error message styling */
+.errorMessage {
+	color: var(--colour-red);
+	margin-top: 0.5rem;
+	display: block;
+}
+
+/* Help text styling */
+.helpText {
+	color: var(--text-bluegrey);
+	margin-top: 0.5rem;
+	display: block;
+}
+
+/* Validation hints */
+.validationHint {
+	color: var(--text-bluegrey);
+	margin-top: 0.25rem;
+	display: block;
+	font-size: var(--font-size-xxs);
+}
+
+/* Form label styling */
+.formLabel {
+	display: block;
+	margin-bottom: 8px;
+}
+
+/* Help text for image count */
+.imageCountText {
+	margin-bottom: 0.5rem;
+	display: block;
+}