open-index/open-npm huggingface dataset:
npm package: @ramonak/paper
Description: React Paper Component
Author: KaterinaLupacheva
Latest version: 2.1.0

# @ramonak/paper

> React Paper Component

[![NPM](https://img.shields.io/npm/v/@ramonak/paper.svg)](https://www.npmjs.com/package/@ramonak/paper) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)![npm bundle size](https://img.shields.io/bundlephobia/min/@ramonak/paper)![GitHub](https://img.shields.io/github/license/katerinalupacheva/paper-component)![npm](https://img.shields.io/npm/dw/@ramonak/paper)

---

![demo](./paper-demo.JPG)

---

[Playground / Code Generator](https://katerinalupacheva.github.io/paper-component/)

---

## Install

```bash
npm install --save @ramonak/paper
```

## Usage

```jsx
import Paper from '@ramonak/paper'

const Example = () => {
    return <Paper elevation={3}/>
};
```

## Props

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `elevation` | `Number between 0 and` <br/>` 24` |  | Shadow depth. |
| `oulined` | `boolean` | false | Outlined surface. |
| `square` | `boolean` | false | If *true*, no rounded corners. |
| `customClass` | `string` |  | Name of the css custom class to add custom styles. |

## License

MIT © [KaterinaLupacheva](https://github.com/KaterinaLupacheva)
npm package: @ramonak/react-button-group
Description: React ButtonGroup component
Author: KaterinaLupacheva
Latest version: 1.1.1

# @ramonak/react-button-group

> React ButtonGroup component with the selection (active button) functionality

[![NPM](https://img.shields.io/npm/v/@ramonak/react-button-group.svg)](https://www.npmjs.com/package/@ramonak/react-button-group) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)![npm bundle size](https://img.shields.io/bundlephobia/min/@ramonak/react-button-group)![GitHub](https://img.shields.io/github/license/katerinalupacheva/react-button-group)![npm](https://img.shields.io/npm/dw/@ramonak/react-button-group)

---

![demo](demo.gif)

---

## Install

```bash
npm install --save @ramonak/react-button-group
```

## Usage

```jsx
import React from 'react'
import ButtonGroup from '@ramonak/react-button-group'
import '@ramonak/react-button-group/dist/index.css';

const Example = () => {
  const handleClick = (e) => {
    console.log(e.target.name);
  };

  return <ButtonGroup
            buttons={['One', 'Two', 'Three', 'Four']}
            onButtonClick={handleClick}
          />
}
```

## Props

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `buttons` (required) | `Array of strings` |  | Labels of buttons. For buttons without labels pass an array with empty strings. |
| `orientation` | `string:` <br/>`horizontal, vertical` | `horizontal` | Orientation of button group: vertical or horizontal display |
| `onButtonClick` | `function` |  | Function that runs on a button click |
| `containerClassName` | `string` |  | Class name for custom styles of a wrapper *div* |
| `buttonClassName` | `string` |  | Class name for custom styles of a button inside a button group |
| `activeButtonClassName` | `string` |  | Class name for custom styles of an active (selected) button inside a button group |

## License

MIT © [KaterinaLupacheva](https://github.com/KaterinaLupacheva)
npm package: @ramonbsales/noah-angular
Description: Noah Angular - shared UI components
Author: Ramon Sales
Latest version: 1.1.5

# SharedComponents

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build shared-components
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/shared-components
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Desenvolvimento rápido (fluxo recomendado)

Durante o desenvolvimento da biblioteca junto com o `demo-app`, é confortável rodar dois terminais separados:

- Terminal 1: compila a biblioteca em modo watch

```bash
npx ng build shared-components --watch --configuration=development
```

- Terminal 2: inicia o servidor do demo app

```bash
ng serve demo-app
# ou
npm start
```

Salve arquivos em `projects/shared-components/src`; o processo em watch atualizará `dist/shared-components` automaticamente. O `demo-app` está configurado para resolver essa pasta, então as alterações compiladas aparecem no app servido.


## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @ramondev/ramons-ui
Description: Projeto criado para 
Author: Ramon Silva
Latest version: 0.0.8

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:

```js
// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})
```
npm package: @ramong26/xp-components
Description: React와 TypeScript로 만든 최소한의 UI 컴포넌트 라이브러리입니다.   현재는 테스트 중입니다.
Author: ramong23
Latest version: 1.0.18

# @ramong26/xp-components

React와 TypeScript로 만든 최소한의 UI 컴포넌트 라이브러리입니다.  
현재는 테스트 중입니다. 

---

## 설치

```bash
# pnpm 사용
pnpm add @ramong26/xp-components

# npm 사용
npm install @ramong26/xp-components
```

---

사용법은 위키에 자세히 추가 될 예정입니다
npm package: @ramonmcros/prettier-config
Description: Prettier configuration
Author: ramonmcros
Latest version: 1.0.1

# `@ramonmcros/prettier-config`

> [Prettier](https://prettier.io) config.

## Usage

**Install**:

```bash
$ yarn add --dev @ramonmcros/prettier-config
```

**Edit `package.json`**:

```jsonc
{
  // ...
  "prettier": "@ramonmcros/prettier-config"
}
```
npm package: @ramonornela/angular2-text-mask
Description: Angular 2 directive for input text masking
Author: M.K. Safi
Latest version: 0.0.12

# Angular 2 Input Mask
This Angular 2 Directive is also compatible with Ionic 2 `ion-input`.

## Getting started

First, install it.

```bash
npm i angular2-text-mask --save
```

Then, import it into your `@NgModule`:

```typescript
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TextMaskModule } from 'angular2-text-mask';

@NgModule({
  imports: [
    FormsModule,
    TextMaskModule
  ],
  declarations: []
})
export class MyModule {}
```

Then, use it in your component:
```typescript
@Component({
  selector: 'app',
  template: `
    <input [textMask]="{mask: mask}" [(ngModel)]="myModel" type="text"/>
  `
})
export class AppComponent {
  public myModel = ''
  public mask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
}
```

## Documentation

As you can see in the code above, you are passing an object to the `textMask` directive.

&#x1F4CD; For more information about the values that the `textMask` object accepts, see 
**[this page](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme)**.

#### Other use-cases

##### Unmasking the value that is stored in the model

Text Mask does not provide an option to unmask the model before storing it. You can sanitize the model on your
side. See [here](https://github.com/text-mask/text-mask/issues/109) for details.

##### `change` doesn't work

`change` on an input field will not work if `[text-mask]` is present. You can use `(ngModelChange)` instead. For more 
information, see [this page](https://github.com/text-mask/text-mask/issues/236).

## Example

To see an example of the code running, follow these steps:

1. Clone the repo, `git clone git@github.com:text-mask/text-mask.git`
1. `cd text-mask`
1. `npm install`
1. `npm run angular2:dev`
1. Open [http://localhost:3000](http://localhost:3000)

The code of the example is in [`angular2/example`](https://github.com/text-mask/text-mask/tree/master/angular2/example).

## Contributing

We would love some contributions! Check out [this document](https://github.com/text-mask/text-mask/blob/master/howToContribute.md#readme) to get started.
npm package: @ramonornela/authentication
Description: This is abstract to Authentication based in project https://github.com/zendframework/zend-authentication
Author: Ramon Ornelas
Latest version: 0.0.1-nightly.20170107T231402Z.6c26360

# AuthenticationModule

This is abstract to Authentication based in project https://github.com/zendframework/zend-authentication

## Using AuthenticationModule or AuthenticationHttpModule in an Ionic 2 app

```typescript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

import { UrlResolverModule } from '@ramonornela/url-resolver';
import { AuthenticationHttpModule } from '@ramonornela/authentication';

const Routes = {
  'auth': {
    'url': 'http://example.com/auth'
  }
};
@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    UrlResolverModule.initialize(Routes),
    AuthenticationHttpModule.initialize()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
export class AppModule {}
```

Contributing

See [CONTRIBUTING.md](https://github.com/ramonornela/authentication/blob/master/.github/CONTRIBUTING.md)
npm package: @ramonornela/configuration
Description: Manager configuration project in file json, database or static object
Author: Ramon Ornelas
Latest version: 0.0.13

# ConfigurationModule

This allow define configuration in the app with object, file json (local or external) or custom strategy (ex: yaml)

## Using  in an Ionic 2 app

```typescript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

// import ConfigurationModule
import { ConfigurationModule } from '@ramonornela/configuration';

export const APP_CONFIG = {
  'my-config': 'My Config',
  'my-config-env': {
    'dev': 'Config Dev',
    'prod': 'Config Dev'
  }
};

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    ConfigurationModule.initialize(APP_CONFIG, 'dev')
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
export class AppModule {}
```

Contributing

See [CONTRIBUTING.md](https://github.com/ramonornela/configuration/blob/master/.github/CONTRIBUTING.md)
npm package: @ramonornela/http
Description: Requisição HTTP através de eventos com adição de plugins para interceptação
Author: Ramon Ornelas
Latest version: 4.0.0

# HttpModule

This allow define urls Http using [url-resolver](https://github.com/mbamobi/url-resolver) to make request Http and intercept with plugins/events to analisy responses

## Using HttpModule in an Ionic 2 app

```typescript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

// import configuration module
import { ConfigurationModule } from '@mbamobi/configuration';

// import url-resolver module
import { UrlResolverModule } from '@mbamobi/url-resolver';

// Import http module
import { HttpModule, DefaultPlugins } from '@mbamobi/http';

export const APP_CONFIG = {
  'urlResolver': {
    'dev': {
      '_defaults': {
        'host': 'http://api.example.com/'
      },
      'user': {
        'url': 'user/{id}',
        'method': 'GET',
        'headers': {
          'content-type': 'application/json'
        },
        'params': {
          'id': {
            'type': 'number',
            'required': true
          }
        }
      }
    }
  }
};

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    ConfigurationModule.initialize(APP_CONFIG, 'dev')
    UrlResolverModule.initialize(),
    HttpModule.initialize(DefaultPlugins) // http module with plugin parseResponse
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
export class AppModule {}
```

Contributing

See [CONTRIBUTING.md](https://github.com/mbamobi/http/blob/master/.github/CONTRIBUTING.md)
npm package: @ramonornela/http-plugins-ionic
Description: Plugins HTTP additionals to projects ionic
Author: Ramon Ornelas
Latest version: 0.0.13

# HttpPluginsIonicModule

This extends of [http](https://github.com/ramonornela/http)

## Using HttpPluginsIonicModule in an Ionic 2 app

```typescript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

// Import http module
import { HttpModule, DefaultPlugins } from '@ramonornela/http';

// Import http plugins ionic
import { HttpPluginsIonicModule } from '@ramonornela/http-plugins-ionic';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    HttpModule.initialize(DefaultPlugins), // http module with plugin parseResponse
    HttpPluginsIonicModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
export class AppModule {}
```

Contributing

See [CONTRIBUTING.md](https://github.com/ramonornela/http/blob/master/.github/CONTRIBUTING.md)
npm package: @ramonornela/pro-api-javascript-client
Description: A simple JasvaScript client for interacting with Ionic Pro
Author: Ionic
Latest version: 0.0.13-0

# Ionic Pro API Client

A simple JavaScript client for interacting with the Ionic Pro API.

Note: this is meant for API access, not end-user apps. For most users, the [Pro Client](https://www.npmjs.com/package/@ionic/pro) is actually what you want.

## Alpha Notice

This is still in active development, and is far from comprehensive at the moment.  

### Available API Resources

- [x] Apps
- [x] Snapshots (JS Builds)
- [x] Packages (Native Builds)
- [x] Users
- [ ] Deploy channels
- [ ] Organizations
- [ ] Teams
- [ ] View Testers

## Installation

```bash
npm install --save @ionic/pro-api-javascript-client
```

## Usage

```typescript
import { Environment, ProClient, User } from 'pro-client';

...

// Instantiate the client
let cfg: Environment = { debug: true }
let client: ProClient = new ProClient(cfg);

...

// Login to Ionic Pro
client.login("username@test.com", "myAwesomePassword123").then((user: User) => {
  console.log("Logged in", user);
});

...

// List apps you have access to
client.resource.apps.list().then((res: any) => {
  console.log("My apps:", res);
}, (err: any) => {
  console.error("Error getting apps:", err);
});

...

// List native builds for an app
let appId: string = "abcd1234";
let filters = { platform: "iOS" }; // Optional

client.resource.package.list(appId, filters).then((res: any) => {
  console.log("My native builds:", res);
}, (err: any) => {
  console.error("Error getting builds:", err);
});
```
npm package: @ramonornela/url-resolver
Description: Configuration routes to object Http of the Angular2
Author: Ramon Ornelas
Latest version: 0.0.24

# UrlResolverModule

This allow define configuration of objects request

## Using HttpModule in an Ionic 2 app

```typescript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

// import url-resolver module
import { UrlResolverModule } from '@ramonornela/url-resolver';

export const APP_ROUTE = {
  '_defaults': {
    'host': 'http://api.example.com/'
  },
  'user': {
    'url': 'user/{id}',
    'method': 'GET',
    'headers': {
      'content-type': 'application/json'
    },
    'params': {
      'id': {
        'type': 'number',
        'required': true
      }
    }
  }
};

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    UrlResolverModule.initialize(APP_ROUTE),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
export class AppModule {}
```

Contributing

See [CONTRIBUTING.md](https://github.com/ramonornela/url-resolver/blob/master/.github/CONTRIBUTING.md)