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

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

@@ -1,189 +0,0 @@
-/* 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;
-	background-color: var(--bg-white);
-	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: 2rem;
-	flex-shrink: 0;
-	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

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

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

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

@@ -1,132 +0,0 @@
-/* ListingGalleryInput BEM CSS Module */
-
-/* Gallery container styles */
-.galleryContainer {
-	margin-top: 0.75rem;
-	max-width: 200px;
-}
-
-/* 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(4, 160px);
-	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;
-}