Remove redundant folders in the sidebar

[vitalybe]

In our project we're putting every component in its own folder in which there are both the components and its fixture, e.g:

• components
  • qwiltMultiSelect
    • qwiltMultiSelect.tsx
    • qwiltMultiSelect.fixture.tsx

So if I have 2 "stories" for QwiltMultiSelect, e.g: "String Data" and "Object Data", I am getting the following the following folder structure:

So, in this case, I would be glad to get rid of the duplicate "qwiltMultiSelect" folder.

Can we have a way to remove/control these redundant folders?

[ovidiuch]

Cosmos already removes a bunch of redundancies in the fixture list. Like MyComponent/index becomes MyComponent. As well as MyComponent/MyComponent becomes MyComponent.

Can you try renaming qwiltMultiSelect to capitalized QwiltMultiSelect? It might already do what you want. And if it does, we can change this RFC to making the process case-insensitive :D.

[vitalybe]

Nope, it doesn't seem to do that, even with matching case:

[ovidiuch]

Do you have any other fixtures in the qwiltMultiSelect dir?

[vitalybe]

No. Only these 2.

[ovidiuch]

Wrote a test case that reproduces your situation and a patch here https://github.com/react-cosmos/react-cosmos/pull/1161/files (currently case sensitive).

[ovidiuch]

Decided to stick with case sensitive support only for now because it's slightly safer to release as a patch version. You can try it out in react-cosmos@5.0.7. Let me know it works as expected for you.

[vitalybe]

Works great, thanks! Though it would be great if it could be case insensitive after all... It can be configurable too, if that makes it less dangerous.

[ovidiuch]

Out of curiosity, which name would you prefer to see in Cosmos, qwiltMultiSelect or QwiltMultiSelect?

[vitalybe]

I guess I'd prefer to see QwiltMultiSelect since that's the actual case of the component.

Our folder structure might be a bit unusual - All our folders and file names are lower camelCase. The only exceptions are components and component fixture files.

[ovidiuch]

OK, I went down the rabbit hole and covered your case-insensitive use case, along with some other edge cases related to the fixture tree. Check out react-cosmos@5.0.8 and let me know how it works for you.

[vitalybe]

Thanks! I appreciate it. I will give it a try.

[vitalybe]

It definitely looks better!

The only issue I see so far is that it doesn't work if there are other folders, e.g:

I would expect it to look like:

• sdsEditor
  • SdsEditorFootprints (folder)
    • regular (fixture)
  • regular (fixture)

That is, with this current version, I get some unnecessary nesting for SdsEditor

[ovidiuch]

I see what you mean, but this is by design. The current reasoning is that both SdsEditor and SdsEditorFootprints are sibling components and it might be confusing to show them at different nesting levels. Things are simpler when it's just one component because I can't imagine anyone preferring an extra folder for a single component.

I'm not sure if this will work as expected, but here is something you can try: Move sdsEditor/SdsEditor.fixture.tsx to sdsEditor/index.fixture.tsx.

[vitalybe]

Yep, I see what you mean and that makes sense, just a bit different.

Anyway, it is much better now, so thanks again!