feat: make core react components easily accessible (#104)

Author: Nemikolh

packages/components/react/package.json

@@ -8,7 +8,36 @@
   "license": "MIT",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./dist/index.js"
+    ".": {
+      "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"
+      }
+    }
   },
   "files": [
     "dist"

packages/components/react/src/Panels/EditorPanel.tsx

@@ -5,10 +5,10 @@ import {
   type EditorDocument,
   type OnChangeCallback as OnEditorChange,
   type OnScrollCallback as OnEditorScroll,
-} from '../CodeMirrorEditor/index.js';
-import { FileTree } from '../FileTree.js';
+} from '../core/CodeMirrorEditor/index.js';
+import { FileTree } from '../core/FileTree.js';
 import resizePanelStyles from '../styles/resize-panel.module.css';
-import type { Theme } from '../types.js';
+import type { Theme } from '../core/types.js';
 
 const DEFAULT_FILE_TREE_SIZE = 25;
 
@@ -88,6 +88,7 @@ export function EditorPanel({
         <FileTab editorDocument={editorDocument} onHelpClick={onHelpClick} helpAction={helpAction} />
         <div className="h-full flex-1 overflow-hidden">
           <CodeMirrorEditor
+            className="h-full"
             theme={theme}
             id={id}
             doc={editorDocument}

packages/components/react/src/Panels/TerminalPanel.tsx

@@ -2,10 +2,10 @@ import { useStore } from '@nanostores/react';
 import type { TutorialStore } from '@tutorialkit/runtime';
 import type { TerminalPanelType } from '@tutorialkit/types';
 import { lazy, Suspense, useEffect, useRef, useState } from 'react';
-import type { TerminalRef } from '../Terminal/index.js';
+import type { TerminalRef } from '../core/Terminal/index.js';
 import { classNames } from '../utils/classnames.js';
 
-const Terminal = lazy(() => import('../Terminal/index.js'));
+const Terminal = lazy(() => import('../core/Terminal/index.js'));
 
 interface TerminalPanelProps {
   theme: 'dark' | 'light';
@@ -93,7 +93,7 @@ export function TerminalPanel({ theme, tutorialStore }: TerminalPanelProps) {
             {terminalConfig.panels.map(({ id, type }, index) => (
               <Terminal
                 key={id}
-                className={tabIndex !== index ? 'hidden' : ''}
+                className={tabIndex !== index ? 'hidden h-full' : 'h-full'}
                 theme={theme}
                 readonly={type === 'output'}
                 ref={(ref) => (terminalRefs.current[index] = ref!)}

packages/components/react/src/Panels/WorkspacePanel.tsx

@@ -5,9 +5,9 @@ import { Panel, PanelGroup, PanelResizeHandle, type ImperativePanelHandle } from
 import type {
   OnChangeCallback as OnEditorChange,
   OnScrollCallback as OnEditorScroll,
-} from '../CodeMirrorEditor/index.js';
+} from '../core/CodeMirrorEditor/index.js';
 import resizePanelStyles from '../styles/resize-panel.module.css';
-import type { Theme } from '../types.js';
+import type { Theme } from '../core/types.js';
 import { EditorPanel } from './EditorPanel.js';
 import { PreviewPanel, type ImperativePreviewHandle } from './PreviewPanel.js';
 import { TerminalPanel } from './TerminalPanel.js';

packages/components/react/src/core.ts

@@ -0,0 +1,10 @@
+export {
+  CodeMirrorEditor,
+  type EditorDocument,
+  type EditorUpdate,
+  type OnChangeCallback,
+  type OnScrollCallback,
+  type ScrollPosition,
+} from './core/CodeMirrorEditor/index.js';
+export { FileTree } from './core/FileTree.js';
+export { Terminal, type TerminalRef, type TerminalProps } from './core/Terminal/index.js';

packages/components/react/src/CodeMirrorEditor/BinaryContent.tsx renamed to packages/components/react/src/core/CodeMirrorEditor/BinaryContent.tsx

@@ -1,7 +1,7 @@
 import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { Compartment, type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import '../styles/cm.css';
+import '../../styles/cm.css';
 import type { Theme } from '../types.js';
 import { vscodeDarkTheme } from './themes/vscode-dark.js';
 

packages/components/react/src/CodeMirrorEditor/cm-theme.ts renamed to packages/components/react/src/core/CodeMirrorEditor/cm-theme.ts

@@ -14,8 +14,9 @@ import {
   scrollPastEnd,
 } from '@codemirror/view';
 import { useEffect, useRef, useState, type MutableRefObject } from 'react';
+import { classNames } from '../../utils/classnames.js';
+import { debounce } from '../../utils/debounce.js';
 import type { Theme } from '../types.js';
-import { debounce } from '../utils/debounce.js';
 import { BinaryContent } from './BinaryContent.js';
 import { getTheme, reconfigureTheme } from './cm-theme.js';
 import { indentKeyBinding } from './indent.js';
@@ -46,14 +47,15 @@ export type OnChangeCallback = (update: EditorUpdate) => void;
 export type OnScrollCallback = (position: ScrollPosition) => void;
 
 interface Props {
+  theme: Theme;
   id?: unknown;
   doc?: EditorDocument;
   debounceChange?: number;
   debounceScroll?: number;
   autoFocusOnDocumentChange?: boolean;
   onChange?: OnChangeCallback;
   onScroll?: OnScrollCallback;
-  theme: Theme;
+  className?: string;
 }
 
 type EditorStates = Map<string, EditorState>;
@@ -67,6 +69,7 @@ export function CodeMirrorEditor({
   onScroll,
   onChange,
   theme,
+  className = '',
 }: Props) {
   const [language] = useState(new Compartment());
   const [readOnly] = useState(new Compartment());
@@ -176,13 +179,15 @@ export function CodeMirrorEditor({
   }, [doc?.value, doc?.filePath, doc?.loading]);
 
   return (
-    <div className="h-full relative">
+    <div className={classNames('relative', className)}>
       {isBinaryFile && <BinaryContent />}
       <div className="h-full overflow-hidden" ref={containerRef} />
     </div>
   );
 }
 
+export default CodeMirrorEditor;
+
 CodeMirrorEditor.displayName = 'CodeMirrorEditor';
 
 function newEditorState(

packages/components/react/src/CodeMirrorEditor/indent.ts renamed to packages/components/react/src/core/CodeMirrorEditor/indent.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState, type ReactNode } from 'react';
-import { classNames } from './utils/classnames.js';
+import { classNames } from '../utils/classnames.js';
 
 const NODE_PADDING_LEFT = 12;
 const DEFAULT_HIDDEN_FILES = [/\/node_modules\//];
@@ -102,6 +102,8 @@ export function FileTree({ files, onFileSelect, selectedFile, hideRoot, scope, h
   );
 }
 
+export default FileTree;
+
 interface FolderProps {
   folder: FolderNode;
   collapsed: boolean;

packages/components/react/src/CodeMirrorEditor/index.tsx renamed to packages/components/react/src/core/CodeMirrorEditor/index.tsx

@@ -9,16 +9,16 @@ export interface TerminalRef {
   reloadStyles: () => void;
 }
 
-export interface Props {
+export interface TerminalProps {
   theme: 'dark' | 'light';
   className?: string;
   readonly?: boolean;
   onTerminalReady?: (terminal: XTerm) => void;
   onTerminalResize?: (cols: number, rows: number) => void;
 }
 
-const Terminal = forwardRef<TerminalRef, Props>(
-  ({ theme, className, readonly = true, onTerminalReady, onTerminalResize }, ref) => {
+export const Terminal = forwardRef<TerminalRef, TerminalProps>(
+  ({ theme, className = '', readonly = true, onTerminalReady, onTerminalResize }, ref) => {
     const divRef = useRef<HTMLDivElement>(null);
     const terminalRef = useRef<XTerm>();
 
@@ -78,7 +78,7 @@ const Terminal = forwardRef<TerminalRef, Props>(
       };
     }, []);
 
-    return <div className={`h-full ${className}`} ref={divRef} />;
+    return <div className={className} ref={divRef} />;
   },
 );
 

packages/components/react/src/CodeMirrorEditor/languages.ts renamed to packages/components/react/src/core/CodeMirrorEditor/languages.ts

@@ -1,10 +1,8 @@
 export * from './BootScreen.js';
-export * from './CodeMirrorEditor/index.js';
-export * from './FileTree.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 type * from './types.js';
+export type * from './core/types.js';
 export * from './utils/classnames.js';