docs(storybook): add dot stories (#3584)

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

## Description

<!--- Describe your changes in detail -->
add dot shape stories

## Related Issue

<!--- 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? -->
continue to iterate on storybook

## 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):

![image](https://github.com/recharts/recharts/assets/25180830/d1324652-a566-4aa2-a581-78b0a03547b6)


## 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.
- [ ] 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.

Co-authored-by: Coltin Kifer <ckifer@amazon.com>

storybook/stories/API/props/DotProps.ts

@@ -10,7 +10,7 @@ export const r = {
   table: {
     type: { summary: 'number' },
     defaultValue: { summary: 10 },
-    category: 'Style',
+    category: 'General',
   },
   defaultValue: 10,
 };

storybook/stories/API/shapes/Dot.mdx

@@ -0,0 +1,15 @@
+import { ArgTypes } from '@storybook/blocks';
+import * as DotStories from './Dot.stories';
+
+# Dot
+
+The Dot is a shape that itself is not a valid child in any component.
+It can be used to implement custom elements, returning it from within a
+
+```jsx
+<Customized component={<Dot {...dotProps} />} />
+```
+
+or other custom components (i.e. a custom line)
+
+<ArgTypes of={DotStories} sort="requiredFirst" />

storybook/stories/API/shapes/Dot.stories.tsx

@@ -0,0 +1,364 @@
+import React from 'react';
+import { Customized, ComposedChart, ResponsiveContainer, Dot } from '../../../../src';
+import { DotProps } from '../props/DotProps';
+import { GeneralStyle } from '../props/Styles';
+import {
+  onAbort,
+  onAbortCapture,
+  onAnimationEnd,
+  onAnimationEndCapture,
+  onAnimationIteration,
+  onAnimationIterationCapture,
+  onAnimationStart,
+  onAnimationStartCapture,
+  onAuxClick,
+  onAuxClickCapture,
+  onBeforeInput,
+  onBeforeInputCapture,
+  onBlur,
+  onBlurCapture,
+  onCanPlay,
+  onCanPlayCapture,
+  onCanPlayThrough,
+  onCanPlayThroughCapture,
+  onChange,
+  onChangeCapture,
+  onClick,
+  onClickCapture,
+  onCompositionEnd,
+  onCompositionEndCapture,
+  onCompositionStart,
+  onCompositionStartCapture,
+  onCompositionUpdate,
+  onCompositionUpdateCapture,
+  onContextMenu,
+  onContextMenuCapture,
+  onCopy,
+  onCopyCapture,
+  onCut,
+  onCutCapture,
+  onDoubleClick,
+  onDoubleClickCapture,
+  onDrag,
+  onDragCapture,
+  onDragEnd,
+  onDragEndCapture,
+  onDragEnter,
+  onDragEnterCapture,
+  onDragExit,
+  onDragExitCapture,
+  onDragLeave,
+  onDragLeaveCapture,
+  onDragOver,
+  onDragOverCapture,
+  onDragStart,
+  onDragStartCapture,
+  onDrop,
+  onDropCapture,
+  onDurationChange,
+  onDurationChangeCapture,
+  onEmptied,
+  onEmptiedCapture,
+  onEncrypted,
+  onEncryptedCapture,
+  onEnded,
+  onEndedCapture,
+  onError,
+  onErrorCapture,
+  onFocus,
+  onFocusCapture,
+  onGotPointerCapture,
+  onGotPointerCaptureCapture,
+  onInput,
+  onInputCapture,
+  onInvalid,
+  onInvalidCapture,
+  onKeyDown,
+  onKeyDownCapture,
+  onKeyPress,
+  onKeyPressCapture,
+  onKeyUp,
+  onKeyUpCapture,
+  onLoad,
+  onLoadCapture,
+  onLoadedData,
+  onLoadedDataCapture,
+  onLoadedMetadata,
+  onLoadedMetadataCapture,
+  onLoadStart,
+  onLoadStartCapture,
+  onLostPointerCapture,
+  onLostPointerCaptureCapture,
+  onMouseDown,
+  onMouseDownCapture,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseMove,
+  onMouseMoveCapture,
+  onMouseOut,
+  onMouseOutCapture,
+  onMouseOver,
+  onMouseOverCapture,
+  onMouseUp,
+  onMouseUpCapture,
+  onPaste,
+  onPasteCapture,
+  onPause,
+  onPauseCapture,
+  onPlay,
+  onPlayCapture,
+  onPlaying,
+  onPlayingCapture,
+  onPointerCancel,
+  onPointerCancelCapture,
+  onPointerDown,
+  onPointerDownCapture,
+  onPointerEnter,
+  onPointerLeave,
+  onPointerMove,
+  onPointerMoveCapture,
+  onPointerOut,
+  onPointerOutCapture,
+  onPointerOver,
+  onPointerOverCapture,
+  onPointerUp,
+  onPointerUpCapture,
+  onProgress,
+  onProgressCapture,
+  onRateChange,
+  onRateChangeCapture,
+  onReset,
+  onResetCapture,
+  onScroll,
+  onScrollCapture,
+  onSeeked,
+  onSeekedCapture,
+  onSeeking,
+  onSeekingCapture,
+  onSelect,
+  onSelectCapture,
+  onStalled,
+  onStalledCapture,
+  onSubmit,
+  onSubmitCapture,
+  onSuspend,
+  onSuspendCapture,
+  onTimeUpdate,
+  onTimeUpdateCapture,
+  onTouchCancel,
+  onTouchCancelCapture,
+  onTouchEnd,
+  onTouchEndCapture,
+  onTouchMove,
+  onTouchMoveCapture,
+  onTouchStart,
+  onTouchStartCapture,
+  onTransitionEnd,
+  onTransitionEndCapture,
+  onVolumeChange,
+  onVolumeChangeCapture,
+  onWaiting,
+  onWaitingCapture,
+  onWheel,
+  onWheelCapture,
+} from '../props/EventHandlers';
+
+export default {
+  component: Dot,
+  argTypes: {
+    ...DotProps,
+    stroke: GeneralStyle.stroke,
+    fill: GeneralStyle.fill,
+    // Deprecated
+    dangerouslySetInnerHTML: { table: { category: 'Deprecated', disable: true } },
+    onPointerEnterCapture: { table: { category: 'Deprecated', disable: true } },
+    onPointerLeaveCapture: { table: { category: 'Deprecated', disable: true } },
+    // Event Handlers available
+    onCopy,
+    onCopyCapture,
+    onCut,
+    onCutCapture,
+    onPaste,
+    onPasteCapture,
+    onCompositionEnd,
+    onCompositionEndCapture,
+    onCompositionStart,
+    onCompositionStartCapture,
+    onCompositionUpdate,
+    onCompositionUpdateCapture,
+    onFocus,
+    onFocusCapture,
+    onBlur,
+    onBlurCapture,
+    onChange,
+    onChangeCapture,
+    onBeforeInput,
+    onBeforeInputCapture,
+    onInput,
+    onInputCapture,
+    onReset,
+    onResetCapture,
+    onSubmit,
+    onSubmitCapture,
+    onInvalid,
+    onInvalidCapture,
+    onLoad,
+    onLoadCapture,
+    onError,
+    onErrorCapture,
+    onKeyDown,
+    onKeyDownCapture,
+    onKeyPress,
+    onKeyPressCapture,
+    onKeyUp,
+    onKeyUpCapture,
+    onAbort,
+    onAbortCapture,
+    onCanPlay,
+    onCanPlayCapture,
+    onCanPlayThrough,
+    onCanPlayThroughCapture,
+    onDurationChange,
+    onDurationChangeCapture,
+    onEmptied,
+    onEmptiedCapture,
+    onEncrypted,
+    onEncryptedCapture,
+    onEnded,
+    onEndedCapture,
+    onLoadedData,
+    onLoadedDataCapture,
+    onLoadedMetadata,
+    onLoadedMetadataCapture,
+    onLoadStart,
+    onLoadStartCapture,
+    onPause,
+    onPauseCapture,
+    onPlay,
+    onPlayCapture,
+    onPlaying,
+    onPlayingCapture,
+    onProgress,
+    onProgressCapture,
+    onRateChange,
+    onRateChangeCapture,
+    onSeeked,
+    onSeekedCapture,
+    onSeeking,
+    onSeekingCapture,
+    onStalled,
+    onStalledCapture,
+    onSuspend,
+    onSuspendCapture,
+    onTimeUpdate,
+    onTimeUpdateCapture,
+    onVolumeChange,
+    onVolumeChangeCapture,
+    onWaiting,
+    onWaitingCapture,
+    onAuxClick,
+    onAuxClickCapture,
+    onClick,
+    onClickCapture,
+    onContextMenu,
+    onContextMenuCapture,
+    onDoubleClick,
+    onDoubleClickCapture,
+    onDrag,
+    onDragCapture,
+    onDragEnd,
+    onDragEndCapture,
+    onDragEnter,
+    onDragEnterCapture,
+    onDragExit,
+    onDragExitCapture,
+    onDragLeave,
+    onDragLeaveCapture,
+    onDragOver,
+    onDragOverCapture,
+    onDragStart,
+    onDragStartCapture,
+    onDrop,
+    onDropCapture,
+    onMouseDown,
+    onMouseDownCapture,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+    onMouseMoveCapture,
+    onMouseOut,
+    onMouseOutCapture,
+    onMouseOver,
+    onMouseOverCapture,
+    onMouseUp,
+    onMouseUpCapture,
+    onSelect,
+    onSelectCapture,
+    onTouchCancel,
+    onTouchCancelCapture,
+    onTouchEnd,
+    onTouchEndCapture,
+    onTouchMove,
+    onTouchMoveCapture,
+    onTouchStart,
+    onTouchStartCapture,
+    onPointerDown,
+    onPointerDownCapture,
+    onPointerMove,
+    onPointerMoveCapture,
+    onPointerUp,
+    onPointerUpCapture,
+    onPointerCancel,
+    onPointerCancelCapture,
+    onPointerEnter,
+    onPointerLeave,
+    onPointerOver,
+    onPointerOverCapture,
+    onPointerOut,
+    onPointerOutCapture,
+    onGotPointerCapture,
+    onGotPointerCaptureCapture,
+    onLostPointerCapture,
+    onLostPointerCaptureCapture,
+    onScroll,
+    onScrollCapture,
+    onWheel,
+    onWheelCapture,
+    onAnimationStart,
+    onAnimationStartCapture,
+    onAnimationEnd,
+    onAnimationEndCapture,
+    onAnimationIteration,
+    onAnimationIterationCapture,
+    onTransitionEnd,
+    onTransitionEndCapture,
+  },
+};
+
+export const Simple = {
+  render: (args: Record<string, any>) => {
+    return (
+      <ResponsiveContainer width="100%" height={500}>
+        <ComposedChart
+          width={500}
+          height={300}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
+        >
+          <Customized component={<Dot {...args} />} />
+        </ComposedChart>
+      </ResponsiveContainer>
+    );
+  },
+  args: {
+    r: 50,
+    stroke: '#000',
+    fill: 'red',
+    cx: 100,
+    cy: 100,
+  },
+};