open-index/open-npm huggingface dataset:
npm package: @rfoxes/mcp-server-hubspot
Description: An MCP (Model Context Protocol) server implementation that integrates Claude with HubSpot.
Author: Rfoxes
Latest version: 0.0.10

# mcp-server-hubspot

An MCP (Model Context Protocol) server implementation that integrates Claude with Hubspot, enabling natural language interactions with your Salesforce data and metadata. This server allows Claude to query, modify, and manage your HubSpot objects and records using everyday language.
npm package: @rfoxlabs/rfox-nft-webcomponents
Description: Rfox NFT WebComponents
Latest version: 0.2.8

# RFOX Web Components

RFOX's NFT Web Components Collection


## Installation

1. Install via npm

```bash
npm install @rfl-nftplatform/rfox-webcomponents
```

2. Import via CDN

```html
<script type='module' src='https://unpkg.com/@rfoxlabs/rfox-nft-webcomponents/dist/components/components.esm.js'></script>
```

## Example

```html
<script type='module' src='https://unpkg.com/@rfoxlabs/rfox-nft-webcomponents/dist/components/components.esm.js'></script>
<!-- You can use the element anywhere in your template, JSX, HTML, etc -->
<rfox-drop-kit id="rinkebyPanel"
      collection-address="0xa83fc9856a63d6a157756ea428b7d12dfebffe95"
      collection-id="62849ecd4f07d0001cb8f952"
      contract-type="standard_721"
      network-name="rinkeby"
      chain-id="4"
      dev="true"
      wallet-text="Connect to Rinkeby"
      mint-text="Buy" />
```

[Built Using Stencil](https://stenciljs.com)
npm package: @rfprodz/backend-diagnostics
Description: NestJS API diagnostics module.
Author: rfprod
Latest version: 1.1.7

# backend-diagnostics

This library was generated with [Nx](https://nx.dev).

## Description

Diagnostics module for NestJS backends.

## Usage

Add to the root API module

```typescript
...
@Module({
  ...
  imports: [
    ...
    HttpModule.registerAsync({
      useFactory: () => ({
        timeout: 10000,
        maxRedirects: 5,
      }),
    }),
    AppDiagnosticsModule.forRoot(),
    ...
  ],
  ...
})
export class AppApiModule {}
```

Add to the `main.ts` file

```typescript
/**
 * Express server.
 */
const server: e.Express = e();

...

async function bootstrap(expressInstance: e.Express): Promise<INestApplication> {
  const app = await NestFactory.create(AppApiModule, new ExpressAdapter(expressInstance));
  app.useWebSocketAdapter(new WsAdapter(app));

  ...

  return app.init();
}

void bootstrap(server);

```

### Examples

Example of using the diagnostics module in [the API application module](https://github.com/rfprod/nx-ng-starter/blob/main/apps/api/src/app/api.module.ts#L66)

## References

- [Nx](https://nx.dev)
- [NestJS](https://nestjs.com)
npm package: @rfprodz/client-d3-charts
Description: Angular chart components based on D3JS (https://d3js.org).
Author: rfprod
Latest version: 1.6.12

# Angular D3 Chart Components Module

This library was generated with [Nx](https://nx.dev).

## Description

The Angular chart components based on the [D3.js](https://d3js.org/) library.

Supported chart types:

- bar chart;
- line chart;
- pie chart;
- radar chart;
- force-directed chart;

The library contains Angular components as well as basic utility functions that can be used to implement the chart types mentioned above in TypeScript.

## Usage

### Within the development workspace

Import the charts module

```typescript
import { AppD3ChartsModule } from '@app/client-d3-charts';
```

### As an external package

Install the package

```bash
yarn add @rfprodz/client-d3-charts @angular/common @angular/core @types/d3 d3
```

Import the charts module

```typescript
import { AppD3ChartsModule } from '@rfprodz/client-d3-charts';
```

### Use the chart components

#### in templates

```html
<!-- bar chart -->
<app-bar-chart></app-bar-chart>
<!-- line chart -->
<app-line-chart></app-line-chart>
<!-- pie chart -->
<app-pie-chart></app-pie-chart>
<!-- gauge chart -->
<app-gauge-chart></app-gauge-chart>
<!-- radar chart -->
<app-radar-chart></app-radar-chart>
<!-- force-directed chart -->
<app-force-directed-chart></app-force-directed-chart>
```

#### in classes

```typescript
import {
  AppBarChartComponent,
  AppForceDirectedChartComponent,
  AppGaugeChartComponent,
  AppLineChartComponent,
  AppPieChartComponent,
  AppRadarChartComponent,
} from '@rfprodz/client-d3-charts';
```

### Examples

See the chart examples component

```typescript
import { AppChartExamplesComponent } from '@rfprodz/client-d3-charts';
```

or the [source code](https://github.com/rfprod/nx-ng-starter/blob/main/libs/client-d3-charts/src/lib/components/chart-examples/)

## References

- [Nx](https://nx.dev)
- [Angular](https://angular.io)
- [D3.js](https://d3js.org/)
npm package: @rfprodz/client-guided-tour
Description: Guided tour feature for Angular clients.
Author: rfprod
Latest version: 1.2.12

# Guided Tour Module for Angular

This library was generated with [Nx](https://nx.dev).

## Description

Guided tour feature for Angular clients.

## Usage

### Within the development workspace

Import the module

```typescript
...
import { AppGuidedTourModule } from '@app/client-guided-tour';

@NgModule({
  imports: [
    ...
    AppGuidedTourModule,
    ...
  ],
  ...
})
export class AppModule {}
```

### As an external package

#### Install the package

```bash
yarn add @rfprodz/client-guided-tour @angular/cdk @angular/common @angular/core @angular/material @angular/router
```

#### Import the module

```typescript
...
import { AppGuidedTourModule } from '@rfprodz/client-guided-tour';

@NgModule({
  imports: [
    ...
    AppGuidedTourModule,
    ...
  ],
  ...
})
export class AppModule {}
```

#### Use in components

```html
...
<p>... Some content ...</p>

<div [appGuidedTour]="config.at(0)" [highlightElement]="false">first item to explain</div>

<p>... Some content ...</p>

<div [appGuidedTour]="config.at(1)" [highlightElement]="true">second item to explain</div>
...
```

```typescript
@Component({
  ...
  providers: [AppGuidedTourService], // <-- declare a service
  ...
})
export class GuidedComponent implements AfterViewInit {
  /** Locate steps. */
  @ViewChildren(AppGuidedTourDirective) public steps!: QueryList<AppGuidedTourDirective>;

  /** Configure the tour. */
  public tourConig$ = signal<IGuidedTourData[]>([
    {
      index: 0,
      title: 'first',
      subtitle: 'First step',
      description: 'The first step. Highlighting disabled.',
      first: true,
      last: false,
    },
    {
      index: 1,
      title: 'second',
      subtitle: 'Second step',
      description: 'The second step. Highlighting enabled.',
      first: false,
      last: true,
    },
  ]);

  constructor(public readonly tour: AppGuidedTourService) {}

  public ngAfterViewInit(): void {
    this.tour.configuration = this.steps; // <-- add steps to the service
  }
}
```

#### Examples

- [module](https://github.com/rfprod/nx-ng-starter/blob/main/libs/client-guided-tour/src/lib/guided-tour-example.module.ts)
- [component](https://github.com/rfprod/nx-ng-starter/tree/main/libs/client-guided-tour/src/lib/components/guided-tour-example)

## References

- [Nx](https://nx.dev)
- [Angular](https://angular.io)
- [Angular Material](https://material.angular.io)
npm package: @rfprodz/client-pwa-offline
Description: PWA offline feature for Angular clients.
Author: rfprod
Latest version: 1.2.12

# PWA Offline Module for Angular

PWA offline feature for Angular clients.

## Description

Registers an interceptor that activates a view indicating that the client system if offline.

Registers a route that serves the view that is activated when the client system goes offline.

## Usage

### Within the development workspace

Import the module

```typescript
...
import { AppPwaOfflineModule } from '@app/client-pwa-offline';

@NgModule({
  imports: [
    ...
    AppPwaOfflineModule,
    ...
  ],
  ...
})
export class AppModule {}
```

### As an external package

Install the package

```bash
yarn add @rfprodz/client-pwa-offline @angular/common @angular/core @angular/material @angular/router
```

Import the module

```typescript
...
import { AppPwaOfflineModule } from '@rfprodz/client-pwa-offline';

@NgModule({
  imports: [
    ...
    AppPwaOfflineModule,
    ...
  ],
  ...
})
export class AppModule {}
```

## Developer commands reference

```bash
npx nx run tools:help --search client-pwa-offline:
```

## References

- [Nx](https://nx.dev)
- [Angular](https://angular.io)
- [Angular Material](https://material.angular.io)
npm package: @rfprodz/client-util-eliza
Description: Angular chatbot logic based on Eliza (https://en.wikipedia.org/wiki/ELIZA).
Author: rfprod
Latest version: 1.5.13

# Angular Eliza Chatbot Module

This library was generated with [Nx](https://nx.dev).

## Description

The Angular chatbot service based on an early natural language processing program called Eliza.

> ELIZA is an early natural language processing computer program created from 1964 to 1966 at the MIT Artificial Intelligence Laboratory by Joseph Weizenbaum. Created to demonstrate the superficiality of communication between humans and machines, Eliza simulated conversation by using a "pattern matching" and substitution methodology that gave users an illusion of understanding on the part of the program, but had no built in framework for contextualizing events.

Source and more information about the Elisa program: [https://en.wikipedia.org/wiki/ELIZA](https://en.wikipedia.org/wiki/ELIZA)

## Usage

### Within the development workspace

Import the charts module

```typescript
import { AppElizaModule } from '@app/client-util-eliza';
```

Example [client.module.ts](https://github.com/rfprod/nx-ng-starter/blob/main/apps/client/src/app/client.module.ts#L52)

### As an external package

Install the package

```bash
yarn add @rfprodz/client-util-eliza @angular/core
```

#### With the default configuration

Import in your application root module

```typescript
import { AppElizaModule } from '@rfprodz/client-util-eliza';

@NgModule({
...
  imports: [
    ...
    AppElizaModule.forRoot(),
    ...
  ],
...
})
export class AppModule {
  ...
}
```

#### With a custom configuration

Import in your application root module

```typescript
import { AppElizaModule, IElizaData } from '@rfprodz/client-util-eliza';

const customElizaData: IElizaData = {
  ...
};

@NgModule({
...
  imports: [
    ...
    AppElizaModule.forRoot(customElizaData),
    ...
  ],
...
})
export class AppModule {
  ...
}
```

### Examples

Example [chatbot-root.component.ts](https://github.com/rfprod/nx-ng-starter/blob/main/libs/client-chatbot/src/lib/components/chatbot-root/chatbot-root.component.ts)

## References

- [Nx](https://nx.dev)
- [Angular](https://angular.io)
- [Eliza program](https://en.wikipedia.org/wiki/ELIZA)
npm package: @rfrenchy/csgo-matchboard-component
Description: A React component displaying CSGO Match information
Author: ryan french
Latest version: 0.7.0

# csgo-matchboard-component

[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/rfrenchy/csgo-matchboard-component/blob/main/LICENSE)
[![npm latest package](https://img.shields.io/npm/v/@rfrenchy/csgo-matchboard-component/latest.svg)](https://www.npmjs.com/package/@rfrenchy/csgo-matchboard-component)
[![npm downloads](https://img.shields.io/npm/dm/@rfrenchy/csgo-matchboard-component.svg)](https://www.npmjs.com/package/@rfrenchy/csgo-matchboard-component)

A React component displaying CSGO Match information

![3 Map Component](./src/assets/preview.png)

## Install

```sh
// with npm
npm install @rfrenchy/csgo-matchboard-component

// with yarn
yarn add @rfrenchy/csgo-matchboard-component
```

## Demo

View on [Storybook](http://csgo-matchboard-component-storybook.s3-website.eu-west-2.amazonaws.com/?path=/story/demo-matchboard--one-map)

## Usage

```js
// Matchboard
import React from "react";
import MatchBoard from "@rfrenchy/csgo-matchboard-component/lib/Matchboard";

const match = {
  teamOne: { imageSrc: "./team_one.svg" },
  teamTwo: { imageSrc: "./team_two.svg" },
  maps: [
    {
      name: "Mirage",
      mapImage: "./mirage.png",
      teamOneScore: 12,
      teamTwoScore: 5,
      mapPick: 1,
    },
  ],
};

class App extends React.Component {
  render() {
    return <MatchBoard match={match} />;
  }
}
```

## License

MIT Licensed.
npm package: @rfritas/thoc-ui
Description: A reusable, themeable, and extensible React design system using styled-components.
Author: rfritas
Latest version: 0.2.0

# Thoc UI

[EN-US](#en-us) | [PT-BR](#pt-br)

![npm](https://img.shields.io/npm/v/@rfritas/thoc-ui)
![license](https://img.shields.io/npm/l/@rfritas/thoc-ui)

---

## (EN-US)

A React component library for building modern, accessible, and consistent user interfaces.

### Description

Thoc UI is a set of reusable React components designed to accelerate the development of web applications. It is built with TypeScript and styled-components, offering a great developer experience and high customizability.

### Installation

To use Thoc UI in your project, install the package via npm:

```bash
npm install @rfritas/thoc-ui
```

### Usage

Import the components you need and start using them in your application.

```jsx
import React from 'react';
import { Button } from '@rfritas/thoc-ui';

function App() {
  return (
    <div>
      <h1>Welcome to Thoc UI</h1>
      <Button>Click Me</Button>
    </div>
  );
}

export default App;
```

### Components

Thoc UI provides a variety of components to build your application. Here are some of them:

-   **Button**: For user actions.
-   **Input**: For text entry.
-   **Card**: To group related content.
-   **Modal**: To display content in a layer above the app.
-   **Spinner**: To indicate a loading state.
-   ...and many more to come!

### Contributing

We welcome contributions! If you'd like to help improve Thoc UI, please see our main [Contributing Guidelines](../../CONTRIBUTING.md).

### License

This project is licensed under the MIT License.

---

## (PT-BR)

Uma biblioteca de componentes React para construir interfaces de usuário modernas, acessíveis e consistentes.

### Descrição

Thoc UI é um conjunto de componentes React reutilizáveis projetados para acelerar o desenvolvimento de aplicações web. É construído com TypeScript e styled-components, oferecendo uma ótima experiência de desenvolvimento e alta customização.

### Instalação

Para usar o Thoc UI em seu projeto, instale o pacote via npm:

```bash
npm install @rfritas/thoc-ui
```

### Como Usar

Importe os componentes que você precisa e comece a usá-los em sua aplicação.

```jsx
import React from 'react';
import { Button } from '@rfritas/thoc-ui';

function App() {
  return (
    <div>
      <h1>Bem-vindo ao Thoc UI</h1>
      <Button>Clique Aqui</Button>
    </div>
  );
}

export default App;
```

### Componentes

O Thoc UI fornece uma variedade de componentes para construir sua aplicação. Aqui estão alguns deles:

-   **Button**: Para ações do usuário.
-   **Input**: Para entrada de texto.
-   **Card**: Para agrupar conteúdo relacionado.
-   **Modal**: Para exibir conteúdo em uma camada acima da aplicação.
-   **Spinner**: Para indicar um estado de carregamento.
-   ...e muitos outros por vir!

### Contribuição

Nós incentivamos contribuições! Se você gostaria de ajudar a melhorar o Thoc UI, por favor, veja nosso [Guia de Contribuição](../../CONTRIBUTING.md) principal.

### Licença

Este projeto está licenciado sob a Licença MIT.