73e8372b0e
- Bulk replace text-white → text-foreground across 116 component files (preserving text-white/ opacity variants) - Remove hover-glow-cyan, shadow-card-glow-cyan, shadow-button-primary-glow classes from all components - Replace --duration-normal/--duration-immersive/--duration-slow with --sumi-duration-normal/--sumi-duration-slow across 130+ files - Replace --ease-out/--ease-in-out with --sumi-ease-out/--sumi-ease-in-out - Replace focus:ring-blue-500 → focus:ring-primary (4 files) - Remove hover:scale-105/110 and hover:-translate-y-1/0.5 transforms (SUMI anti-pattern: no scale on hover) - Clean up stale kodo- references in comments Co-authored-by: Cursor <cursoragent@cursor.com>
83 lines
3 KiB
TypeScript
83 lines
3 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { WifiOff, Loader2, List } from 'lucide-react';
|
|
|
|
// Since OfflineIndicator has complex hook dependencies, we create visual representations
|
|
// of its different states for documentation purposes.
|
|
|
|
const OfflineIndicatorMock = ({ variant }: { variant: 'offline' | 'syncing' | 'hidden' }) => {
|
|
if (variant === 'hidden') {
|
|
return (
|
|
<div className="p-4 bg-muted rounded text-center text-muted-foreground">
|
|
(Indicator is hidden when online with no pending requests)
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (variant === 'offline') {
|
|
return (
|
|
<div className="bg-destructive/90 backdrop-blur-sm text-foreground px-4 py-2.5 text-sm flex items-center justify-center gap-2 shadow-lg border-b border-destructive rounded">
|
|
<WifiOff className="w-4 h-4" />
|
|
<span>
|
|
Mode hors ligne
|
|
<span className="ml-2 font-semibold">- 3 requêtes en attente</span>
|
|
</span>
|
|
<button className="ml-3 px-2 py-1 bg-white/10 hover:bg-white/20 rounded border border-white/20 transition-colors flex items-center gap-1.5 text-xs font-medium">
|
|
<List className="w-3.5 h-3.5" />
|
|
View Queue
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-primary/90 backdrop-blur-sm text-foreground px-4 py-2.5 text-sm flex items-center justify-center gap-2 shadow-lg border-b border-border rounded">
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
<span>
|
|
Synchronisation en cours
|
|
<span className="ml-2 font-semibold">- 2 requêtes restantes</span>
|
|
</span>
|
|
<button className="ml-2 px-2 py-1 bg-destructive/20 hover:bg-destructive/30 rounded border border-destructive/30 transition-colors flex items-center gap-1.5 text-xs font-medium">
|
|
Clear Queue
|
|
</button>
|
|
<button className="ml-2 px-2 py-1 bg-background/20 hover:bg-background/30 rounded border border-border/30 transition-colors flex items-center gap-1.5 text-xs font-medium">
|
|
<List className="w-3.5 h-3.5" />
|
|
View Queue
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const meta: Meta<typeof OfflineIndicatorMock> = {
|
|
title: 'Components/Features/OfflineIndicator',
|
|
component: OfflineIndicatorMock,
|
|
parameters: {
|
|
layout: 'padded',
|
|
docs: {
|
|
description: {
|
|
component: 'Displays the current network status and pending offline requests. The actual component uses hooks for online detection and queue management.',
|
|
},
|
|
},
|
|
},
|
|
tags: ['autodocs'],
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof OfflineIndicatorMock>;
|
|
|
|
export const Offline: Story = {
|
|
args: {
|
|
variant: 'offline',
|
|
},
|
|
};
|
|
|
|
export const Syncing: Story = {
|
|
args: {
|
|
variant: 'syncing',
|
|
},
|
|
};
|
|
|
|
export const Hidden: Story = {
|
|
args: {
|
|
variant: 'hidden',
|
|
},
|
|
};
|