Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Commit updated Storybook stories

Browse Source
This commit is contained in:
Owncast 2023-03-13 07:06:39 +00:00
parent 4009af8d3c
commit 8a382b5eaa
1 changed files with 27 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx
View File

@ -68,6 +68,33 @@ But why _this_ style?
See the discussion on the PR that introduced this pattern: [#2082](https://github.com/owncast/owncast/pull/2082).
## Error Boundaries
Components that have substantial state and internal functionality should be wrapped in an [Error Boundary](https://reactjs.org/docs/error-boundaries.html). This allows for catching unexpected errors and displaying a fallback UI.
Components that are stateless views are unlikely to throw exceptions and don't require an error boundary.
The `ComponentError` component is a pre-built error state that can be used to display an error message and a bug reporting button.
### Example
```tsx
import { ErrorBoundary } from 'react-error-boundary';
<ErrorBoundary
// eslint-disable-next-line react/no-unstable-nested-components
fallbackRender={({ error: e, resetErrorBoundary }) => (
<ComponentError
componentName="BrowserNotifyModal"
message={e.message}
retryFunction={resetErrorBoundary}
/>
)}
>
<YourFunctionality/>
</ErrorBoundary
```
## Storybook
We use [Storybook](https://storybook.js.org/) to create a component library where we can see and interact with each component.