import { withContextRoot } from './utils/with-context-root' import { useCallback, useMemo, useState } from 'react' import useFetchMock from './hooks/use-fetch-mock' import { setupContext } from './fixtures/context' import { Button } from 'react-bootstrap' import PdfPreviewPane from '../js/features/pdf-preview/components/pdf-preview-pane' import PdfPreview from '../js/features/pdf-preview/components/pdf-preview' import PdfFileList from '../js/features/pdf-preview/components/pdf-file-list' import { buildFileList } from '../js/features/pdf-preview/util/file-list' import PdfLogsViewer from '../js/features/pdf-preview/components/pdf-logs-viewer' import PdfPreviewError from '../js/features/pdf-preview/components/pdf-preview-error' import PdfPreviewHybridToolbar from '../js/features/pdf-preview/components/pdf-preview-hybrid-toolbar' import { useDetachCompileContext as useCompileContext } from '../js/shared/context/detach-compile-context' import { dispatchDocChanged, mockBuildFile, mockClearCache, mockCompile, mockCompileError, mockCompileValidationIssues, mockEventTracking, outputFiles, } from './fixtures/compile' import { cloneDeep } from 'lodash' setupContext() export default { title: 'Editor / PDF Preview', component: PdfPreview, subcomponents: { PdfPreviewHybridToolbar, PdfFileList, PdfPreviewError, }, } const project = { _id: 'a-project', name: 'A Project', features: {}, tokens: {}, owner: { _id: 'a-user', email: 'stories@overleaf.com', }, members: [], invites: [], } const scope = { project, settings: { syntaxValidation: true, }, hasLintingError: false, $applyAsync: () => {}, editor: { sharejs_doc: { doc_id: 'test-doc', getSnapshot: () => 'some doc content', }, }, } export const Interactive = () => { useFetchMock(fetchMock => { mockCompile(fetchMock) mockBuildFile(fetchMock) mockClearCache(fetchMock) }) const Inner = () => { const context = useCompileContext() const { setHasLintingError } = context const toggleLintingError = useCallback(() => { setHasLintingError(value => !value) }, [setHasLintingError]) const values = useMemo(() => { const entries = Object.entries(context).sort((a, b) => { return a[0].localeCompare(b[0]) }) const values = { boolean: [], other: [] } for (const entry of entries) { const type = typeof entry[1] if (type === 'boolean') { values.boolean.push(entry) } else if (type !== 'function') { values.other.push(entry) } } return values }, [context]) return (
{values.boolean.map(([key, value]) => { return ( ) })}
{value ? '🟢' : '🔴'} {key}
{values.other.map(([key, value]) => { return ( ) })}
{key}
                          {JSON.stringify(value, null, 2)}
                        
) } return withContextRoot(
, scope ) } const compileStatuses = [ 'autocompile-backoff', 'clear-cache', 'clsi-maintenance', 'compile-in-progress', 'exited', 'failure', 'generic', 'project-too-large', 'rate-limited', 'success', 'terminated', 'timedout', 'too-recently-compiled', 'unavailable', 'validation-problems', 'foo', ] export const CompileError = () => { const [status, setStatus] = useState('success') useFetchMock(fetchMock => { mockCompileError(fetchMock, status, 0) mockBuildFile(fetchMock) }) const Inner = () => { const { startCompile } = useCompileContext() const handleStatusChange = useCallback( event => { setStatus(event.target.value) window.setTimeout(() => { startCompile() }, 0) }, [startCompile] ) return (
) } return withContextRoot( <> , scope ) } const compileErrors = [ 'autocompile-backoff', 'clear-cache', 'clsi-maintenance', 'compile-in-progress', 'exited', 'failure', 'generic', 'project-too-large', 'rate-limited', 'success', 'terminated', 'timedout', 'too-recently-compiled', 'unavailable', 'validation-problems', 'foo', ] export const DisplayError = () => { useFetchMock(fetchMock => { mockCompile(fetchMock) }) return withContextRoot( <> {compileErrors.map(error => (
{error}
))} , scope ) } export const HybridToolbar = () => { useFetchMock(fetchMock => { mockCompile(fetchMock, 500) mockBuildFile(fetchMock) mockEventTracking(fetchMock) }) return withContextRoot(
, scope ) } export const FileList = () => { const fileList = useMemo(() => { return buildFileList(cloneDeep(outputFiles)) }, []) return (
) } export const Logs = () => { useFetchMock(fetchMock => { mockCompileError(fetchMock, 400, 0) mockBuildFile(fetchMock) mockClearCache(fetchMock) }) return withContextRoot(
, scope ) } const validationProblems = { sizeCheck: { resources: [ { path: 'foo/bar', kbSize: 76221 }, { path: 'bar/baz', kbSize: 2342 }, ], }, mainFile: true, conflictedPaths: [ { path: 'foo/bar', }, { path: 'foo/baz', }, ], } export const ValidationIssues = () => { useFetchMock(fetchMock => { mockCompileValidationIssues(fetchMock, validationProblems, 0) mockBuildFile(fetchMock) }) return withContextRoot(, scope) }