@sudobility/ratelimit-components-rn 1.0.1

package/src/__tests__/UsageDashboard.test.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { UsageDashboard } from '../UsageDashboard';
+import { UsageBarConfig } from '../types';
+
+jest.mock('@sudobility/components-rn', () => ({
+  cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
+}));
+
+const sampleBars: UsageBarConfig[] = [
+  { label: 'Hourly', current: 50, limit: 100 },
+  { label: 'Daily', current: 800, limit: 1000, subtitle: 'Resets at midnight' },
+  { label: 'Monthly', current: 9500, limit: 10000, colorOverride: 'red' },
+];
+
+describe('UsageDashboard', () => {
+  it('renders bar labels', () => {
+    render(<UsageDashboard bars={sampleBars} />);
+    expect(screen.getByText('Hourly')).toBeTruthy();
+    expect(screen.getByText('Daily')).toBeTruthy();
+    expect(screen.getByText('Monthly')).toBeTruthy();
+  });
+
+  it('renders title and subtitle', () => {
+    render(
+      <UsageDashboard
+        bars={sampleBars}
+        title="API Usage"
+        subtitle="Current billing period"
+      />
+    );
+    expect(screen.getByText('API Usage')).toBeTruthy();
+    expect(screen.getByText('Current billing period')).toBeTruthy();
+  });
+
+  it('displays current/limit values', () => {
+    render(<UsageDashboard bars={[{ label: 'Hourly', current: 50, limit: 100 }]} />);
+    expect(screen.getByText('50 / 100')).toBeTruthy();
+  });
+
+  it('displays percentage', () => {
+    render(
+      <UsageDashboard
+        bars={[{ label: 'Hourly', current: 50, limit: 100 }]}
+        showPercentage
+      />
+    );
+    expect(screen.getByText('50.0%')).toBeTruthy();
+  });
+
+  it('hides percentage when showPercentage is false', () => {
+    render(
+      <UsageDashboard
+        bars={[{ label: 'Hourly', current: 50, limit: 100 }]}
+        showPercentage={false}
+      />
+    );
+    expect(screen.queryByText('50.0%')).toBeNull();
+  });
+
+  it('displays remaining count', () => {
+    render(
+      <UsageDashboard
+        bars={[{ label: 'Hourly', current: 30, limit: 100 }]}
+        showRemaining
+      />
+    );
+    expect(screen.getByText('70 remaining')).toBeTruthy();
+  });
+
+  it('hides remaining when showRemaining is false', () => {
+    render(
+      <UsageDashboard
+        bars={[{ label: 'Hourly', current: 30, limit: 100 }]}
+        showRemaining={false}
+      />
+    );
+    expect(screen.queryByText('70 remaining')).toBeNull();
+  });
+
+  it('renders empty state when bars array is empty', () => {
+    render(<UsageDashboard bars={[]} />);
+    expect(screen.getByText('No usage data available')).toBeTruthy();
+  });
+
+  it('calls onBarPress with correct bar and index', () => {
+    const onBarPress = jest.fn();
+    render(<UsageDashboard bars={sampleBars} onBarPress={onBarPress} />);
+
+    const buttons = screen.getAllByRole('button');
+    fireEvent.press(buttons[1]);
+
+    expect(onBarPress).toHaveBeenCalledTimes(1);
+    expect(onBarPress).toHaveBeenCalledWith(sampleBars[1], 1);
+  });
+
+  it('does not render pressable when onBarPress is not provided', () => {
+    render(<UsageDashboard bars={sampleBars} />);
+    expect(screen.queryAllByRole('button')).toHaveLength(0);
+  });
+
+  it('renders bar subtitle when provided', () => {
+    render(<UsageDashboard bars={sampleBars} />);
+    expect(screen.getByText('Resets at midnight')).toBeTruthy();
+  });
+
+  it('caps percentage at 100% when current exceeds limit', () => {
+    render(
+      <UsageDashboard
+        bars={[{ label: 'Over', current: 150, limit: 100 }]}
+        showPercentage
+      />
+    );
+    expect(screen.getByText('100.0%')).toBeTruthy();
+  });
+});

package/src/index.ts

@@ -0,0 +1,20 @@
+// Type exports
+export type {
+  UsageBarColor,
+  UsageBarConfig,
+  UsageDashboardProps,
+  TierDisplayData,
+  TierComparisonTableProps,
+  HistoryEntryData,
+  UsageHistoryChartProps,
+} from './types';
+
+// Component exports
+export { UsageDashboard } from './UsageDashboard';
+export { TierComparisonTable } from './TierComparisonTable';
+export { UsageHistoryChart } from './UsageHistoryChart';
+
+// Default exports for convenience
+export { default as UsageDashboardDefault } from './UsageDashboard';
+export { default as TierComparisonTableDefault } from './TierComparisonTable';
+export { default as UsageHistoryChartDefault } from './UsageHistoryChart';

package/src/nativewind.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="nativewind/types" />
+
+import 'react-native';
+
+declare module 'react-native' {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface ImageProps {
+    className?: string;
+  }
+  interface ScrollViewProps {
+    className?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+  interface TouchableOpacityProps {
+    className?: string;
+  }
+  interface TextInputProps {
+    className?: string;
+  }
+}

package/src/types.ts

@@ -0,0 +1,128 @@
+/**
+ * Color variants for usage bars
+ */
+export type UsageBarColor =
+  | 'green'
+  | 'yellow'
+  | 'orange'
+  | 'red'
+  | 'blue'
+  | 'gray';
+
+/**
+ * Configuration for a single usage bar
+ */
+export interface UsageBarConfig {
+  /** Label for the usage bar (e.g., "Hourly", "Daily", "Monthly") */
+  label: string;
+  /** Current usage count */
+  current: number;
+  /** Maximum limit for this period */
+  limit: number;
+  /** Optional icon name to display */
+  icon?: string;
+  /** Optional override for the bar color */
+  colorOverride?: UsageBarColor;
+  /** Optional subtitle text */
+  subtitle?: string;
+}
+
+/**
+ * Props for the UsageDashboard component
+ */
+export interface UsageDashboardProps {
+  /** Array of usage bar configurations to display */
+  bars: UsageBarConfig[];
+  /** Optional title for the dashboard */
+  title?: string;
+  /** Optional subtitle for the dashboard */
+  subtitle?: string;
+  /** Whether to show percentage labels */
+  showPercentage?: boolean;
+  /** Whether to show the remaining count */
+  showRemaining?: boolean;
+  /** Optional callback when a bar is pressed */
+  onBarPress?: (bar: UsageBarConfig, index: number) => void;
+  /** Additional class names */
+  className?: string;
+}
+
+/**
+ * Data for displaying tier information
+ */
+export interface TierDisplayData {
+  /** Name of the tier (e.g., "Free", "Pro", "Enterprise") */
+  name: string;
+  /** Hourly limit for this tier */
+  hourlyLimit: number;
+  /** Daily limit for this tier */
+  dailyLimit: number;
+  /** Monthly limit for this tier */
+  monthlyLimit: number;
+  /** Optional price string */
+  price?: string;
+  /** Whether this is the current tier */
+  isCurrent?: boolean;
+  /** Whether this tier is recommended */
+  isRecommended?: boolean;
+  /** Optional description */
+  description?: string;
+  /** Optional additional features list */
+  features?: string[];
+}
+
+/**
+ * Props for the TierComparisonTable component
+ */
+export interface TierComparisonTableProps {
+  /** Array of tiers to compare */
+  tiers: TierDisplayData[];
+  /** Optional title for the table */
+  title?: string;
+  /** Callback when a tier is selected */
+  onTierSelect?: (tier: TierDisplayData) => void;
+  /** Whether to highlight the current tier */
+  highlightCurrent?: boolean;
+  /** Whether to show the price column */
+  showPrice?: boolean;
+  /** Additional class names */
+  className?: string;
+}
+
+/**
+ * Data for a single history entry
+ */
+export interface HistoryEntryData {
+  /** Timestamp or label for this entry */
+  timestamp: string | Date;
+  /** Usage value at this point */
+  value: number;
+  /** Optional limit value for comparison */
+  limit?: number;
+  /** Optional label override */
+  label?: string;
+}
+
+/**
+ * Props for the UsageHistoryChart component
+ */
+export interface UsageHistoryChartProps {
+  /** Array of history entries to display */
+  data: HistoryEntryData[];
+  /** Title for the chart */
+  title?: string;
+  /** Height of the chart area */
+  height?: number;
+  /** Color for the usage line/bars */
+  color?: UsageBarColor;
+  /** Whether to show the limit line */
+  showLimit?: boolean;
+  /** Whether to show data point labels */
+  showLabels?: boolean;
+  /** Display mode: 'line' or 'bar' */
+  mode?: 'line' | 'bar';
+  /** Callback when a data point is pressed */
+  onDataPointPress?: (entry: HistoryEntryData, index: number) => void;
+  /** Additional class names */
+  className?: string;
+}