Migrated Storybook notation from CSF2 to CSF3 (#3412)

* Migrate web action-buttons directory to CSF3 notation

* Migrate web chat directory to CSF3 notation

* Migrate web common directory to CSF3 notation

* Migrate web layout directory to CSF3 notation

* Migrate web modals directory to CSF3 notation

* Migrate web ui directory to CSF3 notation

* Migrate web video directory to CSF3 notation

* Migrate web stories directory to CSF3 notation

web/components/modals/AuthModal/AuthModal.stories.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { useEffect } from 'react';
+import { StoryFn, Meta } from '@storybook/react';
 import { RecoilRoot, useSetRecoilState } from 'recoil';
 import { AuthModal } from './AuthModal';
 import { currentUserAtom } from '../../stores/ClientConfigStore';
@@ -26,17 +26,20 @@ const Example = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'owncast/Modals/Auth',
   component: AuthModal,
   parameters: {},
-} as ComponentMeta<typeof AuthModal>;
+} satisfies Meta<typeof AuthModal>;
 
-const Template: ComponentStory<typeof AuthModal> = () => (
+export default meta;
+
+const Template: StoryFn<typeof AuthModal> = () => (
   <RecoilRoot>
     <Example />
   </RecoilRoot>
 );
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});
+export const Basic = {
+  render: Template,
+};

web/components/modals/BrowserNotifyModal/BrowserNotifyModal.stories.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
 import { BrowserNotifyModal } from './BrowserNotifyModal';
 import BrowserNotifyModalMock from '../../../stories/assets/mocks/notify-modal.png';
@@ -10,7 +9,7 @@ const Example = () => (
   </div>
 );
 
-export default {
+const meta = {
   title: 'owncast/Modals/Browser Notifications',
   component: BrowserNotifyModal,
   parameters: {
@@ -31,14 +30,16 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof BrowserNotifyModal>;
+} satisfies Meta<typeof BrowserNotifyModal>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof BrowserNotifyModal> = () => (
+export default meta;
+
+const Template: StoryFn<typeof BrowserNotifyModal> = () => (
   <RecoilRoot>
     <Example />
   </RecoilRoot>
 );
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});
+export const Basic = {
+  render: Template,
+};

web/components/modals/ChatModal/ChatModal.stories.tsx

@@ -1,21 +1,21 @@
-/* eslint-disable object-shorthand */
-
-import React, { useEffect } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { useEffect } from 'react';
+import { StoryFn, Meta } from '@storybook/react';
 import { RecoilRoot, useSetRecoilState } from 'recoil';
 import { ChatModal, ChatModalProps } from './ChatModal';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { CurrentUser } from '../../../interfaces/current-user';
 import { currentUserAtom } from '../../stores/ClientConfigStore';
 
-export default {
+const meta = {
   title: 'owncast/Chat/Chat modal',
   component: ChatModal,
   parameters: {
     chromatic: { diffThreshold: 0.8 },
     docs: {},
   },
-} as ComponentMeta<typeof ChatModal>;
+} satisfies Meta<typeof ChatModal>;
+
+export default meta;
 
 const testMessages = `[
 		{
@@ -578,21 +578,24 @@ const Component = args => {
   return <ChatModal {...args} />;
 };
 
-const Template: ComponentStory<typeof ChatModal> = args => (
+const Template: StoryFn<typeof ChatModal> = args => (
   <RecoilRoot>
     <Component {...args} />
   </RecoilRoot>
 );
 
-export const Example = Template.bind({});
-Example.args = {
-  loading: false,
-  messages: messages,
-  usernameToHighlight: 'testuser',
-  chatUserId: 'testuser',
-  isModerator: true,
-  showInput: true,
-  chatAvailable: true,
-  handleClose: () => {},
-  currentUser: currentUser,
-} as ChatModalProps;
+export const Example = {
+  render: Template,
+
+  args: {
+    loading: false,
+    messages,
+    usernameToHighlight: 'testuser',
+    chatUserId: 'testuser',
+    isModerator: true,
+    showInput: true,
+    chatAvailable: true,
+    handleClose: () => {},
+    currentUser,
+  } as ChatModalProps,
+};

web/components/modals/FatalErrorStateModal/FatalErrorStateModal.stories.tsx

@@ -1,21 +1,17 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { FatalErrorStateModal } from './FatalErrorStateModal';
 
-export default {
+const meta = {
   title: 'owncast/Modals/Global error state',
   component: FatalErrorStateModal,
   parameters: {},
-} as ComponentMeta<typeof FatalErrorStateModal>;
+} satisfies Meta<typeof FatalErrorStateModal>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof FatalErrorStateModal> = args => (
-  <FatalErrorStateModal {...args} />
-);
+export default meta;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Example = Template.bind({});
-Example.args = {
-  title: 'Example error title',
-  message: 'Example error message',
+export const Example = {
+  args: {
+    title: 'Example error title',
+    message: 'Example error message',
+  },
 };

web/components/modals/FediAuthModal/FediAuthModal.stories.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { FediAuthModal } from './FediAuthModal';
 import FediAuthModalMock from '../../../stories/assets/mocks/fediauth-modal.png';
 
-export default {
+const meta = {
   title: 'owncast/Modals/FediAuth',
   component: FediAuthModal,
   parameters: {
@@ -13,20 +12,22 @@ export default {
       scale: 0.5,
     },
   },
-} as ComponentMeta<typeof FediAuthModal>;
+} satisfies Meta<typeof FediAuthModal>;
 
-const Template: ComponentStory<typeof FediAuthModal> = args => <FediAuthModal {...args} />;
+export default meta;
 
-export const NotYetAuthenticated = Template.bind({});
-NotYetAuthenticated.args = {
-  displayName: 'fake-user',
-  authenticated: false,
-  accessToken: '',
+export const NotYetAuthenticated = {
+  args: {
+    displayName: 'fake-user',
+    authenticated: false,
+    accessToken: '',
+  },
 };
 
-export const Authenticated = Template.bind({});
-Authenticated.args = {
-  displayName: 'fake-user',
-  authenticated: true,
-  accessToken: '',
+export const Authenticated = {
+  args: {
+    displayName: 'fake-user',
+    authenticated: true,
+    accessToken: '',
+  },
 };

web/components/modals/FollowModal/FollowModal.stories.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { FollowModal } from './FollowModal';
 import FollowModalMock from '../../../stories/assets/mocks/follow-modal.png';
 
@@ -9,7 +8,7 @@ const Example = () => (
   </div>
 );
 
-export default {
+const meta = {
   title: 'owncast/Modals/Follow',
   component: FollowModal,
   parameters: {
@@ -29,10 +28,12 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof FollowModal>;
+} satisfies Meta<typeof FollowModal>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof FollowModal> = () => <Example />;
+export default meta;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});
+const Template: StoryFn<typeof FollowModal> = () => <Example />;
+
+export const Basic = {
+  render: Template,
+};

web/components/modals/IndieAuthModal/IndieAuthModal.stories.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { IndieAuthModal } from './IndieAuthModal';
 import Mock from '../../../stories/assets/mocks/indieauth-modal.png';
 
@@ -9,7 +8,7 @@ const Example = () => (
   </div>
 );
 
-export default {
+const meta = {
   title: 'owncast/Modals/IndieAuth',
   component: IndieAuthModal,
   parameters: {
@@ -19,10 +18,12 @@ export default {
       scale: 0.5,
     },
   },
-} as ComponentMeta<typeof IndieAuthModal>;
+} satisfies Meta<typeof IndieAuthModal>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof IndieAuthModal> = () => <Example />;
+export default meta;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});
+const Template: StoryFn<typeof IndieAuthModal> = () => <Example />;
+
+export const Basic = {
+  render: Template,
+};

web/components/modals/NameChangeModal/NameChangeModal.stories.tsx

@@ -1,15 +1,17 @@
-import React, { useEffect } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { useEffect } from 'react';
+import { StoryFn, Meta } from '@storybook/react';
 import { RecoilRoot, useSetRecoilState } from 'recoil';
 import { NameChangeModal } from './NameChangeModal';
 import { CurrentUser } from '../../../interfaces/current-user';
 import { currentUserAtom } from '../../stores/ClientConfigStore';
 
-export default {
+const meta = {
   title: 'owncast/Modals/Name Change',
   component: NameChangeModal,
   parameters: {},
-} as ComponentMeta<typeof NameChangeModal>;
+} satisfies Meta<typeof NameChangeModal>;
+
+export default meta;
 
 const Example = () => {
   const setCurrentUser = useSetRecoilState<CurrentUser>(currentUserAtom);
@@ -32,10 +34,12 @@ const Example = () => {
   );
 };
 
-const Template: ComponentStory<typeof NameChangeModal> = () => (
+const Template: StoryFn<typeof NameChangeModal> = () => (
   <RecoilRoot>
     <Example />
   </RecoilRoot>
 );
 
-export const Basic = Template.bind({});
+export const Basic = {
+  render: Template,
+};