@sudobility/devops-components-rn 1.0.0 → 1.0.2

package/src/BuildLog.tsx

@@ -1,32 +1,138 @@
 import React from 'react';
-import { Text, Pressable, type ViewProps } from 'react-native';
-import { cn } from '@sudobility/components-rn';
+import { View, Text, ScrollView } from 'react-native';
+import { cn, Card } from '@sudobility/components-rn';
 
-export interface BuildLogProps extends ViewProps {
-  disabled?: boolean;
-  onPress?: () => void;
-  children?: React.ReactNode;
+export type LogLevel = 'info' | 'warn' | 'error' | 'debug' | 'success';
+
+export interface LogEntry {
+  id: string;
+  level: LogLevel;
+  message: string;
+  timestamp: Date;
+  source?: string;
+}
+
+export interface BuildLogProps {
+  entries: LogEntry[];
+  title?: string;
+  maxHeight?: number;
+  showTimestamp?: boolean;
+  showSource?: boolean;
+  className?: string;
 }
 
+const levelConfig: Record<
+  LogLevel,
+  { color: string; bgColor: string; darkBgColor: string; prefix: string }
+> = {
+  info: {
+    color: 'text-blue-600 dark:text-blue-400',
+    bgColor: 'bg-blue-50',
+    darkBgColor: 'dark:bg-blue-950',
+    prefix: 'INFO',
+  },
+  warn: {
+    color: 'text-yellow-600 dark:text-yellow-400',
+    bgColor: 'bg-yellow-50',
+    darkBgColor: 'dark:bg-yellow-950',
+    prefix: 'WARN',
+  },
+  error: {
+    color: 'text-red-600 dark:text-red-400',
+    bgColor: 'bg-red-50',
+    darkBgColor: 'dark:bg-red-950',
+    prefix: 'ERROR',
+  },
+  debug: {
+    color: 'text-gray-600 dark:text-gray-400',
+    bgColor: 'bg-gray-50',
+    darkBgColor: 'dark:bg-gray-900',
+    prefix: 'DEBUG',
+  },
+  success: {
+    color: 'text-green-600 dark:text-green-400',
+    bgColor: 'bg-green-50',
+    darkBgColor: 'dark:bg-green-950',
+    prefix: 'SUCCESS',
+  },
+};
+
+const formatTime = (date: Date): string => {
+  return date.toLocaleTimeString('en-US', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+};
+
 export const BuildLog: React.FC<BuildLogProps> = ({
+  entries,
+  title,
+  maxHeight = 400,
+  showTimestamp = true,
+  showSource = false,
   className,
-  children,
-  disabled = false,
-  onPress,
-  ...props
-}) => (
-  <Pressable
-    onPress={disabled ? undefined : onPress}
-    disabled={disabled}
-    accessibilityRole="button"
-    accessibilityLabel="Build Log"
-    className={cn(
-      'p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700',
-      disabled && 'opacity-50',
-      className
-    )}
-    {...props}
-  >
-    {children || <Text className="text-gray-900 dark:text-white">BuildLog Component</Text>}
-  </Pressable>
-);
+}) => {
+  return (
+    <Card className={cn('overflow-hidden', className)}>
+      {title && (
+        <View className='px-4 py-3 border-b border-gray-200 dark:border-gray-700'>
+          <Text className='text-base font-semibold text-gray-900 dark:text-gray-100'>
+            {title}
+          </Text>
+        </View>
+      )}
+      <ScrollView
+        style={{ maxHeight }}
+        className='bg-gray-900 dark:bg-black'
+        showsVerticalScrollIndicator={true}
+      >
+        <View className='p-3'>
+          {entries.map(entry => {
+            const config = levelConfig[entry.level];
+            return (
+              <View
+                key={entry.id}
+                className={cn(
+                  'flex-row flex-wrap py-1 px-2 mb-1 rounded',
+                  config.bgColor,
+                  config.darkBgColor
+                )}
+              >
+                {showTimestamp && (
+                  <Text className='font-mono text-xs text-gray-500 dark:text-gray-500 mr-2'>
+                    [{formatTime(entry.timestamp)}]
+                  </Text>
+                )}
+                <Text
+                  className={cn(
+                    'font-mono text-xs font-bold mr-2',
+                    config.color
+                  )}
+                >
+                  [{config.prefix}]
+                </Text>
+                {showSource && entry.source && (
+                  <Text className='font-mono text-xs text-gray-400 dark:text-gray-600 mr-2'>
+                    [{entry.source}]
+                  </Text>
+                )}
+                <Text className='font-mono text-xs text-gray-200 dark:text-gray-300 flex-1'>
+                  {entry.message}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+      </ScrollView>
+      <View className='px-4 py-2 bg-gray-800 dark:bg-gray-950 border-t border-gray-700'>
+        <Text className='text-xs text-gray-400 dark:text-gray-500'>
+          {entries.length} log entries
+        </Text>
+      </View>
+    </Card>
+  );
+};
+
+export default BuildLog;

package/src/ChangelogDisplay.tsx

@@ -19,9 +19,13 @@ export const ChangelogDisplay: React.FC<ChangelogDisplayProps> = ({
       disabled && 'opacity-50',
       className
     )}
-    accessibilityLabel="Changelog Display"
+    accessibilityLabel='Changelog Display'
     {...props}
   >
-    {children || <Text className="text-gray-900 dark:text-white">ChangelogDisplay Component</Text>}
+    {children || (
+      <Text className='text-gray-900 dark:text-white'>
+        ChangelogDisplay Component
+      </Text>
+    )}
   </View>
 );

package/src/CodePlayground.tsx

@@ -18,8 +18,8 @@ export const CodePlayground: React.FC<CodePlaygroundProps> = ({
   <Pressable
     onPress={disabled ? undefined : onPress}
     disabled={disabled}
-    accessibilityRole="button"
-    accessibilityLabel="Code Playground"
+    accessibilityRole='button'
+    accessibilityLabel='Code Playground'
     className={cn(
       'p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700',
       disabled && 'opacity-50',
@@ -27,6 +27,10 @@ export const CodePlayground: React.FC<CodePlaygroundProps> = ({
     )}
     {...props}
   >
-    {children || <Text className="text-gray-900 dark:text-white">CodePlayground Component</Text>}
+    {children || (
+      <Text className='text-gray-900 dark:text-white'>
+        CodePlayground Component
+      </Text>
+    )}
   </Pressable>
 );

package/src/ConflictResolver.tsx

@@ -18,8 +18,8 @@ export const ConflictResolver: React.FC<ConflictResolverProps> = ({
   <Pressable
     onPress={disabled ? undefined : onPress}
     disabled={disabled}
-    accessibilityRole="button"
-    accessibilityLabel="Conflict Resolver"
+    accessibilityRole='button'
+    accessibilityLabel='Conflict Resolver'
     className={cn(
       'p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700',
       disabled && 'opacity-50',
@@ -27,6 +27,10 @@ export const ConflictResolver: React.FC<ConflictResolverProps> = ({
     )}
     {...props}
   >
-    {children || <Text className="text-gray-900 dark:text-white">ConflictResolver Component</Text>}
+    {children || (
+      <Text className='text-gray-900 dark:text-white'>
+        ConflictResolver Component
+      </Text>
+    )}
   </Pressable>
 );

package/src/DealPipeline.tsx

@@ -19,9 +19,13 @@ export const DealPipeline: React.FC<DealPipelineProps> = ({
       disabled && 'opacity-50',
       className
     )}
-    accessibilityLabel="Deal Pipeline"
+    accessibilityLabel='Deal Pipeline'
     {...props}
   >
-    {children || <Text className="text-gray-900 dark:text-white">DealPipeline Component</Text>}
+    {children || (
+      <Text className='text-gray-900 dark:text-white'>
+        DealPipeline Component
+      </Text>
+    )}
   </View>
 );

package/src/DeploymentStatus.tsx

@@ -1,32 +1,166 @@
 import React from 'react';
-import { Text, Pressable, type ViewProps } from 'react-native';
-import { cn } from '@sudobility/components-rn';
+import { View, Text, Pressable } from 'react-native';
+import { cn, Card } from '@sudobility/components-rn';
 
-export interface DeploymentStatusProps extends ViewProps {
-  disabled?: boolean;
+export type DeploymentState =
+  | 'pending'
+  | 'building'
+  | 'deploying'
+  | 'success'
+  | 'failed'
+  | 'cancelled';
+
+export interface DeploymentStatusProps {
+  state: DeploymentState;
+  environment: string;
+  version: string;
+  timestamp: Date;
+  commitHash?: string;
+  commitMessage?: string;
+  duration?: number;
   onPress?: () => void;
-  children?: React.ReactNode;
+  className?: string;
 }
 
+const stateConfig: Record<
+  DeploymentState,
+  {
+    color: string;
+    bgColor: string;
+    darkBgColor: string;
+    label: string;
+    icon: string;
+  }
+> = {
+  pending: {
+    color: 'text-gray-600 dark:text-gray-400',
+    bgColor: 'bg-gray-100',
+    darkBgColor: 'dark:bg-gray-800',
+    label: 'Pending',
+    icon: '⏳',
+  },
+  building: {
+    color: 'text-blue-600 dark:text-blue-400',
+    bgColor: 'bg-blue-100',
+    darkBgColor: 'dark:bg-blue-900',
+    label: 'Building',
+    icon: '🔨',
+  },
+  deploying: {
+    color: 'text-purple-600 dark:text-purple-400',
+    bgColor: 'bg-purple-100',
+    darkBgColor: 'dark:bg-purple-900',
+    label: 'Deploying',
+    icon: '🚀',
+  },
+  success: {
+    color: 'text-green-600 dark:text-green-400',
+    bgColor: 'bg-green-100',
+    darkBgColor: 'dark:bg-green-900',
+    label: 'Success',
+    icon: '✓',
+  },
+  failed: {
+    color: 'text-red-600 dark:text-red-400',
+    bgColor: 'bg-red-100',
+    darkBgColor: 'dark:bg-red-900',
+    label: 'Failed',
+    icon: '✗',
+  },
+  cancelled: {
+    color: 'text-orange-600 dark:text-orange-400',
+    bgColor: 'bg-orange-100',
+    darkBgColor: 'dark:bg-orange-900',
+    label: 'Cancelled',
+    icon: '⊘',
+  },
+};
+
+const formatDuration = (seconds: number): string => {
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  if (minutes < 60) return `${minutes}m ${remainingSeconds}s`;
+  const hours = Math.floor(minutes / 60);
+  const remainingMinutes = minutes % 60;
+  return `${hours}h ${remainingMinutes}m`;
+};
+
 export const DeploymentStatus: React.FC<DeploymentStatusProps> = ({
-  className,
-  children,
-  disabled = false,
+  state,
+  environment,
+  version,
+  timestamp,
+  commitHash,
+  commitMessage,
+  duration,
   onPress,
-  ...props
-}) => (
-  <Pressable
-    onPress={disabled ? undefined : onPress}
-    disabled={disabled}
-    accessibilityRole="button"
-    accessibilityLabel="Deployment Status"
-    className={cn(
-      'p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700',
-      disabled && 'opacity-50',
-      className
-    )}
-    {...props}
-  >
-    {children || <Text className="text-gray-900 dark:text-white">DeploymentStatus Component</Text>}
-  </Pressable>
-);
+  className,
+}) => {
+  const config = stateConfig[state];
+
+  const content = (
+    <Card className={cn('p-4', className)}>
+      <View className='flex-row items-start justify-between'>
+        <View className='flex-1'>
+          <View className='flex-row items-center'>
+            <View
+              className={cn(
+                'px-2 py-1 rounded-md mr-2',
+                config.bgColor,
+                config.darkBgColor
+              )}
+            >
+              <Text className={cn('text-xs font-medium', config.color)}>
+                {config.icon} {config.label}
+              </Text>
+            </View>
+            <View className='bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-md'>
+              <Text className='text-xs font-medium text-gray-700 dark:text-gray-300'>
+                {environment}
+              </Text>
+            </View>
+          </View>
+          <Text className='mt-2 text-base font-semibold text-gray-900 dark:text-gray-100'>
+            {version}
+          </Text>
+          {commitHash && (
+            <Text className='mt-1 text-sm font-mono text-gray-600 dark:text-gray-400'>
+              {commitHash.substring(0, 7)}
+            </Text>
+          )}
+          {commitMessage && (
+            <Text
+              className='mt-1 text-sm text-gray-600 dark:text-gray-400'
+              numberOfLines={2}
+            >
+              {commitMessage}
+            </Text>
+          )}
+        </View>
+      </View>
+      <View className='flex-row items-center justify-between mt-3 pt-3 border-t border-gray-200 dark:border-gray-700'>
+        <Text className='text-xs text-gray-500 dark:text-gray-500'>
+          {timestamp.toLocaleString()}
+        </Text>
+        {duration !== undefined && (
+          <Text className='text-xs text-gray-500 dark:text-gray-500'>
+            Duration: {formatDuration(duration)}
+          </Text>
+        )}
+      </View>
+    </Card>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable onPress={onPress} accessibilityRole='button'>
+        {content}
+      </Pressable>
+    );
+  }
+
+  return content;
+};
+
+export default DeploymentStatus;

package/src/DriverLog.tsx

@@ -19,9 +19,11 @@ export const DriverLog: React.FC<DriverLogProps> = ({
       disabled && 'opacity-50',
       className
     )}
-    accessibilityLabel="Driver Log"
+    accessibilityLabel='Driver Log'
     {...props}
   >
-    {children || <Text className="text-gray-900 dark:text-white">DriverLog Component</Text>}
+    {children || (
+      <Text className='text-gray-900 dark:text-white'>DriverLog Component</Text>
+    )}
   </View>
 );

package/src/MemoryUsage.tsx

@@ -19,9 +19,13 @@ export const MemoryUsage: React.FC<MemoryUsageProps> = ({
       disabled && 'opacity-50',
       className
     )}
-    accessibilityLabel="Memory Usage"
+    accessibilityLabel='Memory Usage'
     {...props}
   >
-    {children || <Text className="text-gray-900 dark:text-white">MemoryUsage Component</Text>}
+    {children || (
+      <Text className='text-gray-900 dark:text-white'>
+        MemoryUsage Component
+      </Text>
+    )}
   </View>
 );

package/src/MetricsGrid.tsx

@@ -1,115 +1,120 @@
 import React from 'react';
-import { View, Text, FlatList, type ViewProps } from 'react-native';
-import { cn } from '@sudobility/components-rn';
+import { View, Text, Pressable } from 'react-native';
+import { cn, Card } from '@sudobility/components-rn';
 
-type MetricColor = 'blue' | 'green' | 'purple' | 'orange' | 'pink' | 'gray';
-
-export interface MetricItem {
-  value: string | number;
+export interface Metric {
+  id: string;
   label: string;
-  color?: MetricColor;
+  value: number | string;
+  unit?: string;
+  change?: number;
+  changeLabel?: string;
   icon?: React.ReactNode;
-  trend?: {
-    direction: 'up' | 'down';
-    value: string;
-  };
 }
 
-export interface MetricsGridProps extends ViewProps {
-  title?: string;
-  description?: string;
-  metrics: MetricItem[];
-  columns?: 2 | 3 | 4;
+export interface MetricsGridProps {
+  metrics: Metric[];
+  columns?: 1 | 2 | 3 | 4;
+  onMetricPress?: (metric: Metric) => void;
+  className?: string;
 }
 
-const colorClasses: Record<MetricColor, string> = {
-  blue: 'text-blue-600 dark:text-blue-400',
-  green: 'text-green-600 dark:text-green-400',
-  purple: 'text-purple-600 dark:text-purple-400',
-  orange: 'text-orange-600 dark:text-orange-400',
-  pink: 'text-pink-600 dark:text-pink-400',
-  gray: 'text-gray-600 dark:text-gray-400',
+const formatChange = (change: number): string => {
+  const sign = change >= 0 ? '+' : '';
+  return sign + change.toFixed(1) + '%';
 };
 
-interface MetricCardProps {
-  metric: MetricItem;
-}
-
-const MetricCard: React.FC<MetricCardProps> = ({ metric }) => {
-  const colorClass = metric.color ? colorClasses[metric.color] : colorClasses.blue;
-
-  return (
-    <View className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 items-center mb-4 mx-2">
-      {metric.icon && (
-        <View className={cn('mb-4', colorClass)}>{metric.icon}</View>
-      )}
-
-      <View className="gap-2 items-center">
-        <Text className={cn('text-3xl font-bold', colorClass)}>
-          {metric.value}
-        </Text>
-
-        <Text className="text-gray-600 dark:text-gray-400 font-medium">
-          {metric.label}
-        </Text>
-
-        {metric.trend && (
-          <Text
-            className={cn(
-              'text-sm font-semibold',
-              metric.trend.direction === 'up'
-                ? 'text-green-600 dark:text-green-400'
-                : 'text-red-600 dark:text-red-400'
-            )}
-          >
-            {metric.trend.direction === 'up' ? '↑' : '↓'} {metric.trend.value}
-          </Text>
-        )}
-      </View>
-    </View>
-  );
-};
-
-/**
- * MetricsGrid component for React Native
- * Grid display of metric cards
- */
 export const MetricsGrid: React.FC<MetricsGridProps> = ({
-  title,
-  description,
   metrics,
   columns = 2,
+  onMetricPress,
   className,
-  ...props
 }) => {
+  const columnWidthClass = {
+    1: 'w-full',
+    2: 'w-1/2',
+    3: 'w-1/3',
+    4: 'w-1/4',
+  }[columns];
+
   return (
-    <View className={cn('py-8 px-4', className)} {...props}>
-      {(title || description) && (
-        <View className="items-center mb-8">
-          {title && (
-            <Text className="text-2xl font-bold text-gray-900 dark:text-white mb-4 text-center">
-              {title}
-            </Text>
-          )}
-          {description && (
-            <Text className="text-lg text-gray-600 dark:text-gray-300 text-center max-w-lg">
-              {description}
-            </Text>
-          )}
-        </View>
-      )}
+    <View className={cn('flex-row flex-wrap -m-1', className)}>
+      {metrics.map(metric => {
+        const content = (
+          <Card className='p-4 m-1 flex-1'>
+            <View className='flex-row items-start justify-between'>
+              <View className='flex-1'>
+                <Text className='text-sm text-gray-600 dark:text-gray-400 mb-1'>
+                  {metric.label}
+                </Text>
+                <View className='flex-row items-baseline'>
+                  <Text className='text-2xl font-bold text-gray-900 dark:text-gray-100'>
+                    {metric.value}
+                  </Text>
+                  {metric.unit && (
+                    <Text className='text-sm text-gray-500 dark:text-gray-500 ml-1'>
+                      {metric.unit}
+                    </Text>
+                  )}
+                </View>
+                {metric.change !== undefined && (
+                  <View className='flex-row items-center mt-2'>
+                    <View
+                      className={cn(
+                        'px-1.5 py-0.5 rounded',
+                        metric.change >= 0
+                          ? 'bg-green-100 dark:bg-green-900'
+                          : 'bg-red-100 dark:bg-red-900'
+                      )}
+                    >
+                      <Text
+                        className={cn(
+                          'text-xs font-medium',
+                          metric.change >= 0
+                            ? 'text-green-700 dark:text-green-300'
+                            : 'text-red-700 dark:text-red-300'
+                        )}
+                      >
+                        {formatChange(metric.change)}
+                      </Text>
+                    </View>
+                    {metric.changeLabel && (
+                      <Text className='text-xs text-gray-500 dark:text-gray-500 ml-2'>
+                        {metric.changeLabel}
+                      </Text>
+                    )}
+                  </View>
+                )}
+              </View>
+              {metric.icon && <View className='ml-2'>{metric.icon}</View>}
+            </View>
+          </Card>
+        );
+
+        if (onMetricPress) {
+          return (
+            <View key={metric.id} className={columnWidthClass}>
+              <Pressable
+                onPress={() => onMetricPress(metric)}
+                accessibilityRole='button'
+                accessibilityLabel={
+                  metric.label + ': ' + metric.value + (metric.unit || '')
+                }
+              >
+                {content}
+              </Pressable>
+            </View>
+          );
+        }
 
-      <FlatList
-        data={metrics}
-        keyExtractor={(_, index) => index.toString()}
-        numColumns={columns > 2 ? 2 : columns}
-        renderItem={({ item }) => (
-          <View className="flex-1">
-            <MetricCard metric={item} />
+        return (
+          <View key={metric.id} className={columnWidthClass}>
+            {content}
           </View>
-        )}
-        scrollEnabled={false}
-      />
+        );
+      })}
     </View>
   );
 };
+
+export default MetricsGrid;