@basthon/console-react 0.1.1 → 0.1.2

package/lib/components/styles.module.scss

@@ -0,0 +1,394 @@
+:root {
+  --bg-color: #eee;
+  --term-bg-color: #272822;
+  --term-fg-color: #fff;
+  --base-unit: 1vw;
+  --corner-radius: calc(0.6 * var(--base-unit));
+  --half-corner-radius: calc(var(--corner-radius) / 2);
+  --main-font-size: calc(1.2 * var(--base-unit));
+  --main-font: "Open Sans", sans-serif;
+  --shadow-logo-size: calc(0.3 * var(--base-unit));
+  --logo-height: 12vh;
+  --term-height: 60vh;
+  --term-font-size: 12pt;
+  --term-font: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro",
+    monospace;
+  --term-script-color: var(--python-grey);
+  --main-container-width: 90%;
+  --main-container-height: 75vh;
+  --left-container-width: 50%;
+  --right-container-width: calc(100% - var(--left-container-width) - 2%);
+  --shadow-color: rgba(0, 0, 0, 0.5);
+  --link-color: #888;
+  --subtitle-color: var(--link-color);
+  --python-yellow: #ffc938;
+  --python-blue: #366f9e;
+  --python-grey: #aaa;
+  --notification-font-size: 1.1rem;
+}
+
+[data-theme="light"] {
+  --term-bg-color: #fff;
+  --term-fg-color: #272822;
+}
+
+.body {
+  margin: 0px;
+  padding: 0px;
+  /* useful for kernel-loader */
+  font-family: var(--main-font);
+  font-size: var(--main-font-size);
+}
+
+.root {
+  background-color: var(--bg-color);
+  font-family: var(--main-font);
+  font-size: var(--main-font-size);
+  height: 100%;
+  min-height: 100vh;
+  overflow: auto;
+
+  // font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  // line-height: 1.5;
+  // font-weight: 400;
+  // color: rgba(255, 255, 255, 0.87);
+  // background-color: #242424;
+  // font-synthesis: none;
+  // text-rendering: optimizeLegibility;
+  // -webkit-font-smoothing: antialiased;
+  // -moz-osx-font-smoothing: grayscale;
+}
+
+.header {
+  font-size: 0;
+
+  &[data-compact="true"] {
+    display: block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    transform: rotate(-90deg) translateX(80%) translateY(200%);
+
+    .title {
+      font-size: var(--main-font-size);
+    }
+
+    .subtitle {
+      display: none;
+    }
+
+    .basthon-logo {
+      filter: drop-shadow(0.1vw 0.1vw 0.1vw rgba(0, 0, 0, 0.5));
+      vertical-align: sub;
+      width: calc(var(--base-unit) * 7);
+      height: unset;
+    }
+  }
+}
+
+.title {
+  text-align: center;
+}
+
+.subtitle {
+  text-align: center;
+  font-size: var(--main-font-size);
+  margin-bottom: calc(0.5 * var(--base-unit));
+  color: var(--subtitle-color);
+}
+
+textarea {
+  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+  -moz-box-sizing: border-box; /* Firefox, other Gecko */
+  box-sizing: border-box; /* Opera/IE 8+ */
+}
+
+textarea:focus {
+  outline: none !important;
+}
+
+.basthon-logo {
+  height: var(--logo-height);
+  filter: drop-shadow(
+    var(--shadow-logo-size) var(--shadow-logo-size) var(--shadow-logo-size)
+      var(--shadow-color)
+  );
+  margin: 0px;
+}
+
+.container {
+  width: var(--main-container-width);
+  height: var(--main-container-height);
+  position: relative;
+  margin: auto;
+
+  &[data-compact-header] {
+    margin-top: 2vw;
+  }
+}
+
+.left-panel {
+  width: var(--left-container-width);
+  margin: auto;
+  float: left;
+
+  &[data-view-mode="reversed"] {
+    float: right;
+  }
+
+  &[data-view-mode="script-only"] {
+    width: 100%;
+  }
+
+  &[data-view-mode="terminal-only"] {
+    display: none;
+  }
+}
+
+.right-panel {
+  width: var(--right-container-width);
+  position: relative;
+  margin: auto;
+  float: right;
+  font-size: 0;
+
+  &[data-view-mode="reversed"] {
+    float: left;
+  }
+
+  &[data-view-mode="terminal-only"] {
+    width: 100%;
+  }
+
+  &[data-view-mode="script-only"] {
+    display: none;
+  }
+}
+
+%darklighted {
+  background-color: var(--term-bg-color);
+  --background: var(--term-bg-color);
+  color: var(--term-fg-color);
+  --color: var(--term-fg-color);
+}
+
+.editor {
+  @extend %darklighted;
+
+  float: none;
+  width: 100%;
+  height: var(--term-height);
+  border-radius: var(--corner-radius);
+  margin: 0px;
+  padding-top: 0px;
+}
+
+.terminal {
+  @extend %darklighted;
+
+  position: relative;
+  width: 100%;
+  height: var(--term-height);
+  float: none;
+  resize: none;
+  font-family: var(--term-font);
+  font-size: var(--term-font-size);
+  margin: 0px;
+  border-radius: var(--corner-radius);
+  border-width: 0px;
+
+  &:not([data-right-panel="terminal"]) {
+    display: none;
+  }
+}
+
+.graphics {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: var(--term-height);
+  float: none;
+  flex: initial;
+  background-color: var(--bg-color);
+  resize: none;
+  box-sizing: border-box;
+  margin-bottom: 0px;
+  padding: 0px;
+  border-style: dotted;
+  border-color: var(--term-bg-color);
+  border-radius: var(--corner-radius);
+  border-width: calc(0.25 * var(--base-unit));
+  font-size: var(--term-font-size);
+
+  &:not([data-right-panel="graphics"]) {
+    display: none;
+  }
+}
+
+.graphics > :is(img, svg) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.graphics > :is(img) {
+  object-fit: contain;
+}
+
+.graphics > .animation > .anim-controls > .anim-buttons > button {
+  padding: revert;
+  width: unset;
+}
+
+.buttons-container {
+  display: flex;
+  float: left;
+  padding: var(--base-unit) 0px 0px 0px;
+}
+
+@keyframes btn-eye-catcher-animation {
+  50% {
+    box-shadow:
+      0px 0px calc(0.5 * var(--base-unit)) calc(1 * var(--base-unit)) #ffc938,
+      0 var(--corner-radius) #999;
+  }
+}
+
+.btn-eye-catcher {
+  animation: btn-eye-catcher-animation 0.5s ease infinite;
+}
+
+.btn {
+  background-color: var(--python-blue);
+  border: none;
+  border-radius: var(--corner-radius);
+  color: white;
+  width: calc(5.5 * var(--base-unit));
+  height: calc(3.8 * var(--base-unit));
+  text-align: center;
+  text-decoration: none;
+  display: block;
+  font-size: calc(1.5 * var(--base-unit));
+  box-shadow: 0 var(--corner-radius) #999;
+  margin-right: calc(1 * var(--base-unit));
+
+  &[data-titled="true"] {
+    width: unset;
+    font-size: var(--main-font-size);
+    padding: 0 calc(1.8 * var(--base-unit));
+
+    & > svg {
+      font-size: calc(1.5 * var(--base-unit));
+      padding-right: calc(0.7 * var(--base-unit));
+    }
+  }
+
+  &:hover {
+    background-color: var(--python-yellow);
+    cursor: pointer;
+  }
+
+  &:enabled:active {
+    box-shadow: 0 calc(0.2 * var(--base-unit)) #666;
+    transform: translateY(calc(0.3 * var(--base-unit)));
+  }
+}
+
+.btn-logo {
+  /*display: block*/
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: underline;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.footer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.help {
+  font-size: calc(3 * var(--base-unit));
+
+  > svg {
+    display: block;
+    padding: 1vh;
+  }
+}
+
+:global {
+  .basthon-loader-root.basthon-loader-foot {
+    border-radius: var(--corner-radius) var(--corner-radius) 0px 0px;
+  }
+
+  .basthon-dynamic-iframe {
+    flex: 1 0 auto;
+  }
+
+  .matplotlib-toolbar-button {
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    line-height: 1;
+    text-rendering: auto;
+    font-weight: 900;
+  }
+
+  .darklighted {
+    background-color: var(--term-bg-color);
+    --background: var(--term-bg-color);
+    color: var(--term-fg-color);
+    --color: var(--term-fg-color);
+  }
+
+  // increase specificity to bypass .terminal { height: auto; }
+  div > div > .terminal {
+    height: var(--term-height);
+  }
+
+  .terminal {
+    --size: 1.333;
+  }
+
+  /* clickable script content */
+  .terminal-output > :not(.raw) div.exec-script-header:hover {
+    background-color: var(--term-script-color);
+    border-radius: var(--half-corner-radius);
+    cursor: pointer;
+  }
+
+  /* to force x-scroll */
+  .terminal-output div[style*="100%;"] {
+    overflow: unset;
+  }
+
+  .notie-container {
+    font-size: var(--notification-font-size);
+  }
+
+  .notie-background-success {
+    background-color: var(--python-yellow);
+  }
+
+  .notie-background-warning {
+    background-color: var(--python-blue);
+  }
+
+  .notie-background-error {
+    background-color: var(--python-blue);
+  }
+
+  .notie-background-info {
+    background-color: var(--python-grey);
+  }
+}

package/lib/components/terminal.d.ts

@@ -0,0 +1,5 @@
+import { FC, type HTMLAttributes } from "react";
+interface TerminalProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare const Terminal: FC<TerminalProps>;
+export { Terminal };

package/lib/components/terminal.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
+import { useAsyncEffect } from "../hooks/async-effect";
+import { useGUI } from "../hooks/gui";
+import TerminalGUI from "../gui/terminal";
+import * as styles from "./styles.module.scss";
+/**
+ * Custom hook used in terminal component.
+ */
+const useTerminal = () => {
+    const elementRef = useRef(null);
+    const termRef = useRef(null);
+    const gui = useGUI();
+    // update ref on element
+    const ref = useCallback((element) => {
+        elementRef.current = element;
+    }, []);
+    // build terminal on mount and destroy on unmount
+    useAsyncEffect(async () => {
+        const element = elementRef.current;
+        if (element == null)
+            return;
+        if (termRef.current == null) {
+            const kernel = await gui.kernelLoader.kernelAvailable();
+            const term = new TerminalGUI(element, kernel);
+            gui.setTerminal(term);
+            termRef.current = term;
+            // FIXME: needed by jquery.terminal to work with react strict mode
+            await new Promise((r) => setTimeout(r, 0));
+        }
+    }, async () => {
+        termRef.current?.destroy();
+        termRef.current = null;
+    }, []);
+    return ref;
+};
+const Terminal = (props) => {
+    const containerRef = useTerminal();
+    return _jsx("div", { ref: containerRef, className: styles.terminal, ...props });
+};
+export { Terminal };

package/lib/gui/ace.d.ts

@@ -0,0 +1,4 @@
+import ace, { Ace } from "ace-builds";
+import "ace-builds/src-noconflict/ext-language_tools";
+export { Ace };
+export default ace;

package/lib/gui/ace.js

@@ -0,0 +1,17 @@
+import ace, { Ace } from "ace-builds";
+import "ace-builds/src-noconflict/ext-language_tools";
+// importing ace-builds/esm-resolver.js bundle all languages/themes etc...
+// we explicitly load what is needed.
+/* languages */
+ace.config.setModuleLoader("ace/mode/python", () => import("ace-builds/src-noconflict/mode-python.js"));
+ace.config.setModuleLoader("ace/mode/python3", () => import("ace-builds/src-noconflict/mode-python.js"));
+ace.config.setModuleLoader("ace/mode/javascript", () => import("ace-builds/src-noconflict/mode-javascript.js"));
+ace.config.setModuleUrl("ace/mode/javascript_worker", new URL("ace-builds/src-noconflict/worker-javascript.js", import.meta.url)
+    .href);
+ace.config.setModuleLoader("ace/mode/ocaml", () => import("ace-builds/src-noconflict/mode-ocaml.js"));
+ace.config.setModuleLoader("ace/mode/sql", () => import("ace-builds/src-noconflict/mode-sql.js"));
+/* themes */
+ace.config.setModuleLoader("ace/theme/monokai", () => import("ace-builds/src-noconflict/theme-monokai.js"));
+ace.config.setModuleLoader("ace/theme/xcode", () => import("ace-builds/src-noconflict/theme-xcode.js"));
+export { Ace };
+export default ace;

package/lib/gui/editor.d.ts

@@ -0,0 +1,35 @@
+import { KernelBase } from "@basthon/kernel-base";
+import { type Language, type Theme } from "../state-manager";
+/**
+ * Wrapper class around Ace editor.
+ */
+export default class Editor {
+    private _kernel;
+    private _editor;
+    private _onSetContent?;
+    constructor(element: HTMLElement, kernel: KernelBase, onSetContent?: (_: string) => void, onChange?: () => void);
+    /**
+     * Set Ace mode from language.
+     */
+    setLanguage(language: Language): Promise<void>;
+    /**
+     * Set Ace theme from our theme.
+     */
+    setTheme(theme: Theme): Promise<void>;
+    /**
+     * Dispatch action to set content.
+     */
+    setContent(content: string): void;
+    /**
+     * Set Ace editor content.
+     */
+    setContentNoDispatch(content: string): void;
+    /**
+     * Get editor's content
+     */
+    getContent(): string;
+    /**
+     * Destroy all created by ace.
+     */
+    destroy(): void;
+}

package/lib/gui/editor.js

@@ -0,0 +1,113 @@
+import ace from "./ace";
+/**
+ * Wrapper class around Ace editor.
+ */
+export default class Editor {
+    constructor(element, kernel, onSetContent, onChange) {
+        this._kernel = kernel;
+        this._onSetContent = onSetContent;
+        this._editor = ace.edit(element);
+        this._editor.setOptions({
+            enableLiveAutocompletion: true,
+            enableBasicAutocompletion: true,
+            highlightActiveLine: false,
+            highlightSelectedWord: true,
+            fontSize: "12pt",
+        });
+        // connect onchange
+        if (onChange != null)
+            this._editor.session.on("change", () => onChange());
+        /* editor's completion */
+        // removing all completers and keeping track of local completer
+        const localCompleter = this._editor.completers[1]; // any hint to detect this dynamically?
+        this._editor.completers = [
+            {
+                getCompletions: async (editor, session, pos, prefix, callback) => {
+                    // get local completions (from editor, not namespace)
+                    let locals = [];
+                    localCompleter.getCompletions(editor, session, pos, prefix, function (_, completions) {
+                        locals = completions;
+                    });
+                    // recover editor content up to position
+                    let lines = editor.getValue().split("\n");
+                    lines = lines.slice(0, pos.row + 1);
+                    lines[lines.length - 1] = lines[lines.length - 1].slice(0, pos.column);
+                    const src = lines.join("\n");
+                    // Basthon completion
+                    const kernelCompletions = await this._kernel.complete(src);
+                    if (!kernelCompletions?.length)
+                        return;
+                    const start = kernelCompletions[1];
+                    let completions = kernelCompletions[0];
+                    // removing prefix
+                    const basthon_prefix = src.slice(start, -prefix.length);
+                    completions = completions.map((c) => c.slice(basthon_prefix.length));
+                    // union with local completions
+                    const completionsSet = new Set(completions);
+                    for (let c of locals) {
+                        c = c.value;
+                        if (!(completionsSet.has(c) || completionsSet.has(c + "(")))
+                            completionsSet.add(c);
+                    }
+                    // rendering
+                    callback(null, [...completionsSet].map((value) => ({
+                        caption: value,
+                        value: value,
+                        meta: "code",
+                        score: 100,
+                    })));
+                },
+            },
+        ];
+        this._editor.focus();
+    }
+    /**
+     * Set Ace mode from language.
+     */
+    async setLanguage(language) {
+        // some languages are not supported (e.g. xcas)
+        if (!["sql", "javascript", "python3", "ocaml"].includes(language))
+            return;
+        await new Promise((resolve) => {
+            this._editor.session.setMode(`ace/mode/${language}`, resolve);
+        });
+    }
+    /**
+     * Set Ace theme from our theme.
+     */
+    async setTheme(theme) {
+        const aceTheme = theme === "dark" ? "monokai" : "xcode";
+        await new Promise((resolve) => {
+            this._editor.setTheme(`ace/theme/${aceTheme}`, resolve);
+        });
+    }
+    /**
+     * Dispatch action to set content.
+     */
+    setContent(content) {
+        this._onSetContent?.(content);
+    }
+    /**
+     * Set Ace editor content.
+     */
+    setContentNoDispatch(content) {
+        if (content != null)
+            this._editor.setValue(content);
+        this._editor.scrollToRow(0);
+        this._editor.gotoLine(0, 0, false);
+    }
+    /**
+     * Get editor's content
+     */
+    getContent() {
+        return this._editor.getValue();
+    }
+    /**
+     * Destroy all created by ace.
+     */
+    destroy() {
+        this._editor.destroy();
+        // this is advertised by ace but conflicts with react -> disabled
+        // aceEditor.container.remove();
+    }
+}

package/lib/gui/graphics.d.ts

@@ -0,0 +1,44 @@
+import { KernelBase } from "@basthon/kernel-base";
+declare global {
+    interface Window {
+        MathJax?: any;
+    }
+}
+/**
+ * Dedicated class to manage action not managed by react.
+ */
+export default class Graphics {
+    private _elem;
+    private _onContentUpdate;
+    private _destroyCb;
+    private _handleDynamicIFrame?;
+    constructor(element: HTMLElement, kernel: KernelBase, onContentUpdate: Function);
+    /**
+     * Set the dynamic IFrame handler called on each new dynamic iframe.
+     */
+    setDynamicIFrameHandler(handler: (_: HTMLIFrameElement) => void): void;
+    /**
+     * Same as that.innerHTML = html but with script execution support.
+     */
+    setInnerHTML(html: string, runScripts?: boolean): void;
+    /**
+     * CSS transform the first child element to fit the view.
+     */
+    private fitContent;
+    /**
+     * To be called when resized.
+     */
+    onResize(): void;
+    /**
+     * Display an element from Basthon data.
+     */
+    display(data: any): Promise<void>;
+    /**
+     * Clean graphics.
+     */
+    clean(): void;
+    /**
+     * Destroy all created by graphics.
+     */
+    destroy(): void;
+}