mirror of
https://github.com/spacedriveapp/spacedrive.git
synced 2026-04-20 06:28:14 -04:00
* 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>
27 lines
1.1 KiB
Markdown
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.
|