open-index/open-npm huggingface dataset:
npm package: @notadd/vue-screen-capture
Description: 基于 `html2canvas` 的vue截图组件
Latest version: 1.0.1

# vue-screen-capture

基于[html2canvas](https://github.com/niklasvh/html2canvas)的Vue截图、标注组件。

## How to use
### step-1

#### 安装 `@notadd/vue-screen-capture`
+ `npm install @notadd/vue-screen-capture -S` 

#### step-2

+ 引入组件

```javascript
  import ScreenCapture from '@notadd/vue-screen-capture';
```

#### step-3

+ 声明component
```javascript
  export default {
  ...,
  components: {
    ScreenCapture
  },
  ...,
```

#### step-4

+ 使用组件

```html
<screen-capture ref="sc" :html="html"></screen-capture>
```

### 说明：

#### 组件属性
> `html`：要截图的dom元素

#### 组件方法
> `capture`：生成截图
> `clear`：清空截图
> `getCaptureImage`：返回截图File对象
npm package: @notafunction/prettier-config
Description: Prettier configurations
Author: Matt Latham
Latest version: 1.0.2

## Usage

```bash
npm add -D @notafunction/prettier-config
```

### package.json

```json
{
    "prettier": "@notafunction/prettier-config"
}
```

### .prettierrc:

```json
"@notafunction/prettier-config"
```

### Extending .prettierignore:

```bash
prettier . --write --ignore-path node_modules/@notafunction/prettier-config/.prettierignore
```
npm package: @notainc/delay
Description: delay for async-await
Author: Sho Hashimoto
Latest version: 0.0.7

## @notainc/delay

- https://github.com/nota/delay
- https://www.npmjs.com/package/@notainc/delay


[![CircleCI](https://circleci.com/gh/nota/delay.svg?style=svg)](https://circleci.com/gh/nota/delay)


## Usage

```js
import delay from '@notainc/delay'

await delay(1000)
```
npm package: @notainc/kamon
Description: This is icon system for Helpfeel Inc.
Latest version: 2.0.3

# kamon
* kamon is a project to manage svg icons for the products of [NOTA Inc.](https://notainc.com)
* See https://nota.github.io/kamon/example/ to check all icons.


## Installation
* Please get svg icon set via npm.
* `npm install @notainc/kamon`

## Usage

### React

```js
import { Star, StarFill } from '@notainc/kamon/react';
/** Or you can use separated import
 * import { Star } from '@notainc/kamon/react/Star';
 * import { StarFill } from '@notainc/kamon/react/StarFill';
 **/
function Like () {
  const [liked, setLiked] = useState(false);
  return <button onClick={setLiked(prev => !prev)}>
    {liked ? <StarFill /> : <Star />} Like
  </button>
}
```

### SVG

* For web applications, we recommend to use SVG Sprites.
* We are following this process in /example.
1. Generate the SVG Sprites file from /svg. (Using [svg-sprites](https://www.npmjs.com/package/svg-sprite) library)
2. Insert the generated SVG Sprites inline under the body element. (This process enables to use icon anywhere)
3. To call icon instance, do like this
```html
<body>
    <div class='sprite' hidden></div>  

    <!-- Call icon instance here -->
    <svg class='hoge'>
      <use xlink:href='#icon-name'></use>
    </svg>  

    <!-- Inserte SVG Sprites -->
    <script>
      $(function () {
        $('.sprite').load('dest/sprite.svg')
      })
    </script>
 </body>
  ```

```css
// Set icon color
.hoge {
  fill: #555;
 }
```

## Development

- Clone this repository.
- `npm install`
- `npm run build`

## License
#### Code
* Copyright (c) 2019 Nota Inc.
* This software is licensed under the MIT. (http://opensource.org/licenses/mit-license.html)
* Applies to all HTML and CSS and Javascript files.


#### Icons
* Some icons in the /svg directory use the source of following service, and it is necessary to follow the license applied by them.
* We do not guarantee that our users are compliant with the license.

* [Fontawesome](https://fontawesome.com/v4.7.0/license/)  
  License: SIL OFL 1.1 (http://scripts.sil.org/OFL)
npm package: @notainc/key-focus-visible
Description: This library allows you to show CSS :focus pseudo-class only when triggered by the keyboard.
Latest version: 0.0.7

# Key focus visible

This library allows you to show CSS `:focus` pseudo-class only when triggered by the keyboard.

Alternatively, `:focus-visible` [polyfill](https://www.npmjs.com/package/focus-visible) is available.
Here are advantages compared to the polifill:

- Easy to debug the stylesheets on Chrome.
- Does not conflict with React or Vue since it doesn't change the DOM of each element.
- Code is simpler.

Detailed behavior:

- Works well when the focus is returned after you close the modal/dropdown by the mouse or keyboard.
- Works well when the focus is given programmatically.

In both cases, we remember the last used input device to focus, and if it was a keyboard, focus is shown, if it was a pointing device, focus is not shown.

### Install

`$ npm install @notainc/key-focus-visible`

### How to use

Just import/require this library to your project.

```js
import '@notainc/key-focus-visible'
```

It sets `data-focus-visible` attribute on `body` element when the focus is given by the keyboard.
So you can apply the style as follows:

```css
*:focus {
  outline: none;
}

[data-focus-visible] *:focus {
  box-shadow: 0 0 0px 4px rgba(64, 167, 255, 0.6);
}
```

You can also use it in Sass:

```scss
.foo-component {
  background-color: #fff;

  &:active,
  &:hover,
  [data-focus-visible] &:focus {
    background-color: #ccc;
  }
}
```

### Demo

See the live demo [here](https://nota.github.io/key-focus-visible/demo.html)

### Compatibility

Suports ordinary modern dekstop browsers (Chrome, Firefox, Safari, Opera, Edge) and mobile browsers (Chrome for Android, iOS Safari)

Does not throw error on IE.

### License

This software is released under the MIT License, see LICENSE.
npm package: @notainc/mouse-hover-visible
Description: This library allows you to show CSS :hover pseudo-class only when triggered by the mouse.
Latest version: 0.0.9

# mouse hover visible

This library allows you to show CSS `:hover` pseudo-class only when triggered by the mouse.

There are several ways to achieve this goal.
Advantages of our aproach are:

- Works on the device that has **both** mouse and touch screen.
- Write CSS (& Sass) cleanly among other pseudo-classes like `:active` or `:focus`.
- Hide the hover style automatically when the keyboard is pressed.

### Install

`$ npm install @notainc/mouse-hover-visible`

### How to use

Just import/require this library to your project.

```js
import '@notainc/mouse-hover-visible'
```

It sets `data-hover-visible` attribute on the `body` element when the pointer is moved using the mouse.
So you can apply the style as follows:

```css
[data-hover-visible] button:hover {
  background-color: #ccc;
}
```

You can also use it in Sass:

```scss
.foo-component {
  background-color: #fff;

  &:active,
  &:focus,
  [data-hover-visible] &:hover {
    background-color: #ccc;
  }
}
```

### Demo

See the live demo [here](https://nota.github.io/mouse-hover-visible/demo.html)

### Compatibility

Suports ordinary modern dekstop browsers (Chrome, Firefox, Safari, Opera, Edge) and mobile browsers (Chrome for Android, iOS Safari)

Does not throw error on IE.

### License

This software is released under the MIT License, see LICENSE.
npm package: @notainc/typed-api-spec
Description: typed-api-spec is an TypeScript based declarative API specification.
Author: mpppk
Latest version: 0.7.1

# typed-api-spec

typed-api-spec is an TypeScript based declarative API specification.

Doc: https://nota.github.io/typed-api-spec

## features

- TypeScript based declarative API specification
- type-safe _fetch_ with zero runtime
- Framework-agnostic
  - optional: type-safe express controller with thin wrapper

## examples

See `examples` directory
npm package: @notamans/create-node-express-starter
Description: Node.js Express Starter
Author: Amanjot Singh
Latest version: 1.0.5

# node-express-starter

A basic Node.js and Express.js starter project.

## Getting Started

Generate boilerplate using:
<code>npx @notamans/create-node-express-starter <PROJECT_NAME></code>

API URL: `http://localhost:3000`

### Features

- Node.js and Express.js for building web applications
- TypeScript for type safety and maintainability
- dotenv for environment variable management
- Proper directory structure
- Jest for unit testing and integration testing
- ESLint and Prettier for code linting and formatting
- Winston for logging
- Custom global error handler. Removes the need for redundant `try/catch` blocks.

### Project Structure

The project is organized into the following directories:

- `src`: Source code for the application
  - `server.ts`: Main entry point for the server
  - `controllers/`: Controller logic
  - `errors/`: Custom errors for consistency
  - `middlewares/`: Express middlewares
  - `routes/`: API routes
  - `services/`: Business logic for the application
- `dist`: Compiled JavaScript code for production
- `tests`: Unit tests and integration tests for the application

### Scripts

The following scripts are available:

- `npm run dev`: Start the development server
- `npm run build`: Compile the code for production
- `npm run start`: Start the production server
- `npm run test`: Run unit tests and integration tests
- `npm run lint`: Run ESLint for code linting and formatting

### Environment Variables

The following environment variables are used:

- Server
  - `PORT`: Port number for the server (default: 3000)
  - `NODE_ENV`: Node environment (default: development)
- Logging
  - `LOG_LEVEL`: Logger log level. For example, "info", "debug", etc.
  - `LOG_TO_CONSOLE`
  - `LOG_TO_FILE`
  - `LOG_TO_GRAFANA`
  - `GRAFANA_HOST`
  - `GRAFANA_PORT`

### Contributing

Contributions are welcome! Please submit a pull request with your changes.
npm package: @notangles/common
Description: ## Commands
Latest version: 1.0.12

# Notangles common module

## Commands

* `npm run lint` - Runs linting.
* `npm run lint:fix` - Runs linting and fixes trivial errors.
* `npm run format` - Reformats all of the `.ts` and `.tsx` files with Prettier.
* `npm run build` - Regenerates `dist` folder that gets included into NPM module.