@catalystsoftware/ui 1.0.4 → 1.0.5

package/dist/components/catalyst-ui/x/tracker-x.tsx

@@ -0,0 +1,560 @@
+ 
+import { Card } from '~/components/catalyst-ui';
+import React, { useState } from 'react'
+import { CheckCircle2, ChevronDown, MapPin, Cloud, Clock } from 'lucide-react'
+import { cn } from'~/components/catalyst-ui';
+import { Card } from '~/components/catalyst-ui';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Tracker } from '~/components/catalyst-ui';
+
+
+const colorMapping: Record<string, string> = {
+  Operational: 'bg-emerald-600 dark:bg-emerald-500',
+  Downtime: 'bg-red-600 dark:bg-red-500',
+  Degraded: 'bg-amber-500 dark:bg-amber-500',
+  Maintenance: 'bg-amber-600 dark:bg-amber-500',
+  'Not measured': 'bg-gray-300 dark:bg-gray-700',
+  Inactive: 'bg-gray-300 dark:bg-gray-700',
+}
+
+const generateData = (downtimes: number[] = [28, 63]) => 
+  Array.from({ length: 90 }, (_, i) => ({
+    tooltip: downtimes.includes(i) ? 'Downtime' : 'Operational',
+    date: `Day ${i + 1}`,
+    color: downtimes.includes(i) ? colorMapping.Downtime : colorMapping.Operational,
+  }))
+
+const sampleData = generateData()
+
+export function TrackerX({ tracker = 'default', ...props }: any) {
+  switch (tracker) {
+    case 'WithDetails':
+      return <WithDetails {...props} />
+    case 'DatabaseScan':
+      return <DatabaseScan {...props} />
+    case 'WithDowntime':
+      return <WithDowntime {...props} />
+    case 'WithAccordion':
+      return <WithAccordion {...props} />
+    case 'Sidebar':
+      return <Sidebar {...props} />
+    case 'MultiService':
+      return <MultiService {...props} />
+    default:
+      return <DefaultTracker {...props} />
+  }
+}
+
+const calculateStatus = (data) => {
+  if (!data || data.length === 0) return { isOperational: true, statusText: 'Operational', statusColor: 'emerald' }
+  const lastDay = data[data.length - 1]
+  const isOperational = lastDay.tooltip === 'Operational'
+  return {
+    isOperational,
+    statusText: isOperational ? 'Operational' : lastDay.tooltip,
+    statusColor: isOperational ? 'emerald' : (lastDay.tooltip === 'Downtime' ? 'red' : 'yellow')
+  }
+}
+
+const calculateUptime = (data) => {
+  if (!data || data.length === 0) return '100%'
+  const operational = data.filter(d => d.tooltip === 'Operational').length
+  return `${((operational / data.length) * 100).toFixed(1)}%`
+}
+
+const getDowntimeEvents = (data) => {
+  if (!data || data.length === 0) return []
+  const events = []
+  let currentDowntime = null
+  
+  data.forEach((day, index) => {
+    if (day.tooltip === 'Downtime') {
+      if (!currentDowntime) {
+        currentDowntime = { startIndex: index, endIndex: index, date: day.date }
+      } else {
+        currentDowntime.endIndex = index
+      }
+    } else if (currentDowntime) {
+      events.push({
+        date: currentDowntime.date,
+        duration: currentDowntime.endIndex - currentDowntime.startIndex + 1
+      })
+      currentDowntime = null
+    }
+  })
+  
+  if (currentDowntime) {
+    events.push({
+      date: currentDowntime.date,
+      duration: currentDowntime.endIndex - currentDowntime.startIndex + 1
+    })
+  }
+  
+  return events
+}
+
+const generateData = (downtimes = [28, 63]) => 
+  Array.from({ length: 90 }, (_, i) => ({
+    tooltip: downtimes.includes(i) ? 'Downtime' : 'Operational',
+    date: `Day ${i + 1}`,
+    color: downtimes.includes(i) ? colorMapping.Downtime : colorMapping.Operational,
+  }))
+
+const sampleData = generateData()
+
+
+const DefaultTracker = ({ 
+  title = "Lena's Website", 
+  url = 'example.com',
+  data = sampleData, 
+  className 
+}) => {
+  const status = calculateStatus(data)
+  const uptime = calculateUptime(data)
+  
+  return (
+    <Card className={cn('p-6', className)}>
+      <div className="flex items-center justify-between">
+        <h3 className="font-medium text-gray-900 dark:text-gray-50">{title}</h3>
+        <span className="inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm ring-1 ring-gray-200 dark:ring-gray-800">
+          <span className={cn('size-2 rounded-full', `bg-${status.statusColor}-500`)} />
+          {status.statusText}
+        </span>
+      </div>
+      <div className="mt-8 flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          {status.isOperational ? (
+            <CheckCircle2 className={cn('size-5', `text-${status.statusColor}-500`)} />
+          ) : (
+            <XCircle className={cn('size-5', `text-${status.statusColor}-500`)} />
+          )}
+          <p className="text-sm font-medium">{url}</p>
+        </div>
+        <p className="text-sm font-medium">{uptime} uptime</p>
+      </div>
+      <Tracker data={data} className="mt-4 hidden lg:flex" />
+      <Tracker data={data.slice(30, 90)} className="mt-3 hidden sm:flex lg:hidden" />
+      <Tracker data={data.slice(60, 90)} className="mt-3 flex sm:hidden" />
+      <div className="mt-3 flex justify-between text-sm text-gray-500">
+        <span className="hidden lg:block">90 days ago</span>
+        <span className="hidden sm:block lg:hidden">60 days ago</span>
+        <span className="sm:hidden">30 days ago</span>
+        <span>Today</span>
+      </div>
+    </Card>
+  )
+}
+
+const WithDetails = ({ 
+  title = "Lena's Website", 
+  url = 'example.com',
+  data = sampleData,
+  detailsContent,
+  className 
+}) => {
+  const [show, setShow] = useState(false)
+  const status = calculateStatus(data)
+  const uptime = calculateUptime(data)
+  
+  return (
+    <Card className={cn('p-6', className)}>
+      <div className="flex items-center justify-between">
+        <h3 className="font-medium">{title}</h3>
+        <span className="inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm ring-1 ring-gray-200 dark:ring-gray-800">
+          <span className={cn('size-2 rounded-full', `bg-${status.statusColor}-500`)} />
+          {status.statusText}
+        </span>
+      </div>
+      <div className="mt-8 flex items-center justify-between">
+        <div className="flex items-center space-x-1.5">
+          {status.isOperational ? (
+            <CheckCircle2 className={cn('size-5', `text-${status.statusColor}-500`)} />
+          ) : (
+            <XCircle className={cn('size-5', `text-${status.statusColor}-500`)} />
+          )}
+          <p className="text-sm font-medium">{url}</p>
+        </div>
+        <div className="flex items-center space-x-2">
+          <p className="text-sm font-medium">{uptime} uptime</p>
+          {detailsContent && (
+            <button className="hidden sm:flex items-center space-x-1.5" onClick={() => setShow(!show)}>
+              <span className="text-sm font-medium text-blue-500">Show details</span>
+              <ChevronDown className={cn(show && 'rotate-180', 'size-5 text-blue-500 transition-transform')} />
+            </button>
+          )}
+        </div>
+      </div>
+      {show && detailsContent && (
+        <div className="mt-3 rounded-md bg-gray-100 dark:bg-gray-800 p-4">
+          {detailsContent}
+        </div>
+      )}
+      <Tracker data={data} className="mt-4 hidden lg:flex" />
+      <Tracker data={data.slice(30, 90)} className="mt-3 hidden sm:flex lg:hidden" />
+      <Tracker data={data.slice(60, 90)} className="mt-3 flex sm:hidden" />
+      <div className="mt-3 flex justify-between text-sm text-gray-500">
+        <span className="hidden lg:block">90 days ago</span>
+        <span className="hidden sm:block lg:hidden">60 days ago</span>
+        <span className="sm:hidden">30 days ago</span>
+        <span>Today</span>
+      </div>
+      <div className="mt-6 flex flex-wrap gap-2">
+        {['Operational', 'Downtime', 'Maintenance'].map(s => (
+          <span key={s} className="inline-flex items-center gap-x-2 rounded-md bg-gray-100 dark:bg-gray-800 px-2 py-0.5 text-sm">
+            <span className={cn('size-2 rounded-full', colorMapping[s])} />
+            {s}
+          </span>
+        ))}
+      </div>
+    </Card>
+  )
+}
+
+const DatabaseScan = ({ 
+  databases = ['sales_data', 'customer_data'], 
+  data = sampleData,
+  isRunning = true,
+  nextRunTime = '1 hour',
+  onViewMore,
+  className 
+}) => (
+  <Card className={cn('p-6', className)}>
+    <div className="flex-wrap items-center gap-2 sm:flex">
+      <p className="text-sm font-medium">Scanned databases:</p>
+      <div className="mt-2 sm:mt-0 flex flex-wrap gap-2">
+        {databases.map((db, i) => (
+          <span key={i} className="rounded px-3 py-1 font-mono text-xs ring-1 ring-gray-200 dark:ring-gray-800">{db}</span>
+        ))}
+      </div>
+    </div>
+    <Tracker data={data} className="mt-4 hidden lg:flex" />
+    <Tracker data={data.slice(30, 90)} className="mt-3 hidden sm:flex lg:hidden" />
+    <Tracker data={data.slice(60, 90)} className="mt-3 flex sm:hidden" />
+    <div className="mt-6 sm:flex items-center justify-between">
+      <div className="flex items-center gap-2">
+        {isRunning ? (
+          <>
+            <span className="animate-pulse rounded-full bg-emerald-500/30 p-1">
+              <span className="block size-2 rounded-full bg-emerald-500" />
+            </span>
+            <span className="text-sm font-medium">Running</span>
+          </>
+        ) : (
+          <>
+            <span className="rounded-full bg-gray-500/30 p-1">
+              <span className="block size-2 rounded-full bg-gray-500" />
+            </span>
+            <span className="text-sm font-medium">Idle</span>
+          </>
+        )}
+        {nextRunTime && (
+          <>
+            <span className="text-sm text-gray-500">/</span>
+            <span className="text-sm text-gray-500">Next run: {nextRunTime}</span>
+          </>
+        )}
+      </div>
+      {onViewMore && (
+        <button onClick={onViewMore} className="mt-4 sm:mt-0 block text-sm font-medium text-blue-500">
+          View more →
+        </button>
+      )}
+    </div>
+  </Card>
+)
+
+const WithDowntime = ({ 
+  title = "Lena's Website",
+  url = 'example.com',
+  data = sampleData, 
+  className 
+}) => {
+  const status = calculateStatus(data)
+  const uptime = calculateUptime(data)
+  const downtimeEvents = getDowntimeEvents(data)
+  
+  return (
+    <Card className={cn('p-6', className)}>
+      <div className="flex items-center justify-between">
+        <h3 className="font-medium">{title}</h3>
+        <span className="inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm ring-1 ring-gray-200 dark:ring-gray-800">
+          <span className={cn('size-2 rounded-full', `bg-${status.statusColor}-500`)} />
+          {status.statusText}
+        </span>
+      </div>
+      <div className="mt-8 flex items-center justify-between">
+        <div className="flex items-center space-x-1.5">
+          {status.isOperational ? (
+            <CheckCircle2 className={cn('size-5', `text-${status.statusColor}-500`)} />
+          ) : (
+            <XCircle className={cn('size-5', `text-${status.statusColor}-500`)} />
+          )}
+          <p className="text-sm font-medium">{url}</p>
+        </div>
+        <p className="text-sm font-medium">{uptime} uptime</p>
+      </div>
+      <Tracker data={data} className="mt-4" />
+      <div className="mt-3 flex justify-between text-sm text-gray-500">
+        <span>90 days ago</span>
+        <span>Today</span>
+      </div>
+      <h3 className="mt-6 text-sm">Downtime overview</h3>
+      {downtimeEvents.length > 0 ? (
+        <ul className="mt-2 divide-y divide-gray-200 dark:divide-gray-800 text-sm text-gray-500">
+          {downtimeEvents.map((event, i) => (
+            <li key={i} className="flex justify-between py-2">
+              <span>{event.date}</span>
+              <span>Down for {event.duration} day{event.duration > 1 ? 's' : ''}</span>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="mt-2 text-sm text-gray-500">No downtime events</p>
+      )}
+    </Card>
+  )
+}
+
+const WithAccordion = ({ 
+  title = "Lena's Website",
+  data = sampleData, 
+  className 
+}) => {
+  const status = calculateStatus(data)
+  const downtimeEvents = getDowntimeEvents(data)
+  
+  return (
+    <Card className={cn('p-6', className)}>
+      <div className="flex items-center justify-between">
+        <h3 className="font-medium">{title}</h3>
+        <span className="inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm ring-1 ring-gray-200 dark:ring-gray-800">
+          <span className={cn('size-2 rounded-full', `bg-${status.statusColor}-500`)} />
+          {status.statusText}
+        </span>
+      </div>
+      <Tracker data={data} className="mt-4" />
+      <Accordion type="single" collapsible className="mt-6">
+        <AccordionItem value="1" className="rounded-md border px-4 dark:border-gray-800">
+          <AccordionTrigger>
+            Downtime overview ({downtimeEvents.length})
+          </AccordionTrigger>
+          <AccordionContent>
+            {downtimeEvents.length > 0 ? (
+              <ul className="divide-y divide-gray-200 dark:divide-gray-800 text-sm">
+                {downtimeEvents.map((event, i) => (
+                  <li key={i} className="flex justify-between py-2">
+                    <span>{event.date}</span>
+                    <span>Down {event.duration} day{event.duration > 1 ? 's' : ''}</span>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p className="text-sm text-gray-500 py-2">No downtime events</p>
+            )}
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </Card>
+  )
+}
+
+const Sidebar = ({ 
+  title = "Emma's Shop", 
+  data = sampleData, 
+  region,
+  isSynced = true,
+  lastUpdated,
+  className 
+}) => {
+  const status = calculateStatus(data)
+  const latestDate = data && data.length > 0 ? data[data.length - 1].date : null
+  const displayDate = lastUpdated || latestDate || 'N/A'
+  
+  return (
+    <Card className={cn('sm:max-w-xl p-6', className)}>
+      <div className="flex space-x-3">
+        <span className={cn('w-1 rounded', `bg-${status.statusColor}-500`)} />
+        <div>
+          <div className="flex items-center space-x-1.5">
+            {status.isOperational ? (
+              <CheckCircle2 className={cn('size-5', `text-${status.statusColor}-500`)} />
+            ) : (
+              <XCircle className={cn('size-5', `text-${status.statusColor}-500`)} />
+            )}
+            <span className={cn('text-sm font-medium', `text-${status.statusColor}-500`)}>
+              {status.statusText}
+            </span>
+          </div>
+          <h3 className="mt-2 text-lg font-medium">{title}</h3>
+          <div className="mt-4 flex flex-wrap gap-2">
+            {region && (
+              <span className="inline-flex items-center gap-1.5 rounded-md bg-gray-100 dark:bg-gray-800 px-2.5 py-1 text-xs">
+                <MapPin className="size-4" />
+                {region}
+              </span>
+            )}
+            <span className="inline-flex items-center gap-1.5 rounded-md bg-gray-100 dark:bg-gray-800 px-2.5 py-1 text-xs">
+              <Cloud className="size-4" />
+              {isSynced ? 'Synced' : 'Not Synced'}
+            </span>
+            <span className="inline-flex items-center gap-1.5 rounded-md bg-gray-100 dark:bg-gray-800 px-2.5 py-1 text-xs">
+              <Clock className="size-4" />
+              Last: {displayDate}
+            </span>
+          </div>
+        </div>
+      </div>
+      <Tracker data={data.slice(30, 90)} className="mt-6" />
+      <div className="mt-3 flex justify-between text-sm text-gray-500">
+        <span>60 days ago</span>
+        <span>Today</span>
+      </div>
+    </Card>
+  )
+}
+
+const MultiService = ({ 
+  title = "Platform status",
+  lastUpdated,
+  services = [
+    { name: 'example.com', data: sampleData },
+    { name: 'acme.com', data: generateData([15, 45, 72]) }
+  ],
+  className 
+}) => {
+  const now = new Date()
+  const displayDate = lastUpdated || now.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+  
+  return (
+    <div className={cn('space-y-6', className)}>
+      <div>
+        <h1 className="text-lg font-semibold">{title}</h1>
+        <p className="text-sm text-gray-500">Last updated {displayDate}</p>
+      </div>
+      <Card className="p-6">
+        <Accordion type="multiple" className="space-y-3">
+          {services.map((service, i) => {
+            const status = calculateStatus(service.data)
+            const uptime = calculateUptime(service.data)
+            return (
+              <AccordionItem key={i} value={String(i)} className="!border-none">
+                <AccordionTrigger className="h-12 rounded-lg bg-gray-100 dark:bg-gray-800 px-4 text-sm font-medium hover:bg-gray-100/70">
+                  <div className="flex w-full justify-between">
+                    <span>{service.name}</span>
+                    <span className="mr-6 flex items-center space-x-1">
+                      {status.isOperational ? (
+                        <CheckCircle2 className={cn('size-5', `text-${status.statusColor}-500`)} />
+                      ) : (
+                        <XCircle className={cn('size-5', `text-${status.statusColor}-500`)} />
+                      )}
+                      <span>{status.statusText}</span>
+                    </span>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent className="mt-6 px-4">
+                  <Tracker data={service.data} />
+                  <div className="mt-3 flex justify-between text-sm text-gray-500">
+                    <span>90 days ago</span>
+                    <span>Today</span>
+                  </div>
+                  <div className="mt-4 text-sm text-gray-600">
+                    Uptime: {uptime}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            )
+          })}
+        </Accordion>
+      </Card>
+    </div>
+  )
+}
+
+// Demo
+export default function TrackerXDemo() {
+  const customData = generateData([10, 11, 35, 60, 85])
+  const healthyData = generateData([])
+  const problematicData = generateData([5, 15, 16, 40, 70, 71, 72])
+  
+  return (
+    <div className='space-y-12 p-6 max-w-4xl mx-auto'>
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Default Tracker</h3>
+        <DefaultTracker 
+          title="Production API"
+          url="api.example.com"
+          data={customData}
+        />
+      </div>
+      
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>With Details</h3>
+        <WithDetails 
+          title="Frontend App"
+          url="app.example.com"
+          data={healthyData}
+          detailsContent={
+            <>
+              <h3 className="text-sm font-medium">Recent Activity</h3>
+              <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                All systems running smoothly. No incidents reported.
+              </p>
+            </>
+          }
+        />
+      </div>
+      
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Database Scan</h3>
+        <DatabaseScan 
+          databases={['users_prod', 'transactions', 'analytics']}
+          data={customData}
+          isRunning={true}
+          nextRunTime="45 minutes"
+          onViewMore={() => alert('View more clicked')}
+        />
+      </div>
+      
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>With Downtime List</h3>
+        <WithDowntime 
+          title="Payment Gateway"
+          url="payments.example.com"
+          data={problematicData}
+        />
+      </div>
+      
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>With Accordion</h3>
+        <WithAccordion 
+          title="Main Database"
+          data={customData}
+        />
+      </div>
+      
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Sidebar Style</h3>
+        <Sidebar 
+          title="Production API"
+          data={customData}
+          region="EU-West-1"
+          isSynced={true}
+          lastUpdated="Day 90"
+        />
+      </div>
+      
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Multi Service</h3>
+        <MultiService 
+          title="Infrastructure Status"
+          lastUpdated="Jan 10, 2026"
+          services={[
+            { name: 'API Gateway', data: generateData([5, 40]) },
+            { name: 'Auth Service', data: generateData([]) },
+            { name: 'Payment Processor', data: generateData([22, 23, 24, 70]) },
+            { name: 'Email Service', data: generateData([15, 80, 81]) }
+          ]}
+        />
+      </div>
+    </div>
+  )
+}