open-index/open-npm huggingface dataset:
npm package: @hownetworks/ipv46
Description: Parse, format and compare IPv4/6 addresses
Author: Joachim Viide
Latest version: 2.1.0

# ipv46 [![CircleCI](https://circleci.com/gh/HowNetWorks/ipv46.svg?style=shield)](https://circleci.com/gh/HowNetWorks/ipv46)

**ipv46** is a small JavaScript library for parsing, formatting and sorting IPv4/6 addresses. It works on both Node.js and browser environments.

## Installation

```sh
$ npm install @hownetworks/ipv46
```

# Usage

```js
const { IP } = require("@hownetworks/ipv46");
```

## IP.parse(string)

Returns the given string parsed into an IPv4 or IPv6 address object.
If the string is not a valid address then the result is null.

```js
IP.parse("192.0.2.1");             // IPv4 { ... }
IP.parse("2001:db8::1");           // IPv6 { ... }
IP.parse("non-address");           // null
```

**IP.parse** supports IPv6 addresses with embedded IPv4 addresses.

```js
IP.parse("2001:db8::192.0.2.1");   // IPv6 { ... }
```

## IP#version

Valid IPv4/6 address objects have their version as an attribute.

```js
IP.parse("192.0.2.1").version;     // 4
IP.parse("2001:db8::1").version;   // 6
```

## IP#toString()

Address objects implement the **toString** method for turning the addresses back into strings. The strings are printed lower-cased sans any extra leading zeroes. IPv6 formatting follows the [RFC 5952](https://tools.ietf.org/html/rfc5952) recommendations, except that formatting doesn't output IPv6 addresses with embedded IPv4 addresses.

```js
IP.parse("192.0.2.1").toString();            // '192.0.2.1'
IP.parse("2001:db8::1").toString();          // '2001:db8::1'
IP.parse("2001:db8::192.0.2.1").toString();  // '2001:db8::c000:201'
```

## IP.cmp(other)

Compare and sort addresses. **IP.cmp(a, b)** returns:
  * **-1** if **a** is sorted before **b**
  * **0** if **a** equals **b**
  * **1** otherwise

```js
const a = IP.parse("192.0.2.1");
const b = IP.parse("203.0.113.0");

IP.cmp(a, a);         // 0
IP.cmp(a, b);         // -1
IP.cmp(b, a);         // 1
```

IPv4 addresses are always sorted before IPv6 addresses.

```js
const ipv4 = IP.parse("192.0.2.1");
const ipv6 = IP.parse("2001:db8::1");

IP.cmp(ipv4, ipv6);   // -1
```

Parsed addresses get normalized. For example extra leading zeroes don't
matter in comparisons.

```js
const a = IP.parse("2001:0db8::1");
const b = IP.parse("2001:0db8:0000::0001")

IP.cmp(a, b);         // 0
```

**IP.cmp** is directly compatible with **Array#sort**.

```js
const a = IP.parse("2001:0db8::2");
const b = IP.parse("2001:0db8::1")
const c = IP.parse("2001:0db8::")

[a, b, c].sort(IP.cmp);  // [c, b, a]
```
npm package: @howtocodewell/header-menu
Description: How To Code Well Header Menu
Author: @howtocodewell
Latest version: 1.4.0

# How To Code Well header-menu
The header menu of How To Code Well which is shared across multiple sites

# Install

```bash
$ npm install --save @howtocodewell/header-menu
```

```bash
$ npm run build
```

## Usage
1) Create the following config file in `<project_root>/src/config/headerMenu.json` and change `name` and `url` values.

```json
{
  "items": [
    {
      "name": "Overriden",
      "url": "https://howtocodewell.net/merch"
    },
    {
      "name": "Courses",
      "url": "https://howtocodewell.net/shop"
    },
    {
      "name": "Tutorials",
      "url": "https://howtocodewell.net/courses"
    },
    {
      "name": "Orders",
      "url": "https://codechallenges.howtocodewell.net"
    }
  ]
}
```

2) Import the module and config
```javascript
import HeaderMenu from  "@howtocodewell/header-menu"
import menu from "./config/headerMenu.json"
```
3) Load the `HeaderMenu` and pass the menu property
```javascript
<HeaderMenu menu={menu} />
```
npm package: @howtocodewell/simple-image-grid
Description: Simple Image Grid
Author: Peter Fisher
Latest version: 1.6.1

# Simple Image Grid React Component
![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/howtocodewell/simple-image-grid)
![Travis (.org) branch](https://img.shields.io/travis/howtocodewell/simple-image-grid/main)
![GitHub issues](https://img.shields.io/github/issues/howtocodewell/simple-image-grid)
![GitHub closed pull requests](https://img.shields.io/github/issues-pr-closed/howtocodewell/simple-image-grid)
![Twitter Follow](https://img.shields.io/twitter/follow/howtocodewell)

This component displays a grid of linkable images.
It is used as part of [https://howtocodewell](https://howtocodewell])

## Install
```bash
$ npm install @howtocodewell/simple-image-grid
```
## Example
To see an example of the component run 
```bash
$ npm start
```
## Test
To test the component
```bash
$ npm  test
```

## Configuration
```javascript

const itemConfig = [
    {
        link: {
            title: "PHP Array Chunk",
            target: "_blank",
            url: "https://youtu.be/LSDmrLmVbZI"
        },
        image: {
            title: "PHP Array Chunk",
            alt: "Learn PHP Array Chunk",
            url: "http://i3.ytimg.com/vi/LSDmrLmVbZI/maxresdefault.jpg"
        }
    },
    {
        link: {
            title: "Change Key Case in PHP",
            target: "_blank",
            url: "https://youtu.be/wbyK_YCLco0"
        },
        image: {
            title: "Change Key Case in PHP",
            alt: "Change Key Case in PHP",
            url: "http://i3.ytimg.com/vi/wbyK_YCLco0/maxresdefault.jpg"
        }
    },
]

const headerConfig = {
    isEnabled: true,
    title: 'PHP Tutorials',
    link: {
        url: 'https://howtocodewell.net',
        text: 'See More'
    }
}

const CSSGridContainerConfig = {
  gridParentContainer: 'p-4 bg-red-500 border border-red',
  titleContainer: 'text-center',
  title: 'text-black',
  titleLink: 'text-sm mt-2 text-black hover:text-white hover:no-underline',
  gridContainer: 'container mx-auto px-4 pb-8',
  gridItemsContainer: 'no-flex flex justify-center flex-wrap',
}
const CSSGridItemConfig = {
  gridItemContainer: 'w-screen md:w-auto md:flex-none w-auto sm:w-1/6 md:w-1/6 p-4 pt-0 mb-2',
  gridItem: 'shadow p-2 bg-gray-900 rounded-lg hover:bg-pink-600',
  gridItemLink: '',
  gridItemImage: 'm-auto w-screen md:w-auto'
}

```

## Usage
```javascript
import { SimpleImageGrid } from '@howtocodewell/simple-image-grid'

<SimpleImageGrid items={itemConfig} header={headerConfig} cssConfig={CSSGridContainerConfig} cssGridItemConfig={CSSGridItemConfig}/>

```
npm package: @howuse/axios
Description: vue3 的请求增强库
Latest version: 1.0.7

 # Vue Axios Composition Util 

 `npm i axios` 

 1. 支持防抖
 2. 拓展请求可取消
 3. 错误自动捕获，数据自动响应
 4. 拓展流文件下载插件
 5. 级联请求（未开发、计划）
 
##  创建一个axios 实例
 
`createAxios`

##  返回参数 

`server`
`useAxiosRequest`
`useBlobDownload`

###  请求hook使用 `useAxiosRequest`
```js
 /**
     * @param  {AxiosRequestConfig} config 
     * @param  {HowVesExRequestOptions} options? 额外选项，立即执行， 防抖延迟时间
     * @returns
     */
```

### 下载流文件使用 `useBlobDownload`
npm package: @howuse/cimi
Description: A tool for fully automatic publishing of npm packages
Latest version: 1.0.1

[![npm](https://img.shields.io/npm/v/@howuse/cimi.svg)](https://www.npmjs.com/package/cimi)

> 移植自：[https://www.npmjs.com/package/cimi](https://www.npmjs.com/package/cimi)
> 对原本cimi进行了部分修改，针对npm组织包发版时，提示tag重复问题进行修复。

# Cimi

一款全自动 npm 发包工具，一行命令帮助你 git replase、创建 git tag、发布 npm 包。

Cimi 自动生成新版本号，自动生成 commit message，创建 tag，push 到 github，最后发布到 npm 中，整个过程只需要一行命令，解放你的双手！

## Cimi 有什么优势？

当我们在开发组件库或者其他开源工具包时，我们发一个新的 NPM 包可能需要这些工作：

- 手动修改`package.json`中的`version`.
- `git add .`、`git commit -m "xxxx"`生成一个提交.
- `git push origin master` 推送到远端.
- 在 github 中打一个新`tag`.
- `npm publish`将代码提交到 NPM.

听起来是不是很麻烦？而有了`cimi`，你只需要一行简单的代码:

`cimi patch main`

就可以完成上面所有事情。

## Cimi 修改版本规则

`Cimi`共有五种规则，来进行发包，其实也就是确定版本号。

- `cimi patch` 更新一个小版本，如 1.1.0 -> 1.1.1，如 bug 修复;
- `cimi minor` 更新一个中版本，如 1.1.0 -> 1.2.0，如新增功能;
- `cimi major` 更新一个大版本，如 1.1.0 -> 2.1.0，如重构架构;
- `cimi beta` 将当前版本转为 beta 版本，如 1.1.0 -> 1.1.0-beta，如生产前测试;
- `cimi upgradeBeta` 将当前 beta 版本升级一次 beta 号，如 1.1.0-beta -> 1.1.0-beta2，如二次测试;
<!-- * `cimi patchBeta` 更新一个小的测试版本，如1.1.0 -> 1.1.1-beta，如bug修复;
- `cimi minor` 更新一个中的测试版本，如 1.1.0 -> 1.2.0-beta，如新增功能;
- `cimi major` 更新一个大的测试版本版本，如 1.1.0 -> 2.1.0-beta，如重构架构; -->

而分支默认为`master`，如果主分支为其他分支，应这样使用:

`cimi patch main`

`cimi patch dev`

当然，也可以通过`cimi manual`来触发对话模式，允许你手动输入更改版本。

类似这样的：

![manual select](./.github/manual-demo.jpg)

该场景适用于频繁更改`patch`或`patch-beta`版本号时，当然，更开放的交互更将让你有掌控感，不是吗？[偷笑]~

## 使用

```bash
# 全局安装cimi
npm i cimi -g
# 本地安装cimi
npm i cimi -D
```

以下是`cimi -h`的输出：

```
Usage: cimi [options]

A fully automatic NPM package tool, one line command to help you "git add/commit/push, create git tag, release NPM package"

Options:
  -v, --version  output the version number
  -m,manual      manual select your new package version
  patch          patch your new npm package
  minor          minor your new npm package
  major          major your new npm package
  beta           beta your new npm package
  upgradeBeta    upgrade your npm package new version
  -h, --help     display help for command

  Tip:

    You should run this script in the root directory of you project or run by npm scripts.

  Examples:

    $ cimi manual [branch] (default: master)
    $ cimi patch [branch] (default: master)
    $ cimi minor [branch] (default: master)
    $ cimi major [branch] (default: master)
    $ cimi beta [branch] (default: master)
    $ cimi upgradeBeta [branch] (default: master)

```
npm package: @howuse/element-plus-lowcode
Description: 一个element-plus的低码组件库
Author: 一个橙子pro biancangming
Latest version: 0.0.4

# ElementPlusLowcodeEditor 一个轻量的低代码组件

`Vue3` + `ElementPlus`

> 本项目作为一个试验性的低代码组件，而非低代码开发平台。在开发此项目之前，调研了不少低代码平台表单设计器。如何对各种使用场景应付自如，是一个很大的问题。
> 例如表单当中个字段如何联动
> 组件之间的事件传递如何进行
> 在遇到低代码组件无法应付的场景，如何进行优雅的扩展

一个个头疼的问题接踵而至，我也在尝试着寻找解决方案，从中总结到一些经验。

## 安装

```bash
npm install @howuse/element-plus-editor

or

yarn add @howuse/element-plus-editor
```
npm package: @howuse/freedom-dialog
Description: 解放 echarts、leaflet等第三方包中的弹窗问题
Latest version: 1.0.2

# 一个自由弹窗

第三方js库中，设置html渲染，样式难以处理，使用vue组件更方便。

# 代码示例

[https://howuse.yigechengzi.com/freedom-dialog/](https://howuse.yigechengzi.com/freedom-dialog/)
npm package: @hox-ls/react-mounter
Description: React Mounter lets you mount React components to DOM easily.
Latest version: 1.3.0

# React Mounter

React Mounter lets you mount React components to DOM easily.

> React Mounter supports Server Side Rendering when used with [FlowRouter](https://github.com/kadirahq/flow-router).

Normally, when you are rendering a React Component to the DOM, you need to do following things basically,

* Create a root DOM node as the root node for React
* Wait for the DOM to load properly
* Then render the component

React Mounter does all these for you. You just ask it to render a component.

Additionally, React Mounter can work as a simple Layout Manager where you can use with [Flow Router](https://github.com/kadirahq/flow-router).

## Basic Usage

Install with:

```
npm i --save react-mounter react react-dom
```

> `react` and `react-dom` are peerDependencies of `react-mounter`. So, you need to install them into your app manually.

Then let's mount a component.

```js
import React from 'react';
import {mount} from 'react-mounter';

const WelcomeComponent = ({name}) => (<p>Hello, {name}</p>);

mount(WelcomeComponent, {name: 'Arunoda'});
```

## Using as a Layout Manager

You can user `react-mounter` as a layout Manager for Flow Router. Here's how to do it.

Let's say we've a layout called MainLayout.

```js
const MainLayout = ({content}) => (
    <div>
      <header>
        This is our header
      </header>
      <main>
        {content}
      </main>
    </div>
);
```

Now let's try render to our `WelcomeComponent` into the `MainLayout`.

```js
mount(MainLayout, {
  content: <WelcomeComponent name="Arunoda" />
});
```

That's it.

### To use the React Context

In order to use the React context, you need to render the `content` component inside the layout. So we need to pass a function instead of the React element. Here's how to do it.

```js
const MainLayout = ({content}) => (
    <div>
      <header>
        This is our header
      </header>
      <main>
        {content()}
      </main>
    </div>
);
```

> See, now content is a function.

Then, we can pass the Welcome component like this:

```js
mount(MainLayout, {
  content: () => (<WelcomeComponent name="Arunoda" />)
});
```

## Configure Root DOM node

By default React Mounter render our components into a DOM node called `react-root`. But, you can configure if by like below:

```js
const {mount, withOptions} from `react-mounter`;
const mount2 = withOptions({
    rootId: 'the-root',
    rootProps: {'className': 'some-class-name'}
}, mount);

mount2(WelcomeComponent, {name: 'Arunoda'});
```

## Server Side Rendering (SSR)

SSR is supported when used with [FlowRouter SSR](https://github.com/kadirahq/flow-router/tree/ssr). Checkout this [sample app](https://github.com/kadira-samples/meteor-data-and-react).
npm package: @hox-rs/capy
Description: hox.rs react components library
Author: Leonardo Lessa
Latest version: 4.0.0

# HOX Capy React Components Library

This is an library made with React, TypeScript, Rollup, Storybook, Jest, and React Testing Library. It was created to be used internally in the company, it is not intended to serve as a public library but feel free to use it as you wish.
The intention is to wrap and integrate common use cases of HOX routines, so that the developer does not have to worry about the details of components and can focus on the business logic of the application.

The components are documented using Storybook in the following link: [HOX Capy UI Library](https://capy.hox.dev.br).

## Installation

You can install this library using npm:

```
npm i --save @hox-rs/capy
```

or yarn:

```
yarn add @hox-rs/capy
```

## Usage

To use this demo library in your project, import the components you need from the library and use them in your React components.

Don't forget to install peer dependencies, depending on components you need to use.
As of now most of the components are wrappers of MUI and React hook form these are the most common dependencies, but you can check the package.json file to see all of them.

An example of usage, integrating a regular TextField from MUI with React hook form:

```tsx
import React from "react";
import { RhfTextField } from "@hox-rs/capy";
import { useForm } from "react-hook-form";

function App() {
  const { control, handleSubmit } = useForm({
    // we commonly use yup resolver here for validations, but optionally you can use "rules" directly in the component
  });

  const onSubmit = (data: any) => {
    console.log(data);
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <RhfTextField
          name="name"
          label="Name"
          control={control}
          defaultValue=""
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}
```

For more examples check the Storybook documentation, but most of the form components are used in the same way.

## Contributing

As mentioned before this library was created to be used and maintained internally, but feel free to contribute to it if you wish, just open a pull request and we will review it as soon as possible.

## License

This demo UI library is licensed under the MIT License
npm package: @hoyleg/react-native-simple-modal
Description: A simple JavaScript modal component for React Native.
Author: bodyflex
Latest version: 10.0.3

# react-native-simple-modal

A simple JavaScript modal component for React Native. Works on both iOS and Android.

**Looking for maintainers! I'm not actively developing with React Native anymore and I don't have much time to keep this library up-to-date. If you're interested, hit me up: max.huttunen@gmail.com**

<img src="https://i.imgur.com/EiwkCWn.gif" width="300" />

## Installation

`npm install react-native-simple-modal --save`

## Usage

See example. Make sure to put the `<Modal>` at the end of the render function so that it renders above the content!

### Properties and their default values

```javascript
import Modal from "react-native-simple-modal";

<Modal
  animationDuration={200}
  animationTension={40}
  closeOnTouchOutside={true}
  containerProps={undefined}
  containerStyle={{
    justifyContent: "center"
  }}
  disableOnBackPress={false}
  modalDidClose={() => undefined}
  modalDidOpen={() => undefined}
  modalProps={undefined}
  modalStyle={{
    borderRadius: 2,
    margin: 20,
    padding: 10,
    backgroundColor: "#F5F5F5"
  }}
  offset={0}
  open={false}
  overlayStyle={{
    backgroundColor: "rgba(0, 0, 0, 0.75)",
    flex: 1
  }}
/>;
```

## Example

```javascript
import React from "react";
import { Text, TouchableOpacity, View } from "react-native";
import Modal from "react-native-simple-modal";

export default class App extends React.Component {
  state = { open: false };

  modalDidOpen = () => console.log("Modal did open.");

  modalDidClose = () => {
    this.setState({ open: false });
    console.log("Modal did close.");
  };

  moveUp = () => this.setState({ offset: -100 });

  resetPosition = () => this.setState({ offset: 0 });

  openModal = () => this.setState({ open: true });

  closeModal = () => this.setState({ open: false });

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <TouchableOpacity onPress={this.openModal}>
          <Text>Open modal</Text>
        </TouchableOpacity>
        <Modal
          offset={this.state.offset}
          open={this.state.open}
          modalDidOpen={this.modalDidOpen}
          modalDidClose={this.modalDidClose}
          style={{ alignItems: "center" }}
        >
          <View style={{ alignItems: "center" }}>
            <Text style={{ fontSize: 20, marginBottom: 10 }}>Hello world!</Text>
            <TouchableOpacity style={{ margin: 5 }} onPress={this.moveUp}>
              <Text>Move modal up</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={{ margin: 5 }}
              onPress={this.resetPosition}
            >
              <Text>Reset modal position</Text>
            </TouchableOpacity>
            <TouchableOpacity style={{ margin: 5 }} onPress={this.closeModal}>
              <Text>Close modal</Text>
            </TouchableOpacity>
          </View>
        </Modal>
      </View>
    );
  }
}
```
npm package: @hoythan/i18n-issue-3059
Description: i18n for Nuxt
Latest version: 8.3.3

[![Nuxt i18n](./docs/public/cover.png)](https://i18n.nuxtjs.org)

[![](https://img.shields.io/npm/v/%40nuxtjs%2Fi18n/latest.svg?style=flat-square)](https://npmjs.com/package/%40nuxtjs%2Fi18n)
[![](https://img.shields.io/npm/v/%40nuxtjs%2Fi18n/latest.svg?style=flat-square)](https://npmjs.com/package/%40nuxtjs%2Fi18n)
[![](https://img.shields.io/npm/dt/%40nuxtjs%2Fi18n.svg?style=flat-square)](https://npmjs.com/package/%40nuxtjs%2Fi18n)
[![](https://snyk.io/test/github/nuxt-community/i18n-module/badge.svg?style=flat-square)](https://snyk.io/test/github/nuxt-modules/i18n)
<a href="https://volta.net/nuxt-modules/i18n?utm_source=nuxt_i18n_readme"><img src="https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg" alt="Volta board"></a>

# Nuxt I18n

> I18n module for Nuxt

The i18n module for Nuxt 3

## ✅ Status: v8

If you would like to use the stable version for Nuxt 2, please see the [`v7` branch](https://github.com/nuxt-modules/i18n/tree/v7)

## 🚀 Usage

### Install

1. Add the following line to the `devDependencies` with your package manager:

```sh
npx nuxi@latest module add i18n
```

2. Add `@nuxtjs/i18n` to the `modules` section of `nuxt.config.ts`

```ts
{
  modules: [
    '@nuxtjs/i18n',
  ],
}
```

## Edge Release Channel

We provide [the Edge Release Channel nuxt i18n module, like Nuxt3](https://nuxt.com/docs/guide/going-further/edge-channel#edge-release-channel)

Nuxt i18n module is undergoing commits, improvements and bug fixes. You can opt-in to be the first to test it before the next release.

### Opting Into the Edge Channel

Update nuxt i18n module dependency inside `package.json`:

```diff
{
  "devDependencies": {
--    "@nuxtjs/i18n": "^8.0.0"
++    "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge"
  }
}
```

Remove lockfile (`package-lock.json`, `yarn.lock`, or `pnpm-lock.yaml`) and reinstall dependencies.

### Opting Out From the Edge Channel

Update nuxt i18n module dependency inside `package.json`:

```diff
{
  "devDependencies": {
--    "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge"
++    "@nuxtjs/i18n": "^8.0.0"
  }
}
```

## 📖 Documentation

[Read more v8 documentation](https://i18n.nuxtjs.org/).

Keep in mind that not all features are currently supported yet and some things might be broken.

## 🔗 Links

- 📘 [Documentation for v8](https://i18n.nuxtjs.org/)
- 📘 [Documentation for v7](https://i18n.nuxtjs.org/docs/v7)
- 🔖 [Release notes](./CHANGELOG.md)
- 👥 [Community](https://discord.nuxtjs.org/) (`#i18n` channel)

## ©️ License

[MIT License](./LICENSE) - Copyright (c) Nuxt Community