cleanup

components/app-logo/AppLogo.stories.tsx

@@ -24,7 +24,7 @@ export const Small: Story = {
   },
 };
 
-export const DarkBackground: Story = {
+export const WithLightBackground: Story = {
   args: {
     backgroundColor: "#fff",
   },

components/auth/Auth.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Auth } from "./Auth";
 
 /**
- * The Auth component provides a user interface for authentication. It displays available sign-in options
+ * The `Auth` component provides a user interface for authentication. It displays available sign-in options
  * from different authentication providers, allowing users to log in or create an account.
  */
 const meta = {

components/avatar/Avatar.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Avatar } from "./Avatar";
 
 /**
- * The Avatar component is used to display a user's profile image.
+ * The `Avatar` component is used to display a user's profile image.
  * If no image is provided, it falls back to displaying the initials of the user’s name.
  */
 const meta = {

components/charts/chart-card/ChartCard.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ChartCard } from "./ChartCard";
+
+/**
+ * The `ChartCard` component is a flexible card layout designed to display chart-related information.
+ * It features a title, description, and a content area where charts or other visualizations can be placed.
+ * This component can be used as a container for any kind of data representation, making it a versatile
+ * choice for dashboards or analytics pages.
+ */
+const meta = {
+  component: ChartCard,
+  tags: ["autodocs"],
+  title: "Components/Charts/Chart Card",
+} satisfies Meta<typeof ChartCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    children: "Chart Content",
+    description:
+      "Compare your average times (HH:MM:SS) across different race distances",
+    title: "Average Time By Distance",
+  },
+};

components/charts/chart-card/ChartCard.test.tsx

@@ -0,0 +1,20 @@
+import { describe, expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { ChartCard } from "./ChartCard";
+import { ComponentProps } from "react";
+
+describe("ChartCard", () => {
+  const defaultProps: ComponentProps<typeof ChartCard> = {
+    children: "chart children",
+    description: "chart description",
+    title: "chart title",
+  };
+
+  test("should render with default props", () => {
+    render(<ChartCard {...defaultProps} />);
+
+    expect(screen.getByText(defaultProps.description)).toBeInTheDocument();
+    expect(screen.getByText(defaultProps.title)).toBeInTheDocument();
+    expect(screen.getByText("chart children")).toBeInTheDocument();
+  });
+});

components/charts/chart-card/ChartCard.tsx

@@ -0,0 +1,35 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { PropsWithChildren, ReactNode } from "react";
+
+interface IProps {
+  /**
+   * The content of the card, often used to display charts, tables, or other visual elements.
+   */
+  children: ReactNode;
+  /**
+   * A brief explanation or context for the chart or data.
+   */
+  description: string;
+  /**
+   * The main heading of the card, typically used to describe the chart or data displayed.
+   */
+  title: string;
+}
+
+export const ChartCard = (props: PropsWithChildren<IProps>) => {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{props.title}</CardTitle>
+        <CardDescription>{props.description}</CardDescription>
+      </CardHeader>
+      <CardContent>{props.children}</CardContent>
+    </Card>
+  );
+};

components/charts/distance-comparison-chart/DistanceComparisonChart.stories.tsx

@@ -5,7 +5,7 @@ import { IDistanceComparisonChartData } from "./DistanceComparisonChart.types";
 
 /**
  * The `DistanceComparisonChart` component is a bar chart that visualizes the average time taken
- * (in minutes) across different race distances. It's built using the `recharts` library and styled
+ * across different race distances. It's built using the `recharts` library and styled
  * within a card layout, making it suitable for dashboards or performance tracking interfaces.
  */
 const meta = {

components/charts/distance-comparison-chart/DistanceComparisonChart.tsx

@@ -1,14 +1,6 @@
 "use client";
 
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import {
   ChartConfig,
   ChartContainer,
@@ -17,8 +9,9 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import { IDistanceComparisonChartData } from "./DistanceComparisonChart.types";
+import { IDistanceComparisonChartData } from "@/components/charts/distance-comparison-chart/DistanceComparisonChart.types";
 import { minutesToTime } from "@/utils/timeToMinutes";
+import { ChartCard } from "@/components/charts/chart-card/ChartCard";
 
 const chartConfig = {
   averageTime: {
@@ -29,41 +22,36 @@ const chartConfig = {
 
 interface IProps {
   /**
-   * An array of data objects where each object contains `distance` (race distance) and `averageTime` (time in minutes).
+   * An array of data objects where each object contains `distance` (race distance) and `averageTime`.
    */
   distanceComparisonData: IDistanceComparisonChartData[];
 }
 
 export const DistanceComparisonChart = (props: IProps) => {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Average Time By Distance</CardTitle>
-        <CardDescription>
-          Compare your average times (HH:MM:SS) across different race distances
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig} className="max-h-[450px] w-full">
-          <BarChart
-            accessibilityLayer
-            data={props.distanceComparisonData}
-            margin={{
-              top: 20,
-            }}
-          >
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis dataKey="distance" />
-            <YAxis tickFormatter={(value) => minutesToTime(value)} />
-            <ChartTooltip
-              content={<ChartTooltipContent />}
-              formatter={(value) => minutesToTime(Number(value))}
-            />
-            <ChartLegend content={<ChartLegendContent />} />
-            <Bar dataKey="averageTime" fill="#10B981" radius={8} />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
+    <ChartCard
+      description="Compare your average times (HH:MM:SS) across different race distances"
+      title="Average Time By Distance"
+    >
+      <ChartContainer config={chartConfig} className="max-h-[450px] w-full">
+        <BarChart
+          accessibilityLayer
+          data={props.distanceComparisonData}
+          margin={{
+            top: 20,
+          }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="distance" />
+          <YAxis tickFormatter={(value) => minutesToTime(value)} />
+          <ChartTooltip
+            content={<ChartTooltipContent />}
+            formatter={(value) => minutesToTime(Number(value))}
+          />
+          <ChartLegend content={<ChartLegendContent />} />
+          <Bar dataKey="averageTime" fill="#10B981" radius={8} />
+        </BarChart>
+      </ChartContainer>
+    </ChartCard>
   );
 };