overleaf/services/web/frontend/stories/word-count-modal.stories.js

import React from 'react'
import PropTypes from 'prop-types'

import WordCountModal from '../js/features/word-count-modal/components/word-count-modal'
import useFetchMock from './hooks/use-fetch-mock'

export const Interactive = ({
  mockResponse = 200,
  mockResponseDelay = 500,
  ...args
}) => {
  useFetchMock(fetchMock => {
    fetchMock.get(
      'express:/project/:projectId/wordcount',
      () => {
        switch (mockResponse) {
          case 400:
            return { status: 400, body: 'The project id is not valid' }

          case 200:
            return {
              texcount: {
                headers: 4,
                mathDisplay: 40,
                mathInline: 400,
                textWords: 4000,
              },
            }

          default:
            return mockResponse
        }
      },
      { delay: mockResponseDelay }
    )
  })

  return <WordCountModal {...args} />
}
Interactive.propTypes = {
  mockResponse: PropTypes.number,
  mockResponseDelay: PropTypes.number,
}

export default {
  title: 'Modals / Word Count',
  component: WordCountModal,
  args: {
    clsiServerId: 'server-id',
    projectId: 'project-id',
    show: true,
  },
  argTypes: {
    handleHide: { action: 'handleHide' },
    mockResponse: {
      name: 'Mock Response Status',
      type: { name: 'number', required: false },
      description: 'The status code that should be returned by the mock server',
      defaultValue: 200,
      control: {
        type: 'radio',
        options: [200, 500, 400],
      },
    },
    mockResponseDelay: {
      name: 'Mock Response Delay',
      type: { name: 'number', required: false },
      description: 'The delay before returning a response from the mock server',
      defaultValue: 500,
      control: {
        type: 'range',
        min: 0,
        max: 2500,
        step: 250,
      },
    },
  },
}