Atomic design in code layout

code_organization_react.md

How I organized react apps

This is a design I came up with to incorporate atomic design into the code layout in a project. This has given me the leverage to extract out good parts to cross platform tools and reusable API's for the team. Welcome feedback/additions!

src/
  libs/ **filters, config tools, etc
  modules/
    capability(ies)/   **ex: 'searches', 'companies', 'users'
      forms/
        config.ts
        model.ts
      grid/  ** tables, lists
      menu/ ** selects, nav ui's, etc
      molecules/  ** hooks, fn, classes, helpers but we disallow names helpers.ts, utils.ts, generic.ts and prefer fooClickHander.ts
      providers/
        CapabilityProvider.tsx
      routes/
        CapabilityRoutes.tsx
      view/  **containers pulling in components above
      Container.tsx

component_toc.tsx

// A component's table of contents:

// This section is about component configuration prior to render.
import things from dependencies
import things from modules
export hooks, functions, etc for reuse
private functions/hooks

// Components should have 2 parts, setup phase and render phase.
export function FooComponent(props) {
  // configuration
  const someHook = useSomeHook()
  const staticConfig = { ... }

  return JSX
}