@sudobility/devops-components-rn 1.0.0 → 1.0.1

package/src/PipelineView.tsx

@@ -1,32 +1,231 @@
 import React from 'react';
-import { Text, Pressable, type ViewProps } from 'react-native';
-import { cn } from '@sudobility/components-rn';
+import { View, Text, ScrollView, Pressable } from 'react-native';
+import { cn, Card } from '@sudobility/components-rn';
 
-export interface PipelineViewProps extends ViewProps {
-  disabled?: boolean;
-  onPress?: () => void;
-  children?: React.ReactNode;
+export type PipelineStageStatus =
+  | 'pending'
+  | 'running'
+  | 'success'
+  | 'failed'
+  | 'skipped'
+  | 'cancelled';
+
+export interface PipelineStage {
+  id: string;
+  name: string;
+  status: PipelineStageStatus;
+  duration?: number;
+  startedAt?: Date;
+  finishedAt?: Date;
+  jobs?: {
+    id: string;
+    name: string;
+    status: PipelineStageStatus;
+  }[];
+}
+
+export interface PipelineViewProps {
+  stages: PipelineStage[];
+  pipelineName?: string;
+  pipelineId?: string;
+  onStagePress?: (stage: PipelineStage) => void;
+  className?: string;
 }
 
+const statusConfig: Record<
+  PipelineStageStatus,
+  {
+    color: string;
+    bgColor: string;
+    darkBgColor: string;
+    borderColor: string;
+    icon: string;
+  }
+> = {
+  pending: {
+    color: 'text-gray-600 dark:text-gray-400',
+    bgColor: 'bg-gray-100',
+    darkBgColor: 'dark:bg-gray-800',
+    borderColor: 'border-gray-300 dark:border-gray-600',
+    icon: '○',
+  },
+  running: {
+    color: 'text-blue-600 dark:text-blue-400',
+    bgColor: 'bg-blue-100',
+    darkBgColor: 'dark:bg-blue-900',
+    borderColor: 'border-blue-400 dark:border-blue-500',
+    icon: '◐',
+  },
+  success: {
+    color: 'text-green-600 dark:text-green-400',
+    bgColor: 'bg-green-100',
+    darkBgColor: 'dark:bg-green-900',
+    borderColor: 'border-green-400 dark:border-green-500',
+    icon: '●',
+  },
+  failed: {
+    color: 'text-red-600 dark:text-red-400',
+    bgColor: 'bg-red-100',
+    darkBgColor: 'dark:bg-red-900',
+    borderColor: 'border-red-400 dark:border-red-500',
+    icon: '✗',
+  },
+  skipped: {
+    color: 'text-gray-400 dark:text-gray-600',
+    bgColor: 'bg-gray-50',
+    darkBgColor: 'dark:bg-gray-900',
+    borderColor: 'border-gray-200 dark:border-gray-700',
+    icon: '◌',
+  },
+  cancelled: {
+    color: 'text-orange-600 dark:text-orange-400',
+    bgColor: 'bg-orange-100',
+    darkBgColor: 'dark:bg-orange-900',
+    borderColor: 'border-orange-400 dark:border-orange-500',
+    icon: '⊘',
+  },
+};
+
+const formatDuration = (seconds: number): string => {
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}m ${remainingSeconds}s`;
+};
+
 export const PipelineView: React.FC<PipelineViewProps> = ({
+  stages,
+  pipelineName,
+  pipelineId,
+  onStagePress,
   className,
-  children,
-  disabled = false,
-  onPress,
-  ...props
-}) => (
-  <Pressable
-    onPress={disabled ? undefined : onPress}
-    disabled={disabled}
-    accessibilityRole="button"
-    accessibilityLabel="Pipeline View"
-    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">PipelineView Component</Text>}
-  </Pressable>
-);
+}) => {
+  const overallStatus = stages.some(s => s.status === 'failed')
+    ? 'failed'
+    : stages.some(s => s.status === 'running')
+      ? 'running'
+      : stages.every(s => s.status === 'success')
+        ? 'success'
+        : stages.every(s => s.status === 'pending')
+          ? 'pending'
+          : 'running';
+
+  const overallConfig = statusConfig[overallStatus];
+
+  return (
+    <Card className={cn('overflow-hidden', className)}>
+      {(pipelineName || pipelineId) && (
+        <View className='px-4 py-3 border-b border-gray-200 dark:border-gray-700'>
+          <View className='flex-row items-center justify-between'>
+            <View>
+              {pipelineName && (
+                <Text className='text-base font-semibold text-gray-900 dark:text-gray-100'>
+                  {pipelineName}
+                </Text>
+              )}
+              {pipelineId && (
+                <Text className='text-xs font-mono text-gray-500 dark:text-gray-500'>
+                  #{pipelineId}
+                </Text>
+              )}
+            </View>
+            <View
+              className={cn(
+                'px-2 py-1 rounded-full',
+                overallConfig.bgColor,
+                overallConfig.darkBgColor
+              )}
+            >
+              <Text className={cn('text-xs font-medium', overallConfig.color)}>
+                {overallConfig.icon}{' '}
+                {overallStatus.charAt(0).toUpperCase() + overallStatus.slice(1)}
+              </Text>
+            </View>
+          </View>
+        </View>
+      )}
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={true}
+        contentContainerStyle={{ padding: 16 }}
+      >
+        <View className='flex-row items-center'>
+          {stages.map((stage, index) => {
+            const config = statusConfig[stage.status];
+            const isLast = index === stages.length - 1;
+
+            const stageContent = (
+              <View className='items-center'>
+                <View
+                  className={cn(
+                    'w-24 p-3 rounded-lg border-2',
+                    config.bgColor,
+                    config.darkBgColor,
+                    config.borderColor
+                  )}
+                >
+                  <View className='items-center'>
+                    <Text className={cn('text-lg', config.color)}>
+                      {config.icon}
+                    </Text>
+                    <Text
+                      className='text-xs font-medium text-gray-900 dark:text-gray-100 mt-1 text-center'
+                      numberOfLines={2}
+                    >
+                      {stage.name}
+                    </Text>
+                    {stage.duration !== undefined && (
+                      <Text className='text-xs text-gray-500 dark:text-gray-500 mt-1'>
+                        {formatDuration(stage.duration)}
+                      </Text>
+                    )}
+                  </View>
+                </View>
+                {stage.jobs && stage.jobs.length > 0 && (
+                  <View className='mt-2'>
+                    <Text className='text-xs text-gray-500 dark:text-gray-500'>
+                      {stage.jobs.filter(j => j.status === 'success').length}/
+                      {stage.jobs.length} jobs
+                    </Text>
+                  </View>
+                )}
+              </View>
+            );
+
+            return (
+              <View key={stage.id} className='flex-row items-center'>
+                {onStagePress ? (
+                  <Pressable
+                    onPress={() => onStagePress(stage)}
+                    accessibilityRole='button'
+                    accessibilityLabel={`${stage.name} - ${stage.status}`}
+                  >
+                    {stageContent}
+                  </Pressable>
+                ) : (
+                  stageContent
+                )}
+                {!isLast && (
+                  <View className='mx-2'>
+                    <View className='w-8 h-0.5 bg-gray-300 dark:bg-gray-600' />
+                    <Text className='absolute -top-2 left-2 text-gray-400 dark:text-gray-600'>
+                      →
+                    </Text>
+                  </View>
+                )}
+              </View>
+            );
+          })}
+        </View>
+      </ScrollView>
+      <View className='px-4 py-2 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700'>
+        <Text className='text-xs text-gray-500 dark:text-gray-500'>
+          {stages.length} stages |{' '}
+          {stages.filter(s => s.status === 'success').length} completed
+        </Text>
+      </View>
+    </Card>
+  );
+};
+
+export default PipelineView;

package/src/RegressionTest.tsx

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

package/src/SystemStatusIndicator.tsx

@@ -1,74 +1,97 @@
 import React from 'react';
-import { View, Text, 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 SystemStatusIndicatorProps extends ViewProps {
-  status: 'operational' | 'degraded' | 'partial' | 'major' | 'maintenance';
-  label?: string;
-  showPulse?: boolean;
+export type SystemStatus = 'operational' | 'degraded' | 'major-outage';
+
+export interface SystemStatusIndicatorProps {
+  status: SystemStatus;
+  systemName: string;
+  description?: string;
+  lastChecked?: Date;
+  onPress?: () => void;
+  className?: string;
 }
 
-const statusConfig = {
+const statusConfig: Record<
+  SystemStatus,
+  { color: string; darkColor: string; label: string }
+> = {
   operational: {
     color: 'bg-green-500',
-    textColor: 'text-green-700 dark:text-green-400',
+    darkColor: 'dark:bg-green-400',
     label: 'Operational',
   },
   degraded: {
     color: 'bg-yellow-500',
-    textColor: 'text-yellow-700 dark:text-yellow-400',
-    label: 'Degraded Performance',
-  },
-  partial: {
-    color: 'bg-orange-500',
-    textColor: 'text-orange-700 dark:text-orange-400',
-    label: 'Partial Outage',
+    darkColor: 'dark:bg-yellow-400',
+    label: 'Degraded',
   },
-  major: {
+  'major-outage': {
     color: 'bg-red-500',
-    textColor: 'text-red-700 dark:text-red-400',
+    darkColor: 'dark:bg-red-400',
     label: 'Major Outage',
   },
-  maintenance: {
-    color: 'bg-blue-500',
-    textColor: 'text-blue-700 dark:text-blue-400',
-    label: 'Under Maintenance',
-  },
 };
 
-/**
- * System status indicator component for displaying service health
- */
 export const SystemStatusIndicator: React.FC<SystemStatusIndicatorProps> = ({
   status,
-  label,
-  showPulse = true,
+  systemName,
+  description,
+  lastChecked,
+  onPress,
   className,
-  ...props
 }) => {
   const config = statusConfig[status];
 
-  return (
-    <View
-      className={cn('flex-row items-center gap-2', className)}
-      accessibilityRole="text"
-      accessibilityLabel={`System status: ${label || config.label}`}
-      {...props}
-    >
-      <View className="relative">
-        <View className={cn('w-3 h-3 rounded-full', config.color)} />
-        {showPulse && status === 'operational' && (
-          <View
+  const content = (
+    <Card className={cn('p-4', className)}>
+      <View className='flex-row items-center'>
+        <View
+          className={cn(
+            'w-3 h-3 rounded-full mr-3',
+            config.color,
+            config.darkColor
+          )}
+        />
+        <View className='flex-1'>
+          <Text className='text-base font-semibold text-gray-900 dark:text-gray-100'>
+            {systemName}
+          </Text>
+          <Text
             className={cn(
-              'absolute inset-0 rounded-full opacity-75',
-              config.color
+              'text-sm',
+              status === 'operational' && 'text-green-600 dark:text-green-400',
+              status === 'degraded' && 'text-yellow-600 dark:text-yellow-400',
+              status === 'major-outage' && 'text-red-600 dark:text-red-400'
             )}
-          />
-        )}
+          >
+            {config.label}
+          </Text>
+        </View>
       </View>
-      <Text className={cn('text-sm font-medium', config.textColor)}>
-        {label || config.label}
-      </Text>
-    </View>
+      {description && (
+        <Text className='mt-2 text-sm text-gray-600 dark:text-gray-400'>
+          {description}
+        </Text>
+      )}
+      {lastChecked && (
+        <Text className='mt-2 text-xs text-gray-500 dark:text-gray-500'>
+          Last checked: {lastChecked.toLocaleString()}
+        </Text>
+      )}
+    </Card>
   );
+
+  if (onPress) {
+    return (
+      <Pressable onPress={onPress} accessibilityRole='button'>
+        {content}
+      </Pressable>
+    );
+  }
+
+  return content;
 };
+
+export default SystemStatusIndicator;

package/src/TestResult.tsx

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

package/src/TestRunner.tsx

@@ -18,8 +18,8 @@ export const TestRunner: React.FC<TestRunnerProps> = ({
   <Pressable
     onPress={disabled ? undefined : onPress}
     disabled={disabled}
-    accessibilityRole="button"
-    accessibilityLabel="Test Runner"
+    accessibilityRole='button'
+    accessibilityLabel='Test Runner'
     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 TestRunner: React.FC<TestRunnerProps> = ({
     )}
     {...props}
   >
-    {children || <Text className="text-gray-900 dark:text-white">TestRunner Component</Text>}
+    {children || (
+      <Text className='text-gray-900 dark:text-white'>
+        TestRunner Component
+      </Text>
+    )}
   </Pressable>
 );

package/src/WebhookLogger.tsx

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

package/src/WorkflowBuilder.tsx

@@ -18,8 +18,8 @@ export const WorkflowBuilder: React.FC<WorkflowBuilderProps> = ({
   <Pressable
     onPress={disabled ? undefined : onPress}
     disabled={disabled}
-    accessibilityRole="button"
-    accessibilityLabel="Workflow Builder"
+    accessibilityRole='button'
+    accessibilityLabel='Workflow Builder'
     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 WorkflowBuilder: React.FC<WorkflowBuilderProps> = ({
     )}
     {...props}
   >
-    {children || <Text className="text-gray-900 dark:text-white">WorkflowBuilder Component</Text>}
+    {children || (
+      <Text className='text-gray-900 dark:text-white'>
+        WorkflowBuilder Component
+      </Text>
+    )}
   </Pressable>
 );

package/src/WorkflowTemplate.tsx

@@ -18,8 +18,8 @@ export const WorkflowTemplate: React.FC<WorkflowTemplateProps> = ({
   <Pressable
     onPress={disabled ? undefined : onPress}
     disabled={disabled}
-    accessibilityRole="button"
-    accessibilityLabel="Workflow Template"
+    accessibilityRole='button'
+    accessibilityLabel='Workflow Template'
     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 WorkflowTemplate: React.FC<WorkflowTemplateProps> = ({
     )}
     {...props}
   >
-    {children || <Text className="text-gray-900 dark:text-white">WorkflowTemplate Component</Text>}
+    {children || (
+      <Text className='text-gray-900 dark:text-white'>
+        WorkflowTemplate Component
+      </Text>
+    )}
   </Pressable>
 );

package/src/XmlParser.tsx

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

package/src/index.ts

@@ -1,32 +1,43 @@
-/**
- * @sudobility/devops-components-rn
- * React Native DevOps components for Sudobility
- */
+// DevOps Components for React Native
+// @sudobility/devops-components-rn
 
-export { AlertDialog, type AlertDialogProps } from './AlertDialog';
-export { ApiPlayground, type ApiPlaygroundProps } from './ApiPlayground';
-export { ApiReference, type ApiReferenceProps } from './ApiReference';
-export { AuditLog, type AuditLogProps } from './AuditLog';
-export { BodyMetrics, type BodyMetricsProps } from './BodyMetrics';
-export { BuildLog, type BuildLogProps } from './BuildLog';
-export { ChangelogDisplay, type ChangelogDisplayProps } from './ChangelogDisplay';
-export { CodePlayground, type CodePlaygroundProps } from './CodePlayground';
-export { ConflictResolver, type ConflictResolverProps } from './ConflictResolver';
-export { DealPipeline, type DealPipelineProps } from './DealPipeline';
-export { DeploymentStatus, type DeploymentStatusProps } from './DeploymentStatus';
-export { DriverLog, type DriverLogProps } from './DriverLog';
-export { MemoryUsage, type MemoryUsageProps } from './MemoryUsage';
+// SystemStatusIndicator
 export {
-  MetricsGrid,
-  type MetricsGridProps,
-  type MetricItem,
-} from './MetricsGrid';
-export { PipelineView, type PipelineViewProps } from './PipelineView';
-export { RegressionTest, type RegressionTestProps } from './RegressionTest';
-export { SystemStatusIndicator, type SystemStatusIndicatorProps } from './SystemStatusIndicator';
-export { TestResult, type TestResultProps } from './TestResult';
-export { TestRunner, type TestRunnerProps } from './TestRunner';
-export { WebhookLogger, type WebhookLoggerProps } from './WebhookLogger';
-export { WorkflowBuilder, type WorkflowBuilderProps } from './WorkflowBuilder';
-export { WorkflowTemplate, type WorkflowTemplateProps } from './WorkflowTemplate';
-export { XmlParser, type XmlParserProps } from './XmlParser';
+  SystemStatusIndicator,
+  type SystemStatusIndicatorProps,
+  type SystemStatus,
+} from './SystemStatusIndicator';
+
+// DeploymentStatus
+export {
+  DeploymentStatus,
+  type DeploymentStatusProps,
+  type DeploymentState,
+} from './DeploymentStatus';
+
+// BuildLog
+export {
+  BuildLog,
+  type BuildLogProps,
+  type LogEntry,
+  type LogLevel,
+} from './BuildLog';
+
+// MetricsGrid
+export { MetricsGrid, type MetricsGridProps, type Metric } from './MetricsGrid';
+
+// AuditLog
+export {
+  AuditLog,
+  type AuditLogProps,
+  type AuditEntry,
+  type AuditActionType,
+} from './AuditLog';
+
+// PipelineView
+export {
+  PipelineView,
+  type PipelineViewProps,
+  type PipelineStage,
+  type PipelineStageStatus,
+} from './PipelineView';

package/src/nativewind.d.ts

@@ -20,4 +20,7 @@ declare module 'react-native' {
   interface ScrollViewProps {
     className?: string;
   }
+  interface TextInputProps {
+    className?: string;
+  }
 }