Design pattern for @dzcode.io/ui-mobile

[omdxp]

I was thinking that the @dzcode.io/ui-mobile package should follow a structure that is based on atomic design pattern and my suggested structure is as follows:

src/
├── components
│   ├── atoms
│   │   ├── badge
│   │   ├── button
│   │   ├── card
│   │   ├── checkbox
│   │   ├── chip
│   │   ├── divider
│   │   ├── list
│   │   ├── loading
│   │   ├── markdown
│   │   ├── paragraph
│   │   ├── text
│   │   └── title
│   ├── molecules
│   │   ├── app-bar
│   │   ├── drawer-content
│   │   ├── error-boundary
│   │   └── try-again
│   └── organisms
│       ├── contribute-card
│       ├── filters
│       └── project-card
├── hooks
├── navigations
│   ├── drawer-nav
│   ├── navigation-container
│   └── stack-nav
├── styles
├── themes
│   └── theme-provider
├── types
└── utils
    └── drawer-actions

So what do you think about it? and is there other suggestions or rectifications for it?

[ZibanPirate]

let's not:

• use Atomic design terms (atoms, molecules ...etc)
• unnecessarily structure folders based on component categories

let's instead:

• compose complex components from base components or other complex components, like how Atomic is doing it, but without any categorization.
• keep folder structure as linear as possible.
• prefix non-component folders with _, eg: _hooks or _utils, so they would show up on top (learned that from @Fcmam5)
• put components that require each other in one folder (eg: navigation components and providers), or when they are variants from the same base component (eg: different cards and text components).
• do not have a style in a common folder, but rather per component, and move global styling/theming inside the theme component.
• avoid plural naming (themes, navigations), except non-component folders eg: ./types
• if it's not re-useable, don't unnecessarily DRY it eg: utils/drawer-actions can be moved to drawer/drawer-actions along with drawer-content.

so we end up with something a bit simpler for the consumer like:

src/
├── _hooks
├── _types
├── _utils
├── badge
├── button
├── card
│   ├── contribute-card
│   └── project-card
│── checkbox
├── chip
├── divider
├── list
├── loading
├── text
│   ├── paragraph
│   ├── text (or another name)
│   └── title
├── markdown
├── app-bar
├── drawer-content
│   ├── drawer-content
│   └── drawer-actions
├── error-boundary
├── try-again
├── filter
├── navigation
│   ├── drawer-nav
│   ├── navigation-container
│   └── stack-nav
└── theme
    ├── style
    └── theme-provider

[omdxp]

Yeah, seems better than the first one. I'll start working on it