open-index/open-npm huggingface dataset:
npm package: @shuheen/designify
Description: Designify is a modern UI Component Library built with TypeScript, React, Storybook, Rollup, and other cutting-edge technologies. It provides a set of reusable and customizable components to streamline the development of user interfaces, ensuring consisten
Author: Shoaib Khan
Latest version: 1.0.0

# Designify UI Component Library

Designify is a modern UI Component Library built with TypeScript, React, Storybook, Rollup, and other cutting-edge technologies. It provides a set of reusable and customizable components to streamline the development of user interfaces, ensuring consistency and a polished look across your applications.

## Features

- **React Components**: Build your UI using a variety of pre-designed React components.
- **TypeScript Support**: Enhance code quality and developer experience with TypeScript.
- **Storybook Integration**: Visualize and interact with your components in isolation using Storybook.
- **Rollup for Bundling**: Optimize and bundle your library efficiently with Rollup.

## Getting Started

### Installation

To install Designify in your project, run:

```bash
npm install @shuheen/designify
```

### Usage
```jsx
import { Button, Input } from 'designify';

function App() {
  return (
    <div>
      <Button onClick={() => console.log('Button clicked')}>Click me</Button>
      <Input placeholder="Enter text" />
    </div>
  );
}
```

### Documentation
For detailed information on components and usage, refer to the [Designify Documentation.]()

### Storybook
Explore and interact with Designify components in Storybook:

```bash copy
npm run storybook
```

Visit [http://localhost:6006](http://localhost:6006) in your browser to view the Storybook.

### Contributing
We welcome contributions! To contribute to Designify, follow these steps

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them with descriptive messages.
4. Push your changes to your fork.
5. Submit a pull request to the main repository.

### Acknowledgments
- Thanks to the open-source community for their valuable contributions.
- Inspired by other great UI Component Libraries.

### Contact
For any inquiries or feedback, please contact us at [Shoaib Khan](mailto:mail.shuaibkhan@gmail.com)
npm package: @shuhei/incomplete-image-parser
Description: An incomplete image parser that can be use to peek into binary data of image files
Author: Shuhei Kagawa
Latest version: 0.0.2

# Incomplete Image Metadata Parsers

Incomplete image metadata parsers that I wrote to learn how metadata is stored in image files

## Formats

- [x] JPEG
- [x] PNG
- [x] GIF
- [x] WebP
- [ ] JPEG 2000

Note that implementations are incomplete even if they have checkmarks here!

## Usage

Via HTTP(S) - Image format is chosen by the `Content-Type` header:

```sh
node index.js https://foo.com/bar.jpg
```

Via file system - Image format is chosen by the file extension:

```sh
node index.js ./foo.webp
```
npm package: @shuhei/inline-requires-webpack-plugin
Description: PoC for inline requires with Webpack.
Author: Shuhei Kagawa
Latest version: 0.0.1

# Inline Requires Webpack Plugin

PoC for inline requires with Webpack.

This is **INCOMPLETE** and its implementation is **TERRIBLE**. I'll improve it if I can verify that the idea is worth pursuing.

## Motivation

I learned the idea of inline requires at [Making instagram.com faster: Code size and execution optimizations (Part 4)](https://instagram-engineering.com/making-instagram-com-faster-code-size-and-execution-optimizations-part-4-57668be796a8). Instagram is using Metro for bundling, and Metro seems to be using [inline-requires Babel plugin in fbjs](https://github.com/facebook/fbjs/blob/master/packages/babel-preset-fbjs/plugins/inline-requires.js) for inlining `require()`s.

I can't use the Babel plugin that works with CommonJS modules because I want to use ES modules for tree shaking—I wonder how Instagram is eliminating dead code, but probably they have their own solution. This Webpack plugin inlines `__webpack_require__()` calls after Webpack understands ES modules so that it doesn't break tree shaking.

## License

MIT
npm package: @shuhei/pollen
Description: DNS polling for HTTP Keep-Alive of Node.js HTTP clients
Author: Shuhei Kagawa
Latest version: 0.0.5

# pollen

DNS polling for HTTP Keep-Alive of Node.js HTTP clients

[![CircleCI](https://circleci.com/gh/shuhei/pollen.svg?style=svg)](https://circleci.com/gh/shuhei/pollen)
[![codecov](https://codecov.io/gh/shuhei/pollen/branch/master/graph/badge.svg)](https://codecov.io/gh/shuhei/pollen)
[![npm version](https://badge.fury.io/js/%40shuhei%2Fpollen.svg)](https://badge.fury.io/js/%40shuhei%2Fpollen)

## Why?

- Support server-side traffic switch using [weighted DNS routing](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/routing-policy.html#routing-policy-weighted)
- Eliminate latency of making new connections (DNS query, TCP & TLS handshakes)
- Stay resilient to DNS query failures

To achieve good performance, we want to keep Keep-Alive connections as much as possible. On the over hand, DNS-based traffic switch doesn't allow us to keep connections forever because existing persistent connections can become stale when DNS records change.

## Solution

This package polls DNS records and keep Keep-Alive connections using [agentkeepalive](https://github.com/node-modules/agentkeepalive) as long as DNS records stay same. When DNS records change, it creates new connections with already retrieved IP addresses without making new DNS queries.

Even when DNS records change, existing connections are not immediately terminated. We can keep them for the next DNS record change (for example, DNS records can go back and forth with weighted DNS routing) with `freeSocketTimeout` option of `agentkeepalive`.

## Install

```sh
npm install -S @shuhei/pollen
# or
yarn add @shuhei/pollen
```

## Example

```js
const https = require('https');
const { DnsPolling, HttpsAgent } = require('@shuhei/pollen');

const dnsPolling = new DnsPolling({
  interval: 30 * 1000 // 30 seconds by default
});
// Just a thin wrapper of https://github.com/node-modules/agentkeepalive
// It accepts all the options of `agentkeepalive`.
const agent = new HttpsAgent();

const hostname = 'shuheikagawa.com';
const req = https.request({
  hostname,
  path: '/',
  // Make sure to call `getLookup()` for each request!
  lookup: dnsPolling.getLookup(hostname),
  agent,
});
```

## Limitations

- Only IPv4 is supported.
- `/etc/hosts`, etc are not supported because this package internally uses `dns.resolve4()`. See [Node.js documentation](https://nodejs.org/api/dns.html#dns_implementation_considerations) for more details.
npm package: @shuhei/rolling-window
Description: A rolling time window
Author: Shuhei Kagawa
Latest version: 1.0.0

# rolling-window

[![Actions Status](https://github.com/shuhei/rolling-window/workflows/NodeCI/badge.svg)](https://github.com/shuhei/rolling-window/actions)
[![Codecov](https://codecov.io/gh/shuhei/rolling-window/branch/master/graph/badge.svg)](https://codecov.io/gh/shuhei/rolling-window)
[![npm version](https://badge.fury.io/js/%40shuhei%2Frolling-window.svg)](https://badge.fury.io/js/%40shuhei%2Frolling-window)

Implements "Reset reservoir periodically by chunks" strategy to use [hdr-histogram-js](https://github.com/HdrHistogram/HdrHistogramJS) for monitoring. Inspired by [vladimir-bukhtoyarov/rolling-metrics](https://github.com/vladimir-bukhtoyarov/rolling-metrics). No additional dependencies.

See [rolling-metrics' documentation](https://github.com/vladimir-bukhtoyarov/rolling-metrics/blob/master/histograms.md) for the background.

## Install

With `hdr-histogram-js@2`:

```sh
npm install -S hdr-histogram-js @shuhei/rolling-window
```

With `hdr-histogram-js@1`:

```sh
npm install -S hdr-histogram-js@1 @shuhei/rolling-window@^0.2.1
```

## Usage

```js
const { RollingWindowHistogram } = require("@shuhei/rolling-window");

// This configuration creates 7 internal histograms (6 + 1) and rotates them
// one by one in each 10 seconds. `getSnapshot()` returns a histogram of the
// last 60 to 70 seconds. These additional 0 to 10 seconds make sure that the
// rolling window can provide a fresh histogram without losing any records at
// any given time.
const rollingWindowHistogram = new RollingWindowHistogram({
  timeWindow: 1000 * 60,
  numChunks: 6,
});

// Record a value
rollingWindowHistogram.recordValue(value);

// Get a snapshot
const snapshot = rollingWindowHistogram.getSnapshot();
const p99 = snapshot.getValueAtPercentile(99);
```

## API

### new RollingWindowHistogram([options])

- `options`
  - `timeWindow: number` The length of a time window in milliseconds. **Default: `60000`**
  - `numChunks: number` The number of chunks in the time window. **Default: `6`**
  - `buildHistogram: () => Histogram` A factory function to create a histogram. This will be called multiple times to prepare necessary histograms in the rolling window. Use this to provide custom options to histograms. **Default: `build` from `hdr-histogram-js`**

Creates a rolling window histogram with `numChunks + 1` histograms in it and starts rotating chunks with an interval of `timeWindow / numChunks`.

### rollingWindowHistogram.stop()

Stop the rotation timer. When you stop using a rolling window histogram, make sure to call this method to avoid memory leak.

### rollingWindowHistogram.recordValue(value)

- `value: number` A numerical value to record. It must not be negative.

### rollingWindowHistogram.getSnapshot([snapshot])

- `snapshot: Histogram` A histogram to accumulate histograms. It is reset before accumulating histograms. If this is not provided, a `Histogram` is created and kept for reuse.
- Returns: `Histogram`