@plusscommunities/pluss-feature-builder-web-d 1.0.7 → 1.0.9-beta.3

package/src/components/TwoColumnInput.jsx

@@ -1,29 +0,0 @@
-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

@@ -1,32 +0,0 @@
-/* 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

@@ -1,139 +0,0 @@
-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

@@ -1,71 +0,0 @@
-/* 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

@@ -1,62 +0,0 @@
-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

@@ -1,28 +0,0 @@
-/* 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

@@ -1,135 +0,0 @@
-/*
- * 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";