Implementation:Infiniflow Ragflow Modal Stories

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, Testing, Storybook
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete Storybook story definitions for testing and documenting modal dialog components used in the RAGFlow frontend.

Description

The modal.stories.tsx file defines Storybook stories for modal dialog components including different configurations, props variations, and interaction scenarios. It serves as both visual documentation and interactive testing environment for the modal component library.

Usage

Run npm run storybook and navigate to the Modal section to view and interact with modal component stories during frontend development.

Code Reference

Source Location

Repository: Infiniflow_Ragflow
File: web/src/stories/modal.stories.tsx
Lines: 1-738

Signature

const meta: Meta<typeof Component> = {
  title: 'Components/Modal',
  component: Component,
};

export const Default: Story = { args: {...} };
export const WithContent: Story = { args: {...} };
// ... additional story variations

Import

// Consumed by Storybook, not directly imported in application code

I/O Contract

Inputs

Name	Type	Required	Description
—	—	—	Storybook story definitions; consumed by Storybook runner

Outputs

Name	Type	Description
Story exports	StoryObj	Storybook story configurations

Usage Examples

# Run Storybook
cd web && npm run storybook
# Open browser to http://localhost:6006
# Navigate to Components > Modal

Related Pages

Environment:Infiniflow_Ragflow_Frontend_Node_Environment

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment