open-index/open-npm huggingface dataset:
npm package: @programmermark/ztree
Description: 使用ztree.js创建的react树型组件.
Author: programmermark
Latest version: 0.0.9

### 使用 ztree.js 创建的树型组件

#### 安装

```
npm i @programmermark/ztree
```

#### 参数说明

> id: 节点 id，唯一标识

> pid: 父级节点 id，没有父节点时，该参数为 undefined

> checked: checkbox 是否选中

> open: 节点是否展开,

> clickSelf: 为 true 时，点击事件只会选中自身； 为 false 时，点击事件会选中自身和子节点

除此之外，节点还可以自定义属性。具体请参看代码中的 typescript 注释。

#### 代码示例

```javascript

import React, { useState } from "react";
import "./App.css";
import { Tree, ITreeNode } from "@programmermark/ztree";

function App() {
  const [treeData, setTreeData] = useState<ITreeNode[]>([
    {
      id: "10000",
      pId: undefined,
      name: "湖北省",
      checked: true,
      open: false,
    },
    {
      id: "10001",
      pId: "10000",
      name: "武汉市",
      checked: true,
      open: true,
      clickSelf: true /** 为true时，点击事件只会选中自身 */,
    },
    {
      id: "10010",
      pId: "10001",
      name: "汉口",
      checked: true,
      open: true,
    },
    {
      id: "10011",
      pId: "10001",
      name: "武昌",
      checked: true,
      open: true,
    },
    {
      id: "10012",
      pId: "10001",
      name: "汉阳",
      checked: true,
      open: true,
    },
    {
      id: "10002",
      pId: "10000",
      name: "孝感市",
      checked: true,
      open: true,
    },
    {
      id: "10020",
      pId: "10002",
      name: "云梦",
      checked: true,
      open: true,
    },
    {
      id: "10021",
      pId: "10002",
      name: "大悟",
      checked: true,
      open: true,
    },
    {
      id: "10022",
      pId: "10002",
      name: "应城",
      checked: true,
      open: true,
    },
  ]);

  const handleUpdateExpandNode = (id: string, open: boolean) => {
    setTreeData((treeData) => {
      const newTreeData = treeData.map((node) => {
        if (node.id === id) {
          // 更新当前节点的展开状态
          return {
            ...node,
            open,
          };
        }
        return node;
      });
      return newTreeData;
    });
  };

  const handleUpdateNodes = (ids: string[], checked: boolean) => {
    setTreeData((treeData) => {
      const newTreeData = treeData.map((node) => {
        if (ids.includes(node.id)) {
          // 更新当前节点的选中状态
          return {
            ...node,
            checked,
          };
        }
        return node;
      });
      return newTreeData;
    });
  };

  return (
    <div className="App">
      <Tree
        nodes={treeData}
        updateExpandNode={handleUpdateExpandNode}
        updateNodes={handleUpdateNodes}
      />
    </div>
  );
}

export default App;
```
npm package: @programmerraj/create-index-js
Description: Creates an index.js file which exports all the files from a directory.
Author: Rajas Paranjpe
Latest version: 5.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @programmerraj/create-index-js
Creates an index.js file which exports all the files from a directory.

![Created with ](https://img.shields.io/badge/Created%20with-@programmerraj/create-3cb371?style=flat)
[![TS-Standard - Typescript Standard Style Guide](https://badgen.net/badge/code%20style/ts-standard/blue?icon=typescript)](https://github.com/standard/ts-standard)

Isn't this so inconvenient:
```js
import a from './dir/a.js'
import b from './dir/b.js'
```

Instead you can do this:
```js
import { a, b } from './dir/index.js'
```

`./dir/index.js` Will be automatically generated:
```js
export a from './a.js'
export b from './b.js'
```

Sub directories are also exported:
```js
export { default as goodNumber } from './goodNumber.js'
export { default as isOdd } from './isOdd.js'
export * as fruits from './fruits/index.js'
```

## CLI Usage
```bash
create-index-js myDir
```

### Watch Mode
Use `-w` or `--watch` option to re-create file when files get created or deleted. This mode is efficient because it only re-creates the file when it needs to, and doesn't do any extra file system operations.

### Other Options
Do `-h` or `--help` to see all options

## Programmatic Usage
All helper files are exported, but the files that are probably useful are `run/run.js` and `runWithWatch/runWithWatch.js`.

### Run
```js
import { run } from '@programmerraj/create-index-js'

run.run(options)
```

### Run in Watch Mode
```js
import { runWithWatch } from '@programmerraj/create-index-js'

runWithWatch.runWithWatch(options)
```

### Docs
TypeScript types are published. You can see the online TypeDocs at https://chocolateloverraj.github.io/create-index-js.
npm package: @programmerraj/dev-react
Description: Develop React components and websites.
Author: Rajas Paranjpe
Latest version: 0.6.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# dev-react
Develop React components and websites.

## In Development
This module is still in development and is not yet `1.0.0` in semver. Any minor change can (and probably will) be a breaking change.

## Install
You will probably want to save this as a `devDependency`, which makes sense, because this module is literally called *`dev`*`-react`.
```bash
npm i --save-dev @programmerraj/dev-react
```

## ESModules
This package uses [ECMAScript Modules](https://nodejs.org/api/esm.html)

## Quick Start
This example shows how to start watching a dir.

### File Structure
- an-input-folder/
  - _common/
  - _index/
  - page/
  - page subpage/
  - ~~a normal file~~
  - ~~_dir/~~
- output-folder (auto generated)

An input folder is required. It can be named anything. Inside that folder you can create a folder for each page.

A path to an output folder is also required. The output folder will be created if it doesn't exist.

The names of the pages will reflect the path they are served on. For example, a folder called `page` will be served on `/page`. 

To create subpages, separate them with a space. A folder called `page subpage` will be `/page/subpage`.

There are two special folders. Special folders begin with `_`. 
- `_index`: Like a normal page, but it is the main page. It will be `/`.
- `_common`: Not a page, but a folder to place files common to multiple pages.

Creating a folder that starts with `_` which is not `_index` or `_common` will show a warning.

Any normal files in the pages folder will be ignored, and a warning will be shown.

### Script
```javascript
import DevReact from '@programmerraj/dev-react'

const dev = new DevReact({
  inputDir: 'an-input-folder',
  outputDir: 'output-folder'
})
dev.start()
```

## API
The main file default exports the `DevReact` class.

### constructor(options)
- options
  - inputDir: Path to a directory with pages.
  - outputDir: Path which output files get saved to.
### prototype
- [start](#start)
- [stop](#stop)
### start()
Start watching the `inputDir`. Also starts displaying build tasks. For more info about `inputDir` go to [file structure](#File-Structure).
- return: A promise which resolves `undefined`
### stop()
Stops watching the `inputDir`. Also stops displaying build tasks.
- return: A promise which resolves `undefined`
npm package: @programmerraj/json-transformer
Description: Modify json values with plugins.
Author: Rajas Paranjpe
Latest version: 3.1.0

[![Test](https://github.com/ChocolateLoverRaj/json-transformer/actions/workflows/test.yml/badge.svg)](https://github.com/ChocolateLoverRaj/json-transformer/actions/workflows/test.yml)
[![License](https://badgen.net/github/license/standard/ts-standard)](https://github.com/ChocolateLoverRaj/json-transformer/blob/main/LICENSE)
[![TS-Standard - Typescript Standard Style Guide](https://badgen.net/badge/code%20style/ts-standard/blue?icon=typescript)](https://github.com/standard/ts-standard)

# json-transformer
Modify json values with plugins.

## Install
```bash
npm i @programmerraj/json-transformer
```

## Usage
```js
import { transform } from '@programmerraj/json-transformer'

transform(3, [{
  Number: {
    enter: path => {
      path.node.value++
    }
  }
}]) // Returns 4
```

## Contribute
[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/eslint-config-standard-with-typescript)
npm package: @programmerraj/jsonv
Description: Json with variables.
Author: Rajas Paranjpe
Latest version: 2.1.0

[![Test](https://github.com/ChocolateLoverRaj/jsonv/actions/workflows/test.yml/badge.svg)](https://github.com/ChocolateLoverRaj/jsonv/actions/workflows/test.yml)
[![License](https://badgen.net/github/license/standard/ts-standard)](https://github.com/standard/ts-standard/blob/master/LICENSE)
[![TS-Standard - Typescript Standard Style Guide](https://badgen.net/badge/code%20style/ts-standard/blue?icon=typescript)](https://github.com/standard/ts-standard)

# jsonv
Json with variables.

## Why
When editing json, it can be very annoying to change a certain value that's used in multiple places.
```json
{
  "points": [
    {
      "x": 53,
      "y": 0
    },
    {
      "x": 53,
      "y": 10
    },
    {
      "x": 53,
      "y": 20
    }
  ]
}
```
In the example above, all of the objects have the same `x` value. If we want to tweak the number for `x`, it will be tedious to change it for every single object.

The solution: jsonv.
```json
{
  "$jsonv": {
    "x": 53
  },
  "points": [
    {
      "x": { "$jsonv": "x" },
      "y": 0
    },
    {
      "x": { "$jsonv": "x" },
      "y": 10
    },
    {
      "x": { "$jsonv": "x" },
      "y": 20
    }
  ]
}
```
Now all you have to change to change `x` is the vars at the top.

## Syntax

### Declaring Vars
You can declare variables in any object by adding a `$jsonv` key. Its value should be an object where the keys are names of variables and values are their corresponding values.
```json
{
  "$jsonv": {
    "myVar": 24,
    "anotherVar": ["a", "json", "value"]
  }
}
```

### Referencing Vars
When `$jsonv` is a string, it is a reference to a variable.
```json
{
  "$jsonv": "nameOfVar"
}
```

### Nested Vars
Variables in nested objects are similar to JavaScript [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) variables.
```json
{
  "$jsonv": {
    "a": "hi"
  },
  "a": { "$jsonv": "a" },
  "obj1": {
    "$jsonv": {
      "a": "hello"
    },
    "a": {
      "$jsonv": "a"
    }
  },
  "obj2": {
    "a": {
      "$jsonv": "a"
    }
  }
}
```
This will compile into
```json
{
  "a": "hi",
  "obj1": {
    "a": "hello"
  },
  "obj2": {
    "a": "hi
  }
}
```


## Install
`@programmerraj/transform-json` is a `peerDependency`.
```bash
npm i @programmerraj/transform-json @programmerraj/jsonv
```

## Usage
[More information about `transform-json`](https://github.com/ChocolateLoverRaj/json-transformer#usage)

### ES
```js
import jsonv from 'jsonv'
```

### CommonJS
```js
const jsonv = require('jsonv').default
```

### Transforming Json
```js
transform({
  $jsonv: {
    a: 'hi'
  },
  a: { $jsonv: 'a' },
  b: { $jsonv: 'b' }
}, [jsonv(parser({
  b: 'Given Var'
}))])
// Returns { a: 'hi', b: 'Given Var' }
```

## Contributing
[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/eslint-config-standard-with-typescript)
npm package: @programmerraj/rc-color-picker
Description: color-picker ui component for react
Author: Rajas Paranjpe
Latest version: 3.0.1

# @programmerraj/rc-color-picker

[![License](https://badgen.net/github/license/ChocolateLoverRaj/react-json-input)](https://github.com/ChocolateLoverRaj/react-json-input/blob/main/LICENSE)
[![npm version](https://img.shields.io/npm/v/@programmerraj/rc-color-picker.svg)](https://www.npmjs.org/package/@programmerraj/rc-color-picker) 
[![npm download](https://img.shields.io/npm/dm/@programmerraj/rc-color-picker.svg)](https://www.npmjs.org/package/@programmerraj/rc-color-picker)
[![TS-Standard - Typescript Standard Style Guide](https://badgen.net/badge/code%20style/ts-standard/blue?icon=typescript)](https://github.com/standard/ts-standard)

> Notice: This package is a fork of [`rc-color-picker`](https://github.com/react-component/color-picker). [`rc-color-picker`](https://github.com/react-component/color-picker) has outdated dependencies which are deprecated and have vulnerabilities.

## Development
You can use [Storybook](https://storybook.js.org/) to see local changes.
```bash
npm run storybook
```

## Example

Online example: [http://chocolateloverraj.github.io/color-picker/](http://chocolateloverraj.github.io/color-picker/)

## Features

- Support color modes RGB and HSL
- Slider for hue
- Slider for alpha
- Preview
- Popup
- TypeScript

## Differences from [`rc-color-picker`](https://github.com/react-component/color-picker)
- Up to date dependencies without security vulnerabilities
- TypeScript
- Uses non deprecated React functions
- Maintained
- API for controlling color is different

## Contributing
Please follow ts-standard code style. You can run `npm run lint` to check for any code style errors.

## Possible New Features
- Convenienter API
- New color modes
- More options related to popup

## Install

[![rc-color-picker](https://nodei.co/npm/@programmerraj/rc-color-picker.png)](https://npmjs.org/package/@programmerraj/rc-color-picker)

## Usage

```jsx
import { ColorPicker } from '@chocolateloverraj/rc-color-picker'
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<ColorPicker />, container)
```
## API
See the docs at http://chocolateloverraj.github.io/color-picker/
npm package: @programmerraj/sokk
Description: Round/ceil/float to any integer multiple
Latest version: 1.0.1

# sokk

A TypeScript library to round/ceil/floor to a nearby multiple

# Example

```
import {round, float, ceil} from 'sokk';

# round to the nearest integer
# prints 1
console.log(round(1.2))

# round to the nearest multiple of 6
# prints '12'
console.log(round(11, 6))

# round down to the nearest integer
# prints 3
console.log(floor(3.3))

# round to the next lowest multiple of 5
# prints 15
console.log(floor(18, 5))

# round up to the nearest integer
# prints 5
console.log(ceil(4.9, 5))

# round up to the next highest multiple of 7
# prints 21
console.log(ceil(20, 7))
```

## Why?

Naming things is hard, and I use this library as part of a knitted sock pattern generator, where there is need to round stitch counds to groups of commonly 2 or 4 stitches.

_sokk_ is Norweigan for _sock_ (I use an old Norse cast on for my socks)
npm package: @programmerraj/test-semver
Description: Testing out github actions setup for npm package development.
Author: Rajas Paranjpe
Latest version: 3.5.0

# test-semver
Tests npm package making workflows.

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

## Installing
```
npm i @programmerraj/test-semver
```

## Why
This repository is a simple (but not practical) npm package. 

## Lib
See `doc/API.md` for api.
```js
import lib from '@programmerraj/test-semver'
```