diff --git a/packages/ui/components/errorBoundary/errorboundary.stories.mdx b/packages/ui/components/errorBoundary/errorboundary.stories.mdx new file mode 100644 index 0000000000..3c3745522e --- /dev/null +++ b/packages/ui/components/errorBoundary/errorboundary.stories.mdx @@ -0,0 +1,64 @@ +import { Canvas, Meta, Story } from "@storybook/addon-docs"; + +import { + Examples, + Example, + Title, + VariantsTable, + CustomArgsTable, + VariantRow, +} from "@calcom/storybook/components"; + +import ErrorBoundary from "./ErrorBoundary"; +import { Tooltip } from "../tooltip"; + + + + + +## Definition + +ErrorBoundary is an element that catches JavaScript errors in their child component tree, log those errors and display a fallback UI. + +## Structure + +ErrorBoundary offers a flexible component capable of catching JavaScript errors and displaying it in the UI. + +<CustomArgsTable of={ErrorBoundary} /> + +<Examples title="ErrorBoundary"> + <Example title="Default"> + <ErrorBoundary message="There is a problem with the App"> + <p>Child Component</p> + </ErrorBoundary> + </Example> + <Example title="With Error"> + <ErrorBoundary message="There is a problem with the App"> + <Tooltip /> + </ErrorBoundary> + </Example> +</Examples> + +<Title offset title="ErrorBoundary" suffix="Variants" /> + +<Canvas> + <Story + name="ErrorBoundary" + args={{ + children: <p class="text-default">Child Component</p>, + message: "There is a problem with the App", + }}> + {({ children, message }) => ( + <VariantsTable titles={["Default"]} columnMinWidth={150}> + <VariantRow variant="Default"> + <ErrorBoundary message={message}>{children}</ErrorBoundary> + </VariantRow> + <VariantRow variant="With Error"> + <ErrorBoundary message={message}> + <Tooltip /> + </ErrorBoundary> + </VariantRow> + </VariantsTable> + )} + </Story> +</Canvas>