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

package/src/components/FeatureListingCard.jsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { ToggleSwitch } from "./ToggleSwitch";
+import { PlussCore } from "../feature.config";
+import styles from "./FeatureListingCard.module.css";
+
+const { Text, SVGIcon, Button, MoreMenu } = PlussCore.Components;
+
+const FeatureListingCard = ({
+	id,
+	className,
+	style,
+	isDeleted,
+	icon,
+	title,
+	description,
+	isActive,
+	onEdit,
+	onDelete,
+	onToggle,
+	onRestore,
+}) => {
+	const getMenuOptions = () => {
+		return [
+			{
+				key: "edit",
+				text: "Edit",
+				onPress: () => onEdit && onEdit(id),
+			},
+			{
+				key: "delete",
+				text: "Delete",
+				onPress: () => onDelete && onDelete(id),
+			},
+		];
+	};
+
+	const handleToggle = (isActive) => {
+		if (onToggle) {
+			onToggle(id, isActive);
+		}
+	};
+
+	const renderLeftSection = () => {
+		return (
+			<div className={styles.featureListingCard__leftSection}>
+				{icon && (
+					<SVGIcon
+						icon={icon}
+						className={styles.featureListingCard__icon}
+						colour="#6c757d"
+					/>
+				)}
+				<div className={styles.featureListingCard__content}>
+					<Text type="name" className={styles.featureListingCard__title}>
+						{title || "Untitled"}
+					</Text>
+					<Text type="body" className={styles.featureListingCard__description}>
+						{description}
+					</Text>
+				</div>
+			</div>
+		);
+	};
+
+	const renderRightSection = () => {
+		if (isDeleted) {
+			return (
+				<div className={styles.featureListingCard__rightSection}>
+					<Button
+						buttonType="success"
+						onClick={() => onRestore && onRestore(id)}
+						narrow
+					>
+						Restore
+					</Button>
+				</div>
+			);
+		}
+
+		return (
+			<div className={styles.featureListingCard__rightSection}>
+				<ToggleSwitch isActive={isActive} onChange={handleToggle} />
+				<MoreMenu options={getMenuOptions()} />
+			</div>
+		);
+	};
+
+	const cardClasses = [
+		styles.featureListingCard,
+		isDeleted ? styles["featureListingCard--deleted"] : "",
+		className,
+	]
+		.filter(Boolean)
+		.join(" ");
+
+	return (
+		<div key={id} className={cardClasses} style={{ ...style }}>
+			{renderLeftSection()}
+			{renderRightSection()}
+		</div>
+	);
+};
+
+export { FeatureListingCard };

package/src/components/FeatureListingCard.module.css

@@ -0,0 +1,62 @@
+/* FeatureListingCard BEM CSS Module */
+
+/* Block */
+.featureListingCard {
+	border: 1px solid var(--linegrey);
+	background-color: var(--bg-white);
+	padding: 16px;
+	border-radius: 4px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 8px;
+	opacity: 1;
+	transition: all 0.2s ease;
+}
+
+/* Modifiers */
+.featureListingCard--deleted {
+	border-color: var(--linegrey);
+	background-color: var(--bg-bluegrey);
+	opacity: 0.7;
+}
+
+.featureListingCard:hover {
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Elements */
+.featureListingCard__leftSection {
+	display: flex;
+	align-items: center;
+	flex: 1;
+	min-width: 0;
+}
+
+.featureListingCard__icon {
+	width: 40px;
+	height: 40px;
+	margin-right: 12px;
+	flex-shrink: 0;
+	color: var(--text-light);
+}
+
+.featureListingCard__content {
+	flex: 1;
+	min-width: 0;
+}
+
+.featureListingCard__title {
+	margin-bottom: 4px;
+}
+
+.featureListingCard__description {
+	color: var(--text-light);
+}
+
+.featureListingCard__rightSection {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	flex-shrink: 0;
+}

package/src/components/Fields.jsx

@@ -0,0 +1,460 @@
+import React, { useState, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { CheckBox, Text, Button } from "./index.js";
+import { BaseFieldConfig } from "./BaseFieldConfig.jsx";
+import { iconImports } from "./iconImports.js";
+import styles from "./Fields.module.css";
+
+/**
+ * Field component for rendering different field types in feature builder
+ * Acts as a factory component that renders the appropriate field component based on type
+ * Handles all supported field types with proper props forwarding
+ *
+ * @typedef {Object} FieldProps
+ * @property {string} type - Field type ("title", "text", "description", "image", "gallery", "feature-image", "cta", "file")
+ * @property {boolean} isMandatory - Whether field is mandatory/required
+ * @property {number} fieldIndex - Index of field in the form
+ * @property {string} id - Unique identifier of the field
+ * @property {Function} [handleDelete] - Callback function for field deletion
+ * @property {Function} [onReplaceField] - Callback function for field replacement
+ * @property {Object} [stepErrors] - Validation errors by field ID
+ * @property {boolean} [showWarnings] - Whether to show validation warnings
+ * @property {Object} values - Field configuration values
+ *
+ * @param {FieldProps} props - Field component props
+ * @returns {React.ReactElement} Rendered field component
+ *
+ * @example
+ * <Field
+ *   type="text"
+ *   isMandatory={true}
+ *   fieldIndex={0}
+ *   id="field-123"
+ *   values={{label: "Name", isRequired: true}}
+ * />
+ */
+export const Field = (props) => {
+	const { type, isMandatory } = props;
+	let Component;
+
+	switch (type) {
+		case "title":
+			Component = TitleField;
+			break;
+		case "text":
+			Component = TextField;
+			break;
+		case "description":
+			Component = DescriptionField;
+			break;
+		case "image":
+			Component = ImageField;
+			break;
+		case "gallery":
+			Component = GalleryField;
+			break;
+		case "feature-image":
+			Component = FeatureImageField;
+			break;
+
+		case "cta":
+			Component = CTAField;
+			break;
+		case "file":
+			Component = FileField;
+			break;
+		default:
+			return <Text type="h1">Field {type} not implemented yet</Text>;
+	}
+
+	// Create field content with field header and content
+	const fieldContent = (
+		<>
+			<div className={styles.fieldHeader}>
+				<div className={styles.group}>
+					<div className={styles.line} />
+					<div className={styles.fieldType}>{getFieldTypeDisplay(type)}</div>
+					{!isMandatory && (
+						<Button
+							buttonType="secondary"
+							className={styles.changeTypeButton}
+							onClick={() => props.onReplaceField && props.onReplaceField()}
+							label="Change Type"
+						>
+							<FontAwesomeIcon icon={iconImports.repeat} />
+							<span className={styles.buttonLabel}>Change</span>
+						</Button>
+					)}
+				</div>
+				<div className={styles.group}>
+					{!isMandatory && (
+						<Button
+							buttonType="secondary"
+							className={styles.deleteButton}
+							onClick={props.handleDelete}
+							label="Remove Field"
+						>
+							<FontAwesomeIcon icon={iconImports.trash} />
+							<span className={styles.buttonLabel}>Remove</span>
+						</Button>
+					)}
+					{isMandatory && (
+						<span className={styles.padlockIcon}>
+							<PadlockIcon />
+							<p>This field cannot be removed</p>
+						</span>
+					)}
+				</div>
+			</div>
+			<div className={styles.fieldInner}>
+				<Component {...props} />
+			</div>
+		</>
+	);
+
+	// Both base and custom fields use the same wrapper now with the maintenance styling
+	const hasError =
+		props.showWarnings && props.stepErrors && props.stepErrors[props.id];
+
+	return (
+		<div className={styles.fieldContainer}>
+			<div className={styles.fieldNumberContainer}>
+				<p className={styles.fieldNumber}>{props.fieldIndex + 1}</p>
+			</div>
+			<div
+				className={`${styles.field} ${hasError ? styles["field--invalid"] : ""}`}
+			>
+				{fieldContent}
+			</div>
+		</div>
+	);
+};
+
+// Padlock icon component for base fields
+const PadlockIcon = () => {
+	const icon = iconImports.lock;
+	return (
+		<span className={styles.padlockIcon}>
+			<FontAwesomeIcon icon={icon} />
+		</span>
+	);
+};
+
+// Field type icon component
+const FieldTypeIcon = ({ type }) => {
+	const getIconForType = (type) => {
+		switch (type) {
+			case "title":
+				return iconImports.heading;
+			case "text":
+				return iconImports.pen;
+			case "description":
+				return iconImports.alignLeft;
+			case "image":
+				return iconImports.image;
+			case "feature-image":
+				return iconImports.camera;
+
+			case "cta":
+				return iconImports.link;
+			case "file":
+				return iconImports.file;
+			default:
+				return iconImports.cog;
+		}
+	};
+
+	const icon = getIconForType(type);
+
+	return (
+		<span className={styles.fieldTypeIcon}>
+			<FontAwesomeIcon icon={icon} />
+		</span>
+	);
+};
+
+// Helper function to get display text for field types
+const getFieldTypeDisplay = (type) => {
+	switch (type) {
+		case "title":
+			return "Title";
+		case "text":
+			return "Text";
+		case "description":
+			return "Description";
+		case "image":
+			return "Image";
+		case "gallery":
+			return "Gallery";
+		case "feature-image":
+			return "Feature Image";
+
+		case "cta":
+			return "Action Button";
+		case "file":
+			return "File";
+		default:
+			return type;
+	}
+};
+
+const TitleField = (props) => {
+	const {
+		setPlaceholder,
+		setLabel,
+		setHelpText,
+		stepErrors,
+		showWarnings,
+		id,
+	} = props;
+	const { placeholder, label, isRequired, helpText } = props.values;
+
+	return (
+		<BaseFieldConfig
+			label={label}
+			placeholder={placeholder}
+			helpText={helpText}
+			isRequired={true} // Title fields are always required
+			setLabel={setLabel}
+			setPlaceholder={() => {}}
+			setHelpText={setHelpText}
+			toggleIsRequired={() => {}} // Disable toggling - title fields are always required
+			stepErrors={stepErrors}
+			showWarnings={showWarnings}
+			id={id}
+			fieldType="title"
+			id={id} // Fix: pass the field ID
+		/>
+	);
+};
+
+const TextField = (props) => {
+	const {
+		setPlaceholder,
+		setLabel,
+		setHelpText,
+		stepErrors,
+		showWarnings,
+		id,
+	} = props;
+	const { placeholder, label, isRequired, helpText } = props.values;
+
+	return (
+		<BaseFieldConfig
+			label={label}
+			placeholder={placeholder}
+			helpText={helpText}
+			isRequired={true} // Text fields are always required
+			setLabel={setLabel}
+			setPlaceholder={() => {}}
+			setHelpText={setHelpText}
+			toggleIsRequired={() => {}} // Disable toggling - text fields are always required
+			stepErrors={stepErrors}
+			showWarnings={showWarnings}
+			id={id}
+			fieldType="text"
+			id={id} // Fix: pass the field ID
+		/>
+	);
+};
+
+const DescriptionField = (props) => {
+	const {
+		setPlaceholder,
+		toggleIsRequired,
+		setLabel,
+		setHelpText,
+		stepErrors,
+		showWarnings,
+		setUseAsSummary,
+		id, // Get ID from root props
+	} = props;
+	const { placeholder, label, isRequired, helpText, useAsSummary } =
+		props.values;
+
+	return (
+		<BaseFieldConfig
+			label={label}
+			placeholder={placeholder}
+			helpText={helpText}
+			isRequired={isRequired}
+			setLabel={setLabel}
+			setPlaceholder={() => {}}
+			setHelpText={setHelpText}
+			toggleIsRequired={toggleIsRequired}
+			stepErrors={stepErrors}
+			showWarnings={showWarnings}
+			id={id}
+			fieldType="description"
+			useAsSummary={useAsSummary}
+			setUseAsSummary={setUseAsSummary}
+		/>
+	);
+};
+
+const ImageField = (props) => {
+	const {
+		setLabel,
+		setHelpText,
+		toggleIsRequired,
+		setAllowCaption,
+		toggleAllowCaption,
+		stepErrors,
+		showWarnings,
+		id, // Get ID from root props
+	} = props;
+	const { label, isRequired, placeholder, allowCaption, helpText } =
+		props.values;
+
+	return (
+		<BaseFieldConfig
+			label={label}
+			placeholder={placeholder}
+			allowCaption={allowCaption}
+			helpText={helpText}
+			isRequired={isRequired}
+			setLabel={setLabel}
+			setPlaceholder={() => {}}
+			setAllowCaption={setAllowCaption}
+			setHelpText={setHelpText}
+			toggleIsRequired={toggleIsRequired}
+			toggleAllowCaption={toggleAllowCaption}
+			stepErrors={stepErrors}
+			showWarnings={showWarnings}
+			id={id} // Fix: pass the field ID
+			fieldType="image"
+		/>
+	);
+};
+
+const FeatureImageField = (props) => {
+	const {
+		setLabel,
+		setHelpText,
+		stepErrors,
+		showWarnings,
+		id, // Get ID from root props
+	} = props;
+	const { label, placeholder, helpText } = props.values;
+
+	return (
+		<BaseFieldConfig
+			label={label}
+			placeholder={placeholder}
+			helpText={helpText}
+			isRequired={true} // Feature image fields are always required
+			setLabel={setLabel}
+			setPlaceholder={() => {}}
+			setHelpText={setHelpText}
+			toggleIsRequired={() => {}} // Disable toggling - feature image fields are always required
+			stepErrors={stepErrors}
+			showWarnings={showWarnings}
+			id={id} // Fix: pass the field ID
+			fieldType="feature-image"
+			customLabel="Label"
+		/>
+	);
+};
+
+const GalleryField = (props) => {
+	const {
+		setLabel,
+		setHelpText,
+		toggleIsRequired,
+		setMinImages,
+		setMaxImages,
+		setMaxFileSize,
+		setAllowedTypes,
+		stepErrors,
+		showWarnings,
+		id, // Get ID from root props
+	} = props;
+	const {
+		label,
+		isRequired,
+		helpText,
+		placeholder,
+		minImages,
+		maxImages,
+		maxFileSize,
+		allowedTypes,
+	} = props.values;
+
+	return (
+		<BaseFieldConfig
+			label={label}
+			placeholder={placeholder}
+			helpText={helpText}
+			isRequired={isRequired}
+			minImages={minImages}
+			maxImages={maxImages}
+			maxFileSize={maxFileSize}
+			allowedTypes={allowedTypes}
+			setLabel={setLabel}
+			showPlaceholder={false}
+			setPlaceholder={() => {}}
+			setHelpText={setHelpText}
+			toggleIsRequired={toggleIsRequired}
+			setMinImages={setMinImages}
+			setMaxImages={setMaxImages}
+			setMaxFileSize={setMaxFileSize}
+			setAllowedTypes={setAllowedTypes}
+			stepErrors={stepErrors}
+			showWarnings={showWarnings}
+			id={id}
+			fieldType="gallery"
+		/>
+	);
+};
+
+const CTAField = (props) => {
+	const {
+		setLabel,
+		toggleIsRequired,
+		setHelpText,
+		setPlaceholder,
+		stepErrors,
+		showWarnings,
+	} = props;
+	const { label, isRequired, helpText, placeholder } = props.values;
+	const { id } = props; // Get ID from root props
+
+	return (
+		<BaseFieldConfig
+			label={label}
+			placeholder={placeholder}
+			helpText={helpText}
+			isRequired={isRequired}
+			setLabel={setLabel}
+			setPlaceholder={() => {}}
+			setHelpText={setHelpText}
+			toggleIsRequired={toggleIsRequired}
+			stepErrors={stepErrors}
+			showWarnings={showWarnings}
+			id={id} // Fix: pass the field ID
+			fieldType="cta"
+		/>
+	);
+};
+
+const FileField = (props) => {
+	const { toggleIsRequired, setLabel, setHelpText, stepErrors, showWarnings } =
+		props;
+	const { id } = props; // Get ID from root props
+	const { label, isRequired, helpText } = props.values;
+
+	return (
+		<BaseFieldConfig
+			label={label}
+			helpText={helpText}
+			isRequired={isRequired}
+			setLabel={setLabel}
+			setHelpText={setHelpText}
+			toggleIsRequired={toggleIsRequired}
+			stepErrors={stepErrors}
+			showWarnings={showWarnings}
+			id={id}
+			fieldType="file"
+		/>
+	);
+};