@djangocfg/ui-tools 2.1.382 → 2.1.383

package/src/tools/MarkdownEditor/MarkdownEditor.story.tsx

@@ -1,225 +0,0 @@
-import { defineStory } from '@djangocfg/playground';
-import { MarkdownEditor } from './MarkdownEditor';
-import { mentionPresets } from './mentionPresets';
-import { useState, type ReactNode } from 'react';
-import type { MentionConfig, MentionMarkdownRenderer } from './types';
-
-export default defineStory({
-  title: 'Tools/Markdown Editor',
-  component: MarkdownEditor,
-  description: 'WYSIWYG markdown editor with Tiptap. Supports headings, lists, mentions, and more.',
-});
-
-const SAMPLE_MARKDOWN = `# Character Bio
-
-**Type:** Maltipoo (apricot coat)
-**Age:** 3 years
-
-## Visual Design
-
-Medium-small Maltipoo, compact and agile.
-
-- Sharp, intelligent eyes (dark brown)
-- Simple collar (hides micro-gear)
-- Expressions shift quickly
-
-## Personality
-
-> Pixar Note: Her face must carry duality.
-
-1. Emotionally guarded
-2. Independent and decisive
-3. Dry sense of humor
-`;
-
-const MENTION_ITEMS: MentionConfig = {
-  items: [
-    { id: '1', label: 'Alice', description: 'Protagonist', thumbnail: 'https://i.pravatar.cc/48?u=alice' },
-    { id: '2', label: 'Bob', description: 'Antagonist', thumbnail: 'https://i.pravatar.cc/48?u=bob' },
-    { id: '3', label: 'Charlie', description: 'Side character', thumbnail: 'https://i.pravatar.cc/48?u=charlie' },
-    { id: '4', label: 'Diana', description: 'Narrator' },
-    { id: '5', label: 'Eve', description: 'Mystery character' },
-  ],
-};
-
-export function Default() {
-  const [value, setValue] = useState(SAMPLE_MARKDOWN);
-  return (
-    <div style={{ maxWidth: 700 }}>
-      <MarkdownEditor value={value} onChange={setValue} />
-      <RawPreview value={value} />
-    </div>
-  );
-}
-
-export function WithMentions() {
-  const [value, setValue] = useState('Hello @Alice! This scene features @Bob too.\n\nType @ to mention characters.');
-  const [ids, setIds] = useState<string[]>([]);
-
-  return (
-    <div style={{ maxWidth: 700 }}>
-      <MarkdownEditor
-        value={value}
-        onChange={setValue}
-        mentions={MENTION_ITEMS}
-        onMentionIdsChange={setIds}
-        placeholder="Describe the scene... Use @ to mention characters"
-      />
-      {ids.length > 0 && (
-        <div style={{ marginTop: 8, fontSize: 12, opacity: 0.6 }}>
-          Mentioned IDs: {ids.join(', ')}
-        </div>
-      )}
-      <RawPreview value={value} />
-    </div>
-  );
-}
-
-export function Empty() {
-  const [value, setValue] = useState('');
-  return (
-    <div style={{ maxWidth: 600 }}>
-      <MarkdownEditor value={value} onChange={setValue} placeholder="Start writing..." />
-    </div>
-  );
-}
-
-export function Disabled() {
-  return (
-    <div style={{ maxWidth: 600 }}>
-      <MarkdownEditor value="This editor is **read-only**." onChange={() => {}} disabled />
-    </div>
-  );
-}
-
-export function NoToolbar() {
-  const [value, setValue] = useState('Plain text without toolbar.\n\nStill supports **markdown** shortcuts.');
-  return (
-    <div style={{ maxWidth: 600 }}>
-      <MarkdownEditor value={value} onChange={setValue} showToolbar={false} />
-    </div>
-  );
-}
-
-export function Compact() {
-  const [value, setValue] = useState('Short note');
-  return (
-    <div style={{ maxWidth: 400 }}>
-      <MarkdownEditor value={value} onChange={setValue} minHeight={60} placeholder="Quick note..." />
-    </div>
-  );
-}
-
-export function WithCustomUriPreset() {
-  const [value, setValue] = useState(
-    'Reference @Alice and @Bob — markdown will carry machine-readable URIs.\n\nType @ to add more.',
-  );
-
-  return (
-    <SerializationDemo
-      description={
-        <>
-          <code>mentionPresets.customUri('myapp', 'user')</code> — emits
-          <code>{' @[Label](myapp://user/id)'}</code>. Useful when downstream
-          parses the markdown back into deep-links while keeping the visible
-          <code>@</code> handle.
-        </>
-      }
-      value={value}
-      onChange={setValue}
-      renderMarkdown={mentionPresets.customUri('myapp', 'user')}
-    />
-  );
-}
-
-export function WithMarkdownLinkPreset() {
-  const [value, setValue] = useState('Ping @Alice when ready, cc @Charlie.');
-
-  return (
-    <SerializationDemo
-      description={
-        <>
-          <code>mentionPresets.markdownLink('https://example.com/u/')</code> —
-          serializes mentions as ordinary clickable links: <code>[@Label](https://example.com/u/id)</code>.
-        </>
-      }
-      value={value}
-      onChange={setValue}
-      renderMarkdown={mentionPresets.markdownLink('https://example.com/u/')}
-    />
-  );
-}
-
-export function WithCustomRenderer() {
-  const [value, setValue] = useState('Tag @Alice and @Bob to assign the task.');
-
-  // Hand-rolled serializer — any (attrs) => string works.
-  const renderMarkdown: MentionMarkdownRenderer = ({ id, label }) =>
-    `{{user:${id}|${label || 'unknown'}}}`;
-
-  return (
-    <SerializationDemo
-      description={
-        <>
-          Inline custom renderer: <code>{`({ id, label }) => \`{{user:\${id}|\${label}}}\``}</code>.
-          Shows that the serializer is just a function — you control the wire format.
-        </>
-      }
-      value={value}
-      onChange={setValue}
-      renderMarkdown={renderMarkdown}
-    />
-  );
-}
-
-interface SerializationDemoProps {
-  description: ReactNode;
-  value: string;
-  onChange: (v: string) => void;
-  renderMarkdown: MentionMarkdownRenderer;
-}
-
-function SerializationDemo({ description, value, onChange, renderMarkdown }: SerializationDemoProps) {
-  const mentions: MentionConfig = { ...MENTION_ITEMS, renderMarkdown };
-
-  return (
-    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, maxWidth: 900 }}>
-      <div>
-        <p style={{ fontSize: 12, opacity: 0.7, marginBottom: 8 }}>{description}</p>
-        <MarkdownEditor
-          value={value}
-          onChange={onChange}
-          mentions={mentions}
-          placeholder="Type @ to insert a mention..."
-        />
-      </div>
-      <div>
-        <div style={{ fontSize: 11, opacity: 0.5, marginBottom: 4, textTransform: 'uppercase', letterSpacing: 0.5 }}>
-          Serialized markdown
-        </div>
-        <pre
-          style={{
-            fontSize: 12,
-            padding: 12,
-            background: 'rgba(127,127,127,0.08)',
-            borderRadius: 6,
-            whiteSpace: 'pre-wrap',
-            wordBreak: 'break-word',
-            margin: 0,
-          }}
-        >
-          {value || '(empty)'}
-        </pre>
-      </div>
-    </div>
-  );
-}
-
-function RawPreview({ value }: { value: string }) {
-  return (
-    <details style={{ marginTop: 16 }}>
-      <summary style={{ cursor: 'pointer', opacity: 0.5, fontSize: 12 }}>Raw markdown</summary>
-      <pre style={{ fontSize: 11, opacity: 0.6, whiteSpace: 'pre-wrap', marginTop: 8 }}>{value}</pre>
-    </details>
-  );
-}

package/src/tools/Mermaid/Mermaid.story.tsx

@@ -1,251 +0,0 @@
-import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import Mermaid, {
-  FlowDiagram,
-  SequenceDiagram,
-  JourneyDiagram,
-  useStylePresets,
-  useBoxColors,
-} from './index';
-
-export default defineStory({
-  title: 'Tools/Mermaid',
-  component: Mermaid,
-  description: 'Mermaid diagram renderer with declarative type-safe builders.',
-});
-
-// ============================================================================
-// Diagram Generators
-// ============================================================================
-
-function useFlowDiagram() {
-  type Nodes = 'start' | 'check' | 'success' | 'debug' | 'finish';
-  const flow = FlowDiagram<Nodes>({ direction: 'TB' });
-  const presets = useStylePresets();
-
-  flow.node('start').rect('Start');
-  flow.node('check').rhombus('Is it working?');
-  flow.node('success').rect('Great!');
-  flow.node('debug').rect('Debug');
-  flow.node('finish').stadium('End');
-
-  flow.edge('start').to('check').solid();
-  flow.edge('check').to('success').solid('Yes');
-  flow.edge('check').to('debug').solid('No');
-  flow.edge('debug').to('check').dotted();
-  flow.edge('success').to('finish').solid();
-
-  flow.style.define('success', presets.success);
-  flow.style.define('primary', presets.primary);
-  flow.style.apply('success', 'success', 'finish');
-  flow.style.apply('primary', 'start');
-
-  return flow.toString();
-}
-
-function useSequenceDiagram() {
-  const boxes = useBoxColors();
-
-  const { d, rect, alt, loop, blank, toString } = SequenceDiagram({
-    User: 'actor',
-    App: 'participant',
-    Auth: 'participant',
-    DB: 'participant',
-  }, { autoNumber: true });
-
-  rect(boxes.primary, () => {
-    d.User.sync.App.msg('Enter credentials');
-    d.App.sync.Auth.msg('Validate credentials');
-
-    alt('Valid credentials', () => {
-      d.Auth.sync.DB.msg('Get user profile');
-      d.DB.syncReply.Auth.msg('Profile data');
-      d.Auth.syncReply.App.msg('Auth token');
-      d.App.syncReply.User.msg('Welcome!');
-    }).else('Invalid credentials', () => {
-      d.Auth.syncReply.App.msg('Auth failed');
-      d.App.syncReply.User.msg('Error message');
-    });
-  });
-
-  blank();
-
-  loop('Every 15 minutes', () => {
-    d.App.async.Auth.msg('Refresh token');
-    d.Auth.asyncReply.App.msg('New token');
-  });
-
-  return toString();
-}
-
-function useJourneyDiagram() {
-  const journey = JourneyDiagram({ title: 'User Onboarding' });
-
-  journey.section('Discovery')
-    .task('Visit landing page', 5, 'User')
-    .task('Read features', 4, 'User');
-
-  journey.section('Sign Up')
-    .task('Click Sign Up', 5, 'User')
-    .task('Fill form', 2, 'User')
-    .task('Verify email', 4, ['User', 'System']);
-
-  journey.section('Onboarding')
-    .task('Complete profile', 3, 'User')
-    .task('Create first project', 5, 'User');
-
-  return journey.toString();
-}
-
-/**
- * Example using dynamic methods for runtime participant names
- * Useful when participants are not known at compile time
- */
-function useDynamicSequenceDiagram() {
-  const boxes = useBoxColors();
-
-  // Participants from dynamic data (e.g., from API)
-  const participants = ['Alice', 'Bob', 'Charlie'];
-  const participantsObj: Record<string, 'participant'> = {};
-  participants.forEach(p => { participantsObj[p] = 'participant'; });
-
-  const seq = SequenceDiagram(participantsObj, { autoNumber: true });
-
-  // Using dynamic methods - no type assertions needed
-  seq.rect(boxes.primary, () => {
-    seq.noteOver('Alice', 'Starting conversation');
-    seq.message('Alice', 'Bob', 'Hello Bob!');
-    seq.message('Bob', 'Alice', 'Hi Alice!', 'syncReply');
-  });
-
-  seq.blank();
-
-  seq.rect(boxes.success, () => {
-    seq.noteOverSpan('Alice', 'Charlie', 'Group discussion');
-    seq.message('Alice', 'Charlie', 'Hey Charlie!');
-    seq.message('Charlie', 'Bob', 'Bob, join us!');
-    seq.message('Bob', 'Charlie', 'On my way!', 'async');
-  });
-
-  return seq.toString();
-}
-
-function useArchitectureDiagram() {
-  type Nodes = 'client' | 'nginx' | 'api1' | 'api2' | 'db' | 'cache' | 'queue';
-  const flow = FlowDiagram<Nodes>({ direction: 'TB' });
-  const presets = useStylePresets();
-
-  flow.subgraph('Frontend', (sub) => {
-    sub.direction('LR');
-    sub.node('client').round('Browser');
-  });
-
-  flow.subgraph('Load Balancer', (sub) => {
-    sub.node('nginx').hexagon('Nginx');
-  });
-
-  flow.subgraph('API Servers', (sub) => {
-    sub.direction('LR');
-    sub.node('api1').rect('API Server 1');
-    sub.node('api2').rect('API Server 2');
-  });
-
-  flow.subgraph('Data Layer', (sub) => {
-    sub.direction('LR');
-    sub.node('db').cylinder('PostgreSQL');
-    sub.node('cache').cylinder('Redis');
-    sub.node('queue').cylinder('RabbitMQ');
-  });
-
-  flow.edge('client').to('nginx').solid();
-  flow.edge('nginx').to('api1').solid();
-  flow.edge('nginx').to('api2').solid();
-  flow.edge('api1').to('db').solid();
-  flow.edge('api2').to('db').solid();
-  flow.edge('api1').to('cache').dotted();
-  flow.edge('api2').to('cache').dotted();
-  flow.edge('api1').to('queue').dotted();
-
-  flow.style.define('frontend', presets.info);
-  flow.style.define('backend', presets.success);
-  flow.style.define('data', presets.warning);
-  flow.style.apply('frontend', 'client', 'nginx');
-  flow.style.apply('backend', 'api1', 'api2');
-  flow.style.apply('data', 'db', 'cache', 'queue');
-
-  return flow.toString();
-}
-
-// ============================================================================
-// Stories
-// ============================================================================
-
-export const Interactive = () => {
-  const [diagramType] = useSelect('diagramType', {
-    options: ['flow', 'sequence', 'sequenceDynamic', 'journey', 'architecture'] as const,
-    defaultValue: 'flow',
-    label: 'Diagram Type',
-  });
-
-  const [fullscreen] = useBoolean('fullscreen', {
-    defaultValue: false,
-    label: 'Enable Fullscreen',
-  });
-
-  const flowChart = useFlowDiagram();
-  const sequenceChart = useSequenceDiagram();
-  const sequenceDynamicChart = useDynamicSequenceDiagram();
-  const journeyChart = useJourneyDiagram();
-  const architectureChart = useArchitectureDiagram();
-
-  const charts = {
-    flow: flowChart,
-    sequence: sequenceChart,
-    sequenceDynamic: sequenceDynamicChart,
-    journey: journeyChart,
-    architecture: architectureChart,
-  };
-
-  const chart = charts[diagramType];
-
-  return (
-    <div className="space-y-4">
-      <Mermaid chart={chart} fullscreen={fullscreen} />
-      <details className="text-xs">
-        <summary className="cursor-pointer text-muted-foreground">Generated Mermaid code</summary>
-        <pre className="mt-2 p-3 bg-muted rounded overflow-auto">{chart}</pre>
-      </details>
-    </div>
-  );
-};
-
-export const Flow = () => {
-  const chart = useFlowDiagram();
-  return <Mermaid chart={chart} />;
-};
-
-export const Sequence = () => {
-  const chart = useSequenceDiagram();
-  return <Mermaid chart={chart} />;
-};
-
-export const Journey = () => {
-  const chart = useJourneyDiagram();
-  return <Mermaid chart={chart} />;
-};
-
-export const Architecture = () => {
-  const chart = useArchitectureDiagram();
-  return <Mermaid chart={chart} />;
-};
-
-export const WithFullscreen = () => {
-  const chart = useFlowDiagram();
-  return (
-    <div className="space-y-2">
-      <p className="text-sm text-muted-foreground">
-        Click the expand button to open fullscreen
-      </p>
-      <Mermaid chart={chart} fullscreen />
-    </div>
-  );
-};

package/src/tools/OpenapiViewer/OpenapiViewer.story.tsx

@@ -1,230 +0,0 @@
-import { defineStory, useSelect, useValue, useBoolean } from '@djangocfg/playground';
-import { Playground } from './index';
-import { LazyOpenapiViewer } from './lazy';
-import type { PlaygroundConfig } from './types';
-
-export default defineStory({
-  title: 'Tools/OpenapiViewer',
-  component: Playground,
-  description:
-    'Interactive OpenAPI schema viewer. Sidebar + docs longread with a slide-in two-column playground (Request + Response) when an endpoint is selected.',
-});
-
-// ============================================================================
-// Schema fixtures
-// ============================================================================
-
-// Petstore's own ``servers[0].url`` is just ``/api/v3`` (relative),
-// which makes code samples look like they target ``localhost`` when
-// viewed from the playground. Override with the canonical public host
-// so the generated curl/fetch/etc snippets are runnable as-is.
-const PETSTORE_SCHEMA = {
-  id: 'petstore',
-  name: 'Petstore API',
-  url: 'https://petstore3.swagger.io/api/v3/openapi.json',
-  baseUrl: 'https://petstore3.swagger.io/api/v3',
-} as const;
-
-const HTTPBIN_SCHEMA = {
-  id: 'httpbin',
-  name: 'HTTPBin API',
-  url: 'https://httpbin.org/spec.json',
-} as const;
-
-const MULTI_SCHEMAS = [PETSTORE_SCHEMA, HTTPBIN_SCHEMA] as const;
-
-// Simulates a real multi-group setup (like cmdop with 5+ API groups).
-// All clones share the canonical Petstore host so code samples
-// render with a real runnable URL.
-const PETSTORE_BASE = 'https://petstore3.swagger.io/api/v3';
-const MANY_SCHEMAS = [
-  PETSTORE_SCHEMA,
-  HTTPBIN_SCHEMA,
-  { id: 'machines', name: 'Machines API', url: 'https://petstore3.swagger.io/api/v3/openapi.json', baseUrl: PETSTORE_BASE },
-  { id: 'terminal', name: 'Terminal API', url: 'https://petstore3.swagger.io/api/v3/openapi.json', baseUrl: PETSTORE_BASE },
-  { id: 'skills', name: 'Skills API', url: 'https://petstore3.swagger.io/api/v3/openapi.json', baseUrl: PETSTORE_BASE },
-  { id: 'system', name: 'System API', url: 'https://petstore3.swagger.io/api/v3/openapi.json', baseUrl: PETSTORE_BASE },
-  { id: 'site', name: 'Site API', url: 'https://petstore3.swagger.io/api/v3/openapi.json', baseUrl: PETSTORE_BASE },
-] as const;
-
-// ============================================================================
-// Stories
-// ============================================================================
-
-/**
- * Default — single-schema mode with the most common configuration knobs
- * exposed as toggles. Replaces the earlier Interactive / SingleSchema /
- * WithBaseUrl / NoDefault / CustomUrl stories, which were all "this
- * component with different props" variations.
- */
-export const Default = () => {
-  const [schemaUrl] = useValue('schemaUrl', {
-    defaultValue: PETSTORE_SCHEMA.url,
-    label: 'Schema URL',
-    description: 'Any OpenAPI 3.x JSON endpoint',
-  });
-
-  const [baseUrl] = useValue('baseUrl', {
-    defaultValue: '',
-    label: 'Base URL override',
-    description: 'Empty = use servers[0].url from the schema',
-  });
-
-  const [autoSelect] = useBoolean('autoSelectDefault', {
-    defaultValue: true,
-    label: 'Auto-select default schema',
-    description: 'When off, tests the "no defaultSchemaId" code path',
-  });
-
-  const config: PlaygroundConfig = {
-    schemas: [{ id: 'custom', name: 'Schema', url: schemaUrl }],
-    defaultSchemaId: autoSelect ? 'custom' : undefined,
-    baseUrl: baseUrl || undefined,
-  };
-
-  return (
-    <div className="min-h-[600px]">
-      <Playground config={config} />
-    </div>
-  );
-};
-
-/**
- * MultiSchema — multiple schemas with the Combobox switcher. Count
- * is adjustable to exercise both the short-list layout and the
- * long-list behaviour (cmdop-style setups with 7+ APIs).
- */
-export const MultiSchema = () => {
-  const [count] = useSelect('count', {
-    options: ['2', '7'] as const,
-    defaultValue: '2',
-    label: 'Schema count',
-    description: '2 uses Petstore+HTTPBin; 7 stress-tests the Combobox',
-  });
-
-  const config: PlaygroundConfig = {
-    schemas: count === '2' ? [...MULTI_SCHEMAS] : [...MANY_SCHEMAS],
-    defaultSchemaId: 'petstore',
-  };
-
-  return (
-    <div className="min-h-[600px]">
-      <Playground config={config} />
-    </div>
-  );
-};
-
-/**
- * SectionsGrouping — alternate layout: every schema's endpoints get
- * rendered on the same page as top-level sections, with a sidebar
- * that stacks them. URL hash sync writes ``#<schemaId>/<anchor>``
- * as the user scrolls so deep-linking keeps working.
- */
-export const SectionsGrouping = () => {
-  const [urlSync] = useBoolean('urlSync', {
-    defaultValue: true,
-    label: 'URL hash sync',
-    description: 'Writes #<schemaId>/<anchor> as you scroll',
-  });
-
-  const config: PlaygroundConfig = {
-    schemas: [...MULTI_SCHEMAS],
-    defaultSchemaId: 'petstore',
-    schemaGrouping: 'sections',
-    urlSync,
-  };
-
-  return (
-    <div className="min-h-[600px]">
-      <Playground config={config} />
-    </div>
-  );
-};
-
-/**
- * Errors — consolidated failure paths. Pick a scenario via the toggle:
- *   - ``broken``: single schema that 404s → full-panel error state.
- *   - ``mixed``: valid + broken side-by-side → tests switching between.
- *   - ``empty``: no schemas configured at all → empty-state UI.
- */
-export const Errors = () => {
-  const [scenario] = useSelect('scenario', {
-    options: ['broken', 'mixed', 'empty'] as const,
-    defaultValue: 'broken',
-    label: 'Failure scenario',
-  });
-
-  const config: PlaygroundConfig = (() => {
-    switch (scenario) {
-      case 'broken':
-        return {
-          schemas: [{ id: 'broken', name: 'Broken API', url: 'https://httpbin.org/status/404' }],
-          defaultSchemaId: 'broken',
-        };
-      case 'mixed':
-        return {
-          schemas: [
-            PETSTORE_SCHEMA,
-            { id: 'broken', name: 'Broken API (404)', url: 'https://httpbin.org/status/404' },
-          ],
-          defaultSchemaId: 'petstore',
-        };
-      case 'empty':
-        return { schemas: [] };
-    }
-  })();
-
-  return (
-    <div className="min-h-[600px]">
-      <Playground config={config} />
-    </div>
-  );
-};
-
-/**
- * UnfilledPathParams — regression guard for the ``%7Bid%7D`` bug.
- *
- * When a path template like ``/pet/{petId}`` is rendered before the
- * user types a value, the path stays a template — not a percent-
- * encoded string. Previously the URL parser turned ``{`` / ``}`` into
- * ``%7B`` / ``%7D``, and the same encoded form leaked into every
- * generated code sample (curl, axios, python, …) via the HAR
- * intermediate.
- *
- * To verify visually:
- *   1. Open any endpoint with a path param, e.g. ``GET /pet/{petId}``,
- *      ``GET /store/order/{orderId}``, or ``GET /user/{username}``.
- *   2. Without filling the parameter, look at the header path and
- *      every Code Samples tab.
- *   3. All occurrences must read ``{petId}``, never ``%7BpetId%7D``.
- */
-export const UnfilledPathParams = () => {
-  const config: PlaygroundConfig = {
-    schemas: [PETSTORE_SCHEMA],
-    defaultSchemaId: 'petstore',
-  };
-
-  return (
-    <div className="min-h-[600px]">
-      <Playground config={config} />
-    </div>
-  );
-};
-
-/**
- * Lazy — production lazy-loaded variant. Shows the loading spinner
- * while the ~400 KB OpenAPI viewer chunk is fetched. Only path you
- * should use in an actual app bundle.
- */
-export const Lazy = () => {
-  const config: PlaygroundConfig = {
-    schemas: [...MULTI_SCHEMAS],
-    defaultSchemaId: 'petstore',
-  };
-
-  return (
-    <div className="min-h-[600px]">
-      <LazyOpenapiViewer config={config} />
-    </div>
-  );
-};