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

package/src/components/ErrorBoundary.jsx

@@ -0,0 +1,134 @@
+import React from "react";
+import { PlussCore } from "../feature.config";
+
+const { Components } = PlussCore;
+const { Text, Button } = Components;
+import styles from "./ErrorBoundary.module.css";
+
+
+class ErrorBoundary extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			hasError: false,
+			error: null,
+			errorInfo: null,
+		};
+	}
+
+	static getDerivedStateFromError(error) {
+		return { hasError: true };
+	}
+
+	componentDidCatch(error, errorInfo) {
+		this.setState({
+			error: error,
+			errorInfo: errorInfo,
+		});
+	}
+
+	handleRetry = () => {
+		this.setState({
+			hasError: false,
+			error: null,
+			errorInfo: null,
+		});
+
+		if (this.props.onRetry) {
+			this.props.onRetry();
+		} else {
+			window.location.reload();
+		}
+	};
+
+	render() {
+		if (this.state.hasError) {
+			const {
+				title = "Oops! Something went wrong",
+				message = "We encountered an unexpected error. Please try again.",
+			} = this.props;
+
+			return (
+				<div className="text-center p-6">
+					<div className="mb-4">
+						<span className={styles.errorIcon}>
+							⚠
+						</span>
+					</div>
+
+					<Text
+						type="h2"
+						className="mb-4"
+						className={styles.errorTitle}
+					>
+						{title}
+					</Text>
+
+					<Text
+						type="body"
+						className="mb-6"
+						className={styles.errorMessage}
+					>
+						{message}
+					</Text>
+
+					<Button buttonType="primary" onClick={this.handleRetry}>
+						Try Again
+					</Button>
+
+					{process.env.NODE_ENV === "development" && this.state.error && (
+						<details className="mt-6 text-left">
+							<summary
+								className={`cursor-pointer font-bold p-2 bg-gray-50 border rounded mb-3 ${styles.errorDetails}`}
+							>
+								Error Details (Development Only)
+							</summary>
+							<div
+								className={`p-4 bg-gray-50 border rounded ${styles.errorDetailsContent}`}
+							>
+								<div className="mb-4">
+									<strong className={styles.errorDetailsTitle}>
+										Error:
+									</strong>
+									<pre
+										className={`${styles.errorStack}`}
+									>
+										{this.state.error.toString()}
+									</pre>
+								</div>
+
+								{this.state.errorInfo && (
+									<div className="mb-4">
+										<strong className={styles.componentStackTitle}>
+											Component Stack:
+										</strong>
+										<pre className={`${styles.componentStack}`}>
+										>
+											{this.state.errorInfo.componentStack}
+										</pre>
+									</div>
+								)}
+
+								{this.state.error.stack && (
+									<div>
+										<strong className={styles.componentStackTitle}>
+											Stack Trace:
+										</strong>
+										<pre className={`${styles.componentStack}`}>
+										>
+											{this.state.error.stack}
+										</pre>
+									</div>
+								)}
+							</div>
+						</details>
+					)}
+				</div>
+			);
+		}
+
+		return this.props.children;
+	}
+}
+
+export { ErrorBoundary };

package/src/components/ErrorBoundary.module.css

@@ -0,0 +1,77 @@
+/* Error icon */
+.errorIcon {
+	font-size: 3rem;
+	color: var(--colour-red);
+}
+
+/* Error title */
+.errorTitle {
+	color: var(--colour-red);
+}
+
+/* Error message */
+.errorMessage {
+	color: var(--text-dark);
+}
+
+/* Error details section */
+.errorDetails {
+	color: var(--text-dark);
+	background-color: var(--bg-bluegrey);
+	padding: 8px;
+	margin-bottom: 8px;
+	font-weight: bold;
+	cursor: pointer;
+}
+
+/* Error details content */
+.errorDetailsContent {
+	background-color: var(--bg-bluegrey);
+	padding: 16px;
+	margin-bottom: 16px;
+}
+
+/* Error details title */
+.errorDetailsTitle {
+	display: block;
+	margin-bottom: 8px;
+}
+
+/* Error stack trace */
+.errorStack {
+	font-size: 0.75rem;
+	line-height: 1.4;
+	overflow-x: auto;
+	background: #f8f9fa;
+	padding: 12px;
+	border-radius: 4px;
+	margin: 0;
+	color: var(--text-mid);
+	background-color: var(--bg-white);
+	border: 1px solid var(--colour-branding-inactive);
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+/* Component stack */
+.componentStackTitle {
+	display: block;
+	margin-bottom: 8px;
+	color: var(--text-dark);
+}
+
+.componentStack {
+	font-size: 0.75rem;
+	line-height: 1.4;
+	font-family: monospace;
+	background: #f8f9fa;
+	padding: 12px;
+	border-radius: 4px;
+	margin: 0;
+	overflow-x: auto;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	color: var(--text-mid);
+	background-color: var(--bg-white);
+	border: 1px solid var(--colour-branding-inactive);
+}

package/src/components/ErrorMessage.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { PlussCore } from "../feature.config";
+import styles from "./ErrorMessage.module.css";
+
+const { Components } = PlussCore;
+const { FontAwesomeIcon } = Components;
+
+const ErrorMessage = ({
+	message,
+	onClose,
+	variant = "error",
+	showIcon = true,
+	className = "",
+	style = {},
+}) => {
+	if (!message) return null;
+
+	const getIcon = () => {
+		switch (variant) {
+			case "error":
+				return "exclamation-circle";
+			case "warning":
+				return "exclamation-triangle";
+			case "success":
+				return "check-circle";
+			case "info":
+				return "info-circle";
+			default:
+				return "exclamation-circle";
+		}
+	};
+
+	const getTextIcon = () => {
+		switch (variant) {
+			case "error":
+				return "⚠";
+			case "warning":
+				return "⚠";
+			case "success":
+				return "✓";
+			case "info":
+				return "ℹ";
+			default:
+				return "⚠";
+		}
+	};
+
+	const getClassName = () => {
+		const baseClassName = styles.root;
+		const variantClassName = styles[`root--${variant}`];
+		const closableClassName = onClose ? styles["root--closable"] : "";
+		return [baseClassName, variantClassName, closableClassName, className]
+			.filter(Boolean)
+			.join(" ");
+	};
+
+	return (
+		<div className={getClassName()} style={style}>
+			<div className={styles.content}>
+				{showIcon && (
+					<span className={styles.icon}>
+						{FontAwesomeIcon ? (
+							<FontAwesomeIcon icon={getIcon()} />
+						) : (
+							getTextIcon()
+						)}
+					</span>
+				)}
+				<span className={styles.text}>{message}</span>
+			</div>
+			{onClose && (
+				<button
+					type="button"
+					className={styles.close}
+					onClick={onClose}
+					aria-label="Dismiss error"
+				>
+					{FontAwesomeIcon ? <FontAwesomeIcon icon="times" /> : "×"}
+				</button>
+			)}
+		</div>
+	);
+};
+
+export { ErrorMessage };

package/src/components/ErrorMessage.module.css

@@ -0,0 +1,116 @@
+/* ErrorMessage CSS Module */
+
+/* Block */
+.root {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px 16px;
+	border-radius: 4px;
+	margin-bottom: 16px;
+	border: 1px solid;
+	font-size: var(--font-size-sm);
+	line-height: 1.4;
+}
+
+/* Content wrapper */
+.content {
+	display: flex;
+	align-items: center;
+	flex: 1;
+	gap: 8px;
+}
+
+.icon {
+	flex-shrink: 0;
+	font-size: var(--font-size-base);
+}
+
+.text {
+	flex: 1;
+	word-wrap: break-word;
+}
+
+/* Close button */
+.close {
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 4px;
+	margin-left: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: inherit;
+	opacity: 0.7;
+	transition: opacity 0.2s ease;
+	border-radius: 2px;
+	flex-shrink: 0;
+}
+
+.close:hover {
+	opacity: 1;
+	background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Variants */
+.root--error {
+	background-color: #f8d7da;
+	color: #721c24;
+	border-color: #f5c6cb;
+}
+
+.root--error .close:hover {
+	background-color: rgba(114, 28, 36, 0.1);
+}
+
+.root--warning {
+	background-color: #fff3cd;
+	color: #856404;
+	border-color: #ffeaa7;
+}
+
+.root--warning .close:hover {
+	background-color: rgba(133, 100, 4, 0.1);
+}
+
+.root--success {
+	background-color: #d4edda;
+	color: #155724;
+	border-color: #c3e6cb;
+}
+
+.root--success .close:hover {
+	background-color: rgba(21, 87, 36, 0.1);
+}
+
+.root--info {
+	background-color: #d1ecf1;
+	color: #0c5460;
+	border-color: #bee5eb;
+}
+
+.root--info .close:hover {
+	background-color: rgba(12, 84, 96, 0.1);
+}
+
+/* Closable modifier for additional spacing */
+.root--closable {
+	padding-right: 12px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+	.root {
+		padding: 10px 12px;
+		font-size: var(--font-size-sm);
+	}
+
+	.content {
+		gap: 6px;
+	}
+
+	.icon {
+		font-size: var(--font-size-sm);
+	}
+}

package/src/components/ExampleDisplay.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import ActivityCardExample from "./ActivityCardExample.jsx";
+import styles from "./ExampleDisplay.module.css";
+
+/**
+ * Example Display component for feature preview
+ * Shows how feature cards will appear in the app
+ * Wraps ActivityCardExample with proper styling
+ *
+ * @param {Object} props - Component props
+ * @param {string} props.displayName - Feature name to display in preview
+ * @returns {React.ReactElement} Example feature card display
+ *
+ * @example
+ * <ExampleDisplay displayName="Contact Form" />
+ */
+const ExampleDisplay = ({ displayName }) => {
+	return (
+		<div className={styles.exampleDisplay}>
+			{/* Activity Card Example */}
+			<ActivityCardExample displayName={displayName} />
+		</div>
+	);
+};
+
+export default ExampleDisplay;

package/src/components/ExampleDisplay.module.css

@@ -0,0 +1,3 @@
+/* Example Display Component Styles */
+.exampleDisplay {
+}

package/src/components/FeatureBuilderSidebar.jsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { withRouter } from "react-router";
+import { useSelector } from "react-redux";
+import { PlussCore } from "../feature.config";
+import { values } from "../values.config.js";
+import { selectDefinition } from "../selectors/featureBuilderSelectors";
+import { capitalizeTextWithFallback } from "../utils/textUtils";
+
+const { HubSidebar } = PlussCore.Components;
+
+const FeatureBuilderSidebar = ({ history, onCreate }) => {
+	// Get the actual feature definition
+	const definition = useSelector(selectDefinition);
+
+	// Extract title and display name from definition
+	const featureTitle = definition && definition.title;
+	const featureDisplayName = definition && definition.displayName;
+
+	// Check if we're in edit mode (URL contains /edit/)
+	const isEditMode = history.location.pathname.includes("/edit/");
+
+	// Get listing title from URL for edit mode
+	const getListingTitleFromUrl = () => {
+		const pathParts = history.location.pathname.split("/");
+		const editIndex = pathParts.indexOf("edit");
+		if (editIndex !== -1 && pathParts.length > editIndex + 1) {
+			return pathParts[editIndex + 1]; // Get the ID after 'edit/'
+		}
+		return null;
+	};
+
+	// Use feature title for section title, fallback to values config
+	const sectionTitle = featureTitle || values.singularName;
+
+	// Navigate to create listing
+	const handleCreateListing = () => {
+		if (onCreate) {
+			onCreate();
+		} else {
+			history.push(values.routeCreateListing);
+		}
+	};
+
+	// Navigate to listing view
+	const handleViewListing = () => {
+		history.push(values.routeListingScreen);
+	};
+
+	// Build sidebar sections
+	const sections = [
+		{
+			title: sectionTitle,
+			items: [
+				{
+					type: "newButton",
+					text: `Create new ${capitalizeTextWithFallback(featureDisplayName, "listing")}`,
+					onClick: handleCreateListing,
+					buttonType: "outlined",
+				},
+				{
+					type: "navItem",
+					text:
+						isEditMode && getListingTitleFromUrl()
+							? `Edit ${capitalizeTextWithFallback(featureDisplayName, "listing")}: ${getListingTitleFromUrl()}`
+							: `View ${capitalizeTextWithFallback(featureDisplayName, "listing")} listing`,
+					icon: "eye",
+					isFontAwesome: true,
+					selected: history.location.pathname === values.routeListingScreen,
+					onClick: handleViewListing,
+				},
+			],
+		},
+	];
+
+	// Help guide configuration
+	const helpGuide = {
+		text: "Help",
+		url: "https://www.plusscommunities.com/user-guide",
+	};
+
+	return <HubSidebar sections={sections} helpGuide={helpGuide} />;
+};
+
+export default withRouter(FeatureBuilderSidebar);

package/src/components/FeatureBuilderSuccessPopup.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { PlussCore } from "../feature.config";
+const { Components } = PlussCore;
+const { Popup } = Components;
+import styles from "./FeatureBuilderSuccessPopup.module.css";
+
+const FeatureBuilderSuccessPopup = ({
+	isOpen,
+	onClose,
+	featureName,
+	displayName,
+}) => {
+	if (!isOpen) {
+		return null;
+	}
+
+	const buttons = [
+		{
+			type: "primary",
+			text: "Got it",
+			onClick: onClose,
+			isActive: true,
+		},
+	];
+
+	return (
+		<Popup
+			title={`${featureName} Created`}
+			subtitle={
+				<>
+					<span>{featureName}</span> is now saved and available for your
+					communities!
+				</>
+			}
+			onClose={onClose}
+			buttons={buttons}
+			hasPadding
+			minWidth={500}
+			maxWidth={600}
+		>
+			<div className={styles.successContent}>
+				<div className={styles.successMessage}>
+					To activate this feature, please add it to your sites using the
+					Feature Picker.
+				</div>
+				<div className={styles.successMessage}>
+					Team members with the right permissions can start creating content for
+					the communities that have installed the feature.
+				</div>
+			</div>
+		</Popup>
+	);
+};
+
+export { FeatureBuilderSuccessPopup };

package/src/components/FeatureBuilderSuccessPopup.module.css

@@ -0,0 +1,43 @@
+.successContent {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 20px;
+	padding: 20px 0;
+}
+
+.gifPlaceholder {
+	width: 100%;
+	max-width: 400px;
+}
+
+.gifContainer {
+	width: 100%;
+	height: 200px;
+	background-color: #f5f5f5;
+	border: 2px dashed #ccc;
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.gifPlaceholderText {
+	color: #999;
+	font-size: 14px;
+	text-align: center;
+	padding: 20px;
+}
+
+.successMessage {
+	text-align: center;
+	color: #666;
+	font-size: 16px;
+	line-height: 1.5;
+	max-width: 400px;
+}
+
+.featureName {
+	font-weight: 600;
+	color: #333;
+}

package/src/components/FeatureBuilderWelcomePopup.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { PlussCore } from "../feature.config";
+const { Components } = PlussCore;
+const { Popup } = Components;
+import styles from "./FeatureBuilderWelcomePopup.module.css";
+const { Text } = Components;
+
+const FeatureBuilderWelcomePopup = ({ isOpen, onClose }) => {
+	if (!isOpen) {
+		return null;
+	}
+
+	const buttons = [
+		{
+			type: "primary",
+			text: "Get Started",
+			onClick: onClose,
+			isActive: true,
+		},
+	];
+
+	return (
+		<Popup
+			title="Create a Custom Feature"
+			onClose={onClose}
+			buttons={buttons}
+			hasPadding
+			minWidth={600}
+			maxWidth={700}
+		>
+			<div className={styles.welcomeContent}>
+				<div className={styles.welcomeMessage}>
+					<Text type="bodyLarge">
+						Use this form to set up a new feature, such as "Hospitality" or
+						"Meet the Team."
+					</Text>
+					<Text type="bodyLarge">
+						You will select the name, the icon, and the specific details
+						required. This ensures the feature looks the same at every site.
+					</Text>
+					<Text type="bodyLarge">
+						Once you finish, you can install the feature on any site and
+						authorized users can manage its content.
+					</Text>
+				</div>
+			</div>
+		</Popup>
+	);
+};
+
+export { FeatureBuilderWelcomePopup };

package/src/components/FeatureBuilderWelcomePopup.module.css

@@ -0,0 +1,21 @@
+.welcomeContent {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	padding: 20px 0;
+}
+
+.welcomeMessage {
+	color: #666;
+	font-size: 16px;
+	line-height: 1.6;
+	width: 100%;
+}
+
+.welcomeMessage p {
+	margin: 0 0 16px 0;
+}
+
+.welcomeMessage p:last-child {
+	margin-bottom: 0;
+}