> For the complete documentation index, see [llms.txt](https://aaron-mota.gitbook.io/aarons-style-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aaron-mota.gitbook.io/aarons-style-guide/frontend/todo/component-architecture.md).

# Component Architecture

<details>

<summary>// TODO</summary>

* "Generic-first" approach ("database" components, local components, etc.)
* NounAdjective
  * MuiName + Adjective
  * ...
* ...

</details>

***

* **Utility/reusable** components are named with *NounAdjective* format (or more directly, *ComponentAdjective*) (an *Adjective* does not need to be present; just *Noun* is ok)
  * &#x20;Noun
    * `Table.tsx`
    * `FormCRUD.tsx`
  * `ChartBase` *(NounAdjective)*
    * *Page-related: `ChartProject`, `ChartProductionOverall`, ...*
  * `ModalBase` *(NounAdjective)*
    * *Utility-related (building utility on top of utility): `ModalCRUD`*

      *(also exists in `/src/components/`)*
  * Styled MUI components:
    * [IconButton](https://mui.com/material-ui/react-button/#icon-button) base: `IconButtonCreate`, `IconButtonClose`, ...
    * [Button](https://mui.com/material-ui/react-button) base: `ButtonCancel`, `ButtonSubmit`, ...
    * [Typography](https://mui.com/material-ui/react-typography/) base: `TypographyError`, ...