@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-image/WakaImage.stories.tsx

@@ -0,0 +1,255 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaImage, WakaImageGallery } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaImage> = {
+  title: 'Components/Display/WakaImage',
+  component: WakaImage,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An image component with lazy loading, zoom functionality, and error handling.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    objectFit: {
+      control: 'select',
+      options: ['contain', 'cover', 'fill', 'none', 'scale-down'],
+      description: 'How the image should fit its container',
+    },
+    rounded: {
+      control: 'select',
+      options: ['none', 'sm', 'md', 'lg', 'xl', 'full'],
+      description: 'Border radius',
+    },
+    zoomable: {
+      control: 'boolean',
+      description: 'Enable zoom on click',
+    },
+    lazy: {
+      control: 'boolean',
+      description: 'Enable lazy loading',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaImage>
+
+const sampleImage = 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800&q=80'
+const sampleImage2 = 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80'
+
+export const Default: Story = {
+  args: {
+    src: sampleImage,
+    alt: 'Beautiful landscape',
+    width: 400,
+    height: 300,
+  },
+}
+
+export const Zoomable: Story = {
+  args: {
+    src: sampleImage,
+    alt: 'Zoomable image',
+    width: 400,
+    height: 300,
+    zoomable: true,
+  },
+}
+
+export const AspectRatios: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">16:9</p>
+        <WakaImage
+          src={sampleImage}
+          alt="16:9 aspect ratio"
+          aspectRatio="16/9"
+          width={400}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">4:3</p>
+        <WakaImage
+          src={sampleImage}
+          alt="4:3 aspect ratio"
+          aspectRatio="4/3"
+          width={400}
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">1:1 (Square)</p>
+        <WakaImage
+          src={sampleImage}
+          alt="Square"
+          aspectRatio="1/1"
+          width={300}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const RoundedVariants: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-4">
+      {(['none', 'sm', 'md', 'lg', 'xl', 'full'] as const).map((rounded) => (
+        <div key={rounded} className="text-center">
+          <WakaImage
+            src={sampleImage}
+            alt={`Rounded ${rounded}`}
+            width={150}
+            height={150}
+            rounded={rounded}
+          />
+          <p className="text-xs text-muted-foreground mt-2">{rounded}</p>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const ObjectFit: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-4">
+      {(['contain', 'cover', 'fill', 'none', 'scale-down'] as const).map((fit) => (
+        <div key={fit} className="text-center">
+          <WakaImage
+            src={sampleImage2}
+            alt={`Object fit ${fit}`}
+            width={150}
+            height={150}
+            objectFit={fit}
+            containerClassName="border"
+          />
+          <p className="text-xs text-muted-foreground mt-2">{fit}</p>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const WithPlaceholder: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">Images with color placeholder while loading</p>
+      <div className="flex gap-4">
+        <WakaImage
+          src={sampleImage}
+          alt="With placeholder"
+          width={200}
+          height={150}
+          placeholderColor="bg-blue-100"
+        />
+        <WakaImage
+          src={sampleImage2}
+          alt="With placeholder"
+          width={200}
+          height={150}
+          placeholderColor="bg-purple-100"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const ErrorState: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">Image with invalid URL shows error state</p>
+      <WakaImage
+        src="https://invalid-url.com/image.jpg"
+        alt="Broken image"
+        width={300}
+        height={200}
+      />
+    </div>
+  ),
+}
+
+export const NoLoader: Story = {
+  args: {
+    src: sampleImage,
+    alt: 'No loader',
+    width: 400,
+    height: 300,
+    showLoader: false,
+  },
+}
+
+export const Gallery: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaImageGallery
+        images={[
+          { src: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800&q=80', alt: 'Mountain' },
+          { src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80', alt: 'Lake' },
+          { src: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&q=80', alt: 'Forest' },
+          { src: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800&q=80', alt: 'Beach' },
+          { src: 'https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=800&q=80', alt: 'Valley' },
+          { src: 'https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=800&q=80', alt: 'Sunset' },
+        ]}
+        columns={3}
+        gap={4}
+        aspectRatio="1/1"
+      />
+    </div>
+  ),
+}
+
+export const GalleryCustomColumns: Story = {
+  render: () => (
+    <div className="space-y-8 w-[700px]">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">2 Columns</p>
+        <WakaImageGallery
+          images={[
+            { src: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800&q=80', alt: 'Mountain' },
+            { src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80', alt: 'Lake' },
+            { src: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&q=80', alt: 'Forest' },
+            { src: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800&q=80', alt: 'Beach' },
+          ]}
+          columns={2}
+          aspectRatio="16/9"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">4 Columns</p>
+        <WakaImageGallery
+          images={[
+            { src: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800&q=80', alt: 'Mountain' },
+            { src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80', alt: 'Lake' },
+            { src: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&q=80', alt: 'Forest' },
+            { src: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=800&q=80', alt: 'Beach' },
+          ]}
+          columns={4}
+          aspectRatio="1/1"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const ProductImage: Story = {
+  render: () => (
+    <div className="p-6 border rounded-lg w-[400px]">
+      <WakaImage
+        src={sampleImage}
+        alt="Product image"
+        aspectRatio="1/1"
+        zoomable
+        rounded="lg"
+      />
+      <div className="mt-4">
+        <h3 className="font-semibold">Product Name</h3>
+        <p className="text-sm text-muted-foreground">Click image to zoom</p>
+        <p className="text-lg font-bold mt-2">$99.99</p>
+      </div>
+    </div>
+  ),
+}

package/src/components/waka-incident-timeline/WakaIncidentTimeline.stories.tsx

@@ -0,0 +1,300 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaIncidentTimeline } from './index'
+import type { Incident, IncidentSeverity, IncidentStatus } from './index'
+import * as React from 'react'
+
+const sampleIncidents: Incident[] = [
+  {
+    id: 'inc-001',
+    title: 'Database Connection Failures',
+    description: 'Multiple services experiencing intermittent database connection issues.',
+    severity: 'critical',
+    status: 'investigating',
+    startedAt: new Date(Date.now() - 30 * 60 * 1000),
+    impact: { services: 5, users: 12500 },
+    updates: [
+      { message: 'Investigating increased error rates in database connections.', timestamp: new Date(Date.now() - 25 * 60 * 1000), status: 'Investigating' },
+      { message: 'Identified potential connection pool exhaustion.', timestamp: new Date(Date.now() - 15 * 60 * 1000), status: 'Identified' },
+    ],
+  },
+  {
+    id: 'inc-002',
+    title: 'API Latency Degradation',
+    description: 'API response times elevated above normal thresholds.',
+    severity: 'major',
+    status: 'identified',
+    startedAt: new Date(Date.now() - 2 * 60 * 60 * 1000),
+    impact: { services: 2, users: 8000 },
+    updates: [
+      { message: 'Identified upstream cache invalidation causing increased load.', timestamp: new Date(Date.now() - 90 * 60 * 1000), status: 'Identified' },
+    ],
+  },
+  {
+    id: 'inc-003',
+    title: 'CDN Cache Purge',
+    description: 'Scheduled maintenance for CDN cache refresh.',
+    severity: 'info',
+    status: 'monitoring',
+    startedAt: new Date(Date.now() - 4 * 60 * 60 * 1000),
+  },
+  {
+    id: 'inc-004',
+    title: 'Authentication Service Outage',
+    description: 'Users unable to log in or authenticate.',
+    severity: 'critical',
+    status: 'resolved',
+    startedAt: new Date(Date.now() - 24 * 60 * 60 * 1000),
+    resolvedAt: new Date(Date.now() - 20 * 60 * 60 * 1000),
+    impact: { services: 3, users: 45000 },
+    updates: [
+      { message: 'Investigating auth service unavailability.', timestamp: new Date(Date.now() - 24 * 60 * 60 * 1000), status: 'Investigating' },
+      { message: 'Root cause identified: SSL certificate expiration.', timestamp: new Date(Date.now() - 22 * 60 * 60 * 1000), status: 'Identified' },
+      { message: 'Certificate renewed and services recovering.', timestamp: new Date(Date.now() - 21 * 60 * 60 * 1000), status: 'Monitoring' },
+      { message: 'All services fully restored.', timestamp: new Date(Date.now() - 20 * 60 * 60 * 1000), status: 'Resolved' },
+    ],
+  },
+  {
+    id: 'inc-005',
+    title: 'Minor UI Bug in Dashboard',
+    description: 'Some chart tooltips not displaying correctly.',
+    severity: 'minor',
+    status: 'resolved',
+    startedAt: new Date(Date.now() - 48 * 60 * 60 * 1000),
+    resolvedAt: new Date(Date.now() - 46 * 60 * 60 * 1000),
+  },
+]
+
+const meta: Meta<typeof WakaIncidentTimeline> = {
+  title: 'Components/DevOps/WakaIncidentTimeline',
+  component: WakaIncidentTimeline,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'An incident timeline with severity indicators, status badges, duration tracking, impact metrics, and filtering capabilities.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showFilters: {
+      control: 'boolean',
+      description: 'Show filter controls',
+    },
+    showImpact: {
+      control: 'boolean',
+      description: 'Show impact indicators',
+    },
+    maxItems: {
+      control: { type: 'number', min: 1, max: 20, step: 1 },
+      description: 'Maximum number of incidents to display',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaIncidentTimeline>
+
+export const Default: Story = {
+  args: {
+    incidents: sampleIncidents,
+  },
+  render: (args) => (
+    <div className="w-[600px]">
+      <WakaIncidentTimeline {...args} onIncidentClick={(id) => console.log('Clicked:', id)} />
+    </div>
+  ),
+}
+
+export const AllSeverities: Story = {
+  render: () => {
+    const severityIncidents: Incident[] = [
+      { id: '1', title: 'Critical: Service Down', severity: 'critical', status: 'investigating', startedAt: new Date(Date.now() - 30 * 60 * 1000) },
+      { id: '2', title: 'Major: High Latency', severity: 'major', status: 'identified', startedAt: new Date(Date.now() - 60 * 60 * 1000) },
+      { id: '3', title: 'Minor: UI Glitch', severity: 'minor', status: 'monitoring', startedAt: new Date(Date.now() - 2 * 60 * 60 * 1000) },
+      { id: '4', title: 'Info: Scheduled Maintenance', severity: 'info', status: 'resolved', startedAt: new Date(Date.now() - 3 * 60 * 60 * 1000), resolvedAt: new Date(Date.now() - 2.5 * 60 * 60 * 1000) },
+    ]
+
+    return (
+      <div className="w-[600px]">
+        <WakaIncidentTimeline incidents={severityIncidents} />
+      </div>
+    )
+  },
+}
+
+export const AllStatuses: Story = {
+  render: () => {
+    const statusIncidents: Incident[] = [
+      { id: '1', title: 'Investigating Issue', severity: 'major', status: 'investigating', startedAt: new Date(Date.now() - 15 * 60 * 1000) },
+      { id: '2', title: 'Root Cause Identified', severity: 'major', status: 'identified', startedAt: new Date(Date.now() - 45 * 60 * 1000) },
+      { id: '3', title: 'Fix Deployed - Monitoring', severity: 'minor', status: 'monitoring', startedAt: new Date(Date.now() - 90 * 60 * 1000) },
+      { id: '4', title: 'Issue Resolved', severity: 'minor', status: 'resolved', startedAt: new Date(Date.now() - 4 * 60 * 60 * 1000), resolvedAt: new Date(Date.now() - 3 * 60 * 60 * 1000) },
+    ]
+
+    return (
+      <div className="w-[600px]">
+        <WakaIncidentTimeline incidents={statusIncidents} />
+      </div>
+    )
+  },
+}
+
+export const WithFilters: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaIncidentTimeline
+        incidents={sampleIncidents}
+        showFilters
+        onIncidentClick={(id) => console.log('Clicked:', id)}
+      />
+    </div>
+  ),
+}
+
+export const NoFilters: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaIncidentTimeline
+        incidents={sampleIncidents}
+        showFilters={false}
+      />
+    </div>
+  ),
+}
+
+export const WithImpact: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaIncidentTimeline
+        incidents={sampleIncidents}
+        showImpact
+      />
+    </div>
+  ),
+}
+
+export const NoImpact: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaIncidentTimeline
+        incidents={sampleIncidents}
+        showImpact={false}
+      />
+    </div>
+  ),
+}
+
+export const LimitedItems: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Limited to 3 incidents
+      </p>
+      <WakaIncidentTimeline
+        incidents={sampleIncidents}
+        maxItems={3}
+      />
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <WakaIncidentTimeline incidents={[]} />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [incidents, setIncidents] = React.useState<Incident[]>([
+      { id: '1', title: 'Current Investigation', severity: 'major', status: 'investigating', startedAt: new Date() },
+    ])
+
+    const addIncident = (severity: IncidentSeverity) => {
+      const newIncident: Incident = {
+        id: `inc-${Date.now()}`,
+        title: `New ${severity} incident`,
+        description: `Auto-generated ${severity} incident for demo`,
+        severity,
+        status: 'investigating',
+        startedAt: new Date(),
+        impact: { services: Math.floor(Math.random() * 5) + 1, users: Math.floor(Math.random() * 10000) },
+      }
+      setIncidents(prev => [newIncident, ...prev])
+    }
+
+    const updateStatus = (id: string, status: IncidentStatus) => {
+      setIncidents(prev => prev.map(inc =>
+        inc.id === id
+          ? { ...inc, status, resolvedAt: status === 'resolved' ? new Date() : undefined }
+          : inc
+      ))
+    }
+
+    return (
+      <div className="w-[600px] space-y-4">
+        <WakaIncidentTimeline
+          incidents={incidents}
+          showFilters
+          showImpact
+          onIncidentClick={(id) => console.log('Clicked:', id)}
+        />
+
+        <div className="flex flex-wrap gap-2">
+          <button
+            onClick={() => addIncident('critical')}
+            className="px-3 py-1.5 text-xs rounded bg-red-500 text-white"
+          >
+            Add Critical
+          </button>
+          <button
+            onClick={() => addIncident('major')}
+            className="px-3 py-1.5 text-xs rounded bg-orange-500 text-white"
+          >
+            Add Major
+          </button>
+          <button
+            onClick={() => addIncident('minor')}
+            className="px-3 py-1.5 text-xs rounded bg-yellow-500 text-black"
+          >
+            Add Minor
+          </button>
+          {incidents.length > 0 && incidents[0].status !== 'resolved' && (
+            <button
+              onClick={() => updateStatus(incidents[0].id, 'resolved')}
+              className="px-3 py-1.5 text-xs rounded bg-green-500 text-white"
+            >
+              Resolve First
+            </button>
+          )}
+        </div>
+      </div>
+    )
+  },
+}
+
+export const StatusPage: Story = {
+  render: () => (
+    <div className="w-[700px] p-6 rounded-xl border bg-card">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-bold">System Status</h2>
+          <p className="text-sm text-muted-foreground">Current and past incidents</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full bg-yellow-500 animate-pulse" />
+          <span className="text-sm font-medium text-yellow-600">Partial Outage</span>
+        </div>
+      </div>
+
+      <WakaIncidentTimeline
+        incidents={sampleIncidents}
+        showFilters
+        showImpact
+      />
+    </div>
+  ),
+}