Fix change name modal story not rendering. Closes #2255

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

@@ -1,20 +1,41 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { RecoilRoot } from 'recoil';
+import { RecoilRoot, useSetRecoilState } from 'recoil';
 import { NameChangeModal } from './NameChangeModal';
+import { CurrentUser } from '../../../interfaces/current-user';
+import { currentUserAtom } from '../../stores/ClientConfigStore';
 
 export default {
-  title: 'owncast/Modals/Name change',
+  title: 'owncast/Modals/Name Change',
   component: NameChangeModal,
   parameters: {},
 } as ComponentMeta<typeof NameChangeModal>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof NameChangeModal> = args => (
+const Example = () => {
+  const setCurrentUser = useSetRecoilState<CurrentUser>(currentUserAtom);
+
+  useEffect(
+    () =>
+      setCurrentUser({
+        id: '1',
+        displayName: 'Test User',
+        displayColor: 3,
+        isModerator: false,
+      }),
+    [],
+  );
+
+  return (
+    <div>
+      <NameChangeModal />
+    </div>
+  );
+};
+
+const Template: ComponentStory<typeof NameChangeModal> = () => (
   <RecoilRoot>
-    <NameChangeModal />
+    <Example />
   </RecoilRoot>
 );
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Basic = Template.bind({});