@actabldesign/bellhop-core

v0.2.0

Published

a month ago

Bellhop Web Components Library built with StencilJS

0High
0Medium
0Low

@actabldesign/bellhop-core

Bellhop Web Components Library built with StencilJS. Framework-agnostic web components that can be used in any frontend application.

Installation

npm install @actabldesign/bellhop-core @actabldesign/bellhop-styles

Usage

Vanilla JavaScript / HTML

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="node_modules/@actabldesign/bellhop-styles/index.css"
    />
    <script
      type="module"
      src="node_modules/@actabldesign/bellhop-core/dist/bellhop-core/bellhop-core.esm.js"
    ></script>
  </head>
  <body>
    <bh-button label="Click Me" hierarchy="primary"></bh-button>
  </body>
</html>

React

Use the React wrapper package for better integration:

npm install @actabldesign/bellhop-react

import { BhButton } from '@actabldesign/bellhop-react';

function App() {
  return (
    <BhButton
      label="Click Me"
      hierarchy="primary"
      onBhClick={(e) => console.log('Clicked!', e)}
    />
  );
}

Angular

Import and register the custom elements in your main.ts:

import { defineCustomElements } from '@actabldesign/bellhop-core/loader';

defineCustomElements();

Add CUSTOM_ELEMENTS_SCHEMA to your module or component:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Use in templates:

<bh-button
  label="Click Me"
  hierarchy="primary"
  (bhClick)="handleClick($event)"
></bh-button>

Available Components

Layout & Navigation

| Component | Tag | Description | | --------------- | ---------------------- | ------------------------------ | | Appbar | <bh-appbar> | Application header bar | | Sidebar | <bh-sidebar> | Side navigation panel | | Card | <bh-card> | Content container card | | Card Header | <bh-card-header> | Card header section | | Card Footer | <bh-card-footer> | Card footer section | | Modal | <bh-modal> | Modal dialog | | Modal Header | <bh-modal-header> | Modal header section | | Modal Actions | <bh-modal-actions> | Modal action buttons container | | Accordion | <bh-accordion> | Collapsible content sections | | Accordion Item | <bh-accordion-item> | Individual accordion section | | Tabs | <bh-tabs> | Tab navigation | | Tab Item | <bh-tab-item> | Individual tab | | Breadcrumbs | <bh-breadcrumbs> | Navigation breadcrumbs | | Page Navigation | <bh-page-navigation> | In-page navigation | | Pagination | <bh-pagination> | Page pagination controls |

Form Inputs

| Component | Tag | Description | | ------------------ | ------------------------- | ------------------------------------- | | Button | <bh-button> | Primary button component | | Button Icon | <bh-button-icon> | Icon-only button | | Input Text | <bh-input-text> | Text input field | | Input Password | <bh-input-password> | Password input with visibility toggle | | Input Number | <bh-input-number> | Numeric input field | | Input Autocomplete | <bh-input-autocomplete> | Autocomplete text input | | Input Verification | <bh-input-verification> | Verification code input | | Textarea | <bh-textarea> | Multi-line text input | | Checkbox | <bh-checkbox> | Checkbox input | | Checkbox Group | <bh-checkbox-group> | Group of checkboxes | | Radio Button | <bh-radio-button> | Radio button input | | Toggle | <bh-toggle> | Toggle switch | | Dropdown | <bh-dropdown> | Dropdown select | | Label | <bh-label> | Form field label |

Date & Time

| Component | Tag | Description | | ----------------- | ------------------------ | --------------------- | | Date Picker | <bh-date-picker> | Single date selection | | Date Range Picker | <bh-date-range-picker> | Date range selection | | Month Picker | <bh-month-picker> | Month selection |

Data Display

| Component | Tag | Description | | -------------- | --------------------- | --------------------------------- | | Data Grid | <bh-data-grid> | Data table with sorting/filtering | | Badge | <bh-badge> | Status badge | | Badge Dot | <bh-badge-dot> | Dot indicator badge | | Tag | <bh-tag> | Label tag | | Avatar | <bh-avatar> | User avatar | | Avatar Add | <bh-avatar-add> | Add avatar button | | Avatar Stacked | <bh-avatar-stacked> | Stacked avatar group | | Tooltip | <bh-tooltip> | Tooltip on hover | | Popover | <bh-popover> | Popover content |

Charts

| Component | Tag | Description | | ------------- | -------------------- | ----------------------- | | Bar Chart | <bh-bar-chart> | Bar chart visualization | | Pie Chart | <bh-pie-chart> | Pie chart visualization | | Trend Chart | <bh-trend-chart> | Trend line chart | | Chart Tooltip | <bh-chart-tooltip> | Chart tooltip |

Feedback & Status

| Component | Tag | Description | | --------------- | ---------------------- | ------------------------ | | Notification | <bh-notification> | Toast notification | | Loader Spinner | <bh-loader-spinner> | Loading spinner | | Empty State | <bh-empty-state> | Empty state placeholder | | Skeleton Loader | <bh-skeleton-loader> | Content loading skeleton |

Branding & Media

| Component | Tag | Description | | ----------------- | ------------------------ | --------------------------- | | Featured Icon | <bh-featured-icon> | Highlighted icon display | | Logo Box | <bh-logo-box> | Logo container | | Illustrations | <bh-illustrations> | SVG illustration display | | Product Switcher | <bh-product-switcher> | Product navigation switcher | | Property Switcher | <bh-property-switcher> | Property selection |

Component Naming Convention

All components use the bh- prefix to avoid conflicts with other libraries.

Styling

Components require the @actabldesign/bellhop-styles package for proper styling:

@import '@actabldesign/bellhop-styles';

Shadow DOM Styling

Bellhop components use Shadow DOM for style encapsulation. To customize component styles:

CSS Custom Properties - Override design tokens that pierce the shadow boundary:
```
:root {
  --color-primary-500: #4f46e5;
}
```

::part() Selector - Style exposed internal elements:

bh-button::part(button) {
  border-radius: 9999px;
}

Component Props - Use props like hierarchy, size, variant for standard variations.

See the Storybook documentation for a complete guide on Shadow DOM styling and available CSS parts.

TypeScript Support

React Projects (with React Wrappers)

If you use @actabldesign/bellhop-react, TypeScript support is built in — all wrapper components have typed props and events. No additional setup needed.

React Projects (with Raw Web Components)

If you use raw <bh-*> web component tags directly in React JSX, add the type declarations to get TypeScript support:

Option 1 — tsconfig.json (recommended):

{
  "compilerOptions": {
    "types": ["@actabldesign/bellhop-core/react"]
  }
}

Option 2 — Triple-slash directive in a .d.ts file:

/// <reference types="@actabldesign/bellhop-core/react" />

This augments JSX.IntrinsicElements with typed attributes for all <bh-*> elements, including bh-button, bh-data-grid, bh-sidebar, and others.

Component Type Definitions

The auto-generated components.d.ts provides full type definitions for all component elements, props, and events. These are included in the package and available for import:

import type { Components, Events } from '@actabldesign/bellhop-core';

Data Grid Custom Cells

The bh-data-grid component uses TanStack Table. Custom cell rendering requires Stencil's h() function, not HTML strings:

import { h } from '@stencil/core';

const columns = [
  {
    accessorKey: 'status',
    header: 'Status',
    cell: (info) => h('bh-badge', {
      label: info.getValue(),
      variant: info.getValue() === 'Active' ? 'success' : 'neutral'
    })
  }
];

See the Storybook documentation for more cell rendering patterns.

Development

# Build the library
npm run build

# Run tests
npm run test

# Start dev server
npm run start

# Generate new component
npm run generate

Related Packages

@actabldesign/bellhop-react - React component wrappers
@actabldesign/bellhop-angular - Angular component wrappers
@actabldesign/bellhop-styles - CSS styles and design tokens
@actabldesign/bellhop-assets - SVG icons, illustrations, logos

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@actabldesign/bellhop-core

Installation

Usage

Vanilla JavaScript / HTML

React

Angular

Available Components

Layout & Navigation

Form Inputs

Date & Time

Data Display

Charts

Feedback & Status

Branding & Media

Component Naming Convention

Styling

Shadow DOM Styling

TypeScript Support

React Projects (with React Wrappers)

React Projects (with Raw Web Components)

Component Type Definitions

Data Grid Custom Cells

Development

Related Packages

License