open-index/open-npm huggingface dataset:
npm package: @innovixx/eslint-config
Description: Opinionated ESLint config for JavaScript developers
Author: service@innovixx.co.uk
Latest version: 3.0.12

# ESLint Config Guide

## Highlights

An extensible config library for JavaScript developers which utilizes the [flat config](https://eslint.org/docs/latest/use/migrate-to-9.0.0#flat-linter) now default in ESlint v9.x.

## Quick Start

### Installation

```
npm i --save-dev @innovixx/eslint-config
```
```
yarn add --dev @innovixx/eslint-config
```
```
pnpm i -D @innovixx/eslint-config
```

### Usage

There are a number of configurations for consumption. For an example of a minimal base configuration:

```javascript
import baseConfig from '@innovixx/eslint-config/config/configs/base/index.mjs';

export default [
	baseConfig,
	{
		files: ['**/*.{js}'],
	},
];
```
This can then be extended to provide the React, TypeScript and Jest Configs also available in the library, as well as custom rules, plugins, and settings. For more information see the [ESLint config guide](https://eslint.org/docs/latest/use/configure/configuration-files)

For working examples, see the [demo app](./demo).

## Demo

```
git clone git@github.com:innovixx/eslint-config.git
pnpm i
pnpm lint
```

The demo directory uses the eslint config file in the [root](https://github.com/innovixx/eslint-config/blob/master/eslint.config.mjs) of the project.

## License

[MIT](https://github.com/innovixx/eslint-config/blob/master/LICENSE) Copyright (c) Innovixx Digital Limited
npm package: @innovixx/payload-azure-email-adapter
Description: payload-azure-email-adapter
Author: support@innovixx.co.uk
Latest version: 0.0.3


# Payload Azure Communication Email Adapter

[![NPM](https://img.shields.io/npm/v/@innovixx/payload-azure-email-adapter)](https://www.npmjs.com/package/@innovixx/payload-azure-email-adapter)

An email adapter for [Payload CMS](https://github.com/payloadcms/payload) using Azure Communication Services Email.

Core features:

  - Send transactional emails via Azure Communication Services
  - Easy integration with Payload's email system
  - Supports HTML, plain text, CC, BCC, and reply-to


## Installation

```bash
yarn add @innovixx/payload-azure-email-adapter
# OR
npm i @innovixx/payload-azure-email-adapter
```


## Basic Usage

In your [Payload config](https://payloadcms.com/docs/configuration/overview), set the `email` property to use the adapter:

```js
import { buildConfig } from 'payload';
import { azureCommunicationEmailAdapter } from '@innovixx/payload-azure-email-adapter';

export default buildConfig({
  // ...existing config...
  email: azureCommunicationEmailAdapter({
    defaultFromAddress: process.env.FROM_EMAIL || 'noreply@innovixx.co.uk',
    defaultFromName: 'Innovixx',
    connectionString: process.env.AZURE_COMMUNICATION_CONNECTION_STRING,
  }),
});
```


### Options

The adapter accepts the following options:

- `defaultFromAddress` (string): Default sender email address
- `defaultFromName` (string): Default sender name
- `connectionString` (string): Azure Communication Services connection string


## TypeScript

Types are available for strict usage:

```typescript
import type { AzureCommunicationEmailAdapterArgs } from '@innovixx/payload-azure-email-adapter';
```


## Development

To develop or debug this adapter, use the included demo directory for a self-seeding Payload instance. Changes in `./src` are reflected in the demo. See the demo README for details.
npm package: @innovixx/payload-color-picker-field
Description: The Payload Color Picker that enables an easy color selection field for your Payload projects.
Author: support@innovixx.co.uk
Latest version: 2.0.4

# Payload Color Picker Field

[![NPM](https://img.shields.io/npm/v/@innovixx/payload-color-picker-field)](https://www.npmjs.com/package/@innovixx/payload-color-picker-field)

A field for [Payload](https://github.com/payloadcms/payload) that enables an easy color selection field for your Payload projects.

![payload-color-picker-field-screenshot.png](https://github.com/Innovixx-Development/payload-color-picker-field/blob/master/screenshots/payload-color-picker-field-screenshot.png?raw=true)

## Core features:

  - Add a color picker field to your Payload collections
  - Supports HEX color formats

## Installation

```bash
  yarn add @innovixx/payload-color-picker-field
  # OR
  npm i @innovixx/payload-color-picker-field
```

## Basic Usage

```js
import type { CollectionConfig } from 'payload/types'

import { colorPickerField } from '@innovixx/payload-color-picker-field'

const Pages: CollectionConfig = {
  slug: 'pages',
  admin: {
    useAsTitle: 'title',
  },
  fields: [
    colorPickerField({
      name: 'primaryColor',
      label: 'Primary Color',
      required: true,
      admin: {
        position: 'sidebar',
        description: 'Choose a color for this page',
      },
    }),
  ],
}

export default Pages
```

## Development

To actively develop or debug this plugin you can either work directly within the demo directory of this repo, or link your own project.

1. #### Internal Demo

   This repo includes a fully working, self-seeding instance of Payload that installs the plugin directly from the source code. This is the easiest way to get started. To spin up this demo, follow these steps:

   1. First clone the repo
   1. Then, `cd YOUR_PLUGIN_REPO && yarn && cd demo && yarn && yarn cleanDev`
   1. Now open `http://localhost:3000/admin` in your browser
   1. Enter username `admin@innovixx.co.uk` and password `Pa$$w0rd!`

   That's it! Changes made in `./src` will be reflected in your demo. Keep in mind that the demo database is automatically seeded on every startup, any changes you make to the data get destroyed each time you reboot the app.
npm package: @innovixx/payload-next-cache-revalidate-plugin
Description: plugin for Payload CMS that calls Next.js revalidation endpoints to clear the server-side cache, ensuring that users receive the most up-to-date content.
Author: support@innovixx.co.uk
Latest version: 0.1.1

# Payload Next Cache Revalidate Plugin

A plugin for https://github.com/payloadcms/payload that calls Next.js revalidation endpoints to clear the server-side cache, ensuring that users receive the most up-to-date content.

## Core Features:

- Revalidate cache for specified collections
- Supports dynamic URL generation for revalidation endpoints

## Installation

```bash
pnpm add @innovixx/payload-next-cache-revalidate-plugin
# OR
npm i @innovixx/payload-next-cache-revalidate-plugin
```

## Basic Usage

```js
import { payloadNextCacheRevalidatePlugin } from '@innovixx/payload-next-cache-revalidate-plugin';

const payloadConfig = {
	...
  plugins: [
    payloadNextCacheRevalidatePlugin({
      collections: [
        'page',
      ],
      generateUrl: async ({ doc, collectionConfig, req }) => {
        switch (collectionConfig.slug) {
          default:
          case 'page': {
            return `${process.env.CLIENT_URL}/revalidate?path=/${doc.slug}`;
          }
        }
      },
    }),
  ],
	...
};
```

## Development

To actively develop or debug this plugin, you can either work directly within the demo directory of this repo or link your own project.

### Internal Demo

This repo includes a fully working, self-seeding instance of Payload that installs the plugin directly from the source code. This is the easiest way to get started. To spin up this demo, follow these steps:

1. First, clone the repo
2. `cd YOUR_PLUGIN_REPO && pnpm && pnpm watch `
3. `cd YOUR_PLUGIN_REPO/demo && pnpm && pnpm cleanDev`
4. Now open `http://localhost:3000/admin` in your browser
5. Enter username `admin@innovixx.co.uk` and password `Pa$$w0rd!`

That's it! Changes made in `./src` will be reflected in your demo.
npm package: @innovixx/prisma-gql-generator
Description: A Prisma generator that outputs a GraphQL schema based on your Prisma models and enums.
Author: Innovixx
Latest version: 0.0.7

# prisma-gql-generator

A Prisma generator that outputs a GraphQL schema based on your Prisma models and enums.

## Features
- Generates a GraphQL schema (`index.graphql`) from your Prisma schema
- Supports Prisma models and enums
- Outputs to the configured generator output directory

## Usage
1. Add this generator to your `schema.prisma`:

```
generator gql {
  provider = "@innovixx/prisma-gql-generator"
  output   = "./generated"
}
```

2. Run Prisma generate:

```
npx prisma generate
```

3. Find the generated `index.graphql` in your output directory.

## License

MIT
npm package: @innovixx/stylelint-config
Description: Opinionated stylelint config for JavaScript developers
Author: service@innovixx.co.uk
Latest version: 1.0.8

# Stylelint Config Guide

## Highlights

An extensible Stylelint config for enforcing consistent conventions and best practices in SASS, SCSS, Less & CSS.

## Quick Start

### Installation

```
npm i --save-dev @innovixx/stylelint-config
```
```
yarn add --dev @innovixx/stylelint-config
```
```
pnpm i -D @innovixx/stylelint-config
```

### Usage

There are a number of configurations for consumption. For an example of a minimal base configuration:

```javascript
import plugins from '@innovixx/stylelint-config/config/plugins/index.mjs';
import rules from '@innovixx/stylelint-config/config/rules/index.mjs';
import extendsConfig from '@innovixx/stylelint-config/config/extends/index.mjs';

export default {
  extends: [
    ...extendsConfig.extends
  ],
  plugins: [
    ...plugins.plugins
  ],
  rules: {
    ...rules.rules
  }
}
```
This can then be extended to provide custom rules, plugins, and settings. For more information see the [Stylelint config guide](https://stylelint.io/user-guide/configure)

For working examples, see the [demo app](./demo).

## Demo

```
git clone git@github.com:innovixx/stylelint-config.git
pnpm i
pnpm lint
```

The demo directory uses the Stylelint config file in the [root](https://github.com/innovixx/stylelint-config/blob/master/stylelint.config.mjs) of the project.

## License

[MIT](https://github.com/innovixx/stylelint-config/blob/master/LICENSE) Copyright (c) Innovixx, Ltd
npm package: @innovorder/serverless-resize-bucket-images
Description: When an image is uploaded to the bucket and his path contains `toBeResized` (`uploads/<brand_id/brand_hash>/toBeResized/image1.png`), the image resizer Cloud Function resizes and compress it. When the job is done, the new image is uploaded to the same pat
Latest version: 2.2844.10

# How it works

When an image is uploaded to the bucket and his path contains `toBeResized` (`uploads/<brand_id/brand_hash>/toBeResized/image1.png`), the image resizer Cloud Function resizes and compress it. When the job is done, the new image is uploaded to the same path extracting the `toBeResized` part (`uploads/<brand_id/brand_hash>/image1.png`).

# Local development

You need to set (or create in a `.env` file) a GOOGLE_APPLICATION_CREDENTIALS environment variable with the path to your Google Storage credentials.

Use `yarn start` to load a local hot reloaded instance of the Cloud Function. The instance listens on http://localhost:8080. You must do a POST request to simulate an event (https://github.com/GoogleCloudPlatform/functions-framework-nodejs/blob/master/docs/events.md). To test inputs you must send a body with data as it follows:

```json
{
    "data": {
        "bucket": "static-dev.innovorder.fr",
        "name": "uploads/toBeResized/test-image.png"
    }
}
```

# Deployment

## IMPORTANT

Remove `eslint-config-innovorder` package before deploying. Cloud function deployment tries to install `devDependencies` also (which is not normal) and it will not found this package.

## Requirements

Install `Google Cloud SDK` in your system and authenticate with `gcloud` (https://cloud.google.com/sdk/docs/authorizing#running_gcloud_auth_login).

To deploy an specific version, just checkout this repository and run `yarn deploy-<environment_name>`, where `environment_name` can be `dev`, `preprod` or `prod`.

## Logging

To see the deployed Cloud Function logs use `yarn logs-<environment_name>`
npm package: @innoways/ajv
Description: drip ajv核心包
Author: JDFED
Latest version: 9.0.6

# @drip/ajv

Drip生态下的统一AJV校验包，支持node和浏览器环境。

## 可用方法

### registerAjv
注册ajv

### loadAjvPlugins
导入ajv自定义插件
> 目前官方已内置了两个通用包 @jdfed/drip-form-plugin-formats 和 @jdfed/drip-form-plugin-keywords

## 如何使用

### node 
```
const dripAjv = require('@drip/ajv')
const ajv = dripAjv.registerAjv()

//加载外部ajv插件，第二个参数支持传入自定义的ajv插件包
loadAjvPlugins(ajv, [])
```


### 浏览器
```
import dripAjv from '@drip/ajv'
const { registerAjv, loadAjvPlugins } = dripAjv

const ajv = dripAjv.registerAjv()

//加载外部ajv插件，第二个参数支持传入自定义的ajv插件包
loadAjvPlugins(ajv, [])
```
npm package: @innoways/drip-form-plugin-formats
Description: drip-form ajv formats插件
Author: JDFED
Latest version: 9.0.6

# `@jdfed/drip-form-plugin-formats`

> drip-form 官方formats插件，目前有date-time、color

date-time: `/^\d\d\d\d-[0-1]\d-[0-3]\d[t\s](?:[0-2]\d:[0-5]\d:[0-5]\d|23:59:60)$/i`正则校验。例子：2020-09-17 12:00:00

color: 校验rgba、rgb、hex三种格式颜色 例子：rgba(0,0,0,1)、rgba(0,0,0)、\#000000

## Usage

```js
const addFormats = require('@jdfed/drip-form-plugin-default');
cont Ajv = require('ajv')
const ajv = new Ajv()

//添加所有formats
addFormats(ajv) 
//添加指定formats
addFormats(ajv,['color'])
```
npm package: @innoways/drip-form-plugin-keywords
Description: drip-form ajv关键字插件
Author: JDFED
Latest version: 9.0.6

# `@jdfed/drip-form-plugin-keywords`

> TODO: description

## Usage

```
const dripFormPluginKeywords = require('@jdfed/drip-form-plugin-keywords');

// TODO: DEMONSTRATE API
```
npm package: @innoways/drip-form-theme-antd
Description: drip-form antd主题包
Author: JDFED
Latest version: 9.0.6

# @jdfed/drip-form-theme-antd

## 安装

`jnpm install @jdfed/drip-form-theme-antd`

## 支持组件

- 持续更新

| 组件名                 |  状态  |
| ---------------------- | :----: |
| Text 文本输入          | 已支持 |
| Number 数字输入        | 已支持 |
| Select 选择器          | 已支持 |
| Radio 单选框           | 已支持 |
| Null 空表单            | 已支持 |
| Switch 开关            | 已支持 |
| Slider 滑动输入条      | 已支持 |
| TimePicker 时间选择器  | 已支持 |
| DatePicker 日期选择器  | 已支持 |
| ColorPicker 颜色选择器 | 已支持 |
| Checkbox 多选框        | 已支持 |
| Uploader 上传          | 已支持 |
| Cascader 级联选择      | 已支持 |
| TreeSelect 树形选择器  | 已支持 |

## 相关依赖

由于`antd`主题包导出样式为`less`，此举是为了便于通过`webpack`配置以消除其样式对全局样式的污染问题

`less-loader`的配置需使用者根据自身项目情况进行配置

如果使用`webpack`进行构建，请参考`docs/`下的《如何避免 antd 的全局样式污染》
npm package: @innoways/form-generator
Description: drip-form 生成器
Author: JDFED
Latest version: 9.0.6

# @drip/form-generator
用于Drip-form的表单生成器

## 技术选型

- 状态管理：[recoil](https://recoiljs.org/)
- 拖拽渲染：[dnd-kit](https://dndkit.com/)
- 组件库：[drip-design](http://drip-design.jd.com/docs/spec/introduce-cn)
- 样式库：[tailwindcss](https://www.tailwindcss.cn/)

## 编辑器插件（建议安装）
- postcss
- tailwindcss

## 问题
- [Monorepo中如何管理tailwindcss](https://medium.com/elobyte-software/monorepo-multi-project-components-styling-consistency-8375e7e97228)
- [webstorm：css文件嵌套写法不支持](https://www.coder.work/article/6877283)
npm package: @innoways/hooks
Description: drip-form通用hooks
Author: JDFED
Latest version: 9.0.6

# `@jdfed/hooks`

> babelform 通用 hooks

## useClickOne

- 控制按钮只能点击一次

#### Usage

```
import React, { useState } form 'react
import { useClickOne } from '@jdfed/hooks'
import { Button } from 'antd'

const Demo = () => {

  const _setCount = useClickOne(() => {
    /*
    * 做些操作
    */
  }, [])

  return (
    <>
      <Button onCLick={_setCount}></Button>
    </>
  )
}

```

## useEventCallback

- 重写 useCallback（保证函数即使 dependencies 依赖改变。也不会重新生成） 解决因为 useCallback 的依赖频繁变化导致 useCallback 缓存效果很差甚至影响性能的问题 fn 函数 dependencies 依赖数组

#### Usage

```
import React, { useState } form 'react
import { useEventCallback, useField } from '@jdfed/hooks'
import { Button } from 'antd'

const Demo = (fieldData) => {
  const [initValue, setValue] = useState(fieldData)
  const _onChange = useField(
    { fieldKey, onChange, options: { isUploader: true } },
    dispatch
  )
  change = useEventCallback(() => {
    (value) => {
      setValue(value)
    }
  }, [_onChange])
  return (
    <>
      <Input onChange={change} />
    </>
  )
}

```

## useField

- 将表单数据保存为不可变数据

#### Usage

```
useField({ fieldKey , onChange , options })
```

## useModal

- 设置 modal 的展示隐藏

#### Usage

```
import React, { useState } form 'react
import { useModal } from '@jdfed/hooks'
import { Modal } from 'antd'

const Demo = () => {
  const [defaultStatus] = useState(false)
  const [visible] = useModal(defaultStatus)
  return (
    <>
      <Modal visible=(visible)/>
    </>
  )
}

```

## usePrevious

- 返回上一次的 value 值

#### Usage

```
import React, { useState } form 'react
import { usePrevious } from '@jdfed/hooks'

const Demo = () => {
  const [defaultStatus] = useState(false)
  //上一次value的值
  const preValue = usePrevious(defaultValue)
  return (
    <div>{value}</div>
  )
}

```

## useQuery

- 查询表单数据

#### Usage

```
cosnt queryOptionsFuc = useQuery({}, dispatch)
```

## useRefProp

- 当 callback 依赖过多时，使用 useRefProp 防止 onCLick 事件多次生成

#### Usage

```
import {useRefProp} from 'hooks/index'
      const MyComponent = ()=> {
        const ref = useRefProp()
        const onClick = useRefProp(()=>{ const {a,b,c,d}=ref.current click事件 },[])
        return <div onClick={onClick}>
      }
```

## useValidate

- 实时校验表单数据

#### Usage

```
const validate = () => {
  ......
  ......
  return {
    pass,
    errors,
    errorsMap,
    formData: newFormData,
  }
}

const validateDebounce = useValidate(validate)
```
npm package: @innoways/utils
Description: drip-form通用方法
Author: JDFED
Latest version: 9.0.6

# `@drip/utils`

> drip-form 通用方法

- 持续更新

| 函数名      | 函数说明                                                                              | 参数类型                                                                          | 返回值类型 |
| :---------- | :------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------- | :--------- |
| typeCheck   | 基本数据类型检测                                                                      | `any`                                                                             | `string`   |
| isEmpty     | 判断变量是否为空                                                                      | `any`                                                                             | `boolean`  |
| setDeepProp | 设置 data.a.b.c = value，若 data 没有 a.b 则依次赋值空对象，最后再将 a.b.c 设为 value | `{keys: string[], data: {[ key:string ]: any}, value: string | number | boolean}` | `any`      |