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

package/src/components/BaseFieldConfig.jsx

@@ -0,0 +1,305 @@
+import React from "react";
+import { PlussCore } from "../feature.config";
+const { Components } = PlussCore;
+const { GenericInput, CheckBox, Text } = Components;
+import { TwoColumnInput } from "./TwoColumnInput.jsx";
+import styles from "./BaseFieldConfig.module.css";
+
+/**
+ * Base Field Configuration component for form fields
+ * Provides common field configuration UI with label, placeholder, help text, and validation settings
+ * Used as base for all field types in the feature builder
+ *
+ * @typedef {Object} BaseFieldConfigProps
+ * @property {string} label - Current field label value
+ * @property {string} placeholder - Current field placeholder text
+ * @property {boolean} allowCaption - Whether field allows caption
+ * @property {string} helpText - Current help text for field
+ * @property {boolean} isRequired - Whether field is mandatory
+ * @property {boolean} useAsSummary - Whether field is used as summary (for description fields)
+ * @property {number} minImages - Minimum number of images for gallery fields
+ * @property {number} maxImages - Maximum number of images for gallery fields
+ * @property {string} maxFileSize - Maximum file size for gallery fields
+ * @property {string[]} allowedTypes - Allowed file types for gallery fields
+ * @property {Function} setLabel - Callback to update field label
+ * @property {Function} setPlaceholder - Callback to update placeholder
+ * @property {Function} setAllowCaption - Callback to toggle caption allowance
+ * @property {Function} setHelpText - Callback to update help text
+ * @property {Function} toggleIsRequired - Callback to toggle required status
+ * @property {Function} setUseAsSummary - Callback to toggle summary usage (for description fields)
+ * @property {Function} setMinImages - Callback to set minimum images for gallery
+ * @property {Function} setMaxImages - Callback to set maximum images for gallery
+ * @property {Function} setMaxFileSize - Callback to set maximum file size for gallery
+ * @property {Function} setAllowedTypes - Callback to set allowed file types for gallery
+ * @property {string} fieldId - Unique identifier of the field
+ * @property {string} fieldType - Type of field being configured
+ * @property {Object} stepErrors - Validation errors by field ID
+ * @property {boolean} showWarnings - Whether to show validation warnings
+ * @property {string} customLabel - Custom label for input field
+ * @property {React.ReactNode} children - Field-specific configuration options
+ *
+ * @param {BaseFieldConfigProps} props - Component props
+ * @returns {React.ReactElement} Field configuration interface
+ *
+ * @example
+ * <BaseFieldConfig
+ *   label="Email Address"
+ *   placeholder="Enter email"
+ *   isRequired={true}
+ *   fieldId="field-123"
+ *   setLabel={(value) => updateField('label', value)}
+ *   toggleIsRequired={() => updateField('required', !isRequired)}
+ * />
+ */
+export const BaseFieldConfig = (props) => {
+  const {
+    label,
+    placeholder,
+    allowCaption,
+    helpText,
+    isRequired,
+    minImages,
+    maxImages,
+    maxFileSize,
+    allowedTypes,
+    setLabel,
+    setPlaceholder,
+    setAllowCaption,
+    setHelpText,
+    toggleIsRequired,
+    toggleAllowCaption,
+    setMinImages,
+    setMaxImages,
+    setMaxFileSize,
+    setAllowedTypes,
+    stepErrors,
+    showWarnings,
+    id,
+    fieldType,
+    customLabel,
+    useAsSummary, // For description fields
+    setUseAsSummary, // For description fields
+    children, // For field-specific options
+  } = props;
+
+  // Determine if placeholder should be shown
+  const showPlaceholder =
+    fieldType !== "image" &&
+    fieldType !== "gallery" &&
+    fieldType !== "feature-image" &&
+    fieldType !== "file";
+
+  // Determine if caption option should be shown
+  const showCaptionOption = fieldType === "image";
+
+  // Determine if use as summary option should be shown
+  const showUseAsSummaryOption = fieldType === "description";
+
+  // Determine if required checkbox should be shown as disabled
+  const isRequiredFieldAlwaysRequired =
+    fieldType === "text" ||
+    fieldType === "feature-image" ||
+    fieldType === "title";
+
+  // Determine if required checkbox should be hidden entirely
+  const hideRequiredField = fieldType === "gallery";
+
+  return (
+    <div>
+      <div>
+        {/* Basic inputs - always visible */}
+        <TwoColumnInput
+          left={
+            <GenericInput
+              type="text"
+              placeholder="Type your label here (required)"
+              value={label}
+              label={customLabel || "Label"}
+              isRequired
+              onChange={(e) => setLabel && setLabel(e.target.value)}
+              showError={() => {
+                const hasWarning = showWarnings && stepErrors && stepErrors[id];
+                return hasWarning;
+              }}
+              errorMessage={
+                stepErrors && stepErrors[id]
+                  ? stepErrors[id]
+                  : "Field label is required"
+              }
+              isValid={() => {
+                const isValid = !(stepErrors && stepErrors[id]);
+                return isValid;
+              }}
+              alwaysShowLabel
+            />
+          }
+          right={
+            showPlaceholder && (
+              <GenericInput
+                type="text"
+                value={placeholder}
+                placeholder={"Add a placeholder (optional)"}
+                label={"Placeholder"}
+                onChange={(e) =>
+                  setPlaceholder && setPlaceholder(e.target.value)
+                }
+                alwaysShowLabel
+              />
+            )
+          }
+        />
+
+        {/* Help Text - Always visible for better accessibility */}
+        {helpText !== undefined && (
+          <GenericInput
+            key={`helpText-${id || "unknown"}`}
+            type="text"
+            value={helpText || ""}
+            placeholder={"Add help text (optional)"}
+            label={"Help Text"}
+            onChange={(e) => {
+              if (setHelpText) {
+                setHelpText(e.target.value);
+              }
+            }}
+            className={styles.fieldSpacing}
+            alwaysShowLabel
+          />
+        )}
+
+        {/* Required Field Setting - Hidden for gallery fields */}
+        {toggleIsRequired &&
+          !isRequiredFieldAlwaysRequired &&
+          !hideRequiredField && (
+            <CheckBox
+              label="Required field"
+              isActive={isRequired}
+              onChange={toggleIsRequired}
+              className={styles.fieldSpacing}
+            />
+          )}
+
+        {/* Show disabled required checkbox for fields that are always required */}
+        {isRequiredFieldAlwaysRequired && !hideRequiredField && (
+          <CheckBox
+            label="Required field"
+            isActive={true}
+            onChange={() => { }}
+            disabled={true}
+            className={styles.fieldSpacing}
+          />
+        )}
+
+        {/* Advanced options - always visible */}
+        {/* Use as Summary Option - Show for description fields */}
+        {showUseAsSummaryOption && (
+          <div className={styles.checkboxContainer}>
+            <CheckBox
+              label="Show as preview text"
+              isActive={useAsSummary}
+              onChange={() => setUseAsSummary(!useAsSummary)}
+            />
+            <Text type="bodySmall" className={styles.helpText}>
+              Display this description as a short preview under the title in
+              listings. Only one description can be used as preview.
+            </Text>
+          </div>
+        )}
+
+        {/* Caption Option - Show for image fields */}
+        {showCaptionOption && (
+          <div className={styles.checkboxContainer}>
+            <CheckBox
+              label="Allow users to add caption to image"
+              isActive={allowCaption}
+              onChange={toggleAllowCaption || setAllowCaption}
+            />
+            <Text type="bodySmall" className={styles.helpText}>
+              When checked, users uploading an image can add a short description
+              to explain what the image shows.
+            </Text>
+          </div>
+        )}
+
+        {/* Field-specific options */}
+        {fieldType === "gallery" && (
+          <>
+            {/* Minimum Images */}
+            {setMinImages && (
+              <GenericInput
+                type="number"
+                value={minImages || 1}
+                placeholder="1"
+                label="Minimum Images"
+                onChange={(e) => setMinImages(parseInt(e.target.value) || 1)}
+                className={styles.fieldSpacing}
+                alwaysShowLabel
+              />
+            )}
+
+            {/* Maximum Images */}
+            {setMaxImages && (
+              <GenericInput
+                type="number"
+                value={maxImages || 10}
+                placeholder="10"
+                label="Maximum Images"
+                onChange={(e) => setMaxImages(parseInt(e.target.value) || 10)}
+                className={styles.fieldSpacing}
+                alwaysShowLabel
+              />
+            )}
+
+            {/* Maximum File Size */}
+            {setMaxFileSize && (
+              <GenericInput
+                type="text"
+                value={maxFileSize || "5MB"}
+                placeholder="5MB"
+                label="Maximum File Size"
+                onChange={(e) => setMaxFileSize(e.target.value)}
+                className={styles.fieldSpacing}
+                alwaysShowLabel
+              />
+            )}
+
+            {/* Allowed File Types */}
+            {setAllowedTypes && (
+              <div className={styles.fileTypesContainer}>
+                <Text type="formLabel" className={styles.formLabel}>
+                  Allowed File Types
+                </Text>
+                <div className={styles.fileTypesList}>
+                  {["image/jpeg", "image/png", "image/webp"].map((type) => (
+                    <CheckBox
+                      key={type}
+                      label={type.replace("image/", "").toUpperCase()}
+                      isActive={allowedTypes?.includes(type) || false}
+                      onChange={() => {
+                        const currentTypes = allowedTypes || [];
+                        const newTypes = currentTypes.includes(type)
+                          ? currentTypes.filter((t) => t !== type)
+                          : [...currentTypes, type];
+                        setAllowedTypes(newTypes);
+                      }}
+                      className={styles.checkboxWithMargin}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Gallery Help Text */}
+            <Text
+              type="bodySmall"
+              className={`${styles.helpText} ${styles.fieldSpacing}`}
+            >
+              Gallery field for displaying multiple images.
+            </Text>
+          </>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/BaseFieldConfig.module.css

@@ -0,0 +1,42 @@
+/* Common spacing */
+.fieldSpacing {
+	margin-bottom: 12px;
+}
+
+.fieldSpacing2 {
+	margin-top: 4px;
+	margin-bottom: 12px;
+}
+
+/* Help text styling */
+.helpText {
+	margin-top: 4px;
+	color: #6c7a90;
+}
+
+/* Form label styling */
+.formLabel {
+	display: block;
+	margin-bottom: 8px;
+}
+
+/* Container for checkbox with help text */
+.checkboxContainer {
+	margin-bottom: 12px;
+}
+
+/* File types container */
+.fileTypesContainer {
+	margin-bottom: 12px;
+}
+
+.fileTypesList {
+	display: flex;
+	gap: 12px;
+	flex-wrap: wrap;
+}
+
+/* Checkbox with margin */
+.checkboxWithMargin {
+	margin-bottom: 4px;
+}

package/src/components/CenteredContainer.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import styles from "./CenteredContainer.module.css";
+
+const CenteredContainer = ({
+	children,
+	maxWidth = "3xl",
+	padding = "normal",
+	className = "",
+	background = "white",
+	...props
+}) => {
+	const containerClasses = [
+		styles.container,
+		styles[`maxWidth-${maxWidth}`],
+		styles[`padding-${padding}`],
+		styles[`background-${background}`],
+		className,
+	]
+		.filter(Boolean)
+		.join(" ");
+
+	return (
+		<div className={containerClasses} {...props}>
+			{children}
+		</div>
+	);
+};
+
+export default CenteredContainer;

package/src/components/CenteredContainer.module.css

@@ -0,0 +1,171 @@
+.container {
+	width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+	box-sizing: border-box;
+}
+
+/* Max-width variants - based on Tailwind CSS */
+.maxWidth-sm {
+	max-width: 384px;
+}
+
+.maxWidth-md {
+	max-width: 448px;
+}
+
+.maxWidth-lg {
+	max-width: 512px;
+}
+
+.maxWidth-xl {
+	max-width: 576px;
+}
+
+.maxWidth-2xl {
+	max-width: 672px;
+}
+
+.maxWidth-3xl {
+	max-width: 768px;
+}
+
+.maxWidth-4xl {
+	max-width: 896px;
+}
+
+.maxWidth-5xl {
+	max-width: 1024px;
+}
+
+.maxWidth-6xl {
+	max-width: 1152px;
+}
+
+.maxWidth-7xl {
+	max-width: 1280px;
+}
+
+.maxWidth-full {
+	max-width: 100%;
+}
+
+/* Padding variants */
+.padding-compact {
+	padding: 16px;
+}
+
+@media (min-width: 640px) {
+	.padding-compact {
+		padding: 24px;
+	}
+}
+
+.padding-normal {
+	padding: 24px;
+}
+
+@media (min-width: 640px) {
+	.padding-normal {
+		padding: 32px;
+	}
+}
+
+@media (min-width: 1024px) {
+	.padding-normal {
+		padding: 40px;
+	}
+}
+
+.padding-spacious {
+	padding: 32px;
+}
+
+@media (min-width: 640px) {
+	.padding-spacious {
+		padding: 40px;
+	}
+}
+
+@media (min-width: 1024px) {
+	.padding-spacious {
+		padding: 48px;
+	}
+}
+
+.padding-none {
+	padding: 0;
+}
+
+/* Background variants */
+.background-white {
+	background-color: #ffffff;
+}
+
+.background-gray {
+	background-color: #f8f9fa;
+}
+
+.background-transparent {
+	background-color: transparent;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+	.container {
+		padding-left: 16px;
+		padding-right: 16px;
+	}
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+	.container {
+		padding-left: 24px;
+		padding-right: 24px;
+	}
+}
+
+@media (min-width: 1025px) {
+	.container {
+		padding-left: 32px;
+		padding-right: 32px;
+	}
+}
+
+/* Prevent bleeding on very large screens */
+@media (min-width: 1440px) {
+	.container {
+		max-width: calc(100vw - 40px); /* Ensure 20px margin on each side */
+	}
+}
+
+/* Form-specific styling */
+.formContainer {
+	background-color: #ffffff;
+	border-radius: 8px;
+	box-shadow:
+		0 1px 3px rgba(0, 0, 0, 0.1),
+		0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.listingContainer {
+	background-color: #ffffff;
+	border-radius: 8px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* Wrapper for full-screen centering */
+.pageWrapper {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	padding: 20px 0;
+	background-color: #f8f9fa;
+}
+
+@media (min-width: 768px) {
+	.pageWrapper {
+		padding: 40px 0;
+	}
+}

package/src/components/DeleteConfirmationPopup.jsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { PlussCore } from "../feature.config";
+const { Components } = PlussCore;
+const { Popup } = Components;
+import styles from "./DeleteConfirmationPopup.module.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+
+/**
+ * Delete Confirmation Popup component
+ * Displays a confirmation dialog for deleting listings or feature definitions
+ * Shows loading state during deletion and provides cancel option
+ *
+ * @param {Object} props - Component props
+ * @param {boolean} props.isOpen - Whether the popup is currently visible
+ * @param {Object} props.listing - The listing or feature definition to be deleted
+ * @param {Function} props.onConfirm - Callback function when user confirms deletion
+ * @param {Function} props.onCancel - Callback function when user cancels deletion
+ * @param {boolean} props.isDeleting - Whether deletion is currently in progress
+ * @param {string} [props.deleteType="listing"] - Type of item being deleted ("listing" or "featureDefinition")
+ * @returns {React.ReactElement} Delete confirmation popup interface
+ *
+ * @example
+ * <DeleteConfirmationPopup
+ *   isOpen={showDeleteDialog}
+ *   listing={currentListing}
+ *   onConfirm={handleDelete}
+ *   onCancel={handleCancel}
+ *   isDeleting={isDeleting}
+ *   deleteType="listing"
+ * />
+ */
+const DeleteConfirmationPopup = ({
+	isOpen,
+	listing,
+	onConfirm,
+	onCancel,
+	isDeleting,
+	deleteType = "listing", // Can be "listing" or "featureDefinition"
+}) => {
+	if (!isOpen) {
+		return null;
+	}
+
+	const buttons = [
+		{
+			type: "primary",
+			text: isDeleting ? "Deleting..." : "Delete",
+			onClick: onConfirm,
+			isActive: !isDeleting,
+			loading: isDeleting,
+		},
+		{
+			type: "tertiary",
+			text: "Cancel",
+			onClick: onCancel,
+			isActive: !isDeleting,
+		},
+	];
+
+	const isFeatureDefinition = deleteType === "featureDefinition";
+	const itemText = isFeatureDefinition ? "feature definition" : "listing";
+	const itemDisplayText = isFeatureDefinition
+		? (listing && listing.fields && listing.fields["mandatory-title"]) ||
+			"this feature definition"
+		: (listing && listing.fields && listing.fields["mandatory-title"]) ||
+			"this listing";
+
+	return (
+		<Popup
+			title={`Delete ${itemText}?`}
+			subtitle={
+				isDeleting
+					? `Deleting ${itemText}...`
+					: `Are you sure you want to delete "${itemDisplayText}"? This will remove the ${itemText}. You can bring it back later.`
+			}
+			onClose={isDeleting ? null : onCancel}
+			buttons={buttons}
+			hasPadding
+			minWidth={400}
+			maxWidth={500}
+		>
+			{isDeleting && (
+				<div className={styles.deleteConfirmationPopup__spinnerContainer}>
+					<FontAwesomeIcon icon={faSpinner} spin />
+					<div className={styles.deleteConfirmationPopup__message}>
+						Please wait while we delete the {itemText}...
+					</div>
+				</div>
+			)}
+		</Popup>
+	);
+};
+
+export { DeleteConfirmationPopup };

package/src/components/DeleteConfirmationPopup.module.css

@@ -0,0 +1,12 @@
+/* DeleteConfirmationPopup BEM CSS Module */
+
+/* Elements */
+.deleteConfirmationPopup__spinnerContainer {
+	text-align: center;
+	padding: 20px 0;
+}
+
+.deleteConfirmationPopup__message {
+	font-size: var(--font-size-md);
+	color: #666;
+}