Define The Structure Of Folders And Files

[samuel-vergara-leon]

There is a lot of ways to structure folders. Some common folders and files that we can expect are:

• components: shared atomic components

  • index.js
  • ComponentName.jsx
  • ComponentName.style.jsx
  • ComponentName.docs.mdx
  • ComponentName.
    • ChildComponent.jsx

• Styles: shared and global styles, including themes:

  • index.js
  • themes.js
  • global.css
  • variables.css
  • other.css

• services: external API services code

  • index.js
  • Service
    • index.js
    • file.js

• Utils: reusable js functions

  • Index.js
  • File.js

• Pages: pages for each route, and the router

  • Router.js
  • AuthRedirect.jsx
  • Home.jsx
  • Page.jsx

• Layouts: reusable layouts for mobile and desktop.

  • Index.js
  • SinglePane.js
  • SideBar.js

• Templates: shared groups of components that works together:

  • index.js
  • Form.js
  • Table.js

What about this project? Any idea how to structure folders and files?

[carlosluis911207]

I want to be assigned to this task

[heliomar-pena]

Hello! More than one task is a discussion for everyone to decide the best way to organize the file structure.

[Israel-Laguan]

• folder hooks
• Folder context/store
• Folder actions

[denisosuna]

the structure looks good to me

[heliomar-pena]

The structure looks good to me, I'm agree that we need a Folder actions

[heliomar-pena]

I think should look some like:

• components: shared atomic components

  • index.js
  • ComponentName.jsx
  • ComponentName.style.jsx
  • ComponentName.docs.mdx
  • ComponentName
    • ChildComponent.jsx

• styles: shared and global styles, including themes

  • index.js
  • themes.js
  • global.css
  • variables.css
  • other.css

• services: external API services code

  • index.js
  • Service
    • index.js
    • file.js

• utils: reusable js functions

  • index.js
  • file.js

• pages: pages for each routes, and the router

  • router.js
  • AuthRedirect.jsx
  • Home.jsx
  • Page.jsx

• layouts: reusable layouts for mobile and desktop

  • index.js
  • SinglePane.js
  • SideBar.js

• templates: shared groups of components that works together

  • index.js
  • Form.js
  • Table.js

• actions: internal API services code

  • index.js

• hooks: custom hooks code

• context/store: store / context code

@Israel-Laguan please help me to complete the information that should go inner of hook and context store and I will create the issue

[Israel-Laguan]

hooks:

• useQuery
• useRedirect
• useNotification

context:

• index.js
• store.js
• actions.js