# 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).