cetirizine

An experimental matrix client written in reactjs utilizing tailwind and storybook
git clone git://archive.git.mtrnord.blog/MTRNord/cetirizine.git
Log | Files | Refs | README | LICENSE

roomListItem.stories.tsx (3925B)

      1 import { Meta, StoryObj } from '@storybook/react';
      2 import RoomListItem from './roomListItem';
      3 import { OnlineState } from '../../../app/sdk/api/otherEnums';
      4 
      5 const meta: Meta<typeof RoomListItem> = {
      6     title: 'Chat/RoomList/Item',
      7     component: RoomListItem,
      8     argTypes: {
      9         avatarUrl: {
     10             required: false,
     11             name: "Avatar URL",
     12             description: "The URL of the avatar image",
     13         },
     14         displayname: {
     15             required: true,
     16             name: "Displayname",
     17             description: "The displayname of the Room",
     18         },
     19         dm: {
     20             required: false,
     21             defaultValue: false,
     22             control: "boolean",
     23             name: "DM",
     24             description: "Wether the room is a DM",
     25         },
     26         online: {
     27             required: false,
     28             defaultValue: false,
     29             control: "boolean",
     30             name: "Online",
     31             description: "Wether the user is online. Only used if dm is true",
     32         },
     33         active: {
     34             required: false,
     35             defaultValue: false,
     36             control: "boolean",
     37             name: "Active",
     38             description: "Wether the room is currently selected",
     39         },
     40     }
     41 };
     42 
     43 export default meta;
     44 type Story = StoryObj<typeof RoomListItem>;
     45 
     46 export const Fallback: Story = {
     47     args: {
     48         displayname: "test",
     49         dm: false,
     50         online: OnlineState.Unknown,
     51         avatarUrl: "",
     52         active: false,
     53     }
     54 };
     55 
     56 export const FallbackActive: Story = {
     57     args: {
     58         displayname: "test",
     59         dm: false,
     60         online: OnlineState.Unknown,
     61         avatarUrl: "",
     62         active: true,
     63     }
     64 };
     65 
     66 
     67 export const Image: Story = {
     68     args: {
     69         displayname: "test",
     70         avatarUrl: "https://randomuser.me/api/portraits/men/62.jpg",
     71         dm: false,
     72         online: OnlineState.Unknown,
     73         active: false,
     74     }
     75 };
     76 
     77 
     78 export const ImageActive: Story = {
     79     args: {
     80         displayname: "test",
     81         avatarUrl: "https://randomuser.me/api/portraits/men/62.jpg",
     82         dm: false,
     83         online: OnlineState.Unknown,
     84         active: true,
     85     }
     86 };
     87 
     88 export const DMOffline: Story = {
     89     args: {
     90         displayname: "test",
     91         avatarUrl: "https://randomuser.me/api/portraits/men/62.jpg",
     92         dm: true,
     93         online: OnlineState.Offline,
     94         active: false,
     95     }
     96 };
     97 
     98 export const DMOfflineActive: Story = {
     99     args: {
    100         displayname: "test",
    101         avatarUrl: "https://randomuser.me/api/portraits/men/62.jpg",
    102         dm: true,
    103         online: OnlineState.Online,
    104         active: true,
    105     }
    106 };
    107 
    108 export const DMUnknown: Story = {
    109     args: {
    110         displayname: "test",
    111         avatarUrl: "https://randomuser.me/api/portraits/men/62.jpg",
    112         dm: true,
    113         online: OnlineState.Unknown,
    114         active: false,
    115     }
    116 };
    117 
    118 export const DMUnknownActive: Story = {
    119     args: {
    120         displayname: "test",
    121         avatarUrl: "https://randomuser.me/api/portraits/men/62.jpg",
    122         dm: true,
    123         online: OnlineState.Unknown,
    124         active: true,
    125     }
    126 };
    127 
    128 
    129 export const DMOnline: Story = {
    130     args: {
    131         displayname: "test",
    132         avatarUrl: "https://randomuser.me/api/portraits/men/62.jpg",
    133         dm: true,
    134         online: OnlineState.Online,
    135         active: false,
    136     }
    137 };
    138 
    139 export const DMOnlineActive: Story = {
    140     args: {
    141         displayname: "test",
    142         avatarUrl: "https://randomuser.me/api/portraits/men/62.jpg",
    143         dm: true,
    144         online: OnlineState.Online,
    145         active: true,
    146     }
    147 };
    148 
    149 export const DMNoAvatarOffline: Story = {
    150     args: {
    151         displayname: "test",
    152         avatarUrl: "",
    153         dm: true,
    154         online: OnlineState.Offline,
    155         active: false,
    156     }
    157 };
    158 
    159 export const DMNoAvatarOnline: Story = {
    160     args: {
    161         displayname: "test",
    162         avatarUrl: "",
    163         dm: true,
    164         online: OnlineState.Online,
    165         active: false,
    166     }
    167 };