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

package/src/widgets/PieChart/PieChart.tsx

@@ -1,275 +0,0 @@
-/**
- * PieChart Widget - Pie and Donut charts for proportions
- */
-import React, { memo, useMemo } from 'react';
-import { View, Text as RNText, StyleSheet } from 'react-native';
-import Svg, { Path } from 'react-native-svg';
-import {
-  useWidgetDimensions,
-  useWidgetTheme,
-} from '../../core';
-import { createDonutArcPath, createFilledArcPath } from '../../renderer-svg';
-import { PieChartWidgetProps } from './types';
-
-/**
- * PieChart Widget Component
- */
-export const PieChart = memo<PieChartWidgetProps>(({
-  data: widgetData,
-  width,
-  height,
-  loading = false,
-  theme: themeOverride,
-  variant = 'pie',
-  innerRadius = 0.5,
-  showLabels = true,
-  showValues = false,
-  showPercentages = true,
-  size: customSize,
-  testID,
-}) => {
-  const theme = useWidgetTheme(themeOverride);
-  const dimensions = useWidgetDimensions(width, height, 300, 300);
-
-  // Handle states
-  if (loading) {
-    return (
-      <View
-        style={[
-          styles.container,
-          {
-            width: dimensions.width,
-            height: dimensions.height,
-            backgroundColor: theme.colors.surface,
-            borderRadius: theme.radius.md,
-          },
-        ]}
-        testID={`${testID}-loading`}
-      >
-        <RNText style={[styles.loadingText, { color: theme.colors.textSecondary }]}>
-          Loading...
-        </RNText>
-      </View>
-    );
-  }
-
-  if (!widgetData || !widgetData.segments || widgetData.segments.length === 0) {
-    return (
-      <View
-        style={[
-          styles.container,
-          {
-            width: dimensions.width,
-            height: dimensions.height,
-            backgroundColor: theme.colors.surface,
-            borderRadius: theme.radius.md,
-          },
-        ]}
-        testID={`${testID}-empty`}
-      >
-        <RNText style={[styles.emptyText, { color: theme.colors.textSecondary }]}>
-          No data
-        </RNText>
-      </View>
-    );
-  }
-
-  const { segments, title } = widgetData;
-
-  // Calculate total
-  const total = useMemo(
-    () => segments.reduce((sum, seg) => sum + seg.value, 0),
-    [segments]
-  );
-
-  // Calculate chart size
-  const padding = theme.spacing.md;
-  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
-  const legendHeight = showLabels ? segments.length * 24 + theme.spacing.md : 0;
-  
-  const availableHeight = dimensions.height - padding * 2 - titleHeight - legendHeight;
-  const availableWidth = dimensions.width - padding * 2;
-  
-  const chartSize = customSize || Math.min(availableHeight, availableWidth);
-  const center = chartSize / 2;
-  const radius = (chartSize - padding) / 2;
-  const innerR = variant === 'donut' ? radius * innerRadius : 0;
-
-  // Generate segments
-  const pieSegments = useMemo(() => {
-    let currentAngle = 0;
-    
-    return segments.map(segment => {
-      const percentage = (segment.value / total) * 100;
-      const angle = (segment.value / total) * 360;
-      const startAngle = currentAngle;
-      const endAngle = currentAngle + angle;
-      
-      currentAngle = endAngle;
-      
-      const path = variant === 'donut'
-        ? createDonutArcPath({
-            cx: center,
-            cy: center,
-            radius,
-            innerRadius: innerR,
-            startAngle,
-            endAngle,
-          })
-        : createFilledArcPath({
-            cx: center,
-            cy: center,
-            radius,
-            startAngle,
-            endAngle,
-          });
-      
-      return {
-        path,
-        color: segment.color,
-        label: segment.label,
-        value: segment.value,
-        percentage,
-      };
-    });
-  }, [segments, total, center, radius, innerR, variant]);
-
-  return (
-    <View
-      style={[
-        styles.wrapper,
-        {
-          width: dimensions.width,
-          height: dimensions.height,
-          backgroundColor: theme.colors.surface,
-          borderRadius: theme.radius.md,
-          padding,
-        },
-      ]}
-      testID={testID}
-    >
-      {/* Title */}
-      {title && (
-        <RNText
-          style={[
-            styles.title,
-            {
-              color: theme.colors.text,
-              fontSize: theme.fontScale.md,
-              fontWeight: 'bold',
-              marginBottom: theme.spacing.sm,
-            },
-          ]}
-        >
-          {title}
-        </RNText>
-      )}
-
-      {/* Chart */}
-      <View style={styles.chartContainer}>
-        <Svg width={chartSize} height={chartSize}>
-          {pieSegments.map((segment, index) => (
-            <Path
-              key={`segment-${index}`}
-              d={segment.path}
-              fill={segment.color}
-            />
-          ))}
-        </Svg>
-      </View>
-
-      {/* Legend */}
-      {showLabels && (
-        <View style={styles.legend}>
-          {pieSegments.map((segment, index) => (
-            <View key={`legend-${index}`} style={styles.legendItem}>
-              <View
-                style={[
-                  styles.legendColor,
-                  { backgroundColor: segment.color },
-                ]}
-              />
-              <View style={styles.legendTextContainer}>
-                <RNText
-                  style={[
-                    styles.legendLabel,
-                    {
-                      color: theme.colors.text,
-                      fontSize: theme.fontScale.sm,
-                    },
-                  ]}
-                >
-                  {segment.label}
-                </RNText>
-                <RNText
-                  style={[
-                    styles.legendValue,
-                    {
-                      color: theme.colors.textSecondary,
-                      fontSize: theme.fontScale.xs,
-                    },
-                  ]}
-                >
-                  {showValues && `${segment.value} `}
-                  {showPercentages && `(${segment.percentage.toFixed(1)}%)`}
-                </RNText>
-              </View>
-            </View>
-          ))}
-        </View>
-      )}
-    </View>
-  );
-});
-
-PieChart.displayName = 'PieChart';
-
-const styles = StyleSheet.create({
-  wrapper: {
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  },
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  loadingText: {
-    fontSize: 16,
-  },
-  emptyText: {
-    fontSize: 16,
-  },
-  title: {
-    textAlign: 'center',
-    width: '100%',
-  },
-  chartContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  legend: {
-    width: '100%',
-    marginTop: 16,
-  },
-  legendItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  legendColor: {
-    width: 16,
-    height: 16,
-    borderRadius: 4,
-    marginRight: 8,
-  },
-  legendTextContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  legendLabel: {
-    fontWeight: '600',
-  },
-  legendValue: {},
-});

package/src/widgets/PieChart/index.ts

@@ -1,10 +0,0 @@
-/**
- * PieChart Widget exports
- */
-export { PieChart } from './PieChart';
-export type { 
-  PieChartWidgetProps, 
-  PieChartData,
-  PieSegment,
-  PieChartVariant
-} from './types';

package/src/widgets/PieChart/types.ts

@@ -1,26 +0,0 @@
-/**
- * PieChart Widget types
- */
-import { BaseWidgetProps } from '../../core/types';
-
-export interface PieSegment {
-  value: number;
-  label: string;
-  color: string;
-}
-
-export interface PieChartData {
-  segments: PieSegment[];
-  title?: string;
-}
-
-export type PieChartVariant = 'pie' | 'donut';
-
-export interface PieChartWidgetProps extends BaseWidgetProps<PieChartData> {
-  variant?: PieChartVariant;
-  innerRadius?: number; // For donut chart (0-1, percentage of outer radius)
-  showLabels?: boolean;
-  showValues?: boolean;
-  showPercentages?: boolean;
-  size?: number;
-}

package/src/widgets/Progress/Progress.tsx

@@ -1,201 +0,0 @@
-/**
- * Progress Widget - Simple linear progress with meaning
- * SVG rects + animation
- */
-import React, { memo, useMemo } from 'react';
-import { View, Text as RNText, StyleSheet } from 'react-native';
-import Svg, { Rect } from 'react-native-svg';
-import {
-  useWidgetDimensions,
-  useWidgetTheme,
-  clamp,
-  normalize,
-} from '../../core';
-import { createRoundedRectPath, AnimatedPath } from '../../renderer-svg';
-import { ProgressWidgetProps } from './types';
-
-// AnimatedRect removed for Expo Go compatibility
-
-/**
- * Progress Widget Component
- */
-export const Progress = memo<ProgressWidgetProps>(({
-  data,
-  width,
-  height,
-  loading = false,
-  theme: themeOverride,
-  animated = true,
-  variant = 'bar',
-  barHeight = 12,
-  showValue = true,
-  testID,
-}) => {
-  const theme = useWidgetTheme(themeOverride);
-  const dimensions = useWidgetDimensions(
-    width,
-    height,
-    300,
-    variant === 'bar' ? 80 : 200
-  );
-
-  // Handle states
-  if (loading) {
-    return (
-      <View
-        style={[
-          styles.container,
-          {
-            width: dimensions.width,
-            height: dimensions.height,
-            backgroundColor: theme.colors.surface,
-            borderRadius: theme.radius.md,
-          },
-        ]}
-        testID={`${testID}-loading`}
-      >
-        <RNText style={[styles.loadingText, { color: theme.colors.textSecondary }]}>
-          Loading...
-        </RNText>
-      </View>
-    );
-  }
-
-  if (!data) {
-    return (
-      <View
-        style={[
-          styles.container,
-          {
-            width: dimensions.width,
-            height: dimensions.height,
-            backgroundColor: theme.colors.surface,
-            borderRadius: theme.radius.md,
-          },
-        ]}
-        testID={`${testID}-empty`}
-      >
-        <RNText style={[styles.emptyText, { color: theme.colors.textSecondary }]}>
-          No data
-        </RNText>
-      </View>
-    );
-  }
-
-  const { value, max, label, showPercentage = true } = data;
-  const normalizedValue = clamp(value, 0, max);
-  const percentage = max > 0 ? (normalizedValue / max) * 100 : 0;
-
-  // Calculate progress (no animation for Expo Go)
-  const progressValue = normalize(normalizedValue, 0, max);
-
-  // Calculate bar dimensions
-  const barWidth = dimensions.width - theme.spacing.md * 2;
-  const barY = label
-    ? theme.spacing.md + theme.fontScale.sm + theme.spacing.xs
-    : theme.spacing.md;
-
-  // Calculate bar width
-  const currentBarWidth = progressValue * barWidth;
-
-  // Display text
-  const displayValue = useMemo(() => {
-    if (!showValue) return null;
-    if (showPercentage) return `${percentage.toFixed(0)}%`;
-    return `${normalizedValue} / ${max}`;
-  }, [showValue, showPercentage, percentage, normalizedValue, max]);
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          width: dimensions.width,
-          height: dimensions.height,
-          backgroundColor: theme.colors.surface,
-          borderRadius: theme.radius.md,
-          padding: theme.spacing.md,
-        },
-      ]}
-      testID={testID}
-    >
-      {/* Label */}
-      {label && (
-        <RNText
-          style={[
-            styles.label,
-            {
-              color: theme.colors.textSecondary,
-              fontSize: theme.fontScale.sm,
-              marginBottom: theme.spacing.xs,
-            },
-          ]}
-        >
-          {label}
-        </RNText>
-      )}
-
-      {/* Progress Bar */}
-      <Svg width={barWidth} height={barHeight}>
-        {/* Background */}
-        <Rect
-          x={0}
-          y={0}
-          width={barWidth}
-          height={barHeight}
-          fill={theme.colors.borderLight}
-          rx={theme.radius.sm}
-          ry={theme.radius.sm}
-        />
-
-        {/* Foreground */}
-        <Rect
-          x={0}
-          y={0}
-          width={currentBarWidth}
-          height={barHeight}
-          fill={theme.colors.chartPrimary}
-          rx={theme.radius.sm}
-          ry={theme.radius.sm}
-        />
-      </Svg>
-
-      {/* Value Display */}
-      {displayValue && (
-        <RNText
-          style={[
-            styles.value,
-            {
-              color: theme.colors.text,
-              fontSize: theme.fontScale.md,
-              fontWeight: '600',
-              marginTop: theme.spacing.xs,
-            },
-          ]}
-        >
-          {displayValue}
-        </RNText>
-      )}
-    </View>
-  );
-});
-
-Progress.displayName = 'Progress';
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-  },
-  loadingText: {
-    fontSize: 16,
-  },
-  emptyText: {
-    fontSize: 16,
-  },
-  label: {
-    textTransform: 'uppercase',
-    letterSpacing: 0.5,
-  },
-  value: {},
-});

package/src/widgets/Progress/index.ts

@@ -1,5 +0,0 @@
-/**
- * Progress Widget exports
- */
-export { Progress } from './Progress';
-export type { ProgressWidgetProps, ProgressData, ProgressVariant } from './types';

package/src/widgets/Progress/types.ts

@@ -1,19 +0,0 @@
-/**
- * Progress Widget types
- */
-import { BaseWidgetProps } from '../../core/types';
-
-export interface ProgressData {
-  value: number;
-  max: number;
-  label?: string;
-  showPercentage?: boolean;
-}
-
-export type ProgressVariant = 'bar' | 'circle';
-
-export interface ProgressWidgetProps extends BaseWidgetProps<ProgressData> {
-  variant?: ProgressVariant;
-  barHeight?: number;
-  showValue?: boolean;
-}