@djangocfg/ui-tools 2.1.382 → 2.1.383

package/src/tools/Chat/stories/shared/messages.ts

@@ -1,39 +0,0 @@
-import type { ChatMessage } from '../../types';
-
-/** Compact transcript that exercises every bubble state for visual review. */
-export const BUBBLE_GALLERY: ChatMessage[] = [
-  {
-    id: 'u-1',
-    role: 'user',
-    content: 'How do I add a new persona?',
-    createdAt: Date.now() - 5 * 60_000,
-  },
-  {
-    id: 'a-1',
-    role: 'assistant',
-    content:
-      'Set `config.assistant = { name, avatarUrl }`. You can also override per message via `message.sender`.\n\nMore info: [docs](https://example.com/docs/personas).',
-    createdAt: Date.now() - 4 * 60_000,
-  },
-  {
-    id: 'u-2',
-    role: 'user',
-    content: 'And errors? What if the turn fails?',
-    createdAt: Date.now() - 3 * 60_000,
-  },
-  {
-    id: 'a-err',
-    role: 'assistant',
-    content: 'Network blew up — try again in a moment.',
-    isError: true,
-    createdAt: Date.now() - 2 * 60_000,
-  },
-  {
-    id: 'a-streaming',
-    role: 'assistant',
-    content: 'Live reply tokens arrive here',
-    isStreaming: true,
-    createdAt: Date.now() - 60_000,
-    toolActivity: 'Searching knowledge base…',
-  },
-];

package/src/tools/Chat/stories/shared/personas.ts

@@ -1,13 +0,0 @@
-import type { ChatAssistantContext, ChatUserContext } from '../../types';
-
-export const USER_ANNA: ChatUserContext = {
-  name: 'Anna',
-  email: 'anna@example.com',
-  avatarUrl: 'https://i.pravatar.cc/64?img=5',
-};
-
-export const ASSISTANT_AURA: ChatAssistantContext = {
-  name: 'Aura',
-  avatarUrl: 'https://i.pravatar.cc/64?img=11',
-  model: 'gpt-4o',
-};

package/src/tools/Chat/stories/shared/seeds.ts

@@ -1,92 +0,0 @@
-import type { ChatMessage, ChatToolCall } from '../../types';
-
-const now = Date.now();
-
-/** Two-turn transcript exercising markdown + plain reply. Used in Basic stories. */
-export const SEED_BASIC: ChatMessage[] = [
-  {
-    id: 'seed-u-1',
-    role: 'user',
-    content: 'Give me a markdown sample with a list and a code snippet.',
-    createdAt: now - 4 * 60_000,
-  },
-  {
-    id: 'seed-a-1',
-    role: 'assistant',
-    content:
-      '**Sure!** Here is a list:\n\n- alpha\n- beta\n- gamma\n\nAnd a snippet:\n\n```ts\nconst answer = 42;\n```',
-    createdAt: now - 3 * 60_000,
-  },
-  {
-    id: 'seed-u-2',
-    role: 'user',
-    content: 'How does streaming work?',
-    createdAt: now - 2 * 60_000,
-  },
-  {
-    id: 'seed-a-2',
-    role: 'assistant',
-    content:
-      'Each token arrives separately over SSE. The UI sticks to the bottom while the stream is in flight and shows a streaming indicator until `message_end` fires.',
-    createdAt: now - 60_000,
-  },
-];
-
-/** A completed tool-call so the panel is visible without sending anything. */
-const SEED_TOOL_CALL: ChatToolCall = {
-  id: 'tc-seed-1',
-  name: 'search_docs',
-  input: { query: 'streaming protocol' },
-  output: { hits: 3, top: 'streaming.md' },
-  status: 'success',
-  startedAt: now - 90_000,
-  endedAt: now - 89_000,
-};
-
-export const SEED_TOOL_CALLS: ChatMessage[] = [
-  {
-    id: 'seed-u-tool',
-    role: 'user',
-    content: 'Find docs about streaming.',
-    createdAt: now - 2 * 60_000,
-  },
-  {
-    id: 'seed-a-tool',
-    role: 'assistant',
-    content: 'Let me check the docs for you.\n\nFound 3 relevant chunks. Here is a summary…',
-    createdAt: now - 60_000,
-    toolCalls: [SEED_TOOL_CALL],
-  },
-];
-
-/** Tool-call with a richer JSON payload — drives the JsonTree dispatcher story. */
-const SEED_JSON_TOOL_CALL: ChatToolCall = {
-  id: 'tc-seed-json',
-  name: 'fetch_user',
-  input: { id: 'usr_42', fields: ['email', 'roles', 'metadata'] },
-  output: {
-    id: 'usr_42',
-    email: 'mark@example.com',
-    roles: ['admin', 'editor'],
-    metadata: { plan: 'pro', seats: 5, trial: false },
-  },
-  status: 'success',
-  startedAt: now - 90_000,
-  endedAt: now - 89_000,
-};
-
-export const SEED_JSON_PAYLOAD: ChatMessage[] = [
-  {
-    id: 'seed-u-json',
-    role: 'user',
-    content: 'Fetch user 42.',
-    createdAt: now - 2 * 60_000,
-  },
-  {
-    id: 'seed-a-json',
-    role: 'assistant',
-    content: 'Open the tool panel to inspect the payload.',
-    createdAt: now - 60_000,
-    toolCalls: [SEED_JSON_TOOL_CALL],
-  },
-];

package/src/tools/Chat/stories/shared/transports.ts

@@ -1,36 +0,0 @@
-import { createMockTransport } from '../../core/transport/mock';
-import type { ChatMessage, ChatStreamEvent } from '../../types';
-
-/** Scripted-replies transport. Pass `seed` to pre-populate the bubble area. */
-export function makeBasicTransport(seed: ChatMessage[] = []) {
-  return createMockTransport({
-    initialMessages: seed,
-    replies: [
-      'Hello! I am a mock assistant. Ask me anything — I will reply with scripted text.',
-      '**Sure!** Here is a list:\n\n- alpha\n- beta\n- gamma\n\nAnd a snippet:\n\n```ts\nconst answer = 42;\n```',
-      'Streaming chunked text works too. Each token arrives separately and the UI sticks to the bottom while the stream is in flight.',
-    ],
-    latencyMs: 35,
-  });
-}
-
-/** Transport with an inline tool_call + result on send. Seedable. */
-export function makeToolCallsTransport(seed: ChatMessage[] = []) {
-  const toolTurn: ChatStreamEvent[] = [
-    { type: 'chunk', delta: 'Let me check the docs for you.\n\n' },
-    {
-      type: 'tool_call_start',
-      toolId: 'search-live',
-      name: 'search_docs',
-      input: { query: 'streaming protocol' },
-    },
-    {
-      type: 'tool_call_end',
-      toolId: 'search-live',
-      status: 'success',
-      output: { hits: 3, top: 'streaming.md' },
-    },
-    { type: 'chunk', delta: 'Found 3 relevant chunks. Here is a summary…' },
-  ];
-  return createMockTransport({ initialMessages: seed, replies: [toolTurn], latencyMs: 25 });
-}

package/src/tools/CodeEditor/CodeEditor.story.tsx

@@ -1,202 +0,0 @@
-import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import { Editor, DiffEditor } from './components';
-
-export default defineStory({
-  title: 'Tools/Code Editor',
-  component: Editor,
-  description: 'Monaco-based code editor with syntax highlighting, diff view, and full IDE features.',
-});
-
-const SAMPLE_CODE = {
-  typescript: `import { useState, useCallback, useMemo } from 'react';
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  role: 'admin' | 'user' | 'viewer';
-}
-
-export function useUsers() {
-  const [users, setUsers] = useState<User[]>([]);
-
-  const addUser = useCallback((user: Omit<User, 'id'>) => {
-    setUsers(prev => [...prev, { ...user, id: crypto.randomUUID() }]);
-  }, []);
-
-  const admins = useMemo(
-    () => users.filter(u => u.role === 'admin'),
-    [users],
-  );
-
-  return { users, admins, addUser };
-}`,
-
-  python: `from __future__ import annotations
-
-from dataclasses import dataclass
-from datetime import datetime
-from typing import AsyncIterator
-
-import httpx
-from pydantic import BaseModel, Field
-
-
-class User(BaseModel):
-    id: str
-    name: str
-    email: str
-    role: str = "user"
-    created_at: datetime = Field(default_factory=datetime.utcnow)
-
-
-@dataclass
-class UserService:
-    base_url: str
-    client: httpx.AsyncClient | None = None
-
-    async def list_users(self, page: int = 1) -> list[User]:
-        async with httpx.AsyncClient(base_url=self.base_url) as client:
-            response = await client.get("/users", params={"page": page})
-            response.raise_for_status()
-            return [User(**u) for u in response.json()["data"]]`,
-
-  json: `{
-  "name": "@djangocfg/ui-tools",
-  "version": "2.1.0",
-  "description": "Heavy React tools with lazy loading",
-  "dependencies": {
-    "monaco-editor": "^0.55.1",
-    "react": "^19.1.0"
-  },
-  "exports": {
-    ".": "./src/index.ts",
-    "./code-editor": "./src/tools/CodeEditor/index.ts"
-  }
-}`,
-
-  css: `/* Design tokens */
-:root {
-  --radius: 0.5rem;
-  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-}
-
-.editor-container {
-  position: relative;
-  border-radius: var(--radius);
-  border: 1px solid hsl(var(--border));
-  overflow: hidden;
-
-  &:focus-within {
-    outline: 2px solid hsl(var(--ring));
-    outline-offset: 2px;
-  }
-}`,
-};
-
-const DIFF_ORIGINAL = `function greet(name: string) {
-  console.log("Hello, " + name);
-}
-
-greet("World");`;
-
-const DIFF_MODIFIED = `function greet(name: string, greeting = "Hello") {
-  console.log(\`\${greeting}, \${name}!\`);
-}
-
-function farewell(name: string) {
-  console.log(\`Goodbye, \${name}!\`);
-}
-
-greet("World");
-farewell("World");`;
-
-export const Interactive = () => {
-  const [language] = useSelect('language', {
-    options: ['typescript', 'python', 'json', 'css'] as const,
-    defaultValue: 'typescript',
-    label: 'Language',
-  });
-
-  const [readOnly] = useBoolean('readOnly', {
-    defaultValue: false,
-    label: 'Read Only',
-  });
-
-  const [minimap] = useBoolean('minimap', {
-    defaultValue: false,
-    label: 'Minimap',
-  });
-
-  const [autoHeight] = useBoolean('autoHeight', {
-    defaultValue: false,
-    label: 'Auto Height',
-    description: 'Resize editor to fit content',
-  });
-
-  return autoHeight ? (
-    <Editor
-      value={SAMPLE_CODE[language]}
-      language={language}
-      autoHeight
-      minHeight={100}
-      maxHeight={500}
-      options={{ readOnly, minimap, fontSize: 14 }}
-    />
-  ) : (
-    <div style={{ height: 400 }}>
-      <Editor
-        value={SAMPLE_CODE[language]}
-        language={language}
-        options={{ readOnly, minimap, fontSize: 14 }}
-      />
-    </div>
-  );
-};
-
-export const TypeScript = () => (
-  <div style={{ height: 350 }}>
-    <Editor value={SAMPLE_CODE.typescript} language="typescript" />
-  </div>
-);
-
-export const Python = () => (
-  <div style={{ height: 350 }}>
-    <Editor value={SAMPLE_CODE.python} language="python" />
-  </div>
-);
-
-export const ReadOnly = () => (
-  <div style={{ height: 300 }}>
-    <Editor
-      value={SAMPLE_CODE.json}
-      language="json"
-      options={{ readOnly: true, lineNumbers: 'on' }}
-    />
-  </div>
-);
-
-export const AutoHeight = () => (
-  <div className="flex flex-col gap-4 max-w-3xl">
-    <p className="text-sm text-muted-foreground">
-      Editor grows with content (min 100px, max 400px). Try typing new lines.
-    </p>
-    <Editor
-      value={`const x = 1;\nconst y = 2;\nconst z = x + y;`}
-      language="typescript"
-      autoHeight
-      minHeight={100}
-      maxHeight={400}
-    />
-  </div>
-);
-
-export const DiffView = () => (
-  <div style={{ height: 400 }}>
-    <DiffEditor
-      original={DIFF_ORIGINAL}
-      modified={DIFF_MODIFIED}
-      language="typescript"
-    />
-  </div>
-);

package/src/tools/CronScheduler/CronScheduler.story.tsx

@@ -1,300 +0,0 @@
-import { useState } from 'react';
-import { defineStory, useBoolean, useSelect } from '@djangocfg/playground';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@djangocfg/ui-core/components';
-import { CronScheduler } from './index';
-
-export default defineStory({
-  title: 'Tools/Cron Scheduler',
-  component: CronScheduler,
-  description: 'Compact cron expression builder with Apple HIG-style UI.',
-});
-
-export const Interactive = () => {
-  const [cron, setCron] = useState('0 9 * * 1-5');
-
-  const [defaultType] = useSelect('defaultType', {
-    options: ['daily', 'weekly', 'monthly', 'custom'] as const,
-    defaultValue: 'weekly',
-    label: 'Default Type',
-    description: 'Initial schedule type',
-  });
-
-  const [showPreview] = useBoolean('showPreview', {
-    defaultValue: true,
-    label: 'Show Preview',
-    description: 'Show human-readable preview',
-  });
-
-  const [showCronExpression] = useBoolean('showCronExpression', {
-    defaultValue: true,
-    label: 'Show Cron Expression',
-    description: 'Show raw cron expression in preview',
-  });
-
-  const [allowCopy] = useBoolean('allowCopy', {
-    defaultValue: true,
-    label: 'Allow Copy',
-    description: 'Enable copy to clipboard',
-  });
-
-  const [timeFormat] = useSelect('timeFormat', {
-    options: ['24h', '12h'] as const,
-    defaultValue: '24h',
-    label: 'Time Format',
-    description: 'Time display format',
-  });
-
-  const [disabled] = useBoolean('disabled', {
-    defaultValue: false,
-    label: 'Disabled',
-    description: 'Disable all interactions',
-  });
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        defaultType={defaultType}
-        showPreview={showPreview}
-        showCronExpression={showCronExpression}
-        allowCopy={allowCopy}
-        timeFormat={timeFormat}
-        disabled={disabled}
-      />
-    </div>
-  );
-};
-
-export const Daily = () => {
-  const [cron, setCron] = useState('0 9 * * *');
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        defaultType="daily"
-        showPreview
-      />
-    </div>
-  );
-};
-
-export const Weekly = () => {
-  const [cron, setCron] = useState('30 14 * * 1,3,5');
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        defaultType="weekly"
-        showPreview
-      />
-    </div>
-  );
-};
-
-export const Monthly = () => {
-  const [cron, setCron] = useState('0 9 1,15 * *');
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        defaultType="monthly"
-        showPreview
-      />
-    </div>
-  );
-};
-
-export const Custom = () => {
-  const [cron, setCron] = useState('*/15 9-17 * * 1-5');
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        defaultType="custom"
-        showPreview
-        showCronExpression
-      />
-    </div>
-  );
-};
-
-export const WithCronExpression = () => {
-  const [cron, setCron] = useState('0 9 * * 1-5');
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        showPreview
-        showCronExpression
-        allowCopy
-      />
-    </div>
-  );
-};
-
-export const TwelveHourFormat = () => {
-  const [cron, setCron] = useState('0 14 * * *');
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        showPreview
-        timeFormat="12h"
-      />
-    </div>
-  );
-};
-
-export const Disabled = () => (
-  <div className="w-[400px]">
-    <CronScheduler
-      value="0 9 * * 1-5"
-      showPreview
-      disabled
-    />
-  </div>
-);
-
-export const Compact = () => {
-  const [cron, setCron] = useState('0 9 * * 1-5');
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        defaultType="weekly"
-        showPreview={false}
-      />
-    </div>
-  );
-};
-
-export const Controlled = () => {
-  const [cron, setCron] = useState('0 9 * * *');
-
-  const presets = [
-    { label: 'Every day at 9am', value: '0 9 * * *' },
-    { label: 'Weekdays at 6pm', value: '0 18 * * 1-5' },
-    { label: 'Every Monday', value: '0 0 * * 1' },
-    { label: '1st of month', value: '0 0 1 * *' },
-  ];
-
-  return (
-    <div className="w-[400px] space-y-4">
-      <div className="flex flex-wrap gap-2">
-        {presets.map(({ label, value }) => (
-          <button
-            key={value}
-            onClick={() => setCron(value)}
-            className={`px-2 py-1 text-xs rounded-md transition-colors ${
-              cron === value
-                ? 'bg-primary text-primary-foreground'
-                : 'bg-muted hover:bg-muted/80'
-            }`}
-          >
-            {label}
-          </button>
-        ))}
-      </div>
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        showPreview
-        allowCopy
-      />
-    </div>
-  );
-};
-
-export const InDialog = () => {
-  const [cron, setCron] = useState('0 9 * * 1-5');
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div className="p-4">
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger asChild>
-          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md">
-            Open Schedule Dialog
-          </button>
-        </DialogTrigger>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>Create Schedule</DialogTitle>
-            <DialogDescription>
-              Configure a cron schedule for automated execution
-            </DialogDescription>
-          </DialogHeader>
-          <div className="py-4">
-            <CronScheduler
-              value={cron}
-              onChange={setCron}
-              showPreview
-              showCronExpression
-              allowCopy
-            />
-          </div>
-        </DialogContent>
-      </Dialog>
-      <div className="mt-4 text-sm text-muted-foreground">
-        Current cron: <code className="bg-muted px-1 rounded">{cron}</code>
-      </div>
-    </div>
-  );
-};
-
-export const InDialogMonthly = () => {
-  const [cron, setCron] = useState('0 9 1,15 * *');
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div className="p-4">
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger asChild>
-          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md">
-            Open Monthly Schedule
-          </button>
-        </DialogTrigger>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>Monthly Schedule</DialogTitle>
-            <DialogDescription>
-              Test monthly calendar grid inside dialog
-            </DialogDescription>
-          </DialogHeader>
-          <div className="py-4">
-            <CronScheduler
-              value={cron}
-              onChange={setCron}
-              defaultType="monthly"
-              showPreview
-              showCronExpression
-              allowCopy
-            />
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-};