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

package/src/components/Fields.module.css

@@ -1,159 +0,0 @@
-/* Fields BEM CSS Module - Using pluss-maintenance styling pattern */
-
-/* Field container - matches maintenance style */
-.fieldContainer {
-	position: relative;
-	display: flex;
-	margin-top: 32px;
-}
-
-/* Field container error state */
-.fieldContainer--error {
-	border: 2px solid #dc3545;
-	border-radius: 4px;
-}
-
-.fieldNumberContainer {
-	display: flex;
-	width: 40px;
-}
-
-.fieldNumber {
-	width: 40px;
-	text-align: center;
-	font-weight: 500;
-	font-size: 30px;
-	color: var(--colour-branding-action, #5c90df); /* COLOUR_BRANDING_ACTION */
-}
-
-.field {
-	flex: 1;
-	position: relative;
-	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
-	border-radius: 4px;
-	padding: 1rem;
-}
-
-.field--invalid {
-	border: 1px solid #dc3545;
-}
-
-.fieldHeader {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	padding: 15px 0;
-	border-bottom: 1px solid var(--border-line-grey, #dbddf1); /* BORDER_LINE_GREY */
-}
-
-.fieldHeader .group {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
-
-.fieldHeader .line {
-	background-color: var(--colour-dusk, #536280); /* COLOUR_DUSK */
-	width: 34px;
-	height: 6px;
-	margin: 3px 13px 0 0;
-}
-
-.fieldHeader .fieldType {
-	font-weight: 700;
-	font-size: 16px;
-	color: var(--colour-dusk, #536280); /* COLOUR_DUSK */
-}
-
-.fieldHeader .dropdownInput {
-	width: 150px !important;
-	margin: 5px 20px 0 0 !important;
-}
-
-.fieldHeader .dropdownInput div {
-	margin-bottom: unset !important;
-}
-
-.fieldHeader .dropdownInput .dropdownInput-bottomBorder {
-	border-bottom: unset;
-}
-
-.fieldHeader .dropdownInput input {
-	font-size: 14px;
-	color: var(--colour-branding-action, #5c90df); /* COLOUR_BRANDING_ACTION */
-	width: 80%;
-}
-
-.fieldHeader .dropdownInput .fa-chevron-down,
-.fieldHeader .dropdownInput .fa-chevron-up {
-	color: var(
-		--colour-branding-action,
-		#5c90df
-	) !important; /* COLOUR_BRANDING_ACTION */
-}
-
-.fieldHeader .changeTypeButton {
-	margin-left: 15px;
-	padding: 4px 8px;
-	font-size: 12px;
-	min-height: auto;
-	color: #5c90df;
-}
-
-.fieldHeader .changeTypeButton:hover {
-	color: #364196;
-}
-
-.fieldHeader .deleteButton {
-	margin-right: 15px;
-	padding: 4px 8px;
-	font-size: 12px;
-	min-height: auto;
-	color: #dc3545;
-}
-
-.fieldHeader .deleteButton:hover {
-	color: #a02622;
-}
-
-.fieldHeader .buttonLabel {
-	margin-left: 6px;
-	font-size: 12px;
-}
-
-.fieldInner {
-	padding: 15px;
-}
-
-/* Legacy compatibility styles */
-.fieldWrapper {
-	position: relative;
-	margin-bottom: 1.5rem;
-	padding: 1rem;
-	border-radius: 12px;
-}
-
-/* Padlock icon for base fields */
-.padlockIcon {
-	display: inline-flex;
-	align-items: center;
-	font-size: 12px;
-	color: var(--colour-dusk, #536280);
-	font-style: italic;
-	display: flex;
-	align-items: center;
-	gap: 1rem;
-}
-
-.padlockIcon p {
-	padding: 0;
-	margin: 0;
-	margin-right: 1rem;
-}
-
-.padlockIconPlaceholder {
-	display: inline-flex;
-	align-items: center;
-	font-size: 12px;
-	color: var(--colour-dusk, #536280);
-}

package/src/components/IconLoader.jsx

@@ -1,153 +0,0 @@
-import React, { useState, useRef } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { PlussCore } from "../feature.config";
-import { Button } from "./index";
-import { iconImports } from "./iconImports";
-import styles from "./IconLoader.module.css";
-
-const { Apis } = PlussCore;
-const { fileActions } = Apis;
-
-const IconLoader = ({
-	value,
-	defaultValue,
-	onChange,
-	onRemove,
-	disableRemove = false,
-	featureId,
-}) => {
-	const [isUploading, setIsUploading] = useState(false);
-	const fileInputRef = useRef(null);
-
-	// Determine which icon to show
-	const hasCustomIcon =
-		value && typeof value === "string" && value.startsWith("http");
-	const iconToShow = defaultValue || "star";
-
-	// Generate filename with feature ID
-	const generateFilename = (file, featureId) => {
-		const timestamp = Date.now();
-		const ext = file.name.split(".").pop();
-		return `build-your-feature-${featureId || "new"}-${timestamp}.${ext}`;
-	};
-
-	// Get FontAwesome icon component directly (no async needed)
-	const iconComponent = !hasCustomIcon ? iconImports[iconToShow] : null;
-
-	const handleFileSelect = async (event) => {
-		const file = event.target.files[0];
-		if (!file || isUploading) return;
-
-		// Validate file type - only accept images
-		if (!file.type.startsWith("image/")) {
-			alert("Please upload an image file (JPEG, PNG, GIF, or WebP)");
-			return;
-		}
-
-		setIsUploading(true);
-
-		try {
-			// Compress and upload the image
-			const compressedFile = await fileActions.compressImage(
-				file,
-				1400,
-				0.8,
-				false,
-			);
-
-			const filename = generateFilename(compressedFile, featureId);
-			const url = await fileActions.uploadMediaAsync(compressedFile, filename);
-
-			if (onChange) {
-				onChange(url);
-			}
-		} catch (error) {
-			alert("Failed to upload image. Please try again.");
-		} finally {
-			setIsUploading(false);
-			// Reset file input
-			if (fileInputRef.current) {
-				fileInputRef.current.value = "";
-			}
-		}
-	};
-
-	const handleUploadClick = () => {
-		if (fileInputRef.current && !isUploading) {
-			fileInputRef.current.click();
-		}
-	};
-
-	const handleRemove = () => {
-		if (onRemove && !disableRemove) {
-			onRemove();
-		}
-	};
-
-	// Container will use CSS modules classes
-	// Custom styling through props is deprecated in favor of CSS consistency
-
-	return (
-		<div className={`${styles.iconLoader} ${styles.iconLoader__container}`}>
-			{/* Show the icon/image */}
-			{hasCustomIcon ? (
-				<img
-					src={value}
-					alt="Custom icon"
-					className={styles.iconLoader__image}
-				/>
-			) : (
-				<div className={styles.iconLoader__iconContainer}>
-					{iconComponent ? (
-						<FontAwesomeIcon
-							icon={iconComponent}
-							className={`${styles.iconLoader__icon} ${styles.iconLoader__iconLarge}`}
-						/>
-					) : (
-						<div className={styles.iconLoader__fallbackText}>{iconToShow}</div>
-					)}
-				</div>
-			)}
-
-			{/* Upload/Delete button overlay - only shows on hover */}
-			<div className={styles.iconLoader__buttonOverlay}>
-				{hasCustomIcon ? (
-					<Button
-						buttonType="secondary"
-						isActive
-						onClick={handleRemove}
-						disabled={disableRemove || isUploading}
-						size="small"
-						leftIcon="times"
-						aria-label="Delete icon"
-					>
-						Delete
-					</Button>
-				) : (
-					<Button
-						buttonType="primary"
-						onClick={() => {}}
-						disabled={isUploading}
-						size="small"
-						leftIcon="upload"
-						loading={isUploading}
-						aria-label="Upload icon"
-					>
-						Upload
-					</Button>
-				)}
-			</div>
-
-			{/* Hidden file input */}
-			<input
-				ref={fileInputRef}
-				type="file"
-				accept="image/jpeg,image/png,image/gif,image/webp,image/svg"
-				onChange={handleFileSelect}
-				className={styles.iconLoader__hiddenInput}
-			/>
-		</div>
-	);
-};
-
-export default IconLoader;

package/src/components/IconLoader.module.css

@@ -1,92 +0,0 @@
-/* IconLoader BEM CSS Module */
-
-/* Block */
-.iconLoader {
-	border-radius: 50%;
-	overflow: hidden;
-	position: relative;
-	background-color: #f8f9fa;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-/* Container variants */
-.iconLoader__container {
-	width: 150px;
-	height: 150px;
-	border: 3px solid #e9ecef;
-}
-
-/* Elements */
-.iconLoader__image {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	object-position: center;
-	position: absolute;
-	top: 0;
-	left: 0;
-}
-
-.iconLoader__iconContainer {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	height: 100%;
-}
-
-.iconLoader__icon {
-	font-size: var(--font-size-5xl);
-	color: #333;
-}
-
-/* Icon size variants */
-.iconLoader__iconLarge {
-	font-size: 60px;
-	color: #333;
-}
-
-/* Button icon styling - no longer needed since we use leftIcon prop */
-/* .iconLoader__buttonIcon {
-	margin-right: 6px;
-} */
-
-/* Hidden input */
-.iconLoader__hiddenInput {
-	display: none !important;
-}
-
-.iconLoader__fallbackText {
-	font-size: var(--font-size-sm);
-	color: #6c757d;
-	text-align: center;
-	padding: 8px;
-}
-
-/* Button overlay - shows on hover */
-.iconLoader__buttonOverlay {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	z-index: 10;
-	opacity: 0;
-	visibility: hidden;
-	transition: all 0.2s ease;
-	background-color: rgba(255, 255, 255, 0.95);
-	border-radius: 8px;
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-/* Show button overlay on hover */
-.iconLoader:hover .iconLoader__buttonOverlay {
-	opacity: 1;
-	visibility: visible;
-}
-
-/* Hidden input */
-.iconLoader__hiddenInput {
-	display: none !important;
-}

package/src/components/IconSelector.jsx

@@ -1,111 +0,0 @@
-import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { PlussCore } from "../feature.config";
-const { Text } = PlussCore.Components;
-import { allIcons, defaultIcon } from "./iconCategories";
-import { iconImports } from "./iconImports";
-import styles from "./IconSelector.module.css";
-
-const IconSelector = ({
-	selectedIcon,
-	onIconSelect,
-	className,
-	stepErrors,
-	showError,
-}) => {
-	const [hoveredIcon, setHoveredIcon] = useState(null);
-
-	// Get selected icon directly (no async needed)
-	const iconToLoad = selectedIcon || defaultIcon;
-	const currentIconComponent = iconImports[iconToLoad];
-
-	const handleIconClick = (icon) => {
-		onIconSelect(icon);
-	};
-
-	return (
-		<div className={`${styles.iconSelector} ${className || ""}`}>
-			{/* Header */}
-			<Text type="formTitleSmall" className={styles.title}>
-				Select icon
-			</Text>
-			<Text type="body" className={styles.subtitle}>
-				Select an icon to use for the feature when shown in the Community
-				Manager's menu
-			</Text>
-
-			{/* Current Selection */}
-			<div className={styles.currentSelection}>
-				<div className={styles.currentSelectionHeader}>
-					<Text type="formLabel" className={styles.currentSelectionLabel}>
-						Current selection
-					</Text>
-					{showError && stepErrors && stepErrors.icon && (
-						<div className={styles.fieldError} role="alert" id="icon-error">
-							<span className={styles.errorIcon}>⚠️</span>
-							{stepErrors.icon}
-						</div>
-					)}
-				</div>
-				<div className={styles.currentSelectionDisplay}>
-					{currentIconComponent ? (
-						<FontAwesomeIcon
-							icon={currentIconComponent}
-							className={styles.selectedIcon}
-						/>
-					) : (
-						<span className={styles.iconName}>
-							{selectedIcon || defaultIcon}
-						</span>
-					)}
-				</div>
-			</div>
-
-			{/* Simple Flat Icon Grid - matching image exactly */}
-			<div className={styles.iconGridContainer}>
-				<div className={styles.iconGrid}>
-					{allIcons.map((icon) => {
-						const isSelected = selectedIcon === icon;
-						const isHovered = hoveredIcon === icon;
-
-						return (
-							<button
-								key={icon}
-								className={`
-                  ${styles.iconButton}
-                  ${isSelected ? styles.selected : ""}
-                  ${isHovered ? styles.hovered : ""}
-                `}
-								onClick={() => handleIconClick(icon)}
-								onMouseEnter={() => setHoveredIcon(icon)}
-								onMouseLeave={() => setHoveredIcon(null)}
-								aria-pressed={isSelected}
-								aria-label={`Select ${icon} icon${isSelected ? ", currently selected" : ""}`}
-								aria-describedby={
-									showError && stepErrors && stepErrors.icon
-										? "icon-error"
-										: undefined
-								}
-							>
-								<Icon iconName={icon} size="lg" />
-							</button>
-						);
-					})}
-				</div>
-			</div>
-		</div>
-	);
-};
-
-// Simple static icon component
-const Icon = ({ iconName, size }) => {
-	const iconDef = iconImports[iconName];
-
-	if (!iconDef) {
-		return <span className={styles.iconFallback}>{iconName}</span>;
-	}
-
-	return <FontAwesomeIcon icon={iconDef} size={size} />;
-};
-
-export default IconSelector;

package/src/components/IconSelector.module.css

@@ -1,197 +0,0 @@
-/* Icon Selector Component Styles - Simple Flat Grid Layout */
-.iconSelector {
-	width: 100%;
-	margin: 16px 0px;
-}
-
-/* Header */
-.title {
-	font-weight: 600;
-	font-size: 18px;
-	color: var(--text-dark);
-}
-
-.subtitle {
-	color: var(--text-light);
-	line-height: 1.4;
-}
-
-/* Current Selection */
-.currentSelection {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 12px 0;
-}
-
-.currentSelectionHeader {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.currentSelectionDisplay {
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-}
-
-.selectedIcon {
-	aspect-ratio: 1;
-	font-size: 24px;
-	border: 2px solid var(--colour-branding-main);
-	border-radius: 4px;
-	padding: 0.25em;
-	color: var(--colour-branding-main);
-}
-
-.iconName {
-	background: var(--bg-bluegrey);
-	font-size: 14px;
-	color: var(--text-light);
-}
-
-/* Simple Flat Icon Grid */
-.iconGridContainer {
-}
-
-.iconGrid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
-	gap: 8px;
-	max-width: 500px;
-}
-
-.iconButton {
-	display: flex;
-	aspect-ratio: 1;
-	overflow: hidden;
-	align-items: center;
-	justify-content: center;
-	aspect-ratio: 1;
-	border: 2px solid var(--text-dark-alpha10);
-	border-radius: 6px;
-	background: var(--bg-white);
-	color: var(--text-light);
-	cursor: pointer;
-	transition: all 0.2s ease;
-	position: relative;
-	font-size: 12px;
-	padding: 0.5em;
-}
-
-.iconButton svg {
-	color: var(--text-light);
-}
-
-.iconButton:hover {
-	border-color: var(--colour-branding-main);
-	background: var(--bg-white);
-	color: var(--colour-branding-main);
-}
-
-.iconButton:hover svg {
-	color: var(--colour-branding-main);
-}
-
-.iconButton.selected {
-	border-color: var(--colour-branding-main);
-	background: var(--bg-white);
-	color: var(--colour-branding-main);
-}
-
-.iconButton.selected svg {
-	color: var(--colour-branding-main);
-}
-
-.iconButton.selected:hover {
-	border-color: var(--colour-branding-dark);
-	color: var(--colour-branding-dark);
-}
-
-.iconButton.selected:hover svg {
-	color: var(--colour-branding-dark);
-}
-
-.iconFallback {
-	font-size: 10px;
-	text-align: center;
-	word-break: break-all;
-	padding: 2px;
-	line-height: 1.2;
-}
-
-/* Scrollbar styling */
-.iconGridContainer::-webkit-scrollbar {
-	width: 8px;
-}
-
-.iconGridContainer::-webkit-scrollbar-track {
-	background: var(--bg-grey);
-	border-radius: 4px;
-}
-
-.iconGridContainer::-webkit-scrollbar-thumb {
-	background: var(--text-dark-alpha10);
-	border-radius: 4px;
-}
-
-.iconGridContainer::-webkit-scrollbar-thumb:hover {
-	background: var(--text-light);
-}
-
-/* Field error styles */
-.fieldError {
-	color: var(--colour-branding-secondary);
-	font-size: 0.875rem;
-	font-weight: 500;
-	margin-top: 0.5rem;
-	display: flex;
-	align-items: center;
-	gap: 0.25rem;
-}
-
-.errorIcon {
-	font-size: 1rem;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-	.iconSelector {
-		padding: 16px;
-	}
-
-	.iconGrid {
-		grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
-		gap: 6px;
-		padding: 12px;
-	}
-
-	.iconButton {
-		width: 40px;
-		height: 40px;
-		font-size: 16px;
-	}
-
-	.selectedIcon {
-		font-size: 24px !important;
-	}
-}
-
-@media (max-width: 480px) {
-	.iconGrid {
-		grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
-		gap: 4px;
-		padding: 8px;
-	}
-
-	.iconButton {
-		width: 36px;
-		height: 36px;
-		font-size: 14px;
-	}
-
-	.selectedIcon {
-		font-size: 20px !important;
-	}
-}