signal-desktop/ts/components/GroupV2JoinDialog.stories.tsx

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import * as React from 'react';
import { action } from '@storybook/addon-actions';
import type { Meta } from '@storybook/react';
import type { PropsType } from './GroupV2JoinDialog';
import { GroupV2JoinDialog } from './GroupV2JoinDialog';
import { setupI18n } from '../util/setupI18n';
import enMessages from '../../_locales/en/messages.json';

const i18n = setupI18n('en', enMessages);

const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
  memberCount: overrideProps.memberCount ?? 12,
  avatar: overrideProps.avatar,
  title: overrideProps.title ?? 'Random Group!',
  approvalRequired: overrideProps.approvalRequired ?? false,
  groupDescription: overrideProps.groupDescription,
  join: action('join'),
  onClose: action('onClose'),
  i18n,
});

export default {
  title: 'Components/GroupV2JoinDialog',
  argTypes: {},
  args: {},
} satisfies Meta<PropsType>;

export function Basic(): JSX.Element {
  return <GroupV2JoinDialog {...createProps()} />;
}

export function ApprovalRequired(): JSX.Element {
  return (
    <GroupV2JoinDialog
      {...createProps({
        approvalRequired: true,
        title: 'Approval required!',
      })}
    />
  );
}

export function WithAvatar(): JSX.Element {
  return (
    <GroupV2JoinDialog
      {...createProps({
        avatar: {
          url: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
        },
        title: 'Has an avatar!',
      })}
    />
  );
}

export function WithOneMember(): JSX.Element {
  return (
    <GroupV2JoinDialog
      {...createProps({
        memberCount: 1,
        title: 'Just one member!',
      })}
    />
  );
}

export function AvatarLoadingState(): JSX.Element {
  return (
    <GroupV2JoinDialog
      {...createProps({
        avatar: {
          loading: true,
        },
        title: 'Avatar loading!',
      })}
    />
  );
}

export function Full(): JSX.Element {
  return (
    <GroupV2JoinDialog
      {...createProps({
        avatar: {
          url: '/fixtures/giphy-GVNvOUpeYmI7e.gif',
        },
        memberCount: 16,
        groupDescription: 'Discuss meets, events, training, and recruiting.',
        title: 'Underwater basket weavers (LA)',
      })}
    />
  );
}