open-index/open-npm huggingface dataset:
npm package: @plomis/util
Description: 常用方法
Author: GanGuiYang
Latest version: 0.1.0

# util
常用方法

## Install
```js
npm i @plomis/util
```

## API

* [addEventlistener](#addEventlistener)
* [getClientSize](#getClientSize)
* [getOffset](#getOffset)
* [requestAnimationFrame](#requestAnimationFrame)
* [cancelAnimationFrame](#cancelAnimationFrame)


#### addEventlistener

> `(target: Element, eventType: string, listener: Function): { remove: Function }`

###### Usage

```js
import util from '@plomis/util';
this.eventListener = util.addEventListener(document.body, 'click', function(e){
  console.log(e.target); // works for ie
  
  console.log(e.nativeEvent); // native dom event
});
this.eventListener.remove(); // delete event listener
```

#### getClientSize

###### Usage

```js
import util from '@plomis/util';
const { clintHeight, clintWidth } = util.getClientSize();
```

#### getOffset

> `(target: Element)`

###### Usage

```js
import util from '@plomis/util';
const { offsetLeft, offsetRight } = util.getClientSize(document.body);
```


#### requestAnimationFrame

> `(fc: function)`

###### Usage

```js
import util from '@plomis/util';
this.animation = util.requestAnimationFrame(() => {
  // do someting
});
```

#### cancelAnimationFrame

> `(fc: function)`

###### Usage

```js
import util from '@plomis/util';
this.animation = util.requestAnimationFrame(() => {
  // do sometings
});
util.cancelAnimationFrame(this.animation);  // delete animation frame
```
npm package: @plone-collective/volto-authomatic
Description: Social Login with OAuth2/OpenId for Volto sites.
Author: Érico Andrei
Latest version: 2.0.4

<div align="center"><img alt="logo" src="https://raw.githubusercontent.com/collective/pas.plugins.authomatic/main/docs/authomatic.svg" width="70" /></div>

<h1 align="center">OAuth2 / OpenId Authentication in Volto</h1>

Addon implementing OAuth2 / OpenId Login in Volto sites.

This addon requires a server-side package to be installed. Currently we support one of the following:

* [pas.plugins.authomatic](https://github.com/collective/pas.plugins.authomatic/) version 1.0b2 or superior
* [pas.plugins.oidc](https://github.com/collective/pas.plugins.oidc/) version 2.0.0a1 or superior


<div align="center">

[![npm](https://img.shields.io/npm/v/volto-authomatic)](https://www.npmjs.com/package/volto-authomatic)
[![](https://img.shields.io/badge/-Storybook-ff4785?logo=Storybook&logoColor=white&style=flat-square)](https://collective.github.io/volto-authomatic/)
[![Code analysis checks](https://github.com/collective/volto-authomatic/actions/workflows/code.yml/badge.svg)](https://github.com/collective/volto-authomatic/actions/workflows/code.yml)
[![Unit tests](https://github.com/collective/volto-authomatic/actions/workflows/unit.yml/badge.svg)](https://github.com/collective/volto-authomatic/actions/workflows/unit.yml)

[![GitHub contributors](https://img.shields.io/github/contributors/collective/volto-authomatic)](https://github.com/collective/volto-authomatic)
[![GitHub Repo stars](https://img.shields.io/github/stars/collective/volto-authomatic?style=social)](https://github.com/collective/volto-authomatic)

</div>

## Screenshots

### Login Form

<img alt="Login Form" src="./docs/login-form.png" width="500" />

## Examples

volto-authomatic can be seen in action at the following sites:

- [Plone](https://plone.org)
- [Plone Brasil](https://plone.org.br)
- [2023 Plone Conference](https://2023.ploneconf.org)
- [2022 Plone Conference](https://2022.ploneconf.org)
- [2021 Plone Conference](https://2021.ploneconf.org)

## Install

### New Volto Project

Create a Volto project

```shell
npm install -g yo @plone/generator-volto
yo @plone/volto my-volto-project --addon @plone-collective/volto-authomatic
cd my-volto-project
```

Install new add-on and restart Volto:

```shell
yarn install
yarn start
```

### Existing Volto Project

If you already have a Volto project, just update `package.json`:

```JSON
"addons": [
  "@plone-collective/volto-authomatic"
],

"dependencies": {
  "@plone-collective/volto-authomatic": "*"
}
```

### Test it

Go to http://localhost:3000/login

## Contribute

- [Issue Tracker](https://github.com/collective/volto-authomatic/issues)
- [Source Code](https://github.com/collective/volto-authomatic/)

## Credits

The development of this plugin has been kindly sponsored by:

- [Helmholtz Zentrum Berlin](https://www.helmholtz-berlin.de/)
- [kitconcept](http://www.kitconcept.com/)

## License

The project is licensed under [MIT](./LICENSE).
npm package: @plone-collective/volto-block-banner
Description: volto-block-banner: Volto add-on
Latest version: 1.0.0

# volto-block-banner

A [volto](https://plone.org/what-is-plone/volto) [block](https://6.dev-docs.plone.org/volto/blocks/index.html) [add-on](https://6.dev-docs.plone.org/volto/addons/index.html) for a banner. It contains two sub-elements:

1. `Text`: The display text of the banner.
1. `CTA-Button`: Call To Action (CTA) button.

## Customizable properties

<details>
  <summary>Click to expand!</summary>

1. `text` (_string_): Main text or the heading of the banner.
1. `showActionButton` (_boolean_): Toggle the `CTA-Button`.
1. `actionButtonText` (_string_): `CTA-Button` label.
1. `actionButtonUrl` (_string_): `CTA-Button` _URL_ which is navigated onClick.
1. `backgroundColor` (_string_): Specifies the `backgroundColor` css property for the banner.
1. `textColor` (_string_): Specifies the `color` css property for `Text`.
1. `showCircle` (_boolean_): Toggle the orange circle background design.
1. `marginBottom` (_string_): Specifies the `margin-bottom` css property of the banner.

</details>

## Example

### Configuration

```txt
text: 'This is a Banner!! Put your message here!'
showActionButton: true
actionButtonText: 'Take Action'
actionButtonUrl: '/'
backgroundColor: '#2b4eff'
textColor: '#ffffff'
showCircle: true
marginBottom: '15px'
```

### Output

![image](/assets/github/preview.png)
npm package: @plone-collective/volto-contents-next
Description: volto-contents-next: Volto add-on
Latest version: 0.5.0

# @plone-collective/volto-contents-next

Volto add-on that allows using the next version of the Plone folder contents view in your volto project today.

It a fresh and accessible design for the Plone folder contents view.

This only works in Volto 17, while the new official version for Plone will be targeted for Volto 18.
The official one will be in a separate package called `@plone/contents`.
npm package: @plone-collective/volto-educal-hero-block
Description: volto-educal-hero-block: Volto add-on
Latest version: 1.0.0

# volto-educal-hero-block

A [volto](https://plone.org/what-is-plone/volto) [block](https://6.dev-docs.plone.org/volto/blocks/index.html) [add-on](https://6.dev-docs.plone.org/volto/addons/index.html) for a hero block. It contains heading on left side and can have two images on the right side.

## Customizable properties

<details>
  <summary>Click to expand!</summary>

1. `preheadingText` (_string_): The text before the heading.
1. `headingText` (_string_): The heading text.
1. `subHeadingText` (_string_): The sub-heading text.
1. `showActionButton` (_boolean_): Toggle the `CTA-Button`.
1. `actionButtonText` (_string_): `CTA-Button` label.
1. `actionButtonUrl` (_string_): `CTA-Button` _URL_ which is navigated onClick.
1. `foregroundImage` (_image_): Foreground image url.
1. `backgroundImage` (_image_): Background image url.
1. `quoteText1` (_string_): The quote text for the first line.
1. `quoteText2` (_string_): The quote text for the second line.
1. `enableShapes` (_boolean_): Toggle the various background shapes along with the animations.
1. `margin` (_string_): Specifies the `margin` css property of the banner.

</details>

## Example

### Configuration

```txt
preheadingText: 'Access 2700+'
headingText: 'Online Tutorial From Top Instructor.'
subHeadingText: 'Meet university,and cultural institutions, who'll share their experience.'
showActionButton: true
actionButtonText: 'View all courses'
actionButtonUrl: '/'
foregroundImage: '/hero.jpg'
foregroundImage: '/hero2.jpg'
quoteText1: 'Tomorrow is our'
quoteText2: '“When I Grow Up” Spirit Day!'
enableShapes: true
margin: '75px -50px 200px -50px'
```

### Output

![image](/assets/github/preview.png)
npm package: @plone-collective/volto-sentry
Description: volto-sentry: Volto add-on
Author: Plone Collective
Latest version: 0.4.0

# volto-sentry

## Features

A Volto add-on that provides [Sentry.io](https://sentry.io/welcome/) integration.

## Prerequisites
  
  1. In Sentry create a new organization, and add a project to it.
  2. Create an API Token: on the top left corner, click on your name -> API keys and create a new token, "project:write" scope should be selected.

## Buildtime and Runtime
The configuration is done using environment variables:

  * `SENTRY_DSN` - required to enable the feature
  * `SENTRY_URL` - the URL of Sentry
  * `SENTRY_AUTH_TOKEN` - the authentication token for Sentry
  * `SENTRY_ORG` - the name of the organization in Sentry
  * `SENTRY_PROJECT` -the name of the project in Sentry
  * `SENTRY_RELEASE` - release number
  
If these environment variables are configured, when the app is built or starts locally, a new release will be created in Sentry.
The source code and source maps will be uploaded to Sentry, too.
After starting the application, if an error occurs, the errors will be sent to Sentry, and will be linked to the specified release.

## Upgrade

This version requires `@plone/volto >= 16.0.0.alpha.45` (`sentry` removed from Volto Core).

## Installing the addon

1. If you already have a Volto project, update `package.json`:

   ```json
   "addons": [
      "@plone-collective/volto-sentry"
   ],

   "dependencies": {
      "@plone-collective/volto-sentry": "*"
   }
   ```

1. If not, create one:

   ```
   npm install -g yo @plone/generator-volto
   yo @plone/volto my-volto-project --addon @plone-collective/volto-sentry
   cd my-volto-project
   ```


1. Install new add-ons and restart Volto:

   ```
   yarn
   yarn start
   ```

1. Go to http://localhost:3000

1. Happy editing!
npm package: @plone/blocks-conversion-tool
Description: [![NPM](https://img.shields.io/npm/v/@plone/blocks-conversion-tool.svg)](https://www.npmjs.com/package/@plone/blocks-conversion-tool) [![Code analysis checks](https://github.com/plone/blocks-conversion-tool/actions/workflows/code.yml/badge.svg)](https://g
Latest version: 0.8.2

# Blocks Conversion Tool

[![NPM](https://img.shields.io/npm/v/@plone/blocks-conversion-tool.svg)](https://www.npmjs.com/package/@plone/blocks-conversion-tool)
[![Code analysis checks](https://github.com/plone/blocks-conversion-tool/actions/workflows/code.yml/badge.svg)](https://github.com/plone/blocks-conversion-tool/actions/workflows/code.yml)
[![Unit tests](https://github.com/plone/blocks-conversion-tool/actions/workflows/unit.yml/badge.svg)](https://github.com/plone/blocks-conversion-tool/actions/workflows/unit.yml)

## Introduction

This package implements a server with a simple API to convert HTML (as used in Plone Classic) to Blocks (as used on Volto).

## Starting the server

### From source

```shell
git clone https://github.com/plone/blocks-conversion-tool.git
cd blocks-conversion-tool
yarn install
yarn start
```

To use a different port than 5000 if that one is already opened by another process:

```shell
PORT=6000 yarn start
```

### With Docker

```shell
docker run -it -p 5000:5000 plone/blocks-conversion-tool:latest
```

## Usage

## HTML to Blocks (Slate)

[Slate](https://github.com/eea/volto-slate) is going to be the default text block for Plone 6, to convert HTML to an array of blocks call the service passing the HTML as shown below:

```shell
curl -i -X POST http://localhost:5000/html -H "Accept: application/json" -H "Content-Type: application/json" --data-raw '{"html": "<p>Hello world!</p>"}'
```

## HTML to Blocks (DraftJS)

Draft-JS is the legacy default text block used in Volto.

```shell
curl -i -X POST http://localhost:5000/html -H "Accept: application/json" -H "Content-Type: application/json" --data-raw '{"html": "<p>Hello world!</p>", "converter": "draftjs"}'
```

## Developing this package

### Commit messages

This package uses [@release-it/conventional-changelog](https://github.com/release-it/conventional-changelog) to generate its [CHANGELOG](CHANGELOG.md) , so please always prefix your commit messages with:

- **feat** : New features
- **fix** : Bug fixes
- **refactor** : Code changes and refactoring
- **chore**: Maintainence tasks

### Release

We use **release-it** to manage version releases of **@plone/blocks-conversion-tool**. To cut a new release  run `make release-package`.

It is strongly recommended you first do a dry-run with `make release-package-dry-run` to make sure everything is in order for a new release.

After releasing the package to NPM, also create a new image tag on Docker Hub: `make release-image`
npm package: @plone/create-volto-app
Description: Create Volto App
Latest version: 8.0.0

[![Build Status](https://travis-ci.org/plone/create-volto-app.svg?branch=master)](https://travis-ci.org/plone/create-volto-app)

# create-volto-app

create-volto-app helps you to set up Volto with a single command.

## Installation

Install create-volto-app:

```
$ npm install -g yarn
$ npm install -g @plone/create-volto-app
```

## Usage

Create a new Volto project with:

```
$ create-volto-app myvoltoproject
```

Replace `myvoltoproject` with the name/directory of your Volto project.

Change the directory to your project to get started:

```
$ cy myvoltoproject
```

### Start Volto with `yarn start`

Start Volto with:

````
$ yarn start
````

This runs the project in development mode.
You can view your application at http://localhost:3000

The page will reload if you make edits.

Please note that you have to run a Plone backend as well.

E.g. with docker:

````
$ docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e ADDONS="kitconcept.volto" -e ZCML="kitconcept.volto.cors" -e PROFILES="kitconcept.volto:default-homepage" plone
````

Consult the Volto docs for further details:

https://www.npmjs.com/package/@plone/volto

### Build a production build with `yarn build`

Builds the app for production to the build folder.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

### Start the production build with `yarn start:prod`

Runs the compiled app in production.

You can again view your application at http://localhost:3000

### Run unit tests with `yarn test`

Runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.

### Update translations with `yarn i18n`

Runs the test i18n runner which extracts all the translation strings and generates the needed files.
npm package: @plone/critical-css-cli
Description: A CLI to generate critical css from any url
Author: Eaudeweb, EEA
Latest version: 1.0.2

# @plone/critical-css-cli

A command-line utility to generate critical CSS from a set of URLs. The
functionality is useful for a CMS-powered website, where pages are user-defined
and and their CSS comes from multiple addons. Because the website layout is
generated based on the CMS content, it would be impossible to understand what
is Critical CSS at build time, only once the website is moved to production and
the "dust settles" on the main pages structure.

Typically, for the best possible performance, you'd want to generate the
critical CSS as short as possible and that means one CSS per separate page.
But this complicates things: async runners, file refresh, file invalidations,
etc, would have to be taken into account. This raises the barrier of entry for
the project.

This package tries to keep things really simple by accepting some limitations.
A single CSS file is generated based on multiple provided URLs. The CSS is
optimized automatically using [postcss](https://postcss.org/) and
[cssnano](https://cssnano.co/), so duplicated rules are eliminated.

## Install globally

```
npm install -g @plone/critical-css-cli
```

Then you can use it like:

```
critical-cli -h
```

## Install from this repo

Either install it as a native package with: `yarn install` or `npm install`.

Then run the generator like:

```
bin/critical-cli -o ./out/critical.css https://plone.org
```

This will generate a file called `critical.css` in the `out` folder.

Run `bin/critical-generator -h` to see full options.

## Use via docker

Alternatively, you can use docker to build and use this package. Pass website
url for which critical css has to be generated as env var to `docker-compose`

```
URL=<website-url> docker-compose up
```

#### Config

Pass the `DIMENSIONS` env variable if you want to deliver critical CSS for multiple screen resolutions. Defaults to `1300x900` if you don't want.

```
URL=<website-url> DIMENSIONS="1220x300,1345x500" docker-compose up
```

Location to save the `critical.css` file. Defaults to
`/var/app/output/critical.css` (inside the docker container)

```
URL=<website-url> LOCATION="output/<your-dir>/critical.css" docker-compose up
```

The location is relative to the current directory.
npm package: @plone/plonetheme-barceloneta-base
Description: Plone Theme Barceloneta Resources
Latest version: 4.0.0

# Barceloneta

Classic-UI theme resources for Plone 6 - based on Bootstrap 5

This package provides scss resources to build your own theme based on the Plone default theme for (backend rendered) Classic UI of Plone.

Latest version on [npmjs.com](https://www.npmjs.com/package/@plone/plonetheme-barceloneta-base)

## Documentation
The documentation for `plonetheme.barceloneta` is part of the official Plone documentation, [Classic UI theming based on Barceloneta](https://6.docs.plone.org/classic-ui/theming/barceloneta.html).

## Changelog
https://github.com/plone/plonetheme.barceloneta/blob/master/CHANGES.md

## Source Code and Contribution

### Contributors

Please read the document [Contributing to Plone](https://6.docs.plone.org/contributing/index.html).

Also consult the development notes [Develop Barceloneta Theme](https://github.com/plone/plonetheme.barceloneta/blob/master/HOWTO_DEVELOP.md).

### Source-Code

Plone code repository hosted at Github https://github.com/plone/plonetheme.barceloneta.

### Issues

Please use the [Issue-Tracker](https://github.com/plone/plonetheme.barceloneta/issues)
npm package: @plone/registry
Description: Add-on and configuration registry for Plone and for JavaScript and TypeScript-based apps.
Latest version: 2.7.1

# Add-on and configuration registry

This package provides support for building an add-on registry and infrastructure for JavaScript and TypeScript-based apps.

## Extensibility and pluggability

As a developer when you build an app, regardless of the framework and technologies used, it's a one-off app.
That means you have to build something that has very specific requirements, behavior, and look and feel.

Sometimes you need to build something generic that is pluggable and extensible.
In the JavaScript and TypeScript ecosystem, this is often quite complex, and the existing frameworks do not provide the means to do this.

`@plone/registry` provides tools to facilitate pluggability for your app.

## Documentation

You can find the detailed documentation of this package by visiting the following link.

https://plone-registry.readthedocs.io
npm package: @plone/restapi-angular
Description: [![Build Status](https://travis-ci.org/plone/plone.restapi-angular.svg?branch=master)](https://travis-ci.org/plone/plone.restapi-angular) [![Coverage Status](https://coveralls.io/repos/github/plone/plone.restapi-angular/badge.svg?branch=master)](https://c
Author: Plone Community
Latest version: 2.0.0

# The Plone Angular SDK

[![Build Status](https://travis-ci.org/plone/plone.restapi-angular.svg?branch=master)](https://travis-ci.org/plone/plone.restapi-angular)
[![Coverage Status](https://coveralls.io/repos/github/plone/plone.restapi-angular/badge.svg?branch=master)](https://coveralls.io/github/plone/plone.restapi-angular?branch=master)
[![Documentation Status](https://readthedocs.org/projects/plonerestapi-angular/badge/?version=latest)](http://plonerestapi-angular.readthedocs.io/en/latest/?badge=latest)

**A simple Angular SDK to build web sites easily on top of the Plone RESTAPI.**

This package aims to provide the services and components needed to build an Angular applications based on the [Plone REST API](http://plonerestapi.readthedocs.io/en/latest/).

Plone is a flexible and powerful backend, it provides:

- hierachical storage
- customizable content types
- granular access control
- workflows
- a rich management interface

The Plone Angular SDK provides ready-to-use components to build a wide range of applications.

![Animation](https://github.com/plone/plone.restapi-angular/raw/master/docs/anim.gif)

## Documentation

See [documentation](http://plonerestapi-angular.readthedocs.io).

## Example

This repository contains a very simple example: [https://github.com/collective/plone-angular-demo](https://github.com/collective/plone-angular-demo).

To initialize it, run:
```
yarn install
```

Make sure you have a Plone server running on localhost:8080 with Plone RESTAPI installed.

Then launch:
```
ng serve
```
and visit http://locahost:4200/.

By checking out this [commit](https://github.com/collective/plone-angular-demo/commit/152068ef3db2362da52e36ae7fe753992dd3bf42), you will get a site displaying the current content plus a navigation bar, with no customization.

If you checkout this [commit](https://github.com/collective/plone-angular-demo/commit/3881c003d1d253208d2db4a14c2bbec6dbe1b484), you will have bootstrap style (you will need to run `yarn install` in order to update your node modules) and a custom navigation.

## Run tests

    cd tests
    yarn install
    cd ..
    yarn test

## Contribute

- Issue Tracker: https://github.com/plone/plone.restapi-angular/issues
- Source Code: https://github.com/plone/plone.restapi-angular
- Documentation: https://github.com/plone/plone.restapi-angular/README.md

## Support

If you are having issues, please let us know.

Use thissue tracker https://github.com/plone/plone.restapi-angular/issues

## License

The project is licensed under the MIT license.
npm package: @plonegovbr/volto-twitter-block
Description: Volto add-on providing blocks to integrate Twitter elements to your site.
Author: PloneGov-BR
Latest version: 0.1.0

# Twitter Blocks for Volto (@plonegovbr/volto-twitter-block)

Addon implementing Twitter blocks to [Plone](https://plone.org) projects with [Volto](https://github.com/plone/volto).

[![npm](https://img.shields.io/npm/v/@plonegovbr/volto-twitter-block)](https://www.npmjs.com/package/@plonegovbr/volto-twitter-block)
[![](https://img.shields.io/badge/-Storybook-ff4785?logo=Storybook&logoColor=white&style=flat-square)](https://plonegovbr.github.io/volto-twitter-block/)
[![Code analysis checks](https://github.com/plonegovbr/volto-twitter-block/actions/workflows/code.yml/badge.svg)](https://github.com/plonegovbr/volto-twitter-block/actions/workflows/code.yml)
[![Unit tests](https://github.com/plonegovbr/volto-twitter-block/actions/workflows/unit.yml/badge.svg)](https://github.com/plonegovbr/volto-twitter-block/actions/workflows/unit.yml)

## Screenshots

### Tweet Block Variations

<img alt="Screenshot" src="./docs/block-variations.png" width="500" />

### Tweet Block Alignment

<img alt="Screenshot" src="./docs/block-alignment.png" width="500" />

### Tweet Block Editing

<img alt="Screenshot" src="./docs/block-sidebar-editing.png" width="100" />

## Examples

@plonegovbr/volto-twitter-block can be seen in action at the following sites:

- [Plone Brasil](https://plone.org.br)

You can also check its [Storybook](https://plonegovbr.github.io/volto-twitter-block/).

## Install

### New Volto Project

Create a Volto project

```shell
npm install -g yo @plone/generator-volto
yo @plone/volto my-volto-project --addon @plonegovbr/volto-twitter-block
cd my-volto-project
```

Install new add-on and restart Volto:

```shell
yarn install
yarn start
```

### Existing Volto Project

If you already have a Volto project, just update `package.json`:

```JSON
"addons": [
    "@plonegovbr/volto-twitter-block"
],

"dependencies": {
    "@plonegovbr/volto-twitter-block": "*"
}
```

### Integration with [@kitconcept/volto-blocks-grid](https://github.com/kitconcept/volto-blocks-grid)

If you already have a Volto project, just update `package.json` and make sure `@kitconcept/volto-blocks-grid` is listed before `@plonegovbr/volto-twitter-block` in **addons**:

```JSON
"addons": [
    "@kitconcept/volto-blocks-grid",
    "@plonegovbr/volto-twitter-block"
],

"dependencies": {
    "@kitconcept/volto-blocks-grid": "*",
    "@plonegovbr/volto-twitter-block": "*"
}
```

### Test it

Go to http://localhost:3000/

## Credits

The development of this add on was sponsored by the Brazilian Plone Community

[![PloneGov-Br](docs/plonegovbr.png)](https://plone.org.br/)
npm package: @plonquo/ember-material-components
Description: Wraps Google's Material Design Web Components with little fuss
Author: Fabriquartz
Latest version: 0.3.2

# @plonquo/ember-material-components

[Short description of the addon.]


## Compatibility

* Ember.js v3.28 or above
* Ember CLI v3.28 or above
* Node.js v14 or above


## Installation

```
ember install @plonquo/ember-material-components
```


## Usage

[Longer description of how to use the addon in apps.]


## Contributing

See the [Contributing](CONTRIBUTING.md) guide for details.


## License

This project is licensed under the [MIT License](LICENSE.md).
npm package: @ploomescrm/react-ploomes-virtual-grid
Description: Virtualized data grid
Latest version: 0.0.6

# @ploomes/react-ploomes-virtual-grid

## Scripts

Versão interna de grid de virtualização, baseada no projeto [React Data Grid](https://github.com/adazzle/react-data-grid)
Ainda pendente de ajustes de estrutura e documentação.

### Como rodar

TODO
npm package: @plop-next/cli
Description: Micro-generator framework CLI
Author: Nivvdiy
Latest version: 0.1.6

# @plop-next/cli

CLI package for plop-next.

This package provides:

- the `plop-next` command line interface
- TypeScript-friendly public types for your plopfile

## Installation

Install as a development dependency:

```bash
npm install -D @plop-next/cli
```

or:

```bash
yarn add -D @plop-next/cli
```

## Basic usage

Run the CLI from your project:

```bash
npx plop-next
```

or with a script:

```json
{
  "scripts": {
    "plop-next": "plop-next"
  }
}
```

Then run:

```bash
npm run plop-next
```

## Type-safe plopfile example

```ts
import type { PlopNext } from "@plop-next/cli";

export default function plop(plop: PlopNext) {
  plop.setGenerator("component", {
    description: "Create a component",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "Component name",
      },
    ],
    actions: [
      {
        type: "add",
        path: "src/components/{{name}}.ts",
        template: "export const {{name}} = () => null;",
      },
    ],
  });
}
```

## Links

- Documentation: [https://nivvdiy.github.io/plop-next/](https://nivvdiy.github.io/plop-next/)
- Repository: [https://github.com/Nivvdiy/plop-next](https://github.com/Nivvdiy/plop-next)
- Issues: [https://github.com/Nivvdiy/plop-next/issues](https://github.com/Nivvdiy/plop-next/issues)
npm package: @plop-next/core
Description: Core utilities and types for plop-next
Author: Nivvdiy
Latest version: 0.1.5

# @plop-next/core

Core internals for plop-next.

This package is primarily intended to be used by `@plop-next/cli`.

For normal usage, install and run the CLI package only:

```bash
npm install -D @plop-next/cli
```

or:

```bash
yarn add -D @plop-next/cli
```

You do not need to install or use this package directly in a typical project setup.

## Links

- Documentation: [https://nivvdiy.github.io/plop-next/](https://nivvdiy.github.io/plop-next/)
- Repository: [https://github.com/Nivvdiy/plop-next](https://github.com/Nivvdiy/plop-next)
- Issues: [https://github.com/Nivvdiy/plop-next/issues](https://github.com/Nivvdiy/plop-next/issues)
npm package: @plop-next/i18n
Description: Internationalization utilities for plop-next
Author: Nivvdiy
Latest version: 0.1.6

# @plop-next/i18n

Internationalization plugin for plop-next.

This package is designed to be used with `@plop-next/cli`.

For normal usage, treat it as a CLI extension layer (not a standalone package).

## Installation

```bash
npm install -D @plop-next/cli @plop-next/i18n
```

or:

```bash
yarn add -D @plop-next/cli @plop-next/i18n
```

## Usage with CLI

```ts
import type { PlopNext } from "@plop-next/cli";
import { PlopNextI18n } from "@plop-next/i18n";

export default function plop(plop: PlopNext) {
  const i18n = new PlopNextI18n(plop);

  i18n.registerLocale("fr", {
    cli: {
      selectGenerator: "Choisissez un generateur",
    },
  });

  plop.useI18n({ force: "fr" });
}
```

## Built-in locales

- `en`
- `es`
- `fr`
- `pt`
- `zh`

## Links

- Documentation: [https://nivvdiy.github.io/plop-next/](https://nivvdiy.github.io/plop-next/)
- Repository: [https://github.com/Nivvdiy/plop-next](https://github.com/Nivvdiy/plop-next)
- Issues: [https://github.com/Nivvdiy/plop-next/issues](https://github.com/Nivvdiy/plop-next/issues)
npm package: @plopix/js-console
Description: A beautiful console.log wrapper
Author: Sébastien Morel aka Plopix
Latest version: 1.0.1

# Plopix - JS Console

This package is a wrapper of `console.log` that enables outputs depending a Verbosity level that:
- you can set in the source code
- you can override via LocalStorage using the key: `plopix.console.verbosity`


## Installation

### Vanilla JS Usage

Inject the library in your code:

```html
<script src="https://github.com/Plopix/js-console-wrapper/releases/download/v1.0.1/plopix-js-console.min.js"></script>
```

You have now access to `PlopixConsole` globally.


### Node



## Usage

Just use it!

> Have a look in the [example](tests/web/tests.js).


In addition to the method provided by the `LoggerInterface` you also have

```typescript      
    groupStart(title: string): void;
    groupEnd(): void;
    dir(data: any): void;
    table(data: any): void;
    clear(): void;
    memory(): void;
    trace(): void;
```

> They won't display anything if the Browser does not support it.

### On Load Console Logging

If you want to log things on the page load, you can use a specific HTML tag.

```html
<span style="display: none" data-plopix-console data-verbosity="200" data-context="[1,2,3,4]">Oh yeah %d %d</span>
``` 

> Have a look in the [example](tests/web/tests.html).


### Many Levels

```typescript
export enum Level {
    EMERGENCY = 600,
    ALERT = 550,
    CRITICAL = 500,
    ERROR = 400,
    WARNING = 300,
    NOTICE = 250,
    INFO = 200,
    DEBUG = 100,
    SUCCESS = 0
}
```

> Can be used with Level.* in TypeScript

###  Many Method

```typescript
export interface LoggerInterface {
    // Logs with an arbitrary level.
    log(level: Level, message: string, context?: any): void;

    // System is unusable.
    emergency(message: string, context?: any): void;

    // Action must be taken immediately.
    alert(message: string, context?: any): void;

    // Critical conditions.
    critical(message: string, context?: any): void;

    // Runtime errors that do not require immediate action but should typically be logged and monitored.
    error(message: string, context?: any): void;

    //  Exceptional occurrences that are not errors.
    warning(message: string, context?: any): void;

    // Normal but significant events.
    notice(message: string, context?: any): void;

    // Interesting events.
    info(message: string, context?: any): void;

    //  Detailed debug information.
    debug(message: string, context?: any): void;

    //  When all is good
    success(message: string, context?: any): void;
}
```


## Licensing

Project under the [MIT License (MIT)](LICENSE)
npm package: @plopmenz/diamond-governance-sdk
Description: SDK for Diamond Governance, a ERC-2535 DAO bridge.
Author: Plopmenz
Latest version: 1.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

### Diamond Governace SDK
TypeScript wrapper for the Diamond Governance smart contract calls.

### Example
```
const DiamondGovernanceAddress = "< insert address of Diamond Contract >";
const [owner] = await ethers.getSigners();
const client = new DiamondGovernanceClient(DiamondGovernanceAddress, owner);
const IERC165 = await client.pure.IERC165();
console.log(await IERC165.supportsInterface("0x01ffc9a7"));
```

### Real world projects
[SecureSECO DAO webapp](https://github.com/SecureSECODAO/dao-webapp)
[Diamond Governance demo](https://github.com/Plopmenz/diamond-governance-demo)
npm package: @plopslop/otel
Description: Plopslop plugin for distributed tracing
Author: Philipp Dyck
Latest version: 1.0.0

# @plopslop/otel

OpenTelemetry plugin for distributed tracing.

## Installation

```bash
pnpm add @plopslop/otel @opentelemetry/api
```

You"ll also need OpenTelemetry SDK and exporters. See [OpenTelemetry JS docs](https://opentelemetry.io/docs/languages/js/) for setup.

## Usage

```typescript
import { createPubSub } from "@plopslop/core";
import { redis } from "@plopslop/redis";
import { otelPlugin } from "@plopslop/otel";

const pubsub = createPubSub({
  driver: redis(),
  plugins: [otelPlugin()],
  topics: { /* ... */ },
});
```

## What it does

Creates spans for publish and subscribe operations with W3C trace context propagation:

**Publish spans** (`plopslop.publish`):
- `messaging.system`: `plopslop`
- `messaging.destination`: topic name
- `messaging.message.id`: message ID
- `messaging.operation`: `publish`
- `messaging.message.payload_size_bytes`: payload size

**Subscribe spans** (`plopslop.subscribe`):
- Same attributes as publish
- `messaging.operation`: `receive`
- Linked to parent publish span via trace context

## Integration

Works with any OpenTelemetry-compatible backend, like e.g. Sentry.

See [OpenTelemetry Registry](https://opentelemetry.io/ecosystem/registry/) for exporters.
npm package: @plopslop/postgres
Description: Plopslop driver for PostgreSQL using LISTEN/NOTIFY
Author: Philipp Dyck
Latest version: 1.0.0

# @plopslop/postgres

PostgreSQL driver using LISTEN/NOTIFY for distributed pub/sub.

## Installation

```bash
pnpm add @plopslop/postgres pg
```

## Usage

```typescript
import { createPubSub } from "@plopslop/core";
import { postgres } from "@plopslop/postgres";
import { z } from "zod";

const pubsub = createPubSub({
  driver: postgres({
    host: "localhost",
    port: 5432,
    user: "postgres",
    password: "your-password",
    database: "myapp",
  }),
  topics: {
    userCreated: {
      name: "user.created",
      schema: z.object({ name: z.string() }),
    },
  },
});
```

## Configuration

The `postgres()` function accepts all [node-postgres configuration options](https://node-postgres.com/apis/client):

```typescript
postgres({
  host: "localhost",
  port: 5432,
  user: "postgres",
  password: "your-password",
  database: "myapp",
  ssl: { rejectUnauthorized: false },
})
```

Connection string format is also supported:

```typescript
postgres("postgresql://user:password@localhost:5432/myapp")
```

## Limitations

- **8KB payload limit** - PostgreSQL NOTIFY has an 8000 byte maximum
- **Same-session delivery** - Messages sent from a session are not received by the same session
- **No persistence** - Messages are lost if no subscribers are listening
- **Lower throughput** - ~1K-5K messages/second vs Redis"s 10K-50K

For large payloads, send references (IDs) instead of full data.

## Requirements

- PostgreSQL 9.0+
- pg
- Node.js 18+
npm package: @plopslop/redis
Description: Plopslop driver for Redis using pubsub
Author: Philipp Dyck
Latest version: 1.0.0

# @plopslop/redis

Redis driver for distributed pub/sub across Node.js instances.

## Installation

```bash
pnpm add @plopslop/redis ioredis
```

## Usage

```typescript
import { createPubSub } from "@plopslop/core";
import { redis } from "@plopslop/redis";
import { z } from "zod";

const pubsub = createPubSub({
  driver: redis({
    host: "localhost",
    port: 6379,
  }),
  topics: {
    userCreated: {
      name: "user.created",
      schema: z.object({ name: z.string() }),
    },
  },
});
```

## Configuration

The `redis()` function accepts all [ioredis configuration options](https://github.com/redis/ioredis):

```typescript
redis({
  host: "localhost",
  port: 6379,
  password: "your-password",
  db: 0,
  retryStrategy: (times) => Math.min(times * 50, 2000),
})
```

## Limitations

- Messages are ephemeral - not persisted if no subscribers are active
- No message acknowledgment or delivery guarantees
- Subscriber connections must be maintained for message delivery

## Requirements

- Redis 2.0+
- ioredis
- Node.js 18+
npm package: @plos/cookie-consent
Description: API for interaction w/ consent tracking cookie
Latest version: 1.0.5

# Cookie Consent

Cookie library for ensuring consistency across PLOS applications.

## Usage

### accept
No parameters.  Accepts all cookies.

### customize
`customize(purpose:string, accept:boolean)`

Set consent status for specific purpose.  `purpose` must be valid.
### hasConsented
`hasConsented(purpose)`

Returns whether the user has consented to cookies for the given purpose.
If `purpose` is not provided, then returns when the user has consented
to cookies for any of the valid purposes.

### reject
No parameters.  Rejects all cookies.

### reset
Deletes the consent cookie.
npm package: @plos/cookie-consent-banner
Description: User consent banner
Latest version: 1.0.12

# Cookie Consent Banner

React component to manage cookie consent for PLOS applications.

## Contributing
All MRs should contain a version increment.  Otherwise, a new
version will not be distributed.

### yalc
#### Without Docker:
##### Initial Setup
```shell
npm i yalc -g
<in this folder> yalc publish
<in plos-themes> yalc add @plos/cookie-consent-banner
```
##### Updating Changes
```shell
<in this folder> yalc push
```

#### With Docker:
Much more complex.  See plos-themes repo, branch `chore/docker-yalc`.  

Publish command becomes: `yalc publish --store-folder <THEMES_DIR>/yalc
`
npm package: @plosson/mvcp
Description: Move Claude Code project history when you relocate a project directory
Author: plosson
Latest version: 0.1.1

# mvcp

Move Claude Code project history when you relocate a project directory.

Claude Code stores conversation history in `~/.claude/projects/` using encoded directory paths (slashes replaced with hyphens). When you move a project, the history gets orphaned. `mvcp` fixes that.

## Install

```bash
# npm
npm install -g @plosson/mvcp

# or run directly
npx @plosson/mvcp mv /old/path /new/path
```

## Usage

### Move project history

```bash
# After moving your project from /home/user/old/project to /home/user/new/project
mvcp mv /home/user/old/project /home/user/new/project
```

### Dry run

```bash
mvcp mv --dry-run /old/path /new/path
```

### List all project histories

```bash
mvcp ls
```

## How it works

Claude Code encodes directory paths by replacing `/` with `-`:

```
/home/user/projects/myapp → -home-user-projects-myapp
```

These are stored in `~/.claude/projects/`. When you move a project, `mvcp` renames the history directory to match the new location.
npm package: @plot-and-scatter/react-animated-number
Description: React component for animating numbers
Author: Amey Sakhadeo, Frank Hangler
Latest version: 1.1.0

# react-animated-number
[![npm version](https://badge.fury.io/js/react-animated-number.svg)](http://badge.fury.io/js/react-animated-number)
[![devDependency Status](https://david-dm.org/ameyms/react-animated-number/dev-status.svg)](https://david-dm.org/ameyms/react-animated-number#info=devDependencies)

React component for animating numbers

## Install
react-animated-number is available via npm and can be used with [browserify](http://browserify.org/) or [webpack](https://webpack.github.io/).

```
npm install --save react-animated-number
```
## Usage

```js
import AnimatedNumber from 'react-animated-number';
...
...

class Demo extends Component {

    ...

    render () {
        <AnimatedNumber component="text" value={bigValue}
            style={{
                transition: '0.8s ease-out',
                fontSize: 48,
                transitionProperty:
                    'background-color, color, opacity'
            }}
            frameStyle={perc => (
                perc === 100 ? {} : {backgroundColor: '#ffeb3b'}
            )}
            duration={300}
            formatValue={n => prettyBytes(n)}/>
    }
}
```
## API

#### value: number
**required**<br/>
Numeric value to which to tween to

----
#### initialValue: number
**default**: `0`<br/>
Initial numeric value for the tween start

----

#### component: any
**default**: `"span"`<br/>
This is similar to the react transition [API](https://facebook.github.io/react/docs/animation.html#rendering-a-different-component). By default, renders text inside a `<span>`. You can pass in any valid `ReactElement`. Use `"text"` for rendering into SVG.

----

#### formatValue: ?(n: number) => string
A callback function that accepts a number and returns a formatted string

----

#### duration: ?number
**default**: `300`<br/>
Total duration of animation in milliseconds

----


#### frameStyle: ?(perc: number) => Object | void,
A callback function that accepts the percentage of completion of current animation and returns the style object to applied to the current frame

----

#### stepPrecision: ?number
The number of decimal places to render for intermediate values.
If set to `0`, rounds off the intermediate values using `Math.round`


<br/>


## Demo
A demo can be found [here](http://ameyms.com/react-animated-number/).
Source code for the demo can be found [here](https://github.com/ameyms/react-animated-number/blob/master/example/demo.jsx).

## License
react-animated-number is licensed under MIT license.
npm package: @plotday/agent
Description: ⚠️ DEPRECATED: This package has been renamed to @plotday/twister
Author: Plot
Latest version: 0.20.0
Deprecated: true

# ⚠️ DEPRECATED: Package Renamed

**This package has been renamed to [`@plotday/twister`](https://www.npmjs.com/package/@plotday/twister)**

## Migration Guide

Please update your dependencies to use the new package name:

### Using npm:
```bash
npm uninstall @plotday/agent
npm install @plotday/twister
```

### Using pnpm:
```bash
pnpm remove @plotday/agent
pnpm add @plotday/twister
```

### Using yarn:
```bash
yarn remove @plotday/agent
yarn add @plotday/twister
```

## What Changed?

We renamed the package from `@plotday/agent` to `@plotday/twister` to better reflect our product direction:

- **Old name**: Plot Agent Builder → `@plotday/agent`
- **New name**: Plot Twist Creator → `@plotday/twister`

The API and functionality remain the same. Only the package name has changed.

## Update Your Code

If you have imports in your code, update them:

```javascript
// Old (deprecated)
import { Agent } from '@plotday/agent';

// New
import { Twist } from '@plotday/twister';
```

The core concepts remain the same - "Agents" are now called "Twists" in our ecosystem.

## Documentation

Visit the [Plot Twist Creator documentation](https://twist.plot.day) for complete guides and API reference.

## Support

If you have questions or need help migrating, please:
- [Open an issue](https://github.com/plotday/plot/issues)
- Visit [plot.day](https://plot.day) for more information

---

**Note**: This stub package re-exports `@plotday/twister` for compatibility, but we recommend updating to the new package name as soon as possible.
npm package: @plotday/tool-google-calendar
Description: Sync with Google Calendar
Author: Plot
Latest version: 0.14.1
Deprecated: This package has been renamed. Sources are no longer published as npm packages.

# Google Calendar Tool

A Plot tool for syncing with Google Calendar.

## Installation

```bash
npm install @plotday/tool-google-calendar @plotday/twister
```

## Usage

```typescript
import { Twist, Tools } from "@plotday/twister";
import { GoogleCalendar } from "@plotday/tool-google-calendar";
import { Integrations, AuthProvider } from "@plotday/twister/tools/integrations";

export default class extends Twist {
  private googleCalendar: GoogleCalendar;
  private auth: Integrations;

  constructor(id: string, tools: Tools) {
    super();
    this.googleCalendar = tools.get(GoogleCalendar);
    this.integrations = tools.get(Integrations);
  }

  async activate(priority: { id: string }) {
    // Request Google Calendar access
    const authLink = await this.integrations.request(
      {
        provider: AuthProvider.Google,
        scopes: ["https://www.googleapis.com/auth/calendar.readonly"],
      },
      {
        functionName: "onAuthComplete",
        context: { priorityId: priority.id },
      }
    );

    // User will authenticate via authLink
  }

  async onAuthComplete(authorization: any, context: any) {
    const authToken = await this.integrations.get(authorization);

    // Get available calendars
    const calendars = await this.googleCalendar.getCalendars(authToken);

    // Start syncing a calendar
    await this.googleCalendar.startSync(
      authToken,
      calendars[0].id,
      "onCalendarEvent"
    );
  }

  async onCalendarEvent(event: any) {
    // Handle calendar events
    console.log("New calendar event:", event.summary);
  }
}
```

## API

### `getCalendars(authToken: string)`

Retrieves the list of calendars available to the authenticated user.

### `startSync(authToken: string, calendarId: string, callbackName: string, options?: object)`

Starts syncing events from a Google Calendar.

### `stopSync(authToken: string, calendarId: string)`

Stops syncing events from a Google Calendar.

## License

MIT © Plot Technologies Inc.
npm package: @plotday/tool-google-contacts
Description: Sync with Google Contacts
Author: Plot
Latest version: 0.6.1
Deprecated: This package has been renamed. Sources are no longer published as npm packages.

# Google Contacts Tool

A Plot tool for syncing with Google Contacts.

## Installation

```bash
npm install @plotday/tool-google-contacts @plotday/twister
```

## Usage

```typescript
import { Twist, Tools } from "@plotday/twister";
import { GoogleContacts } from "@plotday/tool-google-contacts";
import { Integrations, AuthProvider } from "@plotday/twister/tools/integrations";

export default class extends Twist {
  private googleContacts: GoogleContacts;
  private auth: Integrations;

  constructor(id: string, tools: Tools) {
    super();
    this.googleContacts = tools.get(GoogleContacts);
    this.integrations = tools.get(Integrations);
  }

  async activate(priority: { id: string }) {
    // Request Google Contacts access
    const authLink = await this.integrations.request(
      {
        provider: AuthProvider.Google,
        scopes: ["https://www.googleapis.com/auth/contacts.readonly"],
      },
      {
        functionName: "onAuthComplete",
        context: { priorityId: priority.id },
      }
    );

    // User will authenticate via authLink
  }

  async onAuthComplete(authorization: any, context: any) {
    const authToken = await this.integrations.get(authorization);

    // Start syncing contacts
    await this.googleContacts.startSync(authToken, "onContact");
  }

  async onContact(contact: any) {
    // Handle contact updates
    console.log("Contact:", contact.names?.[0]?.displayName);
  }
}
```

## API

### `getContacts(authToken: string, options?: object)`

Retrieves contacts from Google Contacts.

### `startSync(authToken: string, callbackName: string)`

Starts syncing contacts from Google Contacts.

### `stopSync(authToken: string)`

Stops syncing contacts from Google Contacts.

## License

MIT © Plot Technologies Inc.