Pete Miller
c5cde404d4
* Docs updates - New test suites doc (how to run tests) - New WebUI Frontend doc (basic introduction to Brave's different stack) - Patches points to best practices - bug fix in claude code skills doc - Adjust docs/README.md to prioritize the index - Preflight skill addition of missing test suites
38 lines
1.6 KiB
Markdown
38 lines
1.6 KiB
Markdown
# Web UI Frontend
|
|
|
|
For most brave-specific WebUI, a different stack to Chromium is used for the
|
|
frontend.
|
|
|
|
- TypeScript/React components often in `components/*/resources/` or
|
|
`components/*_ui` or `browser/ui/webui/resources/*`
|
|
- Webpack configuration in `components/webpack/`
|
|
- Uses Storybook for component development and user, designer, and reviewer
|
|
verification
|
|
- Tests via jest in sibling *.test.ts(x) files
|
|
|
|
## Storybook
|
|
|
|
All WebUI should have a Storybook. This allows:
|
|
- Rapid realtime iteration with hot-reload
|
|
- Links to be generated by CI during PRs and shared with other team members
|
|
|
|
This needs UIs to be:
|
|
- Built with a componentized mindset - data has to be mocked for tests, for storybook, or provided by the real WebUI communications layer (usually mojom).
|
|
|
|
## State
|
|
|
|
Consider using [createInterfaceApi](../components/common/api/readme.md) to wrap
|
|
mojom interfaces and generate React hooks as well as create a layer that is easily mocked.
|
|
|
|
For local UI-only state, keep it as simple and local as possible whilst avoiding both prop-drilling and unneccessary re-renders. Consider using small Contexts for components that all need all of the same state properties or computed values, or
|
|
an external store, with individual property-level subscription, only when disparate components need access to some of the same state or computed values.
|
|
|
|
## Testing
|
|
See [WebUI Testing](./webui_testing.md)
|
|
|
|
## Strings
|
|
See [WebUI Strings](./webui_strings_explainer.md)
|
|
|
|
## Chromium
|
|
See [WebUI Overriding](./webui_overriding.md) for dealing with modifying existing Chromium WebUI frontend (Lit / Polymer).
|