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

package/src/core/math/index.ts

@@ -1,72 +0,0 @@
-/**
- * Core math utilities for dashboard widgets
- * Pure functions only - no side effects, no dependencies
- */
-
-/**
- * Clamps a value between min and max
- */
-export function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
-
-/**
- * Normalizes a value from [min, max] to [0, 1]
- */
-export function normalize(value: number, min: number, max: number): number {
-  if (max === min) return 0;
-  return clamp((value - min) / (max - min), 0, 1);
-}
-
-/**
- * Interpolates a value from one range to another
- * @example interpolate(5, [0, 10], [0, 100]) // 50
- */
-export function interpolate(
-  value: number,
-  inRange: [number, number],
-  outRange: [number, number]
-): number {
-  const normalized = normalize(value, inRange[0], inRange[1]);
-  return outRange[0] + normalized * (outRange[1] - outRange[0]);
-}
-
-/**
- * Converts polar coordinates to cartesian
- * @param cx - Center X
- * @param cy - Center Y
- * @param r - Radius
- * @param angle - Angle in degrees
- */
-export function polarToCartesian(
-  cx: number,
-  cy: number,
-  r: number,
-  angle: number
-): { x: number; y: number } {
-  const angleInRadians = ((angle - 90) * Math.PI) / 180;
-  return {
-    x: cx + r * Math.cos(angleInRadians),
-    y: cy + r * Math.sin(angleInRadians),
-  };
-}
-
-/**
- * Rounds a number to a specified number of decimal places
- */
-export function roundTo(value: number, decimals: number = 2): number {
-  const multiplier = Math.pow(10, decimals);
-  return Math.round(value * multiplier) / multiplier;
-}
-
-/**
- * Calculates the distance between two points
- */
-export function distance(
-  x1: number,
-  y1: number,
-  x2: number,
-  y2: number
-): number {
-  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
-}

package/src/core/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "@dashboard-widgets/core",
-  "version": "0.1.0",
-  "description": "Core utilities for dashboard widgets - math, theme, animation, layout",
-  "main": "index.ts",
-  "types": "index.ts",
-  "private": true,
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-native": ">=0.70.0",
-    "react-native-reanimated": ">=3.0.0"
-  }
-}

package/src/core/theme/ThemeProvider.tsx

@@ -1,36 +0,0 @@
-/**
- * Theme provider and context
- */
-import React, { createContext, useContext, ReactNode } from 'react';
-import { Theme } from '../types';
-import { DefaultTheme } from './themes';
-
-const ThemeContext = createContext<Theme>(DefaultTheme);
-
-export interface ThemeProviderProps {
-  theme?: Theme;
-  children: ReactNode;
-}
-
-/**
- * Theme provider component
- * Wraps the app and provides theme to all widgets
- */
-export function ThemeProvider({ theme = DefaultTheme, children }: ThemeProviderProps) {
-  return (
-    <ThemeContext.Provider value={theme}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-/**
- * Hook to access the current theme
- */
-export function useTheme(): Theme {
-  const theme = useContext(ThemeContext);
-  if (!theme) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return theme;
-}

package/src/core/theme/index.ts

@@ -1,5 +0,0 @@
-/**
- * Theme exports
- */
-export { ThemeProvider, useTheme } from './ThemeProvider';
-export { DefaultTheme, DarkTheme } from './themes';

package/src/core/theme/themes.ts

@@ -1,132 +0,0 @@
-/**
- * Default theme definitions
- */
-import { Theme } from '../types';
-
-/**
- * Default light theme
- */
-export const DefaultTheme: Theme = {
-  colors: {
-    // Primary colors
-    primary: '#3B82F6',
-    secondary: '#8B5CF6',
-    accent: '#EC4899',
-    
-    // Semantic colors
-    success: '#10B981',
-    warning: '#F59E0B',
-    error: '#EF4444',
-    info: '#3B82F6',
-    
-    // Background colors
-    background: '#FFFFFF',
-    surface: '#F9FAFB',
-    overlay: 'rgba(0, 0, 0, 0.5)',
-    
-    // Text colors
-    text: '#111827',
-    textSecondary: '#6B7280',
-    textDisabled: '#D1D5DB',
-    
-    // Border colors
-    border: '#E5E7EB',
-    borderLight: '#F3F4F6',
-    
-    // Chart colors
-    chartPrimary: '#3B82F6',
-    chartSecondary: '#8B5CF6',
-    chartTertiary: '#EC4899',
-    chartQuaternary: '#F59E0B',
-    chartPositive: '#10B981',
-    chartNegative: '#EF4444',
-    chartNeutral: '#6B7280',
-  },
-  spacing: {
-    xs: 4,
-    sm: 8,
-    md: 16,
-    lg: 24,
-    xl: 32,
-    xxl: 48,
-  },
-  radius: {
-    none: 0,
-    sm: 4,
-    md: 8,
-    lg: 12,
-    full: 9999,
-  },
-  fontScale: {
-    xs: 10,
-    sm: 12,
-    md: 14,
-    lg: 18,
-    xl: 24,
-    xxl: 32,
-  },
-};
-
-/**
- * Dark theme
- */
-export const DarkTheme: Theme = {
-  colors: {
-    // Primary colors
-    primary: '#60A5FA',
-    secondary: '#A78BFA',
-    accent: '#F472B6',
-    
-    // Semantic colors
-    success: '#34D399',
-    warning: '#FBBF24',
-    error: '#F87171',
-    info: '#60A5FA',
-    
-    // Background colors
-    background: '#111827',
-    surface: '#1F2937',
-    overlay: 'rgba(0, 0, 0, 0.7)',
-    
-    // Text colors
-    text: '#F9FAFB',
-    textSecondary: '#D1D5DB',
-    textDisabled: '#6B7280',
-    
-    // Border colors
-    border: '#374151',
-    borderLight: '#4B5563',
-    
-    // Chart colors
-    chartPrimary: '#60A5FA',
-    chartSecondary: '#A78BFA',
-    chartTertiary: '#F472B6',
-    chartQuaternary: '#FBBF24',
-    chartPositive: '#34D399',
-    chartNegative: '#F87171',
-    chartNeutral: '#9CA3AF',
-  },
-  spacing: {
-    xs: 4,
-    sm: 8,
-    md: 16,
-    lg: 24,
-    xl: 32,
-    xxl: 48,
-  },
-  radius: {
-    none: 0,
-    sm: 4,
-    md: 8,
-    lg: 12,
-    full: 9999,
-  },
-  fontScale: {
-    xs: 10,
-    sm: 12,
-    md: 14,
-    lg: 18,
-    xl: 24,
-    xxl: 32,
-  },
-};

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 }
-      );
-    },
-  };
-}