@elyx-code/editor-ui 0.0.2

package/src/components/dynamic-value/dynamic-value.css

@@ -0,0 +1,230 @@
+/* This is the top container parent to all the elements that are part of showing a dynamic value */
+.dynamic-value {
+  display: flex;
+  border-radius: 4px;
+  padding: 0px 2px;
+  width: fit-content;
+  max-width: 100%;
+  height: 23px;
+}
+
+.dynamic-value:not(.disabled) {
+  cursor: inherit !important;
+}
+
+.dynamic-value__no-end-cap {
+  /* border-radius: 4px 0px 0px 4px; */
+  /* Zero right padding */
+  padding: 0px 0px 0px 2px;
+}
+
+.dynamic-value-popup-arrow {
+  background: black;
+}
+
+.dynamic-value__background--primary,
+.dynamic-value__background--primary:hover {
+  background-color: #a683fc;
+  color: var(--color-contrast-primary);
+}
+
+.dynamic-value__background--error,
+.dynamic-value__background--error:hover {
+  background-color: var(--color-main-error);
+  color: var(--color-contrast-error);
+}
+
+.dynamic-value__background--success,
+.dynamic-value__background--success:hover {
+  background-color: var(--color-main-success);
+  color: var(--color-contrast-success);
+}
+
+.dynamic-value__background--grey,
+.dynamic-value__background--grey:hover {
+  background-color: var(--color-lighter-grey);
+  color: #000;
+}
+
+.dynamic-value__light-background--primary {
+  background-color: var(--color-background-primary);
+  color: var(--color-contrast-primary);
+}
+
+/* Reset all styling of a button */
+.dynamic-value__element {
+  border: none;
+  background-color: inherit;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+  white-space: nowrap;
+  border-radius: 0.4px;
+  /* transition: background-color 0.2s ease-in-out; */
+  padding: 2px 4px;
+}
+
+.dynamic-value__element i {
+  font-size: 10px;
+}
+
+.dynamic-value__element--clickable {
+  cursor: pointer;
+  /* transition scale */
+  transition: transform 0.2s ease-in-out;
+}
+
+.dynamic-value__element--clickable:hover {
+  transform: scale(1.05);
+}
+
+.dynamic-value__value {
+  padding: 2px 8px;
+  transition: transform 0.2s ease-in-out;
+  font-weight: 500;
+  font-size: 16px;
+  min-width: 50px;
+  justify-content: start;
+  text-align: center;
+
+  /* Truncate texts */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+	/* text-shadow: -1px 0 var(--color-support-primary), 0 1px var(--color-support-primary), 1px 0 var(--color-support-primary), 0 -1px var(--color-support-primary); */
+}
+
+.dynamic-value__empty,
+.dynamic-value__missing {
+  font-style: italic;
+}
+
+.dynamic-value__undefined {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--color-lighter-grey),
+    var(--color-lighter-grey) 8px,
+    var(--color-background-error) 8px,
+    var(--color-background-error) 16px
+  );
+}
+
+.dynamic-value__value--inspectable {
+  cursor: zoom-in;
+}
+
+.dynamic-value__option--copy {
+  padding-left: 6px;
+}
+
+.dynamic-value__option--switch-to-default {
+  /* Default color */
+  background-color: var(--color-lighter-grey);
+  color: #000;
+}
+.dynamic-value__option--switch-to-test {
+  /* Test color */
+  background-color: #a683fc;
+  color: var(--color-contrast-primary);
+}
+.dynamic-value__option--switch-to-missing-default {
+  /* Default color */
+  background-color: var(--color-background-error);
+  color: var(--color-contrast-error);
+}
+
+/* Add a custom cursor to the 'dynamic-value__value' class only if the body cursor style is set to 'auto' */
+.canvas:not(.selection-cursor) .dynamic-value:not(.disabled) .dynamic-value__value--editable {
+	cursor: url(../../assets/pencil.png) 2 20, context-menu;
+}
+/* Custom cursor applies outside of .canvas, only if .dynamic-value is not .disabled */
+:not(.canvas) .dynamic-value:not(.disabled) .dynamic-value__value--editable {
+	cursor: url(../../assets/pencil.png) 2 20, context-menu;
+}
+
+.canvas:not(.selection-cursor) .dynamic-value:not(.disabled) .dynamic-value__value--editable:hover,
+.canvas:not(.selection-cursor) .dynamic-value:not(.disabled) .dynamic-value__value--inspectable:hover {
+  transform: scale(1.05);
+}
+
+:not(.canvas) .dynamic-value:not(.disabled) .dynamic-value__value--editable:hover,
+:not(.canvas) .dynamic-value:not(.disabled) .dynamic-value__value--inspectable:hover {
+  transform: scale(1.05);
+}
+
+.dynamic-value__element--separator--primary {
+  /* border-right: 0.5px solid var(--color-light-contrast-primary); */
+  /* border-right: 0.5px solid #a683fc; */
+  /* border-right: 0.5px solid #d4c2ff; */
+  border-left: 0.5px solid #b394ff;
+}
+
+.dynamic-value__element--end-cap {
+  /* right radius only */
+  border-radius: 0px 4px 4px 0px;
+  /* right 2px padding only */
+  padding: 2px 4px;
+}
+
+.dynamic-value__element--separator--error {
+  border-left: 0.5px solid var(--color-background-error);
+}
+
+.dynamic-value__element--separator--grey {
+  border-left: 0.5px solid var(--color-light-grey);
+}
+
+.dynamic-value__resolved-value {
+  /* JetBrains Mono */
+  font-family: 'JetBrains Mono', monospace;
+  /* White half pixel border on letters */
+  text-shadow: -0.5px 0 white, 0 0.5px white, 0.5px 0 white, 0 -0.5px white;
+}
+
+.dynamic-value__resolved-value__string {
+  color: var(--color-string--value);
+}
+
+.dynamic-value__resolved-value__number {
+  color: var(--color-number--value);
+}
+
+.dynamic-value__resolved-value__boolean {
+  color: var(--color-boolean--value);
+}
+
+.dynamic-value__resolved-value__list {
+  color: var(--color-list--value);
+}
+
+.dynamic-value__resolved-value__object {
+  color: var(--color-object--value);
+}
+
+.tooltip--dynamic-value {
+  background-color: black !important;
+  margin: 0;
+  padding: 5px;
+  max-width: 700px;
+  /* overflow: auto; */
+}
+
+.mui-tooltip-arrow::before {
+  background-color: black !important;
+}
+
+.tooltip--dynamic-value__value {
+  font-size: 20px;
+  font-weight: 600;
+  /* Respect formatting */
+  white-space: pre-wrap;
+  max-width: 100%;
+}
+
+.dynamic-value-entry__confirm-value-button:hover {
+  transform: scale(1.1);
+}

package/src/components/editor/ElyxMonacoEditor.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Editor, { EditorProps, useMonaco } from '@monaco-editor/react';
+import { useTheme } from '@mui/material/styles';
+
+interface IElyxMonacoEditorProps extends EditorProps {
+	// Add any custom Elyx props here later
+}
+
+const ElyxMonacoEditor: React.FC<IElyxMonacoEditorProps> = (props) => {
+	const muiTheme = useTheme();
+	const monaco = useMonaco();
+
+	// In the future, we can sync the MUI theme with Monaco's theme here.
+	// For now, we'll just use the default vs-dark or vs-light.
+	const editorTheme = muiTheme.palette.mode === 'dark' ? 'vs-dark' : 'vs';
+
+	return (
+		<Editor
+			theme={editorTheme}
+			options={{
+				minimap: { enabled: false },
+				scrollBeyondLastLine: false,
+				wordWrap: 'on',
+				lineNumbers: 'on',
+				folding: false,
+				glyphMargin: false,
+				lineDecorationsWidth: 10,
+				lineNumbersMinChars: 3,
+				fontFamily: '"Fira Code", "JetBrains Mono", monospace',
+				fontSize: 14,
+				...props.options,
+			}}
+			{...props}
+		/>
+	);
+};
+
+export default ElyxMonacoEditor;

package/src/components/entity-error/EntityErrorListItem.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+	EntityError,
+	translateLogicErrorCodeShort,
+	translateLogicErrorCodeWithEntityName,
+} from '@elyx-code/project-logic-tree';
+import './entity-error.css';
+import { resolveSeverityIcon } from '../notifications/NotificationsPanel';
+import { NotificationSeverity } from '../../services/notifications';
+import { readableTimeFromNow } from '../../utils/date';
+
+export interface IEntityErrorListItemProps {
+	error: EntityError;
+	onClick: (error: EntityError) => void;
+}
+
+export default function EntityErrorListItem(props: IEntityErrorListItemProps) {
+	return (
+		<li key={props.error.id} className='entity-error__results__item'>
+			<button
+				className='entity-error__results__item-button'
+				onClick={() => {
+					props.onClick(props.error);
+				}}
+			>
+				<i
+					className={`fa-solid ${resolveSeverityIcon(
+						props.error.severity as any as NotificationSeverity
+					)}`}
+				/>
+				<span className='entity-error__results__item__body'>
+					<span className='entity-error__results__item__header-line'>
+						<p className='entity-error__results__item__title'>
+							{translateLogicErrorCodeShort(props.error)}
+						</p>
+						<p className='entity-error__results__item__time'>
+							{readableTimeFromNow(new Date())}
+						</p>
+					</span>
+					<p className='entity-error__results__item__description'>
+						{translateLogicErrorCodeWithEntityName(props.error)}
+					</p>
+				</span>
+			</button>
+		</li>
+	);
+}

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

@@ -0,0 +1,198 @@
+.entity-error__container {
+	padding: 5px;
+	background-color: #111;
+	top: 70px;
+	left: 0;
+	width: 100%;
+	border-radius: 4px;
+	display: block;
+	box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.4);
+	min-width: 200px;
+	background-color: #fff;
+	box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.15);
+
+	width: 350px;
+	overflow-y: hidden;
+}
+
+.entity-error__filters {
+	display: flex;
+	margin-top: 10px;
+	margin-bottom: 6px;
+	flex-direction: column;
+}
+
+.entity-error__filters__label {
+	font-size: 12px;
+	font-weight: 600;
+	color: #666;
+	margin: 0px;
+	margin-left: 6px;
+}
+
+.entity-error__filters__buttons {
+	display: flex;
+	gap: 6px;
+}
+
+.entity-error__filters__buttons button {
+	color: var(--color-light-grey);
+}
+
+.entity-error__results {
+	overflow-y: scroll;
+	max-height: 300px;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+
+	max-width: 100%;
+	width: 350px;
+}
+
+.entity-error__results.outline {
+	border: 1px solid rgba(0, 0, 0, 0.12);
+	border-radius: 8px;
+}
+
+.entity-error__results .entity-error__results__item__empty {
+	text-align: center;
+	padding: 10px;
+	font-size: 12px;
+	font-weight: 400;
+	margin: 0;
+	margin-bottom: 4px;
+	color: rgba(0, 0, 0, 0.54);
+}
+
+.entity-error__results .entity-error__results__item {
+	border-bottom: 1px solid #eee;
+}
+
+/* Removes all styling of the bottom so it acts as a container but doesn't change anything from the parent */
+.entity-error__results .entity-error__results__item-button {
+	padding: 10px;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+  text-align: left;
+	line-height: normal;
+
+	/* Resets */
+	width: 100%;
+	height: 100%;
+  border: none;
+  background-color: transparent;
+  box-shadow: none;
+  border-radius: 0;
+  margin: 0;
+}
+
+.entity-error__results .entity-error__results__item:last-child {
+	border-bottom: none;
+}
+
+.entity-error__results
+	.entity-error__results__item
+	i.fa-circle-exclamation {
+	color: var(--color-main-error);
+}
+
+.entity-error__results
+	.entity-error__results__item
+	i.fa-triangle-exclamation {
+	color: var(--color-main-warning);
+}
+
+.entity-error__results
+	.entity-error__results__item
+	i.fa-circle-info {
+	color: var(--color-main-primary);
+}
+
+.entity-error__results
+	.entity-error__results__item
+	i.fa-circle-check {
+	color: var(--color-main-success);
+}
+
+.entity-error__results
+	.entity-error__results__item
+	.entity-error__results__item__body {
+	width: 100%;
+}
+
+.entity-error__results
+	.entity-error__results__item
+	.entity-error__results__item__header-line {
+	display: flex;
+	justify-content: space-between;
+}
+
+.entity-error__results
+	.entity-error__results__item
+	.entity-error__results__item__title {
+	font-size: 14px;
+	font-weight: 600;
+	margin: 0;
+	margin-bottom: 4px;
+
+	/* break into second line even if it is one word */
+	word-break: break-all;
+}
+
+.entity-error__results
+	.entity-error__results__item
+	.entity-error__results__item__time {
+	font-size: 10px;
+	font-weight: 400;
+	margin: 0;
+	margin-bottom: 4px;
+	color: rgba(0, 0, 0, 0.54);
+}
+
+.entity-error__results
+	.entity-error__results__item
+	.entity-error__results__item__description {
+	font-size: 12px;
+	font-weight: 400;
+	margin: 0;
+	margin-bottom: 4px;
+	color: rgba(0, 0, 0, 0.54);
+}
+
+.entity-error__results .entity-error__results__item:hover {
+	background-color: var(--color-main-primary);
+	color: var(--color-contrast-primary);
+	transform: scale(1.01);
+	/* Smoth transition */
+	transition: all 0.2s ease-in-out;
+	border-radius: 8px;
+	/* No border bottom */
+	border-bottom: none;
+}
+
+.entity-error__results
+	.entity-error__results__item:hover
+	.entity-error__results__item__time {
+	color: var(--color-contrast-primary);
+}
+
+.entity-error__results
+	.entity-error__results__item:hover
+	.entity-error__results__item__description {
+	color: var(--color-contrast-primary);
+}
+
+/* Hide helper text section on search input */
+.entity-error__container .omrs-input-helper {
+	display: none;
+}
+
+/* Little counter on an icon button */
+.toolbar__button-badge {
+	position: absolute;
+	top: 3px;
+	right: 4px;
+}