sxlxc/overleaf-server-arm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Yu Cong
2025-04-24 13:11:28 +08:00
commit ff9c54d5e4
5960 changed files with 834111 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
services/web/frontend/stories/ui/form/form-check-bs5.stories.tsx Normal file
View File

@@ -0,0 +1,62 @@
import { useRef, useLayoutEffect } from 'react'
import { Form } from 'react-bootstrap-5'
import type { Meta, StoryObj } from '@storybook/react'
const meta: Meta<(typeof Form)['Check']> = {
title: 'Shared / Components / Form',
component: Form.Check,
argTypes: {
id: {
table: {
disable: true,
},
},
label: {
table: {
disable: true,
},
},
defaultChecked: {
table: {
disable: true,
},
},
},
}
export default meta
type Story = StoryObj<(typeof Form)['Check']>
export const Checkbox: Story = {
args: {
id: 'id-1',
label: 'Label',
disabled: false,
},
}
export const CheckboxChecked: Story = {
args: {
id: 'id-1',
label: 'Label',
disabled: false,
defaultChecked: true,
},
}
export const CheckboxIndeterminate = (args: Story['args']) => {
const ref = useRef<HTMLInputElement>()
useLayoutEffect(() => {
if (ref.current) {
ref.current.indeterminate = true
}
}, [])
return <Form.Check ref={ref} {...args} />
}
CheckboxIndeterminate.args = {
id: 'id-2',
label: 'Label',
disabled: false,
}

300
services/web/frontend/stories/ui/form/form-input-bs5.stories.tsx Normal file
View File

@@ -0,0 +1,300 @@
import { Form } from 'react-bootstrap-5'
import type { Meta, StoryObj } from '@storybook/react'
import FormGroup from '@/features/ui/components/bootstrap-5/form/form-group'
import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
import FormControl from '@/features/ui/components/bootstrap-5/form/form-control'
import MaterialIcon from '@/shared/components/material-icon'
import FormFeedback from '@/features/ui/components/bootstrap-5/form/form-feedback'
const meta: Meta<React.ComponentProps<typeof FormControl>> = {
title: 'Shared / Components / Form / Input',
component: FormControl,
}
export default meta
type Story = StoryObj<React.ComponentProps<typeof FormControl>>
export const Default: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<FormControl defaultValue="Large input" size="lg" {...args} />
<FormText>Helper</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<FormControl defaultValue="Regular input" {...args} />
<FormText>Helper</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<FormControl defaultValue="Small input" size="sm" {...args} />
<FormText>Helper</FormText>
</FormGroup>
</>
)
},
}
Default.args = {
disabled: false,
}
export const Info: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<FormControl
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
{...args}
/>
<FormText type="info">Info</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<FormControl
placeholder="Placeholder"
defaultValue="Regular input"
{...args}
/>
<FormText type="info">Info</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<FormControl
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
{...args}
/>
<FormText type="info">Info</FormText>
</FormGroup>
</>
)
},
}
export const Error: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<FormControl
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
isInvalid
{...args}
/>
<FormFeedback type="invalid">Error</FormFeedback>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<FormControl
placeholder="Placeholder"
defaultValue="Regular input"
isInvalid
{...args}
/>
<FormFeedback type="invalid">Error</FormFeedback>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<FormControl
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
isInvalid
{...args}
/>
<FormFeedback type="invalid">Error</FormFeedback>
</FormGroup>
</>
)
},
}
export const Warning: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<FormControl
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
{...args}
/>
<FormText type="warning">Warning</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<FormControl
placeholder="Placeholder"
defaultValue="Regular input"
{...args}
/>
<FormText type="warning">Warning</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<FormControl
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
{...args}
/>
<FormText type="warning">Warning</FormText>
</FormGroup>
</>
)
},
}
export const Success: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<FormControl
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
{...args}
/>
<FormText type="success">Success</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<FormControl
placeholder="Placeholder"
defaultValue="Regular input"
{...args}
/>
<FormText type="success">Success</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<FormControl
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
{...args}
/>
<FormText type="success">Success</FormText>
</FormGroup>
</>
)
},
}
export const WithIcons: Story = {
render: args => {
const handleClear = () => {
alert('Clicked clear button')
}
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<FormControl
type="text"
placeholder="Search"
prepend={<MaterialIcon type="search" />}
append={
<button
type="button"
className="form-control-search-clear-btn"
onClick={handleClear}
>
<MaterialIcon type="clear" />
</button>
}
size="lg"
{...args}
/>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<FormControl
type="text"
placeholder="Search"
prepend={<MaterialIcon type="search" />}
append={
<button
type="button"
className="form-control-search-clear-btn"
onClick={handleClear}
>
<MaterialIcon type="clear" />
</button>
}
{...args}
/>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<FormControl
type="text"
placeholder="Search"
prepend={<MaterialIcon type="search" />}
append={
<button
type="button"
className="form-control-search-clear-btn"
onClick={handleClear}
>
<MaterialIcon type="clear" />
</button>
}
size="sm"
{...args}
/>
</FormGroup>
<br />
<hr />
<FormGroup controlId="id-3">
<Form.Label>Disabled state</Form.Label>
<FormControl
type="text"
placeholder="Search"
prepend={<MaterialIcon type="search" />}
append={
<button
type="button"
className="form-control-search-clear-btn"
onClick={handleClear}
disabled
>
<MaterialIcon type="clear" />
</button>
}
disabled
{...args}
/>
</FormGroup>
</>
)
},
}

51
services/web/frontend/stories/ui/form/form-radio-bs5.stories.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { Form } from 'react-bootstrap-5'
import type { Meta, StoryObj } from '@storybook/react'
const meta: Meta<(typeof Form)['Check']> = {
title: 'Shared / Components / Form',
component: Form.Check,
argTypes: {
id: {
table: {
disable: true,
},
},
label: {
table: {
disable: true,
},
},
type: {
table: {
disable: true,
},
},
defaultChecked: {
table: {
disable: true,
},
},
},
}
export default meta
type Story = StoryObj<(typeof Form)['Check']>
export const Radio: Story = {
args: {
id: 'id-1',
type: 'radio',
label: 'Label',
disabled: false,
},
}
export const RadioChecked: Story = {
args: {
id: 'id-1',
type: 'radio',
label: 'Label',
disabled: false,
defaultChecked: true,
},
}

220
services/web/frontend/stories/ui/form/form-select-bs5.stories.tsx Normal file
View File

@@ -0,0 +1,220 @@
import { Form, FormSelectProps } from 'react-bootstrap-5'
import type { Meta, StoryObj } from '@storybook/react'
import FormGroup from '@/features/ui/components/bootstrap-5/form/form-group'
import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
const meta: Meta<FormSelectProps> = {
title: 'Shared / Components / Form / Select',
component: Form.Select,
}
export default meta
type Story = StoryObj<FormSelectProps>
export const Default: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Select size="lg" {...args}>
<option>Large select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText>Helper</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Select {...args}>
<option>Regular select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText>Helper</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Select size="sm" {...args}>
<option>Small select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText>Helper</FormText>
</FormGroup>
</>
)
},
}
Default.args = {
disabled: false,
}
export const Info: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Select size="lg" {...args}>
<option>Large select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText type="info">Info</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Select {...args}>
<option>Regular select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText type="info">Info</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Select size="sm" {...args}>
<option>Small select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText type="info">Info</FormText>
</FormGroup>
</>
)
},
}
export const Error: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Select size="lg" isInvalid {...args}>
<option>Large select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText type="error">Error</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Select isInvalid {...args}>
<option>Regular select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText type="error">Error</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Select size="sm" isInvalid {...args}>
<option>Small select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText type="error">Error</FormText>
</FormGroup>
</>
)
},
}
export const Warning: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Select size="lg" {...args}>
<option>Large select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText type="warning">Warning</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Select {...args}>
<option>Regular select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText type="warning">Warning</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Select size="sm" {...args}>
<option>Small select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText type="warning">Warning</FormText>
</FormGroup>
</>
)
},
}
export const Success: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<Form.Select size="lg" {...args}>
<option>Large select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText type="success">Success</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<Form.Select {...args}>
<option>Regular select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText type="success">Success</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<Form.Select size="sm" {...args}>
<option>Small select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
<FormText type="success">Success</FormText>
</FormGroup>
</>
)
},
}

227
services/web/frontend/stories/ui/form/form-textarea-bs5.stories.tsx Normal file
View File

@@ -0,0 +1,227 @@
import { Form } from 'react-bootstrap-5'
import type { Meta, StoryObj } from '@storybook/react'
import FormGroup from '@/features/ui/components/bootstrap-5/form/form-group'
import FormText from '@/features/ui/components/bootstrap-5/form/form-text'
import FormControl from '@/features/ui/components/bootstrap-5/form/form-control'
const meta: Meta<React.ComponentProps<typeof FormControl>> = {
title: 'Shared / Components / Form / Textarea',
component: FormControl,
}
export default meta
type Story = StoryObj<React.ComponentProps<typeof FormControl>>
export const Default: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<FormControl
as="textarea"
defaultValue="Large input"
size="lg"
{...args}
/>
<FormText>Helper</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<FormControl as="textarea" defaultValue="Regular input" {...args} />
<FormText>Helper</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<FormControl
as="textarea"
defaultValue="Small input"
size="sm"
{...args}
/>
<FormText>Helper</FormText>
</FormGroup>
</>
)
},
}
Default.args = {
disabled: false,
}
export const Info: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<FormControl
as="textarea"
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
{...args}
/>
<FormText type="info">Info</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<FormControl
as="textarea"
placeholder="Placeholder"
defaultValue="Regular input"
{...args}
/>
<FormText type="info">Info</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<FormControl
as="textarea"
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
{...args}
/>
<FormText type="info">Info</FormText>
</FormGroup>
</>
)
},
}
export const Error: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<FormControl
as="textarea"
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
isInvalid
{...args}
/>
<FormText type="error">Error</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<FormControl
as="textarea"
placeholder="Placeholder"
defaultValue="Regular input"
isInvalid
{...args}
/>
<FormText type="error">Error</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<FormControl
as="textarea"
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
isInvalid
{...args}
/>
<FormText type="error">Error</FormText>
</FormGroup>
</>
)
},
}
export const Warning: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<FormControl
as="textarea"
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
{...args}
/>
<FormText type="warning">Warning</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<FormControl
as="textarea"
placeholder="Placeholder"
defaultValue="Regular input"
{...args}
/>
<FormText type="warning">Warning</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<FormControl
as="textarea"
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
{...args}
/>
<FormText type="warning">Warning</FormText>
</FormGroup>
</>
)
},
}
export const Success: Story = {
render: args => {
return (
<>
<FormGroup controlId="id-1">
<Form.Label>Label</Form.Label>
<FormControl
as="textarea"
placeholder="Placeholder"
defaultValue="Large input"
size="lg"
{...args}
/>
<FormText type="success">Success</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-2">
<Form.Label>Label</Form.Label>
<FormControl
as="textarea"
placeholder="Placeholder"
defaultValue="Regular input"
{...args}
/>
<FormText type="success">Success</FormText>
</FormGroup>
<hr />
<FormGroup controlId="id-3">
<Form.Label>Label</Form.Label>
<FormControl
as="textarea"
placeholder="Placeholder"
defaultValue="Small input"
size="sm"
{...args}
/>
<FormText type="success">Success</FormText>
</FormGroup>
</>
)
},
}