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

package/src/widgets/HorizontalBarChart/HorizontalBarChart.tsx

@@ -1,125 +0,0 @@
-/**
- * HorizontalBarChart Widget - Bars go left to right
- */
-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, normalize } from '../../core';
-import { HorizontalBarChartWidgetProps } from './types';
-
-export const HorizontalBarChart = memo<HorizontalBarChartWidgetProps>(({
-  data: widgetData,
-  width,
-  height,
-  loading = false,
-  theme: themeOverride,
-  barHeight = 24,
-  barSpacing = 12,
-  showValues = true,
-  showLabels = true,
-  maxBars = 15,
-  testID,
-}) => {
-  const theme = useWidgetTheme(themeOverride);
-  const dimensions = useWidgetDimensions(width, height, 350, 300);
-
-  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.data || widgetData.data.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 { data, title } = widgetData;
-  const displayData = data.slice(0, maxBars);
-  const padding = theme.spacing.md;
-  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
-  const labelWidth = showLabels ? 80 : 0;
-  const valueWidth = showValues ? 50 : 0;
-  
-  const chartWidth = dimensions.width - padding * 2 - labelWidth - valueWidth;
-  const maxValue = useMemo(() => Math.max(...displayData.map(d => d.value)), [displayData]);
-
-  const bars = useMemo(() => {
-    return displayData.map((item, index) => {
-      const normalizedValue = normalize(item.value, 0, maxValue);
-      const barWidth = normalizedValue * chartWidth;
-      const barY = index * (barHeight + barSpacing);
-      
-      return {
-        x: 0,
-        y: barY,
-        width: barWidth,
-        height: barHeight,
-        color: item.color || theme.colors.chartPrimary,
-        value: item.value,
-        label: item.label,
-      };
-    });
-  }, [displayData, maxValue, chartWidth, barHeight, barSpacing, theme.colors.chartPrimary]);
-
-  const totalHeight = bars.length * (barHeight + barSpacing);
-
-  return (
-    <View style={[styles.wrapper, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md, padding }]} testID={testID}>
-      {title && (
-        <RNText style={[styles.title, { color: theme.colors.text, fontSize: theme.fontScale.md, fontWeight: 'bold', marginBottom: theme.spacing.sm }]}>
-          {title}
-        </RNText>
-      )}
-
-      <View style={styles.chartContainer}>
-        {bars.map((bar, index) => (
-          <View key={`row-${index}`} style={styles.barRow}>
-            {showLabels && (
-              <View style={[styles.labelContainer, { width: labelWidth }]}>
-                <RNText style={[styles.label, { color: theme.colors.text, fontSize: theme.fontScale.sm }]} numberOfLines={1}>
-                  {bar.label}
-                </RNText>
-              </View>
-            )}
-            
-            <View style={{ width: chartWidth, height: barHeight }}>
-              <Svg width={chartWidth} height={barHeight}>
-                <Rect x={bar.x} y={0} width={bar.width} height={bar.height} fill={bar.color} rx={theme.radius.sm} ry={theme.radius.sm} />
-              </Svg>
-            </View>
-
-            {showValues && (
-              <View style={[styles.valueContainer, { width: valueWidth }]}>
-                <RNText style={[styles.value, { color: theme.colors.textSecondary, fontSize: theme.fontScale.sm }]}>
-                  {bar.value}
-                </RNText>
-              </View>
-            )}
-          </View>
-        ))}
-      </View>
-    </View>
-  );
-});
-
-HorizontalBarChart.displayName = 'HorizontalBarChart';
-
-const styles = StyleSheet.create({
-  wrapper: { justifyContent: 'flex-start', alignItems: 'flex-start' },
-  container: { justifyContent: 'center', alignItems: 'center' },
-  loadingText: { fontSize: 16 },
-  emptyText: { fontSize: 16 },
-  title: { textAlign: 'center', width: '100%' },
-  chartContainer: { flex: 1, width: '100%' },
-  barRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
-  labelContainer: { justifyContent: 'center', paddingRight: 8 },
-  label: { textAlign: 'right' },
-  valueContainer: { justifyContent: 'center', paddingLeft: 8 },
-  value: { textAlign: 'left', fontWeight: '600' },
-});

package/src/widgets/HorizontalBarChart/index.ts

@@ -1,2 +0,0 @@
-export { HorizontalBarChart } from './HorizontalBarChart';
-export type { HorizontalBarChartWidgetProps, HorizontalBarChartData, HorizontalBarDataPoint } from './types';

package/src/widgets/HorizontalBarChart/types.ts

@@ -1,23 +0,0 @@
-/**
- * HorizontalBarChart Widget types
- */
-import { BaseWidgetProps } from '../../core';
-
-export interface HorizontalBarDataPoint {
-  value: number;
-  label: string;
-  color?: string;
-}
-
-export interface HorizontalBarChartData {
-  data: HorizontalBarDataPoint[];
-  title?: string;
-}
-
-export interface HorizontalBarChartWidgetProps extends BaseWidgetProps<HorizontalBarChartData> {
-  barHeight?: number;
-  barSpacing?: number;
-  showValues?: boolean;
-  showLabels?: boolean;
-  maxBars?: number;
-}

package/src/widgets/KPI/KPI.tsx

@@ -1,222 +0,0 @@
-/**
- * KPI Widget - Show one metric + trend
- * First widget implementation following the widget contract
- */
-import React, { memo, useMemo } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import {
-  useWidgetDimensions,
-  useWidgetTheme,
-  createFontSizeCalculator,
-} from '../../core';
-import { formatNumber, getTrendColor } from '../../renderer-svg/adapters';
-import { KPIWidgetProps } from './types';
-
-/**
- * KPI Widget Component
- */
-export const KPI = memo<KPIWidgetProps>(({
-  data,
-  width,
-  height,
-  loading = false,
-  theme: themeOverride,
-  animated = true,
-  showTrend = true,
-  showDelta = true,
-  fontSize: fontConfig,
-  testID,
-}) => {
-  const theme = useWidgetTheme(themeOverride);
-  const dimensions = useWidgetDimensions(width, height, 300, 120);
-  
-  // Create responsive font size calculator
-  const fontSizes = useMemo(
-    () => createFontSizeCalculator(dimensions.width, dimensions.height, fontConfig),
-    [dimensions.width, dimensions.height, fontConfig]
-  );
-  
-  // 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`}
-      >
-        <Text style={[styles.loadingText, { color: theme.colors.textSecondary }]}>
-          Loading...
-        </Text>
-      </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`}
-      >
-        <Text style={[styles.emptyText, { color: theme.colors.textSecondary }]}>
-          No data
-        </Text>
-      </View>
-    );
-  }
-
-  const { value, label, delta, trend = 'neutral', format = 'number' } = data;
-
-  // Format the value (no animation for now - Expo Go limitation)
-  const displayValue = useMemo(
-    () => formatNumber(value, format),
-    [value, format]
-  );
-
-  // Get trend color
-  const trendColor = useMemo(
-    () =>
-      getTrendColor(trend, {
-        positive: theme.colors.chartPositive,
-        negative: theme.colors.chartNegative,
-        neutral: theme.colors.chartNeutral,
-      }),
-    [trend, theme.colors]
-  );
-
-  // Format delta
-  const formattedDelta = useMemo(() => {
-    if (delta === undefined) return null;
-    const sign = delta >= 0 ? '+' : '';
-    return `${sign}${delta.toFixed(1)}%`;
-  }, [delta]);
-
-  // Trend icon
-  const trendIcon = useMemo(() => {
-    if (trend === 'up') return '↑';
-    if (trend === 'down') return '↓';
-    return '→';
-  }, [trend]);
-
-  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 */}
-      <Text
-        style={[
-          styles.label,
-          {
-            color: theme.colors.textSecondary,
-            fontSize: fontSizes.label(theme.fontScale.sm),
-            marginBottom: theme.spacing.xs,
-          },
-        ]}
-      >
-        {label}
-      </Text>
-
-      {/* Value */}
-      <Text
-        style={[
-          styles.value,
-          {
-            color: theme.colors.text,
-            fontSize: fontSizes.value(theme.fontScale.xxl),
-            fontWeight: 'bold',
-          },
-        ]}
-      >
-        {displayValue}
-      </Text>
-
-      {/* Trend and Delta */}
-      {(showTrend || showDelta) && (delta !== undefined || trend !== 'neutral') && (
-        <View style={styles.trendContainer}>
-          {showTrend && (
-            <Text
-              style={[
-                styles.trendIcon,
-                {
-                  color: trendColor,
-                  fontSize: fontSizes.secondary(theme.fontScale.md),
-                  marginRight: theme.spacing.xs,
-                },
-              ]}
-            >
-              {trendIcon}
-            </Text>
-          )}
-          {showDelta && formattedDelta && (
-            <Text
-              style={[
-                styles.delta,
-                {
-                  color: trendColor,
-                  fontSize: fontSizes.secondary(theme.fontScale.md),
-                  fontWeight: '600',
-                },
-              ]}
-            >
-              {formattedDelta}
-            </Text>
-          )}
-        </View>
-      )}
-    </View>
-  );
-});
-
-KPI.displayName = 'KPI';
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-  },
-  loadingText: {
-    fontSize: 16,
-  },
-  emptyText: {
-    fontSize: 16,
-  },
-  label: {
-    textTransform: 'uppercase',
-    letterSpacing: 0.5,
-  },
-  value: {
-    marginBottom: 4,
-  },
-  trendContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  trendIcon: {
-    fontWeight: 'bold',
-  },
-  delta: {},
-});

package/src/widgets/KPI/index.ts

@@ -1,5 +0,0 @@
-/**
- * KPI Widget exports
- */
-export { KPI } from './KPI';
-export type { KPIWidgetProps, KPIData, KPIFormat } from './types';

package/src/widgets/KPI/types.ts

@@ -1,19 +0,0 @@
-/**
- * KPI Widget types
- */
-import { BaseWidgetProps, TrendDirection } from '../../core/types';
-
-export type KPIFormat = 'number' | 'currency' | 'percent' | 'compact';
-
-export interface KPIData {
-  value: number;
-  label: string;
-  delta?: number;
-  trend?: TrendDirection;
-  format?: KPIFormat;
-}
-
-export interface KPIWidgetProps extends BaseWidgetProps<KPIData> {
-  showTrend?: boolean;
-  showDelta?: boolean;
-}