@elyx-code/editor-ui 0.0.2

package/src/components/entity-icon/EntityIcon.tsx

@@ -0,0 +1,292 @@
+import React, { useCallback } from 'react';
+import { Tooltip } from '@mui/material';
+import {
+	CanvasEntityDisabledReason,
+	EntityState,
+} from '@elyx-code/project-logic-tree';
+import {
+	EntityTypeIconColor,
+	EntityTypeIconSize,
+	resolveEntityIcon,
+} from '../../services/editor/icons';
+import './entity-icon.css';
+import CanvasPopup, { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import { EditorService } from '../../services/editor';
+import { AbsoluteCanvasObject, RelativeObject } from '../../lib/canvas';
+
+interface IEntityIconProps {
+	entity: EntityState;
+	size?: EntityTypeIconSize;
+	color?: EntityTypeIconColor;
+	style?: React.CSSProperties;
+	parentDisabledReasons?: (CanvasEntityDisabledReason | string)[];
+	className?: string;
+	project?: EditorService;
+	parentCanvasObject?: AbsoluteCanvasObject | RelativeObject;
+	popupPlacement?:
+		| 'left'
+		| 'right'
+		| 'top'
+		| 'bottom'
+		| 'bottom-end'
+		| 'bottom-start'
+		| 'left-end'
+		| 'left-start'
+		| 'right-end'
+		| 'right-start'
+		| 'top-end'
+		| 'top-start';
+}
+
+const EntityIcon: React.FC<IEntityIconProps> = ({
+	entity,
+	size = 'medium',
+	color = 'black',
+	style = {},
+	parentDisabledReasons = [],
+	className = '',
+	project,
+	parentCanvasObject,
+	popupPlacement,
+}) => {
+	const config = resolveEntityIcon(entity, color);
+	const src = config.file;
+
+	const id = 'entity-icon--' + entity.id;
+
+	const tooltipBody = <>Data type</>;
+
+	// For now disabled hardcoded
+	const disabled = !!parentDisabledReasons.length || true;
+
+	const memoizedCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				containerClasses={[
+					'tooltip',
+					'tooltip--large-font',
+					'tooltip--dynamic-value',
+				]}
+				id={id + '--popup--body'}
+			>
+				{tooltipBody}
+			</CanvasPopupBaseComponent>
+		),
+		[id],
+	);
+
+	const isCanvas = !!parentCanvasObject && !!project;
+
+	// Only if there is a 'parentCanvasObject' prop, we should use the canvasPopup
+	// Otherwise, we should use the Tooltip component
+	const canvasPopup = isCanvas
+		? useCanvasPopup(
+				{
+					editor: project,
+					id: id + '--popup',
+					anchorQuerySelector: '#' + id,
+					arrowClasses: ['dynamic-value-popup-arrow'],
+					parentCanvasObject: parentCanvasObject,
+					arrowContainerSelector: '#' + id + '--popup--body',
+					placement: popupPlacement || 'bottom',
+				},
+				memoizedCanvasPopupBody,
+				[id],
+			)
+				.setupHover({
+					closeDelay: 80,
+					openDelay: 600,
+				})
+				.onBeforeShow((e) => {
+					const otherPopup =
+						CanvasPopup.globalCanvasPopups[
+							id + '--popup-dynamic-value-switch-button'
+						];
+
+					if (otherPopup && otherPopup.open) {
+						return false;
+					}
+
+					if (disabled) {
+						return false;
+					}
+
+					return true;
+				})
+		: null;
+
+	if (!!src) {
+		return (
+			<Tooltip
+				// The styles overrides below can be cleaned up
+				classes={{
+					tooltip: 'tooltip tooltip--dynamic-value',
+					arrow: 'mui-tooltip-arrow',
+				}}
+				slotProps={{
+					popper: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 0,
+						},
+						modifiers: [
+							{
+								name: 'offset',
+								options: {
+									offset: [0, 8],
+								},
+							},
+						],
+					},
+					tooltip: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 5,
+						},
+					},
+					arrow: {
+						className: 'mui-tooltip-arrow',
+					},
+				}}
+				arrow
+				title={!isCanvas && !disabled ? tooltipBody : ''}
+				placement={popupPlacement || 'bottom'}
+				leaveDelay={400}
+			>
+				<img
+					className={
+						`entity-icon img-entity-icon data-type-icon-${size} ` +
+						(className || '')
+					}
+					src={src}
+					alt={`${entity?.type || 'unknown node type'} icon`}
+					ref={canvasPopup?.anchorRef}
+					style={{
+						opacity: !!parentDisabledReasons.length ? 0.5 : 1,
+						...style,
+					}}
+				/>
+			</Tooltip>
+		);
+	}
+
+	if (!!config.url) {
+		return (
+			<Tooltip
+				// The styles overrides below can be cleaned up
+				classes={{
+					tooltip: 'tooltip tooltip--dynamic-value',
+					arrow: 'mui-tooltip-arrow',
+				}}
+				slotProps={{
+					popper: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 0,
+						},
+						modifiers: [
+							{
+								name: 'offset',
+								options: {
+									offset: [0, 8],
+								},
+							},
+						],
+					},
+					tooltip: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 5,
+						},
+					},
+					arrow: {
+						className: 'mui-tooltip-arrow',
+					},
+				}}
+				arrow
+				title={!isCanvas && !disabled ? tooltipBody : ''}
+				placement={popupPlacement || 'bottom'}
+				leaveDelay={400}
+			>
+				<img
+					className={
+						`entity-icon img-entity-icon data-type-icon-${size} external-icon-img ` +
+						(className || '')
+					}
+					src={config.url}
+					ref={canvasPopup?.anchorRef}
+					alt={`${entity?.type || 'unknown node type'} icon`}
+					style={{
+						opacity: !!parentDisabledReasons.length ? 0.5 : 1,
+						...style,
+					}}
+				/>
+			</Tooltip>
+		);
+	}
+
+	if (!!config.fa) {
+		return (
+			<Tooltip
+				// The styles overrides below can be cleaned up
+				classes={{
+					tooltip: 'tooltip tooltip--dynamic-value',
+					arrow: 'mui-tooltip-arrow',
+				}}
+				slotProps={{
+					popper: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 0,
+						},
+						modifiers: [
+							{
+								name: 'offset',
+								options: {
+									offset: [0, 8],
+								},
+							},
+						],
+					},
+					tooltip: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 5,
+						},
+					},
+					arrow: {
+						className: 'mui-tooltip-arrow',
+					},
+				}}
+				arrow
+				title={!isCanvas && !disabled ? tooltipBody : ''}
+				placement={popupPlacement || 'bottom'}
+				leaveDelay={400}
+			>
+				<i
+					className={
+						`entity-icon data-type-icon-${size} fa-entity-icon fa-solid fa-${
+							config.fa || 'rectangle-list'
+						} ` + (className || '')
+					}
+					ref={canvasPopup?.anchorRef}
+					style={{
+						opacity: !!parentDisabledReasons.length ? 0.5 : 1,
+						...style,
+					}}
+				/>
+			</Tooltip>
+		);
+	}
+
+	return null;
+};
+
+export default EntityIcon;

package/src/components/entity-icon/entity-icon.css

@@ -0,0 +1,39 @@
+.fa-entity-icon {
+	color: var(--color-main-grey);
+}
+
+.external-icon-img {
+	object-fit: cover;
+	object-position: center;
+	padding-right: 2px;
+}
+
+.data-type-icon-small {
+	width: 12px;
+	height: 12px;
+}
+
+.data-type-icon-small.external-icon-img {
+	width: 20px;
+	height: 20px;
+}
+
+.data-type-icon-medium {
+	width: 16px;
+	height: 16px;
+}
+
+.data-type-icon-medium.external-icon-img {
+	width: 28px;
+	height: 28px;
+}
+
+.data-type-icon-large {
+	width: 20px;
+	height: 20px;
+}
+
+.data-type-icon-large.external-icon-img {
+	width: 34px;
+	height: 34px;
+}

package/src/components/gallery-card/CreateNewProject.tsx

@@ -0,0 +1,222 @@
+import React, { useEffect } from 'react';
+import Card from '../../lib/card/Card';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import { getAccessToken, getCurrentUserOrLogoutRedirect } from '../../auth';
+import { CircularProgress, Box } from '@mui/material';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { IProject_meta } from '@elyx-code/project-logic-tree';
+import { envConfig } from '../../config';
+import { IUser } from '@elyx-code/definitions';
+import Popup from '../../lib/popup/Popup';
+import { ProPlanChip } from '../ProPlanChip';
+import { useWorkspaceStore } from '../../store/workspace';
+
+const CreateNewProject: React.FC<{
+	onCreated: (newProject: IProject_meta) => void;
+	totalProjectCount: number;
+	viewMode?: 'grid' | 'rows';
+}> = ({ onCreated, totalProjectCount, viewMode = 'grid' }) => {
+	const navigate = useNavigate();
+	const [creating, setCreating] = React.useState(false);
+	const [user, setUser] = React.useState<IUser>();
+
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+
+	// if (activeWorkspace?.limits?.maxProjects !== undefined) {
+	// 	// for testing
+	// 	activeWorkspace.limits.maxProjects = 1;
+	// }
+
+	const isAtProjectLimit =
+		activeWorkspace?.limits?.maxProjects !== -1 &&
+		activeWorkspace?.limits?.maxProjects <= totalProjectCount;
+
+	const createApp = async (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+		if (creating || totalProjectCount === -1) {
+			return;
+		}
+
+		if (isAtProjectLimit) {
+			navigate('/pricing/plans');
+			return;
+		}
+
+		setCreating(true);
+
+		const response = await axios.post(
+			`${envConfig.API_BASE_URL}/editor-service/v1/project`,
+			{
+				// name: 'New Project',
+				// description: 'New Project Description',
+				workspaceId: activeWorkspace?.id
+			},
+			{
+				headers: {
+					Authorization: `Bearer ${await getAccessToken()}`,
+				},
+			},
+		);
+
+		Logger.log('response', response);
+
+		setCreating(false);
+
+		// Check if new tab
+		if (e.metaKey || e.ctrlKey) {
+			// Open same target in new tab
+			window.open(
+				`/ws/${activeWorkspace?.slug}/editor/${response.data.data.project.id}/main/latest/starting-logic-generation`,
+				'_blank',
+			);
+
+			onCreated(response.data.data.project as IProject_meta);
+			return;
+		}
+
+		navigate(
+			`/ws/${activeWorkspace?.slug}/editor/${response.data.data.project.id}/main/latest/starting-logic-generation`,
+		);
+	};
+
+	useEffect(() => {
+		// Fetch user data or perform any side effects here
+		const fetchCurrentUser = async () => {
+			try {
+				const currentUser = await getCurrentUserOrLogoutRedirect();
+				setUser(currentUser);
+			} catch (e) {
+				Logger.log('Error getting user profile', e);
+			}
+		};
+		fetchCurrentUser();
+	}, []);
+
+	if (viewMode === 'rows') {
+		return (
+			<>
+				<div
+					onClick={createApp}
+					className='gallery-row-card gallery-row-card--create'
+					id={`gallery-card--create-new-project`}
+					style={creating || totalProjectCount === -1 ? { opacity: 0.6, cursor: 'unset' } : {}}
+				>
+					<div className='gallery-row-card-left'>
+						<div className='gallery-row-card-image bg-color-5'>
+							{creating ? (
+								<CircularProgress size={20} />
+							) : (
+								<i className='fa-solid fa-plus'></i>
+							)}
+						</div>
+						<div className='gallery-row-card-info' style={isAtProjectLimit ? { opacity: 0.6 } : {}}>
+							<h3 className='gallery-row-card-title all-uppercase'>
+								Create project
+							</h3>
+							<p className='gallery-row-card-description'>
+								{isAtProjectLimit
+									? 'Upgrade your plan to create more projects'
+									: 'Click here to create a new app'}
+							</p>
+						</div>
+					</div>
+					{isAtProjectLimit && (
+						<div className='gallery-row-card-right'>
+							<Box>
+								<ProPlanChip />
+							</Box>
+						</div>
+					)}
+				</div>
+				<Popup
+					anchorQuerySelector={`#gallery-card--create-new-project`}
+					placement='bottom'
+					openDelay={isAtProjectLimit ? 0 : 500}
+					closeDelay={100}
+				>
+					{isAtProjectLimit ? (
+						<div className='tooltip gallery-card-tooltip'>
+							<h4 style={{ margin: '0 0 4px 0' }}>Project limit reached</h4>
+							<p style={{ margin: 0 }}>
+								Upgrade your plan to create more projects.
+							</p>
+						</div>
+					) : (
+						<div className='tooltip gallery-card-tooltip'>
+							Click here to create a new app
+						</div>
+					)}
+				</Popup>
+			</>
+		);
+	}
+
+	return (
+		<>
+			<Card
+				id={`gallery-card--create-new-project`}
+				onClick={createApp}
+				disabled={creating || totalProjectCount === -1}
+			>
+				<div className='card-content'>
+					{isAtProjectLimit && (
+						// Show an upgrade plan chip on the top right corner of the card
+						// On click, navigate to the plans pricing page
+						<Box className='card-tags'>
+							<ProPlanChip />
+						</Box>
+					)}
+					<div
+						className='card-image bg-color-5'
+						style={{
+							position: 'relative',
+							...(isAtProjectLimit ? { opacity: 0.6 } : {}),
+						}}
+					>
+						{creating ? (
+							<CircularProgress size={36} />
+						) : (
+							<i className='fa-solid fa-plus'></i>
+						)}
+					</div>
+					<div
+						className='card-info-section'
+						style={isAtProjectLimit ? { opacity: 0.6 } : {}}
+					>
+						<div className='card-info-section--left'>
+							<h3 className='card-title truncated-title all-uppercase'>
+								Create project
+							</h3>
+							<p className='card-description'>
+								{isAtProjectLimit
+									? 'Upgrade your plan to create more projects'
+									: 'Click here to create a new app'}
+							</p>
+						</div>
+					</div>
+				</div>
+			</Card>
+			<Popup
+				anchorQuerySelector={`#gallery-card--create-new-project`}
+				placement='bottom'
+				openDelay={isAtProjectLimit ? 0 : 500}
+				closeDelay={100}
+			>
+				{isAtProjectLimit ? (
+					<div className='tooltip gallery-card-tooltip'>
+						<h4 style={{ margin: '0 0 4px 0' }}>Project limit reached</h4>
+						<p style={{ margin: 0 }}>
+							Upgrade your plan to create more projects.
+						</p>
+					</div>
+				) : (
+					<div className='tooltip gallery-card-tooltip'>
+						Click here to create a new app
+					</div>
+				)}
+			</Popup>
+		</>
+	);
+};
+
+export default CreateNewProject;