React Components

/**
 * React button component with JupyterLab styling
 * @param props - Button properties extending standard HTML button attributes
 * @returns JSX button element
 */
interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Use minimal styles without background */
  minimal?: boolean;
  /** Use small size variant */
  small?: boolean;
}

function Button(props: IButtonProps): JSX.Element;

import { Button } from '@jupyterlab/ui-components';

// Standard button
<Button onClick={() => console.log('Clicked')}>
  Save File
</Button>

// Minimal style button
<Button minimal={true} onClick={() => handleCancel()}>
  Cancel
</Button>

// Small button
<Button small={true} disabled={false}>
  Options
</Button>

// With custom styling
<Button 
  className="my-custom-button" 
  style={{ marginLeft: '10px' }}
  type="submit"
>
  Submit Form
</Button>

/**
 * HTML select component with enhanced styling and icon support
 */
interface IOptionProps {
  className?: string;
  disabled?: boolean;
  label?: string;
  value: string | number;
}

interface IHTMLSelectProps extends IElementRefProps<HTMLSelectElement>, React.SelectHTMLAttributes<HTMLSelectElement> {
  /** Use default JupyterLab styling */
  defaultStyle?: boolean;
  /** Icon properties for the select */
  iconProps?: LabIcon.IProps;
  /** Icon to display */
  icon?: LabIcon;
  /** Array of option values or option objects */
  options?: Array<string | number | IOptionProps>;
}

class HTMLSelect extends React.Component<IHTMLSelectProps>;

const HTML_SELECT_CLASS = 'jp-HTMLSelect';

import { HTMLSelect, caretDownIcon } from '@jupyterlab/ui-components';

// Simple select with string options
<HTMLSelect
  options={['Python', 'JavaScript', 'R']}
  defaultValue="Python"
  onChange={(e) => setLanguage(e.target.value)}
/>

// Select with option objects
const themeOptions = [
  { label: 'Light Theme', value: 'light' },
  { label: 'Dark Theme', value: 'dark' },
  { label: 'Auto', value: 'auto', disabled: true }
];

<HTMLSelect
  options={themeOptions}
  icon={caretDownIcon}
  defaultStyle={true}
  onChange={(e) => setTheme(e.target.value)}
/>

// Custom styled select
<HTMLSelect
  options={['Small', 'Medium', 'Large']}
  className="size-selector"
  iconProps={{ className: 'custom-icon' }}
/>

/**
 * Input group component with icon support
 * @param props - Input properties extending standard HTML input attributes
 * @returns JSX input element with optional icon
 */
interface IInputGroupProps extends React.InputHTMLAttributes<HTMLInputElement> {
  /** Reference to the input element */
  inputRef?: React.RefObject<HTMLInputElement>;
  /** Icon to display on the right side */
  rightIcon?: string | LabIcon;
}

function InputGroup(props: IInputGroupProps): JSX.Element;

import React, { useRef } from 'react';
import { InputGroup, searchIcon, clearIcon } from '@jupyterlab/ui-components';

// Basic search input
<InputGroup
  placeholder="Search files..."
  rightIcon={searchIcon}
  onChange={(e) => setSearchTerm(e.target.value)}
/>

// Input with ref and clear icon
const inputRef = useRef<HTMLInputElement>(null);

<InputGroup
  inputRef={inputRef}
  rightIcon={clearIcon}
  value={inputValue}
  onChange={(e) => setInputValue(e.target.value)}
  onKeyPress={(e) => {
    if (e.key === 'Enter') {
      handleSubmit();
    }
  }}
/>

// Password input with custom styling
<InputGroup
  type="password"
  placeholder="Enter password"
  className="password-input"
  required={true}
/>

/**
 * Filter box component for search and filtering functionality
 */
interface IScore {
  /** Relevance score for the match */
  score: number;
  /** Array of character indices that matched */
  indices: number[] | null;
}

interface IFilterBoxProps {
  /** Enable case-sensitive search */
  caseSensitive?: boolean;
  /** Disable the filter box */
  disabled?: boolean;
  /** Force refresh of results */
  forceRefresh?: boolean;
  /** Initial query string */
  initialQuery?: string;
  /** Reference to input element */
  inputRef?: React.RefObject<HTMLInputElement>;
  /** Placeholder text */
  placeholder?: string;
  /** Show search icon */
  showIcon?: boolean;
  /** Callback to update filter function */
  updateFilter: (filterFn: (item: string) => Partial<IScore> | null, query?: string) => void;
  /** Enable fuzzy search matching */
  useFuzzyFilter?: boolean;
  /** Signal for filter settings changes */
  filterSettingsChanged?: ISignal<unknown, { [P in keyof IFilterBoxProps]?: IFilterBoxProps[P] }>;
}

function FilterBox(props: IFilterBoxProps): JSX.Element;

/**
 * Factory function to create filename search widget
 */
function FilenameSearcher(props: IFilterBoxProps): ReactWidget;

/**
 * Widget class for filename searching functionality
 * Internal class used by FilenameSearcher factory function
 */
class FilenameSearcherWidget extends ReactWidget {
  constructor(props: IFilterBoxProps);
  render(): JSX.Element;
}

/**
 * Fuzzy search implementation
 * @param source - Text to search in
 * @param query - Search query
 * @returns Match score and indices, or null if no match
 */
function fuzzySearch(source: string, query: string): IScore | null;

/**
 * Creates a filter function for use with FilterBox
 * @param value - Search query value
 * @param useFuzzyFilter - Enable fuzzy matching
 * @param caseSensitive - Enable case-sensitive matching
 * @returns Filter function that returns match scores
 */
function updateFilterFunction(
  value: string, 
  useFuzzyFilter?: boolean, 
  caseSensitive?: boolean
): (item: string) => Partial<IScore> | null;

import React, { useState } from 'react';
import { FilterBox, FilenameSearcher, fuzzySearch } from '@jupyterlab/ui-components';

// File list filter
const [filteredFiles, setFilteredFiles] = useState<string[]>([]);

<FilterBox
  placeholder="Filter files..."
  useFuzzyFilter={true}
  caseSensitive={false}
  updateFilter={(filterFn, query) => {
    const filtered = fileList.filter(filename => {
      const result = filterFn(filename);
      return result && result.score && result.score > 0.3;
    });
    setFilteredFiles(filtered);
  }}
/>

// Advanced search with custom scoring
<FilterBox
  initialQuery="*.ts"
  showIcon={true}
  updateFilter={(filterFn, query) => {
    const results = items.map(item => ({
      item,
      score: filterFn(item.name)
    })).filter(result => result.score?.score > 0.5)
      .sort((a, b) => (b.score?.score || 0) - (a.score?.score || 0));
    
    updateResults(results.map(r => r.item));
  }}
/>

// Create a filename search widget (Lumino)
const searchWidget = FilenameSearcher({
  placeholder: "Search notebooks...",
  useFuzzyFilter: true,
  updateFilter: (filterFn) => {
    // Update notebook list based on filter
  }
});

/**
 * Sortable table component with generic data support
 */
namespace Table {
  interface ISortState {
    /** Key to sort by */
    sortKey?: string | null;
    /** Sort direction: 1 for ascending, -1 for descending */
    sortDirection: -1 | 1;
  }
  
  interface IRow<T> {
    /** Row data */
    data: T;
    /** Unique row key */
    key: string;
  }
  
  interface IColumn<T> {
    /** Column identifier */
    id: string;
    /** Column display label */
    label: string;
    /** Function to render cell content */
    renderCell(data: T): ReactNode;
    /** Function to compare values for sorting */
    sort(a: T, b: T): number | undefined;
    /** Check if column should be available */
    isAvailable?(): boolean;
    /** Hide this column */
    isHidden?: boolean;
  }
  
  interface IOptions<T> extends Partial<ISortState> {
    /** Array of table rows */
    rows: IRow<T>[];
    /** Array of column definitions */
    columns: IColumn<T>[];
    /** Row click handler */
    onRowClick?: React.MouseEventHandler<HTMLTableRowElement>;
    /** Component to show when table is empty */
    blankIndicator: () => ReactNode;
  }
}

function Table<T>(props: Table.IOptions<T>): JSX.Element;

const TABLE_CLASS = 'jp-sortable-table';

import React from 'react';
import { Table } from '@jupyterlab/ui-components';

interface FileData {
  name: string;
  size: number;
  modified: Date;
  type: string;
}

// Define table columns
const columns: Table.IColumn<FileData>[] = [
  {
    id: 'name',
    label: 'Name',
    renderCell: (data) => <strong>{data.name}</strong>,
    sort: (a, b) => a.name.localeCompare(b.name)
  },
  {
    id: 'size',
    label: 'Size',
    renderCell: (data) => `${(data.size / 1024).toFixed(1)} KB`,
    sort: (a, b) => a.size - b.size
  },
  {
    id: 'modified',
    label: 'Modified',
    renderCell: (data) => data.modified.toLocaleDateString(),
    sort: (a, b) => a.modified.getTime() - b.modified.getTime()
  }
];

// Create table rows
const rows: Table.IRow<FileData>[] = files.map(file => ({
  key: file.name,
  data: file
}));

// Render table
<Table
  columns={columns}
  rows={rows}
  sortKey="modified"
  sortDirection={-1}
  onRowClick={(e) => {
    const rowIndex = parseInt(e.currentTarget.dataset.index || '0');
    handleFileSelect(files[rowIndex]);
  }}
  blankIndicator={() => <div>No files found</div>}
/>

/**
 * Move button for array item reordering
 */
function MoveButton(props: FormComponent.IButtonProps): JSX.Element;

/**
 * Drop button for removing array items
 */
function DropButton(props: FormComponent.IButtonProps): JSX.Element;

/**
 * Add button for adding new array items
 */
function AddButton(props: FormComponent.IButtonProps): JSX.Element;

/**
 * Default UI options for forms
 */
const DEFAULT_UI_OPTIONS = {
  submitButtonOptions: { norender: true }
};

namespace FormComponent {
  interface IButtonProps {
    /** Button style variant */
    buttonStyle?: 'icons' | 'text';
    /** Translator for internationalization */
    translator?: ITranslator;
  }
  
  interface ILabCustomizerProps extends IButtonProps {
    /** Use compact form layout */
    compact?: boolean;
    /** Show indicators for modified values */
    showModifiedFromDefault?: boolean;
  }
}

import { MoveButton, DropButton, AddButton, DEFAULT_UI_OPTIONS } from '@jupyterlab/ui-components';

// Custom array item controls
<div className="array-controls">
  <MoveButton buttonStyle="icons" />
  <DropButton buttonStyle="text" />
  <AddButton buttonStyle="icons" />
</div>

// Form with default UI options
const formProps = {
  ...otherProps,
  uiSchema: {
    ...DEFAULT_UI_OPTIONS,
    customField: { 'ui:widget': 'select' }
  }
};