spacedrive/docs/developers/prerequisites/guidelines.md
Brendan Allan c65d92ee4c
[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

1.1 KiB

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 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 to apply the layout without introducing a new path segment.