From 781a0f4a7cc7c956a76402612be19dcf3bd4c491 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Thu, 31 Aug 2023 18:56:50 +0000
Subject: [PATCH] chore: add ErrorBoundary in storybook (CALCOM-10760) (#10872)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
---
 .../errorBoundary/errorboundary.stories.mdx   | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 packages/ui/components/errorBoundary/errorboundary.stories.mdx

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";
+
+<Meta title="UI/ErrorBoundary" component={ErrorBoundary} />
+
+<Title title="ErrorBoundary" suffix="Brief" subtitle="Version 1.0 — Last Update: 17 Aug 2023" />
+
+## 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>