@djangocfg/widget-code 0.1.18 → 0.1.21

package/src/pretty-code/pretty-code.stories.tsx

@@ -1,353 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { LazyPrettyCode as PrettyCode } from './lazy';
-
-// ─── Samples ──────────────────────────────────────────────────────────────────
-
-const TS_SAMPLE = `import { useCallback, useEffect, 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 abortRef = useRef<AbortController | null>(null);
-
-  const fetch = useCallback(async (p: PaginationParams) => {
-    abortRef.current?.abort();
-    abortRef.current = new AbortController();
-    setStatus('loading');
-    const res = await window.fetch(\`/api/vehicles?page=\${p.page}\`, {
-      signal: abortRef.current.signal,
-    });
-    const json = await res.json();
-    setData(json.data);
-    setStatus('success');
-  }, []);
-
-  useEffect(() => {
-    fetch(initialParams as PaginationParams);
-    return () => abortRef.current?.abort();
-  }, []);
-
-  return { status, data };
-}`;
-
-const JSON_SAMPLE = {
-  framework: 'next',
-  version: '16.2.2',
-  features: ['app-router', 'rsc', 'turbopack'],
-  flags: { strictMode: true, experimentalRSC: true },
-  routes: [
-    { path: '/', component: 'HomePage' },
-    { path: '/about', component: 'AboutPage' },
-  ],
-};
-
-const PYTHON_SAMPLE = `from __future__ import annotations
-
-import asyncio
-from dataclasses import dataclass
-from datetime import datetime
-from enum import StrEnum
-
-import httpx
-from pydantic import BaseModel, Field, field_validator
-
-
-class FuelType(StrEnum):
-    GASOLINE = "gasoline"
-    DIESEL = "diesel"
-    ELECTRIC = "electric"
-
-
-class Vehicle(BaseModel):
-    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) -> list[Vehicle]:
-        async with httpx.AsyncClient(base_url=self.base_url) as client:
-            response = await client.get("/vehicles", params={"page": page})
-            response.raise_for_status()
-            return [Vehicle.model_validate(v) for v in response.json()["data"]]`;
-
-const BASH_SAMPLE = `#!/usr/bin/env bash
-set -euo pipefail
-
-# Deploy script for production
-ENV="\${1:-staging}"
-TAG="\${2:-latest}"
-
-echo "Deploying to $ENV with tag $TAG"
-
-docker build -t myapp:$TAG .
-docker push registry.example.com/myapp:$TAG
-
-kubectl set image deployment/myapp app=registry.example.com/myapp:$TAG
-kubectl rollout status deployment/myapp --timeout=2m
-
-echo "Done."`;
-
-const SQL_SAMPLE = `-- Top selling vehicles in the last 30 days
-WITH recent_sales AS (
-  SELECT
-    v.id,
-    v.make,
-    v.model,
-    COUNT(s.id) AS sales_count,
-    SUM(s.amount) AS revenue
-  FROM vehicles v
-  INNER JOIN sales s ON s.vehicle_id = v.id
-  WHERE s.created_at >= NOW() - INTERVAL '30 days'
-  GROUP BY v.id, v.make, v.model
-)
-SELECT *
-FROM recent_sales
-WHERE sales_count > 5
-ORDER BY revenue DESC
-LIMIT 20;`;
-
-const YAML_SAMPLE = `version: '3.9'
-
-services:
-  api:
-    image: registry.example.com/myapp:latest
-    environment:
-      DATABASE_URL: postgres://db/app
-      REDIS_URL: redis://cache:6379
-    depends_on:
-      - db
-      - cache
-    ports:
-      - "8000:8000"
-
-  db:
-    image: postgres:16-alpine
-    volumes:
-      - db_data:/var/lib/postgresql/data
-    environment:
-      POSTGRES_DB: app
-      POSTGRES_PASSWORD: secret
-
-  cache:
-    image: redis:7-alpine
-
-volumes:
-  db_data:`;
-
-const LONG_SAMPLE = Array.from(
-  { length: 60 },
-  (_, i) => `const value_${i} = ${i * 3}; // computed entry ${i + 1}`,
-).join('\n');
-
-// ─── Meta ─────────────────────────────────────────────────────────────────────
-
-const meta = {
-  title: 'Widgets/Code/PrettyCode',
-  component: PrettyCode,
-  tags: ['autodocs'],
-  argTypes: {
-    data: { control: 'text', table: { category: 'Content' } },
-    language: {
-      control: 'select',
-      options: [
-        'tsx',
-        'ts',
-        'js',
-        'jsx',
-        'json',
-        'python',
-        'bash',
-        'sql',
-        'yaml',
-        'css',
-        'html',
-        'go',
-        'rust',
-        'markdown',
-      ],
-      table: { category: 'Content' },
-    },
-    mode: {
-      control: 'inline-radio',
-      options: ['dark', 'light'],
-      table: { category: 'Appearance' },
-    },
-    variant: {
-      control: 'inline-radio',
-      options: ['card', 'plain'],
-      table: { category: 'Appearance' },
-    },
-    inline: { control: 'boolean', table: { category: 'Appearance' } },
-    isCompact: { control: 'boolean', table: { category: 'Appearance' } },
-    customBg: { control: 'text', table: { category: 'Appearance' } },
-    scrollIsolation: { control: 'boolean', table: { category: 'Behaviour' } },
-    maxLines: { control: { type: 'number', min: 0, step: 1 }, table: { category: 'Behaviour' } },
-  },
-} satisfies Meta<typeof PrettyCode>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const Frame = ({ children }: { children: React.ReactNode }) => (
-  <div className="w-[720px]">{children}</div>
-);
-
-// ─── Playground ───────────────────────────────────────────────────────────────
-
-export const Playground: Story = {
-  args: {
-    data: TS_SAMPLE,
-    language: 'tsx',
-    mode: 'dark',
-    variant: 'card',
-    inline: false,
-    isCompact: false,
-    scrollIsolation: true,
-  },
-  render: (args) => (
-    <Frame>
-      <PrettyCode {...args} />
-    </Frame>
-  ),
-};
-
-// ─── Curated presets ──────────────────────────────────────────────────────────
-
-export const TypeScript: Story = {
-  args: { data: TS_SAMPLE, language: 'tsx' },
-  render: (args) => (
-    <Frame>
-      <PrettyCode {...args} />
-    </Frame>
-  ),
-};
-
-export const Json: Story = {
-  args: { data: JSON_SAMPLE, language: 'json' },
-  render: (args) => (
-    <Frame>
-      <PrettyCode {...args} />
-    </Frame>
-  ),
-};
-
-export const Python: Story = {
-  args: { data: PYTHON_SAMPLE, language: 'python' },
-  render: (args) => (
-    <Frame>
-      <PrettyCode {...args} />
-    </Frame>
-  ),
-};
-
-export const Bash: Story = {
-  args: { data: BASH_SAMPLE, language: 'bash' },
-  render: (args) => (
-    <Frame>
-      <PrettyCode {...args} />
-    </Frame>
-  ),
-};
-
-export const Sql: Story = {
-  args: { data: SQL_SAMPLE, language: 'sql' },
-  render: (args) => (
-    <Frame>
-      <PrettyCode {...args} />
-    </Frame>
-  ),
-};
-
-export const Yaml: Story = {
-  args: { data: YAML_SAMPLE, language: 'yaml' },
-  render: (args) => (
-    <Frame>
-      <PrettyCode {...args} />
-    </Frame>
-  ),
-};
-
-export const LongFileWithScroll: Story = {
-  args: {
-    data: LONG_SAMPLE,
-    language: 'ts',
-    maxLines: 20,
-  },
-  render: (args) => (
-    <Frame>
-      <PrettyCode {...args} />
-    </Frame>
-  ),
-};
-
-export const Inline: Story = {
-  args: {
-    data: `const status: 'ok' | 'err' = 'ok';`,
-    language: 'ts',
-    inline: true,
-  },
-  render: (args) => (
-    <div className="text-sm">
-      The variable <PrettyCode {...args} /> represents the result state.
-    </div>
-  ),
-};
-
-export const Compact: Story = {
-  args: {
-    data: `const port = 3000;`,
-    language: 'ts',
-    isCompact: true,
-  },
-  render: (args) => <PrettyCode {...args} />,
-};
-
-export const LightMode: Story = {
-  args: {
-    data: TS_SAMPLE,
-    language: 'tsx',
-    mode: 'light',
-  },
-  render: (args) => (
-    <Frame>
-      <PrettyCode {...args} />
-    </Frame>
-  ),
-};
-
-export const PlainVariant: Story = {
-  args: {
-    data: TS_SAMPLE,
-    language: 'tsx',
-    variant: 'plain',
-  },
-  render: (args) => (
-    <Frame>
-      <PrettyCode {...args} />
-    </Frame>
-  ),
-};

package/src/pretty-code/registerPrismLanguages.ts

@@ -1,116 +0,0 @@
-/**
- * Register extra Prism language grammars onto the vendored Prism
- * instance that ``prism-react-renderer`` ships.
- *
- *  Why this file exists:
- *    ``prism-react-renderer@2.x`` bundles only a small set of core
- *    languages (javascript, typescript, python, go, json, css,
- *    markup, clike, …). Anything else — ``bash``, ``ruby``, ``java``,
- *    ``php`` — isn't in the bundle, so passing ``language="bash"`` to
- *    ``<Highlight>`` silently renders as plain text.
- *
- *  Canonical solution (per the official README):
- *    - Grab the exported ``Prism`` instance.
- *    - Hang it off ``globalThis`` so that ``prismjs`` language
- *      components can find it when they self-register (they read
- *      ``window.Prism`` / ``global.Prism`` at module-evaluation time).
- *    - Load each grammar via dynamic ``import()`` — bare ``require``
- *      doesn't work in ESM/Vite and static ``import 'prismjs/…'``
- *      runs before we can hang Prism on the global.
- *
- *  Runs once on module load, with a guard so repeated imports in
- *  different bundles are a no-op. Safe for SSR: the grammars don't
- *  touch the DOM and the dynamic import is awaited asynchronously —
- *  server renders just miss the extra grammars, client renders pick
- *  them up after hydration which is when the <Highlight> components
- *  actually render anyway.
- */
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { useSyncExternalStore } from 'react';
-import { Prism } from 'prism-react-renderer';
-
-// Hang the vendored Prism on the global so ``prismjs`` language
-// components can find it when their self-registration runs.
-const globalScope: any = typeof globalThis !== 'undefined' ? globalThis : {};
-if (!globalScope.Prism) {
-    globalScope.Prism = Prism;
-}
-
-// Ready-state machinery: one-shot boolean + subscribers. When loading
-// finishes we flip ``ready`` and notify listeners so components that
-// rendered before the grammars loaded can re-render and pick them up.
-let ready = false;
-let loading: Promise<void> | null = null;
-const listeners = new Set<() => void>();
-
-function subscribe(cb: () => void): () => void {
-    listeners.add(cb);
-    return () => listeners.delete(cb);
-}
-
-function getSnapshot(): boolean {
-    return ready;
-}
-
-// Server snapshot — always ``true`` so SSR doesn't trip the
-// ``server ≠ client`` warning. The actual registration only runs on
-// the client; server renders fall back to the bundled Prism set,
-// which for the OpenAPI viewer means JS / Python / Go highlight
-// server-side and bash / java / ruby / php render plain until hydration.
-function getServerSnapshot(): boolean {
-    return true;
-}
-
-export async function ensurePrismLanguages(): Promise<void> {
-    if (ready) return;
-    if (loading) return loading;
-
-    loading = (async () => {
-        // Dynamic imports so these modules evaluate AFTER we've
-        // attached Prism to the global scope above.
-        //
-        // `as string` because the grammar files are untyped side-effect
-        // modules — `prismjs` ships no declarations for `components/*` and
-        // there is no `@types/prismjs` here. It widens the specifier, not a
-        // value, so nothing about the loaded module is being asserted.
-        //
-        // Load order matters: ``prism-php`` calls
-        // ``Prism.languages.markup.tokenizePlaceholders`` at module
-        // evaluation time, which is only defined after
-        // ``markup-templating`` loads — so that must come first.
-        // ``bash`` / ``java`` / ``ruby`` only depend on ``clike``
-        // which is already bundled in ``prism-react-renderer``.
-        await import('prismjs/components/prism-markup-templating' as string);
-        await Promise.all([
-            import('prismjs/components/prism-bash' as string),
-            import('prismjs/components/prism-java' as string),
-            import('prismjs/components/prism-ruby' as string),
-            import('prismjs/components/prism-php' as string),
-        ]);
-        ready = true;
-        listeners.forEach((cb) => cb());
-    })();
-
-    return loading;
-}
-
-/** Hook that triggers a re-render when the extra grammars finish
- *  loading. Used by ``PrettyCode`` so the first render (which might
- *  happen before loading completes) gets re-highlighted once the
- *  grammars are available. */
-export function useEnsurePrismLanguages(): boolean {
-    const loaded = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-    if (!loaded) {
-        // Kick off loading (idempotent — re-entry is cheap) so the
-        // next store update flips ``ready`` and we re-render.
-        void ensurePrismLanguages();
-    }
-    return loaded;
-}
-
-// Also kick off on module load so the grammars start loading as
-// early as possible — by the time the user clicks a code-sample tab
-// they've usually finished.
-void ensurePrismLanguages();