mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-25 16:26:51 +08:00
Feat: Use data pipeline to visualize the parsing configuration of the knowledge base (#10423)
### What problem does this PR solve? #9869 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --------- Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: jinhai <haijin.chn@gmail.com> Signed-off-by: Jin Hai <haijin.chn@gmail.com> Co-authored-by: chanx <1243304602@qq.com> Co-authored-by: balibabu <cike8899@users.noreply.github.com> Co-authored-by: Lynn <lynn_inf@hotmail.com> Co-authored-by: 纷繁下的无奈 <zhileihuang@126.com> Co-authored-by: huangzl <huangzl@shinemo.com> Co-authored-by: writinwaters <93570324+writinwaters@users.noreply.github.com> Co-authored-by: Wilmer <33392318@qq.com> Co-authored-by: Adrian Weidig <adrianweidig@gmx.net> Co-authored-by: Zhichang Yu <yuzhichang@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Yongteng Lei <yongtengrey@outlook.com> Co-authored-by: Liu An <asiro@qq.com> Co-authored-by: buua436 <66937541+buua436@users.noreply.github.com> Co-authored-by: BadwomanCraZY <511528396@qq.com> Co-authored-by: cucusenok <31804608+cucusenok@users.noreply.github.com> Co-authored-by: Russell Valentine <russ@coldstonelabs.org> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Billy Bao <newyorkupperbay@gmail.com> Co-authored-by: Zhedong Cen <cenzhedong2@126.com> Co-authored-by: TensorNull <129579691+TensorNull@users.noreply.github.com> Co-authored-by: TensorNull <tensor.null@gmail.com> Co-authored-by: TeslaZY <TeslaZY@outlook.com> Co-authored-by: Ajay <160579663+aybanda@users.noreply.github.com> Co-authored-by: AB <aj@Ajays-MacBook-Air.local> Co-authored-by: 天海蒼灆 <huangaoqin@tecpie.com> Co-authored-by: He Wang <wanghechn@qq.com> Co-authored-by: Atsushi Hatakeyama <atu729@icloud.com> Co-authored-by: Jin Hai <haijin.chn@gmail.com> Co-authored-by: Mohamed Mathari <155896313+melmathari@users.noreply.github.com> Co-authored-by: Mohamed Mathari <nocodeventure@Mac-mini-van-Mohamed.fritz.box> Co-authored-by: Stephen Hu <stephenhu@seismic.com> Co-authored-by: Shaun Zhang <zhangwfjh@users.noreply.github.com> Co-authored-by: zhimeng123 <60221886+zhimeng123@users.noreply.github.com> Co-authored-by: mxc <mxc@example.com> Co-authored-by: Dominik Novotný <50611433+SgtMarmite@users.noreply.github.com> Co-authored-by: EVGENY M <168018528+rjohny55@users.noreply.github.com> Co-authored-by: mcoder6425 <mcoder64@gmail.com> Co-authored-by: lemsn <lemsn@msn.com> Co-authored-by: lemsn <lemsn@126.com> Co-authored-by: Adrian Gora <47756404+adagora@users.noreply.github.com> Co-authored-by: Womsxd <45663319+Womsxd@users.noreply.github.com> Co-authored-by: FatMii <39074672+FatMii@users.noreply.github.com>
This commit is contained in:
Kevin Hu
171
web/src/stories/slider-input-form-field.stories.tsx
Normal file
171
web/src/stories/slider-input-form-field.stories.tsx
Normal file
@ -0,0 +1,171 @@
|
||||
import { Form } from '@/components/ui/form';
|
||||
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
import { SliderInputFormField } from '@/components/slider-input-form-field';
|
||||
import { FormLayout } from '@/constants/form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
||||
const meta = {
|
||||
title: 'Example/SliderInputFormField',
|
||||
component: SliderInputFormField,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
docs: {
|
||||
description: {
|
||||
component: `
|
||||
## Component Description
|
||||
|
||||
SliderInputFormField is a form field component that combines a slider and a numeric input field.
|
||||
It provides a user-friendly way to select numeric values within a specified range. `,
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
name: { control: 'text' },
|
||||
label: { control: 'text' },
|
||||
min: { control: 'number' },
|
||||
max: { control: 'number' },
|
||||
step: { control: 'number' },
|
||||
defaultValue: { control: 'number' },
|
||||
layout: {
|
||||
control: 'select',
|
||||
options: [FormLayout.Vertical, FormLayout.Horizontal],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
name: 'sliderValue',
|
||||
label: 'Slider Value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
defaultValue: 50,
|
||||
},
|
||||
} satisfies Meta<typeof SliderInputFormField>;
|
||||
|
||||
// Form wrapper decorator
|
||||
const WithFormProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const form = useForm({
|
||||
defaultValues: {},
|
||||
resolver: zodResolver(z.object({})),
|
||||
});
|
||||
return <Form {...form}>{children}</Form>;
|
||||
};
|
||||
|
||||
const withFormProvider = (Story: any) => (
|
||||
<WithFormProvider>
|
||||
<Story />
|
||||
</WithFormProvider>
|
||||
);
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
||||
export const Default: Story = {
|
||||
decorators: [withFormProvider],
|
||||
args: {
|
||||
name: 'sliderValue',
|
||||
label: 'Slider Value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
defaultValue: 50,
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: `
|
||||
### Basic Usage
|
||||
|
||||
\`\`\`tsx
|
||||
import { SliderInputFormField } from '@/components/slider-input-form-field';
|
||||
|
||||
<SliderInputFormField
|
||||
name="sliderValue"
|
||||
label="Slider Value"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
defaultValue={50}
|
||||
/>
|
||||
\`\`\`
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const HorizontalLayout: Story = {
|
||||
decorators: [withFormProvider],
|
||||
args: {
|
||||
name: 'horizontalSlider',
|
||||
label: 'Horizontal Slider',
|
||||
min: 0,
|
||||
max: 200,
|
||||
step: 5,
|
||||
defaultValue: 100,
|
||||
layout: FormLayout.Horizontal,
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: `
|
||||
### Horizontal Layout
|
||||
|
||||
\`\`\`tsx
|
||||
import { SliderInputFormField } from '@/components/slider-input-form-field';
|
||||
import { FormLayout } from '@/constants/form';
|
||||
|
||||
<SliderInputFormField
|
||||
name="horizontalSlider"
|
||||
label="Horizontal Slider"
|
||||
min={0}
|
||||
max={200}
|
||||
step={5}
|
||||
defaultValue={100}
|
||||
layout={FormLayout.Horizontal}
|
||||
/>
|
||||
\`\`\`
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomRange: Story = {
|
||||
decorators: [withFormProvider],
|
||||
args: {
|
||||
name: 'customRange',
|
||||
label: 'Custom Range (0-1000)',
|
||||
min: 0,
|
||||
max: 1000,
|
||||
step: 10,
|
||||
defaultValue: 500,
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: `
|
||||
### Custom Range
|
||||
|
||||
\`\`\`tsx
|
||||
import { SliderInputFormField } from '@/components/slider-input-form-field';
|
||||
|
||||
<SliderInputFormField
|
||||
name="customRange"
|
||||
label="Custom Range (0-1000)"
|
||||
min={0}
|
||||
max={1000}
|
||||
step={10}
|
||||
defaultValue={500}
|
||||
/>
|
||||
\`\`\`
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user