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

package/src/components/listing/GalleryDisplay.jsx

@@ -1,330 +0,0 @@
-import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Text } from "../../components";
-import { iconImports } from "../../components/iconImports.js";
-import styles from "./GalleryDisplay.module.css";
-
-export const GalleryDisplay = (props) => {
-	const {
-		images = [],
-		layout = "grid",
-		columns = 3,
-		allowReordering = false,
-		allowLightbox = false,
-		style = {},
-		onImageClick,
-		onImageRemove,
-		onImageReorder,
-	} = props;
-
-	const [lightboxImage, setLightboxImage] = useState(null);
-	const [draggedIndex, setDraggedIndex] = useState(null);
-
-	// Filter out empty/invalid images
-	const validImages = images.filter((img) => img && img !== "");
-
-	if (validImages.length === 0) {
-		return (
-			<div className={styles.emptyGallery} style={style}>
-				<Text type="body" className={styles.emptyGalleryText}>
-					No images in gallery
-				</Text>
-			</div>
-		);
-	}
-
-	const handleImageClick = (image, index) => {
-		if (allowLightbox) {
-			setLightboxImage({ image, index });
-		}
-		if (onImageClick) {
-			onImageClick(image, index);
-		}
-	};
-
-	const handleDragStart = (index) => {
-		if (allowReordering) {
-			setDraggedIndex(index);
-		}
-	};
-
-	const handleDragOver = (e) => {
-		if (allowReordering) {
-			e.preventDefault();
-		}
-	};
-
-	const handleDrop = (e, dropIndex) => {
-		if (allowReordering && draggedIndex !== null) {
-			e.preventDefault();
-			onImageReorder?.(draggedIndex, dropIndex);
-			setDraggedIndex(null);
-		}
-	};
-
-	const removeImage = (index, e) => {
-		e.stopPropagation();
-		onImageRemove?.(index);
-	};
-
-	// Grid Layout
-	if (layout === "grid") {
-		return (
-			<>
-				<div
-					className={styles.gridContainer}
-					style={{
-						"--columns": columns,
-						...style,
-					}}
-				>
-					{validImages.map((image, index) => (
-						<div
-							key={index}
-							className={styles.galleryItem}
-							onClick={() => handleImageClick(image, index)}
-							draggable={allowReordering}
-							onDragStart={() => handleDragStart(index)}
-							onDragOver={handleDragOver}
-							onDrop={(e) => handleDrop(e, index)}
-							style={{
-								cursor: allowLightbox || onImageClick ? "pointer" : "default",
-							}}
-						>
-							<img
-								src={image}
-								alt={`Gallery image ${index + 1}`}
-								className={styles.galleryItemImage}
-							/>
-
-							{/* Remove button */}
-							{onImageRemove && (
-								<button
-									onClick={(e) => removeImage(index, e)}
-									className={styles.removeButton}
-								>
-									<FontAwesomeIcon icon={iconImports.minusCircle} />
-								</button>
-							)}
-
-							{/* Drag indicator */}
-							{allowReordering && (
-								<div className={styles.dragHandle}>
-									<FontAwesomeIcon icon={iconImports.repeat} />
-								</div>
-							)}
-						</div>
-					))}
-				</div>
-
-				{/* Lightbox */}
-				{lightboxImage && (
-					<div
-						className={styles.lightbox}
-						onClick={() => setLightboxImage(null)}
-					>
-						<img
-							src={lightboxImage.image}
-							alt={`Gallery image ${lightboxImage.index + 1}`}
-							className={styles.lightboxImage}
-							onClick={(e) => e.stopPropagation()}
-						/>
-
-						{/* Lightbox close button */}
-						<button
-							onClick={() => setLightboxImage(null)}
-							className={styles.lightboxClose}
-						>
-							×
-						</button>
-
-						{/* Lightbox navigation */}
-						{validImages.length > 1 && (
-							<>
-								{lightboxImage.index > 0 && (
-									<button
-										onClick={(e) => {
-											e.stopPropagation();
-											setLightboxImage({
-												image: validImages[lightboxImage.index - 1],
-												index: lightboxImage.index - 1,
-											});
-										}}
-										className={`${styles.carouselNav} ${styles.carouselNavPrev}`}
-									>
-										‹
-									</button>
-								)}
-								{lightboxImage.index < validImages.length - 1 && (
-									<button
-										onClick={(e) => {
-											e.stopPropagation();
-											setLightboxImage({
-												image: validImages[lightboxImage.index + 1],
-												index: lightboxImage.index + 1,
-											});
-										}}
-										className={`${styles.carouselNav} ${styles.carouselNavNext}`}
-									>
-										›
-									</button>
-								)}
-							</>
-						)}
-					</div>
-				)}
-			</>
-		);
-	}
-
-	// List Layout
-	if (layout === "list") {
-		return (
-			<div className={styles.listContainer} style={style}>
-				{validImages.map((image, index) => (
-					<div key={index} className={styles.listItemContent}>
-						<img
-							src={image}
-							alt={`Gallery image ${index + 1}`}
-							className={styles.listItemImage}
-							onClick={() => handleImageClick(image, index)}
-							style={{
-								cursor: allowLightbox || onImageClick ? "pointer" : "default",
-							}}
-						/>
-
-						<div className={styles.listItemText}>
-							<Text type="bodyLarge" className={styles.listItemTitle}>
-								Image {index + 1}
-							</Text>
-						</div>
-
-						{/* Actions */}
-						<div
-							className={`${styles.listItemActions} ${styles.flex} ${styles.gap8}`}
-						>
-							{onImageRemove && (
-								<button
-									onClick={() => onImageRemove(index)}
-									className={styles.removeButton}
-								>
-									<FontAwesomeIcon icon={iconImports.minusCircle} />
-								</button>
-							)}
-						</div>
-					</div>
-				))}
-			</div>
-		);
-	}
-
-	// Carousel Layout (simplified version)
-	if (layout === "carousel") {
-		const [currentIndex, setCurrentIndex] = useState(0);
-
-		return (
-			<div className={styles.carouselContainer} style={style}>
-				<div className={styles.carouselItem}>
-					{/* Current image */}
-					<img
-						src={validImages[currentIndex]}
-						alt={`Gallery image ${currentIndex + 1}`}
-						className={styles.galleryItemImage}
-						onClick={() =>
-							handleImageClick(validImages[currentIndex], currentIndex)
-						}
-						style={{
-							cursor: allowLightbox || onImageClick ? "pointer" : "default",
-							height: "400px",
-						}}
-					/>
-
-					{/* Navigation */}
-					{validImages.length > 1 && (
-						<>
-							{currentIndex > 0 && (
-								<button
-									onClick={() => setCurrentIndex(currentIndex - 1)}
-									className={`${styles.carouselNav} ${styles.carouselNavPrev}`}
-								>
-									‹
-								</button>
-							)}
-							{currentIndex < validImages.length - 1 && (
-								<button
-									onClick={() => setCurrentIndex(currentIndex + 1)}
-									className={`${styles.carouselNav} ${styles.carouselNavNext}`}
-								>
-									›
-								</button>
-							)}
-						</>
-					)}
-				</div>
-
-				{/* Thumbnail strip */}
-				{validImages.length > 1 && (
-					<div
-						style={{
-							display: "flex",
-							gap: "8px",
-							marginTop: "12px",
-							overflowX: "auto",
-							padding: "8px 0",
-						}}
-					>
-						{validImages.map((image, index) => (
-							<img
-								key={index}
-								src={image}
-								alt={`Thumbnail ${index + 1}`}
-								style={{
-									width: "60px",
-									height: "60px",
-									objectFit: "cover",
-									borderRadius: "4px",
-									border:
-										index === currentIndex
-											? "2px solid var(--colour-branding-primary)"
-											: "1px solid var(--border-line-grey)",
-									cursor: "pointer",
-									opacity: index === currentIndex ? 1 : 0.6,
-								}}
-								onClick={() => setCurrentIndex(index)}
-							/>
-						))}
-					</div>
-				)}
-			</div>
-		);
-	}
-
-	// Fallback to grid
-	return (
-		<div
-			style={{
-				display: "grid",
-				gridTemplateColumns: `repeat(${columns}, 1fr)`,
-				gap: "12px",
-				...style,
-			}}
-		>
-			{validImages.map((image, index) => (
-				<img
-					key={index}
-					src={image}
-					alt={`Gallery image ${index + 1}`}
-					style={{
-						width: "100%",
-						aspectRatio: "1",
-						objectFit: "cover",
-						borderRadius: "8px",
-						border: "1px solid var(--border-line-grey)",
-					}}
-				/>
-			))}
-		</div>
-	);
-};
-
-export default GalleryDisplay;

package/src/components/listing/GalleryDisplay.module.css

@@ -1,309 +0,0 @@
-/* Empty gallery container */
-.emptyGallery {
-	border: 2px dashed var(--border-line-grey);
-	border-radius: var(--border-radius-lg);
-	padding: 2.5rem 1.25rem;
-	text-align: center;
-}
-
-/* Empty gallery text */
-.emptyGalleryText {
-	color: var(--text-bluegrey);
-}
-
-/* Grid layout container */
-.gridContainer {
-	display: grid;
-	grid-template-columns: repeat(var(--columns, 3), 1fr);
-	gap: 1rem;
-}
-
-/* List layout container */
-.listContainer {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-}
-
-/* Carousel container */
-.carouselContainer {
-	position: relative;
-	overflow: hidden;
-	border-radius: var(--border-radius-lg);
-}
-
-/* Carousel track */
-.carouselTrack {
-	display: flex;
-	transition: transform var(--transition-base) ease;
-}
-
-/* Carousel item */
-.carouselItem {
-	flex: 0 0 100%;
-	width: 100%;
-}
-
-/* Carousel navigation */
-.carouselNav {
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	background: rgba(0, 0, 0, 0.5);
-	color: white;
-	border: none;
-	border-radius: var(--border-radius-full);
-	width: 2.5rem;
-	height: 2.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	transition: background var(--transition-base) ease;
-}
-
-.carouselNav:hover {
-	background: rgba(0, 0, 0, 0.7);
-}
-
-.carouselNavPrev {
-	left: 0.75rem;
-}
-
-.carouselNavNext {
-	right: 0.75rem;
-}
-
-/* Gallery item */
-.galleryItem {
-	position: relative;
-	border-radius: var(--border-radius-lg);
-	overflow: hidden;
-	background-color: var(--bg-bluegrey);
-	cursor: pointer;
-	transition:
-		transform var(--transition-base) ease,
-		box-shadow var(--transition-base) ease;
-}
-
-.galleryItem:hover {
-	transform: translateY(-2px);
-	box-shadow: var(--shadow-lg);
-}
-
-/* Gallery item image */
-.galleryItemImage {
-	width: 100%;
-	height: 12.5rem;
-	object-fit: cover;
-	display: block;
-}
-
-/* List item image */
-.listItemImage {
-	width: 120px;
-	height: 120px;
-	object-fit: cover;
-	border-radius: var(--border-radius-lg);
-	flex-shrink: 0;
-}
-
-/* Remove button */
-.removeButton {
-	position: absolute;
-	top: 0.5rem;
-	right: 0.5rem;
-	background: transparent;
-	color: var(--colour-branding-primary);
-	border: none;
-	border-radius: var(--border-radius-full);
-	width: 1.75rem;
-	height: 1.75rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	opacity: 0;
-	transition: opacity var(--transition-base) ease;
-}
-
-.galleryItem:hover .removeButton {
-	opacity: 1;
-}
-
-/* Dragging state */
-.dragging {
-	opacity: 0.5;
-}
-
-.dragOver {
-	border: 2px dashed var(--colour-branding-action);
-}
-
-/* Lightbox */
-.lightbox {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background: rgba(0, 0, 0, 0.9);
-	z-index: 1000;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.lightboxImage {
-	max-width: 90%;
-	max-height: 90%;
-	object-fit: contain;
-	border-radius: var(--border-radius-lg);
-}
-
-.lightboxClose {
-	position: absolute;
-	top: 1.25rem;
-	right: 1.25rem;
-	background: rgba(255, 255, 255, 0.2);
-	color: white;
-	border: none;
-	border-radius: var(--border-radius-full);
-	width: 2.5rem;
-	height: 2.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	transition: background var(--transition-base) ease;
-}
-
-.lightboxClose:hover {
-	background: rgba(255, 255, 255, 0.3);
-}
-
-/* List item content */
-.listItemContent {
-	display: flex;
-	gap: 1rem;
-	align-items: center;
-	padding: 1rem;
-	background-color: var(--bg-white);
-	border-radius: var(--border-radius-lg);
-	border: 1px solid var(--border-line-grey);
-}
-
-.listItemText {
-	flex: 1;
-}
-
-.listItemTitle {
-	margin-bottom: 0.1rem;
-}
-
-.listItemActions {
-	display: flex;
-	gap: 8px;
-}
-
-/* List layout remove button (always visible) */
-.listItemContent .removeButton {
-	opacity: 1;
-	position: static;
-	background: transparent;
-	color: var(--colour-branding-primary);
-}
-
-/* Drag handle */
-.dragHandle {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	background: rgba(0, 0, 0, 0.5);
-	color: white;
-	border: none;
-	border-radius: var(--border-radius-base);
-	padding: 0.1rem 0.2rem;
-	font-size: var(--font-size-xs);
-	cursor: move;
-	opacity: 0;
-	transition: opacity var(--transition-base) ease;
-}
-
-.galleryItem:hover .dragHandle {
-	opacity: 1;
-}
-
-/* Carousel dots */
-.carouselDots {
-	display: flex;
-	justify-content: center;
-	gap: 8px;
-	margin-top: 12px;
-}
-
-.carouselDot {
-	width: 8px;
-	height: 8px;
-	border-radius: 50%;
-	background: var(--border-line-grey);
-	cursor: pointer;
-	transition: background var(--transition-base) ease;
-}
-
-.carouselDot.active {
-	background: var(--colour-branding-action);
-}
-
-/* Reorder button */
-.reorderButton {
-	background: var(--colour-branding-action);
-	color: white;
-	border: none;
-	border-radius: var(--border-radius-base);
-	padding: 0.1rem 0.2rem;
-	font-size: var(--font-size-xs);
-	cursor: pointer;
-	transition: background var(--transition-base) ease;
-}
-
-.reorderButton:hover {
-	background: var(--colour-branding-action-hover);
-}
-
-/* Text styling */
-.textBlueGrey {
-	color: var(--text-bluegrey);
-}
-
-/* Flex utilities */
-.flex1 {
-	flex: 1;
-}
-
-.flex {
-	display: flex;
-}
-
-.gap8 {
-	gap: 0.2rem;
-}
-
-.listItemActions {
-	display: flex;
-	gap: 0.2rem;
-}
-
-/* Carousel navigation specific styling for carousel layout */
-.carouselNav:not(.carouselNavPrev):not(.carouselNavNext) {
-	left: 0.3rem;
-}
-
-.carouselNav.carouselNavPrev {
-	left: 0.3rem;
-}
-
-.carouselNav.carouselNavNext {
-	right: 12px;
-}

package/src/components/listing/ListingCTAInput.jsx

@@ -1,82 +0,0 @@
-import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { GenericInput, Text } from "../index.js";
-import { iconImports } from "../iconImports.js";
-import styles from "./ListingField.module.css";
-
-const ListingCTAInput = ({
-	field,
-	value,
-	onChange,
-	showError,
-	errorMessage,
-}) => {
-	const { label, placeholder, isRequired } = field.values;
-
-	// CTA field value should contain both label and url
-	const fieldValue = value || {};
-	const buttonLabel = fieldValue.label || "";
-	const buttonUrl = fieldValue.url || "";
-
-	const handleLabelChange = (e) => {
-		const newValue = { ...fieldValue, label: e.target.value };
-		onChange(field.id, newValue);
-	};
-
-	const handleUrlChange = (e) => {
-		const newValue = { ...fieldValue, url: e.target.value };
-		onChange(field.id, newValue);
-	};
-
-	const createLabel = (text, required) => (
-		<>
-			{text}
-			{required && <span className={styles.requiredAsterisk}>*</span>}
-		</>
-	);
-
-	return (
-		<>
-			{/* Field header with icon and description */}
-			<div className={styles.listingField__header}>
-				<div className={styles.listingField__icon}>
-					<FontAwesomeIcon icon={iconImports.link} />
-				</div>
-				<div className={styles.listingField__content}>
-					<h3 className={styles.listingField__title}>Action Button</h3>
-					<p className={styles.listingField__description}>
-						Create clickable buttons with custom text and links
-					</p>
-				</div>
-			</div>
-
-			<GenericInput
-				type="text"
-				label={createLabel(`${label} - Button Text`, isRequired)}
-				placeholder="Enter button text"
-				value={buttonLabel}
-				onChange={handleLabelChange}
-				isRequired={isRequired}
-				isValid={!isRequired || buttonLabel.trim().length > 0}
-				showError={showError && isRequired && buttonLabel.trim().length === 0}
-				errorMessage="Button text is required"
-				alwaysShowLabel
-			/>
-			<GenericInput
-				type="text"
-				label={createLabel(`${label} - Button URL`, isRequired)}
-				placeholder="Enter button URL (e.g., https://example.com)"
-				value={buttonUrl}
-				onChange={handleUrlChange}
-				isRequired={isRequired}
-				isValid={!isRequired || buttonUrl.trim().length > 0}
-				showError={showError && isRequired && buttonUrl.trim().length === 0}
-				errorMessage="Button URL is required"
-				help="Enter the full URL including https:// or http://"
-				alwaysShowLabel
-			/>
-		</>
-	);
-};
-
-export default ListingCTAInput;