Overview

🎥 Watch "Components" style guide video here.

🎥 Watch a run through of creating a component, which covers most of the component-related information from the style guide, as well as efficiency tips (e.g. keyboard shortcuts, snippets, "format on save", etc.)

---

See related Basic Guidelines sections: functional components, named export, one exported component per file, component files vs component folders, multiple early returns, event handler syntax,

See related Naming sections: filename (and component locations), declarations

---

General

• Simple components:

  • 📄 Component file

• Complex components:

  • 📁 Component folder (see related Naming section)

    • 📁 _components (optional)

    • 📁 _lib (optional)

    • 📄 Component file

    • 📄 index.ts

---

Reusable Components

• Storybookized

  • Location: ~/components/_storybook/...

  • Components that have gone through the step of creating "stories"

    • UI documentation & testing

• Non-Storybookized

  • Location: ~/components/...

---

Database-related Component Folders

• Location: ~/components/database/...

• Contents:

  • 📄 _config.ts

  • 📁 _lib

    • 📄 useMutations.ts

    • 📄 context.ts (optional)

  • 📁 _components

    • (base/template components -- CRUD buttons, FormCRUD, Table, etc.)

---

Local Components

• Location: .../_components/...

• All non-reusable, non-database-related components should ultimately exist within an _components folder, which may be located within a component folder, in a "route" folder, etc.