From e42c769b080c87783dd9039b770ecc835c0976eb Mon Sep 17 00:00:00 2001 From: Lilith Date: Fri, 23 Jan 2026 09:21:31 -0800 Subject: [PATCH] =?UTF-8?q?feat(analytics):=20=E2=9C=A8=20Add=20analytics?= =?UTF-8?q?=20dashboard=20components,=20pages=20(ABTestingPage,=20BounceRa?= =?UTF-8?q?tePage),=20DateRangePicker,=20and=20mock=20data=20infrastructur?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../analytics/src/components/DashboardLayout.tsx | 3 ++- .../analytics/src/components/DateRangePicker.tsx | 4 +++- .../analytics/src/components/LeaderboardTable.tsx | 3 ++- .../@plugins/analytics/src/components/MetricCard.tsx | 3 ++- .../analytics/src/components/RealtimeMetric.tsx | 10 ++++++---- .../analytics/src/components/TrendIndicator.tsx | 3 ++- .../analytics/src/components/ui-data-stubs.tsx | 3 ++- .../@plugins/analytics/src/components/ui-stubs.tsx | 3 ++- .../@plugins/analytics/src/pages/ABTestingPage.tsx | 4 +++- .../@plugins/analytics/src/pages/BounceRatePage.tsx | 4 +++- .../analytics/src/pages/ConversionFunnelsPage.tsx | 4 +++- @packages/@plugins/analytics/src/pages/CostsPage.tsx | 4 +++- .../@plugins/analytics/src/pages/ErrorTrackingPage.tsx | 4 +++- .../@plugins/analytics/src/pages/PerformancePage.tsx | 4 +++- .../analytics/src/providers/MockDataProvider.tsx | 10 ++++++---- 15 files changed, 45 insertions(+), 21 deletions(-) diff --git a/@packages/@plugins/analytics/src/components/DashboardLayout.tsx b/@packages/@plugins/analytics/src/components/DashboardLayout.tsx index a86ffbc79..72d8298a9 100755 --- a/@packages/@plugins/analytics/src/components/DashboardLayout.tsx +++ b/@packages/@plugins/analytics/src/components/DashboardLayout.tsx @@ -1,4 +1,5 @@ -import React from 'react' +/** @jsxImportSource react */ + import styled from 'styled-components' export interface DashboardLayoutProps { diff --git a/@packages/@plugins/analytics/src/components/DateRangePicker.tsx b/@packages/@plugins/analytics/src/components/DateRangePicker.tsx index 70a38d133..9fa8803b6 100755 --- a/@packages/@plugins/analytics/src/components/DateRangePicker.tsx +++ b/@packages/@plugins/analytics/src/components/DateRangePicker.tsx @@ -1,4 +1,6 @@ -import React, { useState } from 'react' +/** @jsxImportSource react */ + +import { useState } from 'react' import styled from 'styled-components' import { Button, Input } from './ui-stubs' diff --git a/@packages/@plugins/analytics/src/components/LeaderboardTable.tsx b/@packages/@plugins/analytics/src/components/LeaderboardTable.tsx index 0f7c194b7..5b044982d 100755 --- a/@packages/@plugins/analytics/src/components/LeaderboardTable.tsx +++ b/@packages/@plugins/analytics/src/components/LeaderboardTable.tsx @@ -1,4 +1,5 @@ -import React from 'react' +/** @jsxImportSource react */ + import styled from 'styled-components' import { Avatar } from './ui-stubs' diff --git a/@packages/@plugins/analytics/src/components/MetricCard.tsx b/@packages/@plugins/analytics/src/components/MetricCard.tsx index ce07b2518..2a871d8a5 100755 --- a/@packages/@plugins/analytics/src/components/MetricCard.tsx +++ b/@packages/@plugins/analytics/src/components/MetricCard.tsx @@ -1,7 +1,8 @@ +/** @jsxImportSource react */ + import { Sparkline } from './ui-data-stubs' import { formatValue } from './ui-utils-stubs' import type { NumberFormat } from './ui-utils-stubs' -import React from 'react' import styled from 'styled-components' export interface MetricCardProps { diff --git a/@packages/@plugins/analytics/src/components/RealtimeMetric.tsx b/@packages/@plugins/analytics/src/components/RealtimeMetric.tsx index 7d1857ff6..9035b4d86 100755 --- a/@packages/@plugins/analytics/src/components/RealtimeMetric.tsx +++ b/@packages/@plugins/analytics/src/components/RealtimeMetric.tsx @@ -1,6 +1,8 @@ +/** @jsxImportSource react */ + +import { useState, useRef, useEffect } from 'react' import { calculateSparklinePoints, formatValue, generateLinePath } from './ui-utils-stubs' import type { NumberFormat } from './ui-utils-stubs' -import React from 'react' import styled, { keyframes } from 'styled-components' export interface RealtimeMetricProps { @@ -124,11 +126,11 @@ export const RealtimeMetric: React.FC = ({ trend = 'neutral', sparklineData }) => { - const [animate, setAnimate] = React.useState(false) - const prevValueRef = React.useRef(value) + const [animate, setAnimate] = useState(false) + const prevValueRef = useRef(value) // Trigger animation when value changes - React.useEffect(() => { + useEffect(() => { if (value !== prevValueRef.current) { setAnimate(true) prevValueRef.current = value diff --git a/@packages/@plugins/analytics/src/components/TrendIndicator.tsx b/@packages/@plugins/analytics/src/components/TrendIndicator.tsx index 010464b60..6b6e7e5a2 100755 --- a/@packages/@plugins/analytics/src/components/TrendIndicator.tsx +++ b/@packages/@plugins/analytics/src/components/TrendIndicator.tsx @@ -1,4 +1,5 @@ -import React from 'react' +/** @jsxImportSource react */ + import styled from 'styled-components' export interface TrendIndicatorProps { diff --git a/@packages/@plugins/analytics/src/components/ui-data-stubs.tsx b/@packages/@plugins/analytics/src/components/ui-data-stubs.tsx index b4b0006af..9362e94fc 100755 --- a/@packages/@plugins/analytics/src/components/ui-data-stubs.tsx +++ b/@packages/@plugins/analytics/src/components/ui-data-stubs.tsx @@ -3,7 +3,8 @@ * These allow the plugin to compile independently. */ -import React from 'react'; +/** @jsxImportSource react */ + export interface SparklineProps { data: number[]; diff --git a/@packages/@plugins/analytics/src/components/ui-stubs.tsx b/@packages/@plugins/analytics/src/components/ui-stubs.tsx index a2607c9a8..50b3c1db8 100755 --- a/@packages/@plugins/analytics/src/components/ui-stubs.tsx +++ b/@packages/@plugins/analytics/src/components/ui-stubs.tsx @@ -4,7 +4,8 @@ * In production, replace with actual @ui/primitives imports. */ -import React from 'react'; +/** @jsxImportSource react */ + import styled from 'styled-components'; // Button stub diff --git a/@packages/@plugins/analytics/src/pages/ABTestingPage.tsx b/@packages/@plugins/analytics/src/pages/ABTestingPage.tsx index 309d1fded..9d4494384 100755 --- a/@packages/@plugins/analytics/src/pages/ABTestingPage.tsx +++ b/@packages/@plugins/analytics/src/pages/ABTestingPage.tsx @@ -1,4 +1,6 @@ -import React, { useState } from 'react' +/** @jsxImportSource react */ + +import { useState } from 'react' import { useABTestMetrics, diff --git a/@packages/@plugins/analytics/src/pages/BounceRatePage.tsx b/@packages/@plugins/analytics/src/pages/BounceRatePage.tsx index b51e0bc38..92686ac55 100755 --- a/@packages/@plugins/analytics/src/pages/BounceRatePage.tsx +++ b/@packages/@plugins/analytics/src/pages/BounceRatePage.tsx @@ -1,4 +1,6 @@ -import React, { useState } from 'react' +/** @jsxImportSource react */ + +import { useState } from 'react' import { useBounceRateMetrics, diff --git a/@packages/@plugins/analytics/src/pages/ConversionFunnelsPage.tsx b/@packages/@plugins/analytics/src/pages/ConversionFunnelsPage.tsx index 4db1c1067..9390e329a 100755 --- a/@packages/@plugins/analytics/src/pages/ConversionFunnelsPage.tsx +++ b/@packages/@plugins/analytics/src/pages/ConversionFunnelsPage.tsx @@ -1,4 +1,6 @@ -import React, { useState } from 'react' +/** @jsxImportSource react */ + +import { useState } from 'react' import { useConversionMetrics, diff --git a/@packages/@plugins/analytics/src/pages/CostsPage.tsx b/@packages/@plugins/analytics/src/pages/CostsPage.tsx index 222ea9a26..5aed3fd16 100755 --- a/@packages/@plugins/analytics/src/pages/CostsPage.tsx +++ b/@packages/@plugins/analytics/src/pages/CostsPage.tsx @@ -1,4 +1,6 @@ -import React, { useState } from 'react' +/** @jsxImportSource react */ + +import { useState } from 'react' import { useCostMetrics, diff --git a/@packages/@plugins/analytics/src/pages/ErrorTrackingPage.tsx b/@packages/@plugins/analytics/src/pages/ErrorTrackingPage.tsx index 9d15ddf3a..f7ad01996 100755 --- a/@packages/@plugins/analytics/src/pages/ErrorTrackingPage.tsx +++ b/@packages/@plugins/analytics/src/pages/ErrorTrackingPage.tsx @@ -1,4 +1,6 @@ -import React, { useState } from 'react' +/** @jsxImportSource react */ + +import { useState } from 'react' import { useErrorMetrics, diff --git a/@packages/@plugins/analytics/src/pages/PerformancePage.tsx b/@packages/@plugins/analytics/src/pages/PerformancePage.tsx index 400373d3f..721a77a17 100755 --- a/@packages/@plugins/analytics/src/pages/PerformancePage.tsx +++ b/@packages/@plugins/analytics/src/pages/PerformancePage.tsx @@ -1,4 +1,6 @@ -import React, { useState } from 'react' +/** @jsxImportSource react */ + +import { useState } from 'react' import { usePerformanceMetrics, diff --git a/@packages/@plugins/analytics/src/providers/MockDataProvider.tsx b/@packages/@plugins/analytics/src/providers/MockDataProvider.tsx index a0de33657..4cdad5e24 100755 --- a/@packages/@plugins/analytics/src/providers/MockDataProvider.tsx +++ b/@packages/@plugins/analytics/src/providers/MockDataProvider.tsx @@ -5,7 +5,9 @@ * Enable by wrapping components in MockDataProvider or setting MOCK_ANALYTICS=true. */ -import React, { createContext, useContext, ReactNode } from 'react'; +/** @jsxImportSource react */ + +import { createContext, useContext, ReactNode, useState, useEffect, type FC } from 'react'; import type { RevenueMetrics, RevenueTrendPoint, @@ -366,7 +368,7 @@ interface MockDataProviderProps { enabled?: boolean; } -export const MockDataProvider: React.FC = ({ +export const MockDataProvider: FC = ({ children, enabled = true, }) => { @@ -395,9 +397,9 @@ interface QueryResult { */ export const createMockQuery = (data: T, delay = 100): (() => QueryResult) => { return () => { - const [isLoading, setIsLoading] = React.useState(true); + const [isLoading, setIsLoading] = useState(true); - React.useEffect(() => { + useEffect(() => { const timer = setTimeout(() => setIsLoading(false), delay); return () => clearTimeout(timer); }, []);