@sudobility/devops-components-rn 1.0.0 → 1.0.1

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;