@djangocfg/ui-tools 2.1.382 → 2.1.384

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>
-  );
-};