stories.ts

import type { StoryObj } from '@storybook/web-components';
import type { RouterLocation } from '@vaadin/router';
import { html } from 'lit';
import { rest } from 'msw';
import { absenceNotices } from '../../data-mocks.js';
import './register.js';

export default {
  title: 'Absence/Pages/Details',
  render: ({ id }: { id: string }) =>
    html`<att-absence-details .location=${{ params: { id: id } } as unknown as RouterLocation}></att-absence-details>`,
  args: {
    id: '0'
  },
  parameters: {
    layout: 'fullscreen',
    msw: {
      handlers: [
        rest.get('/api/v2/absence-notices/0', async (_, res, ctx) => res(ctx.json(absenceNotices[0]))),
        rest.get('/api/v2/absence-notices/1', async (_, res, ctx) => res(ctx.status(404))),
        rest.get('/api/v2/absence-notices/2', async (_, res, ctx) => res(ctx.delay(3000), ctx.json(absenceNotices[1])))
      ]
    }
  }
};

export const Desktop: StoryObj = {};

export const Mobile: StoryObj = {
  parameters: {
    viewport: {
      defaultViewport: 'iphone6'
    }
  }
};

export const NotFound: StoryObj = {
  ...Mobile,
  args: {
    id: '1'
  }
};

export const Loading: StoryObj = {
  ...Mobile,
  args: {
    id: '2'
  }
};