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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-metrify",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "description": "Mobile-first SVG chart library for React Native, Expo, and React Native Web",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -14,7 +14,6 @@
   },
   "files": [
     "dist",
-    "src",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"

package/src/core/animation/index.ts

@@ -1,113 +0,0 @@
-/**
- * Animation helpers - Simple version without reanimated
- * For full animation support, use react-native-reanimated separately
- */
-import { useEffect } from 'react';
-import { AnimationConfig } from '../types';
-
-// Type for shared value (compatible with reanimated)
-export type SharedValue<T = number> = { value: T };
-
-// Simple implementations (no animations, just values)
-export const useSharedValue = <T = number>(initialValue: T): SharedValue<T> => {
-  return { value: initialValue };
-};
-
-export const withTiming = (value: any, config?: any) => value;
-export const withSpring = (value: any, config?: any) => value;
-
-export const Easing = {
-  linear: (t: number) => t,
-  ease: (t: number) => t,
-  quad: (t: number) => t * t,
-  cubic: (t: number) => t * t * t,
-  bezier: (x1: number, y1: number, x2: number, y2: number) => (t: number) => t,
-  in: (easing: (t: number) => number) => easing,
-  out: (easing: (t: number) => number) => (t: number) => 1 - easing(1 - t),
-  inOut: (easing: (t: number) => number) => (t: number) =>
-    t < 0.5 ? easing(t * 2) / 2 : 1 - easing((1 - t) * 2) / 2,
-};
-
-/**
- * Default timing configuration
- */
-export const DEFAULT_TIMING_CONFIG = {
-  duration: 300,
-  easing: Easing.out(Easing.cubic),
-};
-
-/**
- * Default spring configuration
- */
-export const DEFAULT_SPRING_CONFIG = {
-  damping: 15,
-  stiffness: 150,
-  mass: 1,
-};
-
-/**
- * Hook that creates an animated value that transitions to a target
- * @param target - Target value to animate to
- * @param config - Animation configuration
- */
-export function useAnimatedValue(
-  target: number,
-  config: AnimationConfig = {}
-): SharedValue<number> {
-  const animatedValue = useSharedValue(target);
-  
-  useEffect(() => {
-    animatedValue.value = withTiming(target, {
-      duration: config.duration ?? DEFAULT_TIMING_CONFIG.duration,
-      easing: DEFAULT_TIMING_CONFIG.easing,
-    });
-  }, [target, config.duration, animatedValue]);
-  
-  return animatedValue;
-}
-
-/**
- * Hook that creates an animated progress value (0 to normalized)
- * @param value - Current value
- * @param max - Maximum value
- * @param config - Animation configuration
- */
-export function useAnimatedProgress(
-  value: number,
-  max: number,
-  config: AnimationConfig = {}
-): SharedValue<number> {
-  const normalized = max > 0 ? Math.min(value / max, 1) : 0;
-  return useAnimatedValue(normalized, config);
-}
-
-/**
- * Hook that creates a spring-animated value
- * @param target - Target value to animate to
- */
-export function useSpringValue(target: number): SharedValue<number> {
-  const animatedValue = useSharedValue(target);
-  
-  useEffect(() => {
-    animatedValue.value = withSpring(target, DEFAULT_SPRING_CONFIG);
-  }, [target, animatedValue]);
-  
-  return animatedValue;
-}
-
-/**
- * Creates timing config for manual animations
- */
-export function useTimingConfig(config: AnimationConfig = {}) {
-  return {
-    duration: config.duration ?? DEFAULT_TIMING_CONFIG.duration,
-    easing: DEFAULT_TIMING_CONFIG.easing,
-  };
-}
-
-/**
- * Creates spring config for manual animations
- */
-export function useSpringConfig() {
-  return DEFAULT_SPRING_CONFIG;
-}

package/src/core/animation/index.web.ts

@@ -1,112 +0,0 @@
-/**
- * Animation helpers for widgets (Web version - no reanimated)
- * Uses basic React state for web compatibility
- */
-import { useEffect } from 'react';
-import { AnimationConfig } from '../types';
-
-// Type for shared value (web compatible)
-export type SharedValue<T> = { value: T };
-
-// Web-compatible stubs for reanimated functions
-export const useSharedValue = <T,>(initialValue: T): SharedValue<T> => {
-  return { value: initialValue };
-};
-
-export const withTiming = (value: number, config?: any) => {
-  return value;
-};
-
-export const withSpring = (value: number, config?: any) => {
-  return value;
-};
-
-export const withDelay = (delay: number, animation: any) => {
-  return animation;
-};
-
-export const withSequence = (...animations: any[]) => {
-  return animations[animations.length - 1];
-};
-
-export const withRepeat = (animation: any, numberOfReps?: number, reverse?: boolean) => {
-  return animation;
-};
-
-export const Easing = {
-  linear: (t: number) => t,
-  ease: (t: number) => t,
-  quad: (t: number) => t * t,
-  cubic: (t: number) => t * t * t,
-  bezier: (x1: number, y1: number, x2: number, y2: number) => (t: number) => t,
-  in: (easing: (t: number) => number) => easing,
-  out: (easing: (t: number) => number) => (t: number) => 1 - easing(1 - t),
-  inOut: (easing: (t: number) => number) => (t: number) =>
-    t < 0.5 ? easing(t * 2) / 2 : 1 - easing((1 - t) * 2) / 2,
-};
-
-/**
- * Default timing configuration
- */
-export const DEFAULT_TIMING_CONFIG = {
-  duration: 300,
-  easing: Easing.linear,
-};
-
-/**
- * Default spring configuration
- */
-export const DEFAULT_SPRING_CONFIG = {
-  damping: 15,
-  stiffness: 150,
-  mass: 1,
-};
-
-/**
- * Hook to animate value changes (web version)
- */
-export function useAnimatedValue(
-  target: number,
-  config: AnimationConfig = {}
-): SharedValue<number> {
-  // On web, just return the value directly
-  // Full animation support requires additional setup
-  return useSharedValue(target);
-}
-
-/**
- * Hook that creates an animated progress value (0 to normalized)
- */
-export function useAnimatedProgress(
-  value: number,
-  max: number,
-  config: AnimationConfig = {}
-): SharedValue<number> {
-  const normalized = max > 0 ? Math.min(value / max, 1) : 0;
-  return useAnimatedValue(normalized, config);
-}
-
-/**
- * Hook that creates a spring-animated value
- */
-export function useSpringValue(target: number): SharedValue<number> {
-  return useSharedValue(target);
-}
-
-/**
- * Creates timing config for manual animations
- */
-export function useTimingConfig(config: AnimationConfig = {}) {
-  return {
-    duration: config.duration ?? DEFAULT_TIMING_CONFIG.duration,
-    easing: DEFAULT_TIMING_CONFIG.easing,
-  };
-}
-
-/**
- * Creates spring config for manual animations
- */
-export function useSpringConfig() {
-  return DEFAULT_SPRING_CONFIG;
-}
-

package/src/core/hooks/index.ts

@@ -1,66 +0,0 @@
-/**
- * Reusable hooks for widgets
- */
-import { useMemo } from 'react';
-import { Theme } from '../types';
-import { useTheme } from '../theme';
-
-/**
- * Hook to get widget dimensions with defaults
- */
-export function useWidgetDimensions(
-  width?: number,
-  height?: number,
-  defaultWidth: number = 300,
-  defaultHeight: number = 200
-) {
-  return useMemo(
-    () => ({
-      width: width ?? defaultWidth,
-      height: height ?? defaultHeight,
-    }),
-    [width, height, defaultWidth, defaultHeight]
-  );
-}
-
-/**
- * Hook to merge theme overrides
- */
-export function useWidgetTheme(themeOverride?: Theme): Theme {
-  const contextTheme = useTheme();
-  return themeOverride ?? contextTheme;
-}
-
-/**
- * Hook for widget padding calculations
- */
-export function useWidgetPadding(theme: Theme) {
-  return useMemo(
-    () => ({
-      top: theme.spacing.md,
-      right: theme.spacing.md,
-      bottom: theme.spacing.md,
-      left: theme.spacing.md,
-      horizontal: theme.spacing.md * 2,
-      vertical: theme.spacing.md * 2,
-    }),
-    [theme.spacing.md]
-  );
-}
-
-/**
- * Hook to calculate inner dimensions after padding
- */
-export function useInnerDimensions(
-  width: number,
-  height: number,
-  padding: { horizontal: number; vertical: number }
-) {
-  return useMemo(
-    () => ({
-      width: Math.max(0, width - padding.horizontal),
-      height: Math.max(0, height - padding.vertical),
-    }),
-    [width, height, padding.horizontal, padding.vertical]
-  );
-}

package/src/core/index.ts

@@ -1,26 +0,0 @@
-/**
- * Core package - Foundation for all widgets
- * NO SVG dependencies allowed here
- */
-
-// Math utilities
-export * from './math';
-
-// Layout utilities
-export * from './layout';
-
-// Theme system
-export * from './theme';
-
-// Animation helpers
-export * from './animation';
-
-// Hooks
-export * from './hooks';
-
-// Types
-export * from './types';
-
-// Utils
-export * from './utils/time';
-export * from './utils/responsive';

package/src/core/layout/index.ts

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

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