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

package/src/components/listing/ListingDescriptionInput.jsx

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

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

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

@@ -1,273 +0,0 @@
-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 [inputs, setInputs] = useState([{ id: 0, fileUrl: null }]);
-	const nextIdRef = useRef(1);
-
-	// Initialize inputs from value prop - map each existing file to an input
-	useEffect(() => {
-		if (value) {
-			let fileData = [];
-
-			// Handle multiple files - could be array of URLs or array of file objects
-			if (Array.isArray(value)) {
-				fileData = value
-					.map((file) => {
-						if (typeof file === "string") {
-							const fileName = file.split("/").pop() || "Unknown File";
-							return {
-								url: file,
-								name: fileName.replace(/\.[^/.]+$/, ""),
-								originalName: fileName,
-							};
-						} else if (file && typeof file === "object" && file.url) {
-							return {
-								url: file.url,
-								name: file.name || file.originalName || "Unknown File",
-								originalName:
-									file.originalName ||
-									file.url.split("/").pop() ||
-									"Unknown File",
-							};
-						}
-						return null;
-					})
-					.filter(Boolean);
-			} else {
-				// Handle single file values
-				let singleFile = null;
-				if (typeof value === "string") {
-					const fileName = value.split("/").pop() || "Unknown File";
-					singleFile = {
-						url: value,
-						name: fileName.replace(/\.[^/.]+$/, ""),
-						originalName: fileName,
-					};
-				} else if (value && typeof value === "object" && value.url) {
-					singleFile = {
-						url: value.url,
-						name:
-							value.name !== undefined
-								? value.name
-								: value.originalName || "Unknown File",
-						originalName:
-							value.originalName ||
-							value.url.split("/").pop() ||
-							"Unknown File",
-					};
-				}
-				fileData = singleFile ? [singleFile] : [];
-			}
-
-			// Create inputs for each existing file
-			const existingInputs = fileData.map((file, index) => ({
-				id: index,
-				fileUrl: file.url,
-				name: file.name,
-				originalName: file.originalName,
-			}));
-			// Add one empty input at the end
-			nextIdRef.current = fileData.length;
-			setInputs([...existingInputs, { id: nextIdRef.current, fileUrl: null }]);
-			nextIdRef.current++;
-		} else {
-			setInputs([{ id: 0, fileUrl: null }]);
-		}
-	}, [value]);
-
-	// Handle new file upload from FileInput component
-	const handleFileUpload = (inputId, uploadedUrl) => {
-		if (!uploadedUrl) {
-			return;
-		}
-
-		const fileName = uploadedUrl.split("/").pop() || "Unknown File";
-
-		// Find the input that triggered this upload and update it
-		setInputs((prevInputs) => {
-			const updatedInputs = prevInputs.map((input) => {
-				if (input.id === inputId) {
-					return {
-						...input,
-						fileUrl: uploadedUrl,
-						name: "",
-						originalName: fileName,
-					};
-				}
-				return input;
-			});
-
-			// Add a new empty input for the next upload
-			updatedInputs.push({ id: nextIdRef.current, fileUrl: null });
-			nextIdRef.current++;
-
-			return updatedInputs;
-		});
-	};
-
-	// Handle file name change
-	const handleNameChange = (url, newName) => {
-		setInputs((prevInputs) =>
-			prevInputs.map((input) =>
-				input.fileUrl === url ? { ...input, name: newName } : input,
-			),
-		);
-	};
-
-	// Handle file removal
-	const handleFileRemove = (url) => {
-		setInputs((prevInputs) => {
-			return prevInputs.map((input) => {
-				if (input.fileUrl === url) {
-					return { ...input, fileUrl: null };
-				}
-				return input;
-			});
-		});
-	};
-
-	// Get all uploaded files from inputs
-	const getUploadedFiles = () => {
-		return inputs
-			.filter((input) => input.fileUrl !== null)
-			.map((input) => ({
-				url: input.fileUrl,
-				name: input.name,
-				originalName: input.originalName,
-			}));
-	};
-
-	// Track previous uploaded files to prevent infinite loops
-	const prevFilesRef = useRef([]);
-
-	// Sync with parent when uploaded files actually change
-	useEffect(() => {
-		const files = getUploadedFiles();
-		const currentUrls = files.map((f) => f.url).join(",");
-		const prevUrls = prevFilesRef.current.map((f) => f.url).join(",");
-
-		// Only call onChange if the file list actually changed
-		if (currentUrls !== prevUrls && onChange) {
-			prevFilesRef.current = files;
-			onChange(field.id, files);
-		}
-	}, [inputs]);
-
-	// 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"],
-	};
-
-	// Get the last empty input (the one to show)
-	const emptyInput = inputs.find((input) => input.fileUrl === null);
-
-	// Get uploaded files for display
-	const uploadedFiles = getUploadedFiles();
-
-	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 - always show exactly one empty input */}
-			<div
-				className={`${styles.listingFileInput__dropZone} ${showError ? styles["listingFileInput__dropZone--error"] : ""}`}
-			>
-				{emptyInput && (
-					<FileInput
-						key={emptyInput.id}
-						refreshCallback={(url) => handleFileUpload(emptyInput.id, url)}
-						hasDefault={null}
-						accept={acceptTypes}
-						multiple={false}
-						disabled={disabled}
-					/>
-				)}
-			</div>
-
-			{/* File list */}
-			{uploadedFiles.length > 0 && (
-				<div className={styles.listingFileInput__fileList}>
-					{uploadedFiles.map((file) => (
-						<FileListItem
-							key={file.url}
-							file={file}
-							onNameChange={handleNameChange}
-							onRemove={handleFileRemove}
-							disabled={disabled}
-						/>
-					))}
-				</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;