feat: make core react components easily accessible

Author: Nemikolh

packages/components/react/package.json

@@ -8,11 +8,31 @@
   "license": "MIT",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./dist/index.js"
+    ".": "./dist/index.js",
+    "./core": "./dist/core.js",
+    "./core/CodeMirrorEditor": "./dist/core/CodeMirrorEditor/index.js",
+    "./core/FileTree": "./dist/core/FileTree.js",
+    "./core/Terminal": "./dist/core/Terminal/index.js"
   },
   "files": [
     "dist"
   ],
+  "typesVersions": {
+    "*": {
+      "core": [
+        "dist/core.d.ts"
+      ],
+      "./core/CodeMirrorEditor": [
+        "dist/core/CodeMirrorEditor/index.d.ts"
+      ],
+      "./core/FileTree": [
+        "dist/core/FileTree.d.ts"
+      ],
+      "./core/Terminal": [
+        "dist/core/Terminal/index.d.ts"
+      ]
+    }
+  },
   "scripts": {
     "build": "node ./scripts/build.js"
   },

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,5 @@
+import Terminal, { type Props as TerminalProps, type TerminalRef } from './core/Terminal/index.js';
+
+export * from './core/CodeMirrorEditor/index.js';
+export * from './core/FileTree.js';
+export { Terminal, type TerminalProps, type TerminalRef };

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

@@ -15,7 +15,7 @@ import {
 } from '@codemirror/view';
 import { useEffect, useRef, useState, type MutableRefObject } from 'react';
 import type { Theme } from '../types.js';
-import { debounce } from '../utils/debounce.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 +46,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 +68,7 @@ export function CodeMirrorEditor({
   onScroll,
   onChange,
   theme,
+  className = '',
 }: Props) {
   const [language] = useState(new Compartment());
   const [readOnly] = useState(new Compartment());
@@ -176,7 +178,7 @@ export function CodeMirrorEditor({
   }, [doc]);
 
   return (
-    <div className="h-full relative">
+    <div className={`relative ${className}`}>
       {isBinaryFile && <BinaryContent />}
       <div className="h-full overflow-hidden" ref={containerRef} />
     </div>

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\//];

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

@@ -18,7 +18,7 @@ export interface Props {
 }
 
 const Terminal = forwardRef<TerminalRef, Props>(
-  ({ theme, className, readonly = true, onTerminalReady, onTerminalResize }, ref) => {
+  ({ 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';