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

package/src/components/iconImports.js

@@ -0,0 +1,409 @@
+/*
+ * Shared icon imports module to eliminate duplication across components
+ * Consolidates all FontAwesome icon imports used in the feature builder
+ */
+
+// Static icon imports for retirement village community management
+import {
+	// Community & Living
+	faHome,
+	faUsers,
+	faUser,
+	faHeart,
+	faStar,
+	faFlag,
+	faHandsHelping,
+	faHandshake,
+	faPeopleCarry,
+	faChild,
+	// Household & Comfort
+	faCouch,
+	faBed,
+	faTv,
+	faBath,
+	faShower,
+	faToilet,
+	faSink,
+	faChair,
+	faTable,
+	faFire,
+	faFan,
+	faTemperatureHigh,
+	// Health & Wellness
+	faShield,
+	faUserNurse,
+	faStethoscope,
+	faHeartPulse,
+	faWheelchair,
+	faCrutch,
+	faPrescriptionBottle,
+	faPills,
+	faSyringe,
+	faThermometer,
+	// Activities & Events
+	faCalendar,
+	faClock,
+	faBell,
+	faMusic,
+	faBook,
+	faImage,
+	faCamera,
+	faChess,
+	faDice,
+	faTheaterMasks,
+	faPalette,
+	faGraduationCap,
+	faTrophy,
+	// Sports & Recreation
+	faBasketballBall,
+	faFootballBall,
+	faVolleyballBall,
+	faTableTennis,
+	faBowlingBall,
+	faSwimmingPool,
+	faWalking,
+	faHiking,
+	faUmbrellaBeach,
+	// Dining & Food
+	faUtensils,
+	faCoffee,
+	faWineGlass,
+	faGlassWater,
+	faPizzaSlice,
+	faAppleAlt,
+	faCarrot,
+	faBreadSlice,
+	faIceCream,
+	faCocktail,
+	// Transportation
+	faCar,
+	faBus,
+	faTrain,
+	faBicycle,
+	faTruck,
+	// Files & Information
+	faFile,
+	faFileLines,
+	faFolder,
+	faBookOpen,
+	faClipboard,
+	faPaperclip,
+	// Communication
+	faPhone,
+	faEnvelope,
+	faMapMarkerAlt,
+	faLocationDot,
+	// Garden & Outdoor
+	faTree,
+	faLeaf,
+	faSeedling,
+	faSun,
+	faCloudSun,
+	faBug,
+	// Maintenance & Safety
+	faWrench,
+	faHammer,
+	faScrewdriverWrench,
+	faTools,
+	faPaintBrush,
+	faScissors,
+	faLock,
+	faUnlock,
+	faKey,
+	faEye,
+	faEyeSlash,
+	// Shopping & Commerce
+	faShoppingCart,
+	faShoppingBag,
+	faCreditCard,
+	faMoneyBill,
+	faDollarSign,
+	faPiggyBank,
+	faReceipt,
+	faBarcode,
+	faBox,
+	// Additional icons from IconLoader
+	faSearch,
+	faCog,
+	faGear,
+	faAnchor,
+	faFolderOpen,
+	faCheck,
+	faCheckCircle,
+	faTimes,
+	faXmark,
+	faPlus,
+	faMinus,
+	faEdit,
+	faPen,
+	faTrash,
+	faArrowUp,
+	faArrowDown,
+	faArrowLeft,
+	faArrowRight,
+	faChevronRight,
+	faRotateRight,
+	faRotate,
+	faSync,
+	faRepeat,
+	// Grid layout icons
+	faTh,
+	faList,
+	faSquare,
+	faGripVertical,
+	faGripLines,
+	faBorderAll,
+	faTableCells,
+	// Media & Entertainment
+	faPlay,
+	faPause,
+	faStop,
+	faVideo,
+	faMicrophone,
+	faVolumeUp,
+	faVolumeDown,
+	faHeadphones,
+	// Data & Analytics
+	faChartBar,
+	faChartLine,
+	faChartPie,
+	faDesktop,
+	faLaptop,
+	faMobile,
+	// Cloud & Network
+	faCloud,
+	faServer,
+	faUpload,
+	faDownload,
+	faShare,
+	faCompass,
+	faMap,
+	// Additional icons for field types
+	faParagraph,
+	faArrowCircleRight,
+	faHeading,
+	faAlignLeft,
+	faLink,
+	faMinusCircle,
+} from "@fortawesome/free-solid-svg-icons";
+
+export const iconImports = {
+	// Community & Living
+	home: faHome,
+	users: faUsers,
+	user: faUser,
+	heart: faHeart,
+	star: faStar,
+	flag: faFlag,
+	"hands-helping": faHandsHelping,
+	handshake: faHandshake,
+	"people-carry": faPeopleCarry,
+	child: faChild,
+
+	// Household & Comfort
+	couch: faCouch,
+	bed: faBed,
+	tv: faTv,
+	bath: faBath,
+	shower: faShower,
+	toilet: faToilet,
+	sink: faSink,
+	chair: faChair,
+	table: faTable,
+	fire: faFire,
+	fan: faFan,
+	"temperature-high": faTemperatureHigh,
+
+	// Health & Wellness
+	shield: faShield,
+	"user-nurse": faUserNurse,
+	stethoscope: faStethoscope,
+	"heart-pulse": faHeartPulse,
+	wheelchair: faWheelchair,
+	crutch: faCrutch,
+	"prescription-bottle": faPrescriptionBottle,
+	pills: faPills,
+	syringe: faSyringe,
+	thermometer: faThermometer,
+
+	// Activities & Events
+	calendar: faCalendar,
+	clock: faClock,
+	bell: faBell,
+	music: faMusic,
+	book: faBook,
+	image: faImage,
+	camera: faCamera,
+	chess: faChess,
+	dice: faDice,
+	"theater-masks": faTheaterMasks,
+	palette: faPalette,
+	"graduation-cap": faGraduationCap,
+	trophy: faTrophy,
+
+	// Sports & Recreation
+	"basketball-ball": faBasketballBall,
+	"football-ball": faFootballBall,
+	"volleyball-ball": faVolleyballBall,
+	"table-tennis": faTableTennis,
+	"bowling-ball": faBowlingBall,
+	"swimming-pool": faSwimmingPool,
+	walking: faWalking,
+	hiking: faHiking,
+	"umbrella-beach": faUmbrellaBeach,
+
+	// Dining & Food
+	utensils: faUtensils,
+	coffee: faCoffee,
+	"wine-glass": faWineGlass,
+	"glass-water": faGlassWater,
+	"pizza-slice": faPizzaSlice,
+	"apple-alt": faAppleAlt,
+	carrot: faCarrot,
+	"bread-slice": faBreadSlice,
+	"ice-cream": faIceCream,
+	cocktail: faCocktail,
+
+	// Transportation
+	car: faCar,
+	bus: faBus,
+	train: faTrain,
+	bicycle: faBicycle,
+	truck: faTruck,
+
+	// Files & Information
+	file: faFile,
+	"file-lines": faFileLines,
+	folder: faFolder,
+	"book-open": faBookOpen,
+	clipboard: faClipboard,
+	paperclip: faPaperclip,
+
+	// Communication
+	phone: faPhone,
+	envelope: faEnvelope,
+	"map-marker": faMapMarkerAlt,
+	"location-dot": faLocationDot,
+
+	// Garden & Outdoor
+	tree: faTree,
+	leaf: faLeaf,
+	seedling: faSeedling,
+	sun: faSun,
+	"cloud-sun": faCloudSun,
+	bug: faBug,
+
+	// Maintenance & Safety
+	wrench: faWrench,
+	hammer: faHammer,
+	screwdriver: faScrewdriverWrench,
+	drill: faScrewdriverWrench,
+	saw: faTools,
+	"paint-brush": faPaintBrush,
+	scissors: faScissors,
+	tools: faTools,
+	lock: faLock,
+	unlock: faUnlock,
+	key: faKey,
+	eye: faEye,
+	"eye-slash": faEyeSlash,
+
+	// Shopping & Commerce
+	"shopping-cart": faShoppingCart,
+	"shopping-bag": faShoppingBag,
+	"credit-card": faCreditCard,
+	"money-bill": faMoneyBill,
+	"dollar-sign": faDollarSign,
+	"piggy-bank": faPiggyBank,
+	receipt: faReceipt,
+	barcode: faBarcode,
+	box: faBox,
+	package: faBox,
+
+	// Additional icons from IconLoader
+	search: faSearch,
+	cog: faCog,
+	gear: faGear,
+	settings: faGear,
+	"map-marker": faMapMarkerAlt,
+	"location-dot": faLocationDot,
+	phone: faPhone,
+	anchor: faAnchor,
+	paperclip: faPaperclip,
+	"folder-open": faFolderOpen,
+	check: faCheck,
+	"check-circle": faCheckCircle,
+	times: faTimes,
+	xmark: faXmark,
+	plus: faPlus,
+	minus: faMinus,
+	minusCircle: faMinusCircle,
+	edit: faEdit,
+	pen: faPen,
+	trash: faTrash,
+	"arrow-up": faArrowUp,
+	"arrow-down": faArrowDown,
+	"arrow-left": faArrowLeft,
+	"arrow-right": faArrowRight,
+	"chevron-right": faChevronRight,
+	rotate: faRotateRight,
+	refresh: faRotate,
+	sync: faSync,
+	repeat: faRepeat,
+
+	// Grid layout icons
+	th: faTh,
+	"th-list": faList,
+	square: faSquare,
+	"grip-vertical": faGripVertical,
+	"grip-horizontal": faGripLines,
+	"grid-3x3": faBorderAll,
+	"grid-2x2": faTableCells,
+	"border-all": faBorderAll,
+	"table-cells": faBorderAll,
+	"table-list": faTable,
+
+	// Media & Entertainment
+	play: faPlay,
+	pause: faPause,
+	stop: faStop,
+	video: faVideo,
+	camera: faCamera,
+	image: faImage,
+	picture: faImage,
+	microphone: faMicrophone,
+	"volume-up": faVolumeUp,
+	"volume-down": faVolumeDown,
+	headphones: faHeadphones,
+	speaker: faVolumeUp,
+
+	// Data & Analytics
+	"chart-bar": faChartBar,
+	"chart-line": faChartLine,
+	"chart-pie": faChartPie,
+	desktop: faDesktop,
+	computer: faDesktop,
+	laptop: faLaptop,
+	mobile: faMobile,
+
+	// Cloud & Network
+	cloud: faCloud,
+	server: faServer,
+	upload: faUpload,
+	download: faDownload,
+	share: faShare,
+	compass: faCompass,
+	map: faMap,
+
+	// Aliases for consistency
+	picture: faImage,
+	computer: faDesktop,
+	speaker: faVolumeUp,
+
+	// Additional icons for field types
+	paragraph: faParagraph,
+	"arrow-circle-right": faArrowCircleRight,
+	heading: faHeading,
+	"align-left": faAlignLeft,
+	link: faLink,
+};

package/src/components/index.js

@@ -0,0 +1,61 @@
+import { PlussCore } from "../feature.config";
+
+const { Components } = PlussCore;
+export const Header = Components.Header;
+export const AddButton = Components.AddButton;
+export const Button = Components.Button;
+export const GenericInput = Components.GenericInput;
+export const AnalyticsFilter = Components.AnalyticsFilter;
+export const ImageInput = Components.ImageInput;
+
+export const RadioButton = Components.RadioButton;
+export const DropdownInput = Components.DropdownInput;
+export const OverlayPage = Components.OverlayPage;
+export const OverlayPageContents = Components.OverlayPageContents;
+export const OverlayPageSection = Components.OverlayPageSection;
+export const OverlayPageBottomButtons = Components.OverlayPageBottomButtons;
+export const UserListing = Components.UserListing;
+export const P60Icon = Components.P60Icon;
+export const DatePicker = Components.DatePicker;
+export const TimePicker = Components.TimePicker;
+export const SuccessPopup = Components.SuccessPopup;
+export const AudienceSelector = Components.AudienceSelector;
+export const CheckBox = Components.CheckBox;
+export const TextFormatPopup = Components.TextFormatPopup;
+export const OptionsSection = Components.OptionsSection;
+export const FileInput = Components.FileInput;
+export const Popup = Components.Popup;
+export const HubSidebar = Components.HubSidebar;
+export { DeleteConfirmationPopup } from "./DeleteConfirmationPopup.jsx";
+export { FeatureBuilderSuccessPopup } from "./FeatureBuilderSuccessPopup.jsx";
+export { FeatureBuilderWelcomePopup } from "./FeatureBuilderWelcomePopup.jsx";
+
+export { default as SortButtonGroup } from "./SortButtonGroup.jsx";
+export { ToggleSwitch } from "./ToggleSwitch.js";
+export { default as LoadingState } from "./LoadingState.jsx";
+export { default as LoadingScreen } from "./LoadingScreen.jsx";
+export { default as SkeletonLoader } from "./SkeletonLoader.jsx";
+export { default as BackgroundLoader } from "./BackgroundLoader.jsx";
+export { default as IconLoader } from "./IconLoader.jsx";
+export { default as FeatureBuilderSidebar } from "./FeatureBuilderSidebar.jsx";
+export { default as CenteredContainer } from "./CenteredContainer.jsx";
+
+export { ErrorMessage } from "./ErrorMessage.jsx";
+export { ErrorBoundary } from "./ErrorBoundary.jsx";
+
+// Core component exports
+export const Tag = Components.Tag;
+export const Text = Components.Text;
+
+// New component exports
+export { TwoColumnInput } from "./TwoColumnInput.jsx";
+export { BaseFieldConfig } from "./BaseFieldConfig.jsx";
+
+// Toast system exports
+export { default as ToastContainer } from "./ToastContainer.jsx";
+
+// Gallery components
+export { default as ListingGalleryInput } from "./listing/ListingGalleryInput.jsx";
+export { default as GalleryDisplay } from "./listing/GalleryDisplay.jsx";
+
+

package/src/components/listing/FileListItem.jsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { GenericInput } from "../../components";
+import { iconImports } from "../../components/iconImports.js";
+import styles from "./ListingFileInput.module.css";
+
+const FileListItem = ({ file, onNameChange, onRemove, disabled = false }) => {
+	// Get file icon based on file extension
+	const getFileIcon = (filename) => {
+		if (!filename) return iconImports.file;
+
+		const extension = filename.split(".").pop().toLowerCase();
+		switch (extension) {
+			case "pdf":
+				return iconImports.file; // Use generic file icon for now
+			case "doc":
+			case "docx":
+				return iconImports.file; // Use generic file icon for now
+			case "xls":
+			case "xlsx":
+				return iconImports.file; // Use generic file icon for now
+			case "jpg":
+			case "jpeg":
+			case "png":
+			case "gif":
+				return iconImports.image; // Use image icon for image files
+			case "txt":
+				return iconImports.fileAlt; // Use alternative file icon for text
+			default:
+				return iconImports.file;
+		}
+	};
+
+	const handleNameChange = (event) => {
+		const newName = event.target.value;
+		if (onNameChange) {
+			onNameChange(file.url, newName);
+		}
+	};
+
+	const handleRemove = () => {
+		if (onRemove) {
+			onRemove(file.url);
+		}
+	};
+
+	return (
+		<div className={styles.fileListItem}>
+			{/* File icon */}
+			<div className={styles.fileListItem__icon}>
+				<FontAwesomeIcon icon={getFileIcon(file.originalName)} />
+			</div>
+
+			{/* Original filename */}
+			<div className={styles.fileListItem__originalName}>
+				<span>{file.originalName}</span>
+			</div>
+
+			{/* Name input field */}
+			<div className={styles.fileListItem__input}>
+				<GenericInput
+					value={file.name || ""}
+					onChange={handleNameChange}
+					placeholder="Enter display name (optional)"
+					label="name"
+					disabled={disabled}
+					className={styles.fileListItem__nameInput}
+					alwaysShowLabel
+				/>
+			</div>
+
+			{/* Remove button */}
+			<div className={styles.fileListItem__actions}>
+				<button
+					onClick={handleRemove}
+					disabled={disabled}
+					className={styles.fileListItem__removeButton}
+				>
+					<FontAwesomeIcon icon={iconImports.minusCircle} />
+				</button>
+			</div>
+		</div>
+	);
+};
+
+export default FileListItem;