refactor components structure for standings

tariknz · tariknz · commit 4ebe72c90b0b · 2025-06-02T15:02:51.000+12:00
diff --git a/.storybook/DynamicTelemetrySelector.tsx b/.storybook/DynamicTelemetrySelector.tsx
diff --git a/.storybook/index.ts b/.storybook/index.ts
@@ -1 +1,2 @@
-export * from './telemetryDecorator';
+export * from './telemetryDecorator';
+export * from './DynamicTelemetrySelector';
diff --git a/src/frontend/components/Standings/Relative.stories.tsx b/src/frontend/components/Standings/Relative.stories.tsx
@@ -1,7 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Relative } from './Relative';
-import { TelemetryDecorator } from '@irdashies/storybook';
-import { DynamicTelemetrySelector, TEST_DATA_DIRS } from './DynamicTelemetrySelector';
+import {
+  TelemetryDecorator,
+  DynamicTelemetrySelector,
+} from '@irdashies/storybook';
 import { useState } from 'react';
 
 export default {
@@ -11,11 +13,6 @@ export default {
       exclude: ['telemetryPath'],
     },
   },
-  loaders: [
-    async () => {
-      return { testDataDirs: TEST_DATA_DIRS };
-    },
-  ],
 } as Meta<typeof Relative>;
 
 type Story = StoryObj<typeof Relative>;
@@ -25,19 +22,23 @@ export const Primary: Story = {
 };
 
 export const DynamicTelemetry: Story = {
-  decorators: [(Story, context) => {
-    const [selectedPath, setSelectedPath] = useState('/test-data/1747384273173');
-    
-    return (
-      <>
-        <DynamicTelemetrySelector
-          onPathChange={setSelectedPath}
-          initialPath={selectedPath}
-        />
-        {TelemetryDecorator(selectedPath)(Story, context)}
-      </>
-    );
-  }],
+  decorators: [
+    (Story, context) => {
+      const [selectedPath, setSelectedPath] = useState(
+        '/test-data/1747384273173'
+      );
+
+      return (
+        <>
+          <DynamicTelemetrySelector
+            onPathChange={setSelectedPath}
+            initialPath={selectedPath}
+          />
+          {TelemetryDecorator(selectedPath)(Story, context)}
+        </>
+      );
+    },
+  ],
 };
 
 export const MultiClassPCCWithClio: Story = {
diff --git a/src/frontend/components/Standings/Relative.tsx b/src/frontend/components/Standings/Relative.tsx
@@ -1,9 +1,9 @@
 import { useAutoAnimate } from '@formkit/auto-animate/react';
-import { DriverInfoRow } from './DriverInfoRow/DriverInfoRow';
+import { DriverInfoRow } from './components/DriverInfoRow/DriverInfoRow';
 import { useDriverRelatives } from './hooks/useDriverRelatives';
-import { DriverRatingBadge } from './DriverRatingBadge/DriverRatingBadge';
-import { SessionBar } from './SessionBar/SessionBar';
-import { SessionFooter } from './SessionFooter/SessionFooter';
+import { DriverRatingBadge } from './components/DriverRatingBadge/DriverRatingBadge';
+import { SessionBar } from './components/SessionBar/SessionBar';
+import { SessionFooter } from './components/SessionFooter/SessionFooter';
 
 export const Relative = () => {
   const standings = useDriverRelatives({ buffer: 3 });
diff --git a/src/frontend/components/Standings/Standings.stories.tsx b/src/frontend/components/Standings/Standings.stories.tsx
@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Standings } from './Standings';
-import { TelemetryDecorator } from '@irdashies/storybook';
-import { DynamicTelemetrySelector } from './DynamicTelemetrySelector';
+import { TelemetryDecorator, DynamicTelemetrySelector } from '@irdashies/storybook';
 import { useState } from 'react';
 
 export default {
diff --git a/src/frontend/components/Standings/Standings.tsx b/src/frontend/components/Standings/Standings.tsx
@@ -1,11 +1,12 @@
-import { DriverRatingBadge } from './DriverRatingBadge/DriverRatingBadge';
-import { DriverInfoRow } from './DriverInfoRow/DriverInfoRow';
+import { Fragment } from 'react';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
-import { DriverClassHeader } from './DriverClassHeader/DriverClassHeader';
-import { SessionBar } from './SessionBar/SessionBar';
-import { Fragment } from 'react/jsx-runtime';
+import { DriverClassHeader } from './components/DriverClassHeader/DriverClassHeader';
+import { DriverInfoRow } from './components/DriverInfoRow/DriverInfoRow';
+import { DriverRatingBadge } from './components/DriverRatingBadge/DriverRatingBadge';
+import { RatingChange } from './components/RatingChange/RatingChange';
+import { SessionBar } from './components/SessionBar/SessionBar';
+import { SessionFooter } from './components/SessionFooter/SessionFooter';
 import { useCarClassStats, useDriverStandings } from './hooks';
-import { SessionFooter } from './SessionFooter/SessionFooter';
 
 export const Standings = () => {
   const [parent] = useAutoAnimate();
@@ -37,7 +38,7 @@ export const Standings = () => {
                   hasFastestTime={result.hasFastestTime}
                   delta={result.delta}
                   position={result.classPosition}
-                  iratingChange={result.iratingChange}
+                  iratingChange={<RatingChange value={result.iratingChange} />}
                   lastTime={result.lastTime}
                   fastestTime={result.fastestTime}
                   onPitRoad={result.onPitRoad}
diff --git a/src/frontend/components/Standings/components/DriverClassHeader/DriverClassHeader.tsx b/src/frontend/components/Standings/components/DriverClassHeader/DriverClassHeader.tsx
diff --git a/src/frontend/components/Standings/components/DriverInfoRow/DriverInfoRow.stories.tsx b/src/frontend/components/Standings/components/DriverInfoRow/DriverInfoRow.stories.tsx
@@ -4,6 +4,7 @@ import { DriverRatingBadge } from '../DriverRatingBadge/DriverRatingBadge';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { SessionBar } from '../SessionBar/SessionBar';
 import { SessionFooter } from '../SessionFooter/SessionFooter';
+import { RatingChange } from '../RatingChange/RatingChange';
 
 export default {
   component: DriverInfoRow,
@@ -108,23 +109,23 @@ export const IRatingChange: Story = {
   name: 'iRating Positive Change',
   args: {
     ...Primary.args,
-    iratingChange: 10,
+    iratingChange: <RatingChange value={10} />,
   },
 };
 
 export const IRatingChangeNegative: Story = {
   name: 'iRating Negative Change',
   args: {
     ...Primary.args,
-    iratingChange: -58,
+    iratingChange: <RatingChange value={-58} />,
   },
 };
 
 export const IRatingNoChange: Story = {
   name: 'iRating No Change',
   args: {
     ...Primary.args,
-    iratingChange: 0,
+    iratingChange: <RatingChange value={0} />,
   },
 };
 
diff --git a/src/frontend/components/Standings/components/DriverInfoRow/DriverInfoRow.tsx b/src/frontend/components/Standings/components/DriverInfoRow/DriverInfoRow.tsx
@@ -1,9 +1,5 @@
-import { useMemo } from 'react';
 import {
   SpeakerHighIcon,
-  CaretUpIcon,
-  CaretDownIcon,
-  MinusIcon,
 } from '@phosphor-icons/react';
 import { getTailwindStyle } from '@irdashies/utils/colors';
 import { formatTime } from '@irdashies/utils/time';
@@ -18,7 +14,7 @@ interface DriverRowInfoProps {
   delta?: number;
   position: number;
   badge: React.ReactNode;
-  iratingChange?: number;
+  iratingChange?: React.ReactNode;
   lastTime?: number;
   fastestTime?: number;
   onPitRoad?: boolean;
@@ -51,30 +47,6 @@ export const DriverInfoRow = ({
   const lastTimeString = formatTime(lastTime);
   const fastestTimeString = formatTime(fastestTime);
 
-  const iratingChangeDisplay = useMemo(() => {
-    if (iratingChange === undefined || isNaN(iratingChange)) {
-      return { text: '-', color: 'text-gray-400' };
-    }
-    const roundedChange = Math.round(iratingChange);
-    let text: string;
-    let color = 'text-gray-400';
-    let icon: React.ReactNode;
-
-    if (roundedChange > 0) {
-      text = `${roundedChange}`;
-      color = 'text-green-400';
-      icon = <CaretUpIcon size={10} />;
-    } else if (roundedChange < 0) {
-      text = `${Math.abs(roundedChange)}`;
-      color = 'text-red-400';
-      icon = <CaretDownIcon size={10} />;
-    } else {
-      text = `${roundedChange}`;
-      icon = <MinusIcon size={10} />;
-    }
-    return { text, color, icon };
-  }, [iratingChange]);
-
   return (
     <tr
       key={carIdx}
@@ -115,11 +87,8 @@ export const DriverInfoRow = ({
       </td>
       <td>{badge}</td>
       {iratingChange !== undefined && (
-        <td className={`px-2 text-left ${iratingChangeDisplay.color}`}>
-          <span className="flex items-center gap-0.5">
-            {iratingChangeDisplay.icon}
-            {iratingChangeDisplay.text}
-          </span>
+        <td className="px-2 text-left">
+          {iratingChange}
         </td>
       )}
       <td className={`px-2`}>{delta?.toFixed(1)}</td>
diff --git a/src/frontend/components/Standings/components/DriverRatingBadge/DriverRatingBadge.spec.tsx b/src/frontend/components/Standings/components/DriverRatingBadge/DriverRatingBadge.spec.tsx
diff --git a/src/frontend/components/Standings/components/DriverRatingBadge/DriverRatingBadge.stories.tsx b/src/frontend/components/Standings/components/DriverRatingBadge/DriverRatingBadge.stories.tsx
diff --git a/src/frontend/components/Standings/components/DriverRatingBadge/DriverRatingBadge.tsx b/src/frontend/components/Standings/components/DriverRatingBadge/DriverRatingBadge.tsx
diff --git a/src/frontend/components/Standings/components/RatingChange/RatingChange.spec.tsx b/src/frontend/components/Standings/components/RatingChange/RatingChange.spec.tsx
@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { RatingChange } from './RatingChange';
+
+vi.mock('@phosphor-icons/react', () => ({
+  CaretUpIcon: () => <span>up-arrow</span>,
+  CaretDownIcon: () => <span>down-arrow</span>,
+  MinusIcon: () => <span>line-through</span>,
+}));
+
+describe('RatingChange', () => {
+  it('renders positive change with green color and up arrow', () => {
+    render(<RatingChange value={42} />);
+    const element = screen.getByText('42');
+    expect(element).toHaveClass('text-green-400');
+    expect(element.parentElement).toContainHTML('up-arrow');
+  });
+
+  it('renders negative change with red color and down arrow', () => {
+    render(<RatingChange value={-15} />);
+    const element = screen.getByText('15');
+    expect(element).toHaveClass('text-red-400');
+    expect(element.parentElement).toContainHTML('down-arrow');
+  });
+
+  it('renders zero change with gray color and minus icon', () => {
+    render(<RatingChange value={0} />);
+    const element = screen.getByText('0');
+    expect(element).toHaveClass('text-gray-400');
+    expect(element.parentElement).toContainHTML('line-through');
+  });
+
+  it('renders dash for undefined change', () => {
+    render(<RatingChange value={undefined} />);
+    const element = screen.getByText('line-through');
+    expect(element).toBeInTheDocument();
+  });
+
+  it('renders dash for NaN change', () => {
+    render(<RatingChange value={Number.NaN} />);
+    const element = screen.getByText('line-through');
+    expect(element).toBeInTheDocument();
+  });
+}); 
diff --git a/src/frontend/components/Standings/components/RatingChange/RatingChange.stories.tsx b/src/frontend/components/Standings/components/RatingChange/RatingChange.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RatingChange } from './RatingChange';
+
+const meta: Meta<typeof RatingChange> = {
+  component: RatingChange,
+};
+
+export default meta;
+type Story = StoryObj<typeof RatingChange>;
+
+export const Positive: Story = {
+  args: {
+    value: 42,
+  },
+};
+
+export const Negative: Story = {
+  args: {
+    value: -15,
+  },
+};
+
+export const Zero: Story = {
+  args: {
+    value: 0,
+  },
+};
+
+export const Undefined: Story = {
+  args: {
+    value: undefined,
+  },
+};
+
+export const NotANumber: Story = {
+  args: {
+    value: Number.NaN,
+  },
+}; 
diff --git a/src/frontend/components/Standings/components/RatingChange/RatingChange.tsx b/src/frontend/components/Standings/components/RatingChange/RatingChange.tsx
@@ -0,0 +1,38 @@
+import { CaretUpIcon, CaretDownIcon, MinusIcon } from '@phosphor-icons/react';
+
+interface RatingChangeProps {
+  value?: number;
+}
+
+export const RatingChange = ({ value }: RatingChangeProps) => {
+  if (value === undefined || isNaN(value)) {
+    return <span className="text-gray-400">
+      <MinusIcon size={10} />
+    </span>;
+  }
+
+  const roundedChange = Math.round(value);
+  let text: string;
+  let color = 'text-gray-400';
+  let icon: React.ReactNode;
+
+  if (roundedChange > 0) {
+    text = `${roundedChange}`;
+    color = 'text-green-400';
+    icon = <CaretUpIcon size={10} />;
+  } else if (roundedChange < 0) {
+    text = `${Math.abs(roundedChange)}`;
+    color = 'text-red-400';
+    icon = <CaretDownIcon size={10} />;
+  } else {
+    text = `${roundedChange}`;
+    icon = <MinusIcon size={10} />;
+  }
+
+  return (
+    <span className={`flex items-center gap-0.5 ${color}`}>
+      {icon}
+      {text}
+    </span>
+  );
+}; 
diff --git a/src/frontend/components/Standings/components/SessionBar/SessionBar.stories.tsx b/src/frontend/components/Standings/components/SessionBar/SessionBar.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { SessionBar } from './SessionBar';
-import { TelemetryDecorator } from '../../../../../.storybook/telemetryDecorator';
+import { TelemetryDecorator } from '../../../../../../.storybook/telemetryDecorator';
 
 export default {
   component: SessionBar,
diff --git a/src/frontend/components/Standings/components/SessionBar/SessionBar.tsx b/src/frontend/components/Standings/components/SessionBar/SessionBar.tsx
@@ -1,6 +1,6 @@
 import { useSessionName, useTelemetryValue } from '@irdashies/context';
 import { formatTimeShort } from '@irdashies/utils/time';
-import { useDriverIncidents, useSessionLapCount } from '../hooks';
+import { useDriverIncidents, useSessionLapCount } from '../../hooks';
 
 export const SessionBar = () => {
   const sessionNum = useTelemetryValue('SessionNum');
diff --git a/src/frontend/components/Standings/components/SessionFooter/SessionFooter.stories.tsx b/src/frontend/components/Standings/components/SessionFooter/SessionFooter.stories.tsx
diff --git a/src/frontend/components/Standings/components/SessionFooter/SessionFooter.tsx b/src/frontend/components/Standings/components/SessionFooter/SessionFooter.tsx
@@ -1,7 +1,7 @@
 import { ClockIcon, DropIcon, RoadHorizonIcon, ThermometerIcon } from '@phosphor-icons/react';
-import { useCurrentTime } from '../hooks/useCurrentTime';
-import { useTrackWetness } from '../hooks/useTrackWetness';
-import { useTrackTemperature } from '../hooks/useTrackTemperature';
+import { useCurrentTime } from '../../hooks/useCurrentTime';
+import { useTrackWetness } from '../../hooks/useTrackWetness';
+import { useTrackTemperature } from '../../hooks/useTrackTemperature';
 
 export const SessionFooter = () => {
   const time = useCurrentTime();
diff --git a/vitest.config.ts b/vitest.config.ts
@@ -9,5 +9,6 @@ export default defineConfig({
     environment: 'jsdom',
     globals: true,
     setupFiles: ['./vitest.setup.ts'],
+    include: ['src/**/*.spec.tsx'],
   },
 });

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`		`-export * from './telemetryDecorator';`
	`1`	`+export * from './telemetryDecorator';`
	`2`	`+export * from './DynamicTelemetrySelector';`