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

package/src/components/Fields.module.css

@@ -0,0 +1,159 @@
+/* Fields BEM CSS Module - Using pluss-maintenance styling pattern */
+
+/* Field container - matches maintenance style */
+.fieldContainer {
+	position: relative;
+	display: flex;
+	margin-top: 32px;
+}
+
+/* Field container error state */
+.fieldContainer--error {
+	border: 2px solid #dc3545;
+	border-radius: 4px;
+}
+
+.fieldNumberContainer {
+	display: flex;
+	width: 40px;
+}
+
+.fieldNumber {
+	width: 40px;
+	text-align: center;
+	font-weight: 500;
+	font-size: 30px;
+	color: var(--colour-branding-action, #5c90df); /* COLOUR_BRANDING_ACTION */
+}
+
+.field {
+	flex: 1;
+	position: relative;
+	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+	border-radius: 4px;
+	padding: 1rem;
+}
+
+.field--invalid {
+	border: 1px solid #dc3545;
+}
+
+.fieldHeader {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	padding: 15px 0;
+	border-bottom: 1px solid var(--border-line-grey, #dbddf1); /* BORDER_LINE_GREY */
+}
+
+.fieldHeader .group {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.fieldHeader .line {
+	background-color: var(--colour-dusk, #536280); /* COLOUR_DUSK */
+	width: 34px;
+	height: 6px;
+	margin: 3px 13px 0 0;
+}
+
+.fieldHeader .fieldType {
+	font-weight: 700;
+	font-size: 16px;
+	color: var(--colour-dusk, #536280); /* COLOUR_DUSK */
+}
+
+.fieldHeader .dropdownInput {
+	width: 150px !important;
+	margin: 5px 20px 0 0 !important;
+}
+
+.fieldHeader .dropdownInput div {
+	margin-bottom: unset !important;
+}
+
+.fieldHeader .dropdownInput .dropdownInput-bottomBorder {
+	border-bottom: unset;
+}
+
+.fieldHeader .dropdownInput input {
+	font-size: 14px;
+	color: var(--colour-branding-action, #5c90df); /* COLOUR_BRANDING_ACTION */
+	width: 80%;
+}
+
+.fieldHeader .dropdownInput .fa-chevron-down,
+.fieldHeader .dropdownInput .fa-chevron-up {
+	color: var(
+		--colour-branding-action,
+		#5c90df
+	) !important; /* COLOUR_BRANDING_ACTION */
+}
+
+.fieldHeader .changeTypeButton {
+	margin-left: 15px;
+	padding: 4px 8px;
+	font-size: 12px;
+	min-height: auto;
+	color: #5c90df;
+}
+
+.fieldHeader .changeTypeButton:hover {
+	color: #364196;
+}
+
+.fieldHeader .deleteButton {
+	margin-right: 15px;
+	padding: 4px 8px;
+	font-size: 12px;
+	min-height: auto;
+	color: #dc3545;
+}
+
+.fieldHeader .deleteButton:hover {
+	color: #a02622;
+}
+
+.fieldHeader .buttonLabel {
+	margin-left: 6px;
+	font-size: 12px;
+}
+
+.fieldInner {
+	padding: 15px;
+}
+
+/* Legacy compatibility styles */
+.fieldWrapper {
+	position: relative;
+	margin-bottom: 1.5rem;
+	padding: 1rem;
+	border-radius: 12px;
+}
+
+/* Padlock icon for base fields */
+.padlockIcon {
+	display: inline-flex;
+	align-items: center;
+	font-size: 12px;
+	color: var(--colour-dusk, #536280);
+	font-style: italic;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.padlockIcon p {
+	padding: 0;
+	margin: 0;
+	margin-right: 1rem;
+}
+
+.padlockIconPlaceholder {
+	display: inline-flex;
+	align-items: center;
+	font-size: 12px;
+	color: var(--colour-dusk, #536280);
+}

package/src/components/IconLoader.jsx

@@ -0,0 +1,153 @@
+import React, { useState, useRef } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { PlussCore } from "../feature.config";
+import { Button } from "./index";
+import { iconImports } from "./iconImports";
+import styles from "./IconLoader.module.css";
+
+const { Apis } = PlussCore;
+const { fileActions } = Apis;
+
+const IconLoader = ({
+  value,
+  defaultValue,
+  onChange,
+  onRemove,
+  disableRemove = false,
+  featureId,
+}) => {
+  const [isUploading, setIsUploading] = useState(false);
+  const fileInputRef = useRef(null);
+
+  // Determine which icon to show
+  const hasCustomIcon =
+    value && typeof value === "string" && value.startsWith("http");
+  const iconToShow = defaultValue || "star";
+
+  // Generate filename with feature ID
+  const generateFilename = (file, featureId) => {
+    const timestamp = Date.now();
+    const ext = file.name.split(".").pop();
+    return `build-your-feature-${featureId || "new"}-${timestamp}.${ext}`;
+  };
+
+  // Get FontAwesome icon component directly (no async needed)
+  const iconComponent = !hasCustomIcon ? iconImports[iconToShow] : null;
+
+  const handleFileSelect = async (event) => {
+    const file = event.target.files[0];
+    if (!file || isUploading) return;
+
+    // Validate file type - only accept images
+    if (!file.type.startsWith("image/")) {
+      alert("Please upload an image file (JPEG, PNG, GIF, or WebP)");
+      return;
+    }
+
+    setIsUploading(true);
+
+    try {
+      // Compress and upload the image
+      const compressedFile = await fileActions.compressImage(
+        file,
+        1400,
+        0.8,
+        false,
+      );
+
+      const filename = generateFilename(compressedFile, featureId);
+      const url = await fileActions.uploadMediaAsync(compressedFile, filename);
+
+      if (onChange) {
+        onChange(url);
+      }
+    } catch (error) {
+      alert("Failed to upload image. Please try again.");
+    } finally {
+      setIsUploading(false);
+      // Reset file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+
+  const handleUploadClick = () => {
+    if (fileInputRef.current && !isUploading) {
+      fileInputRef.current.click();
+    }
+  };
+
+  const handleRemove = () => {
+    if (onRemove && !disableRemove) {
+      onRemove();
+    }
+  };
+
+  // Container will use CSS modules classes
+  // Custom styling through props is deprecated in favor of CSS consistency
+
+  return (
+    <div className={`${styles.iconLoader} ${styles.iconLoader__container}`}>
+      {/* Show the icon/image */}
+      {hasCustomIcon ? (
+        <img
+          src={value}
+          alt="Custom icon"
+          className={styles.iconLoader__image}
+        />
+      ) : (
+        <div className={styles.iconLoader__iconContainer}>
+          {iconComponent ? (
+            <FontAwesomeIcon
+              icon={iconComponent}
+              className={`${styles.iconLoader__icon} ${styles.iconLoader__iconLarge}`}
+            />
+          ) : (
+            <div className={styles.iconLoader__fallbackText}>{iconToShow}</div>
+          )}
+        </div>
+      )}
+
+      {/* Upload/Delete button overlay - only shows on hover */}
+      <div className={styles.iconLoader__buttonOverlay}>
+        {hasCustomIcon ? (
+          <Button
+            buttonType="secondary"
+            isActive
+            onClick={handleRemove}
+            disabled={disableRemove || isUploading}
+            size="small"
+            leftIcon="times"
+            aria-label="Delete icon"
+          >
+            Delete
+          </Button>
+        ) : (
+          <Button
+            buttonType="primary"
+            onClick={() => { }}
+            disabled={isUploading}
+            size="small"
+            leftIcon="upload"
+            loading={isUploading}
+            aria-label="Upload icon"
+          >
+            Upload
+          </Button>
+        )}
+      </div>
+
+      {/* Hidden file input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/jpeg,image/png,image/gif,image/webp,image/svg"
+        onChange={handleFileSelect}
+        className={styles.iconLoader__hiddenInput}
+      />
+    </div>
+  );
+};
+
+export default IconLoader;

package/src/components/IconLoader.module.css

@@ -0,0 +1,92 @@
+/* IconLoader BEM CSS Module */
+
+/* Block */
+.iconLoader {
+	border-radius: 50%;
+	overflow: hidden;
+	position: relative;
+	background-color: #f8f9fa;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* Container variants */
+.iconLoader__container {
+	width: 150px;
+	height: 150px;
+	border: 3px solid #e9ecef;
+}
+
+/* Elements */
+.iconLoader__image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.iconLoader__iconContainer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+}
+
+.iconLoader__icon {
+	font-size: var(--font-size-5xl);
+	color: #333;
+}
+
+/* Icon size variants */
+.iconLoader__iconLarge {
+	font-size: 60px;
+	color: #333;
+}
+
+/* Button icon styling - no longer needed since we use leftIcon prop */
+/* .iconLoader__buttonIcon {
+	margin-right: 6px;
+} */
+
+/* Hidden input */
+.iconLoader__hiddenInput {
+	display: none !important;
+}
+
+.iconLoader__fallbackText {
+	font-size: var(--font-size-sm);
+	color: #6c757d;
+	text-align: center;
+	padding: 8px;
+}
+
+/* Button overlay - shows on hover */
+.iconLoader__buttonOverlay {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 10;
+	opacity: 0;
+	visibility: hidden;
+	transition: all 0.2s ease;
+	background-color: rgba(255, 255, 255, 0.95);
+	border-radius: 8px;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Show button overlay on hover */
+.iconLoader:hover .iconLoader__buttonOverlay {
+	opacity: 1;
+	visibility: visible;
+}
+
+/* Hidden input */
+.iconLoader__hiddenInput {
+	display: none !important;
+}

package/src/components/IconSelector.jsx

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { PlussCore } from "../feature.config";
+const { Text } = PlussCore.Components;
+import { allIcons, defaultIcon } from "./iconCategories";
+import { iconImports } from "./iconImports";
+import styles from "./IconSelector.module.css";
+
+
+const IconSelector = ({
+	selectedIcon,
+	onIconSelect,
+	className,
+	stepErrors,
+	showError,
+}) => {
+	const [hoveredIcon, setHoveredIcon] = useState(null);
+
+	// Get selected icon directly (no async needed)
+	const iconToLoad = selectedIcon || defaultIcon;
+	const currentIconComponent = iconImports[iconToLoad];
+
+	const handleIconClick = (icon) => {
+		onIconSelect(icon);
+	};
+
+	return (
+		<div className={`${styles.iconSelector} ${className || ""}`}>
+			{/* Header */}
+			<Text type="formTitleSmall" className={styles.title}>
+				Select icon
+			</Text>
+			<Text type="body" className={styles.subtitle}>
+				Select an icon to use for the feature when shown in the Community
+				Manager's menu
+			</Text>
+
+			{/* Current Selection */}
+			<div className={styles.currentSelection}>
+				<div className={styles.currentSelectionHeader}>
+					<Text type="formLabel" className={styles.currentSelectionLabel}>
+						Current selection
+					</Text>
+					{showError && stepErrors && stepErrors.icon && (
+						<div className={styles.fieldError} role="alert" id="icon-error">
+							<span className={styles.errorIcon}>⚠️</span>
+							{stepErrors.icon}
+						</div>
+					)}
+				</div>
+				<div className={styles.currentSelectionDisplay}>
+					{currentIconComponent ? (
+						<FontAwesomeIcon
+							icon={currentIconComponent}
+							className={styles.selectedIcon}
+						/>
+					) : (
+						<span className={styles.iconName}>
+							{selectedIcon || defaultIcon}
+						</span>
+					)}
+				</div>
+			</div>
+
+			{/* Simple Flat Icon Grid - matching image exactly */}
+			<div className={styles.iconGridContainer}>
+				<div className={styles.iconGrid}>
+					{allIcons.map((icon) => {
+						const isSelected = selectedIcon === icon;
+						const isHovered = hoveredIcon === icon;
+
+						return (
+							<button
+								key={icon}
+								className={`
+                  ${styles.iconButton}
+                  ${isSelected ? styles.selected : ""}
+                  ${isHovered ? styles.hovered : ""}
+                `}
+								onClick={() => handleIconClick(icon)}
+								onMouseEnter={() => setHoveredIcon(icon)}
+								onMouseLeave={() => setHoveredIcon(null)}
+								aria-pressed={isSelected}
+								aria-label={`Select ${icon} icon${isSelected ? ", currently selected" : ""}`}
+								aria-describedby={
+									showError && stepErrors && stepErrors.icon
+										? "icon-error"
+										: undefined
+								}
+							>
+								<Icon iconName={icon} size="lg" />
+							</button>
+						);
+					})}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+// Simple static icon component
+const Icon = ({ iconName, size }) => {
+	const iconDef = iconImports[iconName];
+
+	if (!iconDef) {
+		return <span className={styles.iconFallback}>{iconName}</span>;
+	}
+
+	return <FontAwesomeIcon icon={iconDef} size={size} />;
+};
+
+export default IconSelector;

package/src/components/IconSelector.module.css

@@ -0,0 +1,197 @@
+/* Icon Selector Component Styles - Simple Flat Grid Layout */
+.iconSelector {
+	width: 100%;
+	margin: 16px 0px;
+}
+
+/* Header */
+.title {
+	font-weight: 600;
+	font-size: 18px;
+	color: var(--text-dark);
+}
+
+.subtitle {
+	color: var(--text-light);
+	line-height: 1.4;
+}
+
+/* Current Selection */
+.currentSelection {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px 0;
+}
+
+.currentSelectionHeader {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.currentSelectionDisplay {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.selectedIcon {
+	aspect-ratio: 1;
+	font-size: 24px;
+	border: 2px solid var(--colour-branding-main);
+	border-radius: 4px;
+	padding: 0.25em;
+	color: var(--colour-branding-main);
+}
+
+.iconName {
+	background: var(--bg-bluegrey);
+	font-size: 14px;
+	color: var(--text-light);
+}
+
+/* Simple Flat Icon Grid */
+.iconGridContainer {
+}
+
+.iconGrid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
+	gap: 8px;
+	max-width: 500px;
+}
+
+.iconButton {
+	display: flex;
+	aspect-ratio: 1;
+	overflow: hidden;
+	align-items: center;
+	justify-content: center;
+	aspect-ratio: 1;
+	border: 2px solid var(--text-dark-alpha10);
+	border-radius: 6px;
+	background: var(--bg-white);
+	color: var(--text-light);
+	cursor: pointer;
+	transition: all 0.2s ease;
+	position: relative;
+	font-size: 12px;
+	padding: 0.5em;
+}
+
+.iconButton svg {
+	color: var(--text-light);
+}
+
+.iconButton:hover {
+	border-color: var(--colour-branding-main);
+	background: var(--bg-white);
+	color: var(--colour-branding-main);
+}
+
+.iconButton:hover svg {
+	color: var(--colour-branding-main);
+}
+
+.iconButton.selected {
+	border-color: var(--colour-branding-main);
+	background: var(--bg-white);
+	color: var(--colour-branding-main);
+}
+
+.iconButton.selected svg {
+	color: var(--colour-branding-main);
+}
+
+.iconButton.selected:hover {
+	border-color: var(--colour-branding-dark);
+	color: var(--colour-branding-dark);
+}
+
+.iconButton.selected:hover svg {
+	color: var(--colour-branding-dark);
+}
+
+.iconFallback {
+	font-size: 10px;
+	text-align: center;
+	word-break: break-all;
+	padding: 2px;
+	line-height: 1.2;
+}
+
+/* Scrollbar styling */
+.iconGridContainer::-webkit-scrollbar {
+	width: 8px;
+}
+
+.iconGridContainer::-webkit-scrollbar-track {
+	background: var(--bg-grey);
+	border-radius: 4px;
+}
+
+.iconGridContainer::-webkit-scrollbar-thumb {
+	background: var(--text-dark-alpha10);
+	border-radius: 4px;
+}
+
+.iconGridContainer::-webkit-scrollbar-thumb:hover {
+	background: var(--text-light);
+}
+
+/* Field error styles */
+.fieldError {
+	color: var(--colour-branding-secondary);
+	font-size: 0.875rem;
+	font-weight: 500;
+	margin-top: 0.5rem;
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+}
+
+.errorIcon {
+	font-size: 1rem;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+	.iconSelector {
+		padding: 16px;
+	}
+
+	.iconGrid {
+		grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+		gap: 6px;
+		padding: 12px;
+	}
+
+	.iconButton {
+		width: 40px;
+		height: 40px;
+		font-size: 16px;
+	}
+
+	.selectedIcon {
+		font-size: 24px !important;
+	}
+}
+
+@media (max-width: 480px) {
+	.iconGrid {
+		grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
+		gap: 4px;
+		padding: 8px;
+	}
+
+	.iconButton {
+		width: 36px;
+		height: 36px;
+		font-size: 14px;
+	}
+
+	.selectedIcon {
+		font-size: 20px !important;
+	}
+}