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

Navigation Components

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

Navigation and menu components for building application structure including breadcrumbs, navbars, tabs, and context menus. These components provide consistent navigation patterns with accessibility support.

Capabilities

Navbar Components

Top-level navigation bar components for application headers.

/**
 * Horizontal navigation bar container with consistent styling
 * @param props - Navbar configuration and content
 */
function Navbar(props: NavbarProps): JSX.Element;

/**
 * Section grouping component for organizing navbar content
 * @param props - Navbar group alignment and content
 */  
function NavbarGroup(props: NavbarGroupProps): JSX.Element;

/**
 * Navbar heading component for application titles
 * @param props - Heading content and styling
 */
function NavbarHeading(props: NavbarHeadingProps): JSX.Element;

/**
 * Visual separator for navbar sections
 * @param props - Divider styling options
 */
function NavbarDivider(props: NavbarDividerProps): JSX.Element;

interface NavbarProps extends Props {
  fixedToTop?: boolean;
  children?: React.ReactNode;
}

interface NavbarGroupProps extends Props {
  align?: Alignment;
  children?: React.ReactNode;
}

interface NavbarHeadingProps extends Props {
  children?: React.ReactNode;
}

interface NavbarDividerProps extends Props {}

Usage Examples:

import { Navbar, NavbarGroup, NavbarHeading, NavbarDivider, Button, Alignment } from "@blueprintjs/core";

<Navbar>
  <NavbarGroup>
    <NavbarHeading>My App</NavbarHeading>
    <NavbarDivider />
    <Button text="Home" minimal />
    <Button text="About" minimal />
  </NavbarGroup>
  <NavbarGroup align={Alignment.RIGHT}>
    <Button text="Login" />
  </NavbarGroup>
</Navbar>

Breadcrumb Components

Hierarchical navigation showing current location.

/**
 * Container for breadcrumb navigation items
 * @param props - Breadcrumbs configuration and overflow handling
 */
function Breadcrumbs(props: BreadcrumbsProps): JSX.Element;

/**
 * Individual breadcrumb item with optional link behavior
 * @param props - Breadcrumb content and interaction handlers
 */
function Breadcrumb(props: BreadcrumbProps): JSX.Element;

interface BreadcrumbsProps extends Props {
  breadcrumbRenderer?: (props: BreadcrumbProps) => React.ReactNode;
  collapseFrom?: Boundary;
  currentBreadcrumbRenderer?: (props: BreadcrumbProps) => React.ReactNode;
  items: BreadcrumbProps[];
  minVisibleItems?: number;
  overflowListProps?: Partial<OverflowListProps>;
  popoverProps?: Partial<PopoverProps>;
}

interface BreadcrumbProps extends ActionProps, LinkProps, Props {
  current?: boolean;
  disabled?: boolean;
  href?: string;
  icon?: IconName | MaybeElement;
  target?: string;
  text?: React.ReactNode;
}

enum Boundary {
  START = "start",
  END = "end"  
}

Menu Components

Vertical menu structures for navigation and actions.

/**
 * Vertical menu container for menu items and dividers
 * @param props - Menu configuration and content
 */
function Menu(props: MenuProps): JSX.Element;

/**
 * Individual menu item with icon, text, and interaction support
 * @param props - Menu item content, styling, and event handlers
 */
function MenuItem(props: MenuItemProps): JSX.Element;

/**
 * Visual separator between menu sections
 * @param props - Menu divider styling and content
 */
function MenuDivider(props: MenuDividerProps): JSX.Element;

interface MenuProps extends Props {
  large?: boolean;
  ulRef?: React.Ref<HTMLUListElement>;
  children?: React.ReactNode;
}

interface MenuItemProps extends ActionProps, LinkProps, Props {
  active?: boolean;
  disabled?: boolean;
  href?: string;
  htmlTitle?: string;
  icon?: IconName | MaybeElement;
  intent?: Intent;
  label?: React.ReactNode;
  labelClassName?: string;
  labelElement?: React.ReactElement;
  multiline?: boolean;
  popoverProps?: Partial<PopoverProps>;
  roleStructure?: "menuitem" | "listoption" | "listitem" | "none";
  selected?: boolean;
  shouldDismissPopover?: boolean;
  submenuProps?: Partial<PopoverProps>;
  tagName?: keyof JSX.IntrinsicElements;
  target?: string;
  text?: React.ReactNode;
  textClassName?: string;
  children?: React.ReactNode;
}

interface MenuDividerProps extends Props {
  title?: React.ReactNode;
}

Usage Examples:

import { Menu, MenuItem, MenuDivider, Intent } from "@blueprintjs/core";

<Menu>
  <MenuItem icon="new-text-box" text="New File" />
  <MenuItem icon="new-object" text="New Folder" />
  <MenuDivider />
  <MenuItem icon="cog" text="Settings" />
  <MenuItem 
    icon="log-out" 
    text="Logout" 
    intent={Intent.DANGER}
    onClick={handleLogout}
  />
</Menu>

Tab Components

Tabbed interface for organizing content sections.

/**
 * Tabbed interface container with tab list and panel management
 * @param props - Tabs configuration, selection, and content
 */
function Tabs(props: TabsProps): JSX.Element;

/**
 * Individual tab with title, icon, and selection state
 * @param props - Tab content and styling options
 */
function Tab(props: TabProps): JSX.Element;

/**
 * Content panel associated with a specific tab
 * @param props - Tab panel content and configuration
 */
function TabPanel(props: TabPanelProps): JSX.Element;

/**
 * Flexible space expander for tab layouts
 * @param props - Expander styling options
 */
function TabsExpander(props: Props): JSX.Element;

interface TabsProps extends Props {
  animate?: boolean;
  defaultSelectedTabId?: TabId;
  fill?: boolean;
  large?: boolean;
  onChange?: (newTabId: TabId, prevTabId: TabId | undefined, event: React.MouseEvent<HTMLElement>) => void;
  renderActiveTabPanelOnly?: boolean;
  selectedTabId?: TabId;
  vertical?: boolean;
  children?: React.ReactNode;
}

interface TabProps extends Props {
  disabled?: boolean;
  icon?: IconName | MaybeElement;
  id: TabId;
  panel?: React.ReactNode;
  panelClassName?: string;
  tagName?: keyof JSX.IntrinsicElements;
  title?: React.ReactNode;
  children?: React.ReactNode;
}

interface TabPanelProps extends Props {
  children?: React.ReactNode;
}

type TabId = string | number;

// Alias for TabsExpander
const Expander = TabsExpander;

Usage Examples:

import { Tabs, Tab, TabPanel } from "@blueprintjs/core";

// Basic tabs
<Tabs id="example-tabs" onChange={handleTabChange}>
  <Tab id="home" title="Home" panel={<div>Home content</div>} />
  <Tab id="profile" title="Profile" icon="user" panel={<div>Profile content</div>} />
  <Tab id="settings" title="Settings" panel={<div>Settings content</div>} />
</Tabs>

// Controlled tabs with separate panels
<Tabs selectedTabId={activeTab} onChange={setActiveTab}>
  <Tab id="tab1" title="First Tab" />
  <Tab id="tab2" title="Second Tab" />
</Tabs>
<TabPanel>
  {activeTab === "tab1" ? <FirstTabContent /> : <SecondTabContent />}
</TabPanel>

Breadcrumb Advanced Usage

import { Breadcrumbs, Button } from "@blueprintjs/core";

const breadcrumbItems = [
  { text: "Home", href: "/" },
  { text: "Documents", href: "/documents" },
  { text: "Projects", href: "/documents/projects" },
  { text: "Current Project", current: true }
];

<Breadcrumbs
  items={breadcrumbItems}
  minVisibleItems={2}
  overflowListProps={{
    collapseFrom: "start"
  }}
/>

Menu Advanced Features

import { Menu, MenuItem, MenuDivider, Popover } from "@blueprintjs/core";

// Menu with submenus
<Menu>
  <MenuItem text="File">
    <MenuItem text="New" icon="document" />
    <MenuItem text="Open" icon="folder-open" />
    <MenuDivider />
    <MenuItem text="Save" icon="floppy-disk" />
  </MenuItem>
  <MenuItem text="Edit">
    <MenuItem text="Undo" icon="undo" />
    <MenuItem text="Redo" icon="redo" />
  </MenuItem>
</Menu>

// Menu with custom rendering
<Menu>
  <MenuItem 
    text="User Profile"
    label="Ctrl+P"
    labelElement={<span className="custom-label">★</span>}
    multiline
  />
</Menu>

Common Types

// Action and link prop interfaces
interface ActionProps {
  disabled?: boolean;
  icon?: IconName | MaybeElement;
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
  text?: React.ReactNode;
}

interface LinkProps {
  href?: string;
  target?: string;
  rel?: string;
}