ci4sManagement-cloud/react-ui/src/stories/ResourceSelect.stories.tsx

import ResourceSelect, {
  ParameterInputValue,
  requiredValidator,
  ResourceSelectorType,
} from '@/components/ResourceSelect';
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/preview-api';
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { Button, Col, Form, Row } from 'antd';
import { http, HttpResponse } from 'msw';
import {
  datasetDetailData,
  datasetListData,
  datasetVersionData,
  mirrorListData,
  mirrorVerionData,
  modelDetailData,
  modelListData,
  modelVersionData,
} from './mockData';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: 'Components/ResourceSelect 资源选择器',
  component: ResourceSelect,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    // layout: 'centered',
    msw: {
      handlers: [
        http.get('/api/mmp/newdataset/queryDatasets', () => {
          return HttpResponse.json(datasetListData);
        }),
        http.get('/api/mmp/newdataset/getVersionList', () => {
          return HttpResponse.json(datasetVersionData);
        }),
        http.get('/api/mmp/newdataset/getDatasetDetail', () => {
          return HttpResponse.json(datasetDetailData);
        }),
        http.get('/api/mmp/newmodel/queryModels', () => {
          return HttpResponse.json(modelListData);
        }),
        http.get('/api/mmp/newmodel/getVersionList', () => {
          return HttpResponse.json(modelVersionData);
        }),
        http.get('/api/mmp/newmodel/getModelDetail', () => {
          return HttpResponse.json(modelDetailData);
        }),
        http.get('/api/mmp/image', () => {
          return HttpResponse.json(mirrorListData);
        }),
        http.get('/api/mmp/imageVersion', () => {
          return HttpResponse.json(mirrorVerionData);
        }),
      ],
    },
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ['autodocs'],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {
    type: { control: 'radio', options: Object.values(ResourceSelectorType) },
  },
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: { onChange: fn() },
} satisfies Meta<typeof ResourceSelect>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
  args: {
    type: ResourceSelectorType.Dataset,
    canInput: false,
    textArea: false,
    size: 'large',
    placeholder: '请选择数据集',
    style: { width: 400 },
  },
  render: function Render(args) {
    const [{ value }, updateArgs] = useArgs();
    function handleChange(value?: ParameterInputValue) {
      updateArgs({ value: value });
      args.onChange?.(value);
    }

    return <ResourceSelect {...args} value={value} onChange={handleChange}></ResourceSelect>;
  },
};

export const InForm: Story = {
  args: {
    type: ResourceSelectorType.Dataset,
  },
  render: ({ onChange }) => {
    return (
      <Form
        name="resource-select-form"
        labelCol={{ flex: '80px' }}
        labelAlign="left"
        size="large"
        autoComplete="off"
        onFinish={action('onFinish')}
      >
        <Row gutter={8}>
          <Col span={10}>
            <Form.Item
              label="数据集"
              name="dataset"
              rules={[
                {
                  validator: requiredValidator,
                  message: '请选择数据集',
                },
              ]}
              required
            >
              <ResourceSelect
                type={ResourceSelectorType.Dataset}
                placeholder="请选择"
                canInput={false}
                onChange={onChange}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={8}>
          <Col span={10}>
            <Form.Item label="模型" name="model">
              <ResourceSelect
                type={ResourceSelectorType.Model}
                placeholder="请选择"
                canInput={false}
                onChange={onChange}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={8}>
          <Col span={10}>
            <Form.Item label="镜像" name="image">
              <ResourceSelect
                type={ResourceSelectorType.Mirror}
                placeholder="请选择"
                canInput={false}
                onChange={onChange}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={8}>
          <Button htmlType="submit" type="primary">
            提交
          </Button>
        </Row>
      </Form>
    );
  },
};