react-native-metrify 0.1.0-alpha.1

package/src/core/layout/index.ts

@@ -0,0 +1,101 @@
+/**
+ * Layout utilities for widget positioning and sizing
+ */
+
+export interface Box {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+/**
+ * Calculate center point of a box
+ */
+export function getCenter(box: Box): Point {
+  return {
+    x: box.x + box.width / 2,
+    y: box.y + box.height / 2,
+  };
+}
+
+/**
+ * Calculate bounding box for a set of points
+ */
+export function getBoundingBox(points: Point[]): Box {
+  if (points.length === 0) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+
+  const xs = points.map(p => p.x);
+  const ys = points.map(p => p.y);
+  
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY,
+  };
+}
+
+/**
+ * Apply padding to a box
+ */
+export function applyPadding(
+  box: Box,
+  padding: { top: number; right: number; bottom: number; left: number }
+): Box {
+  return {
+    x: box.x + padding.left,
+    y: box.y + padding.top,
+    width: Math.max(0, box.width - padding.left - padding.right),
+    height: Math.max(0, box.height - padding.top - padding.bottom),
+  };
+}
+
+/**
+ * Calculate aspect ratio
+ */
+export function getAspectRatio(width: number, height: number): number {
+  return height > 0 ? width / height : 1;
+}
+
+/**
+ * Scale box to fit within constraints while maintaining aspect ratio
+ */
+export function fitBox(
+  box: Box,
+  maxWidth: number,
+  maxHeight: number
+): Box {
+  const aspectRatio = getAspectRatio(box.width, box.height);
+  const maxAspectRatio = getAspectRatio(maxWidth, maxHeight);
+
+  let width = maxWidth;
+  let height = maxHeight;
+
+  if (aspectRatio > maxAspectRatio) {
+    // Box is wider than container
+    height = width / aspectRatio;
+  } else {
+    // Box is taller than container
+    width = height * aspectRatio;
+  }
+
+  return {
+    x: box.x,
+    y: box.y,
+    width,
+    height,
+  };
+}

package/src/core/math/index.ts

@@ -0,0 +1,72 @@
+/**
+ * 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

@@ -0,0 +1,13 @@
+{
+  "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

@@ -0,0 +1,36 @@
+/**
+ * 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

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

package/src/core/theme/themes.ts

@@ -0,0 +1,132 @@
+/**
+ * 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

@@ -0,0 +1,164 @@
+/**
+ * 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';