@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/help/HelpDialog.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import Button from '../../../lib/button/Button';
+import DropdownButton from '../../../lib/dropdown/DropdownButton';
+import HelpDialogHomeContent from './HelpDilalogHomeContent';
+import { envConfig } from '../../../config';
+import { useWorkspaceStore } from '../../../store/workspace';
+import { EditorService } from '../../../services/editor';
+
+const HelpDialog: React.FC<{ onClose: () => void; project: EditorService }> = ({ onClose, project }) => {
+	const { id: projectId, tab } = useParams<{ id: string; tab: string; }>();
+	const navigate = useNavigate();
+
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+
+	const handleNavigation = (path: string) => {
+		navigate(path);
+	};
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				gap: '4px',
+				padding: '40px',
+			}}
+		>
+			{/* Header */}
+			<div
+				style={{
+					padding: '0',
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'space-between',
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						zIndex: 0,
+						gap: '16px',
+					}}
+				>
+					<button className='dialog_back_button' onClick={onClose}>
+						<i className='fa-solid fa-arrow-left'></i>
+					</button>
+					<h1
+						style={{
+							margin: '0px',
+							fontWeight: 500,
+							fontSize: '28px',
+							marginRight: '24px',
+						}}
+					>
+						Help articles
+					</h1>
+					<DropdownButton
+						value={tab}
+						id='resource-selection-button'
+						clickAwayTarget={document.getElementById('dialog-card')}
+						options={[
+							{
+								value: '',
+								label: 'Home',
+								iconEnd: 'fa-solid fa-question-circle',
+								onClick: () => handleNavigation(`${project.editorBasePath}/help`),
+							},
+							{
+								value: 'canvas-basics',
+								label: 'Canvas basics',
+								iconEnd: 'fa-solid fa-pencil',
+								onClick: () =>
+									handleNavigation(`${project.editorBasePath}/help/canvas-basics`),
+							},
+							{
+								value: 'datatypes',
+								label: 'Data types',
+								iconEnd: 'fa-solid fa-keyboard',
+								onClick: () =>
+									handleNavigation(`${project.editorBasePath}/help/datatypes`),
+							},
+							{
+								value: 'testing-logic',
+								label: 'Testing logic',
+								iconEnd: 'fa-solid fa-check',
+								onClick: () =>
+									handleNavigation(`${project.editorBasePath}/help/testing-logic`),
+							},
+							{
+								value: 'test-values',
+								label: 'Test values',
+								iconEnd: 'fa-solid fa-circle-check',
+								onClick: () =>
+									handleNavigation(`${project.editorBasePath}/help/test-values`),
+							},
+							{
+								value: 'operations',
+								label: 'Operations',
+								iconEnd: 'fa-solid fa-plus',
+								onClick: () =>
+									handleNavigation(`${project.editorBasePath}/help/operations`),
+							},
+							{
+								value: 'variables',
+								label: 'Variables',
+								iconEnd: 'fa-solid fa-t',
+								onClick: () =>
+									handleNavigation(`${project.editorBasePath}/help/variables`),
+							},
+							{
+								value: 'costs-calculation',
+								label: 'Costs calculation',
+								iconEnd: 'fa-solid fa-dollar-sign',
+								onClick: () =>
+									handleNavigation(
+										`${project.editorBasePath}/help/costs-calculation`
+									),
+							},
+							{
+								value: 'project-configuration',
+								label: 'Project configuration',
+								iconEnd: 'fa-solid fa-cog',
+								onClick: () =>
+									handleNavigation(
+										`${project.editorBasePath}/help/project-configuration`
+									),
+							},
+							{
+								value: 'exporting-project',
+								label: 'Exporting project',
+								iconEnd: 'fa-solid fa-file-export',
+								onClick: () =>
+									handleNavigation(
+										`${project.editorBasePath}/help/exporting-project`
+									),
+							},
+							{
+								value: 'project-publication',
+								label: 'Project publication',
+								iconEnd: 'fa-solid fa-flag-checkered',
+								onClick: () =>
+									handleNavigation(
+										`${project.editorBasePath}/help/project-publication`
+									),
+							},
+							{
+								value: 'unpublish-project',
+								label: 'Unpublish project',
+								iconEnd: 'fa-solid fa-ban',
+								onClick: () =>
+									handleNavigation(
+										`${project.editorBasePath}/help/unpublish-project`
+									),
+							},
+							{
+								value: 'cloud-assets',
+								label: 'Cloud assets',
+								iconEnd: 'fa-solid fa-cloud',
+								onClick: () =>
+									handleNavigation(`${project.editorBasePath}/help/cloud-assets`),
+							},
+							{
+								value: 'persisted-entity',
+								label: 'Persisted definition',
+								iconEnd: 'fa-solid fa-database',
+								onClick: () =>
+									handleNavigation(`${project.editorBasePath}/help/persisted-entity`),
+							},
+							{
+								value: 'http-endpoint-entity',
+								label: 'HTTP endpoint',
+								iconEnd: 'fa-solid fa-arrow-right-arrow-left',
+								onClick: () =>
+									handleNavigation(
+										`${project.editorBasePath}/help/http-endpoint-entity`
+									),
+							},
+						]}
+					/>
+				</div>
+			</div>
+
+			{/* Content */}
+			{tab ? (
+				<div style={{ flex: 1, margin: '0 42px', marginTop: '30px' }}>
+					<iframe
+						style={{ border: 'none', width: '100%', height: '100%' }}
+						src={`${envConfig.HELP_ARTICLES_URL}/articles/${tab}.html`}
+					/>
+				</div>
+			) : (
+				<HelpDialogHomeContent project={project} />
+			)}
+
+			{/* Footer */}
+			<div
+				style={{
+					alignSelf: 'flex-start',
+					display: 'flex',
+					flexDirection: 'row',
+					justifyContent: 'flex-end',
+					width: '100%',
+					gap: '16px',
+				}}
+			>
+				<Button onClick={() => handleNavigation(`${project.editorBasePath}`)}>
+					Back
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default HelpDialog;

package/src/components/dialogs/help/HelpDilalogHomeContent.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import './help-dialog.css';
+import { useNavigate, useParams } from 'react-router-dom';
+import VisualProgrammingIcon from '../../../assets/visual-programming-icon.svg';
+import PublishProjectRichIcon from '../../../assets/publish-project-rich-icon.svg';
+import TestingLogicIcon from '../../../assets/testing-logic-icon.svg';
+import NumberDataTypeBlackIcon from '../../../assets/dataType-icons/black/number.svg';
+import ListDataTypeBlackIcon from '../../../assets/dataType-icons/black/list.svg';
+import TextDataTypeBlackIcon from '../../../assets/dataType-icons/black/text.svg';
+import BooleanDataTypeBlackIcon from '../../../assets/dataType-icons/black/boolean.svg';
+import DateTimeDataTypeBlackIcon from '../../../assets/dataType-icons/black/date-time.svg';
+import { useWorkspaceStore } from '../../../store/workspace';
+import { EditorService } from '../../../services/editor';
+
+const HelpDialogHomeContent: React.FC<{ project: EditorService }> = ({ project }) => {
+	const { id: projectId } = useParams<{ id: string }>();
+	const navigate = useNavigate();
+
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+
+	const navigateTo = (path: string) => {
+		navigate(path);
+	};
+
+	return (
+		<div className='help-dialog-home-content'>
+			<h3 className='help-dialog-home-content__title'>Need help with Elyx?</h3>
+			<p className='help-dialog-home-content__paragraph'>
+				Read our help articles on specific topics
+			</p>
+			<p className='help-dialog-home-content__paragraph'>
+				Follow any <i className='fa-regular fa-question-circle' /> icons to
+				their respective help articles when you see them throughout the app.
+			</p>
+			<br />
+
+			<h4 className='help-dialog-home-content__subtitle'>
+				Get started with...
+			</h4>
+
+			<div className='help-dialog-home-content__quick-links-cards__container'>
+				<a
+					className='help-dialog-home-content__quick-links-cards__card'
+					href={`${project.editorBasePath}/help/canvas-basics`}
+					onClick={(e) => {
+						e.preventDefault();
+						navigateTo(
+							`${project.editorBasePath}/help/canvas-basics`,
+						);
+					}}
+				>
+					<h5 className='help-dialog-home-content__quick-links-cards__card__title'>
+						Canvas basics
+					</h5>
+					<img
+						className='help-dialog-home-content__quick-links-cards__card__icon'
+						src={VisualProgrammingIcon}
+					/>
+				</a>
+
+				<a
+					className='help-dialog-home-content__quick-links-cards__card'
+					href={`${project.editorBasePath}/help/datatypes`}
+					onClick={(e) => {
+						e.preventDefault();
+						navigateTo(
+							`${project.editorBasePath}/help/datatypes`,
+						);
+					}}
+				>
+					<h5 className='help-dialog-home-content__quick-links-cards__card__title'>
+						Data types
+					</h5>
+					<span style={{ display: 'flex', gap: '8px', marginBottom: '6px' }}>
+						<img
+							style={{ width: '20px', objectFit: 'contain' }}
+							src={BooleanDataTypeBlackIcon}
+						/>
+						<img
+							style={{ width: '20px', objectFit: 'contain' }}
+							src={NumberDataTypeBlackIcon}
+						/>
+						<img
+							style={{ width: '20px', objectFit: 'contain' }}
+							src={TextDataTypeBlackIcon}
+						/>
+						<img
+							style={{ width: '20px', objectFit: 'contain' }}
+							src={ListDataTypeBlackIcon}
+						/>
+						<img
+							style={{ width: '20px', objectFit: 'contain' }}
+							src={DateTimeDataTypeBlackIcon}
+						/>
+					</span>
+				</a>
+
+				<a
+					className='help-dialog-home-content__quick-links-cards__card'
+					href={`${project.editorBasePath}/help/testing-logic`}
+					onClick={(e) => {
+						e.preventDefault();
+						navigateTo(
+							`${project.editorBasePath}/help/testing-logic`,
+						);
+					}}
+				>
+					<h5 className='help-dialog-home-content__quick-links-cards__card__title'>
+						Testing your logic
+					</h5>
+					<img
+						className='help-dialog-home-content__quick-links-cards__card__icon'
+						src={TestingLogicIcon}
+					/>
+				</a>
+
+				<a
+					className='help-dialog-home-content__quick-links-cards__card'
+					href={`${project.editorBasePath}/help/project-publication`}
+					onClick={(e) => {
+						e.preventDefault();
+						navigateTo(
+							`${project.editorBasePath}/help/project-publication`,
+						);
+					}}
+				>
+					<h5 className='help-dialog-home-content__quick-links-cards__card__title'>
+						Publishing a project
+					</h5>
+					<img
+						className='help-dialog-home-content__quick-links-cards__card__icon'
+						src={PublishProjectRichIcon}
+					/>
+				</a>
+			</div>
+
+			<div className='help-dialog-home-content__separator'>
+				<div className='help-dialog-home-content__separator__internal-layout'>
+					<div className='help-dialog-home-content__separator__line'></div>
+					<p className='help-dialog-home-content__separator__text'>Or</p>
+					<div className='help-dialog-home-content__separator__line'></div>
+				</div>
+			</div>
+
+			<br />
+
+			<div
+				className='help-dialog-home-content__quick-links-cards__container'
+				style={{ marginTop: '10px' }}
+			>
+				<a
+					className='help-dialog-home-content__quick-links-cards__card'
+					href='https://discord.gg/DR2qZupRQW'
+					target='_blank'
+				>
+					<p className='help-dialog-home-content__quick-links-cards__card__description'>
+						Join our Discord server
+					</p>
+					<img
+						className='help-dialog-home-content__quick-links-cards__card__icon'
+						src='https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0b5061df29d55a92d945_full_logo_blurple_RGB.svg'
+					/>
+				</a>
+			</div>
+			<div className='help-dialog-home-content__standalone-centered_paragraph_container'>
+				<p
+					className='help-dialog-home-content__paragraph'
+					style={{ maxWidth: '300px', textAlign: 'center' }}
+				>
+					Join our community on Discord and ask questions directly to our team
+					and other Elyx users.
+				</p>
+			</div>
+		</div>
+	);
+};
+
+export default HelpDialogHomeContent;

package/src/components/dialogs/help/help-dialog.css

@@ -0,0 +1,116 @@
+.help-dialog-home-content {
+	flex: 1;
+	margin: 0 42px;
+	margin-top: 30px;
+}
+
+.help-dialog-home-content__title {
+	display: flex;
+	gap: 6px;
+	font-weight: bold;
+	margin: 0px;
+}
+
+.help-dialog-home-content__paragraph {
+	margin: 0px;
+	font-size: 14px;
+	margin-top: 16px;
+	color: rgba(0, 0, 0, 0.54);
+}
+
+.help-dialog-home-content__subtitle {
+	display: flex;
+	gap: 6px;
+	font-weight: bold;
+	margin: 0px;
+	color: rgba(0, 0, 0, 0.54);
+	margin-top: 10px;
+	margin-bottom: 20px;
+}
+
+.help-dialog-home-content__standalone-centered_paragraph_container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	margin-top: 20px;
+}
+
+.help-dialog-home-content__quick-links-cards__container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	gap: 14px;
+}
+
+.help-dialog-home-content__quick-links-cards__card {
+	background-color: var(--color-background-grey);
+	min-width: 240px;
+	gap: 12px;
+	min-height: 118px;
+	padding: 20px;
+	border-radius: 8px;
+	border: none;
+	cursor: pointer;
+	text-decoration: none;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: fit-content;
+	flex-direction: column;
+}
+
+/* On card hover: scale size and add soft shadow */
+.help-dialog-home-content__quick-links-cards__card:hover {
+	transform: scale(1.05);
+	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+	transition: all 0.3s ease;
+}
+
+.help-dialog-home-content__quick-links-cards__card__icon {
+	max-width: 200px;
+	height: 40px;
+	object-fit: contain;
+}
+
+.help-dialog-home-content__quick-links-cards__card__title {
+	color: var(--color-main-grey);
+	margin: 0px;
+}
+
+.help-dialog-home-content__quick-links-cards__card__description {
+	color: var(--color-main-grey);
+	font-size: 12px;
+	margin-bottom: 0px;
+}
+
+.help-dialog-home-content__separator {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	margin-top: 30px;
+}
+
+.help-dialog-home-content__separator__internal-layout {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 240px;
+	gap: 8px;
+	max-width: 100%;
+}
+
+.help-dialog-home-content__separator__line {
+	height: 1px;
+	width: 100%;
+	background-color: rgba(0, 0, 0, 0.12);
+}
+
+.help-dialog-home-content__separator__text {
+	margin: 0px;
+	font-size: 20px;
+	margin-top: 6px;
+	color: rgba(0, 0, 0, 0.54);
+}

package/src/components/dialogs/help/help-icon/HelpIconButton.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import './help-icon.css';
+import { useNavigate } from 'react-router-dom';
+import { makeId } from '../../../../utils';
+import { Tooltip } from '@mui/material';
+import { EditorService } from '../../../../services/editor';
+
+interface IHelpIconButtonProps {
+	project: EditorService;
+	article: string;
+	tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const HelpIconButton: React.FC<IHelpIconButtonProps> = ({
+	article,
+	tooltipPlacement = 'top',
+	project,
+}) => {
+	const relativeURL = `${project?.editorBasePath}/help/${article}`;
+	const id = makeId();
+	const navigate = useNavigate();
+
+	const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+		e.preventDefault();
+		e.stopPropagation();
+		navigate(relativeURL);
+	};
+
+	return (
+		<a href={relativeURL} onClick={handleClick} className='help-icon-button'>
+			<Tooltip
+				title={`Click to navigate to the help article.`}
+				placement={tooltipPlacement}
+			>
+				<i id={id} className='fa-regular fa-question-circle' />
+			</Tooltip>
+		</a>
+	);
+};
+
+export default HelpIconButton;

package/src/components/dialogs/help/help-icon/help-icon.css

@@ -0,0 +1,9 @@
+.help-icon-button {
+	text-decoration: none;
+	color: inherit;
+	cursor: pointer
+}
+
+.help-icon-button:hover {
+	scale: 1.05;
+}