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

package/src/components/SkeletonLoader.module.css

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

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

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

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

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

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

@@ -0,0 +1,48 @@
+/* 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;
+}