@djangocfg/ui-tools 2.1.382 → 2.1.384

package/src/tools/SpeechRecognition/stories/09-chat-voice.story.tsx

@@ -1,90 +0,0 @@
-import { useMemo } from 'react';
-
-import { defineStory } from '@djangocfg/playground';
-
-import { Composer } from '../../Chat/components/Composer';
-import { EmptyState } from '../../Chat/components/EmptyState';
-import { MessageList } from '../../Chat/components/MessageList';
-import { ChatProvider, useChatContext } from '../../Chat/context';
-import { useChatComposer } from '../../Chat/hooks/useChatComposer';
-import { ChatHeader } from '../../Chat/launcher/ChatHeader';
-import { ChatHeaderLanguageButton } from '../../Chat/launcher/ChatHeaderLanguageButton';
-import { SEED_BASIC, makeBasicTransport } from '../../Chat/stories/shared';
-import { Frame as ChatFrame } from '../../Chat/stories/shared/Frame';
-import { VoiceComposerSlot } from '../widgets/VoiceComposerSlot';
-import type { RecognitionEngine } from '../types';
-import { createMockEngine } from './shared';
-
-export default defineStory({
-  title: 'Tools/Chat/Voice composer',
-  component: VoiceComposerSlot,
-  description:
-    'Live dictation slot wired into the Chat composer. `InsideComposer` uses the real browser Web Speech API + a kebab settings menu in the header for picking the speech-recognition language (persists in `useSpeechPrefs`). `MockedDemo` uses a deterministic mock engine so screenshots / CI never prompt for microphone access. The slot auto-hides on Firefox / in-app browsers / missing getUserMedia.',
-});
-
-function VoiceChat({ engine }: { engine?: RecognitionEngine }) {
-  const chat = useChatContext();
-  const composer = useChatComposer({
-    onSubmit: (content, attachments) => chat.sendMessage(content, attachments),
-    disabled: chat.isStreaming,
-  });
-
-  return (
-    <div className="flex h-full min-h-0 flex-col">
-      <ChatHeader
-        title="Assistant"
-        actions={<ChatHeaderLanguageButton />}
-      />
-      <MessageList
-        renderEmpty={() => (
-          <EmptyState greeting="Open the settings menu (⋯) to pick the speech language, then press the mic." />
-        )}
-      />
-      <Composer
-        composer={composer}
-        placeholder="Type or press the mic…"
-        toolbarEnd={
-          <VoiceComposerSlot
-            value={composer.value}
-            onChange={composer.setValue}
-            engine={engine}
-          />
-        }
-      />
-    </div>
-  );
-}
-
-/**
- * Real browser Web Speech API + kebab settings menu with the language
- * picker. The choice persists in `useSpeechPrefs` (localStorage), so it
- * survives reloads. Defaults are resolved in order: prop → prefs → i18n
- * → `navigator.language` → `en-US`.
- */
-export const InsideComposer = () => {
-  const transport = useMemo(() => makeBasicTransport(SEED_BASIC), []);
-  return (
-    <ChatFrame>
-      <ChatProvider transport={transport}>
-        <VoiceChat />
-      </ChatProvider>
-    </ChatFrame>
-  );
-};
-
-/**
- * Deterministic mock engine — types a scripted phrase into the composer
- * without touching the microphone. Useful for screenshots, CI, and
- * environments where granting mic permission is not desired.
- */
-export const MockedDemo = () => {
-  const transport = useMemo(() => makeBasicTransport(SEED_BASIC), []);
-  const engine = useMemo(() => createMockEngine({ partialIntervalMs: 90 }), []);
-  return (
-    <ChatFrame>
-      <ChatProvider transport={transport}>
-        <VoiceChat engine={engine} />
-      </ChatProvider>
-    </ChatFrame>
-  );
-};

package/src/tools/SpeechRecognition/stories/shared.tsx

@@ -1,123 +0,0 @@
-/**
- * Deterministic mock engine — emits scripted partials/finals on a timer
- * so stories render the same thing every load and don't beg the browser
- * for microphone permission.
- */
-
-import { createEngineBus } from '../core/engine';
-import { newSegmentId } from '../core/ids';
-import type {
-  EngineStartOptions,
-  RecognitionEngine,
-  Unsub,
-} from '../types';
-
-export interface MockEngineOptions {
-  /** Final phrases the mock will emit, one after another. */
-  phrases?: string[];
-  /** ms between partial chunks. Default 120. */
-  partialIntervalMs?: number;
-  /** ms between final segments. Default 1500. */
-  finalIntervalMs?: number;
-  /** Override id (default `'mock'`). */
-  id?: string;
-}
-
-const DEFAULT_PHRASES = [
-  'Hello and welcome to the dictation demo.',
-  'This text is being typed by the mock engine.',
-  'Try the buttons on the right to control the session.',
-];
-
-export function createMockEngine(
-  opts: MockEngineOptions = {},
-): RecognitionEngine {
-  const bus = createEngineBus();
-  const phrases = opts.phrases ?? DEFAULT_PHRASES;
-  const partialMs = opts.partialIntervalMs ?? 120;
-  const finalMs = opts.finalIntervalMs ?? 1500;
-
-  let timers: ReturnType<typeof setTimeout>[] = [];
-  let running = false;
-
-  function clearTimers(): void {
-    timers.forEach(clearTimeout);
-    timers = [];
-  }
-
-  function run(): void {
-    let phraseIdx = 0;
-    let charIdx = 0;
-    let segmentId = newSegmentId();
-    let baseTime = 0;
-
-    const tick = (): void => {
-      if (!running) return;
-      const phrase = phrases[phraseIdx % phrases.length];
-      charIdx = Math.min(charIdx + 2, phrase.length);
-      bus.emit('partial', phrase.slice(0, charIdx), segmentId);
-      if (charIdx >= phrase.length) {
-        const tFinal = setTimeout(() => {
-          if (!running) return;
-          bus.emit('final', phrase, segmentId);
-          phraseIdx += 1;
-          charIdx = 0;
-          segmentId = newSegmentId();
-          baseTime += finalMs;
-          const tNext = setTimeout(tick, partialMs);
-          timers.push(tNext);
-        }, finalMs - partialMs);
-        timers.push(tFinal);
-        return;
-      }
-      const tNext = setTimeout(tick, partialMs);
-      timers.push(tNext);
-    };
-    tick();
-  }
-
-  return {
-    id: opts.id ?? 'mock',
-    isSupported: true,
-    on(event, cb): Unsub {
-      return bus.on(event, cb);
-    },
-    async start(_opts: EngineStartOptions): Promise<void> {
-      if (running) return;
-      running = true;
-      bus.emit('state', 'listening');
-      run();
-    },
-    async stop(): Promise<void> {
-      running = false;
-      clearTimers();
-      bus.emit('state', 'closed');
-    },
-    abort(): void {
-      running = false;
-      clearTimers();
-      bus.emit('state', 'closed');
-    },
-  };
-}
-
-import type { ReactNode } from 'react';
-
-export function Frame({
-  children,
-  w = 480,
-  h = 'auto' as number | string,
-}: {
-  children: ReactNode;
-  w?: number | string;
-  h?: number | string;
-}) {
-  return (
-    <div
-      className="rounded-lg border border-border bg-background p-4 shadow-sm"
-      style={{ width: w, height: h }}
-    >
-      {children}
-    </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>
-);