@djangocfg/ui-tools 2.1.381 → 2.1.383

package/src/tools/PrettyCode/PrettyCode.story.tsx

@@ -1,304 +0,0 @@
-import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import PrettyCode from './index';
-
-export default defineStory({
-  title: 'Tools/Pretty Code',
-  component: PrettyCode,
-  description: 'Syntax highlighted code block with copy button.',
-});
-
-// ─── Samples ──────────────────────────────────────────────────────────────────
-
-const LONG_CODE_SAMPLES = {
-  typescript: `import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-export type Status = 'idle' | 'loading' | 'success' | 'error';
-
-export interface PaginationParams {
-  page: number;
-  pageSize: number;
-  sortBy?: string;
-  sortOrder?: 'asc' | 'desc';
-}
-
-export function useVehicles(initialParams?: Partial<PaginationParams>) {
-  const [status, setStatus] = useState<Status>('idle');
-  const [data, setData] = useState<unknown[]>([]);
-  const [error, setError] = useState<Error | null>(null);
-  const abortRef = useRef<AbortController | null>(null);
-
-  const [params, setParams] = useState<PaginationParams>({
-    page: 1,
-    pageSize: 20,
-    ...initialParams,
-  });
-
-  const fetch = useCallback(async (p: PaginationParams) => {
-    abortRef.current?.abort();
-    abortRef.current = new AbortController();
-    setStatus('loading');
-    try {
-      const query = new URLSearchParams({
-        page: String(p.page),
-        pageSize: String(p.pageSize),
-      });
-      const res = await window.fetch(\`/api/vehicles?\${query}\`, {
-        signal: abortRef.current.signal,
-      });
-      if (!res.ok) throw new Error(\`HTTP \${res.status}\`);
-      const json = await res.json();
-      setData(json.data);
-      setStatus('success');
-    } catch (err) {
-      if ((err as Error).name === 'AbortError') return;
-      setError(err as Error);
-      setStatus('error');
-    }
-  }, []);
-
-  useEffect(() => {
-    fetch(params);
-    return () => abortRef.current?.abort();
-  }, [params, fetch]);
-
-  return { status, data, error, params, setParams };
-}`,
-
-  python: `from __future__ import annotations
-
-import asyncio
-import logging
-from dataclasses import dataclass, field
-from datetime import datetime
-from enum import StrEnum
-
-import httpx
-from pydantic import BaseModel, ConfigDict, Field, field_validator
-
-logger = logging.getLogger(__name__)
-
-
-class FuelType(StrEnum):
-    GASOLINE = "gasoline"
-    DIESEL = "diesel"
-    ELECTRIC = "electric"
-
-
-class Vehicle(BaseModel):
-    model_config = ConfigDict(from_attributes=True)
-
-    id: str
-    make: str
-    model: str
-    year: int
-    fuel_type: FuelType
-    created_at: datetime = Field(default_factory=datetime.utcnow)
-
-    @field_validator("year")
-    @classmethod
-    def validate_year(cls, v: int) -> int:
-        if not (1900 <= v <= datetime.utcnow().year + 1):
-            raise ValueError(f"Invalid year: {v}")
-        return v
-
-
-@dataclass
-class VehicleRepository:
-    base_url: str
-
-    async def list(self, page: int = 1, page_size: int = 20) -> list[Vehicle]:
-        async with httpx.AsyncClient(base_url=self.base_url) as client:
-            response = await client.get(
-                "/vehicles",
-                params={"page": page, "page_size": page_size},
-            )
-            response.raise_for_status()
-            payload = response.json()
-            return [Vehicle.model_validate(v) for v in payload["data"]]`,
-
-  javascript: `class EventBus {
-  #listeners = new Map();
-  #wildcards = new Set();
-
-  on(event, handler) {
-    if (event === '*') {
-      this.#wildcards.add(handler);
-      return () => this.#wildcards.delete(handler);
-    }
-    if (!this.#listeners.has(event)) {
-      this.#listeners.set(event, new Set());
-    }
-    this.#listeners.get(event).add(handler);
-    return () => this.#listeners.get(event)?.delete(handler);
-  }
-
-  once(event, handler) {
-    const unsub = this.on(event, (...args) => {
-      unsub();
-      handler(...args);
-    });
-    return unsub;
-  }
-
-  emit(event, payload) {
-    this.#listeners.get(event)?.forEach(h => h(payload));
-    this.#wildcards.forEach(h => h(event, payload));
-  }
-}
-
-const bus = new EventBus();
-bus.on('*', (event, payload) => console.debug(\`[bus] \${event}\`, payload));
-bus.emit('vehicle:created', { id: 'v_001', make: 'BMW' });`,
-
-  css: `:root {
-  --radius-md: 0.5rem;
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.card {
-  border-radius: var(--radius-md);
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--card));
-  box-shadow: var(--shadow-sm);
-  transition: box-shadow var(--transition-base);
-
-  &:hover {
-    box-shadow: var(--shadow-md);
-    transform: translateY(-1px);
-  }
-}
-
-@keyframes shimmer {
-  from { background-position: -200% 0; }
-  to   { background-position:  200% 0; }
-}
-
-.card--skeleton .card-title {
-  background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted-foreground) / 0.1) 50%, hsl(var(--muted)) 75%);
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
-}`,
-
-  html: `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>Sample</title>
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/entry.tsx"></script>
-</body>
-</html>`,
-};
-
-// ─── Stories ──────────────────────────────────────────────────────────────────
-
-/** Interactive — language, variant, compact, scrollIsolation all toggleable.
- *  Replaces the old per-language / per-mode / per-flag stories which were
- *  just this component with different defaults. */
-export const Interactive = () => {
-  const [language] = useSelect('language', {
-    options: ['typescript', 'javascript', 'python', 'css', 'html'] as const,
-    defaultValue: 'typescript',
-    label: 'Language',
-  });
-
-  const [variant] = useSelect('variant', {
-    options: ['card', 'plain'] as const,
-    defaultValue: 'card',
-    label: 'Variant',
-    description: 'card = full chrome, plain = bare highlighted code',
-  });
-
-  const [isCompact] = useBoolean('isCompact', {
-    defaultValue: false,
-    label: 'Compact',
-  });
-
-  const [scrollIsolation] = useBoolean('scrollIsolation', {
-    defaultValue: true,
-    label: 'Scroll isolation',
-    description: 'Require click before the block captures scroll (card only)',
-  });
-
-  return (
-    <PrettyCode
-      data={LONG_CODE_SAMPLES[language]}
-      language={language}
-      variant={variant}
-      isCompact={isCompact}
-      scrollIsolation={scrollIsolation}
-    />
-  );
-};
-
-/** Variants — ``card`` vs ``plain`` side by side. The card has its own
- *  border, hover toolbar, and can internally scroll when a ``maxLines``
- *  cap is hit. The plain variant is chrome-less for embedding inside
- *  an existing scroll container (e.g. a response panel), where the
- *  parent surface owns chrome and scroll. */
-export const Variants = () => (
-  <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 max-w-6xl">
-    <section className="space-y-2">
-      <h3 className="text-sm font-semibold">variant=&quot;card&quot; (default)</h3>
-      <p className="text-xs text-muted-foreground">
-        Border, background, hover toolbar with Copy + language tag.
-      </p>
-      <PrettyCode data={LONG_CODE_SAMPLES.typescript} language="typescript" variant="card" />
-    </section>
-    <section className="space-y-2">
-      <h3 className="text-sm font-semibold">variant=&quot;plain&quot;</h3>
-      <p className="text-xs text-muted-foreground">
-        Chrome-less. No border, no background, no toolbar. Flows into the
-        parent scroll container.
-      </p>
-      <PrettyCode data={LONG_CODE_SAMPLES.typescript} language="typescript" variant="plain" />
-    </section>
-  </div>
-);
-
-/** LongCode — stress test for multi-column layouts and long snippets. */
-export const LongCode = () => (
-  <div className="flex flex-col gap-6 max-w-4xl">
-    <div className="h-96">
-      <PrettyCode data={LONG_CODE_SAMPLES.typescript} language="typescript" maxLines={30} />
-    </div>
-    <div className="h-96">
-      <PrettyCode data={LONG_CODE_SAMPLES.python} language="python" maxLines={30} />
-    </div>
-    <div className="h-96">
-      <PrettyCode data={LONG_CODE_SAMPLES.javascript} language="javascript" maxLines={30} />
-    </div>
-  </div>
-);
-
-/** ScrollIsolation — both states side-by-side so the difference is
- *  obvious without toggling. The isolation flag matters most when the
- *  block is embedded in a scrolling page: without it, wheel-scrolling
- *  anywhere over the block "captures" the wheel and the page itself
- *  stops scrolling — click-to-unlock avoids that surprise. */
-export const ScrollIsolation = () => (
-  <div className="flex flex-col gap-8 max-w-4xl">
-    <section className="space-y-2">
-      <h3 className="text-sm font-semibold">scrollIsolation=true (default)</h3>
-      <p className="text-xs text-muted-foreground">
-        Hover to see the hint; click to unlock wheel-scroll inside the block.
-      </p>
-      <div className="h-64">
-        <PrettyCode data={LONG_CODE_SAMPLES.typescript} language="typescript" maxLines={15} scrollIsolation />
-      </div>
-    </section>
-    <section className="space-y-2">
-      <h3 className="text-sm font-semibold">scrollIsolation=false</h3>
-      <p className="text-xs text-muted-foreground">
-        Wheel-scroll captured immediately — use when the block has no
-        surrounding page-level scroll to compete with.
-      </p>
-      <div className="h-64">
-        <PrettyCode data={LONG_CODE_SAMPLES.typescript} language="typescript" maxLines={15} scrollIsolation={false} />
-      </div>
-    </section>
-  </div>
-);

package/src/tools/Tour/Tour.story.tsx

@@ -1,279 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { defineStory, useSelect } from '@djangocfg/playground';
-import { Button, Card, CardContent, CardHeader, CardTitle } from '@djangocfg/ui-core/components';
-import { Tour, useTour } from './index';
-import type { Tour as TourConfig } from './types';
-
-export default defineStory({
-  title: 'Tools/Tour',
-  component: Tour,
-  description: 'Onboarding tours with spotlight highlighting and keyboard navigation.',
-});
-
-// Demo tours
-const demoTours: TourConfig[] = [
-  {
-    id: 'basic',
-    steps: [
-      {
-        id: 'welcome',
-        target: '[data-tour-step-id="header"]',
-        title: 'Welcome to the Demo',
-        content: 'This tour will show you the main features of this page.',
-        position: 'bottom',
-      },
-      {
-        id: 'sidebar',
-        target: '[data-tour-step-id="sidebar"]',
-        title: 'Navigation Sidebar',
-        content: 'Use this sidebar to navigate between different sections.',
-        position: 'right',
-      },
-      {
-        id: 'content',
-        target: '[data-tour-step-id="main-content"]',
-        title: 'Main Content Area',
-        content: 'This is where all your content will be displayed.',
-        position: 'top',
-      },
-      {
-        id: 'actions',
-        target: '[data-tour-step-id="action-button"]',
-        title: 'Quick Actions',
-        content: 'Click here to perform quick actions.',
-        position: 'left',
-      },
-    ],
-  },
-  {
-    id: 'cards',
-    defaults: {
-      spotlightPadding: 12,
-    },
-    steps: [
-      {
-        id: 'step-1',
-        target: '[data-tour-step-id="card-1"]',
-        title: 'First Card',
-        content: 'This card shows important information.',
-        position: 'bottom',
-      },
-      {
-        id: 'step-2',
-        target: '[data-tour-step-id="card-2"]',
-        title: 'Second Card',
-        content: 'Another important card with different data.',
-        position: 'bottom',
-      },
-      {
-        id: 'step-3',
-        target: '[data-tour-step-id="card-3"]',
-        title: 'Third Card',
-        content: 'The last card in this row.',
-        position: 'bottom',
-        nextLabel: 'Complete Tour',
-      },
-    ],
-  },
-];
-
-// Demo component with tour targets
-function DemoLayout() {
-  const { start, isActive, currentStepIndex, totalSteps } = useTour();
-
-  return (
-    <div className="min-h-[500px] rounded-lg bg-muted/30 p-4">
-      {/* Header */}
-      <header
-        data-tour-step-id="header"
-        className="mb-4 rounded-lg bg-primary p-4 text-primary-foreground"
-      >
-        <div className="flex items-center justify-between">
-          <h1 className="text-xl font-bold">Tour Demo</h1>
-          <div className="flex gap-2">
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => start('basic')}
-              disabled={isActive}
-            >
-              Basic Tour
-            </Button>
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => start('cards')}
-              disabled={isActive}
-            >
-              Cards Tour
-            </Button>
-          </div>
-        </div>
-      </header>
-
-      <div className="flex gap-4">
-        {/* Sidebar */}
-        <aside
-          data-tour-step-id="sidebar"
-          className="w-48 rounded-lg bg-card p-4 shadow"
-        >
-          <nav className="space-y-2">
-            <div className="rounded bg-muted p-2 text-sm">Dashboard</div>
-            <div className="rounded p-2 text-sm hover:bg-muted">Settings</div>
-            <div className="rounded p-2 text-sm hover:bg-muted">Profile</div>
-            <div className="rounded p-2 text-sm hover:bg-muted">Help</div>
-          </nav>
-        </aside>
-
-        {/* Main content */}
-        <main className="flex-1 space-y-4">
-          <div
-            data-tour-step-id="main-content"
-            className="rounded-lg bg-card p-6 shadow"
-          >
-            <h2 className="mb-4 text-lg font-semibold">Main Content</h2>
-            <p className="text-muted-foreground">
-              This is the main content area.
-              {isActive && (
-                <span className="ml-2 text-primary">
-                  (Step {currentStepIndex + 1} of {totalSteps})
-                </span>
-              )}
-            </p>
-
-            <Button data-tour-step-id="action-button" className="mt-4">
-              Quick Action
-            </Button>
-          </div>
-
-          {/* Cards row */}
-          <div className="grid grid-cols-3 gap-4">
-            <Card data-tour-step-id="card-1">
-              <CardHeader>
-                <CardTitle className="text-base">Card 1</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-sm text-muted-foreground">First card content.</p>
-              </CardContent>
-            </Card>
-
-            <Card data-tour-step-id="card-2">
-              <CardHeader>
-                <CardTitle className="text-base">Card 2</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-sm text-muted-foreground">Second card content.</p>
-              </CardContent>
-            </Card>
-
-            <Card data-tour-step-id="card-3">
-              <CardHeader>
-                <CardTitle className="text-base">Card 3</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <p className="text-sm text-muted-foreground">Third card content.</p>
-              </CardContent>
-            </Card>
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-}
-
-export const Interactive = () => {
-  const [progressVariant] = useSelect('progressVariant', {
-    options: ['dots', 'bar', 'fraction', 'none'] as const,
-    defaultValue: 'dots',
-    label: 'Progress Variant',
-  });
-
-  return (
-    <Tour
-      tours={demoTours}
-      progressVariant={progressVariant}
-      onStart={(id) => console.log('Tour started:', id)}
-      onComplete={(id) => console.log('Tour completed:', id)}
-      onSkip={(id, step) => console.log('Tour skipped:', id, 'at step', step)}
-      onStepChange={(index, step, direction) =>
-        console.log('Step:', index, step.id, direction)
-      }
-    >
-      <DemoLayout />
-    </Tour>
-  );
-};
-
-export const WithProgressBar = () => (
-  <Tour tours={demoTours} progressVariant="bar">
-    <DemoLayout />
-  </Tour>
-);
-
-export const WithFraction = () => (
-  <Tour tours={demoTours} progressVariant="fraction">
-    <DemoLayout />
-  </Tour>
-);
-
-export const NoSpotlight = () => (
-  <Tour tours={demoTours} spotlight={false}>
-    <DemoLayout />
-  </Tour>
-);
-
-export const CloseOnOverlayClick = () => (
-  <Tour tours={demoTours} closeOnOverlayClick>
-    <DemoLayout />
-  </Tour>
-);
-
-export const NoSkipButton = () => (
-  <Tour tours={demoTours} showSkipButton={false}>
-    <DemoLayout />
-  </Tour>
-);
-
-export const WithArrow = () => (
-  <Tour tours={demoTours} showArrow>
-    <DemoLayout />
-  </Tour>
-);
-
-export const WithBlur = () => (
-  <Tour tours={demoTours} spotlightBlur={4} spotlightOpacity={0.3}>
-    <DemoLayout />
-  </Tour>
-);
-
-export const WithArrowAndBlur = () => (
-  <Tour tours={demoTours} showArrow spotlightBlur={3} spotlightOpacity={0.4}>
-    <DemoLayout />
-  </Tour>
-);
-
-export const WithPulseRing = () => (
-  <Tour tours={demoTours} pulseRing>
-    <DemoLayout />
-  </Tour>
-);
-
-export const NoAnimation = () => (
-  <Tour tours={demoTours} animated={false}>
-    <DemoLayout />
-  </Tour>
-);
-
-export const FullFeatured = () => (
-  <Tour
-    tours={demoTours}
-    showArrow
-    spotlightBlur={2}
-    spotlightOpacity={0.4}
-    pulseRing
-  >
-    <DemoLayout />
-  </Tour>
-);