overleaf/services/web/frontend/stories/modals/create-file/create-file-name-input.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

64 lines
1.8 KiB
JavaScript

import FileTreeCreateNameInput from '../../../js/features/file-tree/components/file-tree-create/file-tree-create-name-input'
import FileTreeCreateNameProvider from '../../../js/features/file-tree/contexts/file-tree-create-name'
import {
BlockedFilenameError,
DuplicateFilenameError,
} from '../../../js/features/file-tree/errors'
import { ModalBodyDecorator, ModalContentDecorator } from '../modal-decorators'
export const DefaultLabel = args => (
<FileTreeCreateNameProvider initialName="example.tex">
<FileTreeCreateNameInput {...args} />
</FileTreeCreateNameProvider>
)
export const CustomLabel = args => (
<FileTreeCreateNameProvider initialName="example.tex">
<FileTreeCreateNameInput {...args} />
</FileTreeCreateNameProvider>
)
CustomLabel.args = {
label: 'File Name in this Project',
}
export const FocusName = args => (
<FileTreeCreateNameProvider initialName="example.tex">
<FileTreeCreateNameInput {...args} />
</FileTreeCreateNameProvider>
)
FocusName.args = {
focusName: true,
}
export const CustomPlaceholder = args => (
<FileTreeCreateNameProvider>
<FileTreeCreateNameInput {...args} />
</FileTreeCreateNameProvider>
)
CustomPlaceholder.args = {
placeholder: 'Enter a file name…',
}
export const DuplicateError = args => (
<FileTreeCreateNameProvider initialName="main.tex">
<FileTreeCreateNameInput {...args} />
</FileTreeCreateNameProvider>
)
DuplicateError.args = {
error: new DuplicateFilenameError(),
}
export const BlockedError = args => (
<FileTreeCreateNameProvider initialName="main.tex">
<FileTreeCreateNameInput {...args} />
</FileTreeCreateNameProvider>
)
BlockedError.args = {
error: new BlockedFilenameError(),
}
export default {
title: 'Editor / Modals / Create File / File Name Input',
component: FileTreeCreateNameInput,
decorators: [ModalBodyDecorator, ModalContentDecorator],
}