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

package/src/components/TwoColumnInput.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import styles from "./TwoColumnInput.module.css";
+
+/**
+ * Two Column Input layout component
+ * Renders form inputs in a side-by-side layout with proper spacing and styling
+ * Commonly used for label/placeholder pairs or related input fields
+ *
+ * @param {Object} props - Component props
+ * @param {React.ReactNode} props.left - Content for the left column (typically a form input)
+ * @param {React.ReactNode} props.right - Content for the right column (typically a form input)
+ * @param {boolean} [props.leftRequired=false] - Whether left column content is required
+ * @returns {React.ReactElement} Two-column layout wrapper
+ *
+ * @example
+ * <TwoColumnInput
+ *   left={<GenericInput label="First Name" />}
+ *   right={<GenericInput label="Last Name" />}
+ *   leftRequired={true}
+ * />
+ */
+export const TwoColumnInput = ({ left, right, leftRequired = false }) => {
+	return (
+		<div className={styles.twoColumnInput}>
+			<div className={`${styles.column} ${styles.leftColumn}`}>{left}</div>
+			<div className={`${styles.column} ${styles.rightColumn}`}>{right}</div>
+		</div>
+	);
+};

package/src/components/TwoColumnInput.module.css

@@ -0,0 +1,32 @@
+/* TwoColumnInput BEM CSS Module */
+
+.twoColumnInput {
+	display: flex;
+	gap: 20px;
+	align-items: center;
+}
+
+.column {
+	flex: 1;
+}
+
+.leftColumn {
+	flex: 1.2; /* Slightly wider for required label */
+}
+
+.rightColumn {
+	flex: 1;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+	.twoColumnInput {
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	.leftColumn,
+	.rightColumn {
+		flex: 1;
+	}
+}

package/src/components/ViewFull.js

@@ -0,0 +1,139 @@
+import React from "react";
+import { PlussCore } from "../feature.config";
+const { Text, Button } = PlussCore.Components;
+import full from "../images/full.png";
+import styles from "./ViewFull.module.css";
+
+const ViewFull = ({ listing }) => {
+	// If no listing data provided, show placeholder
+	if (!listing || !listing.fields) {
+		return <img className={styles.viewFull__image} src={full} alt="full" />;
+	}
+
+	// Get the title field
+	const title = listing.fields["mandatory-title"] || "Untitled";
+
+	// Find all CTA fields
+	const ctaFields = Object.keys(listing.fields).filter((fieldId) => {
+		const fieldValue = listing.fields[fieldId];
+		return (
+			fieldValue &&
+			typeof fieldValue === "object" &&
+			fieldValue.label &&
+			fieldValue.url
+		);
+	});
+
+	// Find all text fields
+	const textFields = Object.keys(listing.fields)
+		.filter((fieldId) => {
+			const fieldValue = listing.fields[fieldId];
+			return typeof fieldValue === "string" && fieldValue.length > 0;
+		})
+		.filter((fieldId) => fieldId !== "mandatory-title"); // Exclude title field
+
+	// Find all image fields
+	const imageFields = Object.keys(listing.fields).filter((fieldId) => {
+		const fieldValue = listing.fields[fieldId];
+		return typeof fieldValue === "string" && fieldValue.startsWith("https://");
+	});
+
+	// Find all file fields
+	const fileFields = Object.keys(listing.fields).filter((fieldId) => {
+		const fieldValue = listing.fields[fieldId];
+		// Handle both single file object and array of files
+		if (Array.isArray(fieldValue)) {
+			return fieldValue.length > 0 && fieldValue.some((f) => f.url && !f.label);
+		} else if (fieldValue && typeof fieldValue === "object") {
+			return fieldValue.url && !fieldValue.label; // Not a CTA field (CTA has both url and label)
+		}
+		return false;
+	});
+
+	// Helper function to normalize file data
+	const normalizeFiles = (fileData) => {
+		if (Array.isArray(fileData)) {
+			return fileData.filter((f) => f && f.url && !f.label);
+		} else if (
+			fileData &&
+			typeof fileData === "object" &&
+			fileData.url &&
+			!fileData.label
+		) {
+			return [fileData];
+		}
+		return [];
+	};
+
+	return (
+		<div className={styles.viewFull}>
+			{/* Title */}
+			<Text type="h2" className={styles.viewFull__title}>
+				{title}
+			</Text>
+
+			{/* Image fields */}
+			{imageFields.map((fieldId) => (
+				<div key={fieldId} className={styles.viewFull__imageContainer}>
+					<img
+						src={listing.fields[fieldId]}
+						alt={fieldId}
+						className={styles.viewFull__imageField}
+					/>
+				</div>
+			))}
+
+			{/* Text fields */}
+			{textFields.map((fieldId) => (
+				<Text key={fieldId} type="body" className={styles.viewFull__textField}>
+					{listing.fields[fieldId]}
+				</Text>
+			))}
+
+			{/* File fields */}
+			{fileFields.map((fieldId) => {
+				const files = normalizeFiles(listing.fields[fieldId]);
+				return (
+					<div key={fieldId} className={styles.viewFull__fileSection}>
+						{files.map((file, index) => (
+							<div
+								key={`${fieldId}-${index}`}
+								className={styles.viewFull__fileItem}
+							>
+								<a
+									href={file.url}
+									target="_blank"
+									rel="noopener noreferrer"
+									className={styles.viewFull__fileLink}
+								>
+									<Text type="body" className={styles.viewFull__fileName}>
+										{file.name || file.originalName}
+									</Text>
+								</a>
+							</div>
+						))}
+					</div>
+				);
+			})}
+
+			{/* CTA fields */}
+			{ctaFields.map((fieldId) => {
+				const ctaField = listing.fields[fieldId];
+				return (
+					<Button
+						key={fieldId}
+						buttonType="primary"
+						onClick={() => {
+							window.open(ctaField.url, "_blank", "noopener,noreferrer");
+						}}
+						className={styles.viewFull__ctaButton}
+					>
+						{ctaField.label}
+					</Button>
+				);
+			})}
+		</div>
+	);
+};
+
+export default ViewFull;

package/src/components/ViewFull.module.css

@@ -0,0 +1,71 @@
+/* ViewFull BEM CSS Module */
+
+/* Block */
+.viewFull {
+	padding: 20px;
+}
+
+/* Elements */
+.viewFull__image {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+.viewFull__title {
+	margin-bottom: 20px;
+}
+
+.viewFull__imageContainer {
+	margin-bottom: 20px;
+	text-align: center;
+}
+
+.viewFull__imageField {
+	max-width: 100%;
+	max-height: 300px;
+	object-fit: contain;
+}
+
+.viewFull__textField {
+	margin-bottom: 12px;
+	line-height: 1.4;
+}
+
+.viewFull__fileSection {
+	margin-bottom: 20px;
+}
+
+.viewFull__fileItem {
+	margin-bottom: 8px;
+	padding: 12px;
+	border: 1px solid var(--border-line-grey);
+	border-radius: 4px;
+	background-color: #fff;
+	transition: all 0.2s ease-in-out;
+}
+
+.viewFull__fileItem:hover {
+	border-color: var(--colour-branding-action);
+	box-shadow: 0 0 4px var(--colour-branding-action-alpha20);
+}
+
+.viewFull__fileLink {
+	text-decoration: none;
+	color: var(--text-dark);
+	display: flex;
+	align-items: center;
+}
+
+.viewFull__fileLink:hover {
+	color: var(--colour-branding-action);
+}
+
+.viewFull__fileName {
+	font-weight: 500;
+}
+
+.viewFull__ctaButton {
+	margin-top: 20px;
+	margin-right: 10px;
+}

package/src/components/ViewWidget.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { PlussCore } from "../feature.config";
+const { Text, Button } = PlussCore.Components;
+import widget from "../images/widget.png";
+import styles from "./ViewWidget.module.css";
+
+const ViewWidget = ({ listing }) => {
+	// If no listing data provided, show placeholder
+	if (!listing || !listing.fields) {
+		return <img className={styles.image} src={widget} alt="widget" />;
+	}
+
+	// Get the title field
+	const title = listing.fields["mandatory-title"] || "Untitled";
+
+	// Find all CTA fields and render the first one
+	const ctaFields = Object.keys(listing.fields).filter((fieldId) => {
+		// Check if field value has label and url (CTA structure)
+		const fieldValue = listing.fields[fieldId];
+		return (
+			fieldValue &&
+			typeof fieldValue === "object" &&
+			fieldValue.label &&
+			fieldValue.url
+		);
+	});
+
+	// If no CTA fields, just show title
+	if (ctaFields.length === 0) {
+		return (
+			<div className={styles.root}>
+				<Text type="body" className={styles.title}>
+					{title}
+				</Text>
+			</div>
+		);
+	}
+
+	// Render CTA button
+	const ctaFieldId = ctaFields[0];
+	const ctaField = listing.fields[ctaFieldId];
+
+	return (
+		<div className={styles.root}>
+			<Text type="body" className={styles.title}>
+				{title}
+			</Text>
+			<Button
+				buttonType="primary"
+				onClick={() => {
+					// Open URL in new window
+					window.open(ctaField.url, "_blank", "noopener,noreferrer");
+				}}
+				className={styles.ctaButton}
+			>
+				{ctaField.label}
+			</Button>
+		</div>
+	);
+};
+
+export default ViewWidget;

package/src/components/ViewWidget.module.css

@@ -0,0 +1,28 @@
+/* ViewWidget CSS Module */
+
+/* Block */
+.root {
+	padding: 8px;
+	text-align: center;
+	min-height: 80px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+/* Elements */
+.image {
+	width: 80px;
+}
+
+.title {
+	font-size: 12px;
+	margin-bottom: 8px;
+}
+
+.ctaButton {
+	font-size: 11px;
+	padding: 4px 8px;
+	min-width: auto;
+}

package/src/components/iconCategories.js

@@ -0,0 +1,135 @@
+/*
+ * Icon categories and definitions for the feature builder
+ * Curated for retirement village community management
+ * All icons are compatible with Font Awesome 6.4.0 (plugin) and 4.7.0 (main app)
+ */
+export const iconCategories = [
+	{
+		name: "Community & Living",
+		icons: [
+			"home",
+			"users",
+			"user",
+			"heart",
+			"star",
+			"flag",
+			"hands-helping",
+			"handshake",
+			"people-carry",
+			"child",
+		],
+	},
+	{
+		name: "Household & Comfort",
+		icons: [
+			"couch",
+			"bed",
+			"tv",
+			"bath",
+			"shower",
+			"toilet",
+			"sink",
+			"chair",
+			"table",
+			"fire",
+			"fan",
+			"temperature-high",
+		],
+	},
+	{
+		name: "Health & Wellness",
+		icons: [
+			"shield",
+			"heart",
+			"user-nurse",
+			"stethoscope",
+			"heart-pulse",
+			"wheelchair",
+			"crutch",
+			"prescription-bottle",
+			"pills",
+			"syringe",
+			"thermometer",
+		],
+	},
+	{
+		name: "Activities & Events",
+		icons: [
+			"calendar",
+			"clock",
+			"bell",
+			"music",
+			"book",
+			"image",
+			"camera",
+			"chess",
+			"dice",
+			"theater-masks",
+			"palette",
+			"graduation-cap",
+			"trophy",
+		],
+	},
+	{
+		name: "Sports & Recreation",
+		icons: [
+			"basketball-ball",
+			"football-ball",
+			"volleyball-ball",
+			"table-tennis",
+			"bowling-ball",
+			"swimming-pool",
+			"bicycle",
+			"walking",
+			"hiking",
+			"umbrella-beach",
+		],
+	},
+	{
+		name: "Dining & Food",
+		icons: [
+			"utensils",
+			"coffee",
+			"wine-glass",
+			"glass-water",
+			"pizza-slice",
+			"apple-alt",
+			"carrot",
+			"bread-slice",
+			"ice-cream",
+			"cocktail",
+		],
+	},
+	{
+		name: "Transportation",
+		icons: ["car", "bus", "train", "bicycle", "truck"],
+	},
+	{
+		name: "Files & Information",
+		icons: ["file", "file-lines", "folder", "book-open", "clipboard"],
+	},
+	{
+		name: "Communication",
+		icons: ["phone", "envelope", "map-marker", "location-dot"],
+	},
+	{
+		name: "Garden & Outdoor",
+		icons: ["tree", "leaf", "seedling", "sun", "cloud-sun", "bug"],
+	},
+	{
+		name: "Maintenance & Safety",
+		icons: ["wrench", "hammer", "tools", "lock"],
+	},
+];
+
+// Flatten all icons for easy iteration, removing duplicates
+export const allIcons = [
+	...new Set(
+		iconCategories.reduce((acc, category) => {
+			return [...acc, ...category.icons];
+		}, []),
+	),
+];
+
+// Default icons for current selection
+export const defaultIcon = "star";