@catalystsoftware/ui 1.0.5 → 1.0.6

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

@@ -1,560 +0,0 @@
- 
-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>
-  )
-}