@primer/react-brand/lib/IDE/IDE.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React, { type PropsWithChildren } from 'react';
import type { BaseProps } from '../component-helpers';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/ide/base.css';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/ide/colors-with-modes.css';
export type IDEProps = {
    /**
     * Test id for the IDE
     */
    'data-testid'?: string;
    /**
     * The optionally configurable height of the IDE
     */
    height?: number;
    /**
     * Alternative presentation of the IDE
     */
    variant?: 'default' | 'glass';
} & BaseProps<HTMLDivElement>;
type IDEChatProps = {
    /**
     * The chat script
     */
    script: IDEChatMessage[];
    /**
     * Alternative description of the chat script for users of assistive technologies.
     */
    alternativeText: string;
    /**
     * The delay between messages
     */
    animationDelay?: number;
    /**
     * Test id for the IDE
     */
    'data-testid'?: string;
    /**
     * Internal prop used for controlling the animation state
     */
    animationIsPaused?: boolean;
    /**
     * Internal prop used for controlling the animation state
     */
    setAnimationIsDone?: (isDone: boolean) => void;
} & BaseProps<HTMLElement>;
type IDEChatMessageUser = {
    role: 'user';
    avatar: string;
};
type IDEChatMessageAssistant = {
    role: 'assistant';
};
export type IDEChatMessage = {
    handle: string;
    message: string;
    codeSnippet?: string;
    highlighter?: 'hljs';
} & (IDEChatMessageUser | IDEChatMessageAssistant);
type IDEChatHandle = HTMLElement & {
    resetAnimation: () => void;
};
type IDEEditorProps = {
    /**
     * The index of the active tab.
     */
    activeTab?: number;
    /**
     * An array of IDE editor files.
     */
    files: IDEEditorFile[];
    /**
     * Determines whether line numbers should be shown in the editor.
     */
    showLineNumbers?: boolean;
    /**
     * Controls the size of the editor text.
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * Used for triggering animation externally.
     */
    triggerAnimation?: boolean;
    /**
     * Test id for the IDE.
     */
    'data-testid'?: string;
    /**
     * Enable user customisation of the icons used in file tabs.
     */
    tabIcons?: IDEEditorTabIcon;
    /**
     * Internal prop used for controlling the animation state
     */
    animationIsPaused?: boolean;
    /**
     * Internal prop used for controlling the animation state
     */
    setAnimationIsDone?: (isDone: boolean) => void;
} & BaseProps<HTMLDivElement>;
export type IDEEditorFile = {
    name: string;
    /**
     * Alternative description of the code for users of assistive technologies.
     */
    alternativeText: string;
    /**
     * Controls line at which the Copilot suggestion begins
     */
    suggestedLineStart?: number;
    code: string | string[];
    highlighter?: 'hljs';
};
type IDEEditorTabIcon = Record<string, string>;
export declare const IDEDefaultIconMap: IDEEditorTabIcon;
export declare const IDEFileExtensions: string[];
type IDEEditorHandle = HTMLElement & {
    resetAnimation: () => void;
};
/**
 * Use IDE to display a decorative editor component
 * @see https://primer.style/brand/components/IDE
 */
export declare const IDE: React.NamedExoticComponent<{
    /**
     * Test id for the IDE
     */
    'data-testid'?: string;
    /**
     * The optionally configurable height of the IDE
     */
    height?: number;
    /**
     * Alternative presentation of the IDE
     */
    variant?: "default" | "glass";
} & BaseProps<HTMLDivElement> & {
    children?: React.ReactNode | undefined;
}> & {
    readonly type: ({ children, className, "data-testid": testId, height, variant, ...rest }: PropsWithChildren<IDEProps>) => import("react/jsx-runtime").JSX.Element;
} & {
    testIds: {
        root: string;
        readonly chat: string;
        readonly editor: string;
        readonly editorContent: string;
        readonly editorTabs: string;
    };
    Chat: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<IDEChatProps, "ref"> & React.RefAttributes<IDEChatHandle>>>;
    Editor: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<IDEEditorProps, "ref"> & React.RefAttributes<IDEEditorHandle>>>;
};
export {};