open-index/open-npm huggingface dataset:
npm package: @mkczarkowski/design-tokens
Description: Design tokens collection for Przeprogramowani Design System
Latest version: 2.1.1

# @przeprogramowani/design-tokens

Design Tokens are the smallest pieces of the design system — such as colors, typography, spacing, and more. They are used in place of hard-coded values to maintain a scalable and consistent visual system for UI development.

## Installation

```bash
npm install @przeprogramowani/design-tokens
```

## Usage

We provide tokens in three formats: CSS, JS and TS. You can import them in your project as needed.

### CSS

To use the CSS Custom Properties from our package, add the following import to the main CSS file or to the `<head>` of your HTML page:

```css
@import 'path_to_node_modules/@przeprogramowani/design-tokens/dist/css/tokens.css';
```

Or in JavaScript, if you use a bundler that supports CSS imports:

```js
import '@przeprogramowani/design-tokens/dist/css/tokens.css';
```

### JS/TS

```js
import { ButtonTextColor } from '@przeprogramowani/design-tokens';
```
npm package: @mkdesilva/iconoir-react-native
Description: React Native library for Iconoir, the biggest open source icon library with tons of free icons.
Latest version: 7.12.0

# Iconoir - React Native

[![NPM Version](https://img.shields.io/npm/v/iconoir-react?style=flat-square)](https://www.npmjs.com/package/iconoir-react-native)
[![NPM Monthly Downloads](https://img.shields.io/npm/dm/iconoir-react-native?style=flat-square)](https://www.npmjs.com/package/iconoir-react-native)
[![NPM License](https://img.shields.io/npm/l/iconoir-react-native?style=flat-square)](https://github.com/iconoir-icons/iconoir/blob/main/packages/iconoir-react-native/LICENSE)

[Iconoir](https://iconoir.com/) is an open-source library with 1300+ unique SVG icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters.

`iconoir-react-native` is an open source package that exports these icons as React Native components (`react-native-svg`) that can be used in all of your React Native projects.

## Installation

| npm                                           | Yarn                                             |
| --------------------------------------------- | ------------------------------------------------ |
| `npm i iconoir-react-native react-native-svg` | `yarn add iconoir-react-native react-native-svg` |

## Usage

```javascript
import { Iconoir } from 'iconoir-react-native';
import React from 'react';
import { View } from 'react-native';

function App() {
  return (
    <View>
      <Iconoir />
    </View>
  );
}

export default App;
```

Icons can take any `react-native-svg` properties as optional props, e.g.

```javascript
<Iconoir color="red" height={36} width={36} />;
```

Default values for the most common props are given below:

| Prop name   | Default value  |
| ----------- | -------------- |
| color       | "currentColor" |
| width       | "1.5em"        |
| height      | "1.5em"        |
| strokeWidth | 1.5            |
| fill        | "none"         |

## IconoirProvider

Tired of specifying the same props for every single icon, every time you use them? So were we. Use IconoirProvider to set the default icon props for everything inside IconoirProvider.

```tsx
import { Check, IconoirProvider } from 'iconoir-react-native';

return (
  <IconoirProvider
    iconProps={{
      color: '#AAAAAA',
      strokeWidth: 1,
      width: '1em',
      height: '1em',
    }}
  >
    <SomeOtherContainer>
      <Check />
    </SomeOtherContainer>
  </IconoirProvider>
);
```

## Icon Names

The React components are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg`).
npm package: @mkdevelop/reactnewwindow
Description: 🔲 Pop a new window in React, using window.open
Author: Rubens Mariuzzo
Latest version: 0.1.5

[![React New Window - Pop new windows in React, using window.open API.](.github/banner.svg)](#features)

> Inspired by [David Gilbertson's article](https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202).

</div>

## Features

 - **Only 2.68KB** (gzipped!).
 - **Support the full `window.open` api**.
 - **Built for React 16** (uses `ReactDOM.createPortal`).
 - **Handler for blocked popups** (via `onBlock` prop).
 - **Center popups** according to the parent _window_ or _screen_.

## Installation

```sh
npm i react-new-window --save
```

## Usage

```js
import React from 'react'
import NewWindow from 'react-new-window'

const Demo = () => (
  <NewWindow>
    <h1>Hi 👋</h1>
  </NewWindow>
)
```

When **`<NewWindow />`** is mounted a popup window will be opened. When unmounted then the popup will be closed.

The `children` contents is what will be rendered into the new popup window. In that case `Hi 👋` will be the content. The content can include any react-stateful code.

## Documentation

 | Properties | Type       | Default       | Description |
 | ---        | ---        | ---           | ---         |
 | `url`      | `String`   | ` `           | The URL to open, if specified any `children` will be overriden ([more details on `url`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open)). |
 | `name`     | `String`   | ` `           | The name of the window ([more details on `windowName`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open)). |
 | `title`    | `String`   | ` `           | The title of the new window document. |
 | `features` | `Object`   | `{}`          | The set of window features ([more details on `windowFeatures`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features)). |
 | `onUnload` | `Function` | `undefined`   | A function to be triggered before the new window unload. |
 | `onBlock`  | `Function` | `undefined`   | A function to be triggered when the new window could not be opened. |
 | `center`   | `String`   | `parent`      | Indicate how to center the new window. Valid values are: `parent` or `screen`. `parent` will center the new window according to its _parent_ window. `screen` will center the new window according to the _screen_. |
 | `copyStyles`  | `Boolean` | `true`   | If specified, copy styles from parent window's document. |

## Tests

Tests are manually done using Storybook. It can be run locally with: `yarn storybook`.

## Development

To start contributing to this project, please do:

 1. Fork and clone this repo.
 2. Do your work.
 3. Create a PR.

## Releases

```sh
npm run release
```

### Prior work

 - [react-popout](https://github.com/JakeGinnivan/react-popout).

---

 <div align=center>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

 </div>
npm package: @mkdierz/json-compressor
Description: A module for compressing and decompressing JSON data using Gzip compression algorithm and HPack compression algorithm.
Author: Syibbran Mulaesyi
Latest version: 1.1.1

# json-compressor

A module for compressing and decompressing JSON data using Gzip compression algorithm and HPack compression algorithm.

## Installation

Use the package manager [npm](http://npmjs.org/) to install json-pack-gzip.

```bash
npm install @mkdierz/json-compressor
```
## Usage

```javascript
const jsonPackGzip = require('json-compressor');

// Compress JSON data
const compressedData = jsonPackGzip.compress(jsonObject);

// Decompress JSON data
const decompressedData = jsonPackGzip.decompress(jsonBuffer);

// Calculate byte length of data
const byteLength = jsonPackGzip.calculateSize(data);
```

## API

### ```compress(jsonObject, debug = false)```

Compresses a JSON object using Gzip compression algorithm. The input JSON object is first packed into a homogeneous array and then stringified before compression.

- ```jsonObject```(Array): The JSON object to be compressed.
- ```debug```(Boolean): options for debugging, defaults to false.

Returns a compressed data as a Buffer object.

### ```decompress(jsonBuffer, debug = false)```
Decompresses a Buffer object to a JSON object using Gzip decompression algorithm. The decompressed data is first parsed from a homogeneous array into a list of objects.

- ```jsonBuffer``` (Buffer): The Buffer object to be decompressed.
- ```debug```(Boolean): options for debugging, defaults to false.

Returns a decompressed and unpacked JSON object as a list of objects.

### ```calculateSize(data)```
Calculates the byte length of the input data. It supports data types: String, Buffer, Array, and Object. For non-buffer objects, the function first stringifies them before calculating the size.

- ```data``` (String|Buffer|Object|Array): The data to be size-calculated.

Returns the byte length of the input data.

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

This module is licensed under the [MIT](https://choosealicense.com/licenses/mit/) License
npm package: @mkdigo/time-picker
Description: Time Picker React Component
Author: Rodrigo Mukudai
Latest version: 1.0.1

# Time Picker React Component

![alt text](https://github.com/mkdigo/time-picker/blob/main/example.png?raw=true)

## How to install

```
npm install @mkdigo/time-picker
```

## How to use

In your **App.tsx** file, wrap your components with the TimePickerContextProvider:

```
import { TimePickerContextProvider } from '@mkdigo/time-picker';

import { Home } from './Home';

function App() {
  return (
    <TimePickerContextProvider>
      <HomePage />
    </TimePickerContextProvider>
  );
}

export default App;
```

The TimePicker component works like a modal, than you can put it in anywhere. To open the TimePicker, use the handleOpenTimePicker function that you can get it on useTimePickerContext hook. The handleOpenTimePicker recive a name paramater and it should be equal than name that you give to TimePicker's attribute.

```
import { useState } from 'react';
import { TimePicker, useTimePickerContext } from '@mkdigo/time-picker';

export function Home() {
  const { handleOpenTimePicker } = useTimePickerContext();
  const [currentTime, setCurrentTime] = useState('10:45');

  function handleChange(time: string): void {
    setCurrentTime(time);
  }

  return (
    <main>
      <input
        type='time'
        value={currentTime}
        onChange={(e) => setCurrentTime(e.target.value)}
      />
      <button
        type='button'
        onClick={() => handleOpenTimePicker('timeInput')}
      >
        Time Picker
      </button>
      <TimePicker
        currentTime={currentTime}
        name='timeInput'
        onChange={handleChange}
      />
    </main>
  );
}
```

### Repository

[https://github.com/mkdigo/time-picker](https://github.com/mkdigo/time-picker)