feat: add files via file tree

docs/tutorialkit.dev/src/components/react-examples/ExampleFileTree.tsx

@@ -1,9 +1,9 @@
-import { useState } from 'react';
+import { useState, type ComponentProps } from 'react';
 import FileTree from '@tutorialkit/react/core/FileTree';
 
 export default function ExampleFileTree() {
   const [files, setFiles] = useState(INITIAL_FILES);
-  const [selectedFile, setSelectedFile] = useState(INITIAL_FILES[0]);
+  const [selectedFile, setSelectedFile] = useState(INITIAL_FILES[0].path);
 
   return (
     <FileTree
@@ -15,18 +15,18 @@ export default function ExampleFileTree() {
       onFileSelect={setSelectedFile}
       onFileChange={(event) => {
         if (event.method === 'ADD') {
-          setFiles([...files, event.value].sort());
+          setFiles([...files, { path: event.value, type: event.type }].sort());
         }
       }}
     />
   );
 }
 
-const INITIAL_FILES = [
-  '/package-lock.json',
-  '/package.json',
-  '/src/assets/logo.svg',
-  '/src/index.html',
-  '/src/index.js',
-  '/vite.config.js',
+const INITIAL_FILES: ComponentProps<typeof FileTree>['files'] = [
+  { path: '/package-lock.json', type: 'FILE' },
+  { path: '/package.json', type: 'FILE' },
+  { path: '/src/assets/logo.svg', type: 'FILE' },
+  { path: '/src/index.html', type: 'FILE' },
+  { path: '/src/index.js', type: 'FILE' },
+  { path: '/vite.config.js', type: 'FILE' },
 ];

docs/tutorialkit.dev/src/components/react-examples/ExampleSimpleEditor.tsx

@@ -227,7 +227,7 @@ const FILES: Record<string, EditorDocument> = {
   },
 };
 
-const FILE_PATHS = Object.keys(FILES);
+const FILE_PATHS = Object.keys(FILES).map((path) => ({ path, type: 'FILE' }) as const);
 
 function stripIndent(string: string) {
   const indent = minIndent(string.slice(1));

packages/react/src/Panels/EditorPanel.tsx

@@ -17,7 +17,7 @@ const DEFAULT_FILE_TREE_SIZE = 25;
 interface Props {
   theme: Theme;
   id: unknown;
-  files: string[];
+  files: ComponentProps<typeof FileTree>['files'];
   i18n: I18n;
   hideRoot?: boolean;
   fileTreeScope?: string;

packages/react/src/core/ContextMenu.tsx

@@ -48,13 +48,11 @@ export function ContextMenu({
 
   function onFileNameEnd(event: React.KeyboardEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement>) {
     const name = event.currentTarget.value;
-    const isFile = state === 'ADD_FILE';
 
-    // files must contain extension
-    if (name && (!isFile || name.includes('.'))) {
+    if (name) {
       onFileChange?.({
         value: `${directory}/${name}`,
-        type: isFile ? 'FILE' : 'FOLDER',
+        type: state === 'ADD_FILE' ? 'FILE' : 'FOLDER',
         method: 'ADD',
       });
     }

packages/react/src/core/FileTree.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useMemo, useState, type ComponentProps, type ReactNode } from 'react';
+import type { File } from '@tutorialkit/types';
 import { ContextMenu } from './ContextMenu.js';
 import { classNames } from '../utils/classnames.js';
 
 const NODE_PADDING_LEFT = 12;
 const DEFAULT_HIDDEN_FILES = [/\/node_modules\//];
 
 interface Props {
-  files: string[];
+  files: File[];
   selectedFile?: string;
   onFileSelect?: (filePath: string) => void;
   onFileChange?: ComponentProps<typeof ContextMenu>['onFileChange'];
@@ -86,10 +87,10 @@ export function FileTree({
   }
 
   return (
-    <div className={classNames(className, 'h-100% transition-theme bg-tk-elements-fileTree-backgroundColor')}>
+    <div className={classNames(className, 'h-full transition-theme bg-tk-elements-fileTree-backgroundColor')}>
       {filteredFileList.map((fileOrFolder) => {
         switch (fileOrFolder.kind) {
-          case 'file': {
+          case 'FILE': {
             return (
               <File
                 key={fileOrFolder.id}
@@ -99,7 +100,7 @@ export function FileTree({
               />
             );
           }
-          case 'folder': {
+          case 'FOLDER': {
             return (
               <Folder
                 key={fileOrFolder.id}
@@ -120,7 +121,7 @@ export function FileTree({
         style={getDepthStyle(0)}
         directory=""
         onFileChange={onFileChange}
-        triggerProps={{ className: 'h-100%', 'data-testid': 'file-tree-root-context-menu' }}
+        triggerProps={{ className: 'h-full', 'data-testid': 'file-tree-root-context-menu' }}
       />
     </div>
   );
@@ -215,18 +216,19 @@ interface BaseNode {
   depth: number;
   name: string;
   fullPath: string;
+  kind: File['type'];
 }
 
 interface FileNode extends BaseNode {
-  kind: 'file';
+  kind: 'FILE';
 }
 
 interface FolderNode extends BaseNode {
-  kind: 'folder';
+  kind: 'FOLDER';
 }
 
 function buildFileList(
-  files: string[],
+  files: File[],
   hideRoot: boolean,
   scope: string | undefined,
   hiddenFiles: Array<string | RegExp>,
@@ -236,18 +238,18 @@ function buildFileList(
   const defaultDepth = hideRoot ? 0 : 1;
 
   if (!hideRoot) {
-    fileList.push({ kind: 'folder', name: '/', fullPath: '/', depth: 0, id: 0 });
+    fileList.push({ kind: 'FOLDER', name: '/', fullPath: '/', depth: 0, id: 0 });
   }
 
-  for (const filePath of files) {
-    if (scope && !filePath.startsWith(scope)) {
+  for (const file of files) {
+    if (scope && !file.path.startsWith(scope)) {
       continue;
     }
 
-    const segments = filePath.split('/').filter((s) => s);
+    const segments = file.path.split('/').filter((s) => s);
     const fileName = segments.at(-1);
 
-    if (!fileName || isHiddenFile(filePath, fileName, hiddenFiles)) {
+    if (!fileName || isHiddenFile(file.path, fileName, hiddenFiles)) {
       continue;
     }
 
@@ -259,7 +261,7 @@ function buildFileList(
 
       if (depth === segments.length - 1) {
         fileList.push({
-          kind: name.includes('.') ? 'file' : 'folder',
+          kind: file.type,
           id: fileList.length,
           name,
           fullPath,
@@ -269,7 +271,7 @@ function buildFileList(
         folderPaths.add(fullPath);
 
         fileList.push({
-          kind: 'folder',
+          kind: 'FOLDER',
           id: fileList.length,
           name,
           fullPath,

packages/runtime/src/store/editor.spec.ts

@@ -0,0 +1,102 @@
+import { expect, test } from 'vitest';
+
+import { EditorStore } from './editor.js';
+import type { File } from '@tutorialkit/types';
+
+test('initial files are sorted', () => {
+  const store = new EditorStore();
+  store.setDocuments({
+    'test/math.test.ts': '',
+    '.gitignore': '',
+    'src/math.ts': '',
+    'src/geometry.ts': '',
+  });
+
+  expect(store.files.get().map(toFilename)).toMatchInlineSnapshot(`
+    [
+      "src/geometry.ts",
+      "src/math.ts",
+      "test/math.test.ts",
+      ".gitignore",
+    ]
+  `);
+});
+
+test('added files are sorted', () => {
+  const store = new EditorStore();
+  store.setDocuments({
+    'test/math.test.ts': '',
+    '.gitignore': '',
+    'src/math.ts': '',
+  });
+
+  store.addFileOrFolder({ path: 'something.ts', type: 'FILE' });
+  store.addFileOrFolder({ path: 'another.css', type: 'FILE' });
+  store.addFileOrFolder({ path: 'no-extension', type: 'FILE' });
+
+  expect(store.files.get().map(toFilename)).toMatchInlineSnapshot(`
+    [
+      "src/math.ts",
+      "test/math.test.ts",
+      ".gitignore",
+      "another.css",
+      "no-extension",
+      "something.ts",
+    ]
+  `);
+});
+
+test('added folders are sorted', () => {
+  const store = new EditorStore();
+  store.setDocuments({
+    'test/math.test.ts': '',
+    '.gitignore': '',
+    'src/math.ts': '',
+  });
+
+  store.addFileOrFolder({ path: 'src/components', type: 'FOLDER' });
+  store.addFileOrFolder({ path: 'src/utils', type: 'FOLDER' });
+  store.addFileOrFolder({ path: 'test/unit', type: 'FOLDER' });
+  store.addFileOrFolder({ path: 'e2e', type: 'FOLDER' });
+
+  expect(store.files.get().map(toFilename)).toMatchInlineSnapshot(`
+    [
+      "e2e",
+      "src/components",
+      "src/utils",
+      "src/math.ts",
+      "test/unit",
+      "test/math.test.ts",
+      ".gitignore",
+    ]
+  `);
+});
+
+test('empty directories are removed when new content is added', () => {
+  const store = new EditorStore();
+  store.setDocuments({
+    'src/index.ts': '',
+  });
+
+  store.addFileOrFolder({ path: 'src/components', type: 'FOLDER' });
+
+  expect(store.files.get().map(toFilename)).toMatchInlineSnapshot(`
+    [
+      "src/components",
+      "src/index.ts",
+    ]
+  `);
+
+  store.addFileOrFolder({ path: 'src/components/FileTree', type: 'FOLDER' });
+
+  expect(store.files.get().map(toFilename)).toMatchInlineSnapshot(`
+    [
+      "src/components/FileTree",
+      "src/index.ts",
+    ]
+  `);
+});
+
+function toFilename(file: File) {
+  return file.path;
+}