CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-blueprintjs--core

Comprehensive React UI component library for building complex, data-dense desktop web applications.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

data-display.mddocs/

Data Display

Components for displaying and interacting with data including tables, trees, tags, progress indicators, and non-ideal states. These components provide consistent data presentation with interactive capabilities.

Capabilities

Tree Component

Hierarchical data display with expand/collapse and selection support.

/**
 * Tree view component for hierarchical data with expand/collapse and selection
 * @param props - Tree configuration, data, and event handlers
 */
function Tree<T = {}>(props: TreeProps<T>): JSX.Element;

/**
 * Individual tree node component for custom rendering
 * @param props - Tree node content and interaction configuration
 */
function TreeNode(props: TreeNodeProps): JSX.Element;

interface TreeProps<T = {}> extends Props {
  contents: Array<TreeNodeInfo<T>>;
  onNodeClick?: TreeEventHandler<T>;
  onNodeCollapse?: TreeEventHandler<T>;
  onNodeContextMenu?: TreeEventHandler<T>;
  onNodeDoubleClick?: TreeEventHandler<T>;
  onNodeExpand?: TreeEventHandler<T>;
  onNodeMouseEnter?: TreeEventHandler<T>;
  onNodeMouseLeave?: TreeEventHandler<T>;
}

interface TreeNodeInfo<T = {}> {
  childNodes?: Array<TreeNodeInfo<T>>;
  className?: string;
  disabled?: boolean;
  hasCaret?: boolean;
  icon?: IconName | MaybeElement;
  id: string | number;
  isExpanded?: boolean;
  isSelected?: boolean;
  label: string | JSX.Element;
  nodeData?: T;
  secondaryLabel?: string | MaybeElement;
}

type TreeEventHandler<T = {}> = (
  node: TreeNodeInfo<T>,
  nodePath: number[],
  e: React.MouseEvent<HTMLElement>
) => void;

Usage Examples:

import { Tree, TreeNodeInfo } from "@blueprintjs/core";

const treeData: TreeNodeInfo[] = [
  {
    id: 1,
    label: "Root Folder",
    icon: "folder-close",
    isExpanded: true,
    childNodes: [
      {
        id: 2,
        label: "Documents",
        icon: "folder-close",
        childNodes: [
          { id: 3, label: "document1.txt", icon: "document" },
          { id: 4, label: "document2.txt", icon: "document" }
        ]
      },
      { id: 5, label: "README.md", icon: "document" }
    ]
  }
];

<Tree
  contents={treeData}
  onNodeClick={(node) => console.log("Clicked:", node.label)}
  onNodeExpand={(node) => console.log("Expanded:", node.label)}
/>

Table Components

Enhanced HTML table with consistent styling.

/**
 * Enhanced HTML table with Blueprint styling and interaction support
 * @param props - Table configuration and content
 */
function HTMLTable(props: HTMLTableProps): JSX.Element;

interface HTMLTableProps extends React.TableHTMLAttributes<HTMLTableElement>, Props {
  bordered?: boolean;
  compact?: boolean;
  interactive?: boolean;
  small?: boolean;
  striped?: boolean;
}

Progress Components

Progress indicators for operations and loading states.

/**
 * Horizontal progress bar with customizable styling and animation
 * @param props - Progress value, styling, and animation options
 */
function ProgressBar(props: ProgressBarProps): JSX.Element;

/**
 * Circular loading spinner with size and styling options
 * @param props - Spinner size, styling, and animation configuration
 */
function Spinner(props: SpinnerProps): JSX.Element;

interface ProgressBarProps extends IntentProps, Props {
  animate?: boolean;
  stripes?: boolean;
  value?: number;
}

interface SpinnerProps extends IntentProps, Props {
  size?: number | SpinnerSize;
  tagName?: keyof JSX.IntrinsicElements;
  value?: number;
}

enum SpinnerSize {
  SMALL = 20,
  STANDARD = 50,
  LARGE = 100
}

Tag Components

Label and input components for categorization and selection.

/**
 * Simple tag/chip component for labels and categories
 * @param props - Tag content, styling, and interaction options
 */
function Tag(props: TagProps): JSX.Element;

/**
 * Compound tag with separate sections for complex labeling
 * @param props - Compound tag content and section configuration
 */
function CompoundTag(props: CompoundTagProps): JSX.Element;

/**
 * Input component for adding and managing multiple tags
 * @param props - Tag input configuration, values, and event handlers
 */
function TagInput(props: TagInputProps): JSX.Element;

interface TagProps extends IntentProps, Props {
  active?: boolean;
  fill?: boolean;
  icon?: IconName | MaybeElement;
  interactive?: boolean;
  large?: boolean;
  minimal?: boolean;
  multiline?: boolean;
  onRemove?: (event: React.MouseEvent<HTMLButtonElement>, tagProps: TagProps) => void;
  removable?: boolean;
  rightIcon?: IconName | MaybeElement;
  round?: boolean;
  htmlTitle?: string;
  children?: React.ReactNode;
}

interface CompoundTagProps extends Props {
  disabled?: boolean;
  fill?: boolean;
  icon?: IconName | MaybeElement;
  interactive?: boolean;
  large?: boolean;
  leftContent: React.ReactNode;
  minimal?: boolean;
  onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  removable?: boolean;
  rightContent: React.ReactNode;
  round?: boolean;
}

interface TagInputProps extends IntentProps, Props {
  addOnBlur?: boolean;
  addOnPaste?: boolean;
  disabled?: boolean;
  fill?: boolean;
  inputProps?: React.HTMLProps<HTMLInputElement>;
  inputRef?: React.Ref<HTMLInputElement>;
  inputValue?: string;
  large?: boolean;
  leftIcon?: IconName;
  onAdd?: (values: string[], method: TagInputAddMethod) => boolean | void;
  onChange?: (values: React.ReactNode[]) => boolean | void;
  onInputChange?: React.FormEventHandler<HTMLInputElement>;
  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
  onRemove?: (value: React.ReactNode, index: number) => void;
  placeholder?: string;
  rightElement?: React.ReactNode;
  separator?: string | RegExp | false;
  tagProps?: Partial<TagProps> | ((value: React.ReactNode, index: number) => Partial<TagProps>);
  values: readonly React.ReactNode[];
}

enum TagInputAddMethod {
  BLUR = "blur",
  PASTE = "paste",
  TYPE = "type"
}

Usage Examples:

import { Tag, CompoundTag, TagInput, Intent, TagInputAddMethod } from "@blueprintjs/core";

// Basic tags
<Tag intent={Intent.PRIMARY}>Primary Tag</Tag>
<Tag removable onRemove={() => console.log("removed")}>
  Removable Tag
</Tag>

// Compound tag
<CompoundTag
  leftContent="Category"
  rightContent="Value"
  onRemove={() => console.log("compound tag removed")}
  removable
/>

// Tag input
<TagInput
  values={tags}
  onChange={(values) => setTags(values)}
  placeholder="Add tags..."
  tagProps={{ intent: Intent.PRIMARY }}
/>

Non-Ideal State

Empty states and error conditions with messaging and actions.

/**
 * Component for displaying empty states, errors, and non-ideal conditions
 * @param props - Non-ideal state content, icon, and action configuration
 */
function NonIdealState(props: NonIdealStateProps): JSX.Element;

interface NonIdealStateProps extends Props {
  action?: React.ReactElement<ButtonProps>;
  children?: React.ReactNode;
  description?: React.ReactNode;
  icon?: IconName | MaybeElement;
  iconSize?: NonIdealStateIconSize;
  layout?: "horizontal" | "vertical";
  title?: React.ReactNode;
}

enum NonIdealStateIconSize {
  STANDARD = 48,
  SMALL = 32,
  EXTRA_SMALL = 20
}

Text Component

Text display with truncation and overflow handling.

/**
 * Text component with ellipsis truncation and title tooltip
 * @param props - Text content and display configuration
 */
function Text(props: TextProps): JSX.Element;

interface TextProps extends Props {
  ellipsize?: boolean;
  tagName?: keyof JSX.IntrinsicElements;
  title?: string;
  children?: React.ReactNode;
}

Entity Title

Component for displaying entity information with icons and metadata.

/**
 * Component for displaying entity titles with icons, subtitles, and tags
 * @param props - Entity information and display configuration
 */
function EntityTitle(props: EntityTitleProps): JSX.Element;

interface EntityTitleProps extends Props {
  ellipsize?: boolean;
  heading?: React.ReactNode;
  icon?: IconName | MaybeElement;
  loading?: boolean;
  subtitle?: React.ReactNode;
  tags?: React.ReactNode;
  title?: React.ReactNode;
}

Overflow List

List component with overflow handling and customizable overflow behavior.

/**
 * List component that handles overflow with customizable overflow rendering
 * @param props - List items, overflow behavior, and rendering configuration
 */
function OverflowList<T>(props: OverflowListProps<T>): JSX.Element;

interface OverflowListProps<T> extends Props {
  alwaysRenderOverflow?: boolean;
  collapseFrom?: Boundary;
  items: T[];
  itemRenderer: (item: T, index: number) => React.ReactNode;
  minVisibleItems?: number;
  observeParents?: boolean;
  onOverflow?: (overflowItems: T[]) => void;
  overflowRenderer: (overflowItems: T[]) => React.ReactNode;
  style?: React.CSSProperties;
  tagName?: keyof JSX.IntrinsicElements;
  visibleItemRenderer?: (item: T, index: number) => React.ReactNode;
}

Resize Sensor

Component for detecting element size changes.

/**
 * Component that detects size changes of its container element
 * @param props - Resize detection configuration and callbacks
 */
function ResizeSensor(props: ResizeSensorProps): JSX.Element;

interface ResizeSensorProps extends Props {
  observeParents?: boolean; 
  onResize: (entries: ResizeEntry[]) => void;
  targetRef?: React.RefObject<HTMLElement>;
  children?: React.ReactNode;
}

interface ResizeEntry {
  contentRect: DOMRectReadOnly;
  target: Element;
}

Usage Examples:

import { 
  HTMLTable, 
  ProgressBar, 
  Spinner, 
  NonIdealState, 
  Text, 
  EntityTitle,
  OverflowList,
  ResizeSensor,
  Button,
  Intent 
} from "@blueprintjs/core";

// HTML Table
<HTMLTable striped bordered>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>Admin</td>
    </tr>
  </tbody>
</HTMLTable>

// Progress indicators
<ProgressBar value={0.7} intent={Intent.SUCCESS} animate />
<Spinner size={Spinner.SIZE_SMALL} intent={Intent.PRIMARY} />

// Non-ideal state
<NonIdealState
  icon="search"
  title="No results found"
  description="Try adjusting your search criteria"
  action={<Button text="Clear filters" onClick={clearFilters} />}
/>

// Text with ellipsis
<Text ellipsize>
  This is a very long text that will be truncated with ellipsis
</Text>

// Entity title
<EntityTitle
  icon="person"
  title="John Doe"
  subtitle="Software Engineer"
  tags={<Tag>Active</Tag>}
/>

// Overflow list
<OverflowList
  items={items}
  itemRenderer={(item, index) => <Button key={index} text={item.name} />}
  overflowRenderer={(items) => (
    <Button text={`+${items.length} more`} />
  )}
/>

// Resize sensor
<ResizeSensor onResize={(entries) => console.log("Size changed:", entries)}>
  <div>Resizable content</div>
</ResizeSensor>

docs

context-hooks.md

core-components.md

data-display.md

form-components.md

index.md

interactive-components.md

navigation-components.md

overlay-system.md

styling-system.md

tile.json