open-index/open-npm huggingface dataset:
npm package: @schalltech/honeycomb-react-microapp
Description: [![NPM](https://img.shields.io/npm/v/@schalltech/honeycomb-react-microapp.svg)](https://www.npmjs.com/package/@schalltech/honeycomb-microapp)
Author: eschall
Latest version: 0.0.0-beta.17

[![NPM](https://img.shields.io/npm/v/@schalltech/honeycomb-react-microapp.svg)](https://www.npmjs.com/package/@schalltech/honeycomb-microapp)

# Honeycomb React Microapp
#### ATTN: Honeycomb Studio, Honeycomb Marketplace, microapps, components and libraries are in pre-release and are not intended to be used in a production environment. The platform is currently under development and releases are not guaranteed to be backwards compatible.

[Honeycomb Studio](https://microapp.studio) | [Honeycomb Marketplace](https://microapp.market)
 :-----: | :-----:
<img src="https://microapp.services/cdn/media/5f7117ce8a49a4204cd98088"/> | <img src="https://microapp.services/cdn/media/5f7117ce8a49a4204cd98086"/>

__Honeycomb React Microapp__ is a Higher-Order Component (_HOC_) used to dynamically inject React based microapps into browser applications at runtime. It can be used in traditionally coded React applications as well as Honeycomb Cloud applications. It can also be used in other Honeycomb Microapps to create a nested hierarchy of microapps to render an entire page.

## Installation

1. Download and install the microapp package.

   ```bash
   yarn add @schalltech/honeycomb-react-microapp
   ```
   ```bash
   npm i @schalltech/honeycomb-react-microapp
   ```

2. Once installed, import the package module.
   ```jsx
   import MicroApp from '@schalltech/honeycomb-react-microapp';
   ```
3. Add a microapp into your page layout and define its configuration.

   ```jsx
   <MicroApp
      config={{
        View: {
          Name: 'ma-label',
          Scope: 'schalltech',
          Version: 'latest',
        },
        DefaultValue: 'Hello World!'
      }}
   />
   ```

## Integration Example
The following is an example of how a Honeycomb Microapp could be integrated into an existing React application.

```jsx
import React, { Component } from 'react';
import MicroApp from '@schalltech/honeycomb-react-microapp';

class ExampleHost extends Component {
  render() {
    return (
      <MicroApp
        config={{
          View: {
            Name: 'ma-label',
            Scope: 'schalltech',
            Version: 'latest'
          },
          DefaultValue: 'Hello World!'
        }}
      />
    );
  }
}

export default ExampleHost;
```
npm package: @schaman/angular-breadcrumb
Description: This module provides custom breadcrumb functionality. To use the module do 3 easy steps.
Latest version: 2.0.1

# @schaman/angular-breadcrumb

This module provides custom breadcrumb functionality. To use the module do 3 easy steps.

Provide the module for root.

```typescript
SchamanBreadcrumbModule.forRoot();
```

Inject the order service on component level in your page. This will control the order of the breadcrumbs. Also use the `*schamanBreadcrumb` structural directive.

```typescript
@Component({
  template: `<a *schamanBreadcrumb routerLink="Homepage">Homepage</a>`,
  selector: 'test-1',
  providers: [BreadcrumbOrderService],
})
class RouterPageComponent {}
```

Use the breadcrumb anywhere.

```typescript
@Component({
  template: `
    <schaman-breadcrumb [separator]="sep"></schaman-breadcrumb>
    <ng-template #sep let-i="index">&gt;</ng-template>
    <router-outlet></router-outlet>
  `,
})
class LayoutComponent {}
```

## Running unit tests

Run `nx test angular-breadcrumb` to execute the unit tests.
npm package: @schaman/angular-material-error
Description: Adding every form error in your application is boilerplate.
Latest version: 3.0.1

# @schaman/angular-material-error

Adding every form error in your application is boilerplate.

## Setup

Import the `SchamanMaterialErrorModule`.

Provide your own `ErrorMessageProvider` to use your own messages. Pro-tip: inject other translator services.

```typescript
@Injectable()
export class MyFancyErrorMessageProvider extends ErrorMessageProvider {
  public constructor(private readonly translateService: TranslateService) {
    super();
  }
  public getErrorMessagesFor(errors: ValidationErrors): string {
    if (errors.required) {
      return this.translateService.get('ERROR.REQUIRED');
    }
    if (errors.pattern) {
      if (errors.requiredPattern === emailPattern) {
        return this.translateService.get('ERROR.EMAIL_PATTERN');
      }
      return this.translateService.get('ERROR.UNKNOWN_PATTERN');
    }
    return this.translateService.get('ERROR.UNKNOWN');
  }
}
```

```typescript
@NgModule({
  providers: [
    {
      provide: ErrorMessageProvider,
      useClass: MyFancyErrorMessageProvider,
    },
  ],
})
export class Module {}
```

In your component use the `*schamanDynamicError` directive:

```typescript
@Component({
  template: `<mat-form-field>
    <input matInput [formControl]="formControl" />
    <mat-error *schamanDynamicError></mat-error>
  </mat-form-field>`,
})
class DirectiveTestComponent {
  formControl = new FormControl('', Validators.required);
}
```

This will add and remove the error text if needed. (On state change or form submit.)

## Overrides

You can also add a custom `ErrorMessageProvider` on component level to override the translations in a single component.

```typescript
@Component({
  /* ... */
  providers: [
    {
      provide: ErrorMessageProvider,
      useClass: MyFancierErrorMessageProvider,
    },
  ],
})
export class FancierComponent {}
```

## Running unit tests

Run `nx test angular-material-error` to execute the unit tests.
npm package: @schaman/angular-router-params
Description: Get router parameters in the easiest way.
Latest version: 3.0.1

# @schaman/angular-router-params

Get router parameters in the easiest way.

Provide, inject and use the service.

```typescript
@Component({
  /* ... */
  providers: [SchamanRouterParams],
})
class ExampleComponent {
  public id$ = this.routerParams.id$;
  public carId$ = this.routerParams['carId'];
  public constructor(private routerParams: SchamanRouterParams) {}
}
```

## Browser-compatibility

The library uses [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). See [compatibility](https://caniuse.com/proxy).

## Running unit tests

Run `nx test angular-router-params` to execute the unit tests.
npm package: @schaman/react-breadcrumb
Description: Adds breadcrumb functionality to any React application. Use the provider and every child will be shown in the breadcrumb.
Latest version: 2.0.1

# @schaman/react-breadcrumb

Adds breadcrumb functionality to any React application. Use the provider and every child will be shown in the breadcrumb.

```tsx
<BreadcrumbContextProvider>
  <Breadcrumb>Test1</Breadcrumb>
  {/* Here you can add routes, also. */}
  <div>
    <Breadcrumb>Test2</Breadcrumb>
  </div>
  <BreadcrumbRenderer />
</BreadcrumbContextProvider>
```

To customize styles wrap the component:

```tsx
function FancyBreadcrumb({ children }) {
  return (
    <Breadcrumb>
      <FancyComponent>{children}</FancyComponent>
    </Breadcrumb>
  );
}
```

## Running unit tests

Run `nx test react-breadcrumb` to execute the unit tests via [Jest](https://jestjs.io).