workflow - is a common term for user story / business workflow
utils - basic reusable constants, functions and services without knowledge of a workflow
unit testing. tip: use uvu (without CLI)
blocks - basic reusable view components (ui-kit) without knowledge of a workflow
screenshots testing. tip: use storybook
services - basic reusable workflows (external APIs) with knowledge of a workflow
headless module / integrational testing. tip: use uvu
widgets - main features that serving a workflow by combining utils, blocks and services.
viewed module / integrational testing. tip: use cypress component testing
pages - widgets bindings (entry points and main layouts) to web view
e2e testing. tip: without
next.jsmay be part of widgets
Pages can include only widgets.
Widgets may include utils, blocks, services and other widgets.
Blocks and services can only include themselves and utils.
Root folder contains folders for all kind of things: pages, widgets, services, blocks, utils. This top level widgets, services, blocks, utils are shared, you could import them from any depth of a widget. But you shouldn't import things from parallel dir branches, you always import from the same folder, the bottom folder, or the root thing folder, it is the main rule.
// src/widgets/Foo/Bar/index.ts
// wrong
import from "src/widgets/Qwe/Red"
// ok
import from "src/widgets/Qwe/"
// ok
import from "src/widgets/Foo/Zar"
In general, it is not matter how you name your things, just separate it by different kinds of testing. There are could be apps with simple architecture, simple workflows and simple component structure, which has only components and e2e tests.
Pages follows next.js guide. Other things follows a file-structure pattern:
- index.ext - reexports
- entityN.ext - main entity code
- ?entityN - optional folder with additional components
- index.ext - reexports
- entityN1.ext - main subentity code
- ?entityN1 - another folder... and so on like a fractal
Might be better to mark widgets, utils and others as directories wince workflows are in same list and are considered a directory name. Or it might be even better to mark workflows as a tip or as a quote so that it doesn't appear as a directory name