refactor(stories): co-locate stories with components (#2078)

* refactor: move ActionButton component * refactor: move BanUserButton component * refactor: move ChatActionMessage component * refactor: move ChatContainer component * refactor: move AuthModal component * refactor: move BrowserNotifyModal component * refactor: move ChatUserMessage component * refactor: move ChatJoinMessage component * refactor: move ChatTextField component * refactor: move ChatUserBadge component * refactor: move FollowerCollection and SingleFollower components * fix: bad import path * refactor: move FollowModal component * refactor: move Modal component * refactor: move ContentHeader component * refactor: move ChatSystemMessage component * refactor: move Header component * refactor: move Footer component * refactor: move StatusBar component * refactor: move OfflineBanner component * refactor: move OwncastPlayer component * refactor: move IndieAuthModal component * refactor: move SocialLinks component * refactor: move VideoPoster component * refactor: move FollowModal component * refactor: move FediAuthModal.tsx component * refactor: move UserDropdown component * refactor: move ChatSocialMessage component * refactor: move Logo component * refactor: move NotifyReminderPopup component * refactor: move NameChangeModal component * refactor: move FatalErrorStateModal component * refactor: move ChatModeratorNotification component * refactor: move ChatModerationActionMenu and ChatModerationDetailsModal components * refactor: move CustomPageContent component * refactor: move storybook Introduction file * refactor: update storybook story import path * refactor: move storybook preview styles * refactor: move storybook doc pages * refactor: move Color and ImageAsset components * fix: bad import path * fix: bad import path in story file
2022-09-03 20:38:52 +02:00
parent 9f550a87d2
commit 5ebbbb8bf2
82 changed files with 120 additions and 121 deletions
--- a/web/components/common/ContentHeader/ContentHeader.stories.tsx
+++ b/web/components/common/ContentHeader/ContentHeader.stories.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ContentHeader from './ContentHeader';
+
+export default {
+  title: 'owncast/Components/Content Header',
+  component: ContentHeader,
+  parameters: {},
+} as ComponentMeta<typeof ContentHeader>;
+
+const Template: ComponentStory<typeof ContentHeader> = args => <ContentHeader {...args} />;
+
+export const Example = Template.bind({});
+Example.args = {
+  name: 'My Awesome Owncast Stream',
+  summary: 'A calvacade of glorious sights and sounds',
+  tags: ['word', 'tag with spaces', 'music'],
+  logo: 'https://watch.owncast.online/logo',
+  links: [
+    {
+      platform: 'github',
+      url: 'https://github.com/owncast/owncast',
+      icon: 'https://watch.owncast.online/img/platformlogos/github.svg',
+    },
+    {
+      platform: 'Documentation',
+      url: 'https://owncast.online',
+      icon: 'https://watch.owncast.online/img/platformlogos/link.svg',
+    },
+    {
+      platform: 'mastodon',
+      url: 'https://fosstodon.org/users/owncast',
+      icon: 'https://watch.owncast.online/img/platformlogos/mastodon.svg',
+    },
+  ],
+};
+
+export const LongContent = Template.bind({});
+LongContent.args = {
+  name: 'My Awesome Owncast Stream, streaming the best of streams and some lorem ipsum too',
+  summary:
+    'A calvacade of glorious sights and sounds. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+  tags: [
+    'word',
+    'tag with spaces',
+    'music',
+    'more tags',
+    'a bunch',
+    'keep going',
+    'and more',
+    'just a few more',
+    'video games',
+    'things',
+    'stuff',
+    'ok some more',
+    'this should do it',
+  ],
+  logo: 'https://watch.owncast.online/logo',
+  links: [
+    {
+      platform: 'github',
+      url: 'https://github.com/owncast/owncast',
+      icon: 'https://watch.owncast.online/img/platformlogos/github.svg',
+    },
+    {
+      platform: 'Documentation',
+      url: 'https://owncast.online',
+      icon: 'https://watch.owncast.online/img/platformlogos/link.svg',
+    },
+    {
+      platform: 'mastodon',
+      url: 'https://fosstodon.org/users/owncast',
+      icon: 'https://watch.owncast.online/img/platformlogos/mastodon.svg',
+    },
+  ],
+};
--- a/web/components/common/Logo/Logo.stories.tsx
+++ b/web/components/common/Logo/Logo.stories.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import OwncastLogo from './Logo';
+
+export default {
+  title: 'owncast/Components/Header Logo',
+  component: OwncastLogo,
+  parameters: {},
+} as ComponentMeta<typeof OwncastLogo>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof OwncastLogo> = args => <OwncastLogo {...args} />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Logo = Template.bind({});
+Logo.args = {
+  url: '/logo',
+};
+
+export const DemoServer = Template.bind({});
+DemoServer.args = {
+  url: 'https://watch.owncast.online/logo',
+};
--- a/web/components/common/UserDropdown/UserDropdown.stories.tsx
+++ b/web/components/common/UserDropdown/UserDropdown.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import UserDropdown from './UserDropdown';
+
+export default {
+  title: 'owncast/Components/User settings menu',
+  component: UserDropdown,
+  parameters: {},
+} as ComponentMeta<typeof UserDropdown>;
+
+// This component uses Recoil internally so wrap it in a RecoilRoot.
+const Example = args => (
+  <RecoilRoot>
+    <UserDropdown {...args} />
+  </RecoilRoot>
+);
+
+const Template: ComponentStory<typeof UserDropdown> = args => <Example {...args} />;
+
+export const ChatEnabled = Template.bind({});
+ChatEnabled.args = {
+  username: 'test-user',
+};
+
+export const ChatDisabled = Template.bind({});
+ChatDisabled.args = {
+  username: 'test-user',
+};
--- a/web/components/common/UserDropdown/UserDropdown.tsx
+++ b/web/components/common/UserDropdown/UserDropdown.tsx
@@ -16,7 +16,7 @@ import {
  appStateAtom,
 } from '../../stores/ClientConfigStore';
 import s from './UserDropdown.module.scss';
-import NameChangeModal from '../../modals/NameChangeModal';
+import NameChangeModal from '../../modals/NameChangeModal/NameChangeModal';
 import { AppStateOptions } from '../../stores/application-state';
 import AuthModal from '../../modals/AuthModal/AuthModal';