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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

BlueprintJS Core

Name: tessl/npm-blueprintjs--core
Author: tessl

BlueprintJS Core is a comprehensive React UI component library designed for building complex, data-dense web applications for desktop environments. It provides a complete set of foundational UI components including buttons, forms, overlays, navigation, and layout components, all built with TypeScript for type safety and accessibility.

Package Information

Package Name: @blueprintjs/core
Package Type: npm
Language: TypeScript
Installation: npm install @blueprintjs/core

Core Imports

import { Button, Card, Classes, Intent } from "@blueprintjs/core";

For CommonJS:

const { Button, Card, Classes, Intent } = require("@blueprintjs/core");

Basic Usage

import React from "react";
import { Button, Card, Intent, Callout } from "@blueprintjs/core";

function App() {
  return (
    <Card elevation={2}>
      <h3>Welcome to Blueprint</h3>
      <Callout intent={Intent.PRIMARY}>
        This is a primary callout with information.
      </Callout>
      <Button 
        intent={Intent.SUCCESS} 
        large 
        onClick={() => alert("Hello Blueprint!")}
      >
        Click me
      </Button>
    </Card>
  );
}

Architecture

BlueprintJS Core is built around several foundational systems:

Component Library: 133+ React components covering forms, navigation, overlays, data display, and layout
Design System: Consistent styling with Classes namespace, intents, elevations, and size variations
Context System: React Context providers for themes, hotkeys, overlays, and portals
Hook System: Custom hooks for hotkeys, async values, overlay management, and previous value tracking
Accessibility: Built-in ARIA support, focus management, and keyboard navigation
Type Safety: Complete TypeScript definitions with generic type preservation

Capabilities

Core Components

Essential UI building blocks including buttons, cards, callouts, and layout components. These form the foundation for most Blueprint applications.

// Button components
function Button(props: ButtonProps): JSX.Element;
function AnchorButton(props: AnchorButtonProps): JSX.Element;

// Card components  
function Card(props: CardProps): JSX.Element;
function CardList(props: CardListProps): JSX.Element;

// Callout and messaging
function Callout(props: CalloutProps): JSX.Element;
function Alert(props: AlertProps): JSX.Element;

Core Components

Form Components

Comprehensive form controls including inputs, checkboxes, radios, switches, and validation support. All components support controlled and uncontrolled modes.

// Input components
function InputGroup(props: InputGroupProps): JSX.Element;
function NumericInput(props: NumericInputProps): JSX.Element;
function TextArea(props: TextAreaProps): JSX.Element;

// Control components
function Checkbox(props: CheckboxProps): JSX.Element;
function Radio(props: RadioProps): JSX.Element;
function Switch(props: SwitchProps): JSX.Element;

Form Components

Overlay System

Advanced overlay components including dialogs, popovers, tooltips, and drawer panels. Built on Popper.js with comprehensive positioning options.

// Dialog components
function Dialog(props: DialogProps): JSX.Element;
function MultistepDialog(props: MultistepDialogProps): JSX.Element;

// Popover components
function Popover(props: PopoverProps): JSX.Element;
function Tooltip(props: TooltipProps): JSX.Element;

// Panel components
function Drawer(props: DrawerProps): JSX.Element;

Overlay System

Navigation Components

Navigation and menu components for building application structure including breadcrumbs, navbars, tabs, and context menus.

// Navigation structure
function Navbar(props: NavbarProps): JSX.Element;
function Breadcrumbs(props: BreadcrumbsProps): JSX.Element;

// Menu components
function Menu(props: MenuProps): JSX.Element;
function MenuItem(props: MenuItemProps): JSX.Element;
function ContextMenu(props: ContextMenuProps): JSX.Element;

// Tab components
function Tabs(props: TabsProps): JSX.Element;
function Tab(props: TabProps): JSX.Element;

Navigation Components

Data Display

Components for displaying and interacting with data including tables, trees, tags, progress indicators, and non-ideal states.

// Data structure components
function Tree(props: TreeProps): JSX.Element;
function HTMLTable(props: HTMLTableProps): JSX.Element;

// Status and feedback
function ProgressBar(props: ProgressBarProps): JSX.Element;
function Spinner(props: SpinnerProps): JSX.Element;
function NonIdealState(props: NonIdealStateProps): JSX.Element;

// Tag components
function Tag(props: TagProps): JSX.Element;
function TagInput(props: TagInputProps): JSX.Element;

Data Display

Interactive Components

Advanced interactive components including sliders, editable text, resizable elements, and specialized controls.

// Slider components
function Slider(props: SliderProps): JSX.Element;
function RangeSlider(props: RangeSliderProps): JSX.Element;
function MultiSlider(props: MultiSliderProps): JSX.Element;

// Interactive text
function EditableText(props: EditableTextProps): JSX.Element;

// Utility components
function ResizeSensor(props: ResizeSensorProps): JSX.Element;
function OverflowList(props: OverflowListProps): JSX.Element;

Interactive Components

Styling System

Comprehensive styling utilities including CSS classes, design tokens, and utility functions for consistent theming.

// CSS Classes namespace
namespace Classes {
  // Modifier classes
  const ACTIVE: string;
  const DISABLED: string;
  const LARGE: string;
  const SMALL: string;
  
  // Component classes
  const BUTTON: string;
  const CARD: string;
  const DIALOG: string;
}

// Utility functions
function intentClass(intent: Intent): string | undefined;
function elevationClass(elevation: Elevation): string | undefined;

Styling System

Context and Hooks

React Context providers and custom hooks for managing application state, keyboard shortcuts, and overlay behavior.

// Context providers
function BlueprintProvider(props: BlueprintProviderProps): JSX.Element;
function HotkeysProvider(props: HotkeysProviderProps): JSX.Element;

// Custom hooks
function useHotkeys(keys: string, callback: () => void, options?: UseHotkeysOptions): UseHotkeysReturnValue;
function usePrevious<T>(value: T): T | undefined;

Context and Hooks

Common Types

// Core enums
enum Intent {
  NONE = "none",
  PRIMARY = "primary", 
  SUCCESS = "success",
  WARNING = "warning",
  DANGER = "danger"
}

enum Size {
  SMALL = "small",
  MEDIUM = "medium", 
  LARGE = "large"
}

enum Elevation {
  ZERO = 0,
  ONE = 1,
  TWO = 2,
  THREE = 3,
  FOUR = 4
}

enum Position {
  TOP = "top",
  TOP_LEFT = "top-left",
  TOP_RIGHT = "top-right",
  BOTTOM = "bottom",
  BOTTOM_LEFT = "bottom-left",
  BOTTOM_RIGHT = "bottom-right",
  LEFT = "left",
  LEFT_TOP = "left-top",
  LEFT_BOTTOM = "left-bottom",
  RIGHT = "right",
  RIGHT_TOP = "right-top",
  RIGHT_BOTTOM = "right-bottom"
}

// Common prop interfaces
interface IntentProps {
  intent?: Intent;
}

interface Props {
  className?: string;
  id?: string;
}

type MaybeElement = JSX.Element | false | null | undefined;