@elyx-code/editor-ui 0.0.2

package/src/pages/gallery.css

@@ -0,0 +1,421 @@
+.gallery-page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 60px 40px;
+}
+
+.gallery-content-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 720px;
+}
+
+/* Change when screen is smaller than 812px in total width */
+@media (max-width: 812px) {
+  .gallery-content-column {
+    max-width: 535px;
+  }
+}
+
+@media (max-width: 630px) {
+  .gallery-content-column {
+    max-width: 352px;
+  }
+}
+
+@media (max-width: 447px) {
+  .gallery-content-column {
+    max-width: 170px;
+  }
+}
+
+.gallery-section {
+  width: 100%;
+  margin-bottom: 40px;
+}
+
+.gallery-section-header-container {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+
+.gallery-section-header-icon {
+  color: var(--color-main-grey);
+}
+
+.gallery-section-header-container .gallery-section-title {
+  margin-left: 10px;
+  width: unset;
+}
+
+.gallery-section-description {
+  color: var(--color-main-grey);
+  margin-left: 15px;
+  font-size: 10px;
+  text-transform: uppercase;
+}
+
+.gallery-projects-grid {
+  display: grid;
+  /* Grid has as many columns as it can fit */
+  grid-template-columns: repeat(auto-fit, 170px);
+  grid-gap: 12px;
+  width: 100%;
+}
+
+/* A small logo place on the top left of the screen */
+.gallery-page-logo {
+  position: fixed;
+  top: 15px;
+  left: 15px;
+  padding: 10px;
+  height: 40px;
+}
+
+.gallery-page-title {
+  font-size: 24px;
+  font-weight: 600;
+  width: 100%;
+  text-align: left;
+  font-family: 'Roboto', sans-serif;
+  text-transform: uppercase;
+}
+
+.gallery-section-title {
+  font-size: 18px;
+  font-weight: 500;
+  width: 100%;
+  text-align: left;
+  /* dark grey */
+  color: var(--color-main-grey);
+}
+
+/* Replace .gallery-current-user-position with this: */
+.gallery-top-controls {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/* New Workspace Badge Styles */
+.workspace-badge {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #e5e7eb);
+  padding: 6px 14px 6px 6px;
+  border-radius: 50px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  user-select: none;
+  text-decoration: none;
+}
+
+.workspace-badge__icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--color-main-primary, #9c27b0); /* Uses your primary Elyx color */
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.workspace-badge__info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.workspace-badge__name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-main, #111827);
+  line-height: 1.2;
+  max-width: 160px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.workspace-badge__tier {
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--color-main-grey, #6b7280);
+  text-transform: uppercase;
+  line-height: 1.2;
+}
+
+/* --- Marketplace search --- */
+.marketplace-search {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.marketplace-search__icon {
+  background: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 10px;
+  transition: background 150ms ease;
+}
+
+.marketplace-search__icon:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.marketplace-search__input {
+  width: 0;
+  opacity: 0;
+  border: 1px solid var(--color-border, #e5e7eb);
+  background: var(--color-surface, #fff);
+  color: inherit;
+  border-radius: 10px;
+  padding: 6px 10px;
+  font-size: 14px;
+  transition:
+    width 220ms ease,
+    opacity 160ms ease;
+}
+
+.marketplace-search.open .marketplace-search__input {
+  width: 220px;
+  opacity: 1;
+}
+
+.marketplace-search__input::placeholder {
+  color: var(--color-main-grey);
+}
+
+/* No results message spans full grid width */
+.gallery-no-results {
+  grid-column: 1 / -1;
+  color: var(--color-main-grey);
+  font-size: 14px;
+  margin: 6px 2px 10px;
+}
+
+/* --- Layout Toggle and Row Styles --- */
+.gallery-layout-toggle {
+  display: flex;
+  align-items: center;
+  background: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: 8px;
+  padding: 2px;
+  margin-left: 12px;
+}
+
+.gallery-layout-toggle__btn {
+  background: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 6px 8px;
+  border-radius: 6px;
+  color: var(--color-main-grey, #6b7280);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.gallery-layout-toggle__btn:hover {
+  color: var(--color-text-main, #111827);
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.gallery-layout-toggle__btn.active {
+  background-color: rgba(0, 0, 0, 0.06);
+  color: var(--color-main-primary, #9c27b0);
+}
+
+.gallery-projects-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.gallery-row-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: 10px;
+  padding: 10px 16px;
+  width: 100%;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.gallery-row-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.gallery-row-card-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.gallery-row-card-image {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.gallery-row-card-image.loading {
+  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+  background-size: 200% 100%;
+  animation: 1s shine linear infinite;
+}
+
+.gallery-row-card-image i {
+  font-size: 18px;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.gallery-row-card-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.gallery-row-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text-main, #111827);
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.gallery-row-card-title.loading {
+  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+  background-size: 200% 100%;
+  animation: 1s shine linear infinite;
+  border-radius: 4px;
+}
+
+.gallery-row-card-description {
+  font-size: 11px;
+  color: var(--color-main-grey, #6b7280);
+  margin: 2px 0 0 0;
+  padding: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 450px;
+}
+
+.gallery-row-card-description.loading {
+  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+  background-size: 200% 100%;
+  animation: 1s shine linear infinite;
+  border-radius: 4px;
+}
+
+@media (max-width: 812px) {
+  .gallery-row-card-description {
+    max-width: 320px;
+  }
+}
+
+@media (max-width: 630px) {
+  .gallery-row-card-description {
+    max-width: 200px;
+  }
+}
+
+@media (max-width: 447px) {
+  .gallery-row-card-description {
+    max-width: 100px;
+  }
+}
+
+.gallery-row-card-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.gallery-row-card-menu-icon {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--color-light-grey, #9ca3af);
+  padding: 8px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.gallery-row-card-menu-icon:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: var(--color-text-main, #111827);
+}
+
+.gallery-load-more-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-top: 24px;
+}
+
+.gallery-load-more-btn {
+  background: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border, #e5e7eb);
+  color: var(--color-text-main, #111827);
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 8px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+  transition: background-color 0.15s ease, transform 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.gallery-load-more-btn:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.02);
+  transform: translateY(-1px);
+}
+
+.gallery-load-more-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}

package/src/payments/index.ts

@@ -0,0 +1,187 @@
+import axios from 'axios';
+import { getAccessToken } from '../auth';
+import { envConfig } from '../config';
+
+export enum ADD_PAYMENT_METHOD_PROCESS {
+	PUBLISH_PROJECT = 'publish-project',
+	GALLERY_PROFILE = 'gallery-profile',
+	EDITOR_PROFILE = 'editor-profile',
+}
+
+function validateParams(params: { [key: string]: string }): {
+	error: string | null;
+} {
+	const projectId = params.projectId;
+	const branchIdentifier = params?.branchIdentifier;
+	const projectVersion = params?.projectVersion;
+	const workspaceId = params?.workspaceId as string;
+	const workspaceSlug = params?.workspaceSlug as string;
+	const process: ADD_PAYMENT_METHOD_PROCESS =
+		params.process as ADD_PAYMENT_METHOD_PROCESS;
+
+	const missingParams: string[] = [];
+
+	if (!workspaceId) {
+		missingParams.push('workspaceId');
+	}
+
+	if (!workspaceSlug) {
+		missingParams.push('workspaceSlig');
+	}
+
+	let badProcessParamMessage = '';
+
+	if (!process) {
+		missingParams.push('process');
+	} else if (!Object.values(ADD_PAYMENT_METHOD_PROCESS).includes(process)) {
+		badProcessParamMessage += `The "process" query parameter is present, but its value is "${process}", but must be one of: "${Object.values(ADD_PAYMENT_METHOD_PROCESS).join(`", "`)}".`;
+	}
+
+	let invalidParamsCombinationMessage = '';
+
+	let hasValidatedProjectParams: boolean = false;
+
+	const projectScopedMissingParams = [];
+	const galleryScopeExtraParams = [];
+
+	if (process) {
+		if (
+			process === ADD_PAYMENT_METHOD_PROCESS.EDITOR_PROFILE ||
+			process === ADD_PAYMENT_METHOD_PROCESS.PUBLISH_PROJECT
+		) {
+			if (!projectId) {
+				projectScopedMissingParams.push('projectId');
+			}
+
+			if (!branchIdentifier) {
+				projectScopedMissingParams.push('branchIdentifier');
+			}
+
+			if (!projectVersion) {
+				projectScopedMissingParams.push('projectVersion');
+			}
+
+			if (!!projectScopedMissingParams.length) {
+				hasValidatedProjectParams = true;
+			}
+		} else if (process === ADD_PAYMENT_METHOD_PROCESS.GALLERY_PROFILE) {
+			if (!!projectId) {
+				galleryScopeExtraParams.push('projectId');
+			}
+
+			if (!!branchIdentifier) {
+				galleryScopeExtraParams.push('branchIdentifier');
+			}
+
+			if (!!projectVersion) {
+				galleryScopeExtraParams.push('projectVersion');
+			}
+
+			if (!!galleryScopeExtraParams.length) {
+				hasValidatedProjectParams = true;
+			}
+		}
+	}
+
+	let badProcessCombinationWithProjectIdMessage = '';
+
+	if (projectId && !hasValidatedProjectParams) {
+		if (!branchIdentifier) {
+			projectScopedMissingParams.push('branchIdentifier');
+		}
+
+		if (!projectVersion) {
+			projectScopedMissingParams.push('projectVersion');
+		}
+
+		if (
+			process !== ADD_PAYMENT_METHOD_PROCESS.EDITOR_PROFILE &&
+			process !== ADD_PAYMENT_METHOD_PROCESS.PUBLISH_PROJECT
+		) {
+			badProcessCombinationWithProjectIdMessage += `The "process" query parameter must be "${ADD_PAYMENT_METHOD_PROCESS.EDITOR_PROFILE}" or "${ADD_PAYMENT_METHOD_PROCESS.PUBLISH_PROJECT}" when the "projectId" query param is present but currently is "${process}".`;
+		}
+	}
+
+	if (
+		!!missingParams.length ||
+		!!badProcessParamMessage ||
+		!!invalidParamsCombinationMessage ||
+		!!badProcessCombinationWithProjectIdMessage ||
+		!!projectScopedMissingParams.length ||
+		!!galleryScopeExtraParams.length
+	) {
+		let message = '';
+
+		if (!!missingParams.length) {
+			message += ` The following query parameters must always be present "${missingParams.join(`", "`)}".`;
+		}
+
+		message += !!badProcessParamMessage ? ` ${badProcessParamMessage}` : '';
+		message += !!invalidParamsCombinationMessage
+			? ` ${invalidParamsCombinationMessage}`
+			: '';
+		message += !!badProcessCombinationWithProjectIdMessage
+			? ` ${badProcessCombinationWithProjectIdMessage}`
+			: '';
+
+		if (!!projectScopedMissingParams.length) {
+			message += ` The following query parameters must be present if the "projectId" param is present, or if the "process" param is "${ADD_PAYMENT_METHOD_PROCESS.EDITOR_PROFILE}" or "${ADD_PAYMENT_METHOD_PROCESS.PUBLISH_PROJECT}": "${projectScopedMissingParams.join(`", "`)}".`;
+		}
+
+		if (galleryScopeExtraParams) {
+			message += ` The following query parameters are not allowed to be present when the "process" param is "${ADD_PAYMENT_METHOD_PROCESS.GALLERY_PROFILE}": "${projectScopedMissingParams.join(`", "`)}".`;
+		}
+
+		return {
+			error: `Cant initialize add payment method:${message}`,
+		};
+	}
+
+	return {
+		error: null,
+	};
+}
+
+export async function startAddPaymentMethodSession(params: {
+	projectId?: string;
+	process: ADD_PAYMENT_METHOD_PROCESS;
+	workspaceId: string;
+	workspaceSlug: string;
+	branchIdentifier?: string;
+	projectVersion?: string;
+}) {
+	const res = validateParams(params);
+
+	if (!!res.error) {
+		throw new Error(res.error)
+	}
+
+	// Build query string
+	const queryString =
+		Object.keys(params).length === 0
+			? ''
+			: '?' +
+				Object.keys(params)
+					.filter((key) => !!(params as { [key: string]: string })[key])
+					.map(
+						(key: string) =>
+							key + '=' + (params as { [key: string]: string })[key],
+					)
+					.join('&');
+
+	const response = await axios.get(
+		`${envConfig.API_BASE_URL}/pricing-service/v1/init-add-payment-method-session${queryString}`,
+		{
+			headers: {
+				Authorization: 'Bearer ' + (await getAccessToken()),
+			},
+		},
+	);
+
+	const redirectURL = response.data?.data?.url;
+
+	// Redirect to session url
+	window.location.href = redirectURL;
+
+	return response.data?.data;
+}

package/src/popup-notification/index.ts

@@ -0,0 +1,90 @@
+const queuedNotifications: string[] = [];
+
+const DEFAULT_NOTIFICATION_DELAY = 3000;
+const TIME_BETWEEN_NOTIFICATIONS = 300;
+
+export function popupNotification({
+	text,
+	color,
+	delay,
+}: {
+	text: string;
+	color?: 'primary' | 'warning' | 'success' | 'error';
+	delay?: number;
+}) {
+	const delayInMiliseconds = delay || DEFAULT_NOTIFICATION_DELAY;
+
+	// Select the body and inject a fixed element that says "notification"
+	const body = document.querySelector('body');
+
+	const notificationElement = document.createElement('div');
+	notificationElement.style.position = 'fixed';
+	notificationElement.style.top = '-1000px';
+	notificationElement.style.zIndex = '1400';
+	notificationElement.style.left = '50%';
+	notificationElement.style.transform = 'translateX(-50%)';
+	notificationElement.style.backgroundColor = color
+		? `var(--color-main-${color})`
+		: '#36304a'; // Dark background color
+	notificationElement.style.color = color
+		? `var(--color-contrast-${color})`
+		: 'white';
+	notificationElement.style.padding = '12px 24px';
+	notificationElement.style.borderRadius = '8px';
+	notificationElement.style.textAlign = 'center'; // Center-align text
+	notificationElement.style.display = 'flex';
+	notificationElement.style.alignItems = 'center';
+	notificationElement.style.justifyContent = 'space-between';
+	notificationElement.style.gap = '16px';
+
+	// Slide down animation
+	notificationElement.style.animation = 'slide-top-down 0.5s ease-in-out';
+
+	// Create p element with text
+	const notificationText = document.createElement('p');
+	notificationText.style.margin = '0';
+	notificationText.innerText = text;
+	notificationElement.appendChild(notificationText);
+
+	// Append "x" icon to the notification through an "i" element with the classes "fa-solid fa-xmark"
+	const notificationIcon = document.createElement('i');
+	notificationIcon.classList.add('fa-solid', 'fa-xmark');
+	notificationIcon.style.cursor = 'pointer';
+
+	const onIconClick = (e: MouseEvent) => {
+		e.stopPropagation();
+		notificationElement.remove();
+	};
+
+	notificationIcon.addEventListener('click', onIconClick);
+
+	notificationElement.appendChild(notificationIcon);
+
+  const milisecondsUntilShow =
+		queuedNotifications.length * delayInMiliseconds +
+		(queuedNotifications.length ? TIME_BETWEEN_NOTIFICATIONS : 0);
+
+	const milisecondsUntilRemove = milisecondsUntilShow + delayInMiliseconds;
+
+	const uuid =
+		Math.random().toString(36).substring(2, 15) +
+		Math.random().toString(36).substring(2, 15);
+
+	queuedNotifications.push(uuid);
+
+	// Display the notification for 3 seconds before removing it
+	setTimeout(() => {
+		notificationElement.remove();
+		notificationIcon.removeEventListener('click', onIconClick);
+		queuedNotifications.splice(queuedNotifications.indexOf(uuid), 1);
+	}, milisecondsUntilRemove);
+
+	setTimeout(() => {
+		body.appendChild(notificationElement);
+
+    setTimeout(() => {
+    	notificationElement.style.top = '16px';
+    }, 100);
+	}, milisecondsUntilShow);
+
+}

package/src/services/database/index.ts

@@ -0,0 +1 @@
+export * from './utils';