From fa01c99089d2bdcf536625a6559c5009c1ab0e3a Mon Sep 17 00:00:00 2001
From: Meolocious <90854445+Meolocious@users.noreply.github.com>
Date: Fri, 19 Jul 2024 11:08:16 +0200
Subject: [PATCH] [B2BP-753] - Implementing 'Video' EC inside B2BP (#368)

* commit build fix

* commit changeset
---
 .changeset/late-gifts-pay.md                  |  5 ++++
 .../stories/VideoImage/dark.stories.tsx       | 27 +++++++++----------
 .../stories/VideoImage/videoImageCommons.tsx  |  8 +++---
 3 files changed, 21 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/late-gifts-pay.md

diff --git a/.changeset/late-gifts-pay.md b/.changeset/late-gifts-pay.md
new file mode 100644
index 000000000..907335797
--- /dev/null
+++ b/.changeset/late-gifts-pay.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Fix storybook error for Video-Image component
diff --git a/apps/nextjs-website/stories/VideoImage/dark.stories.tsx b/apps/nextjs-website/stories/VideoImage/dark.stories.tsx
index 009540695..74a8fdabc 100644
--- a/apps/nextjs-website/stories/VideoImage/dark.stories.tsx
+++ b/apps/nextjs-website/stories/VideoImage/dark.stories.tsx
@@ -1,7 +1,7 @@
 import { StoryFn, Meta } from '@storybook/react';
 import { VideoImage } from '@react-components/components';
-import { defaultsDark } from './videoImageCommons';
-import { VideoImageProps } from '@react-components/types';
+import { defaultsDark, VideoImageTemplate } from './videoImageCommons';
+
 
 // Define metadata for the Storybook
 const meta: Meta<typeof VideoImage> = {
@@ -10,23 +10,20 @@ const meta: Meta<typeof VideoImage> = {
 };
 export default meta;
 
-// Template function to render the Video component
-const VideoTemplate: StoryFn<VideoImageProps> = (args) => <VideoImage {...args} />;
-
-export const VideoFull = VideoTemplate.bind({});
+export const VideoFull: StoryFn<typeof VideoImage> = VideoImageTemplate.bind({});
 VideoFull.args = {
   ...defaultsDark,
   title: 'Sample Video Title',
   subtitle: 'Sample Video Subtitle',
 };
 
-export const VideoFullNoSubtitle = VideoTemplate.bind({});
+export const VideoFullNoSubtitle: StoryFn<typeof VideoImage> = VideoImageTemplate.bind({});
 VideoFullNoSubtitle.args = { ...defaultsDark, title: 'Sample Video Title' };
 
-export const VideoFullNoTitleNoSubtitle = VideoTemplate.bind({});
+export const VideoFullNoTitleNoSubtitle: StoryFn<typeof VideoImage> = VideoImageTemplate.bind({});
 VideoFullNoTitleNoSubtitle.args = { ...defaultsDark };
 
-export const VideoFullWithCaption = VideoTemplate.bind({});
+export const VideoFullWithCaption: StoryFn<typeof VideoImage> = VideoImageTemplate.bind({});
 VideoFullWithCaption.args = {
   ...defaultsDark,
   title: 'Sample Video Title',
@@ -34,21 +31,21 @@ VideoFullWithCaption.args = {
   caption: 'Sample Video Caption',
 };
 
-export const VideoFullNoSubtitleWithCaption = VideoTemplate.bind({});
+export const VideoFullNoSubtitleWithCaption: StoryFn<typeof VideoImage> = VideoImageTemplate.bind({});
 VideoFullNoSubtitleWithCaption.args = {
   ...defaultsDark,
   title: 'Sample Video Title',
   caption: 'Sample Video Caption',
 };
 
-export const VideoFullNoTitleNoSubtitleWithCaption = VideoTemplate.bind({});
+export const VideoFullNoTitleNoSubtitleWithCaption: StoryFn<typeof VideoImage> = VideoImageTemplate.bind({});
 VideoFullNoTitleNoSubtitleWithCaption.args = {
   ...defaultsDark,
   caption: 'Sample Video Caption',
   isCentered: true,
 };
 
-export const ImageNoTitleNoCaption = VideoTemplate.bind({});
+export const ImageNoTitleNoCaption: StoryFn<typeof VideoImage> = VideoImageTemplate.bind({});
 ImageNoTitleNoCaption.args = {
   ...defaultsDark,
   src:
@@ -56,7 +53,7 @@ ImageNoTitleNoCaption.args = {
   alt: 'Sample Image Alt',
 };
 
-export const ImageNoTextWithCaptionCentered = VideoTemplate.bind({});
+export const ImageNoTextWithCaptionCentered: StoryFn<typeof VideoImage> = VideoImageTemplate.bind({});
 ImageNoTextWithCaptionCentered.args = {
   ...defaultsDark,
   src:
@@ -66,7 +63,7 @@ ImageNoTextWithCaptionCentered.args = {
   isCentered: true,
 };
 
-export const ImageNoTextWithCaptionLeft = VideoTemplate.bind({});
+export const ImageNoTextWithCaptionLeft: StoryFn<typeof VideoImage> = VideoImageTemplate.bind({});
 ImageNoTextWithCaptionLeft.args = {
   ...defaultsDark,
   src:
@@ -75,7 +72,7 @@ ImageNoTextWithCaptionLeft.args = {
   caption: 'Sample Video Caption',
 };
 
-export const ImageFull = VideoTemplate.bind({});
+export const ImageFull: StoryFn<typeof VideoImage> = VideoImageTemplate.bind({});
 ImageFull.args = {
   ...defaultsDark,
   title: 'Sample Image Title',
diff --git a/apps/nextjs-website/stories/VideoImage/videoImageCommons.tsx b/apps/nextjs-website/stories/VideoImage/videoImageCommons.tsx
index cb841543c..cf44f4d98 100644
--- a/apps/nextjs-website/stories/VideoImage/videoImageCommons.tsx
+++ b/apps/nextjs-website/stories/VideoImage/videoImageCommons.tsx
@@ -3,9 +3,9 @@ import { VideoImage } from '@react-components/components';
 import { VideoImageProps } from '@react-components/types';
 
 // Define a "Template" function that sets how args map to rendering
-export const VideoTemplate: StoryFn<VideoImageProps> = (args) => <VideoImage {...args} />;
+export const VideoImageTemplate: StoryFn<VideoImageProps> = (args) => <VideoImage {...args} />;
 
-const createVideoDefaults = (theme: 'dark' | 'light') => ({
+const createVideoImageDefaults = (theme: 'dark' | 'light') => ({
   src: 'https://assets.mixkit.co/videos/preview/mixkit-person-typing-on-a-computer-in-detail-4907-large.mp4',
   autoplay: false,
   loop: false,
@@ -16,5 +16,5 @@ const createVideoDefaults = (theme: 'dark' | 'light') => ({
 });
 
 // Usage example
-export const defaultsDark = createVideoDefaults('dark');
-export const defaultsLight = createVideoDefaults('light');
\ No newline at end of file
+export const defaultsDark = createVideoImageDefaults('dark');
+export const defaultsLight = createVideoImageDefaults('light');
\ No newline at end of file