feat: add files via file tree (stackblitz#314)

Author: AriPerkkio

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

@@ -1,26 +1,32 @@
-import { useState } from 'react';
+import { useState, type ComponentProps } from 'react';
 import FileTree from '@tutorialkit/react/core/FileTree';
 
 export default function ExampleFileTree() {
-  const [selectedFile, setSelectedFile] = useState(FILES[0]);
+  const [files, setFiles] = useState(INITIAL_FILES);
+  const [selectedFile, setSelectedFile] = useState(INITIAL_FILES[0].path);
 
   return (
     <FileTree
-      files={FILES}
+      files={files}
       hideRoot
       className="my-file-tree"
       hiddenFiles={['package-lock.json']}
       selectedFile={selectedFile}
       onFileSelect={setSelectedFile}
+      onFileChange={(event) => {
+        if (event.method === 'add') {
+          setFiles([...files, { path: event.value, type: event.type }]);
+        }
+      }}
     />
   );
 }
 
-const FILES = [
-  '/src/index.js',
-  '/src/index.html',
-  '/src/assets/logo.svg',
-  '/package-lock.json',
-  '/package.json',
-  '/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));

docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx

@@ -134,8 +134,34 @@ Defines which file should be opened in the [code editor](/guides/ui/#code-editor
 <PropertyTable inherited type="string" />
 
 ##### `editor`
-Configure whether or not the editor should be rendered. If an object is provided with `fileTree: false`, only the file tree is hidden.
-<PropertyTable inherited type="boolean | { fileTree: false }" />
+Configures options for the editor and its file tree. Editor can be hidden by providing `false`.
+Optionally you can hide just file tree by providing `fileTree: false`.
+
+File tree can be set to allow file editing from right clicks by setting `fileTree.allowEdits: true`.
+
+<PropertyTable inherited type={'Editor'} />
+
+The `Editor` type has the following shape:
+
+```ts
+type Editor =
+    | false
+    | { editor: { allowEdits: boolean } }
+
+```
+
+Example values:
+
+```yaml
+editor: false # Editor is hidden
+
+editor: # Editor is visible
+  fileTree: false # File tree is hidden
+
+editor: # Editor is visible
+  fileTree: # File tree is visible
+    allowEdits: true # User can add new files and folders from the file tree
+```
 
 ##### `previews`
 Configure which ports should be used for the previews allowing you to align the behavior with your demo application's dev server setup. If not specified, the lowest port will be used.

docs/tutorialkit.dev/src/content/docs/reference/react-components.mdx

@@ -107,12 +107,23 @@ A component to list files in a tree view.
 
 * `onFileSelect: (file: string) => void` - A callback that will be called when a file is clicked. The path of the file that was clicked will be passed as an argument.
 
+* `onFileChange: (event: FileChangeEvent) => void` - An optional callback that will be called when a new file or folder is created from the file tree's context menu. When callback is not passed, file tree does not allow adding new files.
+  ```ts
+  interface FileChangeEvent {
+    type: 'file' | 'folder';
+    method: 'add' | 'remove' | 'rename';
+    value: string;
+  }
+  ```
+
 * `hideRoot: boolean` - Whether or not to hide the root directory in the tree. Defaults to `false`.
 
 * `hiddenFiles: (string | RegExp)[]` - A list of file paths that should be hidden from the tree.
 
 * `scope?: string` - Every file path that does not start with this scope will be hidden.
 
+* `i18n?: object` - Texts for file tree's components.
+
 * `className?: string` - A class name to apply to the root element of the component.
 
 

e2e/src/content/tutorial/tests/file-tree/allow-edits-disabled/_files/first-level/file.js

@@ -0,0 +1 @@
+export default 'File in first level';

e2e/src/content/tutorial/tests/file-tree/allow-edits-disabled/_files/first-level/second-level/file.js

@@ -0,0 +1 @@
+export default 'File in second level';

e2e/src/content/tutorial/tests/file-tree/allow-edits-disabled/content.md

@@ -0,0 +1,11 @@
+---
+type: lesson
+title: Allow Edits Disabled
+previews: false
+terminal:
+  panels: terminal
+---
+
+# File Tree test - Allow Edits Disabled
+
+Option `editor.fileTree.allowEdits` has default `false` value.

e2e/src/content/tutorial/tests/file-tree/allow-edits-enabled/_files/first-level/file.js

@@ -0,0 +1 @@
+export default 'File in first level';

e2e/src/content/tutorial/tests/file-tree/allow-edits-enabled/_files/first-level/second-level/file.js

@@ -0,0 +1 @@
+export default 'File in second level';

e2e/src/content/tutorial/tests/file-tree/allow-edits-enabled/content.md

@@ -0,0 +1,12 @@
+---
+type: lesson
+title: Allow Edits Enabled
+previews: false
+editor:
+  fileTree:
+    allowEdits: true
+terminal:
+  panels: terminal
+---
+
+# File Tree test - Allow Edits Enabled