refactor: rename redundant type and add more comments

Author: e-younan

example/app/chart.tsx

@@ -1,5 +1,5 @@
 import {
-  type AxisLabelComponentProps,
+  type AxisLabelProps,
   LineChart,
   type PanGestureHandlerOnChangeEventPayload,
   HoverGestureHandlerOnChangeEventPayload,
@@ -21,7 +21,7 @@ const formatter = new Intl.NumberFormat("en-US", {
   currency: "USD",
 });
 
-const AxisLabel: React.FC<AxisLabelComponentProps> = ({ value }) => (
+const AxisLabel: React.FC<AxisLabelProps> = ({ value }) => (
   <Text selectable={false}>{formatter.format(value)}</Text>
 );
 

src/components/LineChart/AxisLabel.tsx

@@ -8,13 +8,17 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 
-export interface AxisLabelComponentProps {
+export interface AxisLabelProps {
+  /** The value that should be displayed as the label. */
   value: number;
 }
 
 interface AxisLabelContainerProps {
+  /** A label component to be displayed. */
   children: React.ReactNode;
+  /** The x position of the label. */
   x: number;
+  /** The width of the root container. */
   containerWidth: number;
 }
 

src/components/LineChart/index.tsx

@@ -4,7 +4,7 @@ import { LayoutChangeEvent, StyleSheet, View, ViewProps } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import { useSharedValue } from "react-native-reanimated";
 
-import { AxisLabelComponentProps, AxisLabelContainer } from "./AxisLabel";
+import { AxisLabelProps, AxisLabelContainer } from "./AxisLabel";
 import { Cursor } from "./Cursor";
 import { computePath, type ComputePathProps, computeGraphData } from "./computations";
 import {
@@ -79,15 +79,15 @@ interface LineChartProps extends ViewProps {
    * @note This compnent should not be a Skia component since it is not rendered
    * in the Canvas.
    */
-  TopAxisLabel?: React.FC<AxisLabelComponentProps>;
+  TopAxisLabel?: React.FC<AxisLabelProps>;
   /**
    * The component to render as the bottom axis label.
    * @default null
    *
    * @note This compnent should not be a Skia component since it is not rendered
    * in the Canvas.
    */
-  BottomAxisLabel?: React.FC<AxisLabelComponentProps>;
+  BottomAxisLabel?: React.FC<AxisLabelProps>;
   /**
    * The type of curve to use for the line chart. Currently, only "linear" is supported.
    *
@@ -271,7 +271,7 @@ export {
   LineChart,
   type LineChartProps,
   type PathFillProps,
-  type AxisLabelComponentProps,
+  type AxisLabelProps,
   // Gesture exports
   type PanGestureHandlerOnBeginEventPayload,
   type PanGestureHandlerEventPayload,

src/components/index.ts

@@ -2,7 +2,7 @@ export {
   LineChart,
   type LineChartProps,
   type PathFillProps,
-  type AxisLabelComponentProps,
+  type AxisLabelProps,
   // Gesture exports
   type PanGestureHandlerOnBeginEventPayload,
   type PanGestureHandlerEventPayload,

src/index.ts

@@ -1,7 +1,7 @@
 export {
   LineChart,
   type LineChartProps,
-  type AxisLabelComponentProps,
+  type AxisLabelProps,
   PanGestureHandlerOnBeginEventPayload,
   PanGestureHandlerOnChangeEventPayload,
   PanGestureHandlerEventPayload,