Think about React folder structure

[Sergih28]

Look for examples of how to organize the folder structure in a React project.

Keep in mind that there has to be a place for tests, and unit and e2e test should be in separate folders.

Also keep in mind that we are going to use Storybook.

Right now you can see in the app readme our basic folder structure given by astro.

[Sergih28]

@ehdlg Post here the examples or your proposals for the folder structure here, so we can discus on them and then decide.

An example would be the react atomic design.

[ehdlg]

Here are my proposals:

First proposal:

/
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   ├── tests/            // Folder for all tests
│   │   ├── unit/         // Folder for unit tests
│   │   │   
│   │   └── e2e/          // Folder for end-to-end tests
│   │      
│   └── stories/          // Folder for Storybook 
└──

Second proposal:

/
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   ├── unitTests/        // Folder for unit tests
│   │   └── ...          
│   ├── e2eTests/         // Folder for end-to-end tests
│   │   └── ...          
│   └── stories/          // Folder for Storybook 
└──

[Sergih28]

@ehdlg

/
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   ├── tests/            // Folder for all tests
│   │   ├── unit/         // Folder for unit tests
│   │   │   
│   │   └── e2e/          // Folder for end-to-end tests
│   │      
│   └── stories/          // Folder for Storybook 
└──

I like more this approach, but it needs more description inside the components folder.

[ehdlg]

@ehdlg

/
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   ├── tests/            // Folder for all tests
│   │   ├── unit/         // Folder for unit tests
│   │   │   
│   │   └── e2e/          // Folder for end-to-end tests
│   │      
│   └── stories/          // Folder for Storybook 
└──

I like more this approach, but it needs more description inside the components folder.

@Sergih28

├── src/
│   ├── components/
│   │   ├── ui/                    // Visual components
│   │   ├── forms/            // Forms and input components
│   │   └── utils/               // Auxiliary functions for the UI, like date handler components
│   ├── layouts/
│   ├── pages/
│   ├── tests/
│   │   ├── unit/
│   │   └── e2e/
│   └── stories/
└──

What do you think about this?

[Sergih28]

Reminder for when reviewing this.

Add a folder for models (for typescript types and interfaces). Add a folder for hooks. The tests folder goes outside src. Have an errors folder.

[Sergih28]

Merged documentation in #142