react-native-metrify 0.1.0-alpha.1 → 0.1.0-alpha.2

package/src/core/types/index.ts

@@ -1,164 +0,0 @@
-/**
- * Core type definitions for dashboard widgets
- */
-
-/**
- * Theme color palette
- */
-export interface ThemeColors {
-  // Primary colors
-  primary: string;
-  secondary: string;
-  accent: string;
-  
-  // Semantic colors
-  success: string;
-  warning: string;
-  error: string;
-  info: string;
-  
-  // Background colors
-  background: string;
-  surface: string;
-  overlay: string;
-  
-  // Text colors
-  text: string;
-  textSecondary: string;
-  textDisabled: string;
-  
-  // Border colors
-  border: string;
-  borderLight: string;
-  
-  // Chart colors
-  chartPrimary: string;
-  chartSecondary: string;
-  chartTertiary: string;
-  chartQuaternary: string;
-  chartPositive: string;
-  chartNegative: string;
-  chartNeutral: string;
-}
-
-/**
- * Theme spacing scale
- */
-export interface ThemeSpacing {
-  xs: number;
-  sm: number;
-  md: number;
-  lg: number;
-  xl: number;
-  xxl: number;
-}
-
-/**
- * Theme border radius scale
- */
-export interface ThemeRadius {
-  none: number;
-  sm: number;
-  md: number;
-  lg: number;
-  full: number;
-}
-
-/**
- * Theme font scale
- */
-export interface ThemeFontScale {
-  xs: number;
-  sm: number;
-  md: number;
-  lg: number;
-  xl: number;
-  xxl: number;
-}
-
-/**
- * Complete theme definition
- */
-export interface Theme {
-  colors: ThemeColors;
-  spacing: ThemeSpacing;
-  radius: ThemeRadius;
-  fontScale: ThemeFontScale;
-}
-
-/**
- * Widget loading states
- */
-export type WidgetState = 'idle' | 'loading' | 'error' | 'empty';
-
-/**
- * Trend direction
- */
-export type TrendDirection = 'up' | 'down' | 'neutral';
-
-/**
- * Font size configuration for widgets
- */
-export interface FontSizeConfig {
-  /**
-   * Custom font size for labels
-   */
-  labelSize?: number;
-  
-  /**
-   * Custom font size for values
-   */
-  valueSize?: number;
-  
-  /**
-   * Custom font size for secondary text
-   */
-  secondarySize?: number;
-  
-  /**
-   * Enable/disable responsive font scaling (default: true)
-   */
-  responsive?: boolean;
-  
-  /**
-   * Minimum font size when responsive scaling is enabled
-   */
-  minSize?: number;
-  
-  /**
-   * Maximum font size when responsive scaling is enabled
-   */
-  maxSize?: number;
-}
-
-/**
- * Base props shared by all widgets
- */
-export interface BaseWidgetProps<T = unknown> {
-  data: T;
-  width?: number;
-  height?: number;
-  loading?: boolean;
-  theme?: Theme;
-  animated?: boolean;
-  testID?: string;
-  /**
-   * Font size configuration
-   */
-  fontSize?: FontSizeConfig;
-}
-
-/**
- * Animation configuration
- */
-export interface AnimationConfig {
-  duration?: number;
-  easing?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
-  delay?: number;
-}
-
-/**
- * Time interval types
- * Note: Also exported from utils/time.ts - using that as the main export
- */
-// export type TimeInterval = 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';

package/src/core/utils/responsive.ts

@@ -1,203 +0,0 @@
-/**
- * Responsive sizing utilities for widgets
- */
-
-import type { FontSizeConfig } from '../types';
-
-/**
- * Scale factor type for responsive sizing
- */
-export type ScaleFactor = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-
-/**
- * Base font sizes - used as reference for scaling
- */
-const BASE_FONT_SIZES = {
-  xs: 10,
-  sm: 12,
-  md: 14,
-  lg: 18,
-  xl: 24,
-  xxl: 32,
-};
-
-/**
- * Calculate responsive font size based on widget dimensions
- * 
- * @param baseFontSize - Base font size (from theme or custom)
- * @param width - Widget width
- * @param height - Widget height
- * @param referenceSize - Reference dimension (default: 300 for width-based scaling)
- * @returns Scaled font size
- * 
- * @example
- * // For a widget that's 150px wide (half of reference 300px)
- * getResponsiveFontSize(16, 150, 100, 300) // Returns 8 (50% of 16)
- * 
- * // For a widget that's 600px wide (2x reference)
- * getResponsiveFontSize(16, 600, 200, 300) // Returns 32 (200% of 16)
- */
-export function getResponsiveFontSize(
-  baseFontSize: number,
-  width: number,
-  height: number,
-  referenceSize: number = 300
-): number {
-  // Use the smaller dimension to ensure text fits in both directions
-  const dimension = Math.min(width, height);
-  const scaleFactor = dimension / referenceSize;
-  
-  // Clamp the scale factor to prevent text from becoming too small or too large
-  const clampedScale = Math.max(0.5, Math.min(scaleFactor, 2.5));
-  
-  return Math.round(baseFontSize * clampedScale);
-}
-
-/**
- * Get scaled font sizes for all scale factors
- * 
- * @param width - Widget width
- * @param height - Widget height
- * @param referenceSize - Reference dimension for scaling
- * @returns Object with scaled font sizes for each scale factor
- * 
- * @example
- * const fontSizes = getScaledFontSizes(150, 100, 300);
- * // Returns: { xs: 5, sm: 6, md: 7, lg: 9, xl: 12, xxl: 16 }
- */
-export function getScaledFontSizes(
-  width: number,
-  height: number,
-  referenceSize: number = 300
-): Record<ScaleFactor, number> {
-  return {
-    xs: getResponsiveFontSize(BASE_FONT_SIZES.xs, width, height, referenceSize),
-    sm: getResponsiveFontSize(BASE_FONT_SIZES.sm, width, height, referenceSize),
-    md: getResponsiveFontSize(BASE_FONT_SIZES.md, width, height, referenceSize),
-    lg: getResponsiveFontSize(BASE_FONT_SIZES.lg, width, height, referenceSize),
-    xl: getResponsiveFontSize(BASE_FONT_SIZES.xl, width, height, referenceSize),
-    xxl: getResponsiveFontSize(BASE_FONT_SIZES.xxl, width, height, referenceSize),
-  };
-}
-
-/**
- * Options for responsive font scaling
- */
-export interface ResponsiveFontOptions {
-  /**
-   * Enable/disable responsive scaling (default: true)
-   */
-  enabled?: boolean;
-  
-  /**
-   * Minimum font size to prevent text from becoming unreadable
-   */
-  minSize?: number;
-  
-  /**
-   * Maximum font size to prevent text from becoming too large
-   */
-  maxSize?: number;
-  
-  /**
-   * Reference size for scaling calculations (default: 300)
-   */
-  referenceSize?: number;
-}
-
-/**
- * Calculate font size with options
- * 
- * @param baseFontSize - Base font size
- * @param width - Widget width
- * @param height - Widget height
- * @param options - Responsive font options
- * @returns Calculated font size
- */
-export function calculateFontSize(
-  baseFontSize: number,
-  width: number,
-  height: number,
-  options: ResponsiveFontOptions = {}
-): number {
-  const {
-    enabled = true,
-    minSize = 8,
-    maxSize = 48,
-    referenceSize = 300,
-  } = options;
-  
-  // If responsive scaling is disabled, return base size
-  if (!enabled) {
-    return baseFontSize;
-  }
-  
-  // Calculate responsive size
-  const responsiveSize = getResponsiveFontSize(
-    baseFontSize,
-    width,
-    height,
-    referenceSize
-  );
-  
-  // Apply min/max constraints
-  return Math.max(minSize, Math.min(responsiveSize, maxSize));
-}
-
-/**
- * Create font size calculator for a widget
- * 
- * @param width - Widget width
- * @param height - Widget height
- * @param fontConfig - Font size configuration from props
- * @returns Function to calculate responsive font sizes
- */
-export function createFontSizeCalculator(
-  width: number,
-  height: number,
-  fontConfig: FontSizeConfig = {}
-) {
-  const {
-    responsive = true,
-    minSize = 8,
-    maxSize = 48,
-  } = fontConfig;
-  
-  return {
-    /**
-     * Get font size for labels
-     */
-    label: (baseFontSize: number): number => {
-      return fontConfig.labelSize ?? calculateFontSize(
-        baseFontSize,
-        width,
-        height,
-        { enabled: responsive, minSize, maxSize }
-      );
-    },
-    
-    /**
-     * Get font size for values
-     */
-    value: (baseFontSize: number): number => {
-      return fontConfig.valueSize ?? calculateFontSize(
-        baseFontSize,
-        width,
-        height,
-        { enabled: responsive, minSize, maxSize }
-      );
-    },
-    
-    /**
-     * Get font size for secondary text
-     */
-    secondary: (baseFontSize: number): number => {
-      return fontConfig.secondarySize ?? calculateFontSize(
-        baseFontSize,
-        width,
-        height,
-        { enabled: responsive, minSize, maxSize }
-      );
-    },
-  };
-}

package/src/core/utils/time.ts

@@ -1,100 +0,0 @@
-/**
- * Time formatting utilities for chart labels
- */
-
-export type TimeInterval = 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
-
-/**
- * Format date based on interval
- */
-export function formatTimeLabel(date: Date, interval: TimeInterval): string {
-  switch (interval) {
-    case 'minute':
-      return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
-    
-    case 'hour':
-      return date.toLocaleTimeString('en-US', { hour: '2-digit' });
-    
-    case 'day':
-      return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-    
-    case 'week':
-      return `Week ${getWeekNumber(date)}`;
-    
-    case 'month':
-      return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
-    
-    case 'year':
-      return date.getFullYear().toString();
-    
-    default:
-      return date.toLocaleDateString();
-  }
-}
-
-/**
- * Get week number of year
- */
-function getWeekNumber(date: Date): number {
-  const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
-  const pastDaysOfYear = (date.getTime() - firstDayOfYear.getTime()) / 86400000;
-  return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
-}
-
-/**
- * Generate array of dates for a time range
- */
-export function generateTimeLabels(
-  start: Date,
-  count: number,
-  interval: TimeInterval
-): string[] {
-  const labels: string[] = [];
-  const current = new Date(start);
-  
-  for (let i = 0; i < count; i++) {
-    labels.push(formatTimeLabel(current, interval));
-    
-    // Increment based on interval
-    switch (interval) {
-      case 'minute':
-        current.setMinutes(current.getMinutes() + 1);
-        break;
-      case 'hour':
-        current.setHours(current.getHours() + 1);
-        break;
-      case 'day':
-        current.setDate(current.getDate() + 1);
-        break;
-      case 'week':
-        current.setDate(current.getDate() + 7);
-        break;
-      case 'month':
-        current.setMonth(current.getMonth() + 1);
-        break;
-      case 'year':
-        current.setFullYear(current.getFullYear() + 1);
-        break;
-    }
-  }
-  
-  return labels;
-}
-
-/**
- * Reduce labels to fit width (show every Nth label)
- */
-export function reduceLabels(labels: string[], maxLabels: number): { label: string; index: number }[] {
-  if (labels.length <= maxLabels) {
-    return labels.map((label, index) => ({ label, index }));
-  }
-  
-  const step = Math.ceil(labels.length / maxLabels);
-  const reduced: { label: string; index: number }[] = [];
-  
-  for (let i = 0; i < labels.length; i += step) {
-    reduced.push({ label: labels[i], index: i });
-  }
-  
-  return reduced;
-}

package/src/index.ts

@@ -1,13 +0,0 @@
-/**
- * Dashboard Widgets - Main entry point
- * Mobile-first dashboard widget library for React Native
- */
-
-// Core exports
-export * from './core';
-
-// Widget exports
-export * from './widgets';
-
-// Version
-export const VERSION = '0.1.0';

package/src/renderer-svg/adapters/index.ts

@@ -1,84 +0,0 @@
-/**
- * Adapters for bridging core utilities with SVG rendering
- */
-import { Point } from '../../core/layout';
-
-/**
- * Converts data array to SVG points
- */
-export function dataToPoints(
-  data: number[],
-  width: number,
-  height: number,
-  padding: number = 0
-): Point[] {
-  if (data.length === 0) return [];
-  
-  const min = Math.min(...data);
-  const max = Math.max(...data);
-  const range = max - min || 1;
-  
-  const innerWidth = width - padding * 2;
-  const innerHeight = height - padding * 2;
-  const stepX = data.length > 1 ? innerWidth / (data.length - 1) : 0;
-  
-  return data.map((value, index) => {
-    const normalizedY = (value - min) / range;
-    return {
-      x: padding + index * stepX,
-      y: padding + innerHeight - normalizedY * innerHeight,
-    };
-  });
-}
-
-/**
- * Formats numbers for display
- */
-export function formatNumber(
-  value: number,
-  format?: 'number' | 'currency' | 'percent' | 'compact'
-): string {
-  switch (format) {
-    case 'currency':
-      return new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0,
-      }).format(value);
-    
-    case 'percent':
-      return `${value.toFixed(1)}%`;
-    
-    case 'compact':
-      if (value >= 1_000_000) {
-        return `${(value / 1_000_000).toFixed(1)}M`;
-      }
-      if (value >= 1_000) {
-        return `${(value / 1_000).toFixed(1)}K`;
-      }
-      return value.toString();
-    
-    case 'number':
-    default:
-      return new Intl.NumberFormat('en-US').format(value);
-  }
-}
-
-/**
- * Gets color for trend direction
- */
-export function getTrendColor(
-  trend: 'up' | 'down' | 'neutral',
-  colors: { positive: string; negative: string; neutral: string }
-): string {
-  switch (trend) {
-    case 'up':
-      return colors.positive;
-    case 'down':
-      return colors.negative;
-    case 'neutral':
-    default:
-      return colors.neutral;
-  }
-}

package/src/renderer-svg/index.ts

@@ -1,8 +0,0 @@
-/**
- * SVG Renderer package
- * Translates geometry to SVG primitives
- * NO BUSINESS LOGIC HERE
- */
-export * from './primitives';
-export * from './paths';
-export * from './adapters';

package/src/renderer-svg/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@dashboard-widgets/renderer-svg",
-  "version": "0.1.0",
-  "description": "SVG renderer for dashboard widgets - primitives, paths, adapters",
-  "main": "index.ts",
-  "types": "index.ts",
-  "private": true,
-  "dependencies": {
-    "@dashboard-widgets/core": "*"
-  },
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-native": ">=0.70.0",
-    "react-native-svg": ">=13.0.0",
-    "react-native-reanimated": ">=3.0.0"
-  }
-}

package/src/renderer-svg/paths/arc.ts

@@ -1,93 +0,0 @@
-/**
- * SVG arc path generator
- * Translates geometry to SVG path strings
- */
-import { polarToCartesian } from '../../core/math';
-
-export interface ArcPathConfig {
-  cx: number;
-  cy: number;
-  radius: number;
-  startAngle: number;
-  endAngle: number;
-}
-
-/**
- * Creates an SVG arc path
- * @param config - Arc configuration
- * @returns SVG path string
- */
-export function createArcPath(config: ArcPathConfig): string {
-  const { cx, cy, radius, startAngle, endAngle } = config;
-  
-  const start = polarToCartesian(cx, cy, radius, endAngle);
-  const end = polarToCartesian(cx, cy, radius, startAngle);
-  
-  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-  
-  return [
-    'M',
-    start.x,
-    start.y,
-    'A',
-    radius,
-    radius,
-    0,
-    largeArcFlag,
-    0,
-    end.x,
-    end.y,
-  ].join(' ');
-}
-
-/**
- * Creates a filled arc (pie slice) path
- */
-export function createFilledArcPath(config: ArcPathConfig): string {
-  const { cx, cy } = config;
-  const arcPath = createArcPath(config);
-  
-  return `${arcPath} L ${cx} ${cy} Z`;
-}
-
-/**
- * Creates a donut arc path with inner and outer radius
- */
-export function createDonutArcPath(
-  config: ArcPathConfig & { innerRadius: number }
-): string {
-  const { cx, cy, radius, innerRadius, startAngle, endAngle } = config;
-  
-  const outerStart = polarToCartesian(cx, cy, radius, endAngle);
-  const outerEnd = polarToCartesian(cx, cy, radius, startAngle);
-  const innerStart = polarToCartesian(cx, cy, innerRadius, endAngle);
-  const innerEnd = polarToCartesian(cx, cy, innerRadius, startAngle);
-  
-  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-  
-  return [
-    'M',
-    outerStart.x,
-    outerStart.y,
-    'A',
-    radius,
-    radius,
-    0,
-    largeArcFlag,
-    0,
-    outerEnd.x,
-    outerEnd.y,
-    'L',
-    innerEnd.x,
-    innerEnd.y,
-    'A',
-    innerRadius,
-    innerRadius,
-    0,
-    largeArcFlag,
-    1,
-    innerStart.x,
-    innerStart.y,
-    'Z',
-  ].join(' ');
-}

package/src/renderer-svg/paths/index.ts

@@ -1,6 +0,0 @@
-/**
- * SVG path generators
- */
-export * from './arc';
-export * from './line';
-export * from './rect';