Files
spacedrive/docs/developers/prerequisites/guidelines.md
Brendan Allan 99a31de824 [ENG-380] Interface code structure improvement (#581)
* beginnings of app directory

* settings mostly good

* colocate way more components

* flatten components folder

* reexport QueryClientProvider from client

* move CodeBlock back to interface

* colocate Explorer, KeyManager + more

* goddamn captialisation

* get toasts out of components

* please eslint

* no more src directory

* $ instead of :

* added back RowHeader component

* fix settings modal padding

* more spacing, less margin

* fix sidebar locations button

* fix tags sidebar link

* clean up back button

* added margin to explorer context menu to prevent contact with edge of viewport

* don't export QueryClientProvider from @sd/client

* basic guidelines

* import interface correctly

* remove old demo data

* fix onboarding layout

* fix onboarding navigation

* fix key manager settings button

---------

Co-authored-by: Jamie Pine <ijamespine@me.com>
2023-02-27 21:29:48 -08:00

27 lines
1.1 KiB
Markdown

---
index: 2
---
# Guidelines
## `@sd/interface`
Most interface code should live inside the `app` directory,
with the folder structure resembling the app's routing structure.
We currently use [React Router](https://reactrouter.com/) and take full advantage of nested and config-based routing
### Casing
- All files/folders containing a route should be `lower-kebab-case`
- Dynamic routes should be `camelCase` and have their parameter name prefixed with `$`
- All other files/folders should be `PascalCase` (expect for `index` files inside `PascalCase` folders)
### Layouts
If a folder of routes has a component that should be applied to _every_ sub-route,
the component's file should be named `Layout.tsx` and applied in the parent folder's routing configuration as the `element` property.
For components that should wrap a subset of routes,
name the file with something ending in `Layout.tsx` (but not `Layout.tsx` itself!).
We then recommend using [layout routes](https://reactrouter.com/en/main/route/route#layout-routes) to apply the layout without introducing a new `path` segment.