open-index/open-npm huggingface dataset:
npm package: @osequi/new-component
Description: CLI for creating new React components
Author: Csongor Bartus
Latest version: 2.0.1

# Create a new React component

Forked from https://github.com/metamn/new-component.

## Usage

Install via NPM:

```bash
# Using Yarn:
$ yarn global add @osequi/new-component

# or, using NPM
$ npm i -g @osequi/new-component
```

You can also install the package locally for a project.

Run:

```bash
$ cd PROJECT_DIRECTORY
$ new-component Button
```

## What you'll get

In `src/components/Button`:

```js
// `Button/Button.tsx`
import React from "react";
import { cx } from "@emotion/css";
import { useStyles } from "../../hooks";

/**
 * Imports other types, components and hooks.
 */

/**
 * Defines the Button type.
 * @category Components
 * @example
 */
export type TButton = {} & typeof ButtonDefaultProps;

/**
 * Defines the Button default props.
 * @category Components
 * @example
 */
const ButtonDefaultProps = {};

/**
 * Defines the styles.
 * @ignore
 */
const container = {
  label: "Container",
};

/**
 * Displays the Button.
 * @category Components
 * @component
 * @example
 * return <Button />
 */
const Button = (props: TButton) => {
  const { containerKlass } = useStyles(container, props);

  return <div className={cx("Button", containerKlass)}>Button</div>;
};

Button.defaultProps = ButtonDefaultProps;

export default Button;
export { ButtonDefaultProps };
```

```js
// `Button/Button.test.tsx`
import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { Button } from "./Button";

it("Renders the component", () => {
  const { container } = render(<Button />);
  expect(container.firstChild).not.toBeNull();
});
```

```js
// `Button/index.ts`
export type { TButton } from "./Button";
export { default as Button, ButtonDefaultProps } from "./Button";
```

## Modify & test locally

You can easily fork this repository, modify, test and publish on npm.

### Test locally

In this current repository:

```sh
npm pack
```

This will create a file like `new-component@0.0.1.tgz`.

In another folder:

```sh
mkdir test
cd test
npm i <path_to_new_component_repo>/new-component@0.0.1.tgz
mkdir src
mkdir src/components
./node_modules/.bin/new-component Button
```

## Publish

```sh
npm publish --access public # first deploy
unleash -p -d # consecutive deploys
```

## Changelog

Please check [CHANGELOG.md](CHANGELOG.md).

Generated with [Unleash](https://github.com/Netflix/unleash) using [Conventional commits](https://www.conventionalcommits.org/en/v1.0.0/), [Conventional changelog](https://github.com/conventional-changelog/conventional-changelog) and [Semantic versioning](https://semver.org/).
npm package: @osequi/use-markdown
Description: A React hook to load Markdown files
Author: Csongor Bartus
Latest version: 0.1.1

# use-markdown

A React hook to load Markdown files.

## Features

- Loads a markdown file then parses with `marked`.
- Returns the parsed markdown.

## Demo

- https://use-markdown-demo.vercel.app

## Install

```sh
# Using yarn
yarn add @osequi/use-markdown

# or, using npm
npm i @osequi/use-markdown
```

## Usage

```js
// demo/src/App.js
import useMarkdown from "use-markdown";
import readme from "./README.md";

const App = () => {
  const { markdown } = useMarkdown(readme);
  const html = <div dangerouslySetInnerHTML={{ __html: markdown }} />;

  return <>{html}</>;
};
```

## Test

In `/demo` there is a Create React App.

## Changelog

Please check [CHANGELOG.md](CHANGELOG.md).

Generated with [Unleash](https://github.com/Netflix/unleash) using [Conventional changelog](https://github.com/conventional-changelog/conventional-changelog) and [Semantic versioning](https://semver.org/).
npm package: @oshell/vue-cli-plugin-electron-builder-notarize
Description: Notarize Electron applications using vue-cli-plugin-electron-builder
Author: Horst Jahns
Latest version: 1.0.2

# vue-cli-plugin-electron-builder-notarize


> Notarize Electron applications using vue-cli-plugin-electron-builder


## Install

```
# npm
npm i @oshell/vue-cli-plugin-electron-builder-notarize --save-dev

# yarn
yarn add @oshell/vue-cli-plugin-electron-builder-notarize --dev
```


## Usage

In your electron-builder config:

```json
{
	"afterSign": "@oshell/vue-cli-plugin-electron-builder-notarize",
	"mac": {
		"hardenedRuntime": true,
		"entitlements": "./node_modules/@oshell/vue-cli-plugin-electron-builder-notarize/entitlements.mac.inherit.plist",
	}
}
```

You can replace the entitlements file with your own, as long as those properties are included as well.

You will also need to authenticate yourself, either with your Apple ID or using an API key. This is done by setting the corresponding environment variables.

### Apple ID

- `APPLE_ID`: The username of your Apple developer account.
- `APPLE_ID_PASSWORD`: An app-specific password. You can create one at [appleid.apple.com](https://appleid.apple.com).

Make sure you generate an application password if you have 2FA enabled. The tool can't handle 2FA and you will end up with an error while trying to upload.
Go to https://appleid.apple.com/ and generate an app specific password.

### API Key

- `API_KEY_ID`: The ID of your App Store Connect API key, which can be generated [here](https://appstoreconnect.apple.com/access/api).
- `API_KEY_ISSUER_ID`: The issuer ID of your API key, which can be looked up on the same site.

You will also need the API key `.p8` file at the correct location on your file system. See [`electron-notarize`](https://github.com/electron/electron-notarize)'s docs for details on this setup.

### Multiple Teams

If your developer account is a member of multiple teams or organizations, you might see an error. In this case, you need to provide your [Team Short Name](https://github.com/electron/electron-notarize#notes-on-your-team-short-name) as an environment variable:

```sh
export TEAM_SHORT_NAME=XXXXXXXXX
```

## Credits

This package is a fork of [electron-builder-notarize](https://github.com/oshell/electron-builder-notarize)

## License

MIT
npm package: @oshidev/ipc
Description: IPC/TCP Networking Utility to connect several processes with great speeds.
Author: thsanki
Latest version: 1.0.0

<div align="center">

# @oshidev/ipc

**IPC/TCP Networking Utility to connect several processes with great speeds.**

[![npm version](https://img.shields.io/npm/v/@oshidev/ipc?color=crimson&logo=npm&style=flat-square)](https://www.npmjs.com/package/@oshidev/ipc)
[![npm downloads](https://img.shields.io/npm/dt/@oshidev/ipc?color=crimson&logo=npm&style=flat-square)](https://www.npmjs.com/package/@oshidev/ipc)

</div>

## About

**@oshidev/ipc** is a protocol that operates over either [IPC] or [TCP] with the only difference of one line of code to switch
between the two. Inspired on [node-ipc], it seeks to use modern, fast, and intuitive [API]s, as well as exposing all the
underlying back-ends for much higher customizability and extensibility, as well as a HTTP-like protocol where you can
send a message and optionally receive a response for it.

## Installation

```bash
npm install @oshidev/ipc
# or
yarn add @oshidev/ipc
```

## Socket Support

- [x] Unix Socket or Windows Socket.
- [x] TCP Socket.
- [ ] TLS Socket.
- [ ] UDP Sockets.

> **TLS**: TLS sockets can be achieved by extending `@oshidev/ipc` to use SSL handshakes. To keep things simple and tidy, this is
> not shipped in core, but will be considered for future releases.

> **UDP**: UDP sockets are not supported due to `@oshidev/ipc`'s requirement for messages to be reliably received in order.

## Messaging

All messages are encoded and decoded using [`msgpackr`][msgpackr], which allows a messages to be sent using the least
amount of bytes possible, increasing throughput; plus a 11-byte header at the start of each message. More information
available in [PROTOCOL].

## Example

You can find examples of code [here](https://github.com/Oshi-Tech/ipc/tree/main/examples).

## Contributing

1. Fork it!
1. Create your feature branch: `git checkout -b my-new-feature`
1. Commit your changes: `git commit -am 'Add some feature'`
1. Push to the branch: `git push origin my-new-feature`
1. Submit a pull request!

## License

MIT License - see the [LICENSE](LICENSE.md) file for details.

[msgpackr]: https://www.npmjs.com/package/msgpackr
[protocol]: https://github.com/Oshi-Tech/ipc/blob/main/PROTOCOL.md
[api]: https://en.wikipedia.org/wiki/Application_programming_interface
[ipc]: https://en.wikipedia.org/wiki/Inter-process_communication
[tcp]: https://en.wikipedia.org/wiki/Transmission_Control_Protocol
[node-ipc]: https://www.npmjs.com/package/node-ipc
npm package: @oshimaryo/large-element-to-image-blob
Description: convert too large element (> canvas max size) to Blob (jpg/png)
Author: Ryo Oshima
Latest version: 0.0.2

# largeElementToImageBlob
convert too large element (> max canvas size for each browser) to Blob (jpg/png)

## Problem this package solved

In order to convert an `HTMLElement` into an image in the web front end, it is necessary to convert the `HTMLElement` into a `canvas` and then export the image from the `canvas`.

However, each browser has its own limit on the size of a `canvas` . (Reference: [canvas-size](https://github.com/jhildenbiddle/canvas-size#test-results))

 Therefore, it is usually not possible to export an extremely large `HTMLElement` as an image in its original size.

This package makes it possible to export an image of a `HTMLElement` that are larger than the maximum `canvas` size for each browser.

## Installation
This module is installed via npm.
```sh
$ npm install @oshimaryo/large-element-to-image-blob
```

## Example Usage
```js
import { largeElementToImageBlob } from '@oshimaryo/large-element-to-image-blob'

const blob = await largeElementToImageBlob(document.querySelector('#super-large'), { type: 'image/jpeg'})

const a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = 'super-large.jpg'
a.click()
```

## Limitations
* In order to draw elements on canvas, this module uses [html2canvas](https://html2canvas.hertzen.com/). Therefore, [CSS propeties that are not supported by html2canvas](https://html2canvas.hertzen.com/features#unsupported-css-properties) cannot be drawn.
* Currently, cross-origin images will not be drawn. ([Related issue](https://github.com/oshimaryo/large-element-to-image-blob/issues/6))
npm package: @oshimin/vue-formio
Description: A vue.js renderer for form.io forms.
Author: Randall Knutson
Latest version: 1.0.0

# vue-formio

A [Vue.js](http://vue.js/) component for rendering out forms based on the [Form.io](https://www.form.io) platform.

## Install

### npm

`Vue Formio` can be used on the server, or bundled for the client using an
npm-compatible packaging system such as [Browserify](http://browserify.org/) or
[webpack](http://webpack.github.io/).

```
npm install vue-formio --save
```

## Basic Usage

HTML inside of Vue template file:

```
<template>
  <div id="app">
    <formio src="" url="" form="" submission="" options="" v-on:submit=""></formio>
  </div>
</template>
```

Javascript inside of Vue template file.

```
<script>
  import { Form } from 'vue-formio';
  export default {
      name: 'app',
      components: { formio: Form },
  }
</script>
```

## Props

### `src` : `string`

The form API source from [form.io](https://www.form.io) or your custom formio server.

See the [Creating a form](http://help.form.io/userguide/#new-form)
for where to set the API Path for your form.

You can also pass in the submission url as the `src` and the form will render with the data populated from the submission.

### `url` : `string`

If you pass in the form and submission directly, some components such as resources, files and forms need to know the url of the form on the server. Pass it in with the url option.

### `form` : `object`

An object representing the form. Use this instead of src for custom forms.

**Note:** `src` will override this property if used.

### `submission`: `Object`

An object representing the default data for the form.

**Note:** `src` will override this if a submission url is entered.

### `options`: `object`

An object with the formio.js options that is passed through. See [Form.io Options](https://github.com/formio/formio.js/wiki/Form-Renderer#options).

## Events

All events triggered from the form are available via the v-on property. See [Form.io Events](https://github.com/formio/formio.js/wiki/Form-Renderer#events) for all the available events.

Then on the form set `<formio src="myform" v-on:submit="doSomething" />`

## FormBuilder

HTML inside of Vue template file:

```
<template>
  <div id="app">
    <formbuilder v-bind:form="{display: 'form'}" v-bind:options="{}" v-on:change="(schema) => console.log(schema)"></formio>
  </div>
</template>
```

Javascript inside of Vue template file.

```
<script>
  import { FormBuilder } from 'vue-formio';
  export default {
      name: 'app',
      components: { FormBuilder },
  }
</script>
```

## License

Released under the [MIT License](http://www.opensource.org/licenses/MIT).
npm package: @oshimishi/dreamspell-math
Description: dreamspell-math
Author: Raman Oshimish
Latest version: 0.3.2

# dreamspell-math

A JavaScript library with DreamSpell date, Zolkin & extras calculations.

Details: [Law of Time](http://www.lawoftime.org/lawoftime.html)

[![npm version](https://badge.fury.io/js/%40oshimishi%2Fdreamspell-math.svg)](https://www.npmjs.com/package/@oshimishi/dreamspell-math)
[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)

## Notice

The previous version of the package, `dreamspell-math` [![npm version](https://badge.fury.io/js/dreamspell-math.svg)](https://www.npmjs.com/package/dreamspell-math), is now obsolete and no longer maintained.

Please switch to using `@oshimishi/dreamspell-math` to ensure you have the latest updates, improvements, and bug fixes. 

## Installation

You can install the new version of the package from npm using the following command:

```bash
npm install @oshimishi/dreamspell-math
```

## Usage

### In Node.js (CommonJS)

```js
const { dreamdate } = require('@oshimishi/dreamspell-math');

// anything that can be parsed to moment() can be used as input
// See https://momentjs.com/docs/#/parsing/ for details

const date = dreamdate([2018, 06, 26]);
const date2 = dreamdate(new Date(1985, 7 - 1, 23));
const date3 = dreamdate(moment('1985-07-23'));

var kin = date.kin;
```

### In TypeScript (ESM)

First, you need to import the module:

```ts
import * as g from '@oshimishi/dreamspell-math';
```

Then you can use it in the same way:

```ts
const date = g.dreamdate([2018, 06, 26]);
```

## Examples

```js
const { kin } = require('@oshimishi/dreamspell-math');

const kin1 = kin(1);
const tone1 = kin1.tone;
const sign1 = kin1.sign
```

```ts
import * as g from '@oshimishi/dreamspell-math';

const kin260 = g.kin(g.tone(13), g.sign(20));
```

## Reporting Bugs

Please report bugs on our Github repository.

<https://github.com/oshimish/dreamspell-math/issues>

## License

MIT
npm package: @oshliaer/building-typescript-cli-node-js-commander
Description: Основано на статье [stanulilic](https://github.com/stanulilic) [Building a TypeScript CLI with Node.js and Commander](https://blog.logrocket.com/building-typescript-cli-node-js-commander)
Latest version: 1.0.1

# Создание консольного приложения на TypeScript с помощью Node.js и Commander

Полное руководство доступно по адресу [contributor.pw/article/building-typescript-cli-node-js-commande](https://contributor.pw/article/building-typescript-cli-node-js-commande)
npm package: @oshq/react-select
Description: The React Select is a minimal select component for reactjs.
Author: Bikash Ojha
Latest version: 3.2.1

# React Select

The React Select is a customizable and accessible dropdown select component for reactjs, built from scratch for flexibility and performance. Supports single and multi-select options, with an intuitive API for easy integration.

<a href="https://react-select.ojhabikash.com.np/">Demo</a>


<img src="/images/minimial-example.png" alt="Minimal Example" style="max-height:250px">

## Table of Content
- [React Select](#react-select)
- [Documentation](https://react-select.ojhabikash.com.np/)
- [Installation](#installation)
- [Usage](#usage)
- [Features](#Features)

## Installation

You can install the React Select component via [npm](https://www.npmjs.com/package/@oshq/react-select/):

```bash
npm i @oshq/react-select
```
## Usage

#### Basic Implementation

```jsx
import Select from '@oshq/react-select';
import '@oshq/react-select/index.css';

const App = () => {
  const [selected, setSelected] = useState(undefined);
  const options = [
    { label: 'apple', value: 'apple' },
    { label: 'ball', value: 'ball' },
    { label: 'cat', value: 'cat' },
    { label: 'dog', value: 'dog' },
  ];
  return (
    <Select
      value={selected}
      onChange={(_,val) => {
        setSelected(val);
      }}
      options={async () => options}
    />
  );
};
```

## Features
- Virtual Scrolling at it's core
- Customizable components support
- Typeahead support
- Complete keyboard navigation
- Multiple selection support
- Support for Asynchronous options loading
- Supports items, labels, groups of items
- Fully managed focus
- Written in TypeScript