@plusscommunities/pluss-feature-builder-web-b 1.0.2-beta.1 → 1.0.2-beta.10

package/src/components/BaseFieldConfig.jsx

@@ -52,254 +52,254 @@ import styles from "./BaseFieldConfig.module.css";
  * />
  */
 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;
+	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 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 caption option should be shown
+	const showCaptionOption = fieldType === "image";
 
-  // Determine if use as summary option should be shown
-  const showUseAsSummaryOption = fieldType === "description";
+	// 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 shown as disabled
+	const isRequiredFieldAlwaysRequired =
+		fieldType === "text" ||
+		fieldType === "feature-image" ||
+		fieldType === "title";
 
-  // Determine if required checkbox should be hidden entirely
-  const hideRequiredField = fieldType === "gallery";
+	// 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
-              />
-            )
-          }
-        />
+	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
-          />
-        )}
+				{/* 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}
-            />
-          )}
+				{/* 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}
-          />
-        )}
+				{/* 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>
-        )}
+				{/* 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>
-        )}
+				{/* 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
-              />
-            )}
+				{/* 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 Images */}
+						{setMaxImages && (
+							<GenericInput
+								type="number"
+								value={maxImages || 16}
+								placeholder="16"
+								label="Maximum Images"
+								onChange={(e) => setMaxImages(parseInt(e.target.value) || 16)}
+								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
-              />
-            )}
+						{/* 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>
-            )}
+						{/* 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>
-  );
+						{/* Gallery Help Text */}
+						<Text
+							type="bodySmall"
+							className={`${styles.helpText} ${styles.fieldSpacing}`}
+						>
+							Gallery field for displaying multiple images.
+						</Text>
+					</>
+				)}
+				{children}
+			</div>
+		</div>
+	);
 };