open-index/open-npm huggingface dataset:
npm package: @fitzy/jsql
Description: A utility to allow using SQL statements on js arrays of objects
Author: Andrew Fitzgerald
Latest version: 1.0.1

# jSQL
This is a small utility to enable using SQL style queries on JavaScript arrays of objects. 
Essentially it boils down to doing a reduce and a sort, but it means you don't have to set them up each time and think about it.

### Install
```
$ npm i @fitzy/jsql
```

### Usage
```
import  *  as  jsql  from  '@fitzy/jsql';

jsql.select('SELECT * FROM myData', { myData: [{a: 1, b: 'foo'}, {a: 4, b: 'bar'}, ...], relatedData: [] });
```

The data is passed in as an array to:
a) allow putting the key in the select statement, and
b) allow me to expand this to have joins later

### Supported Syntax
* SELECT
* FROM
* WHERE (=, <=, >=, <, >, <>, like, in, between)
* ORDER BY

### Yet to Implement
* GROUP BY
* HAVING
* Aggregate functions (avg, count, etc)
* Dates
* Aliasing (i.e. AS)
npm package: @fitzy/shitineed
Description: A collection of things that I find useful for work as a full stack dev. Manipulating time and strings, selecting colours, all sorts of things really
Author: Andrew Fitzgerald
Latest version: 1.0.1

# :shit: I Need
This package is a combination of things that I find useful to have, borne out of copying a function or two here and there from one project to another. It's still a work in progress, but I will continue to add to it as I can and need, please feel free to suggest additions that you would like to see.

The package is broken up into a series of classes that are targeted towards being a group of related functions. Currently there are:

1. API - for things useful when working with APIs, like encoding JSON to URL encoded
2. Colours - converting hex, rgb, hsl, and generating shades of a colour (via hsl)
3. d3 - a big TODO pile, meant to be to do a few repetative taskss like generating bar chart etc
4. DOM - manipulation of the DOM
5. Financial - working out compound interest, loan payments, etc
6. Functions (fn) - handy things like to run a function once only and not permit again
7. Logging - a basic log messages with timestamp to a file
8. Maths - sums, averages, degrees and radians, rands that kinda thing
9. Node - things that can be handy working in node.js
10. Other - things that haven't found their own class yet (deep copy, equality check of objects and arrays, copy to clipboard from DOM)
11. Sort - the beginnings of different sort algorithms
12. Stats - mean, median, mode, standard deviation
13. Strings - change case (title, camel, pascal), truncate sentences to a limit with or without ellipsis
14. SVG - create arcs and wedges with polar coords
15. Time - add and subtract days from a date, calculate time between dates, days in a month, long day or month name

There are still a number of things that are incomplete (like sort) but already some useful pieces here. I regularly use the time stuff in particular.

### Install
$ npm i @fitzy/shitineed
### Usage
```
import  *  as  sin  from  '@fitzy/shitineed';

sin.time.localToUtc(some date object);
```
npm package: @fitzy/stuffineed
Description: A collection of things that I find useful for work as a full stack dev. Manipulating time and strings, selecting colours, all sorts of things really
Author: Andrew Fitzgerald
Latest version: 1.2.2

# Stuff I Need
This package is a combination of things that I find useful to have, borne out of copying a function or two here and there from one project to another. It's still a work in progress, but I will continue to add to it as I can and need, please feel free to suggest additions that you would like to see.

The package is broken up into a series of classes that are targeted towards being a group of related functions. Currently there are:

1. API - for things useful when working with APIs, like encoding JSON to URL encoded
2. Colours - converting hex, rgb, hsl, and generating shades of a colour (via hsl)
3. DOM - manipulation of the DOM
4. Financial - working out compound interest, loan payments, etc
5. Functions (fn) - handy things like to run a function once only and not permit again
6. Logging - a basic log messages with timestamp to a file
7. Maths - sums, averages, degrees and radians, rands that kinda thing
8. Node - things that can be handy working in node.js
9. Other - things that haven't found their own class yet (deep copy, equality check of objects and arrays, copy to clipboard from DOM)
10. Sort - the beginnings of different sort algorithms
11. Stats - mean, median, mode, standard deviation
12. Strings - change case (title, camel, pascal), truncate sentences to a limit with or without ellipsis
13. SVG - create arcs and wedges with polar coords
14. Time - add and subtract days from a date, calculate time between dates, days in a month, long day or month name

There are still a number of things that are incomplete (like sort) but already some useful pieces here. I regularly use the time stuff in particular.

### Install
$ npm i @fitzy/stuffineed
### Usage
```
import  *  as  sin  from  '@fitzy/stuffineed';

sin.time.localToUtc(some date object);
```
### Tests
npm run test
npm package: @fiug/handlebars-esm
Description: es module port of handlebars ++
Author: David Morrow, Harrison Cross
Latest version: 4.7.7-4

# @fiug/handlebars-esm
a port of Handlebars to esm compatable module


## Usage

in browser
```handlebars
{{!-- template.hbs --}}
<div>
  foo = "{{foo}}"
</div>
```

```javascript
// module.mjs
import handlebars from "https://unpkg.com/@fiug/handlebars-esm";

const template = await handlebars.compile({
  path: new URL(import.meta.url).href + '/../template.hbs'
});

const templateVars = {
  foo: "bar"
};

document.body.innerHTML = template(templateVars);

```

in node

```
npm i @fiug/handlebars-esm --save
```

```javascript
import Handlebars from "@fiug/handlebars-esm";

const template = handlebars.compile(`
<div>
  foo = "{{foo}}"
</div>
`);

const templateVars = {
  foo: "bar"
};

console.log(template(templateVars));
```
npm package: @fiug/layout
Description: page layout for browser applications
Author: Harrison Cross
Latest version: 0.1.0

# @fiug/layout

[![NPM version](https://img.shields.io/npm/v/@fiug/layout)](https://www.npmjs.com/package/@fiug/layout)
[![License](https://img.shields.io/github/license/fiugd/layout)](https://github.com/fiugd/layout/blob/main/LICENSE)

page layout for browser applications


## Usage

in browser
```javascript
import Layout from "https://unpkg.com/@fiug/layout";

const layoutConfig = {
  parent: document.body
};
new Layout(layoutConfig);
```
see <a href="./test/index.html">test/index.html</a> for a more involved example

## Summary
This layout system uses css grid to position elements.   
It is written from scratch to be simple, flexible, and dependency-free.
npm package: @fivano/print-capacitor
Description: Print the webview
Author: Fivano
Latest version: 0.0.3

# capacitor-print

Print the webview

## Install

```bash
npm install capacitor-print
npx cap sync
```

## API

<docgen-index>

* [`print()`](#print)

</docgen-index>

<docgen-api>
<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->

### print()

```typescript
print() => Promise<void>
```

--------------------

</docgen-api>
npm package: @five-vm/cli
Description: High-performance CLI for Five VM development with WebAssembly integration
Author: Five VM Team
Latest version: 1.2.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Five CLI (v1.2.2)

Ultra-fast CLI for the Five VM with local WASM execution, bytecode compilation, deployment, testing, and a growing library of ready-to-use templates.

## Install / Build

- Local build (from repo):
  - `cd five-cli && npm install && npm run build`
  - Run locally: `node dist/index.js help`
- Global link (optional):
  - `cd five-cli && npm link`
  - Then use `five` from your shell

## Core Commands

- Compile: `five compile src/contract.v -o build/contract.bin`
- Local WASM execute: `five execute build/contract.bin --local`
- Deploy (mainnet): `five deploy build/contract.bin --target mainnet`
- Execute on-chain: `five execute --script-account <ACCOUNT_ID> -f 0 --target mainnet`
- Donate: `five donate 1 --network mainnet` (or testnets)

## Templates

Generate starter contracts in Five DSL.

- Types: `vault`, `escrow`, `amm`, `token`, `nft`, `nft-globals`, `multisig`, `vesting`, `auction-english`, `staking`, `airdrop-merkle`, `system-lamports`, `interface`, `spl-token`.

### Quickstart (Token)

```
five template --type token -o templates
five compile templates/token.v -o build/token.bin
five execute build/token.bin --local  # Local WASM execution
# Deploy (mainnet)
five deploy build/token.bin --target mainnet
five execute --script-account <ACCOUNT_ID> -f 0 --target mainnet
```

### Quickstart (AMM)

```
five template --type amm -o templates
five compile templates/amm.v -o build/amm.bin
five execute build/amm.bin --local
```

### Quickstart (NFT)

```
five template --type nft -o templates
five compile templates/nft.v -o build/nft.bin
five execute build/nft.bin --local
```

## Notes

- Inline template fallbacks in the CLI are synced with file templates and compile cleanly.
- Local WASM runs stop at system calls; use on-chain execution for CPI/system-program paths.
- Mainnet deployment requires a funded keypair and RPC endpoint.

## Support

- Donate: `five donate <amount>`
- Issues: https://github.com/five-vm/five-cli/issues
npm package: @five-vm/sdk
Description: Client-agnostic TypeScript SDK for Five VM scripts on Solana
Author: Five VM Team
Latest version: 1.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @five-vm/sdk

Client-agnostic TypeScript SDK for Five VM scripts on Solana. Works with any Solana client library.

## Installation

```bash
npm install @five-vm/sdk
```

## Usage

```typescript
import { FiveSDK } from '@five-vm/sdk';

// Compile Five script
const compilation = await FiveSDK.compile(`
  script Calculator {
    add(a: u64, b: u64) -> u64 {
      return a + b;
    }
  }
`);
```

// Generate deployment instruction
const deploymentData = await FiveSDK.generateDeployInstruction(
  compilation.bytecode,
  'YourWalletPublicKey...'
);

// Generate execution instruction  
const executionData = await FiveSDK.generateExecuteInstruction(
  scriptAccount,
  'add',
  [10, 5]
);

// Execute locally (no blockchain)
const result = await FiveSDK.executeLocally(
  compilation.bytecode,
  'add',
  [10, 5]
);
```

## Client Integration

### With @solana/web3.js
```typescript
import { Transaction, TransactionInstruction, PublicKey } from '@solana/web3.js';

const instruction = new TransactionInstruction({
  programId: new PublicKey(executionData.instruction.programId),
  keys: executionData.instruction.accounts.map(acc => ({
    pubkey: new PublicKey(acc.pubkey),
    isSigner: acc.isSigner,
    isWritable: acc.isWritable
  })),
  data: Buffer.from(executionData.instruction.data, 'base64')
});
```

### With Anchor
```typescript
const signature = await program.methods
  .executeFiveScript(Buffer.from(executionData.instruction.data, 'base64'))
  .accounts({ script: executionData.scriptAccount })
  .rpc();
```

## API

### Main Methods
- `FiveSDK.compile(source, options?)` - Compile Five script to bytecode
- `FiveSDK.generateDeployInstruction(bytecode, deployer)` - Create deployment instruction
- `FiveSDK.generateExecuteInstruction(scriptAccount, function, params)` - Create execution instruction
- `FiveSDK.executeLocally(bytecode, function, params)` - Execute locally via WASM

### Types
```typescript
interface SerializedInstruction {
  programId: string;
  accounts: { pubkey: string; isSigner: boolean; isWritable: boolean }[];
  data: string; // base64
}
```

## Related

- **[@five-vm/cli](https://www.npmjs.com/package/@five-vm/cli)** - Command-line interface

## Links

- [GitHub](https://github.com/five-vm/five-cli/tree/main/src/sdk)
npm package: @fivedesigns/ngx-notifications
Description: Simple notification library for Angular
Author: Klaus Brandner
Latest version: 0.2.0

# Ngx Notifications

Simple, lightweight toast notifications for Angular.

## Features

- `info`, `success`, `warning`, and `error` notification methods
- Per-notification overrides (`color`, `animation`, `timeDisplayed`)
- Global defaults via `setOptions(...)`
- Queue limit with `maxNotificationsCount`
- Flexible positions (`top-*` and `bottom-*`)

## Installation

```bash
npm install @fivedesigns/ngx-notifications
```

## Quick Start

Inject `NgxNotificationService` anywhere (component, service) and call a method.

```ts
import { Component, inject } from '@angular/core';
import { NgxNotificationService } from '@fivedesigns/ngx-notifications';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  private readonly notificationService = inject(NgxNotificationService);

  save(): void {
    this.notificationService.success('Saved', 'Your changes were saved successfully.');
  }
}
```

The notification container is mounted automatically when the first notification is shown.

## Service API

Each method accepts:

- `title: string`
- `message: string`
- `options?: NgxNotificationOptions`

```ts
this.notificationService.info(title, message, options);
this.notificationService.success(title, message, options);
this.notificationService.warning(title, message, options);
this.notificationService.error(title, message, options);
```

## Per-Notification Options

```ts
import { NgxNotificationOptions } from '@fivedesigns/ngx-notifications';

const options: NgxNotificationOptions = {
  color: '#4f46e5',
  animation: 'fade', // 'bounce' | 'slide' | 'fade'
  timeDisplayed: 3000
};

this.notificationService.info('Heads up', 'Custom-styled notification', options);
```

## Global Configuration

Set defaults once with `setOptions(...)`. You can provide only the fields you want to override.

```ts
import { NgxGlobalNotificationsConfig } from '@fivedesigns/ngx-notifications';

const globalOptions: NgxGlobalNotificationsConfig = {
  position: 'top-center',
  maxNotificationsCount: 3,
  timeDisplayed: 4000,
  animation: 'slide', // 'bounce' | 'slide' | 'fade'
  colors: {
    info: '#6495ED',
    success: '#22c55e',
    warning: '#f59e0b',
    error: '#ef4444'
  }
};

this.notificationService.setOptions(globalOptions);
```

**Position**

Use `position` to choose where notifications appear on the screen.

Possible values are:
- `'top-left'`
- `'top-center'`
- `'top-right'`
- `'bottom-left'`
- `'bottom-center'`
- `'bottom-right'`

```typescript
this.notificationService.setOptions({
  position: 'top-right'
});
```

**Default Values**

- `position`: `bottom-left`
- `maxNotificationsCount`: `5`
- `timeDisplayed`: `6000`
- `animation`: `bounce`
- `colors`:
  - `info`: `rgb(50,173,230)`
  - `success`: `rgb(52,199,89)`
  - `warning`: `rgb(255,149,0)`
  - `error`: `rgb(255,59,48)`

## Donation

If you enjoy this package, you can [buy me a coffee](https://buymeacoffee.com/s9QBui6alO).
npm package: @fiveem/postgres-error-codes
Description: Postgres Error Codes
Author: Razvan Muntian
Latest version: 0.0.5

# Postgres Error Codes

Postgres error codes mapping for NodeJS.

## Install
```
npm i @fiveem/postgres-error-codes
```

## Usage

Each condition from the [PG documentation](https://www.postgresql.org/docs/9.2/errcodes-appendix.html) is available in the module. In order to obtain the status code use the prefixed uppercase condition name:

`unique_violation` => `PG_UNIQUE_VIOLATION`

`not_null_violation` => `PG_NOT_NULL_VIOLATION`

```javascript
const { PG_UNIQUE_VIOLATION, PG_NOT_NULL_VIOLATION } = require('postgres-error-codes')

async function createUserMethod(req, res, next) {
    try {
        // Run insert user SQL
    } catch (err) {
        // If user with same email already exists
        if (err.code === PG_UNIQUE_VIOLATION) {
            return next('Email already exists!')
        }

        // Param should not be null
        if (err.code === PG_NOT_NULL_VIOLATION) {
            return next('Email required!')
        }

        next(err)
    }
}
```

## Related
- [PostgreSQL Error Codes Documentation](https://www.postgresql.org/docs/9.2/errcodes-appendix.html)
npm package: @fiveem/react-autocomplete
Description: React Autocomplete
Author: Roxana Muntian
Latest version: 0.0.3

# React Autocomplete

[![npm (scoped)](https://img.shields.io/npm/v/@fiveem/react-autocomplete.svg)](https://www.npmjs.com/package/@fiveem/react-autocomplete)

React autocomplete that uses debounce.
In order to select a value from the autocomplete, the arrow up/down keys and mouse can be used.

## Screenshots

![React Autocomplete](./docs/captured.gif)


## Install

```
npm i @fiveem/react-autocomplete
```

## Usage

```JSX
import Autocomplete from '@fiveem/react-autocomplete'

<Autocomplete   suggestions={this.state.suggestiona}
                inputValue={this.state.inputValue}
                debounceTime={this.state.debounceTime}
                onChange={this.onChange}
                containerStyle={this.state.containerStyle}
                inputStyle={this.state.inputStyle}
                autocompleteStyle={this.state.autocompleteStyle}
                suggestionStyle={this.state.suggestionStyle}
                selectedSuggestionStyle={this.state.selectedSuggestionStyle}/>
```

## API
|name|type|sample value|description|
|----|----|------------|-----------|
|suggestions|Array|`['Romania', 'Spain', 'Italy', 'Georgia']`|Suggestions that will be displayed inside the autocomplete|
|inputValue|Number/String|`20/'Spain'`|The value that will be displayed inside the input)|
|debounceTime|Number|`1000`|When the user ends typing in the input, the onChange method will be called after debounceTime seconds (debounceTime should be specified in miliseconds). Default value is 500 ms.`|
|onChange|Function||Function that is called when the input value changes|
|containerStyle|Object||Style that will be applied on the container|
|inputStyle|Object||Style that will be applied on the input|
|autocompleteStyle|Object||Style that will be applied on the autocomplete container|
|suggestionStyle|Object||Style that will be applied on the suggestion (the list of items that is displayed inside the autocomplete container)|
|selectedSuggestionStyle|Object||Style that will be applied on the active/selected suggestion (on mouse hover or when the user uses the arrow up and arrow down keys)|

## License

react-autocomplete is released under the MIT license.
npm package: @fiveem/react-color-picker
Description: React Color Picker
Author: Razvan Muntian
Latest version: 0.0.4

# React Color Picker

[![npm (scoped)](https://img.shields.io/npm/v/@fiveem/react-color-picker.svg)](https://www.npmjs.com/package/@fiveem/react-color-picker)

## Screenshots

![React Color Picker](./docs/captured.gif)


## Install

```
npm i @fiveem/react-color-picker
```

## Usage

```JSX
import ColorPicker from '@fiveem/react-color-picker'

<ColorPicker    value={this.state.value}
                name={this.state.name}
                colors={this.colors}
                onChange={this.onChange} />
```

## API
|name|type|default value|description|
|----|----|-------------|-----------|
|value|String (Required)||Input value|
|name|String|`color`|Name of the input|
|colors|Array|[`#1abc9c`,`#16a085`,`#2ecc71`,`#27ae60`,`#4caf50`,`#8bc34a`,`#cddc39`,`#3498db`,`#2980b9`, `#34495e`,`#2c3e50`,`#2196f3`,`#03a9f4`,`#00bcd4`,`#009688`,`#e74c3c`,`#c0392b`,`#f44336`, `#e67e22`,`#d35400`,`#f39c12`,`#ff9800`,`#ff5722`,`#ffc107`,`#f1c40f`,`#ffeb3b`,`#9b59b6`, `#8e44ad`,`#9c27b0`,`#673ab7`,`#e91e63`,`#3f51b5`,`#795548`,`#9e9e9e`,`#607d8b`,`#333333`, `#7f8c8d`,`#95a5a6`,`#bdc3c7`,`#ecf0f1`,`#efefef`,`#fcfcfc`]|Colors that will be displayed in the color picker|
|onChange|Function (Required)||Function that is called when the input changes|

## License

react-color-picker is released under the MIT license.
npm package: @fiveem/react-crossfade-slider
Description: React Crossfade slider
Author: Roxana Muntian
Latest version: 0.0.2

# Crossfade Slider

[![npm (scoped)](https://img.shields.io/npm/v/@fiveem/react-crossfade-slider.svg)](https://www.npmjs.com/package/@fiveem/react-crossfade-slider)

## Screenshots

![React Crossfade Slider](./docs/captured.gif)


## Install

```
npm i @fiveem/react-crossfade-slider
```

## Usage

```JSX
import Slider from '@fiveem/react-crossfade-slider'

<Slider images={this.state.images} period={2000} animationDuration={1000} containerStyle={this.state.containerStyle} imageStyle={this.state.imageStyle} />
```

## API
|name|type|sample value|description|
|----|----|------------|-----------|
|images|Array|`['url_image1', 'url_image2', 'url_image3']`|Images that will be displayed inside the slider|
|period|Number|`2000`|Duration of auto play (should be specified in miliseconds)|
|animationDuration|Number|`1000`|Duration of slide animation/transition (should be specified in miliseconds)`|
|containerStyle|Object||Style that will be applied on the container (slider)|
|imageStyle|Object||Style that will be applied on the image (slide)|

## License

react-crossfade-slider is released under the MIT license.
npm package: @fiveem/react-music-player
Description: React Music Player
Author: Roxana Muntian
Latest version: 0.0.6

# React Music Player

[![npm (scoped)](https://img.shields.io/npm/v/@fiveem/react-music-player.svg)](https://www.npmjs.com/package/@fiveem/react-music-player)

Simple react music player.

## Screenshots

![React Music Player](./docs/captured.gif)


## Install

```
npm i @fiveem/react-music-player
```

## Usage

```JSX
import MusicPlayer from '@fiveem/react-music-player'

<MusicPlayer    playlist={this.state.playlist}
                playClicked={this.playClicked}
                pauseClicked={this.pauseClicked}
                previousClicked={this.previousClicked}
                nextClicked={this.nextClicked}
                backgroundColor={this.backgroundColor}
                activeButtonColor={this.activeButtonColor}
                inactiveButtonColor={this.inactiveButtonColor}
                buttonTextColor={this.buttonTextColor}
                textColor={this.textColor}
                activeTrackColor={this.activeTrackColor}
                progressBarColor={this.progressBarColor} />
```

## API
|name|type|default value|description|
|----|----|-------------|-----------|
|playlist|Array (Required)|[]|The playlist for the music player|
|playClicked|Function||Function that is called when the play button is clicked|
|pauseClicked|Function||Function that is called when the pause button is clicked|
|previousClicked|Function||Function that is called when the previous button is clicked|
|nextClicked|Function||Function that is called when the next button is clicked|
|backgroundColor|String|`#fcfcfc`|Background color of the music player|
|inactiveButtonColor|String|`#8a8a8a`|Color of the inactive buttons (the inactive button are the next and previous buttons)|
|buttonTextColor|String|`#000`|Color of the text/icon that is displayed on the buttons|
|textColor|String|`#000`|Color of the music player text|
|activeTrackColor|String|`#f0f0f0`|Highlight color of the active track|
|progressBarColor|String|`#111111`|Color of the progress bar|

### JSON

```
const playlist = [
    {
        name: 'One Last Time',
        author: 'South London HiFi',
        image: 'theImage',
        file: 'file_name.mp3'
    }, {
        name: 'Sunshine Samba',
        author: 'Chris Haugen',
        image: 'theImage',
        file: 'file_name.mp3'
    }, 
]
```

## License

react-music-player is released under the MIT license.
npm package: @fiveem/react-number-input
Description: React Number Input
Author: Razvan Muntian
Latest version: 0.0.4

# React Number Input

[![npm (scoped)](https://img.shields.io/npm/v/@fiveem/react-number-input.svg)](https://www.npmjs.com/package/@fiveem/react-number-input)

## Screenshots

![React Number Input](./docs/img1.png)

![React Number Input](./docs/img2.png)

## Install

```
npm i @fiveem/react-number-input
```

## Usage

```JSX
import NumberInput from '@fiveem/react-number-input'

<NumberInput name="value" min="0" max="20" value={this.state.value} onChange={this.onNumberInputChange} />
```

## API
|name|type|sample value|description|
|----|----|------------|-----------|
|value|String|`10px`|input value|
|units|Array|`['px', 'pt', 'cm']`|array of allowed units; default: `['px', 'pt', 'in', 'cm', 'mm']`|
|name|String|`number`|input label name; default value: `number`|
|onChange|Function||event triggered when value change|

## Models

### Event

```
{
    name: "number"
    value: "1px"
}
```

## License

react-number-input is released under the MIT license.
npm package: @fiveem/react-scroll-to-top
Description: React Scroll To Top
Author: Roxana Muntian
Latest version: 0.0.2

# React Scroll To Top

[![npm (scoped)](https://img.shields.io/npm/v/@fiveem/react-scroll-to-top.svg)](https://www.npmjs.com/package/@fiveem/react-scroll-to-top)

### The component scroll to top on route change

## Install

```
npm i @fiveem/react-scroll-to-top
```

## Usage

```JSX
import ScrollToTop from '@fiveem/react-scroll-to-top'

<Router>
    <ScrollToTop>
        <Switch>
            <Route exact path="/" component={FirstComponent}/>
            <Route exact path="/path" component={SecondComponent} />
        </Switch>
        <ModalSection />
    </ScrollToTop>
</Router>
```

The component must be rendered inside a Router element.
npm package: @fiveid/loopy
Description: Nested loops
Latest version: 0.0.1

# Loopy

Nested Loops.

## Example usage

With a single loop:

```js
const loop = new Loopy({
  iterations: 5,
  delay: 500,
  onLoop(i) {
    // do something on each iteration
    alert("Loop number: " + i);
  },
  onLoopEnd() {
    // do something when the loop has completed
    alert("All done!");
  }
});

loop.start();
```

With multiple nested loops:

```js
const loop = new Loopy([
  {
    iterations: 5,
    delay: 500,
    onLoop(i) {
      // Do something and then loop through sub-loops!
    },
    onLoopEnd() {
      // All finished!
    }
  },
  {
    iterations: 10,
    delay: 1000,
    onLoop(i) {
      // Do something
    },
    onLoopEnd() {
      // Sub-loop finished, resume looping through top loop!
    }
  }
]);

loop.start();
```
npm package: @fivelab/web-utils
Description: The helpers for easy manipulate with dom.
Latest version: 1.0.10

Web Utils
=========

Development
-----------

```shell
docker build -t web-utils .
docker run -it -v $(pwd):/code -p 5173:5173 web-utils bash
```

Build & Publish
---------------

```shell
npm version X.X.X --no-git-tag-version
npm publish
```
npm package: @fivem-shop/react
Description: Designer system (Components, colors, etc.)
Author: Felipeex
Latest version: 0.2.3

## Começar agora

```
npm install @fivem-shop/react
```

## Usar um componente

Aqui está um simples exemplo de uso basico do `button` componente.

```jsx
import { Button } from '@fivem-shop/react';

function App() {
  return <Button mode="primary">Hello World</Button>;
}
```

### Customizar CSS com stitches

```jsx
<Button
  ...
  css={{
    textDecoration: "none",
  }},
>
    Criar conta
</Button>
```

### Customizar CSS

```jsx
<Button
  ...
  style={{background: "red"}}
>
    Criar conta
</Button>
```

### Usando asChild (Criando Link)

```jsx
<Button
  ...
  css={{
    textDecoration: "none",
  }},
  asChild
>
  <a href="#">
    Criar conta
  </a>
</Button>
```