open-index/open-npm huggingface dataset:
npm package: @p5-wrapper/next
Description: A NextJS specific library for the @P5-Wrapper/react project.
Author: James Robb
Latest version: 3.0.1

# @P5-wrapper/next

![@P5-wrapper/next](https://socialify.git.ci/p5-wrapper/next/image?description=1&font=Rokkitt&forks=1&issues=1&language=1&logo=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2F8%2F8e%2FNextjs-logo.svg&name=1&owner=1&pattern=Floating%20Cogs&pulls=1&stargazers=1&theme=Auto)

> **Note:**
>
> This library simply re-exports the [@P5-wrapper/react (react-p5-wrapper) component](https://github.com/P5-wrapper/react) as a NextJS dynamic component. Nothing more.
>
> For more in-depth information on the base component, check the documentation via [the @P5-wrapper/react (react-p5-wrapper) docs](https://github.com/P5-wrapper/react).

## Installation

To install the component, run the following:

```shell
[npm|yarn|pnpm] [install|add] @p5-wrapper/next @p5-wrapper/react
```

## Usage

Then to use the component in your NextJS project you can simply import like so:

```tsx
import React from "react";
import { type Sketch } from "@p5-wrapper/react";
import { NextReactP5Wrapper } from "@p5-wrapper/next";

const sketch: Sketch = (p5) => {
  p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);

  p5.draw = () => {
    p5.background(250);
    p5.normalMaterial();
    p5.push();
    p5.rotateZ(p5.frameCount * 0.01);
    p5.rotateX(p5.frameCount * 0.01);
    p5.rotateY(p5.frameCount * 0.01);
    p5.plane(100);
    p5.pop();
  };
};

export default function Page() {
  return <NextReactP5Wrapper sketch={sketch} />;
}
```
npm package: @p8ec/deployer
Description: P8 Deployer Scripts
Latest version: 1.0.3

# P(8) Deployer Scripts

[![Typescript](https://img.shields.io/npm/dependency-version/@p8ec/deployer/dev/typescript)](https://www.typescriptlang.org/)
[![License](https://img.shields.io/npm/l/@p8ec/deployer)](https://opensource.org/license/mit/)
[![Version](https://img.shields.io/npm/v/@p8ec/deployer)](https://npmjs.com/ferramenta)

# Installation

```shell
### NPM:
npm i @p8ec/deployer
### Yarn:
yarn add @p8ec/deployer
```

# Command Line Reference

## expand-cli

Expand a string, a file or a directory of files with environment variables.

TODO: Add example.
npm package: @p8ec/iam
Description: P(8) Identity and Access Management (IAM) Library
Author: P8 Enterprise Components, Inc
Latest version: 2.0.1

# P(8) IAM Library Package

Shared library for IAM service:

- types
- interfaces
- enums
- data transfer objects (DTOs)
- utility functions

## Caveats

DTOs in this package are both used client- and server-side.

Due to `@nestjs/swagger` decorators used to generate OpenAPI documentation, they are not compatible with the client-side.

To avoid this, DTOs are "cleaned" before being published by replacing `@nestjs/swagger` decorators with no-op decorators.

It is achieved by compile time substitution of `@nestjs/swagger` decorators with no-op decorators that do nothing.

Please see ./configs/esm/.swcrc and ./configs/cjs/.swcrc for more information.
npm package: @p8ec/nestjs
Description: P(8) Shared Libraries for NestJS microservices
Author: P8 Inc.
Latest version: 0.4.6

# P(8) Shared Components for NestJS framework

## Description

This is a library of shared components for NestJS framework. 
It includes a set of common components that can be used in any NestJS application:

- Kafka module
- Status module

## Install

```shell
npm i @p8ec/nestjs
```

## Components

### Common

#### Pagination Data Objects and Helpers
npm package: @p8ec/shared
Description: P(8) Global Shared Library for Javascript
Latest version: 3.1.0

# P(8) Shared Libraries for Node.js

Shared TypeScript/JavaScript libraries for P(8) products.

## Shared Configuration

Shared (**and very opinionated**) configuration for P(8) projects.

### Usage

#### Installation

```shell
npm i -D @p8ec/shared
```

#### Initialization

```shell
p8-cli init
```

This command will create the following files in your project and remove corresponding configuration entries
from `package.json`:

#### **`.eslintrc.cjs`**

```javascript 
/* eslint-disable */
module.exports = require('@p8ec/shared').eslintConfigRecommended;
```

#### **`.prettierrc.cjs`**

```javascript 
/* eslint-disable */
module.exports = require('@p8ec/shared').prettierConfigRecommended;
```

#### **`.commitlintrc.cjs`**

```javascript
/* eslint-disable */
module.exports = { extends: ["@commitlint/config-conventional"] };
```

## P(8) CLI Tool

A command-line interface (CLI) tool for P(8) projects to simplify common tasks.

### Syntax

```shell
p8-cli [command] [options]
```

### Commands

- `init` - Initialize P(8) shared configuration in your project. Options: `cleanup` - remove configuration entries from
  `package.json`
    - Example: `p8-cli init --cleanup` - initializes the shared configuration and removes corresponding entries from
      `package.json`.
- `dirn` - Get the directory name. Options: `0` - current directory (default), `1` - parent directory, `2` - 2 levels up
  directory, etc.
    - Example: `p8-cli dirn 1` - shows the parent directory name.
- `run` - Returns a script string using the detected or specified package manager. Options: `script` - script name,
  `packageManager` - `npm`, `yarn`, `pnpm` or `auto` (detected by default), `workspaceMode` - mode of concurrency for workspaces
  (if applicable): `seq`, `par`, `auto` (detected by default).
    - Example: `p8-cli run build` - returns the `build` script using the detected package manager.
    - Example: `p8-cli run test auto par` - returns the `test` script using the detected
      package manager in parallel mode for workspaces.
- `pm` - Returns the detected package manager (`npm`, `yarn`, or `pnpm`).
- `ws` - Returns `true` if the project is a workspace, `false` otherwise.
npm package: @p8w/p8rcl-ci
Description: React component library with CICD
Author: Prawee Wongsa
Latest version: 0.1.1

# P8RCL-CI

## Stack
- Rollup
- Typescript
- Jest
- Testing Library

## Clone
```bash
git clone https://github.com/prawee/p8rcl-ci.git
cd p8rcl-ci
```

## Development
```bash
yarn install
yarn dev
```

## Build
```bash
yarn build
```

## Publish
```bash
npm publish --access public
```
npm package: @p9dig/lp9-form
Description: Formulário para as LP9's
Author: P9 Digital
Latest version: 1.2.0

<div align="center">

![](logo.png)

[![NPM](https://img.shields.io/npm/v/@p9dig/lp9-form.svg)](https://www.npmjs.com/package/@p9dig/lp9-form) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

</div>

>

## Instalaçao

```bash
npm install --save lp9-form
```

## Como Usar

Para utilizar o LP9 Form é simples, basta importar o componente e passar as configurações do cliente, que são, o clientId e o campaignId.

```jsx
import React, { Component } from 'react'
import LP9Formulario from 'lp9-form'

const configuration = {
  clientId: 'a12hk12h23112',
  campaignId: '8237493nkj123'
}

class Example extends Component {
  render () {
    return (
      <LP9Formulario {...configuration}/>
    )
  }
}
```

## Guia de Estilos

O LP9 Form já conta com um estilo default, para realizar a personalização desses estilos, é indicado utilizar as classes CSS já definidas para o componente.

```scss
  .lp9-form {
    background-color: #f1f1f1;
    padding: 25px;
    width: 300px;
    border-radius: 5px;

    &__input-group {
      display: flex;
      margin-bottom: 10px;
      flex-direction: column;

      input, select {
        padding-left: 10px;
        margin: 5px 0;
        font-size: 14px;
        border-radius: 5px;
        border: none;
        outline: none;
        height: 30px;
        background-color: #fff;
      }
    }

    &__submit {
      margin-top: 20px;
      width: 100%;
      background-color: #4D4D4C;
      font-size: 18px;
      border-radius: 5px;
      border: none;
      color: #f1f1f1;
      padding: 10px 0;
      cursor: pointer;
      outline: none;
    }

    &__status-wrapper {
      width: 300px;
      height: 440px;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      background-color: #f1f1f1;
      align-items: center;
    }

    &__error {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 10px;
      font-weight: bold;
      color: #f11;

      img {
        margin-right: 5px;
        width: 15px;
        height: 15px;
        fill: #f11;
      }
    }

    &__status-content) {
      display: flex;
      flex-direction: column;
      align-items: center;

      p {
        margin: 0;
        font-size: 18px;
      }

      img {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
      }

      a {
        font-size: 18px;
        margin: 5px 0;
      }
    }
  }
```

## Live Demo

Vejá como o projeto está em sua fase atual no [Live Demo](https://lp9form.p9.digital).

## Licença

MIT © [](https://github.com/)
npm package: @p9m/local-storage-service
Description: localStorage wrapper for CRUD operations
Author: Purushotham Reddy Jakka
Latest version: 1.0.3

# Local Storage Service

[localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) wrapper for CRUD operations.

This library is useful for mocking API service, when learning a frontend framework.

## Installation

```bash
$ npm install @p9m/local-storage-service --save
or
$ yarn add @p9m/local-storage-service
```

In browser:

```html
<script src="https://unpkg.com/@p9m/local-storage-service@latest"></script>

<script>
const ls = new LocalStorageService('books');
</script>
```

## Usage

```javascript

import LocalStorageService from '@p9m/local-storage-service';

// Create instance with a namespace
const ls = new LocalStorageService('contacts');

// Create a record
ls.create({name: 'Reddy'});
// {name: 'Reddy', id: '6aa43c7c-69cf-df49-c927-6ba3db8d7ac1'}

// Get a record
ls.get('6aa43c7c-69cf-df49-c927-6ba3db8d7ac1');
// {name: 'Reddy', id: '6aa43c7c-69cf-df49-c927-6ba3db8d7ac1'}

// Update a record
ls.update({name: 'John Doe', id: '6aa43c7c-69cf-df49-c927-6ba3db8d7ac1'});
// {name: 'John Doe', id: '6aa43c7c-69cf-df49-c927-6ba3db8d7ac1'}

// Get all records within namespace (eg: contacts)
ls.getAll();

// Delete a record
ls.delete('6aa43c7c-69cf-df49-c927-6ba3db8d7ac1');

// Delete all record within namespace (eg: contacts)
ls.deleteAll();

```
npm package: @p__radip/react-footer
Description: This is a npm package for adding footer in your react-app
Author: Pradip Ram
Latest version: 1.0.18

# react-footer

A customizable React component for displaying a footer with dynamic website name, custom classes, and styles.

## Features

- **Dynamic Content**: Display the current year and website name dynamically.
- **Customizable Styles**: Apply custom classes and inline styles for flexible styling options.
- **Easy Integration**: Integrates smoothly with existing React applications.
  **Lightweight**: Minimal dependencies for efficient performance.

## Installation

Install the component package via npm or yarn:

```bash
npm install @p__radip/react-footer
# or
yarn add @p__radip/react-footer

```

## Peer Dependencies

Make sure you have the following peer dependencies installed in your project:

- `@emotion/react: "^11.0.0"`
- `@emotion/styled: "^11.0.0"`
- `@mui/material: "^5.0.0"`
- `react: "^17.0.0 || ^18.0.0 || ^19.0.0"`
- `react-dom: "^17.0.0 || ^18.0.0 || 19.0.0"`

These packages are required for the Footer component to function correctly. You can install them using npm or yarn:

```javascript
npm install @mui/material @emotion/react @emotion/styled react react-dom
# or
yarn add @mui/material @mui/styled-engine-sc styled-components react react-dom
```

## Usage

Import the Footer component and use it in your React application:

```javascript
import React from "react";
import { Footer } from "@p__radip/react-footer";

const App = () => {
  return (
    <div>
      <Footer websiteName="Your website name" />
    </div>
  );
};

export default App;
```

## Props

|    Name     |        Type         | Required |                                  Description                                   |
| :---------: | :-----------------: | :------: | :----------------------------------------------------------------------------: |
| websiteName |       string        |   Yes    |          specifies the name of the website to display in the footer.           |
|  className  |       string        |    No    |     Allows adding custom CSS classes to the footer for additional styling.     |
|    style    | React.CSSProperties |    No    | Allows applying custom inline styles to override default styles of the footer. |
|   bgColor   |       string        |    No    |                  Allow to set the background color of footer                   |

## Contributing

Contributions are always welcome! If you have any suggestions or improvements, please submit a pull request or open an issue on GitHub.

See `contributing.md` for ways to get started.

Please adhere to this project's `code of conduct`.

## For Building and publishing in npmjs

If you have any feedback, please reach out to us at pradipramjnv@gmail.com

## Feedback

If you have any feedback, please reach out to us at pradipramjnv@gmail.com
npm package: @p__radip/react-loader
Description: A lightweight and customizable React component for displaying loading spinners and progress indicators, helping you enhance user experience by providing visual feedback during asynchronous operations.
Author: Pradip Ram
Latest version: 1.0.2

# React-loader

react-loader is a lightweight and customizable React component designed to display an infinity symbol as a loading spinner. It enhances the user experience by providing a visually appealing indicator during asynchronous operations, such as data fetching or processing tasks. With simple integration and flexible styling options, react-loader seamlessly fits into any React project, making it an essential tool for developers who prioritize both functionality and aesthetics.

## Features

-   **Easy Integration**: Seamlessly add the sign-in page component to your existing React projects.
-   **Customization**: Style the sign-in page according to your application's theme using custom CSS.
-   **Lightweight**: Minimal dependencies ensure that your application remains fast and efficient.
-   **Infinity Symbol Animation**: Displays an elegant infinity symbol as the loading spinner, providing a modern and visually appealing loading indicator.
-   **Accessible**: Built with accessibility in mind to ensure it is usable by all users, including those relying on assistive technologies.

## Installation

Install the package using npm:

```bash
npm i @p__radip/react-loader
        OR
yarn add @p__radip/react-loader
```

## Screenshots

[![Infinity Loader Demo](https://github.com/Pradipram/react-loader/assets/101059602/391cdae9-01fe-407a-8529-9bb739bf9de8)](https://github.com/Pradipram/react-loader/assets/101059602/7d9228c2-52ed-493c-a6f0-b97c0a12b22c)

[Watch the demo video](https://github.com/Pradipram/react-loader/assets/101059602/7d9228c2-52ed-493c-a6f0-b97c0a12b22c)

## Usage

```javascript
import React from "react";
import Loader from "@p__radip/react-loader";

function App() {
    return <Loader />;
}

export default App;
```

## Example

```javascript
import React, { useState } from "react";
import Loader from "@p__radip/react-loader";

const YourComponent = () => {
    const [loading, setLoading] = useState(false);

    return (
        <div>
        {
            loading ?
            <Loader/>
            :
            <div>{Other Compoent}</div>
        }
        </div>
    );
};

export default YourComponent;
```

## Contributing

Contributions are always welcome ! If you have any suggestions or improvements, please submit a pull request or open an issue on GitHub.

See `contributing.md` for ways to get started.

Please adhere to this project's `code of conduct`.

## Feedback

If you have any feedback, please reach out to us at pradipramjnv@gmail.com
npm package: @p_mac/datatables.webcomponent
Description: A web component built with lit element, inspired by jQuery datatables
Latest version: 0.4.4

# Datatables.webcomponent

A lightweight webcomponent for creating datatables. Inspired by jQuery Datatables.

[Datatables.webcomponent Documentation](https://github.com/paulmaclean/datatables.webcomponent/wiki)

---

## Examples

#### Usage Examples
* [lit-element](https://github.com/paulmaclean/datatables.webcomponent/wiki/Lit-Element-Usage)
* [standalone](https://github.com/paulmaclean/datatables.webcomponent/wiki/Standalone-Usage)
* [slotted table](https://github.com/paulmaclean/datatables.webcomponent/wiki/Slotted-Table-Usage)
* [ajax](https://github.com/paulmaclean/datatables.webcomponent/wiki/Ajax-Table-Usage)

#### Styling Examples
* [css variables](https://github.com/paulmaclean/datatables.webcomponent/wiki/css-variables)
* [css overrides](https://github.com/paulmaclean/datatables.webcomponent/wiki/css-overrides)
* [new themes](https://github.com/paulmaclean/datatables.webcomponent/wiki/new-themes)

#### LightDom Examples
* [lit-element](https://github.com/paulmaclean/datatables.webcomponent/wiki/LightDom-Lit-Element)
* [standalone](https://github.com/paulmaclean/datatables.webcomponent/wiki/LightDom-Standalone)

## Install

### npm
```
npm install @p_mac/datatables.webcomponent --save
```

---

## License

MIT

## Features

* Sortable columns
* Pagination
* Searchable
* Filterable columns
* Summable columns
* Load data via slotted table
* Load data via AJAX requests
* Export to `csv`

---

## Usage

See the [Documentation](https://github.com/paulmaclean/datatables.webcomponent/wiki) for usage instructions.
npm package: @p_momeni/say-hello-functions
Description: Just a test package
Author: parsa_momeni
Latest version: 0.0.2

# Say hello functions

based on https://www.youtube.com/watch?v=xnfdm-s8adI

A list of not so helpful functions. this is a test library.

- use engine for documenting node version
    - https://www.reddit.com/r/reactjs/comments/18iqimx/im_trying_to_find_the_node_version_of_an_old/
    - https://betterstack.com/community/questions/specify-version-in-package-json/

- for publishing to your custom artifactory like nesus or jfrog : https://stackoverflow.com/questions/56360074/how-to-publish-deploy-a-npm-package-to-custom-artifactory#:~:text=Edit%20your%20package.,%2Fnpm%2Fnpm%2Drepo%2F

possible issues while publishing :
- run `npm publish --access=public` for public node package (https://stackoverflow.com/questions/41981686/getting-error-402-while-publishing-package-using-npm)
-https://stackoverflow.com/questions/54950544/npm-publish-registry-403-forbidden-you-dont-have-permission-to-publish

make sure to have node 18 and tsup installed, check it with `npm ls --depth=0 -global`

### instead of each time running `npm login` add this to `.npmrc`:
```
registry=https://registry.npmjs.com/
_auth="<token>"
email=<email>
always-auth=true
```

# other usefull links :
- https://urre.me/writings/test-local-npm-packages/
- https://www.digitalocean.com/community/tutorials/how-to-create-a-node-js-module
npm package: @pa-media-group/ts-iptc-ninjs-type
Description: Types for IPTCs Ninjs standard 1.3
Author: PA Media Group
Latest version: 1.0.4

# IPTC NinJS V1.3 Type Definition

Typescript type definition of IPTCs NinJS V1.3 standard.

## Installation

```
npm i @pa-media-group/ts-iptc-ninjs-type
```

## Usage

### IptcNinjs Type
```
import { IptcNinjs } from 'ts-iptc-ninjs-type';

const typed: IptcNinjs = {
  "uri": "https://myuri.com/test/1"
};
```

The IPTC NinJS 1.3 schema allows for pattern properties as defined at the top level by: -
```
"^description_[a-zA-Z0-9_]+": {
  "title": "Description",
  "description": "A free-form textual description of the content of the item. (The string appended to description_ in the property name should reflect the format and/or the purpose of the text, separating the parts with _). nar:description",
  "type": "string"
},
"^body_[a-zA-Z0-9_]+": {
  "title": "Body",
  "description": "The textual content of the news object. (The string appended to body_ in the property name should reflect the format and/or the purpose of the text, separating the parts with _). nar:inlineData or nar:inlineXML",
  "type": "string"
},
"^headline_[a-zA-Z0-9_]+": {
  "title": "Extra headlines",
  "description": "Additional headlines or strings of that type can be handled here. This is not replacing the main headline-property in ninjs. (The string appended to headline_ in the property name should reflect the format and/or the purpose of the text, separating the parts with _) nar:headline with roles issue #13. (Added in 1.3)",
  "type": "string"
}
```

Also within 'place': -

```
"^geometry_[a-zA-Z0-9_]+": {
  "description": "An object holding geo data of this place. Could be of any relevant geo data JSON object definition.",
  "type": "object"
}
```

Without being opinionated on the patterns users of the IptcNinjs interface will choose to use these partially defined pattern properties could not be represented in the interface.

To use these it is recommended you extend the interface to your needs e.g.

```
import { IptcNinjs } from 'ts-iptc-ninjs-type';

interface Ninjs extends IptcNinjs {
  description_html?: string,
  description_text?: string,
}
```

```
import { IptcNinjs, NinjsLink } from 'ts-iptc-ninjs-type';

interface NinjsPlace extends NinjsLink {
  geometry_example?: Record<string, unknown>;
}

interface Ninjs extends IptcNinjs {
  place?: NinjsPlace[]
}
```

### Validating JSON

Included is a validator which can be used to ensure JSON conforms to the IPTC Ninjs 1.3 schema it can be used as follows: -

```
import { IptcNinjs, IptcNinjsValidator } from 'ts-iptc-ninjs-type';

const validator: IptcNinjsValidator = new IptcNinjsValidator();
const typed: IptcNinjs = {
  "uri": "https://myuri.com/test/1"
};
const valid: boolean = validator.validate(typed);
```