open-index/open-npm huggingface dataset:
npm package: @jariikonen/zustand-rhf-sync
Description: Syncs the state of react-hook-form and zustand so that changes in one is updated in the other
Author: lenwhite
Latest version: 0.0.12

## zustand-rhf-sync

Syncs zustand's store state with the form state in [react-hook-forms](react-hook-form.com).

This allows form updates to immediately reflect in your store and allows the components that subscribe to your store to update based on form updates.

Convenient if you want to use your store functions or selectors with form data.

## Install

```bash
npm install -save @jariikonen/zustand-rhf-sync
```

## Usage

```typescript
import { useFormWithStore } from "@jariikonen/zustand-rhf-sync";

// use it just like useForm
// where default value is automatically populated from your store
const { register } = useFormWithStore(
  useBoundStore,
  (formData) => useBoundStore.setState({ form: formData }),
  (state) => state.formData,
  useFormOptions,
);
```

## A couple of things to note

For the fieldArray values to be correctly synced there are a couple of things to note. First, `useFieldArray()`'s `shouldUnregister` parameter must be set to `false` (which is the default value). Second, do not use browser's reset functionality by setting the reset button (or input) type as `'reset'`. This messes RHF's state. The correct way to clear the form is to use the `reset()` function from RHF's `useForm()` or by setting the values in zustand to default values.

## Debug logging

It is possible to make a "development" build of the hook that includes some console.log statements to make debugging easier. This can be done by running the npm script `build-with-debug-printing`:

```
npm run build-with-debug-printing
```

Or by setting the local environment variable NODE_ENV as `'develop'`:

```
NODE_ENV=develop npm run build
```

It is also possible to set environment variables for the build as arguments to tsup, which will override variables in the local environment:

```
npm run build -- --env.NODE_ENV 'develop'
```

Debug printing can then be turned on in the browser DevTools by setting item `debug` in localStorage true:

```
localStorage.setItem('debug', true)
```
npm package: @jarijokinen/animate
Description: A zero-dependency, vanilla JavaScript library for animating elements when they appear in the viewport.
Author: Jari Jokinen
Latest version: 0.0.2

# animate

A zero-dependency, vanilla JavaScript library for animating elements when they
appear in the viewport.

## Installation

NPM:

    npm install @jarijokinen/animate

Yarn:

    yarn add @jarijokinen/animate

## Usage

    import { animate } from '@jarijokinen/animate';

    document.addEventListener('DOMContentLoaded', () => {
      animate();
    });

## Configuration

    const options = {
      elements: document.querySelectorAll('.animate'),
      class: 'fade-in-up',
      root: null,
      rootMargin: '0px',
      threshold: 0.0
    };

    animate(options);

## CSS animation class example

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translate3d(0, 80px, 0); 
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0); 
      }
    }
    .fade-in-up {
      animation: fadeInUp 500ms ease-in-out;
      animation-fill-mode: both;
    }

## License

MIT License. Copyright (c) 2022 [Jari Jokinen](https://jarijokinen.com).  See
[LICENSE](https://github.com/jarijokinen/animate/blob/main/LICENSE.txt)
for further details.
npm package: @jarijokinen/consent
Description: A zero-dependency, vanilla JavaScript consent manager with native Google Consent Mode v2 support.
Author: Jari Jokinen
Latest version: 0.0.7

# consent

A zero-dependency, vanilla JavaScript consent manager with native Google
Consent Mode v2 support.

## Installation

NPM:

    npm install @jarijokinen/consent

## Usage

Load the consent-loader.js in the HEAD section deferred before any GTM tags.

    <head>
      <script src="path/to/consent-loader.js" defer></script>
      <script>
        // GTM and any other scripts
      </script>
    </head>

Import consent from the npm package and initialize it later on the page.

    import { consent } from '@jarijokinen/consent';

    document.addEventListener('DOMContentLoaded', () => {
      consent();
    });

Add link that opens the dialog:

    <a href="#" class="consent-settings">Cookie Settings</a>

## Configuration

Customize configuration options by passing some or all of them as a first
argument to the consent() function.

    const options = {
      storages: {
        analytics_storage: 'Analytics',
        ad_storage: 'Marketing'
      },
      actions: {
        denyAll: 'Deny All',
        allowSelected: 'Allow Selected',
        allowAll: 'Allow All'
      },
      dialogMarkup: `
        <h2 class="consent-title"></h2>
        <div class="consent-message"></div>
        <div class="consent-fields"></div>
        <div class="consent-buttons"></div>
      `,
      dialogClass: 'consent',
      dialogTitle: 'Cookie Consent',
      dialogMessage: 'This website uses cookies for:',
      settingsLinkSelector: '.consent-settings'
    };

    consent(options);

## License

MIT License. Copyright (c) 2022 - 2025 [Jari Jokinen](https://jarijokinen.com).
See [LICENSE](https://github.com/jarijokinen/consent/blob/main/LICENSE.txt)
for further details.
npm package: @jarijokinen/counter
Description: A zero-dependency, vanilla JavaScript library for creating counter animations.
Author: Jari Jokinen
Latest version: 0.0.2

# counter

A zero-dependency, vanilla JavaScript library for creating counter animations.

## Installation

NPM:

    npm install @jarijokinen/counter --save

Yarn:

    yarn add @jarijokinen/counter

## Usage

    import { counter } from '@jarijokinen/counter';

    document.addEventListener('DOMContentLoaded', () => {
      counter();
    });

HTML:

    <span data-counter="20">20</span>

## Configuration

    const options = {
      elements: document.querySelectorAll('[data-counter]'),
      delay: 500,
      speed: 30
    };

    counter(options);

## License

MIT License. Copyright (c) 2022 [Jari Jokinen](https://jarijokinen.com).  See
[LICENSE](https://github.com/jarijokinen/counter/blob/main/LICENSE.txt)
for further details.
npm package: @jarijokinen/parallax
Description: A zero-dependency, vanilla JavaScript library for creating parallax scrolling effects.
Author: Jari Jokinen
Latest version: 0.0.1

# parallax

A zero-dependency, vanilla JavaScript library for creating parallax scrolling
effects.

## Installation

NPM:

    npm install @jarijokinen/parallax --save

Yarn:

    yarn add @jarijokinen/parallax

## Usage

    import { parallax } from '@jarijokinen/parallax';

    document.addEventListener('DOMContentLoaded', () => {
      parallax();
    });

## Configuration

    const options = {
      elements: document.querySelectorAll('.parallax'),
      speed: 0.3,
      throttleInterval: 30
    };

    parallax(options);

## License

MIT License. Copyright (c) 2022 [Jari Jokinen](https://jarijokinen.com).  See
[LICENSE](https://github.com/jarijokinen/parallax/blob/main/LICENSE.txt)
for further details.
npm package: @jarijokinen/scrolldirection
Description: A zero-dependency, vanilla JavaScript library for detecting scroll direction.
Author: Jari Jokinen
Latest version: 0.0.3

# scrolldirection

A zero-dependency, vanilla JavaScript library for detecting scroll direction.

## Features

* Throttling for optimized performance
* Handling of mobile browser overscroll effects

## Installation

NPM:

    npm install @jarijokinen/scrolldirection --save

Yarn:

    yarn add @jarijokinen/scrolldirection

## Usage

    import { scrolldirection } from '@jarijokinen/scrolldirection';

    document.addEventListener('DOMContentLoaded', () => {
      scrolldirection();
    });

## Configuration

    const options = {
      dataElement: document.querySelector('html'), // element for data attribute
      dataAttribute: 'data-scroll-direction',      // data attribute name
      dataValueUp: 'up',                           // attribute value for up
      dataValueDown: 'down',                       // attribute value for down
      dataUpdateInterval: 250,                     // attribute update interval
      throttleInterval: 250                        // throttle interval
    };

    scrolldirection(options);

## Example

Hiding a navigation bar with CSS when scrolling down:

    html[data-scroll-direction='down'] .navbar {
      display: none;
    }

## License

MIT License. Copyright (c) 2022 [Jari Jokinen](https://jarijokinen.com).  See
[LICENSE](https://github.com/jarijokinen/scrolldirection/blob/main/LICENSE.txt)
for further details.
npm package: @jarios71/twa-md2-dialogs
Description: Angular 2 app dialogs
Author: Jose Antonio Ríos
Latest version: 0.0.10
Deprecated: this package has been deprecated

# @jarios71/twa-md2-dialogs

[![Build Status][travis-image]][travis-url]

[travis-url]: https://travis-ci.org/Asymmetrik/ngx-template/
[travis-image]: https://travis-ci.org/Asymmetrik/ngx-template.svg


> Template project for an Angular 2+ Component.
> Provides a template project structure, Gulp build, and Webpack dev server configuration for packaging an Angular 2 component and for running a local demo of that component. 

## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [Structure](#structure)
- [Contribute](#contribute)
- [License](#license)

## Install

To get started, ensure that Node and NPM are installed.
* Node and NPM (https://nodejs.org)

Use npm to install the service:
```
npm install git+https://<github-token>:x-oauth-basic@github.com/jarios71/twa-md2-dialogs.git
npm install https://@github.com/jarios71/twa-md2-dialogs.git
```

At this point, you should be ready to use the service.


## Usage
This project uses Gulp as a build framework. There are two primary tasks: build and dev, which build distribution artifacts and run the development server respecitvely. 

## License
See LICENSE in repository for details.
npm package: @jariz/react-split-text
Description: ![Demo](demo.gif)
Author: CyriacBr
Latest version: 1.0.0

![Demo](demo.gif)

![CI](https://github.com/CyriacBr/react-split-text/workflows/CI/badge.svg)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@cyriacbr/react-split-text)

[Documentation](https://cyriacbr.github.io/react-split-text/)

This component lets you split your text, and wrap each line, word or letter with a custom element.
The lines and words are correctly split according to how they fit in the layout.
The component doesn't change that behavior, it just analyses the text and wrap each line, word and letter in a custom element.
This lib is useful when trying to make text animations or special effects with texts.

## Features

* Zero-dependency 1.44 KB minified and gzipped
* Wrap your letters, words or lines with custom elements
* Respect and keep your layout integrity
* Readjust on resize
* Support dynamic text

## Installation

```bash
npm i @cyriacbr/react-split-text
# or
yarn add @cyriacbr/react-split-text
```

## Usage

To use this library, simply wrap your text with the `SplitText` component.
The text will automatically be wrapped, by default with `span` elements, and will be readjusted on resize.

```jsx
<SplitText>
  Hello World
</SplitText>
```

Everything else is covered in the [documentation](https://cyriacbr.github.io/react-split-text/).
npm package: @jarlotee/generator-node-project
Description: A yeoman generator for node projects, or sites that use node to build assets
Author: Jarlotee
Latest version: 0.1.1

## Node Project Generator
[![Build Status](https://travis-ci.org/Jarlotee/generator-node-project.svg?branch=master)](https://travis-ci.org/Jarlotee/generator-node-project)
![Dependency Status](https://david-dm.org/Jarlotee/generator-node-project.svg)

Helps you bootstrap your respository for a next.js projects.

### Getting Started

* Install `npm install -g @jarlotee/generator-node-project`
* Run `yo node-project`

### Options
```bash
Node... so many options, frameworks, always changing, lets tame the beast...
 What is the name of your project? next-project
 What kind of project would you like to create? next.js
 You definitly want unit tests, right? Yes
 How about an .editorconfig? Yes
 Would you like to supress package-lock generation? Yes
```

### What you get

```bash
├── .editorconfig
├── .gitignore
├── .npmrc
├── .prettierrc
├── package.json
├── readme.md
├── src
│   ├── next.config.js
│   ├── pages
│   │   ├── _app.tsx
│   │   └── index.tsx
│   ├── server.js
│   └── tsconfig.json
└── tslint.json
```

## Opinions

Options may be added later, but here is they are:

* Typescript w/ tslint
* Prettier
* Populate the `BuildNumber` environment variable to create a consistent hash for load balancing

## License
MIT
npm package: @jarmee/schematics
Description: A collection of schematics
Author: jarmee
Latest version: 2.0.4

# @jarmee/schematics

This package provides several schematics to make the life of an Angular developer easier. If applied it will provide you the following benefits:

- _adds Jest support to your Angular workspace_

## Usage

To apply this package to an already existing Angular workspace you only have to execute `ng add @jarmee/schematics` and you're good to go. During the installation process of the schematics it will carry out the steps stated below:

1. The schematics will add `test:jest` and `test:jest:watch` scripts to your `package.json` to run `jest`. Followed by the addition of `jest`, `jest-preset-angular` and `@types/jest` to the `devDependecies` of your `package.json`. To complete this step a `npm install` is executed.
2. It will update the `tsconfig.spec.json` in your root directory and adds `jest` to the `types` array of your `compilerOptions`. Also the porperty `esModuleInterop` will be added and set to `true`.
3. To prevent inconveniences the schematic will remove the `src/test.ts` file from your workspace.
4. Finally it will add the files `jest.config.js`, `jestGlobalMocks.ts` and `setup-jest.ts` to the root of your Angular workspace.

After the configuration process has been finished you can run `npm run test:jest` or `yarn test:jest` to test your Angular workspace with `jest`.

## License

This project is licensed under the MIT License
npm package: @jarmentor/archey-js
Description: console banner message heavily inspired by obihann/archey-osx and written in JS
Author: Jonathan Armentor
Latest version: 1.1.2

# @jarmentor/Archey-JS

Start your workflow right.

An [archey](https://github.com/djmelik/archey) CLI for macOS written in Javascript.

![archey-js](https://i.postimg.cc/433k5YPS/render1617176968661.gif)

## Table Of Contents

- [@jarmentor/Archey-JS](#jarmentorarchey-js)
  - [Table Of Contents](#table-of-contents)
  - [Installation](#installation)
  - [Updating](#updating)
  - [Roadmap](#roadmap)
    - [Documentation](#documentation)
    - [Functionality](#functionality)
    - [Datapoints](#datapoints)
    - [Publishing](#publishing)
    - [Ideas](#ideas)
  - [Credits](#credits)
  - [License](#license)

## Installation

```bash
npm i -g @jarmentor/archey-js
archey-js
```

## Updating

```bash
npm update -g @jarmentor/archey-js
```

## Roadmap

### Documentation

-   [x] Help
-   [x] Readme
    -   [x] Options Documentation
    -   [x] Download Instructions
    -   [x] Install instructions
    -   [x] Usage instructions
-   [ ] Code
    -   [ ] Comments

### Functionality

-   [ ] Options
    -   [x] Help
    -   [x] Color
    -   [ ] No-Color
    -   [x] IP Address - [x] IP Address Local - [ ] IP Address Interface specific - [ ] IP Address External
        -   [ ] Router
-   [ ] Custom Logo

### Datapoints

-   [x] User
-   [x] Hostname
-   [x] Distro
-   [x] Kernel
-   [x] Uptime
-   [x] Shell
-   [x] Terminal Application
-   [x] CPU
-   [x] Memory
-   [x] Disk
-   [x] IP Address

### Publishing

-   [x] Publish to NPM

### Ideas

-   [ ] All available datapoints can be toggled by the user

## Credits

-   [djmelik](https://github.com/djmelik/archey) - Archey
-   [obihann](https://github.com/obihann/archey-osx/) - Archey Clone

## License

This tool is protected by the [MIT License](./LICENSE).
npm package: @jarmentor/title-cli
Description: A command-line interface for converting strings to APA compliant title case
Author: Jonathan Armentor
Latest version: 1.0.0

# APA Title-CLI

Convert a string or file of strings to APA style title case.

## Installation

```bash
  npm install @jarmentor/title-cli
```

## Usage

### Via NPX

```bash
  npx @jarmentor/title-cli <string OR file> [options]
```

### After installation

```bash
  title-cli <string> [options]
```

## Credits

-   [words/ap-style-title-case](https://github.com/words/ap-style-title-case) for providing the backbone of this CLI