@lax-wp/design-system 0.8.14 → 0.8.16

package/dist/components/data-display/code-editor/CodeEditor.d.ts

@@ -1,6 +1,3 @@
 import { type FC } from 'react';
 import { type CodeEditorProps } from '../../../types';
-declare const TABS: ('JSON' | 'Grid')[];
-export type TTabKey = (typeof TABS)[number];
 export declare const CodeEditor: FC<CodeEditorProps>;
-export {};

package/dist/components/data-display/code-editor-beta/CodeEditorBeta.d.ts

@@ -0,0 +1,89 @@
+import { type FC } from "react";
+import { type ReactCodeMirrorRef } from "@uiw/react-codemirror";
+declare const TABS: ("JSON" | "Grid")[];
+export type TTabKey = (typeof TABS)[number];
+/**
+ * Toolbar context passed to the `renderToolbarActions` callback.
+ */
+export interface CodeEditorBetaToolbarContext {
+    /** The CodeMirror editor view ref */
+    editorRef: ReactCodeMirrorRef | null;
+    /** Current editor value */
+    value: string;
+    /** Value change callback */
+    onChange: (value: string) => void;
+    /** Active language */
+    language: "json" | "python";
+    /** Whether the editor is editable */
+    isEditMode: boolean;
+    /** Current active tab (JSON or Grid) */
+    activeTab: "JSON" | "Grid";
+}
+/**
+ * Props for the experimental CodeMirror-based CodeEditor.
+ */
+export interface CodeEditorBetaProps {
+    /** The code content to display in the editor */
+    value: string;
+    /** Callback fired when the code value changes */
+    onChange?: (value: string) => void;
+    /** Enable fullscreen toggle button */
+    withFullScreen?: boolean;
+    /** Enable light/dark theme toggle */
+    withTheme?: boolean;
+    /** Whether the editor is editable vs read-only */
+    isEditMode?: boolean;
+    /** Height of the editor (CSS units) */
+    height?: string;
+    /** Programming language for syntax highlighting */
+    language?: "json" | "python";
+    /** Show copy-to-clipboard button (JSON/Python only) */
+    isShowCopy?: boolean;
+    /** Show download file button (JSON/Python only) */
+    isShowDownload?: boolean;
+    /** Enable JSON Grid view for JSON language */
+    withJsonGrid?: boolean;
+    /** Editor theme: 'light' or 'dark' */
+    theme?: "light" | "dark";
+    /** Additional CSS classes for the outer container */
+    className?: string;
+    /** Auto-format JSON on mount */
+    enableAutoFormatting?: boolean;
+    /** Disables parent save button during Python validation (mirrors original CodeEditor) */
+    setIsDisableSave?: (flag: boolean) => void;
+    /** API to check Python syntax — returns an error object if invalid */
+    checkSyntaxAPI?: (code: string) => Promise<{
+        data: {
+            error?: {
+                message: string;
+                line?: number;
+                column?: number;
+            };
+        };
+    }>;
+    /** API to format Python code — returns formatted_code string */
+    formatCodeAPI?: (code: string) => Promise<{
+        data: {
+            formatted_code?: string;
+        };
+    }>;
+    /** Custom toolbar actions render function */
+    renderToolbarActions?: (context: CodeEditorBetaToolbarContext) => React.ReactNode;
+}
+/**
+ * CodeEditorBeta — experimental CodeMirror 6 replacement for the Monaco-based CodeEditor.
+ *
+ * Smaller bundle, no web workers, same toolbar UX. Drops Codeium AI completions.
+ *
+ * @example
+ * ```tsx
+ * <CodeEditorBeta
+ *   value={jsonString}
+ *   onChange={setJsonString}
+ *   language="json"
+ *   height="400px"
+ * />
+ * ```
+ */
+export declare const CodeEditorBeta: FC<CodeEditorBetaProps>;
+export {};

package/dist/components/data-display/code-editor-beta/index.d.ts

@@ -0,0 +1,4 @@
+export { CodeEditorBeta } from "./CodeEditorBeta";
+export type { CodeEditorBetaProps, CodeEditorBetaToolbarContext, } from "./CodeEditorBeta";
+export { usePythonSyntaxCM } from "./usePythonSyntaxCM";
+export type { UsePythonSyntaxCMProps } from "./usePythonSyntaxCM";

package/dist/components/data-display/code-editor-beta/usePythonSyntaxCM.d.ts

@@ -0,0 +1,56 @@
+import { type EditorView } from "@codemirror/view";
+import type { Extension } from "@codemirror/state";
+export interface UsePythonSyntaxCMProps {
+    /** The CodeMirror EditorView (obtain from ref.current?.view) */
+    editorView: EditorView | null;
+    /** Current code string */
+    code: string;
+    /** Callback to update the code value */
+    setCode: (code: string) => void;
+    /** Whether the hook is active */
+    enable: boolean;
+    /** API to check Python syntax — returns an error object if invalid */
+    checkSyntaxAPI?: (code: string) => Promise<{
+        data: {
+            error?: {
+                message: string;
+                line?: number;
+                column?: number;
+            };
+        };
+    }>;
+    /** API to format Python code — returns formatted_code string */
+    formatCodeAPI?: (code: string) => Promise<{
+        data: {
+            formatted_code?: string;
+        };
+    }>;
+}
+/**
+ * CodeMirror-compatible replacement for usePythonSyntax.
+ *
+ * Uses `@codemirror/lint` diagnostics instead of Monaco's `setModelMarkers`
+ * for inline error display. Supports the same optional API-backed syntax
+ * checking and formatting as the original hook.
+ *
+ * @example
+ * ```tsx
+ * const { lintExtension, handleFormatCode, pythonLoading } = usePythonSyntaxCM({
+ *   editorView: editorRef.current?.view ?? null,
+ *   code: value,
+ *   setCode: onChange,
+ *   enable: isEditMode && language === "python",
+ *   checkSyntaxAPI: myCheckAPI,
+ *   formatCodeAPI: myFormatAPI,
+ * });
+ * // Add lintExtension to CodeMirror's extensions array
+ * ```
+ */
+export declare const usePythonSyntaxCM: ({ editorView, code, setCode, enable, checkSyntaxAPI, formatCodeAPI, }: UsePythonSyntaxCMProps) => {
+    pythonError: any;
+    pythonLoading: boolean;
+    handleCheckSyntax: () => Promise<void>;
+    handleFormatCode: () => Promise<void>;
+    /** Add this to CodeMirror's extensions array to show the lint gutter */
+    lintExtension: Extension;
+};

package/dist/index.d.ts

@@ -79,6 +79,10 @@ export { ConfirmationModal } from "./components/feedback/confirmation-modal/Conf
 export type { IConfirmationModalProps, } from "./components/feedback/confirmation-modal/ConfirmationModal";
 export { CodeEditor } from "./components/data-display/code-editor/CodeEditor";
 export type { CodeEditorProps } from "./types";
+export { CodeEditorBeta } from "./components/data-display/code-editor-beta/CodeEditorBeta";
+export type { CodeEditorBetaProps, CodeEditorBetaToolbarContext, } from "./components/data-display/code-editor-beta/CodeEditorBeta";
+export { usePythonSyntaxCM } from "./components/data-display/code-editor-beta/usePythonSyntaxCM";
+export type { UsePythonSyntaxCMProps } from "./components/data-display/code-editor-beta/usePythonSyntaxCM";
 export { JsonGrid } from "./components/data-display/code-editor/JsonGrid";
 export type { JsonGridProps } from "./components/data-display/code-editor/JsonGrid";
 export { Tabs as CodeEditorTabs } from "./components/data-display/code-editor/Tabs";
@@ -117,7 +121,7 @@ export { DynamicDataModal } from "./components/data-display/dynamic-data-modal/D
 export type { DynamicDataModalProps, TTabKey as DynamicDataModalTabKey } from "./components/data-display/dynamic-data-modal/DynamicDataModal";
 export { DeleteModal } from "./components/data-display/delete-modal/DeleteModal";
 export type { DeleteModalProps } from "./components/data-display/delete-modal/DeleteModal";
-export type { JsonValue, JsonObject, JsonArray, Tab as CodeEditorTab, ThemeContextType, PythonError, JsonGridContextType } from "./types";
+export type { JsonValue, JsonObject, JsonArray, Tab as CodeEditorTab, ThemeContextType, PythonError, JsonGridContextType, CodeBlockInfo, } from "./types";
 export { COUNTRY_CODES, countryNameFromCode } from "./types/icon-picker";
 export { DiffViewer, InlineDiffHighlighter, } from "./components/data-display/diff-viewer/DiffViewer";
 export type { DiffViewerProps, DiffType, DiffTheme, } from "./components/data-display/diff-viewer/DiffViewer";