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

package/src/components/listing/ListingDescriptionInput.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { GenericInput, Text } from "../index.js";
+import { iconImports } from "../iconImports.js";
+import styles from "./ListingField.module.css";
+
+const ListingDescriptionInput = ({
+	field,
+	value,
+	onChange,
+	showError,
+	errorMessage,
+}) => {
+	const { label, placeholder, isRequired, helpText } = field.values;
+
+	const handleChange = (e) => {
+		onChange(field.id, e.target.value);
+	};
+
+	const isValid = () => {
+		if (isRequired) {
+			const isEmpty =
+				!value || (typeof value === "string" && value.trim() === "");
+			return !isEmpty;
+		}
+		return true;
+	};
+
+	const displayLabel = (
+		<>
+			{label}
+			{isRequired && <span className={styles.requiredAsterisk}>*</span>}
+		</>
+	);
+
+	return (
+		<>
+			{/* Field header with icon and description */}
+			<div className={styles.listingField__header}>
+				<div className={styles.listingField__icon}>
+					<FontAwesomeIcon icon={iconImports.alignLeft} />
+				</div>
+				<div className={styles.listingField__content}>
+					<h3 className={styles.listingField__title}>Description</h3>
+					<p className={styles.listingField__description}>
+						Longer text area for detailed information or stories
+					</p>
+				</div>
+			</div>
+
+			<GenericInput
+				type="textarea"
+				label={displayLabel}
+				placeholder={placeholder || ""}
+				value={value || ""}
+				onChange={handleChange}
+				isRequired={isRequired}
+				showError={!!showError}
+				errorMessage={errorMessage}
+				isValid={isValid()}
+				alwaysShowLabel
+				style={{ resize: "vertical" }}
+			/>
+			{helpText && (
+				<div style={{ marginTop: "8px", color: "#6c7a90", fontSize: "14px" }}>
+					{helpText}
+				</div>
+			)}
+		</>
+	);
+};
+
+export default ListingDescriptionInput;

package/src/components/listing/ListingField.jsx

@@ -0,0 +1,101 @@
+import React from "react";
+import ListingTextInput from "./ListingTextInput.jsx";
+import ListingDescriptionInput from "./ListingDescriptionInput.jsx";
+import ListingImageInput from "./ListingImageInput.jsx";
+import ListingGalleryInput from "./ListingGalleryInput.jsx";
+import ListingCTAInput from "./ListingCTAInput.jsx";
+import ListingFileInput from "./ListingFileInput.jsx";
+import styles from "./ListingField.module.css";
+
+const ListingField = ({
+	field,
+	value,
+	onChange,
+	showError,
+	errorMessage,
+	isActive,
+}) => {
+	const fieldClassName =
+		showError || isActive
+			? `${styles.listingField} ${styles.hasError}`
+			: styles.listingField;
+
+	const renderField = () => {
+		switch (field.type) {
+			case "title":
+				return (
+					<ListingTextInput
+						field={field}
+						value={value}
+						onChange={onChange}
+						showError={showError}
+						errorMessage={errorMessage}
+					/>
+				);
+			case "description":
+				return (
+					<ListingDescriptionInput
+						field={field}
+						value={value}
+						onChange={onChange}
+						showError={showError}
+						errorMessage={errorMessage}
+					/>
+				);
+			case "image":
+			case "feature-image":
+				return (
+					<ListingImageInput
+						field={field}
+						value={value}
+						onChange={onChange}
+						showError={showError}
+						errorMessage={errorMessage}
+					/>
+				);
+			case "gallery":
+				return (
+					<ListingGalleryInput
+						field={field}
+						value={value}
+						onChange={onChange}
+						showError={showError}
+						errorMessage={errorMessage}
+					/>
+				);
+			case "cta":
+				return (
+					<ListingCTAInput
+						field={field}
+						value={value}
+						onChange={onChange}
+						showError={showError}
+						errorMessage={errorMessage}
+					/>
+				);
+			case "file":
+				return (
+					<ListingFileInput
+						field={field}
+						value={value}
+						onChange={onChange}
+						showError={showError}
+						errorMessage={errorMessage}
+					/>
+				);
+			default:
+				return <div>Field type {field.type} not implemented</div>;
+		}
+	};
+
+	return (
+		<div className={fieldClassName} data-field-id={field.id}>
+			{renderField()}
+			{showError && errorMessage && (
+				<div className={styles.listingField__error}>{errorMessage}</div>
+			)}
+		</div>
+	);
+};
+
+export default ListingField;

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

@@ -0,0 +1,106 @@
+/* Simple listing field styling - clean vertical layout */
+
+.listingField {
+	padding: 0.5rem 0.8rem 0.6rem;
+	border-radius: var(--border-radius-xl);
+	background: var(--bg-white);
+	transition: box-shadow var(--transition-base) ease;
+}
+
+/* Field header with icon and description */
+.listingField__header {
+	display: flex;
+	display: none;
+	align-items: flex-start;
+	gap: 0.3rem;
+
+	padding: 0 0.6rem 0.3rem;
+	border-bottom: 1px solid var(--border-line-grey);
+	margin: 0 calc(-1 * 0.7rem);
+	margin-bottom: 0.5rem;
+}
+
+.listingField__icon {
+	color: var(--text-bluegrey);
+	font-size: var(--font-size-base);
+	flex-shrink: 0;
+}
+
+.listingField__content {
+	flex: 1;
+}
+
+.listingField__title {
+	margin: 0 0 0.1rem 0;
+	font-weight: var(--font-weight-semibold);
+	font-size: var(--font-size-base);
+	color: var(--text-dark);
+	line-height: var(--line-height-snug);
+}
+
+.listingField__description {
+	margin: 0;
+	font-size: var(--font-size-xs);
+	color: var(--text-bluegrey);
+	line-height: var(--line-height-relaxed);
+}
+
+.listingField:last-child {
+	margin-bottom: 0;
+}
+
+/* Error state styling */
+.listingField--error {
+	border-color: var(--colour-red);
+}
+
+/* Required field asterisk */
+.requiredAsterisk {
+	color: var(--colour-red);
+	margin-left: 0.1rem;
+	font-weight: var(--font-weight-bold);
+}
+
+/* Error message styling */
+.listingField__error {
+	margin-top: 0.1rem;
+	color: var(--colour-red);
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--line-height-relaxed);
+	display: flex;
+	align-items: center;
+	gap: 0.1rem;
+}
+
+.listingField__error::before {
+	content: "⚠";
+	font-size: var(--font-size-sm);
+	flex-shrink: 0;
+}
+
+/* Make error more visible */
+.listingField.hasError {
+	position: relative;
+}
+
+.listingField.hasError input,
+.listingField.hasError textarea,
+.listingField.hasError select,
+.listingField.hasError .genericInput,
+.listingField.hasError .genericInput input,
+.listingField.hasError .genericInput textarea,
+.listingField.hasError .imageInputOuter-single,
+.listingField.hasError .imageInputOuter-grid,
+.listingField.hasError .FileInput,
+.listingField.hasError .imageInput,
+.listingField.hasError input[type="file"],
+.listingField.hasError .file-input,
+.listingField.hasError div[class*="imageInput"],
+.listingField.hasError div[class*="file-input"],
+.listingField.hasError .image-container,
+.listingField.hasError .image-grid,
+.listingField.hasError img {
+}
+
+/* Hover effect for better interactivity */

package/src/components/listing/ListingFileInput.jsx

@@ -0,0 +1,255 @@
+import React, { useRef, useState, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FileInput, Text, Button } from "../../components";
+import { iconImports } from "../../components/iconImports.js";
+import FileListItem from "./FileListItem.jsx";
+import listingFieldStyles from "./ListingField.module.css";
+import styles from "./ListingFileInput.module.css";
+
+const ListingFileInput = ({
+	field,
+	value,
+	onChange,
+	showError,
+	errorMessage,
+	disabled = false,
+}) => {
+	const fileInputRef = useRef(null);
+	const [internalFiles, setInternalFiles] = useState([]);
+
+	// Normalize file data to enhanced structure - always handle as multiple files
+	useEffect(() => {
+		if (value) {
+			// Handle multiple files - could be array of URLs or array of file objects
+			if (Array.isArray(value)) {
+				const normalizedFiles = value
+					.map((file) => {
+						if (typeof file === "string") {
+							// Backward compatibility: array of URLs
+							const fileName = file.split("/").pop() || "Unknown File";
+							return {
+								url: file,
+								name: fileName.replace(/\.[^/.]+$/, ""), // Remove extension
+								originalName: fileName,
+								uploading: false,
+							};
+						} else if (file && typeof file === "object" && file.url) {
+							// Enhanced structure
+							return {
+								url: file.url,
+								name: file.name || file.originalName || "Unknown File",
+								originalName:
+									file.originalName ||
+									file.url.split("/").pop() ||
+									"Unknown File",
+								uploading: false,
+							};
+						}
+						return null;
+					})
+					.filter(Boolean);
+				setInternalFiles(normalizedFiles);
+			} else {
+				// Handle single file values - normalize to array
+				let singleFile = null;
+				if (typeof value === "string") {
+					// Backward compatibility: single URL
+					const fileName = value.split("/").pop() || "Unknown File";
+					singleFile = {
+						url: value,
+						name: fileName.replace(/\.[^/.]+$/, ""),
+						originalName: fileName,
+						uploading: false,
+					};
+				} else if (value && typeof value === "object" && value.url) {
+					// Enhanced structure - preserve empty name if explicitly set
+					singleFile = {
+						url: value.url,
+						name:
+							value.name !== undefined
+								? value.name
+								: value.originalName || "Unknown File",
+						originalName:
+							value.originalName ||
+							value.url.split("/").pop() ||
+							"Unknown File",
+						uploading: false,
+					};
+				}
+				setInternalFiles(singleFile ? [singleFile] : []);
+			}
+		} else {
+			setInternalFiles([]);
+		}
+	}, [value]);
+
+	// Handle new file upload from FileInput component
+	const handleFileUpload = (uploadedUrl) => {
+		// Handle case where uploadedUrl might be undefined
+		if (!uploadedUrl) {
+			return;
+		}
+
+		const fileName = uploadedUrl.split("/").pop() || "Unknown File";
+		const newFile = {
+			url: uploadedUrl,
+			name: "", // Start with empty name as requested
+			originalName: fileName,
+			uploading: false,
+		};
+
+		// Always add new file to existing array for multiple file support
+		const updatedFiles = [...internalFiles, newFile];
+		setInternalFiles(updatedFiles);
+		notifyParent(updatedFiles);
+	};
+
+	// Handle file name change
+	const handleNameChange = (url, newName) => {
+		const updatedFiles = internalFiles.map((file) =>
+			file.url === url ? { ...file, name: newName } : file,
+		);
+		setInternalFiles(updatedFiles);
+		notifyParent(updatedFiles);
+	};
+
+	// Handle file removal
+	const handleFileRemove = (url) => {
+		const updatedFiles = internalFiles.filter((file) => file.url !== url);
+		setInternalFiles(updatedFiles);
+		notifyParent(updatedFiles);
+	};
+
+	// Notify parent component of changes
+	const notifyParent = (files) => {
+		if (onChange) {
+			// Always return array of files for multiple file support
+			onChange(field.id, files);
+		}
+	};
+
+	// Define acceptable file types for documents and common formats
+	const acceptTypes = {
+		"application/pdf": [".pdf"],
+		"application/msword": [".doc"],
+		"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [
+			".docx",
+		],
+		"application/vnd.ms-excel": [".xls"],
+		"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [
+			".xlsx",
+		],
+		"text/plain": [".txt"],
+		"text/csv": [".csv"],
+		"image/jpeg": [".jpg", ".jpeg"],
+		"image/png": [".png"],
+	};
+
+	// Always show drop zone regardless of existing files
+
+	return (
+		<div className={styles.listingFileInput}>
+			{/* Field header with icon and description */}
+			<div className={listingFieldStyles.listingField__header}>
+				<div className={listingFieldStyles.listingField__icon}>
+					<FontAwesomeIcon icon={iconImports.file} />
+				</div>
+				<div className={listingFieldStyles.listingField__content}>
+					<h3 className={listingFieldStyles.listingField__title}>File</h3>
+					<p className={listingFieldStyles.listingField__description}>
+						Attach documents, PDFs, or other files
+					</p>
+				</div>
+			</div>
+
+			<Text type="formLabel" style={{ display: "block", marginBottom: "8px" }}>
+				{field.values.label}
+				{field.values.isRequired && (
+					<span className={listingFieldStyles.requiredAsterisk}>*</span>
+				)}
+			</Text>
+
+			{/* Drop zone */}
+			<div
+				className={`${styles.listingFileInput__dropZone} ${showError ? styles["listingFileInput__dropZone--error"] : ""}`}
+			>
+				<FileInput
+					ref={fileInputRef}
+					className="imageInputOuter-single"
+					refreshCallback={handleFileUpload}
+					hasDefault={null}
+					accept={acceptTypes}
+					multiple={false} // Always handle one file at a time in the upload callback
+					disabled={disabled}
+				/>
+			</div>
+
+			{/* File list */}
+			{internalFiles.length > 0 && (
+				<div className={styles.listingFileInput__fileList}>
+					{internalFiles.map((file) => (
+						<FileListItem
+							key={file.url}
+							file={file}
+							onNameChange={handleNameChange}
+							onRemove={handleFileRemove}
+							disabled={disabled}
+						/>
+					))}
+				</div>
+			)}
+
+			{/* Add more files button - always show when files exist */}
+			{internalFiles.length > 0 && (
+				<div>
+					<FileInput
+						ref={fileInputRef}
+						className="imageInputOuter-single"
+						refreshCallback={handleFileUpload}
+						hasDefault={null}
+						accept={acceptTypes}
+						multiple={false}
+						disabled={disabled}
+						customButton={
+							<Button
+								buttonType="secondary"
+								className={styles.listingFileInput__addMoreButton}
+								disabled={disabled}
+							>
+								<FontAwesomeIcon icon={iconImports.plus} />
+								Add More Files
+							</Button>
+						}
+					/>
+				</div>
+			)}
+
+			{showError && errorMessage && (
+				<Text
+					type="help"
+					style={{
+						color: "var(--colour-red)",
+						marginTop: "8px",
+						display: "block",
+					}}
+				>
+					{errorMessage}
+				</Text>
+			)}
+			{field.values.helpText && (
+				<Text
+					type="help"
+					style={{
+						color: "var(--text-bluegrey)",
+						marginTop: "8px",
+						display: "block",
+					}}
+				>
+					{field.values.helpText}
+				</Text>
+			)}
+		</div>
+	);
+};
+
+export default ListingFileInput;