[B2BP-753] - Implementing 'Video' EC inside B2BP (#368)

* commit build fix

* commit changeset

.changeset/late-gifts-pay.md

@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Fix storybook error for Video-Image component

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,53 +10,50 @@ 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',
   subtitle: 'Sample Video Subtitle',
   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:
     'https://notifichedigitali.pagopa.it/static/images/hero-enti-background.png',
   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',

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');
+export const defaultsDark = createVideoImageDefaults('dark');
+export const defaultsLight = createVideoImageDefaults('light');