mirror of
https://github.com/spacedriveapp/spacedrive.git
synced 2026-05-16 03:04:27 -04:00
[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>
This commit is contained in:
26
docs/developers/prerequisites/guidelines.md
Normal file
26
docs/developers/prerequisites/guidelines.md
Normal file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
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.
|
||||
Reference in New Issue
Block a user