@actabldesign/bellhop-angular 0.0.4 → 0.0.12

package/README.md

@@ -0,0 +1,202 @@
+# @actabldesign/bellhop-angular
+
+Angular wrapper components for the Bellhop design system. Provides Angular-friendly wrappers around the Stencil web components from `@actabldesign/bellhop-core`.
+
+## Installation
+
+```bash
+npm install @actabldesign/bellhop-angular @actabldesign/bellhop-core @actabldesign/bellhop-styles
+```
+
+## Setup
+
+### 1. Register Custom Elements
+
+In your `main.ts`:
+
+```typescript
+import { defineCustomElements } from '@actabldesign/bellhop-core/loader';
+
+defineCustomElements();
+```
+
+### 2. Import Styles
+
+In your `src/styles.css`:
+
+```css
+@import '@actabldesign/bellhop-styles';
+```
+
+### 3. Add Schema to Module/Component
+
+For standalone components:
+
+```typescript
+import { Component } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<bh-button label="Click Me" hierarchy="primary"></bh-button>`,
+})
+export class ExampleComponent {}
+```
+
+For NgModule-based apps:
+
+```typescript
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class AppModule {}
+```
+
+## Usage
+
+### Basic Example
+
+```html
+<bh-button
+  label="Primary Button"
+  hierarchy="primary"
+  (bhClick)="handleClick($event)"
+></bh-button>
+```
+
+### Form Inputs
+
+```html
+<bh-input-text
+  label="Email"
+  placeholder="Enter your email"
+  [value]="email"
+  (bhInput)="onEmailChange($event)"
+></bh-input-text>
+
+<bh-dropdown
+  label="Select an option"
+  [options]="options"
+  (bhChange)="onOptionSelect($event)"
+></bh-dropdown>
+
+<bh-checkbox
+  label="Accept terms"
+  [checked]="accepted"
+  (bhChange)="onAcceptChange($event)"
+></bh-checkbox>
+```
+
+### Cards and Layout
+
+```html
+<bh-card>
+  <bh-card-header>
+    <span slot="title">Card Title</span>
+    <span slot="subtitle">Card subtitle</span>
+  </bh-card-header>
+
+  <p>Card content goes here</p>
+
+  <bh-card-footer>
+    <bh-button label="Cancel" hierarchy="tertiary"></bh-button>
+    <bh-button label="Save" hierarchy="primary"></bh-button>
+  </bh-card-footer>
+</bh-card>
+```
+
+### Modal Dialog
+
+```html
+<bh-modal [open]="isModalOpen" (bhClose)="closeModal()">
+  <bh-modal-header>
+    <span slot="title">Confirm Action</span>
+  </bh-modal-header>
+
+  <p>Are you sure you want to proceed?</p>
+
+  <bh-modal-actions>
+    <bh-button
+      label="Cancel"
+      hierarchy="secondary"
+      (bhClick)="closeModal()"
+    ></bh-button>
+    <bh-button
+      label="Confirm"
+      hierarchy="primary"
+      (bhClick)="confirm()"
+    ></bh-button>
+  </bh-modal-actions>
+</bh-modal>
+```
+
+### Data Display
+
+```html
+<bh-badge label="New" color="primary"></bh-badge>
+
+<bh-tag label="Category" [removable]="true" (bhRemove)="removeTag()"></bh-tag>
+
+<bh-avatar name="John Doe" size="md"></bh-avatar>
+```
+
+## Event Handling
+
+All Bellhop events use the `bh` prefix. In Angular templates, bind to these using the standard event syntax:
+
+```html
+<!-- Button click -->
+<bh-button (bhClick)="handleClick($event)"></bh-button>
+
+<!-- Input change -->
+<bh-input-text
+  (bhInput)="handleInput($event)"
+  (bhChange)="handleChange($event)"
+></bh-input-text>
+
+<!-- Dropdown selection -->
+<bh-dropdown (bhChange)="handleSelect($event)"></bh-dropdown>
+
+<!-- Modal close -->
+<bh-modal (bhClose)="handleClose()"></bh-modal>
+```
+
+## Available Components
+
+All components from `@actabldesign/bellhop-core` are available. Key components include:
+
+**Layout**: `bh-appbar`, `bh-sidebar`, `bh-card`, `bh-modal`, `bh-accordion`, `bh-tabs`
+
+**Forms**: `bh-button`, `bh-input-text`, `bh-input-password`, `bh-input-number`, `bh-textarea`, `bh-checkbox`, `bh-radio-button`, `bh-toggle`, `bh-dropdown`
+
+**Date/Time**: `bh-date-picker`, `bh-date-range-picker`, `bh-month-picker`
+
+**Data Display**: `bh-data-grid`, `bh-badge`, `bh-tag`, `bh-avatar`, `bh-tooltip`
+
+**Feedback**: `bh-notification`, `bh-loader-spinner`, `bh-empty-state`, `bh-skeleton-loader`
+
+**Navigation**: `bh-breadcrumbs`, `bh-page-navigation`, `bh-pagination`
+
+**Charts**: `bh-bar-chart`, `bh-pie-chart`, `bh-trend-chart`
+
+See the [bellhop-core README](../bellhop-core/README.md) for the complete component list.
+
+## Compatibility
+
+- Angular 19+
+- Works with both standalone components and NgModule-based apps
+
+## Related Packages
+
+- `@actabldesign/bellhop-core` - Web Components (StencilJS)
+- `@actabldesign/bellhop-react` - React component wrappers
+- `@actabldesign/bellhop-styles` - CSS styles and design tokens
+- `@actabldesign/bellhop-assets` - SVG icons, illustrations, logos
+
+## License
+
+MIT

package/dist/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@actabldesign/bellhop-angular",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "description": "Angular wrapper components for Bellhop Stencil web components",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/actabldesign/bellhop.git",
+    "url": "git+https://github.com/actabldesign/bellhop.git",
     "directory": "packages/bellhop-angular"
   },
   "files": [
@@ -34,6 +34,7 @@
   },
   "license": "MIT",
   "publishConfig": {
-    "registry": "https://npm.pkg.github.com/"
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
   }
 }