sentry/docs-ui/components/_activity.stories.js

import React from 'react';

import ActivityItem from 'app/components/activity/item';
import ActivityAvatar from 'app/components/activity/item/avatar';
import ActivityBubble from 'app/components/activity/item/bubble';

const user = {
  username: 'billy@sentry.io',
  identities: [],
  id: '1',
  name: 'billy@sentry.io',
  dateJoined: '2019-03-09T06:52:42.836Z',
  avatar: {avatarUuid: null, avatarType: 'letter_avatar'},
  email: 'billy@sentry.io',
};

export default {
  title: 'Core/_Activity/Item',
};

export const DefaultActivityItem = ({hideDate}) => (
  <ActivityItem
    author={{type: 'user', user}}
    item={{id: '123'}}
    date={new Date()}
    header={<div>{user.email}</div>}
    hideDate={hideDate}
  >
    Activity Item
  </ActivityItem>
);

DefaultActivityItem.storyName = 'default ActivityItem';
DefaultActivityItem.args = {
  hideDate: false,
};
DefaultActivityItem.parameters = {
  docs: {
    description: {
      story:
        'An Activity Item is composed of: an author, header, body, and additionally timestamp and a status.',
    },
  },
};

export const WithCustomHeader = ({hideDate}) => (
  <ActivityItem
    author={{type: 'user', user}}
    item={{id: '123'}}
    date={new Date()}
    header={() => (
      <div style={{backgroundColor: '#ccc'}}>Custom header (no timestamp)</div>
    )}
    hideDate={hideDate}
  >
    Activity Item
  </ActivityItem>
);

WithCustomHeader.storyName = 'with custom Header';
WithCustomHeader.args = {
  hideDate: false,
};
WithCustomHeader.parameters = {
  docs: {
    description: {
      story: 'Activity Item with a custom header',
    },
  },
};

export const WithFooter = ({hideDate}) => (
  <ActivityItem
    author={{type: 'user', user}}
    item={{id: '123'}}
    date={new Date()}
    header={<div>{user.email}</div>}
    footer={<div>Footer</div>}
    hideDate={hideDate}
  >
    Activity Item
  </ActivityItem>
);

WithFooter.storyName = 'with footer';
WithFooter.args = {
  hideDate: false,
};
WithFooter.parameters = {
  docs: {
    description: {
      story: 'Activity Item with a footer',
    },
  },
};

export const SystemActivity = ({hideDate}) => (
  <ActivityItem
    author={{type: 'system'}}
    item={{id: '123'}}
    date={new Date()}
    header={<div>Sentry detected something</div>}
    hideDate={hideDate}
  >
    Sentry did something
  </ActivityItem>
);

SystemActivity.storyName = 'system activity';
SystemActivity.args = {
  hideDate: false,
};
SystemActivity.parameters = {
  docs: {
    description: {
      story: 'An ActivityItem generated by Sentry',
    },
  },
};

export const Bubble = ({...args}) => (
  <ActivityBubble {...args}>
    <div>Activity Bubble</div>
    <div>Activity Bubble</div>
    <div>Activity Bubble</div>
    <div>Activity Bubble</div>
    <div>Activity Bubble</div>
  </ActivityBubble>
);
Bubble.component = ActivityBubble;
Bubble.args = {
  backgroundColor: '#fff',
  borderColor: 'red',
};
Bubble.argTypes = {
  backgroundColor: {control: 'color'},
  borderColor: {control: 'color'},
};
Bubble.parameters = {
  docs: {
    description: {
      story:
        'Activity bubble with arrow at the top-left. This should probably not be used directly unless creating a new component.',
    },
  },
};

export const Avatar = () => (
  <div>
    <h3>User</h3>
    <ActivityAvatar type="user" user={user} size={48} />

    <h3>System</h3>
    <ActivityAvatar type="system" size={48} />
  </div>
);
Avatar.parameters = {
  docs: {
    description: {
      story: 'Avatar based on the author type.',
    },
  },
};