@sudobility/devops-components-rn 1.0.0

package/src/ChangelogDisplay.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface ChangelogDisplayProps extends ViewProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+export const ChangelogDisplay: React.FC<ChangelogDisplayProps> = ({
+  className,
+  children,
+  disabled,
+  ...props
+}) => (
+  <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
+    )}
+    accessibilityLabel="Changelog Display"
+    {...props}
+  >
+    {children || <Text className="text-gray-900 dark:text-white">ChangelogDisplay Component</Text>}
+  </View>
+);

package/src/CodePlayground.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text, Pressable, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface CodePlaygroundProps extends ViewProps {
+  disabled?: boolean;
+  onPress?: () => void;
+  children?: React.ReactNode;
+}
+
+export const CodePlayground: React.FC<CodePlaygroundProps> = ({
+  className,
+  children,
+  disabled = false,
+  onPress,
+  ...props
+}) => (
+  <Pressable
+    onPress={disabled ? undefined : onPress}
+    disabled={disabled}
+    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',
+      className
+    )}
+    {...props}
+  >
+    {children || <Text className="text-gray-900 dark:text-white">CodePlayground Component</Text>}
+  </Pressable>
+);

package/src/ConflictResolver.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text, Pressable, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface ConflictResolverProps extends ViewProps {
+  disabled?: boolean;
+  onPress?: () => void;
+  children?: React.ReactNode;
+}
+
+export const ConflictResolver: React.FC<ConflictResolverProps> = ({
+  className,
+  children,
+  disabled = false,
+  onPress,
+  ...props
+}) => (
+  <Pressable
+    onPress={disabled ? undefined : onPress}
+    disabled={disabled}
+    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',
+      className
+    )}
+    {...props}
+  >
+    {children || <Text className="text-gray-900 dark:text-white">ConflictResolver Component</Text>}
+  </Pressable>
+);

package/src/DealPipeline.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface DealPipelineProps extends ViewProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+export const DealPipeline: React.FC<DealPipelineProps> = ({
+  className,
+  children,
+  disabled,
+  ...props
+}) => (
+  <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
+    )}
+    accessibilityLabel="Deal Pipeline"
+    {...props}
+  >
+    {children || <Text className="text-gray-900 dark:text-white">DealPipeline Component</Text>}
+  </View>
+);

package/src/DeploymentStatus.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text, Pressable, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface DeploymentStatusProps extends ViewProps {
+  disabled?: boolean;
+  onPress?: () => void;
+  children?: React.ReactNode;
+}
+
+export const DeploymentStatus: React.FC<DeploymentStatusProps> = ({
+  className,
+  children,
+  disabled = false,
+  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>
+);

package/src/DriverLog.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface DriverLogProps extends ViewProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+export const DriverLog: React.FC<DriverLogProps> = ({
+  className,
+  children,
+  disabled,
+  ...props
+}) => (
+  <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
+    )}
+    accessibilityLabel="Driver Log"
+    {...props}
+  >
+    {children || <Text className="text-gray-900 dark:text-white">DriverLog Component</Text>}
+  </View>
+);

package/src/MemoryUsage.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface MemoryUsageProps extends ViewProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+export const MemoryUsage: React.FC<MemoryUsageProps> = ({
+  className,
+  children,
+  disabled,
+  ...props
+}) => (
+  <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
+    )}
+    accessibilityLabel="Memory Usage"
+    {...props}
+  >
+    {children || <Text className="text-gray-900 dark:text-white">MemoryUsage Component</Text>}
+  </View>
+);

package/src/MetricsGrid.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { View, Text, FlatList, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+type MetricColor = 'blue' | 'green' | 'purple' | 'orange' | 'pink' | 'gray';
+
+export interface MetricItem {
+  value: string | number;
+  label: string;
+  color?: MetricColor;
+  icon?: React.ReactNode;
+  trend?: {
+    direction: 'up' | 'down';
+    value: string;
+  };
+}
+
+export interface MetricsGridProps extends ViewProps {
+  title?: string;
+  description?: string;
+  metrics: MetricItem[];
+  columns?: 2 | 3 | 4;
+}
+
+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',
+};
+
+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,
+  className,
+  ...props
+}) => {
+  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>
+      )}
+
+      <FlatList
+        data={metrics}
+        keyExtractor={(_, index) => index.toString()}
+        numColumns={columns > 2 ? 2 : columns}
+        renderItem={({ item }) => (
+          <View className="flex-1">
+            <MetricCard metric={item} />
+          </View>
+        )}
+        scrollEnabled={false}
+      />
+    </View>
+  );
+};

package/src/PipelineView.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text, Pressable, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface PipelineViewProps extends ViewProps {
+  disabled?: boolean;
+  onPress?: () => void;
+  children?: React.ReactNode;
+}
+
+export const PipelineView: React.FC<PipelineViewProps> = ({
+  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>
+);

package/src/RegressionTest.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface RegressionTestProps extends ViewProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+export const RegressionTest: React.FC<RegressionTestProps> = ({
+  className,
+  children,
+  disabled,
+  ...props
+}) => (
+  <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
+    )}
+    accessibilityLabel="Regression Test"
+    {...props}
+  >
+    {children || <Text className="text-gray-900 dark:text-white">RegressionTest Component</Text>}
+  </View>
+);

package/src/SystemStatusIndicator.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface SystemStatusIndicatorProps extends ViewProps {
+  status: 'operational' | 'degraded' | 'partial' | 'major' | 'maintenance';
+  label?: string;
+  showPulse?: boolean;
+}
+
+const statusConfig = {
+  operational: {
+    color: 'bg-green-500',
+    textColor: 'text-green-700 dark:text-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',
+  },
+  major: {
+    color: 'bg-red-500',
+    textColor: 'text-red-700 dark:text-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,
+  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
+            className={cn(
+              'absolute inset-0 rounded-full opacity-75',
+              config.color
+            )}
+          />
+        )}
+      </View>
+      <Text className={cn('text-sm font-medium', config.textColor)}>
+        {label || config.label}
+      </Text>
+    </View>
+  );
+};

package/src/TestResult.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface TestResultProps extends ViewProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+export const TestResult: React.FC<TestResultProps> = ({
+  className,
+  children,
+  disabled,
+  ...props
+}) => (
+  <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
+    )}
+    accessibilityLabel="Test Result"
+    {...props}
+  >
+    {children || <Text className="text-gray-900 dark:text-white">TestResult Component</Text>}
+  </View>
+);

package/src/TestRunner.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text, Pressable, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface TestRunnerProps extends ViewProps {
+  disabled?: boolean;
+  onPress?: () => void;
+  children?: React.ReactNode;
+}
+
+export const TestRunner: React.FC<TestRunnerProps> = ({
+  className,
+  children,
+  disabled = false,
+  onPress,
+  ...props
+}) => (
+  <Pressable
+    onPress={disabled ? undefined : onPress}
+    disabled={disabled}
+    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',
+      className
+    )}
+    {...props}
+  >
+    {children || <Text className="text-gray-900 dark:text-white">TestRunner Component</Text>}
+  </Pressable>
+);

package/src/WebhookLogger.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface WebhookLoggerProps extends ViewProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+export const WebhookLogger: React.FC<WebhookLoggerProps> = ({
+  className,
+  children,
+  disabled,
+  ...props
+}) => (
+  <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
+    )}
+    accessibilityLabel="Webhook Logger"
+    {...props}
+  >
+    {children || <Text className="text-gray-900 dark:text-white">WebhookLogger Component</Text>}
+  </View>
+);

package/src/WorkflowBuilder.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text, Pressable, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface WorkflowBuilderProps extends ViewProps {
+  disabled?: boolean;
+  onPress?: () => void;
+  children?: React.ReactNode;
+}
+
+export const WorkflowBuilder: React.FC<WorkflowBuilderProps> = ({
+  className,
+  children,
+  disabled = false,
+  onPress,
+  ...props
+}) => (
+  <Pressable
+    onPress={disabled ? undefined : onPress}
+    disabled={disabled}
+    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',
+      className
+    )}
+    {...props}
+  >
+    {children || <Text className="text-gray-900 dark:text-white">WorkflowBuilder Component</Text>}
+  </Pressable>
+);

package/src/WorkflowTemplate.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text, Pressable, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface WorkflowTemplateProps extends ViewProps {
+  disabled?: boolean;
+  onPress?: () => void;
+  children?: React.ReactNode;
+}
+
+export const WorkflowTemplate: React.FC<WorkflowTemplateProps> = ({
+  className,
+  children,
+  disabled = false,
+  onPress,
+  ...props
+}) => (
+  <Pressable
+    onPress={disabled ? undefined : onPress}
+    disabled={disabled}
+    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',
+      className
+    )}
+    {...props}
+  >
+    {children || <Text className="text-gray-900 dark:text-white">WorkflowTemplate Component</Text>}
+  </Pressable>
+);

package/src/XmlParser.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { cn } from '@sudobility/components-rn';
+
+export interface XmlParserProps extends ViewProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+export const XmlParser: React.FC<XmlParserProps> = ({
+  className,
+  children,
+  disabled,
+  ...props
+}) => (
+  <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
+    )}
+    accessibilityLabel="XML Parser"
+    {...props}
+  >
+    {children || <Text className="text-gray-900 dark:text-white">XmlParser Component</Text>}
+  </View>
+);

package/src/index.ts

@@ -0,0 +1,32 @@
+/**
+ * @sudobility/devops-components-rn
+ * React Native DevOps components for Sudobility
+ */
+
+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';
+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';