Bug fixed : file explorer not displaying anything

[libetl]

Hi,
I want to try codesandbox in storybook (and thus vice versa)

When the project has not got any file in the subdirectory but only folders,
the file explorer is not displaying anything.

What kind of change does this PR introduce?
This is a fix to the file explorer in react codesandbox

What is the current behavior?

What is the new behavior?
It will keep the display consistent accross any project.
This was debugged thanks to these unit tests :

import { modulesList } from './index'

test("empty list", () => {
  const result = modulesList({}, '')
  const { directoriesToShow, filesToShow } = result
  expect(directoriesToShow).toEqual(new Set([]))
});

test("simple case", () => {
  const result = modulesList({
    "/src/panel.js": {},
    "/src/panel.stories.js": {},
    "/src/storysource/bootstrapper.js": {},
    "/package.json": {}
  }, "/")
  const { directoriesToShow, filesToShow } = result
  expect(directoriesToShow).toEqual(new Set(['/src/']))
  expect(filesToShow).toEqual([{ path: '/package.json' }])
})

test("real case 0", () => {
  const result = modulesList({
    "/src/components/BaseButton.js": {},
    "/src/stories/notes/notes.md": {},
    "/src/stories/addon-notes.stories.js": {},
    "/src/storysource/bootstrapper.js": {},
    "/package.json": {}
  },
    "/")
  const { directoriesToShow, filesToShow } = result
  expect(directoriesToShow).toEqual(new Set(['/src/']))
  expect(filesToShow).toEqual([{ path: '/package.json' }])
})

test("real case 1", () => {
  const result = modulesList({
    "/src/components/BaseButton.js": {},
    "/src/stories/notes/notes.md": {},
    "/src/stories/addon-notes.stories.js": {},
    "/src/storysource/bootstrapper.js": {},
    "/package.json": {}
  },
    "/src/")
  const { directoriesToShow, filesToShow } = result
  expect(directoriesToShow).toEqual(new Set(['/src/components/', '/src/stories/', '/src/storysource/']))
  expect(filesToShow).toEqual([])
})

test("real case 2", () => {
  const result = modulesList({
    "/src/components/BaseButton.js": {},
    "/src/stories/notes/notes.md": {},
    "/src/stories/addon-notes.stories.js": {},
    "/src/storysource/bootstrapper.js": {},
    "/package.json": {}
  },
    "/src/components/")
  const { directoriesToShow, filesToShow } = result
  expect(directoriesToShow).toEqual(new Set([]))
  expect(filesToShow).toEqual([{ path: "/src/components/BaseButton.js" }])
})

Checklist:

• [N/A] Documentation
• Tests (as comment above but react-sandpack does not seem to be using a test framework...)
• Ready to be merged
• [N/A] Added myself to contributors table

[SaraVieira]

Hey!

Can you explain better what is happening now?

I'm not that familiar with react sandpack :/

[libetl]

Hi @SaraVieira
React sandpack is a UI integration to embed codesandbox in any site (we can build a playground while using the bundler and transpiler features of codesandbox via a sandpack server)

This integration works for simple cases, but when for example I have this kind of project :

   a/b/c.js
   a/b/d.js

without any files in a/b, then a/b folder is not displayed in the file explorer (screenshot above)

This fix makes the algorithm way simpler by looking at the elements to display at a given level.
Which is supposed to fix the file explorer component.

[libetl]

Hi @SaraVieira or @CompuIves

What can I do to improve this change ?

Thank you

[CompuIves]

This is really good @libetl, thanks a lot for taking care of this and cleaning up the code!

[CompuIves]

@allcontributors[bot] please add @libetl for code

[allcontributors]

@CompuIves

I've put up a pull request to add @libetl! 🎉