@mbao01/common 0.0.43 → 0.0.45

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

@@ -0,0 +1,178 @@
+import type {
+  AreaProps,
+  BarProps,
+  LineProps,
+  PieProps,
+  RadarProps,
+  RadialBarProps,
+  XAxisProps,
+  YAxisProps,
+} from "recharts";
+import { type ArgTypes } from "@storybook/react";
+import { type CategoricalChartProps } from "recharts/types/chart/generateCategoricalChart";
+import type { Flatten } from "./types";
+import { categorizeArgs } from "../helpers";
+import { areaArgs } from "./areaArgs";
+import { areaChartArgs as areaChartComponentArgs } from "./areaChartArgs";
+import { barArgs } from "./barArgs";
+import { barChartArgs as barChartComponentArgs } from "./barChartArgs";
+import { lineArgs } from "./lineArgs";
+import { lineChartArgs as lineChartComponentArgs } from "./lineChartArgs";
+import { pieArgs } from "./pieArgs";
+import { pieChartArgs as pieChartComponentArgs } from "./pieChartArgs";
+import { radarArgs } from "./radarArgs";
+import { radarChartArgs as radarChartComponentArgs } from "./radarChartArgs";
+import { radialBarArgs } from "./radialBarArgs";
+import { radialBarChartArgs as radialBarChartComponentArgs } from "./radialBarChartArgs";
+import { OmitSVGElement } from "./types";
+import { xAxisArgs } from "./xAxisArgs";
+import { yAxisArgs } from "./yAxisArgs";
+
+type AxisProps = {
+  xAxis: OmitSVGElement<XAxisProps>;
+  yAxis: OmitSVGElement<YAxisProps>;
+};
+
+/**
+ * Bar chart
+ */
+type BarArgKey = "bar" | "barChart" | "xAxis" | "yAxis";
+
+export type BarChartProps = {
+  bar: OmitSVGElement<BarProps>;
+  barChart: CategoricalChartProps;
+} & AxisProps;
+
+export type BarChartArgs = Partial<Flatten<BarChartProps>> & {};
+
+const barArgKey = {
+  bar: "bar",
+  barChart: "barChart",
+  xAxis: "xAxis",
+  yAxis: "yAxis",
+} satisfies Record<string, BarArgKey>;
+
+export const barChartArgs = {
+  ...categorizeArgs(barChartComponentArgs, barArgKey.barChart),
+  ...categorizeArgs(xAxisArgs, barArgKey.xAxis),
+  ...categorizeArgs(yAxisArgs, barArgKey.yAxis),
+  ...categorizeArgs(barArgs, barArgKey.bar),
+} satisfies ArgTypes;
+
+/**
+ * Line chart
+ */
+type LineArgKey = "line" | "lineChart" | "xAxis" | "yAxis";
+
+export type LineChartProps = {
+  line: OmitSVGElement<LineProps>;
+  lineChart: CategoricalChartProps;
+} & AxisProps;
+
+export type LineChartArgs = Partial<Flatten<LineChartProps>> & {};
+
+const lineArgKey = {
+  line: "line",
+  lineChart: "lineChart",
+  xAxis: "xAxis",
+  yAxis: "yAxis",
+} satisfies Record<string, LineArgKey>;
+
+export const lineChartArgs = {
+  ...categorizeArgs(lineChartComponentArgs, lineArgKey.lineChart),
+  ...categorizeArgs(xAxisArgs, lineArgKey.xAxis),
+  ...categorizeArgs(yAxisArgs, lineArgKey.yAxis),
+  ...categorizeArgs(lineArgs, lineArgKey.line),
+} satisfies ArgTypes;
+
+/**
+ * Area chart
+ */
+type AreaArgKey = "area" | "areaChart" | "xAxis" | "yAxis";
+
+export type AreaChartProps = {
+  area: OmitSVGElement<AreaProps>;
+  areaChart: CategoricalChartProps;
+} & AxisProps;
+
+export type AreaChartArgs = Partial<Flatten<AreaChartProps>> & {};
+
+export const areaArgKey = {
+  area: "area",
+  areaChart: "areaChart",
+  xAxis: "xAxis",
+  yAxis: "yAxis",
+} satisfies Record<string, AreaArgKey>;
+
+export const areaChartArgs = {
+  ...categorizeArgs(areaChartComponentArgs, areaArgKey.areaChart),
+  ...categorizeArgs(xAxisArgs, areaArgKey.xAxis),
+  ...categorizeArgs(yAxisArgs, areaArgKey.yAxis),
+  ...categorizeArgs(areaArgs, areaArgKey.area),
+} satisfies ArgTypes;
+
+/**
+ * Pie chart
+ */
+type PieArgKey = "pie" | "pieChart";
+
+export type PieChartProps = {
+  pie: OmitSVGElement<PieProps>;
+  pieChart: CategoricalChartProps;
+};
+
+export type PieChartArgs = Partial<Flatten<PieChartProps>> & {};
+
+export const pieArgKey = {
+  pie: "pie",
+  pieChart: "pieChart",
+} satisfies Record<string, PieArgKey>;
+
+export const pieChartArgs = {
+  ...categorizeArgs(pieChartComponentArgs, pieArgKey.pieChart),
+  ...categorizeArgs(pieArgs, pieArgKey.pie),
+} satisfies ArgTypes;
+
+/**
+ * RadialBar chart
+ */
+type RadialBarArgKey = "radialBar" | "radialBarChart";
+
+export type RadialBarChartProps = {
+  radialBar: OmitSVGElement<RadialBarProps>;
+  radialBarChart: CategoricalChartProps;
+};
+
+export type RadialBarChartArgs = Partial<Flatten<RadialBarChartProps>> & {};
+
+export const radialBarArgKey = {
+  radialBar: "radialBar",
+  radialBarChart: "radialBarChart",
+} satisfies Record<string, RadialBarArgKey>;
+
+export const radialBarChartArgs = {
+  ...categorizeArgs(radialBarChartComponentArgs, radialBarArgKey.radialBarChart),
+  ...categorizeArgs(radialBarArgs, radialBarArgKey.radialBar),
+} satisfies ArgTypes;
+
+/**
+ * Radar chart
+ */
+type RadarArgKey = "radar" | "radarChart";
+
+export type RadarChartProps = {
+  radar: OmitSVGElement<RadarProps>;
+  radarChart: CategoricalChartProps;
+};
+
+export type RadarChartArgs = Partial<Flatten<RadarChartProps>> & {};
+
+export const radarArgKey = {
+  radar: "radar",
+  radarChart: "radarChart",
+} satisfies Record<string, RadarArgKey>;
+
+export const radarChartArgs = {
+  ...categorizeArgs(radarChartComponentArgs, radarArgKey.radarChart),
+  ...categorizeArgs(radarArgs, radarArgKey.radar),
+} satisfies ArgTypes;

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

@@ -0,0 +1,124 @@
+import { type ArgTypes } from "@storybook/react";
+
+export const labelListArgs: ArgTypes = {
+  dataKey: {
+    description: "The key of a group of label values in data.",
+    table: {
+      type: {
+        summary: "String | Number | Function",
+      },
+      category: "General",
+    },
+    control: "text",
+  },
+  valueAccessor: {
+    description: "The accessor function to get the value of each label.",
+    table: {
+      category: "General",
+    },
+  },
+  content: {
+    description:
+      "If set a React element, the option is the customized react element of rendering each label. " +
+      "If set a function, the function will be called to render each label content.",
+    defaultValue: null,
+    table: {
+      category: "General",
+      type: {
+        summary: "ReactElement | Function",
+        detail:
+          "<Label content={<CustomizedLabel external={external} />} />\n<Label content={renderLabel} />",
+      },
+    },
+  },
+  position: {
+    description: "The position of each label relative to it view box.",
+    table: {
+      type: {
+        summary: `'top' | 'left' | 'right' | 'bottom' | 'inside' | 'outside' | 'insideLeft' |
+          'insideRight' | 'insideTop' | 'insideBottom' | 'insideTopLeft' |
+          'insideBottomLeft' | 'insideTopRight' | 'insideBottomRight' |
+          'insideStart' | 'insideEnd' | 'end' | 'center' | 'centerTop' | 'centerBottom' | 'middle'`,
+      },
+      category: "General",
+    },
+    control: "select",
+    options: [
+      "top",
+      "left",
+      "right",
+      "bottom",
+      "inside",
+      "outside",
+      "insideLeft",
+      "insideRight",
+      "insideTop",
+      "insideBottom",
+      "insideTopLeft",
+      "insideBottomLeft",
+      "insideTopRight",
+      "insideBottomRight",
+      "insideStart",
+      "insideEnd",
+      "end",
+      "center",
+      "centerTop",
+      "centerBottom",
+      "middle",
+    ],
+  },
+  offset: {
+    description: 'The offset to the specified "position"',
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "5",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+  formatter: {
+    description:
+      "The formatter function of label value which has only one parameter - the value of label.",
+    table: {
+      type: {
+        summary: "Function",
+      },
+      category: "General",
+    },
+  },
+  data: {
+    description: "The data input to the charts.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "5",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+  clockWise: {
+    description: "The parameter to calculate the view box of label in radial charts.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      category: "General",
+    },
+    control: "boolean",
+  },
+  id: {
+    description:
+      "The unique id of this component, which will be used to generate " +
+      "unique clip path id internally. This props is suggested to be set in SSR.",
+    table: {
+      category: "General",
+    },
+  },
+};

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

@@ -0,0 +1,205 @@
+import { type ArgTypes } from "@storybook/react";
+
+export const legendType: ArgTypes[0] = {
+  description: "The type of icon in legend. If set to 'none', no legend item will be rendered.",
+  table: {
+    type: {
+      summary:
+        "'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'",
+    },
+    defaultValue: {
+      summary: "'line'",
+    },
+    category: "Style",
+  },
+  control: "select",
+  options: [
+    "line",
+    "plainline",
+    "square",
+    "rect",
+    "circle",
+    "cross",
+    "diamond",
+    "square",
+    "star",
+    "triangle",
+    "wye",
+    "none",
+  ],
+};
+
+// 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 legendArgs: ArgTypes = {
+  width: {
+    description: "The width of legend.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+  height: {
+    description: "The height of legend.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+  layout: {
+    description: "The layout of legend items.",
+    table: {
+      type: {
+        summary: "'horizontal' | 'vertical'",
+      },
+      defaultValue: {
+        summary: "'horizontal'",
+      },
+      category: "General",
+    },
+    control: "inline-radio",
+    options: ["horizontal", "vertical"],
+  },
+  align: {
+    description: `Sets horizontal position of the Legend relative to the chart:
+
+- \`left\` shows the Legend to the left of the chart, and chart width reduces automatically to make space for it.
+- \`right\` shows the Legend to the right of the chart, and chart width reduces automatically.
+- \`center\` shows the Legend in the middle of chart, and chart width remains unchanged.
+
+The exact behavior changes depending on \`verticalAlign\` prop.`,
+    table: {
+      type: {
+        summary: "'left' | 'center' | 'right'",
+      },
+      defaultValue: {
+        summary: "'center'",
+      },
+      category: "General",
+    },
+    control: "radio",
+    options: ["left", "center", "right"],
+  },
+  verticalAlign: {
+    description: `Sets vertical position of the Legend relative to the chart:
+
+- \`bottom\` shows the Legend below chart, and chart height reduces automatically to make space for it.
+- \`top\` shows the Legend above chart, and chart height reduces automatically.
+- \`middle\` shows the Legend in the middle of chart, covering other content, and chart height remains unchanged.
+
+The exact behavior changes depending on \`align\` prop.`,
+    table: {
+      type: {
+        summary: "'top' | 'middle' | 'bottom'",
+      },
+      category: "General",
+    },
+    control: "radio",
+    options: ["top", "middle", "bottom"],
+  },
+  iconSize: {
+    description: "The size of icon in each legend item.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      defaultValue: {
+        summary: "14",
+      },
+      category: "General",
+    },
+    control: "number",
+  },
+  iconType: {
+    description: "The type of icon in each legend item.",
+    table: {
+      type: {
+        summary:
+          "'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'",
+      },
+      defaultValue: {
+        summary: "line",
+      },
+      category: "General",
+    },
+    control: "select",
+    options: [
+      "line",
+      "plainline",
+      "square",
+      "rect",
+      "circle",
+      "cross",
+      "diamond",
+      "star",
+      "triangle",
+      "wye",
+    ],
+  },
+  content: {
+    description: `If set to a React element, the option will be used to render the legend.
+    If set to a function, the function will be called to render the legend's content.`,
+    table: {
+      type: {
+        summary: "ReactElement | Function",
+        detail: `<ChartLegend content={<CustomizedLegend external={external} />} />
+
+        const renderLegend = (props) => {
+          const { payload } = props;
+
+          return (
+            <ul>
+              {
+                payload.map((entry, index) => (
+                  <li key={'item'-index}>{entry.value}</li>
+                ))
+              }
+            </ul>
+          );
+        }
+        <Legend content={renderLegend} />`,
+      },
+      category: "General",
+    },
+  },
+  formatter: {
+    description: "The formatter function of each text in legend.",
+    table: {
+      type: {
+        summary: "Function",
+        detail: "(value, entry, index) => ()",
+      },
+      category: "General",
+    },
+  },
+  wrapperStyle: {
+    description: `The style of legend container which is a "position: absolute;" div element.
+    Because the position of legend is quite flexible, so you can change the position by the value of top, left, right, bottom in this option.
+    And the format of wrapperStyle is the same as React inline style.`,
+    table: {
+      type: {
+        summary: "Object",
+      },
+      category: "General",
+    },
+    control: "object",
+  },
+  portal: {
+    description: `If portal is defined, then Legend will use this element as a target
+    for rendering using React Portal: https://react.dev/reference/react-dom/createPortal.
+    If this is undefined then Legend renders inside the recharts-wrapper element with absolute positioning.`,
+    table: {
+      category: "Position",
+      type: {
+        summary: "HTMLElement | null",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,87 @@
+import { type Args } from "@storybook/react";
+import { dataKey } from "./chartArgs";
+import { generalStyleArgs, hide, labelDescription, labelSummary } from "./stylesArgs";
+
+export const lineArgs: Args = {
+  ...generalStyleArgs,
+  dataKey,
+  connectNulls: {
+    description: "Whether to connect a graph line across null points.",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      category: "Style",
+      defaultValue: {
+        summary: "false",
+      },
+    },
+    control: "boolean",
+  },
+  dot: {
+    description: `If false set, dots will not be drawn. If true set, dots will be drawn which have the props
+      calculated internally. If object set, dots will be drawn which have the props merged by the internal
+      calculated props and the option. If ReactElement set, the option can be the custom dot element.If set
+      a function, the function will be called to render customized dot.`,
+    table: {
+      type: {
+        summary: "Boolean | Object | ReactElement | Function",
+        detail:
+          '<Line dataKey="value" dot={false} />\n' +
+          "<Line dataKey=\"value\" dot={{ stroke: 'red', strokeWidth: 2 }} />\n" +
+          '<Line dataKey="value" dot={<CustomizedDot />} />\n' +
+          '<Line dataKey="value" dot={renderDot} />',
+      },
+      defaultValue: {
+        summary: "true",
+      },
+      category: "Style",
+    },
+    control: "boolean",
+  },
+  hide,
+  label: {
+    description: labelDescription,
+    table: {
+      type: {
+        summary: labelSummary,
+        detail:
+          '<Line dataKey="value" label />\n' +
+          "<Line dataKey=\"value\" label={{ fill: 'red', fontSize: 20 }} />\n" +
+          '<Line dataKey="value" label={<CustomizedLabel />} />\n' +
+          '<Line dataKey="value" label={renderLabel} />',
+      },
+      defaultValue: {
+        summary: "false",
+      },
+      category: "Style",
+    },
+    control: "boolean",
+  },
+  type: {
+    description: `The interpolation type of line. It's the same as type in Area.
+      And customized interpolation function can be set to type. https://github.com/d3/d3-shape#curves`,
+    default: "linear",
+    table: {
+      category: "Style",
+    },
+    control: "select",
+    options: [
+      "basis",
+      "basisClosed",
+      "basisOpen",
+      "bumpX",
+      "bumpY",
+      "bump",
+      "linear",
+      "linearClosed",
+      "natural",
+      "monotoneX",
+      "monotoneY",
+      "monotone",
+      "step",
+      "stepBefore",
+      "stepAfter",
+    ],
+  },
+};

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

@@ -0,0 +1,17 @@
+import { type ArgTypes } from "@storybook/react";
+import { categoricalChartArgs } from "./chartArgs";
+
+export const lineChartArgs: ArgTypes = {
+  ...categoricalChartArgs,
+  layout: {
+    description: "The layout of line in the chart, usually inherited from parent.",
+    table: {
+      type: {
+        summary: "'horizontal' | 'vertical'",
+      },
+      category: "Bar",
+    },
+    control: "radio",
+    options: ["horizontal", "vertical"],
+  },
+};

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

@@ -0,0 +1,18 @@
+import { type Args } from "@storybook/react";
+import { polarChartArgs } from "./polarChartArgs";
+import { polarSharedArgs } from "./polarSharedArgs";
+
+export const pieArgs: Args = {
+  ...polarSharedArgs,
+  ...polarChartArgs,
+  fillOpacity: {
+    description: "The opacity of the fill.",
+    table: {
+      type: {
+        summary: "number",
+      },
+      category: "Style",
+    },
+    control: "number",
+  },
+};

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

@@ -0,0 +1,7 @@
+import { type ArgTypes } from "@storybook/react";
+import { chartSizeArgs, margin } from "./chartArgs";
+
+export const pieChartArgs: ArgTypes = {
+  ...chartSizeArgs,
+  margin,
+};