@elyx-code/editor-ui 0.0.2

package/src/components/project-configuration/ProjectDataForm.tsx

@@ -0,0 +1,121 @@
+import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
+import TextField from '../../lib/text-field/TextField';
+import TextArea from '../../lib/text-area/TextArea';
+import {
+	ChangeSet,
+	ProjectState,
+	StateMutationAction,
+} from '@elyx-code/project-logic-tree';
+import { EditorService } from '../../services/editor';
+import { debounce } from '../../utils';
+
+interface IProjectDataFormProps {
+	project: EditorService;
+	ready: boolean;
+}
+
+const ProjectDataForm: React.FC<IProjectDataFormProps> = ({
+	project,
+	ready,
+}) => {
+	const loading = !project || !ready;
+
+	const [projectName, setProjectName] = useState(project?.logic?.name || '');
+	const [description, setDescription] = useState(
+		project?.logic?.description || '',
+	);
+
+	// Refs to store latest values
+	const projectNameRef = useRef(projectName);
+	const descriptionRef = useRef(description);
+
+	useEffect(() => {
+		projectNameRef.current = projectName;
+	}, [projectName]);
+
+	useEffect(() => {
+		descriptionRef.current = description;
+	}, [description]);
+
+	// This function does the actual update.
+	const updateProject = async (name: string, desc: string) => {
+		let actionName = StateMutationAction.UpdateProjectMetadata;
+
+		if (name !== project?.logic?.name && desc !== project?.logic?.description) {
+			actionName = StateMutationAction.UpdateProjectMetadata;
+		} else if (name !== project?.logic?.name) {
+			actionName = StateMutationAction.RenameProject;
+		} else if (desc !== project?.logic?.description) {
+			actionName = StateMutationAction.ChangeProjectDescription;
+		}
+
+		const changeSet = project?.logic?.addChangeSet(
+			new ChangeSet(
+				project?.logic,
+				ProjectState.sessionAuthor,
+				new Date().toISOString(),
+				project?.logic,
+				false,
+				actionName,
+			),
+		);
+		project?.logic.metaSync({ name, description: desc }, changeSet);
+		await changeSet?.closeAsync({
+			awaitExternalPersist: false,
+			persistType: 'parallel',
+		});
+	};
+
+	// Use useRef to ensure the debounced function is created only once.
+	const debouncedUpdateRef = useRef(
+		debounce(() => {
+			updateProject(projectNameRef.current, descriptionRef.current);
+		}, 600),
+	);
+
+	const handleNameChange = (value: string) => {
+		setProjectName(value);
+		debouncedUpdateRef.current();
+	};
+
+	const handleDescriptionChange = (value: string) => {
+		setDescription(value);
+		debouncedUpdateRef.current();
+	};
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+
+		if (loading) return;
+
+		updateProject(projectName, description);
+	};
+
+	return (
+		<form
+			style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}
+			onSubmit={handleSubmit}
+		>
+			<TextField
+				name='name'
+				label='Project name'
+				value={projectName}
+				onChange={handleNameChange}
+				disabled={loading}
+			/>
+			<TextArea
+				name='description'
+				label='Description'
+				variant='filled'
+				inputProps={{
+					className: 'project-description-field',
+				}}
+				value={description}
+				onChange={handleDescriptionChange}
+				disabled={loading}
+			/>
+		</form>
+	);
+};
+
+export default React.memo(ProjectDataForm);

package/src/components/project-configuration/UnpublishProjectConfirmationDialog.tsx

@@ -0,0 +1,162 @@
+import React, { useState } from 'react';
+import SmallDialog from '../../lib/dialog/SmallDialog';
+import { useParams } from 'react-router-dom';
+import Button from '../../lib/button/Button';
+import { getAccessToken } from '../../auth';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { envConfig } from '../../config';
+
+interface IUnpublishProjectConfirmationDialogProps {
+	onClose: () => void;
+	onUnpublish?: () => void;
+}
+
+const UnpublishProjectConfirmationDialog: React.FC<
+	IUnpublishProjectConfirmationDialogProps
+> = ({ onClose, onUnpublish }) => {
+	const [isUnpublishingProject, setIsUnpublishingProject] = useState(false);
+	const { id: projectId } = useParams<{ id: string }>();
+
+	const unpublishProject = async () => {
+		setIsUnpublishingProject(true);
+
+		const token = await getAccessToken();
+
+		try {
+			await fetch(
+				`${envConfig.API_BASE_URL}/publishing-service/v1/publications/${projectId}/unpublish`,
+				{
+					method: 'DELETE',
+					headers: {
+						Authorization: 'Bearer ' + token,
+					},
+				}
+			);
+
+			onUnpublish?.();
+		} catch (error) {
+			Logger.log('Unpublish Project error: ', error);
+		}
+		setIsUnpublishingProject(false);
+	};
+
+	return (
+		<SmallDialog onClose={() => !isUnpublishingProject && onClose?.()}>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					height: '100%',
+					justifyContent: 'space-between',
+				}}
+			>
+				<div style={{ display: 'flex', flexDirection: 'column' }}>
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							marginBottom: '10px',
+						}}
+					>
+						<button
+							className='dialog_back_button'
+							disabled={isUnpublishingProject}
+							onClick={(e) => {
+								if (!isUnpublishingProject) {
+									onClose?.();
+								}
+							}}
+						>
+							<i className='fa-solid fa-arrow-left' />
+						</button>
+						<h2 style={{ margin: '0px', fontWeight: '500' }}>
+							Unpublish project
+						</h2>
+					</div>
+					<div
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							gap: '10px',
+							marginBottom: '16px',
+						}}
+					>
+						<p
+							style={{
+								margin: '0px',
+								marginTop: '6px',
+								color: 'rgba(0,0,0,0.54)',
+								fontSize: '14px',
+							}}
+						>
+							Are you sure you want to unpublish the project?
+						</p>
+						<p
+							style={{
+								margin: '0px',
+								marginTop: '6px',
+								color: 'rgba(0,0,0,0.54)',
+								fontSize: '14px',
+							}}
+						>
+							This action makes the project invisible from your users, and it
+							deletes all of its generated data and assets.
+						</p>
+						<p
+							style={{
+								margin: '0px',
+								marginTop: '6px',
+								color: 'rgba(0,0,0,0.54)',
+								fontSize: '14px',
+							}}
+						>
+							You don't pay for unpublished projects.
+						</p>
+						<p
+							style={{
+								margin: '0px',
+								marginTop: '6px',
+								color: 'rgba(0,0,0,0.54)',
+								fontSize: '14px',
+							}}
+						>
+							You can publish it again at any time.
+						</p>
+					</div>
+				</div>
+				<div
+					style={{
+						display: 'flex',
+						justifyContent: 'center',
+						flexDirection: 'column',
+						gap: '10px',
+						alignItems: 'center',
+					}}
+				>
+					<p
+						style={{
+							margin: '0px',
+							fontSize: '10px',
+							color: 'rgba(0,0,0,0.54)',
+							textAlign: 'center',
+						}}
+					>
+						It might take a few seconds.
+						<br />
+						Please wait.
+					</p>
+					<Button
+						color='error'
+						size='medium'
+						loading={isUnpublishingProject}
+						onClick={unpublishProject}
+					>
+						Unpublish project
+					</Button>
+				</div>
+			</div>
+		</SmallDialog>
+	);
+};
+
+export default UnpublishProjectConfirmationDialog;

package/src/components/project-configuration/project-configuration-content.css

@@ -0,0 +1,209 @@
+.project-description-field {
+  min-height: 140px;
+}
+
+.hidden-project-cover-picture-input {
+  visibility: hidden;
+  position: absolute;
+}
+
+/* --- ROLES & COLLABORATION SECTION --- */
+
+.project-roles-wrapper {
+  position: relative;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background-color: #ffffff;
+  overflow: hidden;
+}
+
+.project-roles-invite-form {
+  display: flex;
+  gap: 8px;
+  padding: 16px;
+  border-bottom: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+}
+
+.project-roles-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.project-roles-input:focus {
+  border-color: #a683fc;
+}
+
+.project-roles-select {
+  padding: 8px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 13px;
+  background-color: white;
+  color: #374151;
+  outline: none;
+  cursor: pointer;
+}
+
+.project-roles-select:disabled {
+  background-color: #f3f4f6;
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.project-roles-list {
+  display: flex;
+  flex-direction: column;
+  max-height: 250px; /* Cap height for scrolling */
+  overflow-y: auto;
+  padding: 8px 0 8px 0;
+  min-height: 150px; /* Ensure some height even with few roles */
+  pointer-events: auto; /* Re-enable pointer events on the list for scrolling! */
+}
+
+.project-role-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+}
+
+.project-role-badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 4px 8px;
+  border-radius: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Beautiful distinct colors for different roles */
+.project-role-badge.role-owner {
+  background-color: rgba(166, 131, 252, 0.1);
+  color: #a683fc;
+}
+
+.project-role-badge.role-editor {
+  background-color: #e0f2fe;
+  color: #0284c7;
+}
+
+.project-role-badge.role-viewer {
+  background-color: #f3f4f6;
+  color: #4b5563;
+}
+
+/* --- THE PAYWALL OVERLAY --- */
+.project-roles-upgrade-overlay {
+  position: absolute;
+  /* Absolute Positioning & Transform to center the card *without* blocking the list */
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  width: 90%; /* Let blurred content show on the sides */
+  max-width: 340px; /* Cap width */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  
+  /* THIS ALLOWS THE SCROLL WHEEL TO PASS THROUGH THE OVERLAY AREA TO THE LIST! */
+  pointer-events: none; 
+  background-color: transparent; /* No overly opaque background! */
+}
+
+.project-roles-upgrade-content {
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 24px;
+  width: 100%; /* Stretch within the overlay container */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  
+  /* Re-enable pointer events just for the text/button so it remains clickable */
+  pointer-events: auto; 
+}
+
+/* --- ROLE MANAGEMENT DROPDOWN --- */
+.role-menu-wrapper {
+  position: relative;
+}
+
+.role-dropdown-menu-container {
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background-color: white;
+}
+
+.role-action-btn {
+  background: none;
+  border: none;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.role-action-btn:hover {
+  background-color: #f3f4f6;
+  color: #374151;
+}
+
+.role-dropdown-menu {
+  background: white;
+  border-radius: 6px;
+  padding: 4px;
+  min-width: 140px;
+}
+
+.role-dropdown-header {
+  font-size: 10px;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  margin: 4px 8px 8px 8px;
+  letter-spacing: 0.5px;
+}
+
+.role-dropdown-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: #374151;
+  cursor: pointer;
+  border-radius: 4px;
+  text-align: left;
+}
+
+.role-dropdown-btn:hover {
+  background-color: #f3f4f6;
+}
+
+.role-dropdown-btn.active {
+  font-weight: 500;
+  color: #a683fc;
+}
+
+.role-dropdown-btn.danger {
+  color: #ef4444;
+}
+
+.role-dropdown-btn.danger:hover {
+  background-color: #fef2f2;
+}