open-index/open-npm huggingface dataset:
npm package: @skonves/github-actions-sandbox
Description: Base project for creating a console application in Typescript
Latest version: 1.3.30

[![main](https://github.com/skonves/github-actions-sandbox/workflows/build/badge.svg?branch=main&event=push)](https://github.com/skonves/github-actions-sandbox/actions?query=workflow%3Abuild+branch%3Amain+event%3Apush)

# github-actions-sandbox

Sandbox for testing Github Actions stuff without breaking real projects

trivial change

## How to:

### Run this project

1.  Build the code: `npm run build`
1.  Run it! `npm start`

Note that the `lint` script is run prior to `build`. Auto-fixable linting or formatting errors may be fixed by running `npm run fix`.

### Create and run tests

1.  Add tests by creating files with the `.tests.ts` suffix
1.  Run the tests: `npm t`
1.  Test coverage can be viewed at `/coverage/lcov-report/index.html`

---

Generated with [generator-ts-console](https://www.npmjs.com/package/generator-ts-console)
npm package: @skooks/use-confirm
Description: React Hook to prompt a confirmation before executing a function
Author: Nicolás Serrano Arévalo
Latest version: 1.0.3

# @skooks/use-confirm

React Hook to ask the user for a confirmation before executing a function.

## Installation

#### yarn

`yarn add @skooks/use-confirm`

#### npm

`npm i @skooks/use-confirm`

## Usage

```js
import React from "react";
import useConfirm from "@skooks/use-confirm";

function App() {
  const deleteWorld = () => console.log("Deleting world...");
  const confirmDelete = useConfirm("Are you sure?", deleteWorld);
  return <button onClick={confirmDelete}>Delete the world</button>;
}
```

### Arguments

| Argument  | Type     | Description                                         | Required |
| --------- | -------- | --------------------------------------------------- | -------- |
| message   | string   | Message to show the user on the confirmation propmt | yes      |
| onConfirm | function | Function to be executed when the user confirms      | yes      |
| onCancel  | function | Function to be executed when the user cancels       | no       |

### Return

| Return value | Type     | Description                                    | Default value |
| ------------ | -------- | ---------------------------------------------- | ------------- |
| function     | function | Function wrapped around the confirmation logic | null          |
npm package: @skooks/use-fade-in
Description: React Hook to fade in any element.
Author: Nicolás Serrano Arévalo
Latest version: 1.0.0

# @skooks/use-fade-in

React Hook to fade in any element.

## Installation

#### yarn

`yarn add @skooks/use-fade-in`

#### npm

`npm i @skooks/use-fade-in`

## Usage

```js
import React from "react";
import useFadeIn from "@skooks/use-fade-in";

function App() {
  const fadeIn = useFadeIn(5, 10);
  return <h1 {...fadeIn}>This will fade in.</h1>;
}
```

### Arguments

| Argument | Type   | Description                                     | Required | Default value |
| -------- | ------ | ----------------------------------------------- | -------- | ------------- |
| duration | number | Sets the duration of the transition. In seconds | no       | 1             |
| delay    | number | Delays of transition's start. In seconds        | no       | 0             |

### Return

`useScroll` returns an object containing the following:

| Name  | Type      | Description                                                               |
| ----- | --------- | ------------------------------------------------------------------------- |
| ref   | React Ref | A ref created to fadeIn the element                                       |
| style | Object    | Style object containing `{opacity:0}` to give to the element as a default |

It's recommended to just spread the returned object on the element as shown in the Usage section above.
npm package: @skooks/use-fullscreen
Description: React Hook to make any element go Fullscreen
Author: Nicolás Serrano Arévalo
Latest version: 1.0.0

# @skooks/use-fullscreen

React Hook to make any element go Fullscreen

## Installation

#### yarn

`yarn add @skooks/use-fullscreen`

#### npm

`npm i @skooks/use-fullscreen`

## Usage

```js
import React from "react";
import useFullscreen from "@skooks/use-fullscreen";

function App() {
  const onChange = isFull =>
    console.log(isFull ? "We are in Fullscreen" : "We are not in Fullscreen");
  const { element, triggerFull, exitFull } = useFullscreen(onChange);
  return (
    <div ref={element}>
      <h1>Hello</h1>
      <button onClick={triggerFull}>Make this Fullscreen</button>
      <button onClick={exitFull}>Exit Fullscreen</button>
    </div>
  );
}
```

### Arguments

| Argument | Type     | Description                                                       | Arguments        | Required |
| -------- | -------- | ----------------------------------------------------------------- | ---------------- | -------- |
| onChange | function | Function to be called when the screen goes Fullscreen or exits is | isFull : Boolean | no       |

### Return

`useFullscreen` returns an object containing the following:

| Return value | Type      | Description                                                |
| ------------ | --------- | ---------------------------------------------------------- |
| element      | React Ref | Ref to add to the element that you want to make fullscreen |
| triggerFull  | Function  | Function to make the element enter fullscreen              |
| exitFull     | Function  | Function to make the document exit fullscreen              |
npm package: @skooks/use-hover
Description: React Hook to detect a hover on an any React Element
Author: Nicolás Serrano Arévalo
Latest version: 1.0.3

# @skooks/use-hover

React Hook to detect a hover on an any React Element

## Installation

#### yarn

`yarn add @skooks/use-hover`

#### npm

`npm i @skooks/use-hover`

## Usage

```js
import React from "react";
import useHover from "@skooks/use-hover";

function App() {
  const onHover = () => console.log("Somebody hovered!");
  const markedRef = useClick(onHover);
  return <h1 ref={markedRef}>Hello Skooks</h1>;
}
```

### Arguments

| Argument | Type     | Description                                       | Required |
| -------- | -------- | ------------------------------------------------- | -------- |
| onHover  | function | Function to be called when the element is hovered | yes      |

### Return

| Return value | Type      | Description                                                     | Default value |
| ------------ | --------- | --------------------------------------------------------------- | ------------- |
| ref          | React Ref | A React Ref listening to the hover event, add it to any element | null          |
npm package: @skoolab/eslint-config
Description: Skoolab ESlint custom rules for typescript projects.
Author: Evrwaq
Latest version: 1.2.0

# Skoolab - ESlint Config

Skoolab's custom ESLint configuration is designed to provide a consistent linting and formatting experience for TypeScript projects. It includes custom rules, Prettier integration, and support for functional programming styles.

---

## **Prerequisites**

Ensure the following tools are installed and compatible with your project:

- **Node.js**: Version `22` or higher.
- **npm**: Latest version.
- **eslint**: Version `^9.19.0` (peer dependency).
- **typescript**: Version `^5.7.3` (peer dependency).
- **prettier**: Version `^3.4.2` (peer dependency).

---

## **Installation**

To install the Skoolab ESLint configuration, run the following command:

```bash
npm install @skoolab/eslint-config eslint typescript prettier -D
```

---

## **Usage**

1. **Create an ESLint Config File**  
   Add a `eslint.config.js` file to your project root with the following content:

   ```javascript
   import skoolabConfig from '@skoolab/eslint-config'

   export default [...skoolabConfig]
   ```

2. **Add prettier configuration file**
   Add a `.prettierrc` file to your project root with the following content:

   ```json
   {
     "singleQuote": true,
     "semi": false,
     "trailingComma": "es5",
     "tabWidth": 2,
     "useTabs": false,
     "printWidth": 80,
     "arrowParens": "avoid",
     "endOfLine": "lf"
   }
   ```

3. **Lint Your Project**  
   Use the following command to lint your files:

   ```bash
   npx eslint .
   ```

---

## **Custom Rules**

The configuration includes custom rules tailored for TypeScript projects:

- **No Direct Return**: Avoid direct returns; values must be assigned to variables before returning.
- **Method Call Order**: Methods must be ordered top-to-bottom, respecting their call hierarchy.
- **Interfaces in Separate Files**: Interfaces must be declared in separate files from implementation.
- **Enforce Enums**: Prefer enums over multiple related constants.

---

## **Features**

1. **Customizable Rules**: Extend or override the rules as needed.
2. **Prettier Integration**: Ensures consistent code formatting.
3. **Functional Style Support**: Includes rules for immutability and pure functions.
4. **Custom Linters**: Rules for interfaces, enums, and method order.

---

## **Support**

For issues or feature requests, visit our [GitHub Issues Page](https://github.com/Skoolab/eslint-config/issues).

---

## **License**

This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).