add arg table for ReferenceArea stories (#3486)

<!--- Provide a general summary of your changes in the Title above -->

## Description

<!--- Describe your changes in detail -->

## Related Issue

#3432 
<!--- This project only accepts pull requests related to open issues -->
<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->
<!--- Please link to the issue here: -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->

## How Has This Been Tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->

## Screenshots (if appropriate):
![Screenshot from 2023-03-26
17-57-49](https://user-images.githubusercontent.com/102710733/227788351-1a3337c3-dc4d-48d6-a063-073e4f843694.png)
![Screenshot from 2023-03-26
17-57-43](https://user-images.githubusercontent.com/102710733/227788354-3ca5ba3e-c486-46c5-b971-897c7c7aa5ea.png)
![Screenshot from 2023-03-26
17-57-31](https://user-images.githubusercontent.com/102710733/227788356-8926efca-9258-4a1d-991a-210fef7e9d18.png)
![Screenshot from 2023-03-26
17-57-16](https://user-images.githubusercontent.com/102710733/227788361-89775d35-2b09-40c1-b54c-e3a5d7366a36.png)
![Screenshot from 2023-03-26
17-57-07](https://user-images.githubusercontent.com/102710733/227788366-8a26cecb-5446-4874-bd03-fc2eb93a5616.png)
![Screenshot from 2023-03-26
17-56-48](https://user-images.githubusercontent.com/102710733/227788371-820577b1-9854-4dc6-9734-4750e7838bc2.png)



## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] My code follows the code style of this project.
- [x] My change requires a change to the documentation.
- [x] I have updated the documentation accordingly.
- [ ] I have added tests to cover my changes.
- [x] All new and existing tests passed.

storybook/stories/API/cartesian/ReferenceArea.mdx

@@ -0,0 +1,18 @@
+import { ArgTypes  } from '@storybook/blocks';
+import * as ReferenceAreaStories from './ReferenceArea.stories';
+
+# ReferenceArea
+
+## Parent Component
+The ReferenceArea can be used within the following parent components: 
+
+`<AreaChart/>` `<BarChart/>` `<LineChart/>` `<ComposedChart/>` `<ScatterChart/>`
+
+## Child component
+The ReferenceArea can be used with the following child components: `<Label/>`
+
+## Properties
+
+Properties in the groups Other and Internal are not recommended to be used.
+
+<ArgTypes of={ReferenceAreaStories} sort={'requiredFirst'}/>

storybook/stories/API/cartesian/ReferenceArea.stories.tsx

@@ -1,12 +1,137 @@
 import { expect } from '@storybook/jest';
 import { within } from '@storybook/testing-library';
+import { Args } from '@storybook/react';
 import React from 'react';
 import { Line, LineChart, ReferenceArea, CartesianGrid, XAxis, YAxis, ResponsiveContainer } from '../../../../src';
 import { pageData } from '../../data';
+import { isUpdateAnimationActive, radius } from '../props/RectangleProps';
+import {
+  onClick,
+  onMouseDown,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseMove,
+  onMouseOut,
+  onMouseOver,
+  onMouseUp,
+} from '../props/EventHandlers';
+import { animationBegin, animationDuration, animationEasing, isAnimationActive } from '../props/AnimationProps';
+
+const StyleProps: Args = {
+  ifOverflow: {
+    description: `Defines how to draw the reference area if it falls partly outside the canvas. If set to 'discard', the reference area will not be drawn at all. If set to 'hidden', the reference area will be clipped to the canvas. If set to 'visible', the reference area will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference area fits into the canvas.`,
+    table: { category: 'Style' },
+  },
+  label: {
+    description: `If set a string or a number, default label will be drawn, and the option is content. If set a React element, the option is the custom react element of drawing label. If set a function, the function will be called to render customized label.`,
+    table: {
+      type: {
+        summary: 'String | Number | ReactElement | Function',
+        detail:
+          '<ReferenceArea x1="01" x2="08" label="MAX"/>\n' +
+          '<ReferenceArea y1={100} y2={500} label={<CustomizedLabel />}/>',
+      },
+      category: 'Style',
+    },
+  },
+  shape: {
+    description: `Renders a svg returned by the react element or function.`,
+    table: {
+      type: {
+        summary: 'ReactElement | Function',
+        detail: '<ReferenceArea shape={<CustomSvgShape/>}/>',
+      },
+      category: 'Style',
+    },
+  },
+  isFront: {
+    description: `If set true, the line will be rendered in front of bars in BarChart, etc.`,
+    table: { category: 'Style' },
+  },
+};
+
+const GeneralProps: Args = {
+  xAxisId: {
+    description: 'The id of x-axis which is corresponding to the data.',
+    table: { type: { summary: 'string | number' }, category: 'General' },
+  },
+  yAxisId: {
+    description: 'The id of y-axis which is corresponding to the data.',
+    table: { type: { summary: 'string | number' }, category: 'General' },
+  },
+  x1: {
+    description:
+      'A boundary value of the area. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categories. If x1 is not set, the first value on the x-axis is used instead. If one of x1 or x2 is invalid, the area will not be drawn.',
+    table: { type: { summary: 'string | number' }, category: 'General' },
+  },
+  x2: {
+    description:
+      'A boundary value of the area. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categories. If x2 is not set, the last value on the x-axis is used instead. If one of x1 or x2 is invalid, the area will not be drawn.',
+    table: { type: { summary: 'string | number' }, category: 'General' },
+  },
+  y1: {
+    description:
+      'A boundary value of the area. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categories. If y1 is not set, the first value on the y-axis is used instead. If one of y1 or y2 is invalid, the area will not be drawn.',
+    table: { type: { summary: 'string | number' }, category: 'General' },
+  },
+  y2: {
+    description:
+      'A boundary value of the area. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categories. If y2 is not set, the last value on the y-axis is used instead. If one of y1 or y2 is invalid, the area will not be drawn.',
+    table: { type: { summary: 'string | number' }, category: 'General' },
+  },
+};
+
+const InternalProps: Args = {
+  viewBox: {
+    description: 'The box of the viewing area, usually calculated internally.',
+    table: { type: { summary: '{x: number, y: number, width: number, height: number}' }, category: 'Internal' },
+  },
+  xAxis: {
+    description: 'The configuration of the corresponding x-axis, usually calculated internally.',
+    table: { type: { summary: 'Object' }, category: 'Internal' },
+  },
+  yAxis: {
+    description: 'The configuration of the corresponding y-axis, usually calculated internally.',
+    table: { type: { summary: 'Object' }, category: 'Internal' },
+  },
+  clipPathId: {
+    description:
+      "Used as the id for the clip path which is used to clip the reference box if 'ifOverflow' is set to 'hidden'",
+    table: { type: { summary: 'number | string' }, category: 'Internal' },
+  },
+};
 
 export default {
+  argTypes: {
+    ...StyleProps,
+    ...GeneralProps,
+    ...InternalProps,
+    // Rectangle
+    radius,
+    // Deprecated
+    alwaysShow: {
+      description: "Use 'ifOverflow' instead.",
+      table: { category: 'Deprecated' },
+      hide: true,
+      disable: true,
+    },
+    // Event handlers
+    onClick,
+    onMouseDown,
+    onMouseUp,
+    onMouseMove,
+    onMouseOver,
+    onMouseOut,
+    onMouseEnter,
+    onMouseLeave,
+    // Animation
+    animationBegin,
+    animationDuration,
+    animationEasing,
+    isAnimationActive,
+    isUpdateAnimationActive,
+  },
   component: ReferenceArea,
-  tags: ['autodocs'],
 };
 
 export const Simple = {

storybook/stories/API/props/AnimationProps.ts

@@ -9,24 +9,37 @@ export const animationBegin = {
   description: 'Specifies when the animation should begin, the unit of this option is ms.',
   type: { name: 'number' },
   defaultValue: 0,
-  table: { category: 'Animation' },
+  table: {
+    defaultValue: { summary: '0' },
+    category: 'Animation',
+  },
 };
 export const animationDuration = {
   description: 'Specifies the duration of animation, the unit of this option is ms.',
   type: { name: 'number' },
   defaultValue: 1500,
-  table: { category: 'Animation' },
+  table: {
+    defaultValue: { summary: '1500' },
+    category: 'Animation',
+  },
 };
 export const animationEasing = {
   description: 'The type of easing function.',
   type: { name: 'ease | ease-in | ease-out | ease-in-out | linear' },
   defaultValue: 'ease',
-  table: { category: 'Animation' },
+  table: {
+    defaultValue: { summary: 'ease' },
+    category: 'Animation',
+  },
 };
 export const animationId = { table: { category: 'Animation' } };
 export const isAnimationActive = {
   description: 'If set false, animation of component will be disabled.',
-  table: { type: { summary: 'boolean' }, category: 'Animation' },
+  table: {
+    type: { summary: 'boolean' },
+    defaultValue: { summary: 'true in CSR, and false in SSR' },
+    category: 'Animation',
+  },
   defaultValue: 'true in CSR, and false in SSR',
 };
 

storybook/stories/API/props/RectangleProps.ts

@@ -0,0 +1,30 @@
+/*
+ * This file both exports the documentation of shared props separately, to be reused in places where only single props
+ * are documented, as well as grouped in case a whole group is needed.
+ */
+import { Args } from '@storybook/react';
+
+export const radius = {
+  description:
+    'If set a value, the option is the radius of all the rounderd corners. If set a array, the option are in turn the radiuses of top-left corner, top-right corner, bottom-right corner, bottom-left corner.',
+  table: {
+    type: { summary: 'number | number[]' },
+    defaultValue: { summary: 0 },
+    category: 'Style',
+  },
+};
+
+export const isUpdateAnimationActive = {
+  description: 'If set false, animation of component updates will be disabled.',
+  table: { category: 'Animation' },
+};
+
+/**
+ * Caveat: If any prop is added here, it would falsely be add to the documentation of the component where this group
+ * is used. If the group is to be extended, then only single props should be imported by each component that does not
+ * use all of them.
+ * */
+export const RectangleProps: Args = {
+  radius,
+  isUpdateAnimationActive,
+};