@elyx-code/editor-ui 0.0.2

package/src/components/user-profile/PublicUserProfileContent.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import { getCurrentUserOrLogoutRedirect } from '../../auth';
+import './user-profile-content.css';
+
+interface IPublicUserProfileContentProps {
+	user?: any;
+}
+
+const PublicUserProfileContent: React.FC<IPublicUserProfileContentProps> = ({
+	user: initialUser,
+}) => {
+	const [user, setUser] = useState<any | null>(initialUser);
+
+	useEffect(() => {
+		const init = async () => {
+			if (initialUser) return;
+
+			const user = await getCurrentUserOrLogoutRedirect();
+			setUser(user);
+		};
+
+		init();
+	}, [initialUser]);
+
+	return (
+		<div
+			className='user-profile-content'
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				gap: '26px',
+				minHeight: '80%',
+				height: '100%',
+			}}
+		>
+			<section
+				style={{
+					display: 'flex',
+					gap: '10px',
+					flexDirection: 'column',
+					marginTop: '10px',
+				}}
+			>
+				<span style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+					<h3
+						style={{
+							display: 'flex',
+							gap: '6px',
+							fontWeight: 'normal',
+							margin: '0px',
+						}}
+					>
+						Public profile
+					</h3>
+				</span>
+				<div style={{ display: 'flex', gap: '10px', flexDirection: 'column' }}>
+					<div>
+						<img
+							src={user?.picture}
+							id='output'
+							width='200'
+							className='standalone-profile-picture'
+							alt='User Profile'
+						/>
+					</div>
+				</div>
+			</section>
+
+			<section>
+				<span style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+					<h3
+						style={{
+							display: 'flex',
+							gap: '6px',
+							fontWeight: 'normal',
+							margin: '0px',
+						}}
+					>
+						Security
+					</h3>
+				</span>
+				<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+					<p
+						style={{
+							margin: '0px',
+							fontSize: '14px',
+							marginTop: '6px',
+							color: 'rgba(0,0,0,0.54)',
+						}}
+					>
+						{user?.email}
+					</p>
+				</div>
+			</section>
+		</div>
+	);
+};
+
+export default PublicUserProfileContent;

package/src/components/user-profile/UserDataForm.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { getAccessToken } from '../../auth';
+import Button from '../../lib/button/Button';
+import TextField from '../../lib/text-field/TextField';
+import axios from 'axios';
+import { envConfig } from '../../config';
+
+interface IUserDataFormProps {
+	user: {
+		id: string;
+		name: string;
+		lastName: string;
+	};
+}
+
+const UserDataForm: React.FC<IUserDataFormProps> = ({ user }) => {
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [firstName, setFirstName] = useState(user?.name || '');
+	const [lastName, setLastName] = useState(user?.lastName || '');
+
+	const updateUser = async (firstName: string, lastName: string) => {
+		setIsSubmitting(true);
+
+		await axios.put(
+			`${envConfig.API_BASE_URL}/user-service/v1/user/${user.id}`,
+			{
+				name: firstName,
+				lastName: lastName,
+			},
+			{
+				headers: {
+					Authorization: 'Bearer ' + (await getAccessToken()),
+				},
+			}
+		);
+
+		setIsSubmitting(false);
+	};
+
+	return (
+		<form
+			style={{ display: 'flex', gap: '10px', alignItems: 'center' }}
+			onSubmit={(e) => {
+				e.preventDefault();
+				updateUser(firstName, lastName);
+			}}
+		>
+			<TextField
+				name='first-name'
+				label='First name'
+				value={firstName}
+				onChange={(value: any) => setFirstName(value)}
+			/>
+			<TextField
+				name='last-name'
+				label='Last name'
+				value={lastName}
+				onChange={(value: any) => setLastName(value)}
+			/>
+			<div style={{ marginBottom: '16px' }}>
+				<Button
+					variant='outlined'
+					color='primary'
+					size='small'
+					type='submit'
+					loading={isSubmitting}
+				>
+					Save
+				</Button>
+			</div>
+		</form>
+	);
+};
+
+export default UserDataForm;

package/src/components/user-profile/UserProfileDialog.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { IDialogProps } from '../../lib/dialog/Dialog';
+import Button from '../../lib/button/Button';
+import OwnUserProfileContent from './OwnUserProfileContent';
+import { getCurrentUserOrLogoutRedirect } from '../../auth';
+import { getUser, resolveUserDisplayLabel } from '../../services/user';
+import PublicUserProfileContent from './PublicUserProfileContent';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+interface IUserProfileDialogProps extends IDialogProps {}
+
+const UserProfileDialog: React.FC<
+	Omit<IUserProfileDialogProps, 'children'>
+> = ({ onClose }) => {
+	const [user, setUser] = useState<any | null>(null);
+	const [isLoading, setIsLoading] = useState<boolean>(false);
+	const [isOwnProfile, setIsOwnProfile] = useState<boolean | null>(null);
+	const { id: projectId, userId } = useParams<{ id: string; userId: string }>();
+	const navigate = useNavigate();
+
+	useEffect(() => {
+		const init = async () => {
+			// const userProfileId = tab;
+			Logger.log('---- User profile id from URL ----', userId);
+
+			setIsLoading(true);
+
+			const [currentUser, userProfile] = await Promise.all([
+				getCurrentUserOrLogoutRedirect(),
+				getUser({ id: userId }),
+			]);
+
+			setUser(userProfile);
+
+			if (currentUser?.id === userProfile?.id) {
+				setIsOwnProfile(true);
+			} else {
+				setIsOwnProfile(false);
+			}
+
+			setIsLoading(false);
+		};
+
+		init();
+	}, []);
+
+	const loaded = user !== null && isOwnProfile !== null;
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				gap: '4px',
+				padding: '40px',
+			}}
+		>
+			<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+				<button className='dialog_back_button' onClick={onClose}>
+					<i className='fa-solid fa-arrow-left' />
+				</button>
+				<h1 style={{ margin: '0px', fontWeight: 500, fontSize: '28px' }}>
+					{!loaded
+						? 'Account'
+						: isOwnProfile
+							? 'Your account'
+							: resolveUserDisplayLabel(
+									user,
+									isLoading ? '' : 'Account deleted',
+								)}
+				</h1>
+			</div>
+
+			<div
+				style={{
+					flex: 1,
+					margin: '0 42px',
+					marginTop: '16px',
+					overflow: 'scroll',
+				}}
+			>
+				{!loaded ? (
+					'Loading...'
+				) : isOwnProfile ? (
+					<OwnUserProfileContent user={user} />
+				) : (
+					<PublicUserProfileContent user={user} />
+				)}
+			</div>
+			<div
+				style={{
+					alignSelf: 'flex-start',
+					display: 'flex',
+					flexDirection: 'row',
+					justifyContent: 'flex-end',
+					width: '100%',
+					gap: '16px',
+				}}
+			>
+				<Button onClick={() => navigate('editor/' + projectId)} variant='text'>
+					Back
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default UserProfileDialog;

package/src/components/user-profile/user-profile-content.css

@@ -0,0 +1,25 @@
+.danger-zone-container {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-main-error);
+  border-radius: 4px;
+  margin-top: 16px;
+  justify-content: space-between;
+}
+
+.danger-zone-container hr {
+  margin: 0px;
+  width: 100%;
+}
+
+.danger-zone-container .danger-zone-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+  gap: 16px;
+  align-items: center;
+}
+
+.danger-zone-container .danger-zone-item button {
+  min-width: 180px;
+}

package/src/config.ts

@@ -0,0 +1,130 @@
+import { IEnvConfig } from '@elyx-code/project-logic-tree';
+
+// Webpack replaces process.env.APP_ENV at build time based on our script flag
+const ENV = process.env.APP_ENV as 'dev' | 'staging' | 'prod';
+
+const environments: {
+	[key in 'dev' | 'staging' | 'prod']: IEnvConfig;
+} = {
+	dev: {
+		stripe_publishable_key: 'pk_test_rYj0t30AfihMVtTZQA2HjjuT',
+		stripe_pricing_table_id: 'prctbl_1TREcAFUJjMj5cqLEALlJZfX',
+		stripe_personal_sub_mngmt_url:
+			'https://billing.stripe.com/p/login/test_5kQ5kDftobJmdMvczqgbm00',
+		stripe_org_sub_mngmt_url: '',
+		API_BASE_URL: 'https://api.dev.elyx.tech',
+		WS_URL: 'wss://ws.dev.elyx.tech', // For local development, you might want to use the same URL for both HTTP and WS, or adjust as needed
+		amplifyConfig: {
+			aws_project_region: 'eu-central-1',
+			aws_cognito_region: 'eu-central-1',
+			aws_user_pools_id: 'eu-central-1_BpCJZs139', // Your Dev User Pool ID
+			aws_user_pools_web_client_id: '142cc9h5brsmt65p07i17r3b2k', // Your Dev Client ID
+			aws_cognito_username_attributes: ['EMAIL'],
+			aws_cognito_signup_attributes: ['EMAIL'],
+			aws_cognito_password_protection_settings: {
+				passwordPolicyMinLength: 8,
+				passwordPolicyCharacters: [
+					'REQUIRES_LOWERCASE',
+					'REQUIRES_UPPERCASE',
+					'REQUIRES_NUMBERS',
+					'REQUIRES_SYMBOLS',
+				],
+			},
+			aws_cognito_verification_mechanisms: ['EMAIL'],
+		},
+		HELP_ARTICLES_URL:
+			'https://elyx-dev-help-articles.s3.eu-central-1.amazonaws.com',
+		PUBLIC_EXTERNAL_INTEGRATIONS_URL:
+			'https://elyx-dev-public-external-integrations.s3.eu-central-1.amazonaws.com',
+		EXTERNAL_INTEGRATIONS_URL: 'https://integrations.dev.elyx.tech',
+		EXTERNAL_INTEGRATIONS_CONNECT_URL: 'https://connect.dev.elyx.tech',
+		EXTERNAL_INTEGRATIONS_LOGOS_URL:
+			'https://app.nango.dev/images/template-logos',
+		HTTP_CLIENT_URL: 'https://df2h57ytbvezp.cloudfront.net',
+		EDITOR_RUNTIME_IP_ADDRESS: '35.157.54.29',
+		GOOGLE_PICKER_APP_ID: '5729685821',
+		GOOGLE_PICKER_API_KEY: 'AIzaSyCifEH3gMsOsOCaHMeQbGafHKlQSPUEmEA',
+	},
+	staging: {
+		stripe_publishable_key: 'pk_test_rYj0t30AfihMVtTZQA2HjjuT',
+		stripe_pricing_table_id: 'prctbl_1TREcAFUJjMj5cqLEALlJZfX',
+		stripe_personal_sub_mngmt_url:
+			'https://billing.stripe.com/p/login/test_5kQ5kDftobJmdMvczqgbm00',
+		stripe_org_sub_mngmt_url: '',
+		API_BASE_URL: 'https://api.staging.elyx.tech', // Future staging API
+		WS_URL: 'wss://ws.staging.elyx.tech',
+		amplifyConfig: {
+			aws_project_region: 'eu-central-1',
+			aws_cognito_region: 'eu-central-1',
+			aws_user_pools_id: 'eu-central-1_Hqy56jrad', // Your Staging User Pool ID
+			aws_user_pools_web_client_id: '3p75u41s5b32okj31hr2lvqcer', // Your Staging Client ID
+			aws_cognito_username_attributes: ['EMAIL'],
+			aws_cognito_signup_attributes: ['EMAIL'],
+			aws_cognito_password_protection_settings: {
+				passwordPolicyMinLength: 8,
+				passwordPolicyCharacters: [
+					'REQUIRES_LOWERCASE',
+					'REQUIRES_UPPERCASE',
+					'REQUIRES_NUMBERS',
+					'REQUIRES_SYMBOLS',
+				],
+			},
+			aws_cognito_verification_mechanisms: ['EMAIL'],
+		},
+		HELP_ARTICLES_URL:
+			'https://elyx-staging-help-articles.s3.eu-central-1.amazonaws.com',
+		// External integrations for staging share the 'dev' environments resources
+		PUBLIC_EXTERNAL_INTEGRATIONS_URL:
+			'https://elyx-dev-public-external-integrations.s3.eu-central-1.amazonaws.com',
+		EXTERNAL_INTEGRATIONS_URL: 'https://integrations.dev.elyx.tech',
+		EXTERNAL_INTEGRATIONS_CONNECT_URL: 'https://connect.dev.elyx.tech',
+		EXTERNAL_INTEGRATIONS_LOGOS_URL:
+			'https://app.nango.dev/images/template-logos',
+		HTTP_CLIENT_URL: 'https://d2i41032bsu0o2.cloudfront.net',
+		EDITOR_RUNTIME_IP_ADDRESS: '63.182.186.122',
+		GOOGLE_PICKER_APP_ID: '5729685821',
+		GOOGLE_PICKER_API_KEY: 'AIzaSyCifEH3gMsOsOCaHMeQbGafHKlQSPUEmEA',
+	},
+	prod: {
+		stripe_publishable_key: 'pk_live_HrFGNCp9YrKECgyAh5f4JMZO',
+		stripe_pricing_table_id: 'prctbl_1TRDRIFUJjMj5cqLss0ervUw',
+		stripe_personal_sub_mngmt_url:
+			'https://billing.stripe.com/p/login/5kQ5kDftobJmdMvczqgbm00',
+		stripe_org_sub_mngmt_url: '',
+		API_BASE_URL: 'https://api.elyx.tech',
+		WS_URL: 'wss://ws.elyx.tech',
+		amplifyConfig: {
+			aws_project_region: 'eu-central-1',
+			aws_cognito_region: 'eu-central-1',
+			aws_user_pools_id: 'eu-central-1_MzPRdm914',
+			aws_user_pools_web_client_id: '4hejvd5qnn2dhit4trd9kdcb2u',
+			aws_cognito_username_attributes: ['EMAIL'],
+			aws_cognito_signup_attributes: ['EMAIL'],
+			aws_cognito_password_protection_settings: {
+				passwordPolicyMinLength: 8,
+				passwordPolicyCharacters: [
+					'REQUIRES_LOWERCASE',
+					'REQUIRES_UPPERCASE',
+					'REQUIRES_NUMBERS',
+					'REQUIRES_SYMBOLS',
+				],
+			},
+			aws_cognito_verification_mechanisms: ['EMAIL'],
+		},
+		HELP_ARTICLES_URL:
+			'https://elyx-prod-help-articles.s3.eu-central-1.amazonaws.com',
+		PUBLIC_EXTERNAL_INTEGRATIONS_URL:
+			'https://elyx-prod-public-external-integrations.s3.eu-central-1.amazonaws.com',
+		EXTERNAL_INTEGRATIONS_URL: 'https://integrations.elyx.tech',
+		EXTERNAL_INTEGRATIONS_CONNECT_URL: 'https://connect.elyx.tech',
+		EXTERNAL_INTEGRATIONS_LOGOS_URL:
+			'https://app.nango.dev/images/template-logos',
+		HTTP_CLIENT_URL: 'https://d3meuwyksvik3l.cloudfront.net',
+		EDITOR_RUNTIME_IP_ADDRESS: '3.76.93.206',
+		GOOGLE_PICKER_APP_ID: '5729685821',
+		GOOGLE_PICKER_API_KEY: 'AIzaSyCifEH3gMsOsOCaHMeQbGafHKlQSPUEmEA',
+	},
+};
+
+// Fallback to dev if something goes weird
+export const envConfig = environments[ENV] || environments.dev;

package/src/globals.d.ts

@@ -0,0 +1,13 @@
+// src/globals.d.ts
+
+// CSS & SASS
+declare module '*.css';
+declare module '*.scss';
+declare module '*.sass';
+
+// Images (since your Webpack handles these too, TS will complain about them next!)
+declare module '*.png';
+declare module '*.svg';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';

package/src/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<title>Elyx canvas</title>
+	</head>
+	<body>
+		<!-- The 'injection-target' is the element where the generated HTML of the app is placed at runtime -->
+		<div id="injection-target"></div>
+
+		<!--
+			Loading an external module to display data structures, built and rendered in React JS
+			Needs to be loaded before the bundle.js script
+		-->
+		<script src="https://cdn.jsdelivr.net/npm/@textea/json-viewer@3"></script>
+
+		<!-- Loading the main javascript of the app -->
+		<script src="/bundle.js"></script>
+
+		<!-- Loading font awesome icons -->
+		<script
+			src="https://kit.fontawesome.com/e1d7b0c5e4.js"
+			crossorigin="anonymous"
+		></script>
+	</body>
+</html>

package/src/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import './main.css';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+// In your global setup file (e.g., index.js)
+const originalRemoveChild = Node.prototype.removeChild;
+Node.prototype.removeChild = function<T extends Node>(child: T): T {
+  try {
+    return originalRemoveChild.call(this, child) as T;
+  } catch (error) {
+    if (error instanceof Error && error.message.includes("not a child")) {
+      Logger.warn("Swallowed removeChild error:", error);
+      return child;
+    }
+    throw error;
+  }
+};
+
+createRoot(document.getElementById('injection-target') as HTMLElement).render(
+	<App />
+);

package/src/lib/badge/Badge.tsx

@@ -0,0 +1,35 @@
+import React, { ForwardedRef, forwardRef } from 'react';
+import type * as CSS from 'csstype';
+import './badge.css';
+
+interface Props {
+	color?: 'primary' | 'error' | 'warning' | 'success';
+	classes?: string[];
+	style?: CSS.Properties;
+	[key: string]: any;
+}
+
+const Badge: React.FC<Props> = forwardRef(
+	(props: Props, ref: ForwardedRef<HTMLButtonElement>) => {
+		const {
+			color = 'primary',
+			classes = [],
+			children,
+			style,
+			...otherProps
+		} = props;
+
+		return (
+			<span
+				ref={ref}
+				{...otherProps}
+				style={style}
+				className={['badge', `badge--${color}`, ...classes].join(' ')}
+			>
+				{children}
+			</span>
+		);
+	}
+);
+
+export default Badge;

package/src/lib/badge/badge.css

@@ -0,0 +1,32 @@
+
+/* Little counter on an icon button */
+.badge {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+	padding: 2px;
+	border-radius: 6px;
+	min-width: 12px;
+	height: 12px;
+	font-size: 8px;
+}
+
+.badge.badge--primary {
+	background-color: var(--color-main-primary);
+	color: var(--color-contrast-primary);
+}
+
+.badge.badge--error {
+	background-color: var(--color-main-error);
+	color: var(--color-contrast-error);
+}
+
+.badge.badge--warning {
+	background-color: var(--color-main-warning);
+	color: var(--color-contrast-warning);
+}
+
+.badge.badge--success {
+	background-color: var(--color-main-success);
+	color: var(--color-contrast-success);
+}