@mbao01/common 0.0.43 → 0.0.45

package/src/components/Chart/stories/args/chartArgs.ts

@@ -0,0 +1,244 @@
+import { ArgTypes } from "@storybook/react";
+import { onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseUp } from "./events";
+
+export const data: ArgTypes[0] = {
+  description: "The source data, in which each element is an object.",
+  table: {
+    type: {
+      summary: "Array",
+    },
+    category: "General",
+  },
+  control: "object",
+};
+
+export const chartSizeArgs: ArgTypes = {
+  height: {
+    description: "The height of chart container.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+  width: {
+    description: "The width of chart container.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+};
+
+export const margin: ArgTypes[0] = {
+  description: "The sizes of whitespace around the container.",
+  table: {
+    type: {
+      summary: "object",
+    },
+    defaultValue: {
+      summary: "{ top: 5, right: 5, bottom: 5, left: 5 }",
+    },
+    category: "General",
+  },
+  control: "object",
+};
+
+export const dataKey: ArgTypes[0] = {
+  description: "The key or getter of a group of data which should be unique in a chart.",
+  table: {
+    type: {
+      summary: "string | number | Function",
+    },
+    category: "General",
+  },
+  control: "text",
+};
+
+// These props are shared between the following charts:
+// - AreaChart
+// - BarChart
+// - ComposedChart
+// - LineChart
+// - PieChart
+// - RadarChart
+// - RadialBarChart
+// - ScatterChart
+// - FunnelChart
+export const categoricalChartArgs: ArgTypes = {
+  ...chartSizeArgs,
+  dataKey: {
+    description: `Can be used to mirror dataKey used on children components, using it as this level will force
+the chart to animate between two states even though the data array stays the same. Useful to animate when
+toggling between multiple dataKey.`,
+    table: {
+      type: {
+        summary: "string | number | Function | undefined",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  data,
+  margin,
+  accessibilityLayer: {
+    description: "Turn on accessibility support for keyboard-only and screen reader users.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "true",
+      },
+      category: "General",
+    },
+    control: "boolean",
+  },
+  role: {
+    description:
+      "The ARIA role for the chart, which provides semantic information for screen reader users.",
+    table: {
+      type: {
+        summary: "string | undefined",
+      },
+      defaultValue: undefined,
+      category: "General",
+    },
+    control: "text",
+  },
+  tabIndex: {
+    description: "If and where the chart should appear in the tab order",
+    table: {
+      type: {
+        summary: "number | undefined",
+      },
+      defaultValue: undefined,
+      category: "General",
+    },
+    control: "number",
+  },
+  style: {
+    description: "The style of chart.",
+    table: {
+      type: {
+        summary: "object",
+      },
+      category: "General",
+    },
+    control: "object",
+  },
+  desc: {
+    description: "The description of chart.",
+    table: {
+      type: {
+        summary: "string",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  className: {
+    table: {
+      category: "Internal",
+    },
+    control: "text",
+  },
+  defaultShowTooltip: {
+    description: "If true set, the tooltip will be displayed when the chart is rendered.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "General",
+    },
+    control: "boolean",
+  },
+  id: {
+    description: "The unique id of chart.",
+    table: {
+      type: {
+        summary: "string",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  onClick,
+  onMouseDown,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseMove,
+  onMouseUp,
+  reverseStackOrder: {
+    description: `If \`false\`, stacked items will be rendered left to right. If \`true\`, stacked items
+      will be rendered right to left. (Render direction affects SVG layering, not x position.)`,
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "General",
+    },
+    control: "boolean",
+  },
+  syncId: {
+    description: `If any two categorical charts(LineChart, AreaChart, BarChart, ComposedChart) have the same syncId,
+      these two charts can sync the position tooltip, and the startIndex, endIndex of Brush.`,
+    table: {
+      type: {
+        summary: "string",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  syncMethod: {
+    description: `When syncId is provided, allows customization of how the charts will synchronize tooltips and
+    brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array.
+    In cases where data does not have the same length, this might yield unexpected results. In that case use 'value'
+    which will try to match other charts values, or a fully custom function which will receive tick, data as argument
+    and should return an index.`,
+    table: {
+      type: {
+        summary: "'index' | 'value' | Function",
+      },
+      defaultValue: {
+        summary: "'index'",
+      },
+      category: "General",
+    },
+    control: "inline-radio",
+    options: ["index", "value"],
+  },
+  throttleDelay: {
+    description: `The delay of throttle for mouse events, which can be used to avoid
+      the performance problem when the chart is rendered in a heavy environment.`,
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+  title: {
+    description: "The title of chart.",
+    table: {
+      type: {
+        summary: "string",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+};

package/src/components/Chart/stories/args/dotArgs.ts

@@ -0,0 +1,46 @@
+import { type ArgTypes } from "@storybook/react";
+
+export const r: ArgTypes[0] = {
+  description: "The radius of the dot.",
+  table: {
+    type: {
+      summary: "number",
+    },
+    defaultValue: {
+      summary: "10",
+    },
+    category: "General",
+  },
+  control: "number",
+};
+
+export const cx: ArgTypes[0] = {
+  description: "The x-coordinate of the dots center.",
+  table: {
+    type: {
+      summary: "number",
+    },
+    category: "General",
+  },
+  control: "number",
+};
+
+export const cy: ArgTypes[0] = {
+  description: "The y-coordinate of the dots center.",
+  table: {
+    type: { summary: "number" },
+    category: "General",
+  },
+  control: "number",
+};
+
+/**
+ * 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 DotProps: ArgTypes = {
+  r,
+  cx,
+  cy,
+};

package/src/components/Chart/stories/args/events.ts

@@ -0,0 +1,343 @@
+/*
+ * 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 { type ArgTypes } from "@storybook/react";
+
+export const onAbort = { table: { category: "EventHandlers" } };
+export const onAbortCapture = { table: { category: "EventHandlers" } };
+export const onAnimationEnd = {
+  table: {
+    category: "EventHandlers",
+    description: "The customized event handler of animation end",
+  },
+};
+export const onAnimationEndCapture = { table: { category: "EventHandlers" } };
+export const onAnimationIteration = { table: { category: "EventHandlers" } };
+export const onAnimationIterationCapture = { table: { category: "EventHandlers" } };
+export const onAnimationStart = {
+  table: {
+    description: "The customized event handler of animation start",
+    category: "EventHandlers",
+  },
+};
+export const onAnimationStartCapture = { table: { category: "EventHandlers" } };
+export const onAuxClick = { table: { category: "EventHandlers" } };
+export const onAuxClickCapture = { table: { category: "EventHandlers" } };
+export const onBeforeInput = { table: { category: "EventHandlers" } };
+export const onBeforeInputCapture = { table: { category: "EventHandlers" } };
+export const onBlur = { table: { category: "EventHandlers" } };
+export const onBlurCapture = { table: { category: "EventHandlers" } };
+export const onCanPlay = { table: { category: "EventHandlers" } };
+export const onCanPlayCapture = { table: { category: "EventHandlers" } };
+export const onCanPlayThrough = { table: { category: "EventHandlers" } };
+export const onCanPlayThroughCapture = { table: { category: "EventHandlers" } };
+export const onChange = { table: { category: "EventHandlers" } };
+export const onChangeCapture = { table: { category: "EventHandlers" } };
+export const onClick = { table: { category: "EventHandlers" } };
+export const onClickCapture = { table: { category: "EventHandlers" } };
+export const onCompositionEnd = { table: { category: "EventHandlers" } };
+export const onCompositionEndCapture = { table: { category: "EventHandlers" } };
+export const onCompositionStart = { table: { category: "EventHandlers" } };
+export const onCompositionStartCapture = { table: { category: "EventHandlers" } };
+export const onCompositionUpdate = { table: { category: "EventHandlers" } };
+export const onCompositionUpdateCapture = { table: { category: "EventHandlers" } };
+export const onContextMenu = { table: { category: "EventHandlers" } };
+export const onContextMenuCapture = { table: { category: "EventHandlers" } };
+export const onCopy = { table: { category: "EventHandlers" } };
+export const onCopyCapture = { table: { category: "EventHandlers" } };
+export const onCut = { table: { category: "EventHandlers" } };
+export const onCutCapture = { table: { category: "EventHandlers" } };
+export const onDoubleClick = { table: { category: "EventHandlers" } };
+export const onDoubleClickCapture = { table: { category: "EventHandlers" } };
+export const onDrag = { table: { category: "EventHandlers" } };
+export const onDragCapture = { table: { category: "EventHandlers" } };
+export const onDragEnd = { table: { category: "EventHandlers" } };
+export const onDragEndCapture = { table: { category: "EventHandlers" } };
+export const onDragEnter = { table: { category: "EventHandlers" } };
+export const onDragEnterCapture = { table: { category: "EventHandlers" } };
+export const onDragExit = { table: { category: "EventHandlers" } };
+export const onDragExitCapture = { table: { category: "EventHandlers" } };
+export const onDragLeave = { table: { category: "EventHandlers" } };
+export const onDragLeaveCapture = { table: { category: "EventHandlers" } };
+export const onDragOver = { table: { category: "EventHandlers" } };
+export const onDragOverCapture = { table: { category: "EventHandlers" } };
+export const onDragStart = { table: { category: "EventHandlers" } };
+export const onDragStartCapture = { table: { category: "EventHandlers" } };
+export const onDrop = { table: { category: "EventHandlers" } };
+export const onDropCapture = { table: { category: "EventHandlers" } };
+export const onDurationChange = { table: { category: "EventHandlers" } };
+export const onDurationChangeCapture = { table: { category: "EventHandlers" } };
+export const onEmptied = { table: { category: "EventHandlers" } };
+export const onEmptiedCapture = { table: { category: "EventHandlers" } };
+export const onEncrypted = { table: { category: "EventHandlers" } };
+export const onEncryptedCapture = { table: { category: "EventHandlers" } };
+export const onEnded = { table: { category: "EventHandlers" } };
+export const onEndedCapture = { table: { category: "EventHandlers" } };
+export const onError = { table: { category: "EventHandlers" } };
+export const onErrorCapture = { table: { category: "EventHandlers" } };
+export const onFocus = { table: { category: "EventHandlers" } };
+export const onFocusCapture = { table: { category: "EventHandlers" } };
+export const onGotPointerCapture = { table: { category: "EventHandlers" } };
+export const onGotPointerCaptureCapture = { table: { category: "EventHandlers" } };
+export const onInput = { table: { category: "EventHandlers" } };
+export const onInputCapture = { table: { category: "EventHandlers" } };
+export const onInvalid = { table: { category: "EventHandlers" } };
+export const onInvalidCapture = { table: { category: "EventHandlers" } };
+export const onKeyDown = { table: { category: "EventHandlers" } };
+export const onKeyDownCapture = { table: { category: "EventHandlers" } };
+export const onKeyPress = { table: { category: "EventHandlers" } };
+export const onKeyPressCapture = { table: { category: "EventHandlers" } };
+export const onKeyUp = { table: { category: "EventHandlers" } };
+export const onKeyUpCapture = { table: { category: "EventHandlers" } };
+export const onLoad = { table: { category: "EventHandlers" } };
+export const onLoadCapture = { table: { category: "EventHandlers" } };
+export const onLoadStart = { table: { category: "EventHandlers" } };
+export const onLoadStartCapture = { table: { category: "EventHandlers" } };
+export const onLoadedData = { table: { category: "EventHandlers" } };
+export const onLoadedDataCapture = { table: { category: "EventHandlers" } };
+export const onLoadedMetadata = { table: { category: "EventHandlers" } };
+export const onLoadedMetadataCapture = { table: { category: "EventHandlers" } };
+export const onLostPointerCapture = { table: { category: "EventHandlers" } };
+export const onLostPointerCaptureCapture = { table: { category: "EventHandlers" } };
+export const onMouseDown = { table: { category: "EventHandlers" } };
+export const onMouseDownCapture = { table: { category: "EventHandlers" } };
+export const onMouseEnter = { table: { category: "EventHandlers" } };
+export const onMouseLeave = { table: { category: "EventHandlers" } };
+export const onMouseMove = { table: { category: "EventHandlers" } };
+export const onMouseMoveCapture = { table: { category: "EventHandlers" } };
+export const onMouseOut = { table: { category: "EventHandlers" } };
+export const onMouseOutCapture = { table: { category: "EventHandlers" } };
+export const onMouseOver = { table: { category: "EventHandlers" } };
+export const onMouseOverCapture = { table: { category: "EventHandlers" } };
+export const onMouseUp = { table: { category: "EventHandlers" } };
+export const onMouseUpCapture = { table: { category: "EventHandlers" } };
+export const onPaste = { table: { category: "EventHandlers" } };
+export const onPasteCapture = { table: { category: "EventHandlers" } };
+export const onPause = { table: { category: "EventHandlers" } };
+export const onPauseCapture = { table: { category: "EventHandlers" } };
+export const onPlay = { table: { category: "EventHandlers" } };
+export const onPlayCapture = { table: { category: "EventHandlers" } };
+export const onPlaying = { table: { category: "EventHandlers" } };
+export const onPlayingCapture = { table: { category: "EventHandlers" } };
+export const onPointerCancel = { table: { category: "EventHandlers" } };
+export const onPointerCancelCapture = { table: { category: "EventHandlers" } };
+export const onPointerDown = { table: { category: "EventHandlers" } };
+export const onPointerDownCapture = { table: { category: "EventHandlers" } };
+export const onPointerEnter = { table: { category: "EventHandlers" } };
+export const onPointerEnterCapture = { table: { category: "EventHandlers" } };
+export const onPointerLeave = { table: { category: "EventHandlers" } };
+export const onPointerLeaveCapture = { table: { category: "EventHandlers" } };
+export const onPointerMove = { table: { category: "EventHandlers" } };
+export const onPointerMoveCapture = { table: { category: "EventHandlers" } };
+export const onPointerOut = { table: { category: "EventHandlers" } };
+export const onPointerOutCapture = { table: { category: "EventHandlers" } };
+export const onPointerOver = { table: { category: "EventHandlers" } };
+export const onPointerOverCapture = { table: { category: "EventHandlers" } };
+export const onPointerUp = { table: { category: "EventHandlers" } };
+export const onPointerUpCapture = { table: { category: "EventHandlers" } };
+export const onProgress = { table: { category: "EventHandlers" } };
+export const onProgressCapture = { table: { category: "EventHandlers" } };
+export const onRateChange = { table: { category: "EventHandlers" } };
+export const onRateChangeCapture = { table: { category: "EventHandlers" } };
+export const onReset = { table: { category: "EventHandlers" } };
+export const onResetCapture = { table: { category: "EventHandlers" } };
+export const onScroll = { table: { category: "EventHandlers" } };
+export const onScrollCapture = { table: { category: "EventHandlers" } };
+export const onSeeked = { table: { category: "EventHandlers" } };
+export const onSeekedCapture = { table: { category: "EventHandlers" } };
+export const onSeeking = { table: { category: "EventHandlers" } };
+export const onSeekingCapture = { table: { category: "EventHandlers" } };
+export const onSelect = { table: { category: "EventHandlers" } };
+export const onSelectCapture = { table: { category: "EventHandlers" } };
+export const onStalled = { table: { category: "EventHandlers" } };
+export const onStalledCapture = { table: { category: "EventHandlers" } };
+export const onSubmit = { table: { category: "EventHandlers" } };
+export const onSubmitCapture = { table: { category: "EventHandlers" } };
+export const onSuspend = { table: { category: "EventHandlers" } };
+export const onSuspendCapture = { table: { category: "EventHandlers" } };
+export const onTimeUpdate = { table: { category: "EventHandlers" } };
+export const onTimeUpdateCapture = { table: { category: "EventHandlers" } };
+export const onTouchCancel = { table: { category: "EventHandlers" } };
+export const onTouchCancelCapture = { table: { category: "EventHandlers" } };
+export const onTouchEnd = { table: { category: "EventHandlers" } };
+export const onTouchEndCapture = { table: { category: "EventHandlers" } };
+export const onTouchMove = { table: { category: "EventHandlers" } };
+export const onTouchMoveCapture = { table: { category: "EventHandlers" } };
+export const onTouchStart = { table: { category: "EventHandlers" } };
+export const onTouchStartCapture = { table: { category: "EventHandlers" } };
+export const onTransitionEnd = { table: { category: "EventHandlers" } };
+export const onTransitionEndCapture = { table: { category: "EventHandlers" } };
+export const onVolumeChange = { table: { category: "EventHandlers" } };
+export const onVolumeChangeCapture = { table: { category: "EventHandlers" } };
+export const onWaiting = { table: { category: "EventHandlers" } };
+export const onWaitingCapture = { table: { category: "EventHandlers" } };
+export const onWheel = { table: { category: "EventHandlers" } };
+export const onWheelCapture = { table: { category: "EventHandlers" } };
+
+// 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 eventArgs: ArgTypes = {
+  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,
+  onLoadStart,
+  onLoadStartCapture,
+  onLoadedData,
+  onLoadedDataCapture,
+  onLoadedMetadata,
+  onLoadedMetadataCapture,
+  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,
+  onPointerEnterCapture,
+  onPointerLeave,
+  onPointerLeaveCapture,
+  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,
+};