open-index/open-npm huggingface dataset:
npm package: @gabrielyotoo/eslint-config-react-native
Description: Eslint configuration for @gabrielyotoo's React Native projects
Author: Gabriel Freitas Yamamoto
Latest version: 1.4.1

# @gabrielyotoo/eslint-config-react-native &middot; [![GitHub license](https://img.shields.io/github/license/gabrielyotoo/eslint-config-react-native?color=%23f22&style=flat-square)](https://github.com/gabrielyotoo/eslint-config-react-native/blob/main/LICENSE)[ ![npm version](https://img.shields.io/npm/v/%40gabrielyotoo/eslint-config-react-native?color=%23f22&style=flat-square)](https://www.npmjs.com/package/@gabrielyotoo/eslint-config-react-native)

This is my configuration for ESLint when I develop React Native apps

## Installation

Run the following command to install the package

```shell
yarn add -D @gabrielyotoo/eslint-config-react-native
```

This package depends on some other plugins, so you must also install them

```shell
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint eslint-config-prettier eslint-plugin-eslint-comments  \
            eslint-plugin-import eslint-plugin-jest eslint-plugin-jsdoc eslint-plugin-jsx-a11y eslint-plugin-prefer-arrow \
            eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-native eslint-plugin-security @react-native-community/eslint-config
```

## Usage

Add the following to your ESLint configuration file

```yaml
extends:
  ...
  - "@gabrielyotoo/eslint-config-react-native"
parserOptions:
  ...
  project: path/to/your/tsconfig.json
```

## Used Plugins

- @typescript-eslint/eslint-plugin
- eslint-comments
- flowtype
- import
- jest
- jsdoc
- jsx-a11y
- prefer-arrow
- prettier
- react
- react-hooks
- react-native
- security
npm package: @gabrikutei/storybooktest
Description: This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
Author: gabrikutei
Latest version: 0.1.0

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
npm package: @gabrimagic/simple-magic-grid
Description: Simple grid CSS layout based on CSS grid instead of old flex
Author: GabriMagic
Latest version: 1.0.1

# Simple Magic Grid

Simple Magic Grid is a versatile and intuitive CSS library designed to streamline the process of creating responsive grid layouts. It's a simple grid system, independent of any other framework, specializing solely in organizing the layout into columns. Built upon a flexible 12-column grid system, Simple Magic Grid empowers developers to craft dynamic and visually appealing designs for a wide range of applications.

## Key Features

- **Responsive Design:** Simple Magic Grid seamlessly adapts to various screen sizes and resolutions, ensuring optimal viewing experiences across devices, from mobile phones to desktop monitors.
- **Multiple Resolution Support:** With support for multiple resolutions, including small (s), medium (m), large (l), extra-large (xl), and more, Simple Magic Grid enables precise control over layout appearance on different devices.

- **Customizable Column Widths:** Developers have the flexibility to define custom column widths using intuitive class names, such as `grid-X`, where X represents the desired number of columns (from 1 to 12), allowing for granular control over layout structure.

- **Effortless Integration:** Integration with Simple Magic Grid is straightforward, whether through npm installation for seamless integration into Node.js projects or direct inclusion via CDN for quick implementation in web-based applications.

## Installation

You can easily integrate Simple Magic Grid into your project using npm:

```
npm install simple-magic-grid
```

Alternatively, you can include Simple Magic Grid directly into your HTML files using a CDN:

```html
<link
  rel="stylesheet"
  href="node_modules/simple-magic-grid/dist/simple-magic-grid.min.css"
/>
```

## Usage

To harness the power of Simple Magic Grid, simply apply the `magic-grid` class to your container element and utilize the provided grid classes to define layout structures tailored to your requirements.

### Example

Here's an example demonstrating the usage of Simple Magic Grid for creating responsive layouts:

```html
<div class="magic-grid">
  <div class="grid-12 grid-s-12 grid-m-6 grid-l-4">
    Full width on small screens, half width on medium screens, and one-third
    width on large screens
  </div>
</div>
```
npm package: @gabriprat/react-native-doc-viewer
Description: React Native Native Module Bridge Quicklock Document Viewer for IOS + Android supports pdf, png, jpg, xls, ppt, doc, docx, pptx, xlx + Video Player mp4 supported 
Author: Philipp Hecht
Latest version: 2.7.11

https://github.com/philipphecht/react-native-doc-viewer/blob/master/README.md
npm package: @gabroberge/ts-json-as-const
Description: A (very) simple CLI tool that reads JSON files and creates .d.ts files with their keys/values explicitly defined
Author: Gabriel Roberge
Latest version: 1.1.2

# ts-json-as-const

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/gabroberge/ts-json-as-const/LICENSE)

[![Server checks](https://github.com/gabroberge/ts-json-as-const/actions/workflows/ci.yaml/badge.svg)](https://github.com/gabroberge/ts-json-as-const/actions/workflows/ci.yaml)

## Installation

Install with pnpm

```bash
pnpm add @gabroberge/ts-json-as-const
```

Install with yarn

```bash
yarn add @gabroberge/ts-json-as-const
```

Install with npm

```bash
npm install --save @gabroberge/ts-json-as-const
```

## Usage

```sh
npx ts-json-as-const [path/to/json/file.json ...]
```

```sh
pnpm dlx ts-json-as-const [path/to/json/file.json ...]
```

## Examples

### Input `example.json`

```json
{
	"compilerOptions": {
		"target": "es2016",
		"module": "commonjs",
		"strict": true,
		"esModuleInterop": true,
		"skipLibCheck": true,
		"forceConsistentCasingInFileNames": true
	}
}
```

### Output `example.json.d.ts`

```ts
export type Tsconfig = {
	compilerOptions: {
		target: 'es2016';
		module: 'commonjs';
		strict: true;
		esModuleInterop: true;
		skipLibCheck: true;
		forceConsistentCasingInFileNames: true;
	};
};
declare const Tsconfig: Tsconfig;
export = Tsconfig;
```

### Input `array.json`

```json
[
	{
		"name": "John",
		"age": 30,
		"cars": [
			{
				"name": "Ford",
				"models": [{ "name": "Fiesta" }, { "name": "Focus" }]
			},
			{
				"name": "BMW",
				"models": [{ "name": "320" }, { "name": "X3" }]
			},
			{
				"name": "Fiat",
				"models": [{ "name": "500" }, { "name": "Panda" }]
			}
		]
	}
]
```

### Output `array.json.d.ts`

```ts
export type Array = [
	{
		name: 'John';
		age: 30;
		cars: [
			{ name: 'Ford'; models: [{ name: 'Fiesta' }, { name: 'Focus' }] },
			{ name: 'BMW'; models: [{ name: '320' }, { name: 'X3' }] },
			{ name: 'Fiat'; models: [{ name: '500' }, { name: 'Panda' }] },
		];
	},
];
declare const Array: Array;
export = Array;
```

## Authors

👤 **Gabriel Roberge**

-   Github: [@gabroberge](https://github.com/gabroberge)

👤 **Bethany Hitch** (Original Author)

-   Github: [@dfoverdx](https://github.com/dfoverdx)
npm package: @gabsf-dev/run-script
Description: The effortlessly way to run your package.json scripts
Author: gabrielf.dev
Latest version: 1.0.2

<p align="center">
  <a href="https://www.npmjs.com/package/@gabsf-dev/run-script"><img src="https://img.shields.io/npm/v/%40gabsf-dev%2Frun-script" alt="npm version"></a>
  <a href="https://github.com/gabsf-dev/run-script/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="RunScript is released under the MIT license."></a>
</p>
<p align="center">
  <a href="https://github.com/gabsf-dev/run-script/blob/main/.github/workflows/publish.yml"><img alt="GitHub CI Status" src="https://img.shields.io/github/actions/workflow/status/gabsf-dev/run-script/publish.yml?branch=main&logo=github&label=CI"></a>
</p>

<!-- A spacer -->
<p>&nbsp;</p>

<h1 align="center">RunScript</h1>

The effortlessly way to run your package.json scripts

## Getting Started

To use RunScript it's simple as to run:

```bash
npx @gabsf-dev/run-script
```

Or to install globally:

```bash
npm i -g @gabsf-dev/run-script
```

and run it using:

```bash
run-script
```

After that, just choose the script that you want to run, and RunScript make the rest, since choosing `npm` or `yarn` to run your script based on the lock file present in the folder, to logging all of the script execution for you.

## Flags

RunScript provides the following flags:

- _-V, --version_

Logs the RunScript current version.

```bash
npx @gabsf-dev/run-script -V
```

- _-h, --help_

Logs the RunScript help.

```bash
npx @gabsf-dev/run-script -h
```

- _-v, --view_

Only show the scripts listed in your `package.json` in a table format.

```bash
npx @gabsf-dev/run-script --view
```

<p align="center">
  <img src="./assets/run-script-view.png" alt="RunScript view example">
</p>

- _--ai_

With the `--ai` flag, you can receive ai thoughts about the scripts presents in the `package.json`. It's a coming soon feature, so stay tuned for the future updates.

```bash
npx @gabsf-dev/run-script --ai
```

## License

RunScript is [MIT licensed](./LICENSE).

## Copyright

Copyright Contributors to the RunScript project.
npm package: @gabtec/backstage-action-var-set
Description: A custom action for backstage template engine
Author: Gabriel Martins
Latest version: 1.0.5

# Gabtec's Backstage Custom Template Action

## gabtec:var:set

This action will allow us to set template local variables, re-usable along the template

## Usage

```yaml
# inside a template.yaml file, on steps block:
steps:
  # 1. DECLARE a local variable using my custom action
  - id: setlocals
    action: gabtec:var:set
    input:
      key1: value1
      key2: value2
  # 2. USE it
  - id: log-message
    action: debug:log
    input:
      myLocalVar1: "${{ steps.setlocals.output.vars.key1 }}"
      myLocalVar2: "${{ steps.setlocals.output.vars.key2 }}"
```

## Installation

```sh
# install it as a dependecie
yarn --cwd packages/backend add @gabtec/backstage-action-var-set@1.0.2
yarn --cwd packages/backend add @backstage/integration
```

## Edit "packages/backend/src/plugins/scaffolder.ts"

Register the new custom action

```js
import {
  createRouter,
  createBuiltinActions, // <--------------- add this
} from "@backstage/plugin-scaffolder-backend";
import {
  ScmIntegrations, // <<------------------- add this
} from "@backstage/integration";
import { createSetLocalVarsAction } from "@gabtec/backstage-action-var-set";

// (...)

// we have to fetch all integrations, in order to merge our new action
const integrations = ScmIntegrations.fromConfig(env.config);

// now add it to BS, but it will override existing ones, so we have to include them also
const builtInActions = createBuiltinActions({
  integrations,
  catalogClient,
  config: env.config,
  reader: env.reader,
});

// merge existing ones with our custom one
const actions = [...builtInActions, createSetLocalVarsAction()];

return await createRouter({
  actions, // <<------------------- add them
  logger: env.logger,
  // (...)
});
```
npm package: @gabtec/express-generator
Description: A cli tool to create express.js code
Author: Gabriel Martins
Latest version: 1.0.2

# Gabtec Express Generator
[![Tests CI](https://github.com/gabtec/gabtec-express-generator/actions/workflows/tests.yml/badge.svg)](https://github.com/gabtec/gabtec-express-generator/actions/workflows/tests.yml)

This is a cli tool to auto generate nodejs code for express REST API's.

## Current Features:
- can generate a new route controller and route file.
- can update api main file to import the new route, or show you the code to do it
- can generate a banner file, to be used as MOTD (Message of the Day)


## Instalation
```sh
$ npm i -g @gabtec/express-generator

// note: you will also need colors package
$ npm i colors@1.4.0
```

## Dependencies
This project depends on:
- NodeJs (tested with v16.17.0)
- Figlet

## CLI Usage

```js 

Package: @gabtec/express-generator
Usage: gegen <module> <args...>
  Modules:
    -b | --banner <Text> [color]  Generates a new MOTD banner
    -r | --route <Name>   Generates a new REST endpoint
  Options:
    -h | --help         Packahe Usage
    -v | --version      Package version
```
Watch the video: https://youtu.be/MBQ1traB_lM

## Default Configs

By default this tool uses the following configs:

```js
module.exports= {
	srcFolder: "src/",
	bannerFolder: "assets/",
	apiFolder: "api/",
	bannerFile: "banner.js",
	fileRequiringRoutes: "api.js",
	fileRequiringBanner: "server.js",
	apiPrefix: "/api/v1/",
	bannerColor: "magenta",
};
```

To change, some, or all of them, you must create a ".gegen.config.js" file on project root folder

## Tests

This project is tested using Jest.

```js
$ pnpm run test

// with code coverage
$ pnpm run test:cov

```
## Author
Gabriel Martins _aka Gabtec_

## License
MIT
npm package: @gabtrompiz/react-verification-code-input
Description: 🎉A verification code input
Author: gabtrompiz
Latest version: 1.2.5

# react-verification-code-input

> 🎉A verification code input

[![NPM](https://img.shields.io/npm/v/react-verification-code-input.svg)](https://www.npmjs.com/package/react-verification-code-input) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![NPM](https://nodei.co/npm/react-verification-code-input.png)](https://nodei.co/npm/react-verification-code-input/)

## Forked

THIS IS A FORK FROM [suweya](https://github.com/suweya)'s PACKAGE

## Live demo

- [Demo](https://suweya.github.io/react-verification-code-input/)

## Install

```bash
npm install --save @gabtrompiz/react-verification-code-input
```

## Usage

```jsx
import React, { Component } from 'react';

import ReactCodeInput from 'react-verification-code-input';

class Example extends Component {
  render() {
    return <ReactCodeInput />;
  }
}
```

## PropTypes

|     Key     |  Type  |              Desc               |
| :---------: | :----: | :-----------------------------: |
|    type     |  text  |      one of number or text      |
|   fields    | number |     The count of characters     |
|  onChange   |  func  |   Trigger on character change   |
| onComplete  |  func  | Trigger on all character inputs |
| fieldWidth  | number |           input width           |
| fieldHeight | number |          input height           |
|  autoFocus  |  bool  | auto focus first input on init  |
|    title    | string |        code input title         |
|   loading   |  bool  |        show loading flag        |
|  className  | string |           class name            |
|   values    | array  |         default values          |

## License

MIT © [suweya](https://github.com/suweya)
THIS IS A FORK FROM [suweya](https://github.com/suweya)'s PACKAGE