@sudobility/devops-components-rn 1.0.0 → 1.0.1

package/src/AuditLog.tsx

@@ -1,27 +1,250 @@
 import React from 'react';
-import { View, Text, 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 AuditLogProps extends ViewProps {
-  disabled?: boolean;
-  children?: React.ReactNode;
+export type AuditActionType =
+  | 'create'
+  | 'update'
+  | 'delete'
+  | 'login'
+  | 'logout'
+  | 'access'
+  | 'export'
+  | 'import'
+  | 'approve'
+  | 'reject'
+  | 'deploy'
+  | 'rollback';
+
+export interface AuditEntry {
+  id: string;
+  action: AuditActionType;
+  actor: {
+    id: string;
+    name: string;
+    email?: string;
+    avatar?: string;
+  };
+  resource: {
+    type: string;
+    id: string;
+    name: string;
+  };
+  timestamp: Date;
+  metadata?: Record<string, unknown>;
+  ipAddress?: string;
+}
+
+export interface AuditLogProps {
+  entries: AuditEntry[];
+  title?: string;
+  maxHeight?: number;
+  onEntryPress?: (entry: AuditEntry) => void;
+  className?: string;
 }
 
+const actionConfig: Record<
+  AuditActionType,
+  { color: string; bgColor: string; darkBgColor: string; icon: string }
+> = {
+  create: {
+    color: 'text-green-700 dark:text-green-300',
+    bgColor: 'bg-green-100',
+    darkBgColor: 'dark:bg-green-900',
+    icon: '+',
+  },
+  update: {
+    color: 'text-blue-700 dark:text-blue-300',
+    bgColor: 'bg-blue-100',
+    darkBgColor: 'dark:bg-blue-900',
+    icon: '~',
+  },
+  delete: {
+    color: 'text-red-700 dark:text-red-300',
+    bgColor: 'bg-red-100',
+    darkBgColor: 'dark:bg-red-900',
+    icon: '-',
+  },
+  login: {
+    color: 'text-purple-700 dark:text-purple-300',
+    bgColor: 'bg-purple-100',
+    darkBgColor: 'dark:bg-purple-900',
+    icon: '→',
+  },
+  logout: {
+    color: 'text-gray-700 dark:text-gray-300',
+    bgColor: 'bg-gray-100',
+    darkBgColor: 'dark:bg-gray-800',
+    icon: '←',
+  },
+  access: {
+    color: 'text-cyan-700 dark:text-cyan-300',
+    bgColor: 'bg-cyan-100',
+    darkBgColor: 'dark:bg-cyan-900',
+    icon: '◉',
+  },
+  export: {
+    color: 'text-orange-700 dark:text-orange-300',
+    bgColor: 'bg-orange-100',
+    darkBgColor: 'dark:bg-orange-900',
+    icon: '↑',
+  },
+  import: {
+    color: 'text-teal-700 dark:text-teal-300',
+    bgColor: 'bg-teal-100',
+    darkBgColor: 'dark:bg-teal-900',
+    icon: '↓',
+  },
+  approve: {
+    color: 'text-emerald-700 dark:text-emerald-300',
+    bgColor: 'bg-emerald-100',
+    darkBgColor: 'dark:bg-emerald-900',
+    icon: '✓',
+  },
+  reject: {
+    color: 'text-rose-700 dark:text-rose-300',
+    bgColor: 'bg-rose-100',
+    darkBgColor: 'dark:bg-rose-900',
+    icon: '✗',
+  },
+  deploy: {
+    color: 'text-indigo-700 dark:text-indigo-300',
+    bgColor: 'bg-indigo-100',
+    darkBgColor: 'dark:bg-indigo-900',
+    icon: '▲',
+  },
+  rollback: {
+    color: 'text-amber-700 dark:text-amber-300',
+    bgColor: 'bg-amber-100',
+    darkBgColor: 'dark:bg-amber-900',
+    icon: '↺',
+  },
+};
+
+const formatTimestamp = (date: Date): string => {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+};
+
 export const AuditLog: React.FC<AuditLogProps> = ({
+  entries,
+  title,
+  maxHeight = 500,
+  onEntryPress,
   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="Audit Log"
-    {...props}
-  >
-    {children || <Text className="text-gray-900 dark:text-white">AuditLog Component</Text>}
-  </View>
-);
+}) => {
+  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 }} showsVerticalScrollIndicator={true}>
+        {entries.map((entry, index) => {
+          const config = actionConfig[entry.action];
+          const isLast = index === entries.length - 1;
+
+          const content = (
+            <View
+              className={cn(
+                'px-4 py-3',
+                !isLast && 'border-b border-gray-100 dark:border-gray-800'
+              )}
+            >
+              <View className='flex-row items-start'>
+                <View
+                  className={cn(
+                    'w-8 h-8 rounded-full items-center justify-center mr-3',
+                    config.bgColor,
+                    config.darkBgColor
+                  )}
+                >
+                  <Text className={cn('text-sm font-bold', config.color)}>
+                    {config.icon}
+                  </Text>
+                </View>
+                <View className='flex-1'>
+                  <View className='flex-row items-center flex-wrap'>
+                    <Text className='text-sm font-medium text-gray-900 dark:text-gray-100'>
+                      {entry.actor.name}
+                    </Text>
+                    <Text className='text-sm text-gray-600 dark:text-gray-400 mx-1'>
+                      {entry.action}d
+                    </Text>
+                    <Text className='text-sm font-medium text-gray-900 dark:text-gray-100'>
+                      {entry.resource.name}
+                    </Text>
+                  </View>
+                  <View className='flex-row items-center mt-1'>
+                    <View
+                      className={cn(
+                        'px-1.5 py-0.5 rounded mr-2',
+                        config.bgColor,
+                        config.darkBgColor
+                      )}
+                    >
+                      <Text
+                        className={cn(
+                          'text-xs font-medium uppercase',
+                          config.color
+                        )}
+                      >
+                        {entry.action}
+                      </Text>
+                    </View>
+                    <Text className='text-xs text-gray-500 dark:text-gray-500'>
+                      {entry.resource.type}
+                    </Text>
+                  </View>
+                  <View className='flex-row items-center mt-2'>
+                    <Text className='text-xs text-gray-400 dark:text-gray-600'>
+                      {formatTimestamp(entry.timestamp)}
+                    </Text>
+                    {entry.ipAddress && (
+                      <Text className='text-xs text-gray-400 dark:text-gray-600 ml-2'>
+                        IP: {entry.ipAddress}
+                      </Text>
+                    )}
+                  </View>
+                </View>
+              </View>
+            </View>
+          );
+
+          if (onEntryPress) {
+            return (
+              <Pressable
+                key={entry.id}
+                onPress={() => onEntryPress(entry)}
+                accessibilityRole='button'
+              >
+                {content}
+              </Pressable>
+            );
+          }
+
+          return <View key={entry.id}>{content}</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'>
+          Showing {entries.length} audit entries
+        </Text>
+      </View>
+    </Card>
+  );
+};
+
+export default AuditLog;

package/src/BodyMetrics.tsx

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

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>
 );