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

import * as React from 'react';
import {
  guild,
  guildData,
  member,
  roleCategory,
  roleCategory2,
} from '../../fixtures/storyData';
import { RolePicker, RolePickerProps } from './RolePicker';

const props: Partial<RolePickerProps> = {
  guildData: guildData,
  member: member,
  guild: guild,
  roles: [...roleCategory, ...roleCategory2],
  editable: false,
};

const noMessageArgs: Partial<RolePickerProps> = {
  ...props,
  guildData: {
    ...guildData,
    message: '',
  },
};

const noCategoriesArgs: Partial<RolePickerProps> = {
  ...props,
  guildData: {
    ...guildData,
    categoriesList: [],
  },
};

const emptyArgs = {
  ...props,
  guildData: {
    ...guildData,
    categoriesList: [],
    message: '',
  },
};

export default {
  title: 'Organisms/Role Picker',
  args: props,
  component: RolePicker,
};

export const Full = (args) => <RolePicker {...args} />;
export const EditableFull = (args) => <RolePicker {...args} />;
EditableFull.args = {
  editable: true,
};
export const NoMessage = (args) => <RolePicker {...args} />;
NoMessage.args = noMessageArgs;
export const NoCategories = (args) => <RolePicker {...args} />;
NoCategories.args = noCategoriesArgs;
export const Empty = (args) => <RolePicker {...args} />;
Empty.args = emptyArgs;