Add the possibility to create File inside the SandpackFileExplorer component

[BeatlesBOB]

Possibility to create File inside the SandpackFileExplorer component #913

Packages affected

• sandpack-client
• sandpack-react

What is this feature?

On purpose to have all the feature as a real IDE I was hopping if you can add the possibility to create file inside SandpackFileExplorer

How would your idea work?

Juste like any file explorer, a folder button to clique,when name the folder and files, that's it

[SSHari]

@BeatlesBOB I agree that having something built into the Sandpack file explorer would be nice because it would be more accessible to everyone.

That said, Sandpack makes it straightforward for you to implement something like this:

function CustomSandpackFileExplorer() {
  const [fileName, setFileName] = useState("");
  const { sandpack } = useSandpack();

  return (
    <div className="custom-sandpack-file-explorer">
      <form
        onSubmit={(event) => {
          event.preventDefault();
          if (!fileName) return;
          sandpack.addFile(fileName, "");
          setFileName("");
        }}
      >
        <label>
          File
          <input
            value={fileName}
            onChange={(event) => setFileName(event.currentTarget.value)}
          />
        </label>
        <button>Add File</button>
      </form>
      <SandpackFileExplorer />
    </div>
  );
}

Here's a CodeSandbox using the example above: https://codesandbox.io/s/recursing-rui-ftnrt7?file=/src/App.tsx

If you want a more complete out-of-the-box solution, there's also the sandpack-file-explorer package.

If we do want to add this to the Sandpack package then we probably should outline the requirements. I think at a minimum, you'd want the following:

1. Add a new file
2. Rename files
3. Delete files

I have a rough implementation of the above in a personal project I'm working on called Kempo:

.

I'd be happy to iterate on it and flesh it out a bit more if there's interest in having this functionality directly in the Sandpack file explorer.