open-index/open-npm huggingface dataset:
npm package: @moxy/react-keyboard-only-outlines
Description: A React component that enables keyboard-only-outlines so that outlines are only visible when using the keyboard
Author: João Mota
Latest version: 1.0.2

# react-keyboard-only-outlines

[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Build Status][build-status-image]][build-status-url] [![Coverage Status][codecov-image]][codecov-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]

[npm-url]:https://npmjs.org/package/@moxy/react-keyboard-only-outlines
[downloads-image]:https://img.shields.io/npm/dm/@moxy/react-keyboard-only-outlines.svg
[npm-image]:https://img.shields.io/npm/v/@moxy/react-keyboard-only-outlines.svg
[build-status-url]:https://github.com/moxystudio/react-keyboard-only-outlines/actions
[build-status-image]:https://img.shields.io/github/workflow/status/moxystudio/react-keyboard-only-outlines/Node%20CI/master
[codecov-url]:https://codecov.io/gh/moxystudio/react-keyboard-only-outlines
[codecov-image]:https://img.shields.io/codecov/c/github/moxystudio/react-keyboard-only-outlines/master.svg
[david-dm-url]:https://david-dm.org/moxystudio/react-keyboard-only-outlines
[david-dm-image]:https://img.shields.io/david/moxystudio/react-keyboard-only-outlines.svg
[david-dm-dev-url]:https://david-dm.org/moxystudio/react-keyboard-only-outlines?type=dev
[david-dm-dev-image]:https://img.shields.io/david/dev/moxystudio/react-keyboard-only-outlines.svg

A component that enables [keyboard-only-outlines](https://github.com/moxystudio/js-keyboard-only-outlines) so that outlines are only visible when using the keyboard.


## Installation

```sh
$ npm install @moxy/react-keyboard-only-outlines
```

This library is written in modern JavaScript and is published in both CommonJS and ES module transpiled variants. If you target older browsers please make sure to transpile accordingly.


## Usage

You should use this component just once in your project:

```jsx
import KeyboardOnlyOutlines from '@moxy/react-keyboard-only-outlines';

<KeyboardOnlyOutlines>
    <MyApp />
</KeyboardOnlyOutlines>
```


## Props

| name | type | default | description |
| ---- | ---- | ------- | ----------- |
| stylesheetTarget | DOM Node | See [keyboard-only-outlines](https://github.com/moxystudio/js-keyboard-only-outlines) | The DOM node where to insert the stylesheet with styles to disable the outlines |
| styles | string | See [keyboard-only-outlines](https://github.com/moxystudio/js-keyboard-only-outlines) | The styles to apply when a focus event is caused by mouse navigation |


## Tests

```sh
$ npm test
$ npm test -- --watch # during development
```


## License

Released under the [MIT License](https://www.opensource.org/licenses/mit-license.php).
npm package: @moxy/react-modal
Description: A modal, built on top of react-modal, that also fixes the scrollable body in iOS
Author: Ivo Lima Silva
Latest version: 1.0.0

# react-modal

[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Coverage Status][codecov-image]][codecov-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]

[npm-url]:https://npmjs.org/package/@moxy/react-modal
[downloads-image]:https://img.shields.io/npm/dm/@moxy/react-modal.svg
[npm-image]:https://img.shields.io/npm/v/@moxy/react-modal.svg
[travis-url]:https://travis-ci.org/moxystudio/react-modal
[travis-image]:https://img.shields.io/travis/moxystudio/react-modal/master.svg
[codecov-url]:https://codecov.io/gh/moxystudio/react-modal
[codecov-image]:https://img.shields.io/codecov/c/github/moxystudio/react-modal/master.svg
[david-dm-url]:https://david-dm.org/moxystudio/react-modal
[david-dm-image]:https://img.shields.io/david/moxystudio/react-modal.svg
[david-dm-dev-url]:https://david-dm.org/moxystudio/react-modal?type=dev
[david-dm-dev-image]:https://img.shields.io/david/dev/moxystudio/react-modal.svg

A modal built on top of [react-modal](https://github.com/reactjs/react-modal) to fix the scrollable body in iOS.

## Installation

```sh
$ npm install @moxy/react-modal
```

This library is written in modern JavaScript and is published in both CommonJS and ES module transpiled variants. If you target older browsers please make sure to transpile accordingly.

## Usage

First, make sure to bind modal to your appElement.

```js
import Modal from '@moxy/react-modal';

Modal.setAppElement('#yourAppElement');
```

Then use the component just like [`react-modal`](https://github.com/reactjs/react-modal).

```js
import React, { useState, useCallback } from 'react';
import Modal from '@moxy/react-modal';

const MyComponent = () => {
    const [isOpen, setOpen] = useState(false);

    const handleModalOpen = useCallback(() => {
        setOpen(true);
    }, []);

    const handleModalClose = useCallback(() => {
        setOpen(false);
    }, []);

    return (
        <>
            <button onClick={ handleModalOpen }>Open</button>
            <Modal isOpen={ isOpen } onRequestClose={ handleModalClose }>Modal content</Modal>
        </>
    );
};

export default MyComponent;
```

## API

### setAppElement

Wrapper around [`react-modal`](https://github.com/reactjs/react-modal)'s `setAppElement` that binds the modal to the app element and locks the scroll on that element when a modal is open.

### Modal

React component that locks the app element whenever a modal is open.
Every prop passed to `Modal` will be passed to the base component ([`react-modal`](https://github.com/reactjs/react-modal)).

## Tests

```sh
$ npm test
$ npm test -- --watch # during development
```

## License

Released under the [MIT License](https://www.opensource.org/licenses/mit-license.php).
npm package: @moxy/stylelint-config
Description: MOXY stylelint configuration to be used across projects
Author: André Cruz
Latest version: 10.0.1

# stylelint-config

[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Build Status][build-status-image]][build-status-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]


[npm-url]:https://npmjs.org/package/@moxy/stylelint-config
[npm-image]:https://img.shields.io/npm/v/@moxy/stylelint-config.svg
[downloads-image]:https://img.shields.io/npm/dm/@moxy/stylelint-config.svg
[build-status-url]:https://github.com/moxystudio/stylelint-config/actions
[build-status-image]:https://img.shields.io/github/workflow/status/moxystudio/stylelint-config/Node%20CI/master
[david-dm-url]:https://david-dm.org/moxystudio/stylelint-config
[david-dm-image]:https://img.shields.io/david/moxystudio/stylelint-config.svg
[david-dm-dev-url]:https://david-dm.org/moxystudio/stylelint-config?type=dev
[david-dm-dev-image]:https://img.shields.io/david/dev/moxystudio/stylelint-config.svg

MOXY [stylelint](http://stylelint.org/) configuration to be used across projects.


## Installation

```ssh
$ npm install stylelint @moxy/stylelint-config --save-dev
```

## Usage

Create a `.stylelintrc.json` file with:

```json
{
    "extends": "@moxy/stylelint-config"
}
```

ℹ️ By default, stylelint will run on all files. If your project uses separate CSS files, it's better to only lint `.css` files to avoid unexpected errors. You can do this by adding the tweaking `ignoreFiles`:

```json
{
    "extends": "@moxy/stylelint-config",
    "ignoreFiles": [
        "!**/*.css"
    ]
}
```


## File naming convention

File names should be hyphenated (lower case with hyphens).

If a CSS file is strictly associated with a JS file, it should follow the name of the JS file, e.g.: if we need to style a `Button.js` react component, then the css file should be named `Button.css`.


## Comments convention

```css
/* ==========================================================================
   Main comment block
   ========================================================================== */

.title {}

/* Secondary comment block
   ============================================= */

.description {}

/* Tertiary comment block & line/inline comments */

.tags {
    /* Line comment */
    background: red;
    transition: color 0.2s ease-out;  /* Inline comment */
}

/*
   Multi
   line
   comment
*/
```


## Tests

```sh
$ npm test
$ npm test -- --watch # during development
```

## License

[MIT License](http://opensource.org/licenses/MIT)
npm package: @moyayigo/moya-indexeddb
Description: A simple and useful indexedDB class.
Author: moyayigo
Latest version: 1.0.1

# moya-indexedDB

#### Introduction

A simple and useful indexedDB class.

#### Install

```
npm i @moyayigo/moya-indexeddb
```

#### Usage

```js
const mydb = new moyaindexedDB('moyadb','app');
mydb.indexedDBstart();

//OR VUE Project

/* eslint-disable no-unused-vars */
import moyaindexedDB from "@moyayigo/moya-indexeddb";
const mydb = new moyaindexedDB('moyadb','app');
mydb.indexedDBstart();
```

#### Demo

```js
mydb.add("app","mykey",1);//write in key,value
mydb.add("app","mykey",1);//read key,value
mydb.createInstanceStore("objstore",true,'index');//create a object store
mydb.add("objstore",{'index':1,'name':'Niek'});//write in object
mydb.read("objstore",1);//read object
```
npm package: @moyu/bucket.js
Description: cache scripts and styles in localStorage
Author: moyus
Latest version: 0.0.2

<div align="center">
  <img width="160" height="50" src="logo.svg" alt="bucket.js" />
  <p>移动端LocalStorage缓存资源方案</p>
</div>

## 安装
```bash
npm install @moyu/bucket.js
```

## 使用
```javascript
bucket.timeout = 10000; // 请求超时10s
bucket.prefix = 'bucket-'; // localStorage前缀
bucket.expire = 24 * 7; // 7天的缓存时间
bucket.require([
  {
    url: 'https://www.xxx.xxx/static/styles.123.css',
    key: 'styles',
    unique: '123',
    cache: true
  },
  {
    url: 'https://www.xxx.xxx/static/vendors.456.js',
    key: 'vendors',
    unique: '456',
    cache: true
  },
  {
    url: 'https://www.xxx.xxx/static/app.789.js',
    key: 'app',
    unique: '789',
    cache: true
  }
], function (resources) {
  // 所有资源均已加载并按顺序插入到了head中
});

// 获取本地缓存资源
bucket.get('app');
// {
//   content: string   // 资源内容
//   type: string      // 资源类型
//   stamp: number     // 什么时候缓存的
//   unique: string    // hash值
//   expire: number    // 多久之后过期
// }

// 删除本地缓存资源
bucket.remove('vendors')

// 清空本地所有缓存资源
bucket.clear()
```
npm package: @moyu/pointcss
Description: A flexible CSS Framework for building modern responsive web apps
Author: moyu
Latest version: 2.0.2

<img width="124" height="42" src="https://github.com/moyus/pointcss/raw/master/docs/images/logo.svg?sanitize=true">

![npm (scoped)](https://img.shields.io/npm/v/@moyu/pointcss?style=flat-square)
![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@moyu/pointcss?style=flat-square)

A lightweight and flexible CSS Framework for building modern responsive web apps.

- Built with flexbox
- Mobile friendly layout
- ~12KB minified and gzipped

## Installation

There are 3 ways to get started

##### Yarn
```sh
yarn add @moyu/pointcss
```

##### NPM
```sh
npm install @moyu/pointcss --save
```

##### Download and use production file
```html
<link rel="stylesheet" href="dist/point.min.css" />
```

## Customization
**pointcss** is coded in [SASS](http://sass-lang.com/), If you're familiar with it, You can continue

##### Install the dependence
```sh
yarn add @moyu/pointcss --dev
```

##### Set your variables
you can reference all initial variables in `scss/_variables.scss`
```scss
$color-primary:                         #636AFF; // primary
$color-danger:                          #ff2d20; // negative
$color-success:                         #15CD72; // positive
$color-info:                            #0069ff; // accent
$color-warning:                         #ED6E33; // warning
...
```

##### Import pointcss at the end of your code
```scss
// overwrite variables
$color-primary:                         #636AFF;

// your code

@import "node_modules/@moyu/pointcss/point"
```

## Browser Support
pointcss uses [Normalize.css](https://necolas.github.io/normalize.css/) for CSS
reset and [Autoprefixer](https://github.com/postcss/autoprefixer) to make styles
compatible with earlier browser versions. For best user experience, these
browsers are recommended:

- Chrome
- Firefox
- Safari
- Opera
- Microsoft Edge
- Internet Explorer 10+

## Copyright and License
- Designed and built by [MOYU](https://moyu.io)
- Licensed under the [MIT license](https://github.com/moyus/point/blob/master/LICENSE)
npm package: @moyuan/create-panel
Description: Scaffold a new Moyuan IoT panel project
Author: Moyuan Co, Ltd.
Latest version: 1.0.0

# @moyuan/create-panel

Scaffold a new Moyuan IoT panel project.

## Usage

```bash
# npm create (recommended)
npm create @moyuan/panel my-panel

# or npx
npx @moyuan/create-panel my-panel

# or install globally
npm i -g @moyuan/create-panel
create-moyuan-panel my-panel
```

## Options

| Option | Alias | Description | Default |
|--------|-------|-------------|---------|
| `--port` | `-p` | Dev server port | `8090` |
| `--title` | `-t` | HTML page title | project name |
| `--yes` | `-y` | Skip prompts, use defaults | `false` |
| `--help` | `-h` | Show help message | |

## Examples

Interactive mode (prompts for title and port):

```bash
npm create @moyuan/panel my-panel
```

Non-interactive mode:

```bash
npm create @moyuan/panel my-panel --port 8091 --title "My Panel" -y
```

## Generated Project

```
my-panel/
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── components/
│   ├── hooks/
│   ├── i18n/
│   ├── pages/
│   └── styles/
├── index.html
├── vite.config.ts
├── tsconfig.json
├── postcss.config.js
└── package.json
```

After scaffolding:

```bash
cd my-panel
yarn install
yarn dev
```

## Requirements

- Node.js >= 18.0.0
npm package: @moyuyc/module-to-cdn
Description: Get cdn config from npm module name
Author: Thomas Sileghem
Latest version: 3.1.6

# module-to-cdn [![Build Status](https://travis-ci.org/mastilver/module-to-cdn.svg?branch=master)](https://travis-ci.org/mastilver/module-to-cdn) [![Greenkeeper badge](https://badges.greenkeeper.io/JulianWielga/module-to-cdn.svg)](https://greenkeeper.io/)

> Get cdn config from npm module name


## Install

```
$ npm install --save module-to-cdn
```


## Usage

```js
const moduleToCdn = require('module-to-cdn');

moduleToCdn('react', '15.3.0');
/* => {
    name: 'react',
    var: 'React',
    url: 'https://unpkg.com/react@15.3.0/dist/react.min.js',
    version: '15.3.0'
}
*/
```


## API

### moduleToCdn(moduleName, version, options)

return the result `Object` or null (if module couldn't be find)

#### moduleName

Type: `string`

The name of the module

#### version

Type: `string`

The version of the module

#### options

##### options.env

Type: `string`<br>
Values: `development`, `production`<br>
Default: `development`

##### options.endpoint

Type: `string`<br>
Default: `//unpkg.com/`

##### options.modules

See default modules [modules.json](modules.json)

##### options.versionSeg

Type: `string`<br>
Default: `@`

### Result

* `name`: name of the module
* `var`: name of the global variable exposing the module
* `url`: url where the module is available
* `version`: the version asked for


## License

MIT © [Thomas Sileghem](http://mastilver.com)
npm package: @moyuyc/react-document-title
Description: A declarative, nested, stateful document.title for React
Author: Dan Abramov
Latest version: 2.0.3

React Document Title
====================

**Note: Forked from https://github.com/gaearon/react-document-title**
**Upgrade dependencies for fix https://github.com/gaearon/react-document-title/issues/62 **

Provides a declarative way to specify `document.title` in a single-page app.  
This component can be used on server side as well.

Built with [React Side Effect](https://github.com/gaearon/react-side-effect).

## Installation

```
npm install --save @moyuyc/react-document-title
```

Dependencies: React >= 0.13.0

## Features

* Does not emit DOM, not even a `<noscript>`;
* Like a normal React compoment, can use its parent's `props` and `state`;
* Can be defined in many places throughout the application;
* Supports arbitrary levels of nesting, so you can define app-wide and page-specific titles;
* Works just as well with isomorphic apps.

## Example

Assuming you use something like [react-router](https://github.com/rackt/react-router):

```javascript
function App() {
  // Use "My Web App" if no child overrides this
  return (
    <DocumentTitle title='My Web App'>
      <SomeRouter />
    </DocumentTitle>
  );
}

function HomePage() {
  // Use "Home" while this component is mounted
  return (
    <DocumentTitle title='Home'>
      <h1>Home, sweet home.</h1>
    </DocumentTitle>
  );
}

class NewArticlePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { title: 'Untitled' };
  }

  render() {
    // Update using value from state while this component is mounted
    return (
      <DocumentTitle title={this.state.title}>
        <div>
          <h1>New Article</h1>
          <input
            value={this.state.title}
            onChange={(e) => this.setState({ title: e.target.value })}
          />
        </div>
      </DocumentTitle>
    );
  }
}
```

## Server Usage

If you use it on server, call `DocumentTitle.rewind()` **after rendering components to string** to retrieve the title given to the innermost `DocumentTitle`. You can then embed this title into HTML page template.

Because this component keeps track of mounted instances, **you have to make sure to call `rewind` on server**, or you'll get a memory leak.

## But What About Meta Tags?

Looking for something more powerful? Check out [React Helmet](https://github.com/nfl/react-helmet)!
npm package: @moyuyc/to-json-schema
Description: Converts JSON to JSON schema.
Author: imcuttle
Latest version: 1.1.1

# to-json-schema

Forked from https://github.com/Nijikokun/generate-schema/blob/master/src/schemas/json.js

But fixed some bugs.

```bash
npm install @moyuyc/to-json-schema
```
npm package: @moyuyc/tsm
Description: TypeScript Module Loader
Author: Luke Edwards
Latest version: 2.3.1

<div align="center">
  <img src="logo.png" alt="tsm" width="200" />
</div>

<div align="center">
  <a href="https://npmjs.org/package/tsm">
    <img src="https://badgen.net/npm/v/tsm" alt="version" />
  </a>
  <a href="https://github.com/lukeed/tsm/actions">
    <img src="https://github.com/lukeed/tsm/workflows/CI/badge.svg" alt="CI" />
  </a>
  <a href="https://npmjs.org/package/tsm">
    <img src="https://badgen.net/npm/dm/tsm" alt="downloads" />
  </a>
  <a href="https://packagephobia.now.sh/result?p=tsm">
    <img src="https://badgen.net/packagephobia/publish/tsm" alt="publish size" />
  </a>
</div>

<div align="center">TypeScript Module Loader</div>

## Features

* Supports `node <file>` usage
* Supports [ESM `--loader`](https://nodejs.org/api/esm.html#esm_loaders) usage<sup>†</sup>
* Supports [`--require` hook](https://nodejs.org/api/cli.html#cli_r_require_module) usage
* Optional [configuration](/docs/configuration.md) file for per-extension customization

> <sup>†</sup> The ESM Loader API is still **experimental** and will change in the future.

## Install

```sh
# install as project dependency
$ npm install --save-dev tsm

# or install globally
$ npm install --global tsm
```

## Usage

> **Note:** Refer to [`/docs/usage.md`](/docs/usage.md) for more information.

```sh
# use as `node` replacement
$ tsm server.ts

# forwards any `node` ENV or flags
$ NO_COLOR=1 tsm server.ts --trace-warnings

# use as `--require` hook
$ node --require tsm server.tsx
$ node -r tsm server.tsx

# use as `--loader` hook
$ node --loader tsm main.jsx
```

## License

MIT © [Luke Edwards](https://lukeed.com)