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

package/src/components/SkeletonLoader.module.css

@@ -1,295 +0,0 @@
-/* Base skeleton animation */
-.skeletonItem {
-	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-	background-size: 200% 100%;
-	animation: skeletonLoading 1.5s ease-in-out infinite;
-	border-radius: 4px;
-}
-
-@keyframes skeletonLoading {
-	0% {
-		background-position: 200% 0;
-	}
-	100% {
-		background-position: -200% 0;
-	}
-}
-
-.skeletonLoader {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	width: 100%;
-}
-
-.skeletonItemWrapper {
-	width: 100%;
-}
-
-/* Listing Card Skeleton */
-.listingCard {
-	background: white;
-	border: 1px solid #e9ecef;
-	border-radius: 8px;
-	padding: 1.5rem;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.listingCardHeader {
-	display: flex;
-	align-items: center;
-	gap: 1rem;
-	margin-bottom: 1rem;
-}
-
-.listingCard .icon {
-	width: 48px;
-	height: 48px;
-	border-radius: 8px;
-}
-
-.listingCard .title {
-	flex: 1;
-	height: 24px;
-	width: 60%;
-}
-
-.listingCardBody {
-	margin-bottom: 1rem;
-}
-
-.listingCard .description {
-	height: 16px;
-	margin-bottom: 0.5rem;
-}
-
-.listingCard .description:first-child {
-	width: 80%;
-}
-
-.listingCard .description:last-child {
-	width: 60%;
-}
-
-.listingCardFooter {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.listingCard .smallText {
-	width: 80px;
-	height: 14px;
-}
-
-.listingCard .button {
-	width: 80px;
-	height: 32px;
-	border-radius: 6px;
-}
-
-/* Form Field Skeleton */
-.formField {
-	background: white;
-	border: 1px solid #e9ecef;
-	border-radius: 8px;
-	padding: 1.5rem;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.formFieldHeader {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 1rem;
-}
-
-.formField .fieldType {
-	width: 80px;
-	height: 20px;
-	border-radius: 4px;
-}
-
-.formField .fieldActions {
-	width: 60px;
-	height: 20px;
-	border-radius: 4px;
-}
-
-.formFieldBody {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
-
-.formField .label {
-	width: 120px;
-	height: 16px;
-	border-radius: 4px;
-}
-
-.formField .input {
-	width: 100%;
-	height: 40px;
-	border-radius: 6px;
-}
-
-.formField .helpText {
-	width: 180px;
-	height: 14px;
-	border-radius: 4px;
-}
-
-/* Layout Option Skeleton */
-.layoutOption {
-	display: flex;
-	align-items: flex-start;
-	gap: 1rem;
-	background: white;
-	border: 1px solid #e9ecef;
-	border-radius: 8px;
-	padding: 1.5rem;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.layoutOption .layoutPreview {
-	width: 80px;
-	height: 80px;
-	border-radius: 8px;
-}
-
-.layoutContent {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
-
-.layoutOption .layoutTitle {
-	width: 60%;
-	height: 20px;
-	border-radius: 4px;
-}
-
-.layoutOption .layoutDescription {
-	width: 90%;
-	height: 16px;
-	border-radius: 4px;
-}
-
-/* Form Input Skeleton */
-.formInput {
-	margin-bottom: 1rem;
-}
-
-.formInput .label {
-	width: 120px;
-	height: 16px;
-	margin-bottom: 0.5rem;
-	border-radius: 4px;
-}
-
-.formInput .input {
-	width: 100%;
-	height: 40px;
-	border-radius: 6px;
-}
-
-/* Generic Skeleton Items */
-.card {
-	background: white;
-	border: 1px solid #e9ecef;
-	border-radius: 8px;
-	padding: 1.5rem;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.header {
-	width: 60%;
-	height: 24px;
-	margin-bottom: 1rem;
-	border-radius: 4px;
-}
-
-.content {
-	width: 100%;
-	height: 100px;
-	margin-bottom: 1rem;
-	border-radius: 4px;
-}
-
-.footer {
-	width: 40%;
-	height: 16px;
-	border-radius: 4px;
-}
-
-.button {
-	width: 100px;
-	height: 36px;
-	border-radius: 6px;
-}
-
-.text {
-	width: 100%;
-	height: 16px;
-	margin-bottom: 0.5rem;
-	border-radius: 4px;
-}
-
-.text:last-child {
-	width: 70%;
-	margin-bottom: 0;
-}
-
-/* Table Row Skeleton */
-.tableRow {
-	width: 100%;
-}
-
-.tableRow .tableDate {
-	width: 120px;
-	height: 16px;
-	border-radius: 4px;
-}
-
-.tableRow .tableTitle {
-	width: 100%;
-	height: 16px;
-	border-radius: 4px;
-}
-
-.tableRow .tableActions {
-	width: 160px;
-	height: 16px;
-	border-radius: 4px;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-	.listingCard,
-	.formField,
-	.layoutOption {
-		padding: 1rem;
-	}
-
-	.listingCardHeader {
-		flex-direction: column;
-		align-items: flex-start;
-	}
-
-	.listingCard .title {
-		width: 80%;
-	}
-
-	.layoutOption {
-		flex-direction: column;
-		align-items: center;
-		text-align: center;
-	}
-
-	.layoutOption .layoutTitle,
-	.layoutOption .layoutDescription {
-		width: 100%;
-	}
-}

package/src/components/SortButtonGroup.jsx

@@ -1,34 +0,0 @@
-import React from "react";
-import { PlussCore } from "../feature.config";
-import styles from "./SortButtonGroup.module.css";
-const { SVGIcon, Text, Tag } = PlussCore.Components;
-
-const SortButtonGroup = ({ currentSort, onSortChange }) => {
-	const handleSortClick = (sortType) => {
-		if (onSortChange && sortType !== currentSort) {
-			onSortChange(sortType);
-		}
-	};
-
-	const sortOptions = [
-		{ type: "newest", label: "Newest first" },
-		{ type: "oldest", label: "Oldest first" },
-		{ type: "az", label: "A-Z" },
-		{ type: "za", label: "Z-A" },
-	];
-
-	return (
-		<div className={styles.sortButtonGroup}>
-			{sortOptions.map((option) => (
-				<Tag
-					key={option.type}
-					leftIcon={option.type === currentSort ? "check" : null}
-					onClick={() => handleSortClick(option.type)}
-					text={option.label}
-				/>
-			))}
-		</div>
-	);
-};
-
-export default SortButtonGroup;

package/src/components/SortButtonGroup.module.css

@@ -1,51 +0,0 @@
-/* SortButtonGroup BEM CSS Module */
-
-/* Block */
-.sortButtonGroup {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-/* Element */
-.sortButtonGroup__button {
-	padding: 8px 12px;
-	border: 1px solid var(--linegrey);
-	background-color: var(--bg-white);
-	color: var(--active-text);
-	border-radius: 4px;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	font-size: 13px;
-	margin-right: 8px;
-	transition: all 0.2s ease;
-}
-
-/* Modifier */
-.sortButtonGroup__button--selected {
-	border-color: var(--colour-blue);
-	background-color: var(--colour-blue);
-	color: var(--bg-white);
-}
-
-.sortButtonGroup__button--selected:hover {
-	border-color: var(--colour-darkblue);
-	background-color: var(--colour-darkblue);
-}
-
-.sortButtonGroup__button:hover:not(.sortButtonGroup__button--selected) {
-	border-color: var(--colour-blue);
-	background-color: var(--bg-bluegrey);
-}
-
-/* Element */
-.sortButtonGroup__icon {
-	width: 12px;
-	height: 12px;
-}
-
-.sortButtonGroup__text {
-	margin: 0;
-}

package/src/components/ToastContainer.jsx

@@ -1,98 +0,0 @@
-import React, { useEffect } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { iconImports } from "./iconImports.js";
-import styles from "./ToastContainer.module.css";
-
-const ToastContainer = ({ toasts, onDismiss }) => {
-	if (!toasts || toasts.length === 0) {
-		return null;
-	}
-
-	const getDismissDelay = (type) => {
-		switch (type) {
-			case "success":
-				return 3000; // 3 seconds
-			case "warning":
-				return 4000; // 4 seconds
-			case "error":
-				return 5000; // 5 seconds for error messages
-			default:
-				return 3000;
-		}
-	};
-
-	// Auto-dismiss toasts based on type
-	useEffect(() => {
-		const timeouts = toasts.map((toast) => {
-			if (toast.autoDismiss !== false && toast.isVisible) {
-				return setTimeout(() => {
-					onDismiss(toast.id);
-				}, getDismissDelay(toast.type));
-			}
-			return null;
-		});
-
-		return () => {
-			timeouts.forEach((timeout) => clearTimeout(timeout));
-		};
-	}, [toasts, onDismiss]);
-
-	return (
-		<div className={styles.toastContainer} role="status" aria-live="polite">
-			{toasts.map((toast, index) => (
-				<div
-					key={toast.id}
-					className={`${styles.toast} ${styles[toast.type]} ${toast.isVisible ? styles.toastEnter : styles.toastExit}`}
-					onMouseEnter={() => {
-						// Pause auto-dismiss on hover
-						if (toast.timeoutId) {
-							clearTimeout(toast.timeoutId);
-						}
-					}}
-					onMouseLeave={() => {
-						// Resume auto-dismiss when hover ends
-						if (toast.autoDismiss !== false) {
-							toast.timeoutId = setTimeout(() => {
-								onDismiss(toast.id);
-							}, getDismissDelay(toast.type));
-						}
-					}}
-					role={toast.type === "error" ? "alert" : "status"}
-					aria-label={`${toast.type} message: ${toast.message}`}
-					aria-atomic="true"
-				>
-					<span className={styles.toastIcon}>
-						{toast.type === "success" && (
-							<FontAwesomeIcon
-								icon={iconImports["check-circle"]}
-								className={styles.successIcon}
-							/>
-						)}
-						{toast.type === "error" && (
-							<FontAwesomeIcon
-								icon={iconImports["times-circle"]}
-								className={styles.errorIcon}
-							/>
-						)}
-						{toast.type === "warning" && (
-							<FontAwesomeIcon
-								icon={iconImports["exclamation-triangle"]}
-								className={styles.warningIcon}
-							/>
-						)}
-					</span>
-					<span className={styles.toastMessage}>{toast.message}</span>
-					<button
-						className={styles.toastDismiss}
-						onClick={() => onDismiss(toast.id)}
-						aria-label="Dismiss notification"
-					>
-						<FontAwesomeIcon icon={iconImports.times} />
-					</button>
-				</div>
-			))}
-		</div>
-	);
-};
-
-export default ToastContainer;

package/src/components/ToastContainer.module.css

@@ -1,156 +0,0 @@
-.toastContainer {
-	position: fixed;
-	bottom: 24px;
-	left: 50%;
-	transform: translateX(-50%);
-	z-index: 9999;
-	pointer-events: none;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 12px;
-}
-
-.toast {
-	position: relative;
-	min-width: 300px;
-	max-width: 450px;
-	padding: 12px 16px;
-	border-radius: 8px;
-	background-color: var(--bg-white);
-	box-shadow: 0 8px 24px rgba(19, 19, 26, 0.3);
-	border: 1px solid var(--colour-branding-inactive);
-	font-size: 14px;
-	font-family: var(--font-family);
-	color: var(--text-dark);
-	transform: translateY(100%);
-	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-	pointer-events: auto;
-	white-space: nowrap;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.toast.toastEnter {
-	transform: translateY(0);
-	opacity: 1;
-}
-
-.toast.toastExit {
-	transform: translateY(100%);
-	opacity: 0;
-}
-
-/* Success toast */
-.toast.success {
-	border-left: 4px solid var(--colour-success);
-}
-
-.toast.success .toastMessage {
-	font-weight: 500;
-}
-
-/* Error toast */
-.toast.error {
-	border-left: 4px solid var(--colour-error);
-}
-
-.toast.error .toastMessage {
-	color: var(--colour-error);
-	font-weight: 500;
-}
-
-/* Warning toast */
-.toast.warning {
-	border-left: 4px solid var(--colour-warning);
-}
-
-.toast.warning .toastMessage {
-	color: var(--colour-warning);
-	font-weight: 500;
-}
-
-/* Icon styles */
-.toastIcon {
-	font-size: 16px;
-	line-height: 20px;
-	display: flex;
-	align-items: center;
-	margin-right: 8px;
-	min-width: 20px;
-	justify-content: center;
-}
-
-/* Message styles */
-.toastMessage {
-	display: flex;
-	align-items: center;
-	line-height: 20px;
-	margin-right: 8px;
-	flex: 1;
-}
-
-/* Dismiss button */
-.toastDismiss {
-	background: none;
-	border: none;
-	padding: 0;
-	color: var(--text-muted);
-	cursor: pointer;
-	font-size: 14px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 20px;
-	height: 20px;
-	border-radius: 50%;
-	transition: all 0.2s ease;
-	flex-shrink: 0;
-}
-
-.toastDismiss:hover {
-	color: var(--text-dark);
-	background-color: rgba(0, 0, 0, 0.05);
-}
-
-/* Animation */
-@keyframes slideUp {
-	from {
-		transform: translateX(-50%) translateY(100%);
-		opacity: 0;
-	}
-	to {
-		transform: translateX(-50%) translateY(0);
-		opacity: 1;
-	}
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-	.toast {
-		transition: opacity 0.2s ease-in-out;
-		transform: translateY(0) !important;
-	}
-
-	.toast.toastEnter {
-		opacity: 1;
-	}
-
-	.toast.toastExit {
-		opacity: 0;
-	}
-}
-
-/* Icon colors */
-.successIcon {
-	color: var(--colour-green);
-}
-
-.errorIcon {
-	color: var(--colour-red);
-}
-
-.warningIcon {
-	color: var(--colour-warning);
-}

package/src/components/ToggleSwitch.js

@@ -1,40 +0,0 @@
-import React from "react";
-import styles from "./ToggleSwitch.module.css";
-
-const ToggleSwitch = ({ disabled, onChange, isActive, className, style }) => {
-	const handleClick = () => {
-		if (disabled) {
-			return;
-		}
-		if (onChange) {
-			onChange(!isActive);
-		}
-	};
-
-	const getSwitchClassName = () => {
-		const classes = [
-			styles.root,
-			isActive ? styles["root--active"] : "",
-			disabled ? styles["root--disabled"] : "",
-		]
-			.filter(Boolean)
-			.join(" ");
-		return classes;
-	};
-
-	const knobClassName = styles.knob;
-
-	return (
-		<div
-			className={`${className} ${styles.wrapper}`}
-			style={{ ...style }}
-			onClick={handleClick}
-		>
-			<div className={getSwitchClassName()}>
-				<div className={knobClassName} />
-			</div>
-		</div>
-	);
-};
-
-export { ToggleSwitch };

package/src/components/ToggleSwitch.module.css

@@ -1,48 +0,0 @@
-/* ToggleSwitch CSS Module */
-
-/* Block */
-.wrapper {
-	display: inline-block;
-}
-
-.root {
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-	width: 44px;
-	height: 24px;
-	background-color: var(--linegrey);
-	border-radius: 12px;
-	padding: 2px;
-	cursor: pointer;
-	opacity: 1;
-	transition: all 0.2s ease;
-}
-
-/* Modifiers */
-.root--active {
-	background-color: var(--colour-green);
-}
-
-.root--active .knob {
-	transform: translateX(20px);
-}
-
-.root--disabled {
-	cursor: not-allowed;
-	opacity: 0.6;
-}
-
-/* Elements */
-.knob {
-	width: 20px;
-	height: 20px;
-	background-color: var(--bg-white);
-	border-radius: 50%;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-	transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-	transform: translateX(0);
-	position: relative;
-	z-index: 2;
-	flex-shrink: 0;
-}