overleaf/services/web/frontend/stories/file-view.stories.js
Alf Eaton 199ab985a0 Merge pull request #7223 from overleaf/ta-storybook-organise
Reorganise Storybook Stories

GitOrigin-RevId: 91014f49f84c645f87091724f03a007b731a8ad5
2022-04-05 12:16:53 +00:00

262 lines
6 KiB
JavaScript

import { ContextRoot } from '../js/shared/context/root-context'
import FileView from '../js/features/file-view/components/file-view'
import useFetchMock from './hooks/use-fetch-mock'
const bodies = {
latex: `\\documentclass{article}
\\begin{document}
First document. This is a simple example, with no
extra parameters or packages included.
\\end{document}`,
bibtex: `@book{latexcompanion,
author = "Michel Goossens and Frank Mittelbach and Alexander Samarin",
title = "The \\LaTeX\\ Companion",
year = "1993",
publisher = "Addison-Wesley",
address = "Reading, Massachusetts"
}`,
text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
}
const setupFetchMock = fetchMock => {
return fetchMock
.head('express:/project/:project_id/file/:file_id', {
status: 201,
headers: { 'Content-Length': 10000 },
})
.post('express:/project/:project_id/linked_file/:file_id/refresh', {
status: 204,
})
.post('express:/project/:project_id/references/indexAll', {
status: 204,
})
}
const fileData = {
id: 'file-id',
name: 'file.tex',
created: new Date().toISOString(),
}
export const FileFromUrl = args => {
useFetchMock(fetchMock =>
setupFetchMock(fetchMock).get(
'express:/project/:project_id/file/:file_id',
{ body: bodies.latex }
)
)
return <FileView {...args} />
}
FileFromUrl.args = {
file: {
...fileData,
linkedFileData: {
url: 'https://example.com/source-file.tex',
provider: 'url',
},
},
}
export const FileFromProjectWithLinkableProjectId = args => {
useFetchMock(fetchMock =>
setupFetchMock(fetchMock).get(
'express:/project/:project_id/file/:file_id',
{ body: bodies.latex }
)
)
return <FileView {...args} />
}
FileFromProjectWithLinkableProjectId.args = {
file: {
...fileData,
linkedFileData: {
source_project_id: 'source-project-id',
source_entity_path: '/source-file.tex',
provider: 'project_file',
},
},
}
export const FileFromProjectWithoutLinkableProjectId = args => {
useFetchMock(fetchMock =>
setupFetchMock(fetchMock).get(
'express:/project/:project_id/file/:file_id',
{ body: bodies.latex }
)
)
return <FileView {...args} />
}
FileFromProjectWithoutLinkableProjectId.args = {
file: {
...fileData,
linkedFileData: {
v1_source_doc_id: 'v1-source-id',
source_entity_path: '/source-file.tex',
provider: 'project_file',
},
},
}
export const FileFromProjectOutputWithLinkableProject = args => {
useFetchMock(fetchMock =>
setupFetchMock(fetchMock).get(
'express:/project/:project_id/file/:file_id',
{ body: bodies.latex }
)
)
return <FileView {...args} />
}
FileFromProjectOutputWithLinkableProject.args = {
file: {
...fileData,
linkedFileData: {
source_project_id: 'source_project_id',
source_output_file_path: '/source-file.tex',
provider: 'project_output_file',
},
},
}
export const FileFromProjectOutputWithoutLinkableProjectId = args => {
useFetchMock(fetchMock =>
setupFetchMock(fetchMock).get(
'express:/project/:project_id/file/:file_id',
{ body: bodies.latex }
)
)
return <FileView {...args} />
}
FileFromProjectOutputWithoutLinkableProjectId.args = {
file: {
...fileData,
linkedFileData: {
v1_source_doc_id: 'v1-source-id',
source_output_file_path: '/source-file.tex',
provider: 'project_output_file',
},
},
}
export const ImageFile = args => {
useFetchMock(setupFetchMock) // NOTE: can't mock img src request
return <FileView {...args} />
}
ImageFile.storyName = 'Image File (Error)'
ImageFile.args = {
file: {
...fileData,
id: '60097ca20454610027c442a8',
name: 'file.jpg',
linkedFileData: {
source_project_id: 'source_project_id',
source_entity_path: '/source-file.jpg',
provider: 'project_file',
},
},
}
export const ThirdPartyReferenceFile = args => {
useFetchMock(fetchMock =>
setupFetchMock(fetchMock).get(
'express:/project/:project_id/file/:file_id',
{ body: bodies.bibtex }
)
)
return <FileView {...args} />
}
ThirdPartyReferenceFile.args = {
file: {
...fileData,
name: 'references.bib',
linkedFileData: {
provider: 'zotero',
},
},
}
export const ThirdPartyReferenceFileWithError = args => {
useFetchMock(fetchMock =>
setupFetchMock(fetchMock).head(
'express:/project/:project_id/file/:file_id',
{ status: 500 },
{ overwriteRoutes: true }
)
)
return <FileView {...args} />
}
ThirdPartyReferenceFileWithError.storyName =
'Third Party Reference File (Error)'
ThirdPartyReferenceFileWithError.args = {
file: {
...fileData,
id: '500500500500500500500500',
name: 'references.bib',
linkedFileData: {
provider: 'zotero',
},
},
}
export const TextFile = args => {
useFetchMock(fetchMock =>
setupFetchMock(fetchMock).get(
'express:/project/:project_id/file/:file_id',
{ body: bodies.text },
{ overwriteRoutes: true }
)
)
return <FileView {...args} />
}
TextFile.args = {
file: {
...fileData,
linkedFileData: {
source_project_id: 'source-project-id',
source_entity_path: '/source-file.txt',
provider: 'project_file',
},
name: 'file.txt',
},
}
export const UploadedFile = args => {
useFetchMock(fetchMock =>
setupFetchMock(fetchMock).head(
'express:/project/:project_id/file/:file_id',
{ status: 500 },
{ overwriteRoutes: true }
)
)
return <FileView {...args} />
}
UploadedFile.storyName = 'Uploaded File (Error)'
UploadedFile.args = {
file: {
...fileData,
linkedFileData: null,
name: 'file.jpg',
},
}
export default {
title: 'Editor / FileView',
component: FileView,
argTypes: {
storeReferencesKeys: { action: 'store references keys' },
},
decorators: [
Story => (
<ContextRoot ide={window._ide} settings={{}}>
<Story />
</ContextRoot>
),
],
}