v3/packages/design-system/templates/role-picker/RolePicker.stories.tsx

import * as React from 'react';
import {
  guild,
  guildData,
  guildEnum,
  mastheadSlugs,
  member,
  roleCategory,
  roleCategory2,
  user,
} from '../../fixtures/storyData';
import { RolePickerTemplate, RolePickerTemplateProps } from './RolePicker';

const props: RolePickerTemplateProps = {
  guildData: {
    ...guildData,
    message:
      'Hey, this is kind of a demo setup so features/use cases can be shown off.\n\nThanks for using Roleypoly <3',
  },
  member: member,
  guild: guild,
  guilds: mastheadSlugs,
  roles: [...roleCategory, ...roleCategory2],
  editable: false,
  user: user,
  guildEnumeration: guildEnum,
  activeGuildId: guild.id,
  onSubmit: () => {},
};

export default {
  title: 'Templates/Role Picker',
  components: RolePickerTemplate,
  args: props,
};

export const Default = (args) => {
  return <RolePickerTemplate {...args} />;
};

export const Editable = (args) => {
  return <RolePickerTemplate {...args} />;
};
Editable.args = {
  editable: true,
};