open-index/open-npm huggingface dataset:
npm package: @michalicat/test-class
Description: Class mocker for JS projects
Author: Tomas Michalica
Latest version: 0.1.0

# typescript-npm-package-template

> Template to kickstart creating a Node.js module using TypeScript and VSCode

Inspired by [node-module-boilerplate](https://github.com/sindresorhus/node-module-boilerplate)

## Getting started

**Click the "Use this template" button.**

Alternatively, create a new directory and then run:

```bash
curl -fsSL https://github.com/ryansonshine/typescript-npm-package-template/archive/main.tar.gz | tar -xz --strip-components=1
```

**Remove everything from here and above**

---

# my-package-name

[![npm package][npm-img]][npm-url]
[![Build Status][build-img]][build-url]
[![Downloads][downloads-img]][downloads-url]
[![Issues][issues-img]][issues-url]
[![Code Coverage][codecov-img]][codecov-url]
[![Commitizen Friendly][commitizen-img]][commitizen-url]
[![Semantic Release][semantic-release-img]][semantic-release-url]

> My awesome module

## Install

```bash
npm install my-package-name
```

## Usage

```ts
import { myPackage } from 'my-package-name';

myPackage('hello');
//=> 'hello from my package'
```

## API

### myPackage(input, options?)

#### input

Type: `string`

Lorem ipsum.

#### options

Type: `object`

##### postfix

Type: `string`
Default: `rainbows`

Lorem ipsum.

[build-img]:https://github.com/ryansonshine/typescript-npm-package-template/actions/workflows/release.yml/badge.svg
[build-url]:https://github.com/ryansonshine/typescript-npm-package-template/actions/workflows/release.yml
[downloads-img]:https://img.shields.io/npm/dt/typescript-npm-package-template
[downloads-url]:https://www.npmtrends.com/typescript-npm-package-template
[npm-img]:https://img.shields.io/npm/v/typescript-npm-package-template
[npm-url]:https://www.npmjs.com/package/typescript-npm-package-template
[issues-img]:https://img.shields.io/github/issues/ryansonshine/typescript-npm-package-template
[issues-url]:https://github.com/ryansonshine/typescript-npm-package-template/issues
[codecov-img]:https://codecov.io/gh/ryansonshine/typescript-npm-package-template/branch/main/graph/badge.svg
[codecov-url]:https://codecov.io/gh/ryansonshine/typescript-npm-package-template
[semantic-release-img]:https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[semantic-release-url]:https://github.com/semantic-release/semantic-release
[commitizen-img]:https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[commitizen-url]:http://commitizen.github.io/cz-cli/
npm package: @michaliskout/generate-react-lite
Description: This is a lite boilerplate for a basic React.Js project
Author: Michalis Koutridis
Latest version: 2.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# THIS IS A DEPRECATED PACKAGE.

# PLEASE USE THE NEW PACKAGE INSTEAD :

[![npmRepo](https://img.shields.io/badge/jsboilerplates-npm-purple.svg)](https://www.npmjs.com/package/@michaliskout/js-boilerplates)
npm package: @michaliskout/js-boilerplates
Description: This is a collection of custom javascript boilerplate projects.
Author: Michalis Koutridis
Latest version: 1.2.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# js-boilerplates [![githubRepo](https://img.shields.io/badge/github-michalisKout-coral.svg)](https://github.com/michalisKout/js-boilerplates) | [![npmRepo](https://img.shields.io/badge/version-1.2.0-purple.svg)](https://www.npmjs.com/package/@michaliskout/js-boilerplates)

js-boilerplates is a collection of javascript boilerplate projects.

## Installation

Use the npm package manager [npm](https://www.npmjs.com/) to install and run js-boilerplates.

```
npx @michaliskout/js-boilerplates
```

## Usage

```terminal
> Do you want to skip config ? No
> Please choose which project template to use react-lite
> Please give a name to your project my-custom-boilerplate-project
> Do you want to automatically install npm deps ? No
```

## Boilerplate available projects

### react-lite - core dependencies:

-   [![NodeJs](https://img.shields.io/badge/nodeJs-13.11.0-green.svg)](https://webpack.js.org/)
-   [![npm](https://img.shields.io/badge/npm-6.13.7-red.svg)](https://webpack.js.org/)
-   [![ReactJs](https://img.shields.io/badge/reactJs-16.13.1-blue.svg)](https://webpack.js.org/)

### vanilla-js - core dependencies:

-   [![NodeJs](https://img.shields.io/badge/nodeJs-13.11.0-green.svg)](https://webpack.js.org/)
-   [![npm](https://img.shields.io/badge/npm-6.13.7-red.svg)](https://webpack.js.org/)

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @michalklor/authors-info
Description: Take the guesswork out of tracking **who created, edited, and published content(and when)** across your **collections and globals**—**automatically**.
Author: shefing
Latest version: 1.0.8

## [Author Info plugin](./src/index.ts)

Take the guesswork out of tracking **who created, edited, and published content(and when)** across your **collections and globals**—**automatically**.

https://github.com/user-attachments/assets/3a23a502-2867-41a8-bd35-506f911c8b41

### Usage
🔹 **Seamless Author Tracking** – This plugin **automatically captures and stores** key authoring details, so you always know **who created, modified, and published** each document.  
🔹 **Enhanced Metadata** – While Payload CMS tracks creation and modification dates, it **doesn’t store publication dates**—but this plugin does! Now, you’ll have a clear **record of the most recent publish date** for every entry.  
🔹 **Integrated Author Data** – A new **"Author Data" tab** is added to the authoring interface, providing a centralized place for all user activity related to the document.

With this **fully automated** tracking system, you'll always have complete visibility into **who did what and when**—**without any extra effort**. 

### Install

Install the plugin using your node package manager, e.g:

`pnpm add @shefing/authors-info`

### Setup

In the payload.config.ts add the following:

```typescript
plugins: [
    ...plugins,
    addAuthorsFields({
      excludedCollections: [],//array of collections names to exclude
      excludedGlobals:[], // array of globals names to exclude
      usernameField: 'fullName', //name field to use from Users collection, 'user' by default
    }),
```
npm package: @michalklor/color-picker
Description: Payload CMS does not include a built-in color picker, so we added a custom field that integrates Tailwind's color palette. Users can select a color, enter a hex code, or search by name directly within the CMS.
Author: shefing
Latest version: 1.0.7

## [Color Picker Field ](./src/index.ts)

Payload CMS does not include a built-in color picker, so we added a custom field that integrates Tailwind's color palette. Users can select a color, enter a hex code, or search by name directly within the CMS.

This integrates Tailwind design system with ShadCN's component library for a seamless experience.

https://github.com/user-attachments/assets/19b898d4-49b4-43d9-8d4e-d3bbb3c6bf8e

### Setup

Install the field using your node package manager, e.g:

    ` npm install @shefing/color-picker`

In the target collection add the following:

```typescript
import { createColorField } from '@shefing/color-picker';

fields: [
  createColorField({
    name: 'color', //The name of the field.
    label: 'font-color', //The label of the field.
  }),
];
```

To use this package, make sure Tailwind CSS is installed in your project.
npm package: @michalklor/comments
Description: We created a plugin that gives the ability to add comments between users over text in a RichText field, using Lexical
Author: shefing
Latest version: 1.0.29

### Comments plugin

We created a plugin that gives the ability to add comments between users over text in a RichText field, using Lexical

The user can add a comment on selected text to start a discussion about this content:

![img1.png](./images/img1.png)

Comments section is available on the right side of the screen and users can reply or delete comments

![img2.png](./images/img2.png)

In addition, commented text has a mark

when clicking on the mark, it open the comments panel on the right side with focus on the current comment

![img3.png](./images/img3.png)

# Plugin Installation and Usage

Follow these steps to install and use the plugin in your Payload CMS project.

## 1. Enable Comments in Your Collection

In the collection where you want to use the plugin, add the following configuration under the `admin` section:

```javascript
admin: {
  custom: {
    comments: true,
  },
},
```

## 2. Configure the Rich Text Field

For the rich text field where you want the plugin features, include the following editor configuration:

```javascript
fields: [
  {
    name: 'richText',
    label: 'Rich Text',
    type: 'richText',
    editor: lexicalEditor({
      features: ({}) => [FixedToolbarFeature(), commentFeature()],
    }),
  },
];
```
npm package: @michalklor/cross-collection
Description: This plugin allows you to **override** default Payload CMS component views and inject custom behavior.
Author: shefing
Latest version: 1.0.4


# Cross-Collection Config Plugin

This plugin allows you to **override** default Payload CMS component views and inject custom behavior.

---

## 📦 Installation

Install the plugin via your package manager:

```bash
pnpm add @shefing/cross-collection
```
## ⚙️ Setup

To override a component's view in Payload, add the following to your `payload.config.ts`:

```javascript
import { CrossCollectionConfig } from '@shefing/cross-collection';

CrossCollectionConfig({
  customOverrides: {
    // Replace the default edit view
    'admin.components.views.edit.default': CustomCollectionEdit,

    // Replace the versions edit view
    'admin.components.views.edit.versions': CustomCollectionEdit,
  },
});
```

---

## 🔥 Features

- **Full Control**: Override any Payload component view.
- **Easy Customization**: Replace edit views, list views, and more with custom React components.
- **Flexible**: Override any default view across the CMS.

With this plugin, you have **full control** over how every component view in Payload CMS appears! ✨
npm package: @michalklor/custom-version-view
Description: This plugin adds some fields to the version view :
Author: shefing
Latest version: 1.0.7

## [Custom Version View plugin](./src/index.ts)

This plugin adds some fields to the version view :

Updated At -using relative date
Updated by

For example:

![img.png](./images/img.png)

### Setup

Install the plugin using your node package manager, e.g:

`npm add @shefing/custom-version-view`

In the payload.config.ts add the following:

```typescript
plugins: [
    ...plugins,
    versionsPlugin({
      excludedCollections: [] //array of collections names to exclude
      excludeGlobals:[] //array of globals names to exclude
    })
```
The updated by field in versions relies on the authors-info package.

### Collection Configuration

Add the following configuration to enable versions for a collection:

```javascript
versions: {
    drafts: true,
  }
```
npm package: @michalklor/dynamic-field-overrides
Description: This plugin allows you to **dynamically override all fields of a specific type** in Payload CMS, replacing their default components with custom ones—seamlessly and automatically!
Author: shefing
Latest version: 1.0.1

## 🔗 [Dynamic Field Overrides Plugin](./src/index.ts)

This plugin allows you to **dynamically override all fields of a specific type** in Payload CMS, replacing their default components with custom ones—seamlessly and automatically!

## 📦 Installation

Install the plugin via your package manager:

```bash
pnpm add @shefing/dynamic-field-overrides
```

## ⚙️ Setup

With this plugin, you can **define a field type once** and override all occurrences of that type across your collections with a custom React component.

Add the following to your `payload.config.ts`:

```javascript
import { DynamicFieldOverrides } from '@shefing/dynamic-field-overrides';

 DynamicFieldOverrides({
      fieldType: 'text',
      componentPath: './component/CustomText',
       excludedCollections: ['media'],
       xcludedGlobals:[]
    }),
```

## 🔥 Features

- **Global Field Overrides**: Define a field type in the plugin, and every instance of that type is replaced with your custom component.
- **No Manual Configuration**: No need to modify each field individually—just set it once and it applies everywhere.
- **Seamless Integration**: Works with existing Payload CMS structures without disrupting data or functionality.

With this plugin, you gain **full control** over how Payload CMS fields behave and appear—without the need for repetitive manual overrides! ✨
npm package: @michalklor/icon-select
Description: This plugin adds a custom Icon Select field to Payload CMS, utilizing the tailwind icon library for easy selection. Users can search or scroll through icons in the dropdown, with ShadCN UI integration for a seamless, modern experience.
Author: shefing
Latest version: 1.0.5

## [Icon select field ](./src/index.ts)

This plugin adds a custom Icon Select field to Payload CMS, utilizing the tailwind icon library for easy selection. Users can search or scroll through icons in the dropdown, with ShadCN UI integration for a seamless, modern experience.

![img1.png](./images/img1.png)

### Setup

Install the plugin using your node package manager, e.g:

` npm install @shefing/icon-select`

In the collection add the following:

```typescript
import   { createIconSelectField }  from "@shefing/icon-select"

 fields: [ 
 createIconSelectField({ name: 'iconType', label: 'Select Icon' }),
 ]
```

To use this package, you need to install Tailwind CSS in your project.
npm package: @michalklor/right-panel
Description: We created a plugin which will enable the open of a relationship field in a right panel instead of in a pop-up.
Author: shefing
Latest version: 1.0.101

## [Right-panel plugin](./src/index.ts)

We created a plugin which will enable the open of a relationship field in a right panel instead of in a pop-up.

This allows working on both of the entities ,original and relationship, at once.

This was done by adding a custom view to the edit view.

For example:

![img1.png](./images/img1.png)

### Setup

In order to use this authorization cross collection plugin install it using your prefered node package manager, e.g:

`npm add @michalklor/right-panel`

In the payload.config.ts add the following:

```javascript
RightPanelPlugin({});
```

### Configuration

- `excludedCollections`: array of collections names to exclude

### collection configuration

In the collection where you want to add a Right Panel to a Relationship field, you need to include the following in the collection's admin configuration:

```javascript
  admin: {
    custom: {
      rightPanel: true,
    },

  },
```

### Fields Configuration

In the Relationship field where you want to enable the Right Panel, you need to add the following lines to the field configuration:

```javascript
    admin: {
      components: {
        Field: 
        components: {
            Field: '@michalklor/right-panel/components/RelationInRightPanelField'
        }
      }
    },
```
npm package: @michalkopacz093/id-generator
Description: It simply generates new unique id created from random picked alphabet characters, and allow you to pick how long id should be.
Author: Michał Kopacz
Latest version: 1.0.1

# Id_generator

It simply generates new unique id created from random picked alphabet characters, and allow you to pick how long id should be.


# Install:

`npm install @michalkopacz093/id-generator` <br>

`yarn add @michalkopacz093/id-generator`

# Usage:

`const randomID = require('@michalkopacz093/id-generator');`<br>

`randomID( X )` <br><br>
X ->  length of your ID

# Demo-use:

`const randomID = require('@michalkopacz093/id-generator');`

`console.log('My generated ID: ', randomID(10));`<br>

//This will produce result:<br> `My generated ID:  ACqJOFXKnR`
npm package: @michalmarsalek/side-by-side
Description: Javascript library for [SBS](https://github.com/MichalMarsalek/SBS).
Author: Michal Maršálek
Latest version: 1.0.0

# The Javascript library

Javascript library for [SBS](https://github.com/MichalMarsalek/SBS).

The Javascript library is distributed on [npmjs.com](https://www.npmjs.com/package/side-by-side).