@tutorialkit-rb/react 1.5.2-rb.0.1.0

package/dist/hooks/useOutsideClick.d.ts

@@ -0,0 +1 @@
+export declare function useOutsideClick(ref: React.RefObject<HTMLDivElement>, onOutsideClick?: () => void): void;

package/dist/hooks/useOutsideClick.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+export function useOutsideClick(ref, onOutsideClick) {
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (ref.current && !ref.current.contains(event.target)) {
+                onOutsideClick?.();
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [ref]);
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * from './BootScreen.js';
+export * from './Button.js';
+export * from './Nav.js';
+export * from './Panels/EditorPanel.js';
+export * from './Panels/PreviewPanel.js';
+export * from './Panels/TerminalPanel.js';
+export * from './Panels/WorkspacePanel.js';
+export { default as Dialog } from './core/Dialog.js';
+export type * from './core/types.js';
+export * from './utils/classnames.js';

package/dist/index.js

@@ -0,0 +1,9 @@
+export * from './BootScreen.js';
+export * from './Button.js';
+export * from './Nav.js';
+export * from './Panels/EditorPanel.js';
+export * from './Panels/PreviewPanel.js';
+export * from './Panels/TerminalPanel.js';
+export * from './Panels/WorkspacePanel.js';
+export { default as Dialog } from './core/Dialog.js';
+export * from './utils/classnames.js';

package/dist/styles/cm.css

@@ -0,0 +1,100 @@
+:root {
+  --cm-backgroundColor: var(--tk-elements-editor-backgroundColor, var(--tk-elements-app-backgroundColor));
+  --cm-textColor: var(--tk-elements-editor-textColor, var(--tk-text-primary));
+
+  /* Gutter */
+  --cm-gutter-backgroundColor: var(--tk-elements-editor-gutter-backgroundColor, var(--cm-backgroundColor));
+  --cm-gutter-textColor: var(--tk-elements-editor-gutter-textColor, var(--tk-text-secondary));
+  --cm-gutter-activeLineTextColor: var(--tk-elements-editor-gutter-activeLineTextColor, var(--cm-gutter-textColor));
+
+  /* Fold Gutter */
+  --cm-foldGutter-textColor: var(--tk-elements-editor-foldGutter-textColor, var(--cm-gutter-textColor));
+  --cm-foldGutter-textColorHover: var(--tk-elements-editor-foldGutter-textColorHover, var(--cm-gutter-textColor));
+
+  /* Active Line */
+  --cm-activeLineBackgroundColor: var(--tk-elements-editor-activeLineBackgroundColor, rgb(224 231 235 / 30%));
+
+  /* Cursor */
+  --cm-cursor-width: 2px;
+  --cm-cursor-backgroundColor: var(--tk-elements-editor-cursorColor, var(--tk-text-primary));
+
+  /* Matching Brackets */
+  --cm-matching-bracket: var(--tk-elements-editor-matchingBracketBackgroundColor, rgb(50 140 130 / 0.3));
+
+  /* Selection */
+  --cm-selection-backgroundColorFocused: var(--tk-elements-editor-selection-backgroundColor, #42b4ff);
+  --cm-selection-backgroundOpacityFocused: var(--tk-elements-editor-selection-backgroundOpacity, 0.3);
+  --cm-selection-backgroundColorBlured: var(--tk-elements-editor-selection-inactiveBackgroundColor, #c9e9ff);
+  --cm-selection-backgroundOpacityBlured: var(--tk-elements-editor-selection-inactiveBackgroundOpacity, 0.3);
+
+  /* Panels */
+  --cm-panels-borderColor: var(--tk-elements-editor-panels-borderColor, var(--tk-elements-app-borderColor));
+
+  /* Search */
+  --cm-search-backgroundColor: var(--tk-elements-editor-search-backgroundColor, var(--cm-backgroundColor));
+  --cm-search-textColor: var(--tk-elements-editor-search-textColor, var(--tk-elements-app-textColor));
+  --cm-search-closeButton-backgroundColor: var(--tk-elements-editor-search-closeButton-backgroundColor, transparent);
+  --cm-search-closeButton-backgroundColorHover: var(
+    --tk-elements-editor-search-closeButton-backgroundColorHover,
+    var(--tk-background-secondary)
+  );
+  --cm-search-closeButton-textColor: var(--tk-elements-editor-search-closeButton-textColor, var(--tk-text-secondary));
+  --cm-search-closeButton-textColorHover: var(
+    --tk-elements-editor-search-closeButton-textColorHover,
+    var(--tk-text-primary)
+  );
+  --cm-search-button-backgroundColor: var(
+    --tk-elements-editor-search-button-backgroundColor,
+    var(--tk-background-secondary)
+  );
+  --cm-search-button-backgroundColorHover: var(
+    --tk-elements-editor-search-button-backgroundColorHover,
+    var(--tk-background-active)
+  );
+  --cm-search-button-textColor: var(--tk-elements-editor-search-button-textColor, var(--tk-text-secondary));
+  --cm-search-button-textColorHover: var(--tk-elements-editor-search-button-textColorHover, var(--tk-text-primary));
+  --cm-search-button-borderColor: var(--tk-elements-editor-search-button-borderColor, transparent);
+  --cm-search-button-borderColorHover: var(
+    --tk-elements-editor-search-button-borderColorHover,
+    var(--cm-search-button-borderColor)
+  );
+  --cm-search-button-borderColorFocused: var(
+    --tk-elements-editor-search-button-borderColorFocused,
+    var(--tk-border-accent)
+  );
+  --cm-search-input-backgroundColor: var(
+    --tk-elements-editor-search-input-backgroundColor,
+    var(--tk-background-primary)
+  );
+  --cm-search-input-borderColor: var(--tk-elements-editor-search-input-borderColor, var(--tk-elements-app-borderColor));
+  --cm-search-input-borderColorFocused: var(
+    --tk-elements-editor-search-input-borderColorFocused,
+    var(--tk-border-accent)
+  );
+
+  /* Tooltip */
+  --cm-tooltip-backgroundColor: var(
+    --tk-elements-editor-tooltip-backgroundColor,
+    var(--tk-elements-app-backgroundColor)
+  );
+  --cm-tooltip-textColor: var(--tk-elements-editor-tooltip-textColor, var(--tk-text-primary));
+  --cm-tooltip-backgroundColorSelected: var(
+    --tk-elements-editor-tooltip-backgroundColorSelected,
+    var(--tk-background-accent)
+  );
+  --cm-tooltip-textColorSelected: var(--tk-elements-editor-tooltip-textColorSelected, var(--tk-text-primary));
+  --cm-tooltip-borderColor: var(--tk-elements-editor-tooltip-borderColor, var(--tk-elements-app-borderColor));
+}
+
+html[data-theme='light'] {
+  --tk-elements-editor-gutter-textColor: #237893;
+  --tk-elements-editor-gutter-activeLineTextColor: var(--tk-text-primary);
+  --tk-elements-editor-foldGutter-textColorHover: var(--tk-text-primary);
+}
+
+html[data-theme='dark'] {
+  --tk-elements-editor-gutter-activeLineTextColor: var(--tk-text-primary);
+  --tk-elements-editor-selection-backgroundOpacityBlured: 0.1;
+  --tk-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 50%);
+  --tk-elements-editor-foldGutter-textColorHover: var(--tk-text-primary);
+}

package/dist/styles/nav.module.css

@@ -0,0 +1,108 @@
+.AccordionTrigger[data-state='open'] .AccordionTriggerIcon {
+  --un-rotate: 90deg;
+}
+
+.AccordionTrigger {
+  --at-apply: text-tk-elements-breadcrumbs-dropdown-accordionTextColor;
+}
+
+.AccordionTrigger.AccordionTriggerActive {
+  --at-apply: text-tk-elements-breadcrumbs-dropdown-accordionTextColorSelected;
+}
+
+.AccordionTrigger:hover {
+  --at-apply: text-tk-elements-breadcrumbs-dropdown-accordionTextColorHover;
+}
+
+.AccordionTrigger .AccordionTriggerIcon {
+  --at-apply: transition-color duration-100 text-tk-elements-breadcrumbs-dropdown-accordionIconColor;
+}
+
+.AccordionTrigger.AccordionTriggerActive .AccordionTriggerIcon {
+  --at-apply: text-tk-elements-breadcrumbs-dropdown-accordionIconColorSelected;
+}
+
+.AccordionTrigger:hover .AccordionTriggerIcon {
+  --at-apply: text-tk-elements-breadcrumbs-dropdown-accordionIconColorHover;
+}
+
+.AccordionContent {
+  overflow: hidden;
+}
+
+.AccordionContent[data-state='open'] {
+  animation: slideDown 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.AccordionContent[data-state='closed'] {
+  animation: slideUp 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.NavContainer:hover {
+  --at-apply: transition-theme border-tk-elements-breadcrumbs-toggleButton-borderColorHover;
+}
+
+.NavContainer[data-state='closed']:not(:hover) {
+  --at-apply: transition-theme border-tk-elements-breadcrumbs-toggleButton-borderColor;
+}
+
+.NavContainer[data-state='open']:not(:hover) {
+  --at-apply: transition-theme border-tk-elements-breadcrumbs-toggleButton-borderColorSelected;
+}
+
+.NavContainer .ToggleButton:hover {
+  --at-apply: transition-theme bg-tk-elements-breadcrumbs-toggleButton-backgroundColorHover
+    text-tk-elements-breadcrumbs-toggleButton-textColorHover;
+}
+
+.NavContainer[data-state='closed'] .ToggleButton:not(:hover) {
+  --at-apply: transition-theme bg-tk-elements-breadcrumbs-toggleButton-backgroundColor
+    text-tk-elements-breadcrumbs-toggleButton-textColor;
+}
+
+.NavContainer[data-state='open'] .ToggleButton:not(:hover) {
+  --at-apply: transition-theme bg-tk-elements-breadcrumbs-toggleButton-backgroundColorSelected
+    text-tk-elements-breadcrumbs-toggleButton-textColorSelected;
+}
+
+.NavContainer[data-state='closed'] .ToggleButton:not(:hover) .Divider {
+  --at-apply: text-tk-elements-breadcrumbs-toggleButton-textDividerColor;
+}
+
+.NavContainer[data-state='open'] .ToggleButton:not(:hover) .Divider {
+  --at-apply: text-tk-elements-breadcrumbs-toggleButton-textDividerColorSelected;
+}
+
+.NavContainer .ToggleButton:hover .Divider {
+  --at-apply: text-tk-elements-breadcrumbs-toggleButton-textDividerColorHover;
+}
+
+.ToggleButton .ToggleButtonIcon {
+  --at-apply: text-tk-elements-breadcrumbs-toggleButton-iconColor;
+}
+
+.ToggleButton:hover .ToggleButtonIcon {
+  --at-apply: text-tk-elements-breadcrumbs-toggleButton-iconColorHover;
+}
+
+.NavContainer[data-state='open'] .ToggleButton:not(:hover) .ToggleButtonIcon {
+  --at-apply: text-tk-elements-breadcrumbs-toggleButton-iconColorSelected;
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/dist/styles/resize-panel.module.css

@@ -0,0 +1,28 @@
+.PanelResizeHandle {
+  position: relative;
+}
+
+.PanelResizeHandle[data-panel-group-direction='horizontal']:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -5px;
+  right: -5px;
+  z-index: 999;
+}
+
+.PanelResizeHandle[data-panel-group-direction='vertical']:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -5px;
+  bottom: -5px;
+  z-index: 999;
+}
+
+.PanelResizeHandle[data-resize-handle-state='hover']:after,
+.PanelResizeHandle[data-resize-handle-state='drag']:after {
+  background-color: #8882;
+}

package/dist/styles/terminal.css

@@ -0,0 +1,8 @@
+.xterm {
+  --at-apply: h-full;
+  --at-apply: p-3;
+}
+
+.xterm .xterm-viewport {
+  --at-apply: transition-theme;
+}

package/dist/utils/classnames.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2018 Jed Watson.
+ * Licensed under the MIT License (MIT), see:
+ *
+ * @link http://jedwatson.github.io/classnames
+ */
+type ClassNamesArg = undefined | false | string | Record<string, boolean> | ClassNamesArg[];
+/**
+ * A simple JavaScript utility for conditionally joining classNames together.
+ *
+ * @param args A series of classes or object with key that are class and values
+ * that are interpreted as boolean to decide whether or not the class
+ * should be included in the final class.
+ */
+export declare function classNames(...args: ClassNamesArg[]): string;
+export {};

package/dist/utils/classnames.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2018 Jed Watson.
+ * Licensed under the MIT License (MIT), see:
+ *
+ * @link http://jedwatson.github.io/classnames
+ */
+/**
+ * A simple JavaScript utility for conditionally joining classNames together.
+ *
+ * @param args A series of classes or object with key that are class and values
+ * that are interpreted as boolean to decide whether or not the class
+ * should be included in the final class.
+ */
+export function classNames(...args) {
+    let classes = '';
+    for (const arg of args) {
+        classes = appendClass(classes, parseValue(arg));
+    }
+    return classes;
+}
+function parseValue(arg) {
+    if (typeof arg === 'string' || typeof arg === 'number') {
+        return arg;
+    }
+    if (typeof arg !== 'object') {
+        return '';
+    }
+    if (Array.isArray(arg)) {
+        return classNames(...arg);
+    }
+    let classes = '';
+    for (const key in arg) {
+        if (arg[key]) {
+            classes = appendClass(classes, key);
+        }
+    }
+    return classes;
+}
+function appendClass(value, newClass) {
+    if (!newClass) {
+        return value;
+    }
+    if (value) {
+        return value + ' ' + newClass;
+    }
+    return value + newClass;
+}

package/dist/utils/debounce.d.ts

@@ -0,0 +1 @@
+export declare function debounce<Args extends any[]>(fn: (...args: Args) => void, delay?: number): (...args: Args) => void;

package/dist/utils/debounce.js

@@ -0,0 +1,13 @@
+export function debounce(fn, delay = 100) {
+    if (delay === 0) {
+        return fn;
+    }
+    let timer;
+    return function (...args) {
+        const context = this;
+        clearTimeout(timer);
+        timer = window.setTimeout(() => {
+            fn.apply(context, args);
+        }, delay);
+    };
+}

package/dist/utils/mobile.d.ts

@@ -0,0 +1 @@
+export declare function isMobile(): boolean;

package/dist/utils/mobile.js

@@ -0,0 +1,4 @@
+export function isMobile() {
+    // we use sm: as the breakpoint for mobile. It's currently set to 640px
+    return globalThis.innerWidth < 640;
+}

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@tutorialkit-rb/react",
+  "version": "1.5.2-rb.0.1.0",
+  "description": "TutorialKit's React components and utilities",
+  "author": "StackBlitz Inc.",
+  "type": "module",
+  "bugs": "https://github.com/stackblitz/tutorialkit/issues",
+  "homepage": "https://github.com/stackblitz/tutorialkit",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Bakaface/tutorialkit.rb",
+    "directory": "packages/react"
+  },
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./core": {
+      "import": {
+        "types": "./dist/core.d.ts",
+        "default": "./dist/core.js"
+      }
+    },
+    "./core/CodeMirrorEditor": {
+      "import": {
+        "types": "./dist/core/CodeMirrorEditor/index.d.ts",
+        "default": "./dist/core/CodeMirrorEditor/index.js"
+      }
+    },
+    "./core/FileTree": {
+      "import": {
+        "types": "./dist/core/FileTree.d.ts",
+        "default": "./dist/core/FileTree.js"
+      }
+    },
+    "./core/Terminal": {
+      "import": {
+        "types": "./dist/core/Terminal/index.d.ts",
+        "default": "./dist/core/Terminal/index.js"
+      }
+    },
+    "./dialog": {
+      "import": {
+        "types": "./dist/core/Dialog.d.ts",
+        "default": "./dist/core/Dialog.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node ./scripts/build.js",
+    "dev": "node ./scripts/build.js --watch",
+    "test": "vitest --passWithNoTests"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.16.3",
+    "@codemirror/commands": "^6.6.0",
+    "@codemirror/legacy-modes": "^6.5.1",
+    "@codemirror/lang-css": "^6.2.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-markdown": "^6.2.5",
+    "@codemirror/lang-sass": "^6.0.2",
+    "@codemirror/lang-vue": "^0.1.3",
+    "@codemirror/lang-wast": "^6.0.2",
+    "@codemirror/lang-yaml": "^6.1.1",
+    "@codemirror/language": "^6.10.2",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.28.1",
+    "@lezer/common": "^1.0.0",
+    "@lezer/highlight": "^1.2.0",
+    "@lezer/javascript": "^1.2.0",
+    "@lezer/lr": "^1.0.0",
+    "@nanostores/react": "0.7.2",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-context-menu": "^2.2.1",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@replit/codemirror-lang-svelte": "^6.0.0",
+    "@tutorialkit-rb/runtime": "1.5.2",
+    "@tutorialkit-rb/theme": "1.5.2",
+    "@webcontainer/api": "1.5.1",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/xterm": "^5.5.0",
+    "codemirror": "^6.0.1",
+    "framer-motion": "^11.2.11",
+    "nanostores": "^0.10.3",
+    "picomatch": "^4.0.2",
+    "react": "^18.3.1",
+    "react-resizable-panels": "^2.0.19"
+  },
+  "devDependencies": {
+    "@codemirror/search": "^6.5.6",
+    "@tutorialkit-rb/types": "1.5.2",
+    "@types/picomatch": "^3.0.1",
+    "@types/react": "^18.3.3",
+    "chokidar": "3.6.0",
+    "execa": "^9.2.0",
+    "typescript": "^5.4.5",
+    "vitest": "^3.0.5"
+  },
+  "keywords": [
+    "ruby",
+    "rails",
+    "wasm"
+  ]
+}