From 4c4ec4775cc7d5c93514eb4b81e8a19f9b3f83c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?=
 <59940332+patrycjakalinska@users.noreply.github.com>
Date: Mon, 1 Jul 2024 12:17:57 +0200
Subject: [PATCH] docs: Move ExampleVideo to MDXComponents (#6145)

Because ExampleVideo started to be widely used in documentations mdx, we
moved it to MDXComponents.js to use it without further imports.
---
 packages/docs-reanimated/blog/accordion.md              | 1 -
 packages/docs-reanimated/blog/bottom-sheet.md           | 1 -
 packages/docs-reanimated/blog/flip-card.md              | 1 -
 packages/docs-reanimated/blog/floating-action-button.md | 1 -
 packages/docs-reanimated/blog/marquee.md                | 1 -
 packages/docs-reanimated/blog/section-list.md           | 1 -
 packages/docs-reanimated/blog/slider.md                 | 1 -
 packages/docs-reanimated/blog/switch.md                 | 1 -
 packages/docs-reanimated/src/theme/MDXComponents.js     | 2 ++
 9 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/docs-reanimated/blog/accordion.md b/packages/docs-reanimated/blog/accordion.md
index 09cc6ca3375..84ba8c2e559 100644
--- a/packages/docs-reanimated/blog/accordion.md
+++ b/packages/docs-reanimated/blog/accordion.md
@@ -7,7 +7,6 @@ An accordion allows to show and hide a piece of content with a smooth animation.
 
 import Accordion from '@site/static/examples/Accordion';
 import AccordionSrc from '!!raw-loader!@site/static/examples/Accordion';
-import ExampleVideo from '@site/src/components/ExampleVideo';
 
 <InteractiveExample src={AccordionSrc} component={Accordion} />
 
diff --git a/packages/docs-reanimated/blog/bottom-sheet.md b/packages/docs-reanimated/blog/bottom-sheet.md
index 9788be666fc..170d1b869fa 100644
--- a/packages/docs-reanimated/blog/bottom-sheet.md
+++ b/packages/docs-reanimated/blog/bottom-sheet.md
@@ -7,7 +7,6 @@ Bottom sheets are surfaces containing supplementary content, anchored to the bot
 
 import BottomSheet from '@site/static/examples/BottomSheet';
 import BottomSheetSrc from '!!raw-loader!@site/static/examples/BottomSheet';
-import ExampleVideo from '@site/src/components/ExampleVideo';
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
 <InteractiveExample src={BottomSheetSrc} component={BottomSheet} />
diff --git a/packages/docs-reanimated/blog/flip-card.md b/packages/docs-reanimated/blog/flip-card.md
index 597c69e70d9..d71c1308dbc 100644
--- a/packages/docs-reanimated/blog/flip-card.md
+++ b/packages/docs-reanimated/blog/flip-card.md
@@ -7,7 +7,6 @@ Flip card allows you to display different content depending on whether the card
 
 import FlipCard from '@site/static/examples/FlipCard';
 import FlipCardSrc from '!!raw-loader!@site/static/examples/FlipCard';
-import ExampleVideo from '@site/src/components/ExampleVideo';
 
 <InteractiveExample src={FlipCardSrc} component={FlipCard} />
 
diff --git a/packages/docs-reanimated/blog/floating-action-button.md b/packages/docs-reanimated/blog/floating-action-button.md
index b4dd002d2c8..3e2bc0eea52 100644
--- a/packages/docs-reanimated/blog/floating-action-button.md
+++ b/packages/docs-reanimated/blog/floating-action-button.md
@@ -7,7 +7,6 @@ Floating Action Button provides user with easy-accessible panel with primary or
 
 import FloatingActionButton from '@site/static/examples/FloatingActionButton';
 import FloatingActionButtonSrc from '!!raw-loader!@site/static/examples/FloatingActionButton';
-import ExampleVideo from '@site/src/components/ExampleVideo';
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
 <InteractiveExample src={FloatingActionButtonSrc} component={FloatingActionButton} />
diff --git a/packages/docs-reanimated/blog/marquee.md b/packages/docs-reanimated/blog/marquee.md
index fa183c129d8..68cd1d59141 100644
--- a/packages/docs-reanimated/blog/marquee.md
+++ b/packages/docs-reanimated/blog/marquee.md
@@ -7,7 +7,6 @@ A marquee is an element used to display scrolling content horizontally within a
 
 import Marquee from '@site/static/examples/Marquee';
 import MarqueeSrc from '!!raw-loader!@site/static/examples/Marquee';
-import ExampleVideo from '@site/src/components/ExampleVideo';
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
 <InteractiveExample src={MarqueeSrc} component={Marquee} />
diff --git a/packages/docs-reanimated/blog/section-list.md b/packages/docs-reanimated/blog/section-list.md
index a1c861f1e62..011f1643760 100644
--- a/packages/docs-reanimated/blog/section-list.md
+++ b/packages/docs-reanimated/blog/section-list.md
@@ -5,7 +5,6 @@ title: Section List
 
 import SectionList from '@site/static/examples/SectionList';
 import SectionListSrc from '!!raw-loader!@site/static/examples/SectionList';
-import ExampleVideo from '@site/src/components/ExampleVideo';
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
 Section lists allow you to organize long lists of content by dividing them with headings.
diff --git a/packages/docs-reanimated/blog/slider.md b/packages/docs-reanimated/blog/slider.md
index 8951a77665a..0abf7e250d8 100644
--- a/packages/docs-reanimated/blog/slider.md
+++ b/packages/docs-reanimated/blog/slider.md
@@ -7,7 +7,6 @@ Slider allows users to adjust a value or control a setting by sliding a handle a
 
 import Slider from '@site/static/examples/Slider';
 import SliderSrc from '!!raw-loader!@site/static/examples/Slider';
-import ExampleVideo from '@site/src/components/ExampleVideo';
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
 <InteractiveExample src={SliderSrc} component={Slider} />
diff --git a/packages/docs-reanimated/blog/switch.md b/packages/docs-reanimated/blog/switch.md
index 4203bffd724..a35f179c2cb 100644
--- a/packages/docs-reanimated/blog/switch.md
+++ b/packages/docs-reanimated/blog/switch.md
@@ -7,7 +7,6 @@ A switch element is a user interface component that allows users to toggle betwe
 
 import Switch from '@site/static/examples/Switch';
 import SwitchSrc from '!!raw-loader!@site/static/examples/Switch';
-import ExampleVideo from '@site/src/components/ExampleVideo';
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
 <InteractiveExample src={SwitchSrc} component={Switch} />
diff --git a/packages/docs-reanimated/src/theme/MDXComponents.js b/packages/docs-reanimated/src/theme/MDXComponents.js
index 295b0027f0e..01f176a9dda 100644
--- a/packages/docs-reanimated/src/theme/MDXComponents.js
+++ b/packages/docs-reanimated/src/theme/MDXComponents.js
@@ -3,6 +3,7 @@ import MDXComponents from '@theme-original/MDXComponents';
 import InteractiveExample from '@site/src/components/InteractiveExample';
 import InteractivePlayground from '@site/src/components/InteractivePlayground';
 import CollapsibleCode from '@site/src/components/CollapsibleCode';
+import ExampleVideo from '@site/src/components/ExampleVideo';
 import { Yes, No, Version, Spacer } from '@site/src/components/Compatibility';
 import Optional from '@site/src/components/Optional';
 import Indent from '@site/src/components/Indent';
@@ -18,6 +19,7 @@ export default {
   InteractiveExample,
   InteractivePlayground,
   CollapsibleCode,
+  ExampleVideo,
   Yes,
   No,
   Version,