@live-demo/core/dist/web/index.d.mts

Core components for @live-demo plugins.

import { useFullscreen } from "@mantine/hooks";
import * as react0 from "react";
import { ReactElement } from "react";
import * as react_jsx_runtime0 from "react/jsx-runtime";
import { ReactCodeMirrorProps } from "@uiw/react-codemirror";

//#region src/web/ui/components/Button/Button.d.ts
type ButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
  text?: string;
  icon?: React.ReactElement;
};
declare const Button: ({
  icon,
  text,
  children,
  className,
  ...restProps
}: ButtonProps) => react_jsx_runtime0.JSX.Element;
//#endregion
//#region src/web/ui/controlPanel/LiveDemoControlPanel/LiveDemoControlPanel.d.ts
declare const LiveDemoControlPanel: () => react_jsx_runtime0.JSX.Element | null;
//#endregion
//#region src/web/ui/editor/LiveDemoEditor/LiveDemoEditor.d.ts
/**
 * Props passed to ReactCodeMirror.
 *
 * @defaultValue
 * ```
 * {
 *    basicSetup: {
 *      lineNumbers: false,
 *      foldGutter: false,
 *      autocompletion: false,
 *      tabSize: 2,
 *    }
 * }
 * ```
 */
interface LiveDemoEditorProps extends ReactCodeMirrorProps {}
declare const LiveDemoEditor: (props: LiveDemoEditorProps) => react_jsx_runtime0.JSX.Element;
//#endregion
//#region src/web/ui/editor/LiveDemoFileTabs/LiveDemoFileTabs.d.ts
type LiveDemoFileTabsProps = {
  /**
   * Hide single file tab
   * @defaultValue `false`
   */
  hideSingleTab?: boolean;
};
declare const LiveDemoFileTabs: (props: LiveDemoFileTabsProps) => react_jsx_runtime0.JSX.Element | null;
//#endregion
//#region src/web/types.d.ts
/**
 * Props passed from plugin to LiveDemo components are JSON.stringified.
 * Without stringification having code strings (in `props.files`)
 * tends to break MDX parsing.
 */
type LiveDemoStringifiedProps = { [Key in keyof LiveDemoPropsFromPlugin]: string };
//#endregion
//#region src/web/ui/liveDemo/LiveDemoCore/LiveDemoCore.d.ts
interface LiveDemoCoreProps {
  isDark: boolean;
  pluginProps: LiveDemoStringifiedProps;
}
declare const LiveDemoCore: (props: LiveDemoCoreProps) => react_jsx_runtime0.JSX.Element;
//#endregion
//#region src/web/ui/liveDemo/LiveDemoResizablePanels/types.d.ts
type LiveDemoResizablePanelsProps = {
  editor?: ReactElement;
  preview?: ReactElement;
  /**
   * Used for auto saving the panel sizes in local storage
   */
  autoSaveId?: string;
  /**
   * Layout width threshold in px.
   * When width of the ResizablePanels' wrapper div is smaller,
   * the panels are arranged vertically.
   * Otherwise, the panels are arranged horizontally.
   * @defaultValue 550
   */
  verticalThreshold?: number;
  /**
   * Default panel sizes in %.
   */
  defaultPanelSizes?: {
    /**
     * Default panel size in %.
     * @defaultValue `50`
     */
    editor?: number;
    /**
     * Default panel size in %.
     * @defaultValue `50`
     */
    preview?: number;
  };
  classes?: {
    wrapper?: string;
    editorPanel?: string;
    previewPanel?: string;
  };
};
//#endregion
//#region src/web/ui/liveDemo/LiveDemoResizablePanels/LiveDemoResizablePanels.d.ts
declare const LiveDemoResizablePanels: (props: LiveDemoResizablePanelsProps) => react_jsx_runtime0.JSX.Element;
//#endregion
//#region src/web/ui/liveDemo/LiveDemoWrapper/LiveDemoWrapper.d.ts
type LiveDemoWrapperProps = {
  className?: string;
  children: React.ReactNode;
};
declare const LiveDemoWrapper: (props: LiveDemoWrapperProps) => react_jsx_runtime0.JSX.Element;
//#endregion
//#region src/web/ui/preview/LiveDemoCodeRunner/LiveDemoCodeRunner.d.ts
type LiveDemoCodeRunnerProps = {
  files: LiveDemoFiles;
  entryFileName: string;
  error: Error | undefined;
  setError: (error: Error | undefined) => void;
};
declare const LiveDemoCodeRunner: ({
  files,
  error,
  setError,
  entryFileName
}: LiveDemoCodeRunnerProps) => ReactElement<unknown, string | react0.JSXElementConstructor<any>> | null;
//#endregion
//#region src/web/ui/preview/LiveDemoPreview/LiveDemoPreview.d.ts
declare const LiveDemoPreview: () => react_jsx_runtime0.JSX.Element;
//#endregion
//#region src/shared/types.d.ts
/**
 * `Record<fileName, fileContentsString>`
 */
type LiveDemoFiles = Record<string, string>;
type LiveDemoPropsFromPlugin = {
  files: LiveDemoFiles;
  entryFileName: string;
  options?: LiveDemoPluginOptions["ui"];
};
type LiveDemoPluginOptions = {
  /**
   * Modules that will be available in demos,
   * @example
   * includeModules: ["@mantine/hooks"]
   * Then you can use `import { ... } from "@mantine/hooks"` in any demo.
   **/
  includeModules?: string[];
  /**
   * Props passed from plugin to LiveDemo components.
   * @example
   * ui: {
   *   fileTabs: {
   *     hideSingleTab: true,
   *   },
   *   editor: {
   *     basicSetup: {
   *       lineNumbers: false,
   *       foldGutter: false,
   *       autocompletion: false,
   *       tabSize: 2,
   *     },
   *   },
   *   resizablePanels: {
   *     autoSaveId: "my-auto-save-id",
   *     defaultPanelSizes: {
   *       editor: 50,
   *       preview: 50,
   *     },
   *   },
   * }
   */
  ui?: {
    controlPanel?: {
      hide?: boolean;
    };
    fileTabs?: Pick<LiveDemoFileTabsProps, "hideSingleTab"> & {
      hide?: boolean;
    };
    editor?: LiveDemoEditorProps;
    resizablePanels?: Pick<LiveDemoResizablePanelsProps, "autoSaveId" | "defaultPanelSizes">;
  };
};
//#endregion
//#region src/web/context/LiveDemoProvider.d.ts
type LiveDemoContextValue = {
  files: LiveDemoFiles;
  setFiles: React.Dispatch<React.SetStateAction<LiveDemoFiles>>;
  activeFile: string;
  setActiveFile: React.Dispatch<React.SetStateAction<string>>;
  updateFiles: (update: LiveDemoFiles) => void;
  isDark: boolean;
  fullscreen: ReturnType<typeof useFullscreen>;
  options: LiveDemoPropsFromPlugin["options"];
  entryFileName: LiveDemoPropsFromPlugin["entryFileName"];
};
type LiveDemoProviderProps = {
  isDark: boolean;
  children: React.ReactNode;
  pluginProps: LiveDemoStringifiedProps;
};
declare function LiveDemoProvider(props: LiveDemoProviderProps): react_jsx_runtime0.JSX.Element;
declare const useLiveDemoContext: () => LiveDemoContextValue;
//#endregion
//#region src/web/hooks/useActiveCode.d.ts
declare const useActiveCode: () => {
  code: string;
  updateCode: (code: string) => void;
};
//#endregion
export { Button, ButtonProps, LiveDemoCodeRunner, LiveDemoCodeRunnerProps, LiveDemoControlPanel, LiveDemoCore, LiveDemoEditor, LiveDemoEditorProps, LiveDemoFileTabs, LiveDemoFileTabsProps, LiveDemoPreview, LiveDemoProvider, LiveDemoResizablePanels, LiveDemoResizablePanelsProps, LiveDemoStringifiedProps, LiveDemoWrapper, useActiveCode, useLiveDemoContext };