open-index/open-npm huggingface dataset:
npm package: @markmccoid/react-native-hold-menu
Description: A performant, easy to use hold to open context menu for React Native powered by Reanimated.
Author: Enes Ozturk
Latest version: 0.1.1

# React Native Hold Menu

[![Reanimated v2 version](https://img.shields.io/github/package-json/v/enesozturk/react-native-hold-menu/develop?label=Reanimated%20v2&style=flat-square)](https://www.npmjs.com/package/react-native-hold-menu) [![npm](https://img.shields.io/npm/l/react-native-hold-menu?style=flat-square)](https://www.npmjs.com/package/react-native-hold-menu) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/react-native-hold-menu) [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/)

A performant, easy to use hold to open context menu for React Native powered by Reanimated. 🔥

---

![hold-menu-preview](./preview.gif)

## Features

- Powered with Reanimated v2. 🚀
- Smooth interactions & animations.
- Supports dark/light Mode. 🌚 🌝
- Supports device orientation change.
- Compatible with Expo.
- Written in `TypeScript`.

## Getting Started

Check out [the documentation website](https://enesozturk.github.io/react-native-hold-menu).

---

## Contributors

- [Mo Gorhom](https://gorhom.dev/)

## License

[MIT](./LICENSE)

#### Show Your Support

Please give a star if you like this project! 🤩
npm package: @markmeyer/vuelidate-components
Description: Components for Vuelidate
Latest version: 1.4.1

# Vuelidate Components

Visit [Vuelidate Docs](https://vuelidate-next.netlify.app) for detailed instructions.

## Sponsors

### Silver

<p align="center">
  <a href="https://www.storyblok.com/developers?utm_source=newsletter&utm_medium=logo&utm_campaign=vuejs-newsletter" target="_blank">
    <img src="https://a.storyblok.com/f/51376/3856x824/fea44d52a9/colored-full.png" alt="Storyblok" width="240px">
  </a>
</p>

### Bronze

<p align="center">
  <a href="https://www.vuemastery.com/" target="_blank">
    <img src="https://cdn.discordapp.com/attachments/258614093362102272/557267759130607630/Vue-Mastery-Big.png" alt="Vue Mastery logo" width="180px">
  </a>
</p>

## Installation

Vuelidate Components are meant to be used alongside `@vuelidate/core` and `@vuelidate/validators`.

```bash
npm install @vuelidate/core @vuelidate/validators @vuelidate/components
# or
yarn add @vuelidate/core @vuelidate/validators @vuelidate/components
```

## Usage

Import the component you need and use it in your forms.

```js
import { ValidateEach } from '@vuelidate/components'

export default {
  components: { ValidateEach },
  // ... rest of your component setup
}
```

For more info, visit the [Vuelidate Docs](https://vuelidate-next.netlify.app).

## Development

To test the package run

``` bash
# install dependencies
yarn install

# create bundles.
yarn build

# Create docs inside /docs package
yarn dev

# run unit tests for entire monorepo
yarn test:unit

# You can also run for same command per package
```
npm package: @markmeyer/vuelidate-validators
Description: Validators for Vuelidate
Latest version: 4.0.1

# Vuelidate Validators

This is the standalone validators package for [Vuelidate](https://github.com/vuelidate/vuelidate).

## Installation

You need to install both this package and Vuelidate.

```bash
npm install @vuelidate/core @vuelidate/validators
```
or with yarn
```bash
yarn add @vuelidate/core @vuelidate/validators
```

## Usage

After adding the Vuelidate plugin, you can use the validators by importing them directly.
These validators come with error messages out of the box.

```js
import { required, email } from '@vuelidate/validators'

export default {
  data: () => ({
    name: '',
    email: ''
  }),
  validations: {
    name: { required },
    email: { required, email }
  }
}
```

### Raw, no message validators

If you want to use validators without error messages, you can import the raw validators.

```js
import { required, email } from '@vuelidate/validators/dist/raw.esm'
```

### Extending a validator with custom message

You can attach a validation message to a validator via tha `withMessage` method.

```js
import { common, required } from '@vuelidate/validators'

const requiredWithMessage = common.withMessage(required, 'This field is required and must be filled in')

export default {
  ...,
  validations: {
    name: { requiredWithMessage }
  }
}
```

### Attaching extra data to a validator

If you want to attach extra data properties to validator, so you can use them in the messages and when validating, use the `withParams` helper.

```js
import { common } from '@vuelidate/validators'

const atLeast = (number) => common.withParams({ number }, (value) => value.length <= number) // just an example

export default {
  ...,
  validations: {
    name: { atLeast: atLeast(5) }
  }
}
```

### Combining params and messages

You can combine both helpers to build a validator.

```js
import { common } from '@vuelidate/validators'

const customMinLength = (number) => common.withMessage((value) => value.length <= number, ({ $params }) => `The field must be at least ${$params.number} chars long`)
const atLeast = (number) => common.withParams({ number }, customMinLength(number)) // just an example

export default {
  ...,
  validations: {
    name: { atLeast: atLeast(5) }
  }
}
```

## Development
To test the package run

```bash
yarn test:unit
```

To link the package run

```bash
yarn link
```

To build run the package, run: 

```bash
npm run build
```
npm package: @markmichon/system-font-stacks
Description: Utilities for including the latest system font stack in your styles.
Author: Mark Michon
Latest version: 0.2.3

# System Font Stacks

A micro utility for using the latest system fonts in your font stacks. Designed for CSS-in-JS libraries. It does not add new typefaces to your project, but instead acts as an easy way to write a font stack string without the need to keep track of current "system stack" trends.

## Installation

`yarn add @markmichon/system-font-stacks`

## Usage

Import into your project:

```js
import { getSans, getSerif, getMono } from '@markmichon/system-font-stacks'
```

The following helpers are exposed to retrieve common system font stacks: `getSans`, `getSerif`, `getMono`.

They each share the same API to get default system stacks, or prepend your own declarations to the list.

```js
// Get the default system fonts stack
fontFamily: getSans()
// ex. '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'

// Append a single font-family
fontFamily: getSans('Open Sans')
//ex. '"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'

fontFamily: getSans(['Open Sans', 'source-serif-var'])
//ex. '"Open Sans", source-serif-var, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
```

## Contributing

Issues and PRs welcome! If you'd like to see a new typeface added to any of the default lists or have an idea for useful improvements to the API, [open an issue](https://github.com/markmichon/system-font-stacks/issues/new).

## Inspiration

- [System Font Stack - CSS Tricks](https://css-tricks.com/snippets/css/system-font-stack/)
- [Shipping system fonts to github.com - @mdo](http://markdotto.com/2018/02/07/github-system-fonts/)

## License

[MIT](https://oss.ninja/mit/markmichon/)
npm package: @markmiro/boxy
Description: A boxy component library
Author: Mark Miro
Latest version: 1.2.0

# boxy

A boxy component library

Install:

```
npm install @markmiro/boxy
```

Built by following instructions from:

Based on my [utils](https://github.com/markmiro/utils) library.

- [Basic setup](https://parceljs.org/getting-started/library/) (parcel docs)
- [Publishing the package](https://www.freecodecamp.org/news/how-to-publish-packages-to-npm-the-way-the-industry-does-things-2077ec34d7e8/) (freecodecamp)
- [TypeScript support for Jest](https://kulshekhar.github.io/ts-jest/docs/getting-started/installation) (ts-jest docs)
- [Add build script before publishing](https://itnext.io/step-by-step-building-and-publishing-an-npm-typescript-package-44fe7164964c) (itnext.io)
- `"alias": { "process": false }` added in `package.json` because of [this](https://github.com/parcel-bundler/parcel/issues/7697#issuecomment-1039062161).
npm package: @markmiro/css-base
Description: Based on a CSS reset from joshwcomeau.com
Author: Mark Miro
Latest version: 2.0.0

# css-base

## What does it do?

- Box sizing `border-box`
- Remove default margins on all elements
- Add 100% height to `html` element
- Display block for images and media
- Make form elements inherit document font
- Avoid text overflows (`overflow-wrap: break-word`)
- Dark mode
- Links inherit text color (helps with link color in dark mode)
- System font

## Browser support

Modern browsers.

## Colophon

- Based on a CSS reset from [joshwcomeau.com](https://www.joshwcomeau.com/css/custom-css-reset).
- The NPM package structure is based off of the [normalize.css](https://github.com/necolas/normalize.css) repo.
npm package: @markmiro/utils
Description: Some util functions
Author: Mark Miro
Latest version: 1.0.3

# utils

Some util functions

Install:

```
npm install @markmiro/utils
```

## Resources

Built by following instructions from:

Basic parcel:
https://parceljs.org/getting-started/library/

Publishing the package:
https://www.freecodecamp.org/news/how-to-publish-packages-to-npm-the-way-the-industry-does-things-2077ec34d7e8/

TypeScript support for Jest: ts-jest:
https://kulshekhar.github.io/ts-jest/docs/getting-started/installation

Add build script before publishing:
https://itnext.io/step-by-step-building-and-publishing-an-npm-typescript-package-44fe7164964c
npm package: @markmirror/commands
Description: Commands binding of the MarkMirror Markdown editor
Author: Hsiaoming Yang
Latest version: 0.3.0

# @markmirror/commands

Keyboard shortcuts and commands for the MarkMirror editor.


## Usage

```js
import { MarkMirror } from "@markmirror/core"
import { buildMarkdownCommands } from "@markmirror/commands"

const editor = new MarkMirror({
  extensions: [ buildMarkdownCommands(true) ]
})
```
npm package: @markmirror/core
Description: The fundamentals of the MarkMirror Markdown editor
Author: Hsiaoming Yang
Latest version: 0.3.0

# @markmirror/core

The fundamentals of MarkMirror - a Markdown Editor based on CodeMirror 6.

## Usage

### 1. Install the package

Get the source code via npm:

```shell
npm install @markmirror/core
```

The package contains the fundamentals of the editor, and you can create
a basic editor with only the core code.

### 2. Prepare the element

Prepare a HTML element to mount the editor. For instance a `<div>`:

```html
<div id="editor"></div>
```

You can also use a `<textarea>` as the mounting element. In this case,
the editor will use the value of the textarea as the editor's content.

```html
<textarea id="editor"></textarea>
```

### 3. Insert the style

MarkMirror has a beautiful built-in CSS file. You can include the `style.css`:

```javascript
import "@markmirror/core/style.css"
```

If you don't like it, you can always use your own CSS file.

### 4. Initialize the editor

When everything is ready, you can create the javascript code:

```javascript
import { MarkMirror, markdown } from "@markmirror/core"

// initialize the editor
const editor = new MarkMirror([
  markdown(),
])
```

You can put more extensions when initializing the editor. The extensions
are compatible with codemirror. For example:

```javascript
import { keymap } from "@codemirror/view"
import { history, defaultKeymap, historyKeymap } from "@codemirror/commands"

const editor = new MarkMirror([
  markdown(),
  history(),
  keymap.of([...defaultKeymap, ...historyKeymap]),
])
```

### 5. Render the editor

The final step is mounting the editor to the prepared element above.

```javascript
// mount the editor to #editor element
editor.render(document.getElementById("editor"))
```

If you are using a `<div>` element, and you want to add the default
content for the editor:

```javascript
const content = 'Hello **world**'
editor.render(document.getElementById("editor"), content)
```

All settled, open your browser and play with the editor.
npm package: @markmirror/menubar
Description: Menubar actions for the MarkMirror Markdown editor
Author: Hsiaoming Yang
Latest version: 0.3.0

# @markmirror/menubar

Menubar actions for the MarkMirror Markdown editor.

## Usage

```js
import { MarkMirror } from "@markmirror/core"
import { Menubar } from "@markmirror/menubar"

const editor = new MarkMirror()

// Menubar requires `editor` as parameter
// MUST init before `editor.render`
const menubar = new Menubar(editor, ["bold", "italic", "codespan", "|", "ul", "ol", "|", "h1", "h2"])

// mount `menubar.element`
document.getElementById('menubar')!.appendChild(menubar.element)
```

## Actions

- undo
- redo
- bold
- italic
- codespan
- link
- image
- strikethrough
- codeblock
- blockquote
- hr
- ul
- ol
- h1
- h2
- h3
- h4
- h5
- h6

When `undo` or `redo` is included, `MarkMirror` requires a history extension:

```js
import { MarkMirror } from "@markmirror/core"
import { history } from "@codemirror/commands"

const editor = new MarkMirror({ extensions: [ history() ]})
```
npm package: @markmirror/vue
Description: Vue components for MarkMirror editor
Author: Hsiaoming Yang
Latest version: 0.3.0

# @markmirror/vue

Vue components for MarkMirror Markdown editor.

## Usage

```html
<template>
  <editor-menubar :editor="editor" :menus="['bold', 'italic', '|', 'hr']" />
  <editor-content :editor="editor" v-model="doc">
</template>

<script>
import "@markmirror/menubar/style.css"
import { Editor, EditorContent, Menubar as EditorMenubar } from "@markmirror/vue"

export default {
  components: {
    EditorContent,
    EditorMenubar,
  },
  data () {
    const editor = new Editor()
    return { editor, doc: '' }
  },
}
</script>
```
npm package: @markmo/json-schema-editor-antd
Description: Json Schema 可视化编辑器
Latest version: 0.3.5

# json-schema-editor-antd

[![NPM version](https://img.shields.io/npm/v/@quiet-front-end/json-schema-editor-antd.svg?style=flat)](https://npmjs.org/package/@quiet-front-end/json-schema-editor-antd)
[![NPM downloads](http://img.shields.io/npm/dm/@quiet-front-end/json-schema-editor-antd.svg?style=flat)](https://npmjs.org/package/@quiet-front-end/json-schema-editor-antd)
![](https://img.shields.io/badge/license-MIT-000000.svg)

[Antd Design](https://ant.design/) 风格的 Json Schema 可视化编辑器。

[Arco Design](https://arco.design/) 风格：https://github.com/lin-mt/json-schema-editor-arco

## Usage

```shell
npm install @quiet-front-end/json-schema-editor-antd
```

```jsx
import { useState } from 'react';
import JsonSchemaEditor from '@quiet-front-end/json-schema-editor-antd';

export default () => {
  const [jsonData, setJsonData] = useState({});
  return (
    <JsonSchemaEditor
      mock={true}
      data={jsonData}
      onChange={(data) => {
        setJsonData(data);
      }}
    />
  );
};
```

## Development

```bash
# install dependencies
$ yarn install

# develop library by docs demo
$ yarn start

# build library source code
$ yarn run build

# build library source code in watch mode
$ yarn run build:watch

# build docs
$ yarn run docs:build

# check your project for potential problems
$ yarn run doctor
```

## LICENSE

MIT
npm package: @markmorcos/ui
Description: UI
Author: Mark Morcos
Latest version: 1.1.2

# UI

[![UI](https://circleci.com/gh/markmorcos/ui.svg?style=svg)](https://app.circleci.com/pipelines/github/markmorcos/ui?branch=main)

Simple and neat component library

## Getting started

First add the library to your project:

```sh
yarn add @markmorcos/ui
```

You can now import and use components like so:

```javascript
import { Button } from '@markmorcos/ui'

export default Component = () => <Button>Hello, world!</Button>
```

## Documentation

For detailed information on how to use the library, please check our [Storybook](https://markmorcos.github.io/ui/) docs.

## Collaborators

[@markmorcos](https://github.com/markmorcos)
[@mirnamaurice](https://github.com/mirnamaurice)
npm package: @markmulder/rich-text-from-markdown
Description: convert markdown to rich text
Author: Khaled Garbaya
Latest version: 15.12.1

# rich-text-from-markdown

A library to convert markdown to Contentful Rich Text document format.

## Installation

Using [npm](http://npmjs.org/):

```sh
npm install @contentful/rich-text-from-markdown
```

Using [yarn](https://yarnpkg.com/):

```sh
yarn add @contentful/rich-text-from-markdown
```

## Usage

### Basic

```js
const { richTextFromMarkdown } = require('@contentful/rich-text-from-markdown');

const document = await richTextFromMarkdown('# Hello World');
```

### Advanced

The library will convert automatically the following markdown nodes:

- `paragraph`
- `heading`
- `text`
- `emphasis`
- `strong`
- `delete`
- `inlineCode`
- `link`
- `thematicBreak`
- `blockquote`
- `list`
- `listItem`

If the markdown content has unsupported nodes like image `![image](url)` you can add a callback as a second argument
and it will get called everytime an unsupported node is found. The return value of the callback will be the rich text representation
of that node.

#### Example:

```js
const { richTextFromMarkdown } = require('@contentful/rich-text-from-markdown');

// define your own type for unsupported nodes like asset
const document = await richTextFromMarkdown(
  '![image](\'https://example.com/image.jpg\')',
  node => ({
    nodeType: 'embedded-[entry|asset]-[block|inline]',
    content: [],
    data: {
      target: {
        sys: {
          type: 'Link',
          linkType: 'Entry|Asset',
          id: '.........'
        }
      }
    }
  })
);
```