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

package/src/components/ErrorBoundary.jsx

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

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

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

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

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

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

package/src/components/FeatureBuilderSidebar.jsx

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

@@ -1,49 +0,0 @@
-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 }) => {
-	if (!isOpen) {
-		return null;
-	}
-
-	const buttons = [
-		{
-			type: "primary",
-			text: "Got it",
-			onClick: onClose,
-			isActive: true,
-		},
-	];
-
-	const capitalisedName =
-		featureName && featureName[0].toUpperCase() + featureName.slice(1);
-
-	return (
-		<Popup
-			title={`${capitalisedName} Created`}
-			subtitle={
-				<>{capitalisedName} 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}>
-					{capitalisedName} is saved and ready to go. To use it, add it to your
-					site using the <b>Feature Picker.</b>
-				</div>
-				<div className={styles.successMessage}>
-					Once added, your team can start creating content for the feature.
-				</div>
-			</div>
-		</Popup>
-	);
-};
-
-export { FeatureBuilderSuccessPopup };

package/src/components/FeatureBuilderSuccessPopup.module.css

@@ -1,41 +0,0 @@
-.successContent {
-	display: flex;
-	flex-direction: column;
-	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 {
-	font-size: 16px;
-	line-height: 1.5;
-	max-width: 400px;
-	color: #181c4a;
-}
-
-.featureName {
-	font-weight: 600;
-	color: #333;
-}

package/src/components/FeatureBuilderWelcomePopup.jsx

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

@@ -1,21 +0,0 @@
-.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;
-}