Folder structure

[vikiival]

Since code became quite big and complex it would be nice to shuffle a couple of components into a more logical folder structure.

The goal of this discussion is to discuss (obviously) the folder structure which you use in your projects.

[roiLeo]

I would be in favour of:

• having generic name for components
• deconstructing the /rmrk folder structure
• move all things related to collection into a new folder
• clean up /rmrk/Gallery/
• create a service folder in order to organise all the actions (vuex actions -> service call)
• rename langDir folder to locales
• styles organisation: scss components, themes files

[vikiival]

Lovely! I like it

Additionaly I was thinking to make a common lib for repetitive stuff kodadot/packages#12

[RieserStern]

I'm interested

[vikiival]

@kkukelka what's the folder structure that you usually follow?

[kkukelka]

I like to divide stuff in either context-specific or functionality-specific folders:
e.g. for context-specific:

/payment
/payment/CheckoutComponent.vue
/payment/BillingComponent.vue
...

e.g. functionality:

/ui
/ui/Navbar.vue
/ui/ItemList.vue

or like

/shared
/shared/BasicButton.vue
...

but in the end it always has to serve the respective project I am working on

[roiLeo]

any new on this? should we open an issue that would follow up this discussion?
I'm starting to get lost with rmrk components that are being used on bsx & other chains.
I think this refactoring can really help us

[preschian]

It seems like the design for the gallery item is almost ready #4111. maybe we can implement monorepo and setup our design system. and setup historie also while waiting for the design to be final, ref: #3311 (comment)

the goal with monorepo is to easy to maintain our neobrutalism components. original comment: #3909 (comment).

// folder structure

nft-gallery/
├── apps/
│   ├── marketplace/ --> our nuxt app
│   │   ├── assets/
│   │   ├── components/
│   │   ├── composables/
│   │   └── etc...
│   └── marketplace-next/ --> maybe we want to experiment with nuxt3 directly?
├── libs/
│   ├── etc...
│   ├── components/ --> our design system --> @kodadot/design with vue2 + composition api
│   │   ├── avatar/
│   │   ├── button/
│   │   ├── card/
│   │   └── etc...
│   ├── components-next/ --> @kodadot/design-next with vue3 directly?
│   └── utils/ --> shared utils --> @kodadot/utils
├── etc...
├── package.json
└── README.md

components under @kodadot/design only receive props, so there is no API call on the design system, if possible.

next step:

• setup https://turborepo.org/showcase

[preschian]

but we have this also https://github.com/kodadot/packages
maybe we can merge those packages under nft-gallery in the future?

[vikiival]

Nope, they should be separated as they are intended for broad use.
E.g. anyone whould would like to hack on top of the KodaDot/Kusama/Substrate

[preschian]

references about workspaces. all package managers has workspaces feature:

• pnpm - https://pnpm.io/workspaces
• npm - https://docs.npmjs.com/cli/v8/using-npm/workspaces
• yarn classic - https://classic.yarnpkg.com/lang/en/docs/workspaces/

[vikiival]

hmm that could be also an option!
WDYT @kodadot/code-review-guild ?