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

package/src/components/FeatureListingCard.jsx

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

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

@@ -1,423 +0,0 @@
-import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { 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>
-	);
-};
-
-const PadlockIcon = () => {
-	const icon = iconImports.lock;
-	return (
-		<span className={styles.padlockIcon}>
-			<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, helpText } = props.values;
-
-	return (
-		<BaseFieldConfig
-			label={label}
-			placeholder={placeholder}
-			helpText={helpText}
-			isRequired={true}
-			setLabel={setLabel}
-			setPlaceholder={setPlaceholder}
-			setHelpText={setHelpText}
-			toggleIsRequired={() => {}}
-			stepErrors={stepErrors}
-			showWarnings={showWarnings}
-			id={id}
-			fieldType="title"
-		/>
-	);
-};
-
-const TextField = (props) => {
-	const {
-		setPlaceholder,
-		setLabel,
-		setHelpText,
-		stepErrors,
-		showWarnings,
-		toggleIsRequired,
-		id,
-	} = props;
-	const { placeholder, label, helpText, isRequired } = props.values;
-
-	return (
-		<BaseFieldConfig
-			label={label}
-			placeholder={placeholder}
-			helpText={helpText}
-			isRequired={isRequired}
-			setLabel={setLabel}
-			setPlaceholder={setPlaceholder}
-			setHelpText={setHelpText}
-			toggleIsRequired={toggleIsRequired}
-			stepErrors={stepErrors}
-			showWarnings={showWarnings}
-			id={id}
-			fieldType="text"
-		/>
-	);
-};
-
-const DescriptionField = (props) => {
-	const {
-		setPlaceholder,
-		toggleIsRequired,
-		setLabel,
-		setHelpText,
-		stepErrors,
-		showWarnings,
-		setUseAsSummary,
-		id,
-	} = props;
-	const { placeholder, label, isRequired, helpText, useAsSummary } =
-		props.values;
-
-	return (
-		<BaseFieldConfig
-			label={label}
-			placeholder={placeholder}
-			helpText={helpText}
-			isRequired={isRequired}
-			setLabel={setLabel}
-			setPlaceholder={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,
-	} = 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}
-			fieldType="image"
-		/>
-	);
-};
-
-const FeatureImageField = (props) => {
-	const { setLabel, setHelpText, stepErrors, showWarnings, id } = props;
-	const { label, placeholder, helpText } = props.values;
-
-	return (
-		<BaseFieldConfig
-			label={label}
-			placeholder={placeholder}
-			helpText={helpText}
-			isRequired={true}
-			setLabel={setLabel}
-			setPlaceholder={() => {}}
-			setHelpText={setHelpText}
-			toggleIsRequired={() => {}}
-			stepErrors={stepErrors}
-			showWarnings={showWarnings}
-			id={id}
-			fieldType="feature-image"
-			customLabel="Label"
-		/>
-	);
-};
-
-const GalleryField = (props) => {
-	const {
-		setLabel,
-		setHelpText,
-		toggleIsRequired,
-		setMinImages,
-		setMaxImages,
-		setMaxFileSize,
-		setAllowedTypes,
-		stepErrors,
-		showWarnings,
-		id,
-	} = 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,
-		id,
-	} = props;
-	const { label, isRequired, helpText, placeholder } = props.values;
-
-	return (
-		<BaseFieldConfig
-			label={label}
-			placeholder={placeholder}
-			helpText={helpText}
-			isRequired={isRequired}
-			setLabel={setLabel}
-			setPlaceholder={setPlaceholder}
-			setHelpText={setHelpText}
-			toggleIsRequired={toggleIsRequired}
-			stepErrors={stepErrors}
-			showWarnings={showWarnings}
-			id={id}
-			fieldType="cta"
-		/>
-	);
-};
-
-const FileField = (props) => {
-	const {
-		toggleIsRequired,
-		setLabel,
-		setHelpText,
-		stepErrors,
-		showWarnings,
-		id,
-	} = 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"
-		/>
-	);
-};