open-index/open-npm huggingface dataset:
npm package: @rh-uxd/appservices-patternfly-core
Description: Common javascript, css, and html code for Application Services PatternFly
Author: Red Hat
Latest version: 1.0.5

# CSS, HTML and TS/JS UXD Integration Component Library #

[![rh-uxd](https://circleci.com/gh/rh-uxd/integration.svg?style=shield)](https://app.circleci.com/github/rh-uxd/integration/pipelines)

This package provides framework independent CSS, HTML, and JS files for Redhat integration shared component library.


## Installation

`npm install @rh-uxd/appservices-patternfly-core --save`

or 

`yarn add @rh-uxd/appservices-patternfly-core`


## Using the library

Once install developers should add the CSS to their index file JS or HTML.
The following is an example on how to import the HTML using webpack.

```TS
import '@rh-uxd/appservices-patternfly-core/dist/styles/core.css';
...

```

JavaScript utilites can be imported and used as needed.  For example if you would 
like to use the Cross console navigation js functions you can do the following

```TS
import '@rh-uxd/appservices-patternfly-core/dist/styles/core.css';
import { CrossNavApp, getAppNavState, setAppNavState, navigateToApp } from '@rh-uxd/appservices-patternfly-core';

...
const apps: CrossNavApp[] = [
        {id: 'first-demo-app', name: 'First Demo App', rootUrl:'localhost:3000', isHttp: true},
        {id: 'second-demo-app', name: 'Second Demo App', rootUrl:'localhost:3001', isHttp: true}];   

...

setAppNavState(CrossNavApp[0].id, 'userA', {currentURL: 'first-demo-app/dashboard', stateData: {id: 'id100', percentComplete: .5, lastUpdated: new Date()}});

...

const appState = getAppNavState(CrossNavApp[0].id, 'userA');

...

navigateToApp(CrossNavApp[0].id, CrossNavApp[1].id)

...

```
npm package: @rh-uxd/appservices-patternfly-crossconsole
Description: Set of common react integration components
Author: Red Hat
Latest version: 1.0.5

# React UXD Integration Component Library #

[![rh-uxd](https://circleci.com/gh/rh-uxd/integration.svg?style=shield)](https://app.circleci.com/github/rh-uxd/integration/pipelines)

This package provides react componets for use with Redhat integration products.  This library contains a set of common components that are used across the integration product line.  The library is built on top of react implementation of Patternfly.


## Installation

`npm install @rh-uxd/appservices-patternfly-crossconsole --save`

or 

`yarn add @rh-uxd/appservices-patternfly-crossconsole`


## Building the library

Once install developers can use the components that are available by importing them into their projects.  For example

```ts
import React from 'react'
import {CrossNavHeader, CrossNavApp} from '@rh-uxd/integration';
...

const apps: CrossNavApp[] = [
    {id: 'first-demo-app', name: 'First Demo App', url:'localhost:3000', isHttp: true},
    {id: 'second-demo-app', name: 'Second Demo App', url:'localhost:3001', isHttp: true}];        
const Header = (
    <CrossNavHeader
        apps={apps}
        currentApp = {{id: 'first-demo-app', name: 'First Demo App', url:'localhost:3000', isHttp: true}}
        logo={<Brand src={imgBrand} alt="Patternfly Logo" />}
        toolbar={PageToolbar}
        avatar={<Avatar src={imgAvatar} alt="Avatar image" />}
        showNavToggle
    />
...

```
npm package: @rh-uxd/integration-core
Description: Common javascript, css, and html code for redhat integration products
Author: Red Hat
Latest version: 1.0.4

# CSS, HTML and TS/JS UXD Integration Component Library #

[![rh-uxd](https://circleci.com/gh/rh-uxd/integration.svg?style=shield)](https://app.circleci.com/github/rh-uxd/integration/pipelines)

This package provides framework independent CSS, HTML, and JS files for Redhat integration shared component library.


## Installation

`npm install @rh-uxd/integration-core --save`

or 

`yarn add @rh-uxd/integration-core`


## Using the library

Once install developers should add the CSS to their index file JS or HTML.
The following is an example on how to import the HTML using webpack.

```TS
import '@rh-uxd/integration-core/dist/styles/core.css';
...

```

JavaScript utilites can be imported and used as needed.  For example if you would 
like to use the Cross console navigation js functions you can do the following

```TS
import '@rh-uxd/integration-core/dist/styles/core.css';
import { CrossNavApp, getAppNavState, setAppNavState, navigateToApp } from '@rh-uxd/integration-core';

...
const apps: CrossNavApp[] = [
        {id: 'first-demo-app', name: 'First Demo App', rootUrl:'localhost:3000', isHttp: true},
        {id: 'second-demo-app', name: 'Second Demo App', rootUrl:'localhost:3001', isHttp: true}];   

...

setAppNavState(CrossNavApp[0].id, 'userA', {currentURL: 'first-demo-app/dashboard', stateData: {id: 'id100', percentComplete: .5, lastUpdated: new Date()}});

...

const appState = getAppNavState(CrossNavApp[0].id, 'userA');

...

navigateToApp(CrossNavApp[0].id, CrossNavApp[1].id)

...

```
npm package: @rh-uxd/integration-react
Description: Set of common react integration components
Author: Red Hat
Latest version: 1.0.4

# React UXD Integration Component Library #

[![rh-uxd](https://circleci.com/gh/rh-uxd/integration.svg?style=shield)](https://app.circleci.com/github/rh-uxd/integration/pipelines)

This package provides react componets for use with Redhat integration products.  This library contains a set of common components that are used across the integration product line.  The library is built on top of react implementation of Patternfly.


## Installation

`npm install @rh-uxd/integration-react --save`

or 

`yarn add @rh-uxd/integration-react`


## Building the library

Once install developers can use the components that are available by importing them into their projects.  For example

```ts
import React from 'react'
import {CrossNavHeader, CrossNavApp} from '@rh-uxd/integration';
...

const apps: CrossNavApp[] = [
    {id: 'first-demo-app', name: 'First Demo App', url:'localhost:3000', isHttp: true},
    {id: 'second-demo-app', name: 'Second Demo App', url:'localhost:3001', isHttp: true}];        
const Header = (
    <CrossNavHeader
        apps={apps}
        currentApp = {{id: 'first-demo-app', name: 'First Demo App', url:'localhost:3000', isHttp: true}}
        logo={<Brand src={imgBrand} alt="Patternfly Logo" />}
        toolbar={PageToolbar}
        avatar={<Avatar src={imgAvatar} alt="Avatar image" />}
        showNavToggle
    />
...

```
npm package: @rh389/react-native-radial-gradient
Description: Radial gradient library for react native (forked from https://npm.org/react-native-radial-gradient)
Author: Surajit Sarkar
Latest version: 1.1.1


# react-native-radial-gradient

## Getting started

`$ npm install react-native-radial-gradient --save`

### Mostly automatic installation

`$ react-native link react-native-radial-gradient`

### Manual installation


#### iOS

Not Supported yet

#### Android

1. Open up `android/app/src/main/java/[...]/MainApplication.java`
  - Add `import com.surajit.rnrg.RNRadialGradientPackage;` to the imports at the top of the file
  - Add `new RNRadialGradientPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
  	```
  	include ':react-native-radial-gradient'
  	project(':react-native-radial-gradient').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-radial-gradient/android')
  	```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
  	```
      compile project(':react-native-radial-gradient')
  	```


## Usage
```javascript
import RadialGradient from 'react-native-radial-gradient';

// TODO: What to do with the module?
<RadialGradient style={{width:200,height:200}}
                        colors={['black','green','blue','red']}
                        stops={[0.1,0.4,0.3,0.75]}
                        center={[100,100]}
                        radius={200}>
          {child elements}
</RadialGradient>
```

## Some output gradient
<br>
1.
<img src="https://raw.githubusercontent.com/surajitsarkar19/react-native-radial-gradient/master/images/image1.png" width="50%"></img> 
<br/><br>
2. 
<img src="https://raw.githubusercontent.com/surajitsarkar19/react-native-radial-gradient/master/images/image2.png" width="50%"></img> 
<br/><br>
3.
<img src="https://raw.githubusercontent.com/surajitsarkar19/react-native-radial-gradient/master/images/image4.png" width="50%"></img> 
<br/><br>

## Props

#### colors
An array of at least one color value. Color can be represented using string(i.e 'red', 'blue', 'black' etc.) or in #RRGGBB format. 

#### center
An optional array of float value. If provided, it must contain x and y coordinate of the center of the gradient. 
If nothing is provided then the center of the gradient will be at the middle of the element.

#### radius
A float value of the radius of the radial gradient. By default it is <code> min(width/2,height/2)</code>

#### stops
An optional array of numbers defining the location of each gradient color stop.
The relative position of each corresponding color is in the colors array.
Valid values are between <code>0.0f</code> and <code>1.0f</code>.
Example: [0.1, 0.75, 1] means that first color will take 0% - 10%, second color will take 10% - 75% and finally third color will occupy 75% - 100%. By default all color will be distributed evenly.
npm package: @rh389/rn-xcode-git-version
Description: Sets version in Info.plist based on git tag
Author: Rob Hogan
Latest version: 0.4.0

## Auto-version xcode projects by git tag/commit

This simply pacakges the very useful shell script by Gabriel Rinaldi, posted at http://gabrielrinaldi.me/ios-app-versioning-with-git-tag/

To use:
1. `yarn add @rh389/rn-xcode-git-version`
2. Add the script `../node_modules/@rh389/rn-xcode-git-version/version.sh` as a build phase to your xcode project

### Options

Name | Type | Description
-----|------|-------------
`-b`| number | Optional, default=0. Increase the calculated `CFBundleVersion` (based on number of commits on this tree) by the given number. Useful when continuing a build sequence from a new repository.
npm package: @rhangai/cache
Description: Cache for node
Author: rhangai
Latest version: 0.9.2

# @rhangai/cache

## Simple cache structure

```sh
yarn add @rhangai/cache
```

## Simple Usage

```ts
import { Cache } from '@rhangai/cache';

const cache = new Cache<number, User>({
	duration: 30000,
	durationUntilCold: 25000,
});
function loadUser(id: number) {
	/*
		The cache will return the same item as long as the duration is less than the time given
		If the cache is cold (not expired, only old). The old value will be returned but a new value will be requested
	*/
	return cache.get(id, async () => {
		const user = await loadUserFromDb(id);
		return user;
	});
}
const user = await loadUser(1);
```
npm package: @rhangai/class-validator
Description: Validate classes using decorators
Author: rhangai
Latest version: 0.3.1

# @rhangai/class-validator

## Getting started

```sh
yarn add @rhangai/class-validator
```

Use it

```ts
import { Validate, validade, Trim, IsString, IsInt, ToInt } from '@rhangai/class-validator';

@Trim()
export class UserDto {
	@IsString()
	name!: string;
	@IsString()
	address!: string;
	@IsInt()
	intValue!: number;
	@ToInt()
	maybeIntValue!: number;
}
const obj = {
	name: '   john doe',
	address: 'my home address',
	intValue: 1000,
	maybeIntValue: '123', // or 123
};
const user = await validate(UserDto, obj);
```

## Validators

-   `IsObject()` Check if the property is an object of the given type
-   `IsObject(() => Type)` Check if the property is validated against a given type
-   `IsArray([ ...Validators ])` Check if the property is an array of the validators
-   `Trim(chars?)` Trim the stirng. This does _not_ ensure the property is a string.
-   `IsNumeric()` Check if the prop is a numeric value
-   `IsString()` Check if the prop is a string
-   `IsLength({ min?, max? })` Check if the object has length

## Utility

-   `IsOptional()` Allow null | undefined
-   `IsOneOf(validators: any[])` Check if any of the validators has passed

## Sanitizers

-   `Trim(chars?: string)`
-   `NormalizeEmail(options: any)`
-   `Blacklist(chars: string)`
-   `Whitelist(chars: string)`

## Creating validators

```ts
import { Validate } from '@rhangai/class-validator';

export const IsPassword = Validate([IsString(), IsLength({ min: 6 })]);
```

You can also use the validator interface to create a validator

```ts
interface Validator {
	/// Test whether this property is valid or not
	test?: (value: any, context: ValidatorContext) => boolean | Promise<boolean>;
	/// Message when there is an error
	message?: string;
	/// If skips returns true, the validation will be skipped
	skip?: (value: any, context: ValidatorContext) => ValidatorSkipResult | Promise<ValidatorSkipResult>;
	/// Transform the property
	transform?: (value: any, context: ValidatorContext) => unknown | Promise<unknown>;
}

const IsPassword = Validate({
	test: (input) => {
		return typeof input === 'string' && input.length >= 6;
	},
});
```
npm package: @rhangai/env-builder
Description: Create .env files for your projects with a single command
Author: renanhangai
Latest version: 0.5.2

# Basic usage

Install using `yarn add @rhangai/env-builder`

Create a `template.env`

```env
APP_NAME=example-app
APP_PASSWORD={{util.random(16)}}
APP_HOST=myapp.example.com
APP_CONNECTION_URL=http://${APP_HOST}/data
```

Create a `.env.local`

```env
APP_HOST=myapp.localhost
```

Configure it using:

```sh
yarn run env-builder generate -t template.env -i .env.local -o .env
```

The generated output will be

```env
APP_NAME=example-app
APP_PASSWORD=somerandomdata12
APP_HOST=myapp.example.com
APP_CONNECTION_URL=http://myapp.localhost/data
```

# Guide

Now that you know what this library does, let's explain what each flag of the following command

```sh
yarn run env-builder generate -t template.env -i .env.local -o .env
```

The `-t/--template [file]` flag is the template option, it will use it as a base file to generate your .env, it will be also considered the first input file to set the environment variable values

The `-i/--input [file]` flag may be used to read and override the variables on the template, it can also have additional variables. You can use this flag multiple times on the same command.

The `-o/--output [file]` flag is used to write the environment file generated by this command.

The `--env-override-prefix <prefix>` flag is usually combined when using CI. It allows the variables to be overwritten by environment variables of the same name, but prefixed with `prefix`.

-   Example: When using `--env-override-prefix CI_OVERRIDE_` you can set the env `CI_OVERRIDE_APP_NAME=my-ci-app` to override the variable `APP_NAME`

# `package.json` mode

You can simplify the usage of the scripts simply by creating the `env-builder` entry on the package.json file

```js
{
	"devDependencies": {
		"@rhangai/env-builder": "^0.4.0"
	},
	"scripts": {
		"env": "env-builder generate --package --",
		"env:ci": "env-builder generate --package --env-override-prefix CI_OVERRIDE_ --"
	},
	"env-builder": {
		"template": "env/template.env",
		"output": ".env", // Or array [".env", "output/.env"]
		"local": ".env.local",
		"modes": {
			"dev": ["env/development.env"],
			"prod": ["env/production.env"]
		}
	}
}
```

And the running `yarn env`

# Context

The default context contains two main variables `util` and `env`

You can use it in an expression like:

```env
MY_ENV={{ env.OTHER_ENV + util.random(64) }}
```

Util:

-   util.random(n, alphabet = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFHIJKLMNOPQRSTUVXYZ\_'): Generates a random string of length n
-   util.randomBase64(n): N random bytes, base64 encoded
-   util.randomUrlSafeBase64(n): N random bytes, base64 encoded url safe
-   util.randomHex(n): N random bytes, hex encoded
npm package: @rhangai/eslint-config-typescript
Description: Eslint config
Author: rhangai
Latest version: 1.5.0

# @rhangai/eslint-config-typescript

## Installation

```sh
yarn add --dev eslint @rhangai/eslint-config-typescript
```

```js
import config from '@rhangai/eslint-config-typescript';

export default [
	...config.ts(),
	{
		ignores: ['**/dist/**/*'],
		languageOptions: {
			parserOptions: {
				project: true,
				tsconfigRootDir: import.meta.dirname,
			},
		},
	},
];
```
npm package: @rhangai/eslint-plugin
Description: ESLint plugin for my personal configurations
Author: rhangai
Latest version: 0.1.1

# Instalação

Typescript:

```sh
yarn add --dev @rhangai/eslint-plugin \
	eslint-config-airbnb-typescript \
	eslint-config-prettier \
	eslint-plugin-import \
	eslint-plugin-prettier \
	@typescript-eslint/parser \
	@typescript-eslint/eslint-plugin
```

### `vue-typescript`

```sh
yarn add --dev @rhangai/eslint-plugin \
	eslint-config-airbnb-typescript \
	eslint-config-prettier \
	eslint-plugin-import \
	eslint-plugin-prettier \
	eslint-plugin-vue \
	@typescript-eslint/parser \
	@typescript-eslint/eslint-plugin
```

```js
module.exports = {
	root: true,
	plugins: ['@rhangai'],
	extends: ['plugin:@rhangai/vue-typescript'],
	parserOptions: {
		project: 'tsconfig.json'
	}
};
```
npm package: @rhangai/nest-auth
Description: Nest auth module
Author: rhangai
Latest version: 0.9.2

# @rhangai/nest-auth

Simpler implementation of a guard without using passport

## Installation

```sh
yarn add @rhangai/nest-auth
```

## Quick Usage

Define your authentication data

```ts
import { createAuthDefinition } from '@rhangai/nest-auth';

export type AuthData = {
	user: MyUserType;
};

const AuthDefinition = createAuthDefinition<AuthData>();
```

Create the guard

```ts
import { Injectable } from '@nestjs/common';
import { AuthData, AuthDefinition } from './auth-data';

@Injectable()
export class AuthGuard implements CanActivate {
	canActivate(ctx): Promise<boolean> {
		const [isValid] = await AuthDefinition.authenticate(ctx, () => this.getAuthData(ctx));
		if (isValid == null) return true;
		return isValid;
	}

	private async getAuthData(
		authExecutionContext: AuthExecutionContext
	): Promise<AuthData | null> {
		// Do your logic
		return {
			user: {}, // From somewhere
		};
	}
}
```

Use the module globally or locally

```ts
import { Module } from '@nestjs/common';
import { APP_GUARD } from '@nestjs/core';
import { AuthGuard } from './auth.guard';

@Module({
	providers: [
		// Global guard
		{
			provide: APP_GUARD,
			useClass: AuthGuard,
		},
	],
})
export class AuthModule {}
```

## Decorators

Create the decorators

```ts
import { AuthDefinition } from './auth-data';

export const AuthUser = AuthDefinition.createDecorator((_, authData) => authData.user);
```

Use in the controller

```ts
import { Controller, Get } from '@nestjs/common';
import { AuthUser } from './auth-decorators';

@Controller()
export class SomeController {
	@Get()
	handler(@AuthUser() user: MyUserType) {
		return user;
	}
}
```
npm package: @rhangai/nest-graphql
Description: Nest graphql services module
Author: rhangai
Latest version: 0.9.2

# @rhangai/nest-graphql

## Installation

```sh
yarn add @rhangai/nest-graphql @nestjs/graphql graphql tslib
```

## Usage

Some scalars using @rhangai/nest-core

-   DateScalar:
-   DateTimeScalar:
-   TimeScalar:
-   DecimalScalar:
npm package: @rhangai/nest-testing
Description: Nest test services module
Author: rhangai
Latest version: 0.9.2

# @rhangai/nest-testing

## Installation

```sh
yarn add @rhangai/nest-testing @nestjs/testing jest
```

## Usage

Create your test factory

```ts
import { createTestFactory } from '@rhangai/nest-testing';

export const createTest = createTestFactory({
	imports: [],
	plugins: [],
});
```

Create a test

```ts
import { createTest } from './somewhere';
import { SomethingService } from './some.service';

describe('MyService', () => {
	const t = createTest({
		services: {
			something: SomethingService,
		},
	});

	it('should do something', () => {
		t.services.something.doSomething();
	});
});
```

## Plugins

### e2e

#### Setup

```ts
import { testPluginE2e } from '@rhangai/nest-testing/lib/e2e';

export const createTest = createTestFactory({
	plugins: [testPluginE2e()],
});
```

#### Usage

```ts
t.e2t((e2e) => {
	it('graphql', () => {
		await e2e.graphql({
			query: (gql) => gql`
				query ($id: Int!) {
					item(id: $id) {
						id
						name
					}
				}
			`,
			variables: {
				id: 1,
			},
			expect: {
				item: {
					id: 1,
					name: 'Box',
				},
			},
		});
	});
});
```

### typeorm

#### Setup

```ts
import { testPluginTypeorm } from '@rhangai/nest-testing/lib/typeorm';

export const createTest = createTestFactory({
	plugins: [testPluginTypeorm()],
});
```

#### Usage

Now you can use the typeorm module

```ts
const entities = await t.entityManager.find(EntityClass);
```
npm package: @rhangai/nuxt-matomo
Description: Nuxt matomo
Latest version: 0.4.0

# @rhangai/nuxt-matomo

## Install

```sh
yarn add @rhangai/nuxt-matomo
```

## Configuration

```js
module.exports = {
	buildModules: ['@rhangai/nuxt-matomo'],
	publicRuntimeConfig: {
		matomo: {
			url: '//my-matomo.site/',
			siteId: '1',
			trackerUrl: 'some-matomo-custom-tracker', // Optional. Ex: //my-matomo.site/piwik.php
			scriptUrl: 'some-matomo-custom-script', // Optional. Ex: //my-matomo.site/piwik.js
		},
	},
};
```
npm package: @rhangai/validator
Description: Validator
Author: rhangai
Latest version: 0.9.2

# @rhangai/validator

## Installation

```sh
yarn add @rhangai/common @rhangai/validator reflect-metadata
```

## Usage

```ts
import { ToString, ToInt, validate } from '@rhangai/validator';

class MyClass {
	@ToString()
	name!: string;

	@ToInt()
	age!: number;
}

async function test() {
	const result = await validate(MyClass, {
		name: 'John Doe',
		age: 100,
	});
	/*
	  MyClass { name: 'John Doe', age: 100 }
	*/
}
```
npm package: @rhangai/vue-di
Description: Dependency injection for vue using tsyringe
Author: rhangai
Latest version: 0.3.4

# @rhangai/vue-di

Dependency Injection for vue, using [tsryinge](https://github.com/microsoft/tsyringe)

## Installation

```sh
yarn add @rhangai/vue-di tsyringe reflect-metadata
```

## Basic Usage

Simple usage

`Data.service.ts`

```ts
import { injectable } from 'tsyringe';

@injectable()
class DataService {
	constructor() {}

	async doSomething() {}
}
```

`User.service.ts`

```ts
import { singleton } from 'tsyringe';
import { DataService } from './Data.service';

@singleton()
class UserService {
	constructor(private readonly dataService: DataService) {}

	async login() {
		await this.dataService.doSomething();
		return request(...);
	}
}
```

`Component.vue`

```ts
import { UserService } from 'services/User.service';

export default {
	services: {
		userService: UserService,
	},
	methods: {
		async login() {
			await this.$services.userService.login();
		},
	},
};
```

### Installation

on your entrypoint

```js
import 'reflect-metadata';
import Vue from 'vue';
import VueDi from '@rhangai/vue-di';
import { container } from 'tsyringe';

Vue.use(VueDi, {
	container,
	// ... other options
});
```

on `vue.config.js`

```js
module.exports = {
	transpileDependencies: ['@rhangai/vue-di'],
};
```

### Installation with **nuxt**

```js
export default {
	modules: ['@rhangai/vue-di/nuxt'],
	build: {
		transpile: ['@rhangai/vue-di'],
	},
};
```

When using nuxt, there is already a few services registered.

- `app`: Nuxt Application
- `router`: Vue Router
- `axios`: this.\$axios if using @nuxtjs/axios
- `apollo`: this.\$apollo if using @nuxtjs/apollo

```ts
import { injectable, inject } from 'tsyringe';

@injectable()
export class LoginService {
	constructor(@inject('axios') private readonly axios: any) {}

	async login() {
		const response = await this.axios.post(/* ... */);
	}
}
```
npm package: @rhangai/vue-fetch-context
Description: Fetch data on components using contexts
Author: rhangai
Latest version: 0.0.9

# @rhangai/vue-fetch-context

Library to fetch arbitrary data on components according to its context

## Getting started

```sh
yarn add @rhangai/vue-fetch-context rxjs
```

Create your fetcher structure

```ts
import {
	FetchResult,
	createFetchContextMixins,
} from "@rhangai/vue-fetch-context";

export interface User {
	name: string;
}

export interface IFetcher {
	user(): FetcherResult<User>;
}

export const FetchContextMixins = createFetchContextMixins<IFetcher>(Vue);
```

Use on your components

```ts
import { FetchContextMixins } from "...";

export default Vue.extend({
	name: "Userinfo",
	mixins: [
		FetchContextMixins.Data({
			fetch: ({ fetcher }) => fetcher.user(),
		}),
	],
	template: `
		<div>
			{{state.data.name}}
		</div>
	`,
});
```

Then, implement the fetcher and use it in the context

```ts
import { of } from "rxjs";
import { IFetcher } from "..";

class Fetcher implements IFetcher {
	user() {
		return of({ name: "John doe" });
	}
}

export default Vue.extend({
	components: {
		Userinfo,
	},
	data: () => ({
		fetcher: new Fetcher(),
	}),
	template: `
		<fetch-context :fetcher="fetcher">
			<userinfo />
		</fetch-context>
	`,
});
```
npm package: @rhangai/vue-notification-helper
Description: Framework agnostic notification for vue
Author: rhangai
Latest version: 1.0.1

# @rhangai/vue-notification-helper

Generic notification handler.

## Installation

```sh
yarn add @rhangai/vue-notification-helper
```

## Basic Usage

Create a composable file. Ex: `notification.ts`

```ts
import {
	createNotificationHelper,
	createConfirmationHelper,
} from '@rhangai/vue-notification-helper';

export type Notification = {
	title?: string;
	message: string;
};

export type Confirmation = {
	title?: string;
	message: string;
};

export const { useNotification, useNotificationsHandlers, notificationsPlugin } =
	createNotificationHelper<Notification>();

export const { useConfirmation, useConfirmationsHandlers, confirmationsPlugin } =
	createConfirmationHelper<Confirmation>();
```

## Handle the notifications

```vue
<script lang="ts" setup>
import { useNotificationsHandlers, useConfirmationsHandlers } from './my/notification';

/*
 * Array of notification handlers
 * Each item has a
 *   - id: string
 *   - resolve(): void // To be called when
 *   - confirmation
 */
const notifications = useNotificationsHandlers();

/*
 * Array of confirmation handlers
 * Each item has a
 *   - id: string
 *   - confirm()
 *   - reject()
 *   - confirmation
 */
const confirmations = useConfirmationsHandlers();
</script>
<template>
	<div>
		<div class="notification-container">
			<div v-for="{ notification, id, resolve } in notifications" :key="id">
				<p>{{ notification.message }}</p>
				<button @click="resolve()">Ok</button>
			</div>
		</div>
		<div class="confirmations-container">
			<div v-for="{ confirmation, id, confirm, reject } in confirmations" :key="id">
				<p>{{ confirmation.message }}</p>
				<button @click="confirm()">Yes</button>
				<button @click="reject()">No</button>
			</div>
		</div>
		<slot></slot>
	</div>
</template>
```
npm package: @rhangai/web-auth
Description: Authentication handler for nuxt
Author: rhangai
Latest version: 1.1.0

# @rhangai/web-auth

Authentication for Web Applications

## Usage with nuxt

```js
module.exports = {
	// ...

	//
	modules: ["@rhangai/web-auth"],
	auth: {
		config: "~/config/auth.config"
	},
	build: {
		transpile: ["@rhangai/web-auth"]
	}
};
```

Then create a file `config/auth.config.js`

```js
export default function(context) {
	return {
		provider: new MyProvider(),
		storage: new MyStorage()
	};
}
```
npm package: @rhannachi/components
Description: Storybook design systems
Author: rhannachi
Latest version: 1.1.6
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

## Storybook components
This is an example of a React component library created with Storybook and Tailwind CSS.

### [Link storybook library](https://main--648f1b983076c579eab28ee1.chromatic.com)

[![typescript](public/made-with-typescript.svg)](https://www.typescriptlang.org)\
[![tailwindcss](public/made-with-tailwindcss.svg)](https://tailwindcss.com/)\
[![atomic design system](public/made-with-storybook-atomic-design.svg)](https://bradfrost.com/blog/post/atomic-design-and-storybook/)

### Workflows
[![GitHub Workflows (Lint, Test, Build) Actions](https://github.com/rhannachi/storybook-react/actions/workflows/workflow.yml/badge.svg?branch=main)](https://github.com/rhannachi/storybook-react/actions/workflows/workflow.yml)

### Test coverage
[![codecov](https://codecov.io/gh/rhannachi/storybook-react/branch/main/graph/badge.svg?token=ALPEFC8BB8)](https://codecov.io/gh/rhannachi/storybook-react)\
![alt test-coverage](https://codecov.io/gh/rhannachi/storybook-react/branch/main/graphs/sunburst.svg?token=ALPEFC8BB8)

### How to start
`yarn start`
### How to test
`yarn test`
npm package: @rhannachi/eslint-config-prettier
Description: Configure ESLint and Prettier for a React/Next.js TypeScript project
Author: rhannachi
Latest version: 1.3.0

## Configure 🛠 ESLint and Prettier for a React/Next.js TypeScript project

```bash
npm i --dev @rhannachi/eslint-config-prettier
```

* If you are using **React** add `@rhannachi/eslint-config-prettier` to the extends in your .eslintrc file:
```json
{
  "extends": [
    "@rhannachi/eslint-config-prettier"
  ]
}
```

* If you are using **Next.js** add `@rhannachi/eslint-config-prettier/next` to the extends in your .eslintrc file:
```json
{
  "extends": [
    "@rhannachi/eslint-config-prettier/next"
  ]
}
```

Extend your current config file tsconfig.json:
```json
{
  "extends": "@rhannachi/eslint-config-prettier/tsconfig.json"
}
```

* If you are using **React**:
```json
{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx",
    "lint:fix": "eslint . --fix --ext .ts,.tsx"
  }
}
```

* If you are using **Next.js**:
```json
{
  "scripts": {
    "lint": "next lint . --ext .ts,.tsx",
    "lint:fix": "next lint . --fix --ext .ts,.tsx"
  }
}
```
npm package: @rhannachi/ui-components
Description: Storybook design systems
Author: rhannachi
Latest version: 1.2.3

## Storybook components
React component library created with Storybook and Tailwind CSS.

### [Link storybook library](https://main--648f1b983076c579eab28ee1.chromatic.com)

[![typescript](public/made-with-typescript.svg)](https://www.typescriptlang.org)\
[![tailwindcss](public/made-with-tailwindcss.svg)](https://tailwindcss.com/)\
[![atomic design system](public/made-with-storybook-atomic-design.svg)](https://bradfrost.com/blog/post/atomic-design-and-storybook/)

### Workflows
[![GitHub Workflows (Lint, Test, Build) Actions](https://github.com/rhannachi/ui-components/actions/workflows/workflow.yml/badge.svg?branch=main)](https://github.com/rhannachi/ui-components/actions/workflows/workflow.yml)

### Test coverage
[![codecov](https://codecov.io/gh/rhannachi/ui-components/branch/main/graph/badge.svg?token=ALPEFC8BB8)](https://codecov.io/gh/rhannachi/ui-components)\
![alt test-coverage](https://codecov.io/gh/rhannachi/ui-components/branch/main/graphs/sunburst.svg?token=ALPEFC8BB8)

### How to start
`npm start`
### How to test
`npm test`
npm package: @rhao/gen-index
Description: 自动生成 index.* 文件。
Author: RayHao
Latest version: 0.2.1

# `gen-index`

生成指定目录下的入口文件。

## 安装

- npm
```shell
npm i -D @rhao/gen-index
```

- yarn
```shell
yarn add -D @rhao/gen-index
```

- pnpm
```shell
pnpm add -D @rhao/gen-index
```

## 使用

### 基础用法

创建配置文件 `gi.config.[js|ts|mjs|cjs|json]`。

> 默认生成的 `index.*` 后缀名由匹配到的文件列表首个文件获取，特殊情况下也可手动设置 `outFile` 达成自定义后缀名效果。

```ts
// gi.config.ts
import { defineConfig } from '@rhao/gen-index'

export default defineConfig({
  dirs: ['src/hooks'], // 指定需要生成入口文件的目录列表
})
```

可通过 `npx gi` 执行或设置 `package.json` 脚本。

```json
{
  // ...

  "scripts": {
    // ...
    "gi": "gi"
  }
}
```

### 自定义代码生成

> 默认的 `genCode` 仅生成 `ESModule` 格式的 `Re-Export` 代码，可通过配置 `genCode` 自定义代码生成。

```ts
// gi.config.ts
import { defineConfig } from '@rhao/gen-index'

export default defineConfig({
  dirs: [
    'src/hooks',
    {
      input: 'src/styles',
      // 指定 scss 文件的 genCode
      genCode: (module) => `@import './${module}.scss';`
    }
  ],
  // 指定默认的 genCode
  genCode: (module) => `export * from './${module.replace('/index', '')}'`
})
```

### 清除入口文件

> 默认情况下支持空文件写入，若需在特定场景下清空入口文件可通过提供单独配置实现。

```ts
// gi.config.ts

// ...
```

```ts
// ri.config.ts
import { defineConfig } from '@rhao/gen-index'
import config from './gi.config'

export default defineConfig({
  // 若 config.dirs 中有特殊设置需覆盖
  ...config,
  allowEmpty: true, // 必须为 true
  exclude: '**/*' // 必须排除所有文件
})
```

可通过 `npx gi -c ri.config` 执行或设置 `package.json` 脚本。

```json
{
  // ...

  "scripts": {
    // ...
    "gi": "gi",
    "ri": "gi -c ri.config"
  }
}
```
npm package: @rhao/lodash-x
Description: Extend generic functions based on lodash.
Author: RayHao
Latest version: 0.5.3
Deprecated: @rhao/lodash-x 已废弃，推荐使用 nice-fns，具体查看 README.md

# ~~@rhao/lodash-x~~

> ***废弃声明：该包已被废弃，推荐使用 [`nice-fns`](https://www.npmjs.com/package/nice-fns)，拥有完整的单测和文档，并实现和优化了该包所有功能！***

#### 迁移至指南

安装 `nice-fns`

```shell
# npm
npm i nice-fns

# yarn or pnpm
pnpm add nice-fns
```

函数迁移指南：

1. `assignOwnKeys` => `assignOwn`
2. `bigCamelCase` => `pascalCase`
3. `combineURLs` 支持多 `relativeURL`
4. `controllablePromise` => `promiseWithControl`
5. `createSwitch` 调用方式更改
6. `pauseableTimer` => `timerWithControl`
7. `safeJSONParse` => `parseJSON`
8. `setupDefaults` 被移除
9. `setupDefaults.treeOptions` => `treeDefaults`
npm package: @rhao/plop-generators
Description: Plop generators.
Author: RayHao
Latest version: 1.2.14

# plop-generators

Plop generators.

## Install

```shell
# npm
npm i -D plop @rhao/plop-generators

# yarn or pnpm
pnpm add -D plop @rhao/plop-generators
```

## Usage

### create a plopfile.js and configure generators

> If you use a `.cjs` configuration file, you must install `@esbuild-kit/cjs-loader` and require it.

```ts
// plopfile.cjs
require('@esbuild-kit/cjs-loader')
const { setupGenerators } = require('@rhao/plop-generators')

module.exports = function (plop) {
  setupGenerators(plop)
}
```

```ts
// plopfile.js
import { setupGenerators } from '@rhao/plop-generators'

export default function (plop) {
  setupGenerators(plop)
}
```

### add script

```jsonc
// package.json
{
  "scripts": {
    "plop": "plop"
  }
}
```

### run command

```shell
npm run plop
```
npm package: @rhao/request-basic-middleware
Description: Basic middleware of request.
Author: RayHao
Latest version: 4.4.0

# `@rhao/request-basic-middleware`

> `@rhao/request` 的基础中间件集合。

## 安装

```shell
pnpm add @rhao/request-basic-middleware
```

## 使用

### 安装

```ts
import { createRequestHook } from '@rhao/request'

// 不推荐：将扩展所有中间件自定义配置项
import { RequestDebounce } from '@rhao/request-basic-middleware'

// 推荐：仅扩展相关中间件自定义配置项
import { RequestDebounce } from '@rhao/request-basic-middleware/middleware/debounce'

export const useRequest = createRequestHook({
  middleware: [RequestDebounce()]
})
```
npm package: @rhao/request-middleware-axios
Description: Axios middleware of request.
Author: RayHao
Latest version: 4.0.3

# `@rhao/request-middleware-axios`

> 搭建 `Axios` 与 `@rhao/request` 桥梁的中间件。

## 安装

使用 `npm`

```shell
npm i vue @rhao/request @rhao/request-middleware-axios
```

使用 `yarn` or `pnpm`

```shell
pnpm add vue @rhao/request @rhao/request-middleware-axios
```

## 使用

创建 `axios.ts`

```ts
// utils/axios.ts
import Axios from 'axios'

export const axios = Axios.create({
  // ...
})
```

创建 `useRequest.ts`

```ts
// hooks/useRequest.ts
import type {
  BasicRequestHook,
  RequestFetcher,
  RequestOptions,
  RequestResult,
} from '@rhao/request'
import { RequestAxios } from '@rhao/request-middleware-vue'
import { AxiosResponse } from 'axios'

type FlattenAxiosResponse<T> = T extends AxiosResponse<infer D> ? D : T

// 自定义调用类型
interface UseRequest extends BasicRequestHook {
  <TData, TParams extends unknown[] = unknown[]>(
    fetcher: RequestFetcher<TData, TParams>,
    options?: RequestOptions<FlattenAxiosResponse<TData>, TParams>,
  ): RequestResult<FlattenAxiosResponse<TData>, TParams>
}

// 后端数据格式
interface DataFormat {
  success: boolean
  data: any
  message?: string
}

export const useRequest = createRequestHook({
  // 此处解析数据格式，仅返回响应的后端数据
  dataParser: (data: AxiosResponse) => {
    // 响应状态码错误
    if (data.status !== 200) throw new Error(data.statusText)

    // 解析后端格式
    const realData: DataFormat = data.data

    // 后端数据错误
    if (!realData.success) throw new Error(realData.message)

    // 返回解析后的数据
    return realData.data
  },
  middleware: [RequestAxios({ associativeCancel: true })]
}) as UseRequest
```

创建 `api.ts`

```ts
// apis/example.ts
import { axios } from 'utils/axios'

export interface Params {
  a: number
  b: string
}

export interface DataItem {
  a: number
  b: string
}

export const queryList = (params: Params) => axios.get<DataItem[]>('/api/example/list', { params })
```

使用 `useRequest`
```ts
import { useRequest } from 'hooks/useRequest'
import { queryList } from 'apis/example'

// data => Ref<DataItem[] | null> // 这里会自动对 AxiosResponse 进行拆包
// params => Ref<[Params]> // 会自动推导出 queryList 的入参
const { data, loading, error, params } = useRequest(queryList, {
  immediate: true,

  // 初次自动调用时的参数，设置 `immediate` 为 `true` 时有效
  // 类型会自动推导出 Params
  defaultParams: [{ a: 1, b: '123' }],

  // 这里可以传入 axios 的配置项，支持函数格式
  axiosConfig: {
    timeout: 10e3
  }
})
```
npm package: @rhao/request-middleware-vue
Description: Vue middleware of request.
Author: RayHao
Latest version: 4.0.4

# `@rhao/request-middleware-vue`

> 适配 `Vue` 的 `@rhao/request` 中间件。

## 安装

使用 `npm`
```shell
npm i vue @rhao/request @rhao/request-middleware-vue
```

使用 `yarn` or `pnpm`
```shell
pnpm add vue @rhao/request @rhao/request-middleware-vue
```

## 使用

创建 `useRequest.ts`。
```ts
// hooks/useRequest.ts
import { RequestVue } from '@rhao/request-middleware-vue'

export const useRequest = createRequestHook({ middleware: [RequestVue()] })
```

单文件组件中使用。
```html
<script setup lang='ts'>
import { useRequest } from 'hooks/useRequest'

// data: ref([])
// loading: ref(false)
// error: ref(undefined)
// params: ref([])
const { data, loading, error, params } = useRequest(() => Promise.resolve([]))
</script>

<template>
  <div>{{ data }}</div>
  <div v-if="loading">loading...</div>
</template>
```
npm package: @rhao/request-utils
Description: Utils of request.
Author: RayHao
Latest version: 2.0.1

# `@rhao/request-utils`

> ~~`@rhao/request` 工具包。~~

## 已废弃

推荐使用[`@rhao/lodash-x`](https://www.npmjs.com/package/@rhao/lodash-x)和[`lodash-unified`](https://www.npmjs.com/package/lodash-unified)搭配使用。
npm package: @rhao/types-base
Description: 基础通用类型定义。
Author: RayHao
Latest version: 1.8.0

# `@rhao/types-base`

`Typescript` 常用的类型工具。

## 迁移至 v1.x

- 移除 `Builtin` 类型
- 移除 `Getter`、`MaybeGetter` 类型，推荐使用 `Fn`、`MaybeFn` 替代
- `DeepReadonly` => `ReadonlyDeep`
- `DeepPartial` => `PartialDeep`
- `ElementOf` 支持数组、对象获取元素类型，单一获取推荐 `ArrayElementOf`、`ObjectElementOf`
- `RecordElementOf` => `ObjectElementOf`
- `Mutable` => `Writable`、`MutableWith` => `WritableWith`、`MutableWithout` => `WritableWithout`
- `IfUnknown`、`IfNever`、`IfEmpty` 默认成功和失败值改为 `true` 和 `false`
- `KeyOf` 默认不再限于 `string`
- 移除 `PromiseResult` 类型，推荐使用 `Awaited` 替代
npm package: @rhao/web-utils
Description: Generic functions of web.
Author: RayHao
Latest version: 0.6.1
Deprecated: @rhao/web-utils 已废弃，推荐使用 nice-fns，具体查看 README.md

# ~~@rhao/web-utils~~

> ***废弃声明：该包已被废弃，推荐使用 [`nice-fns`](https://www.npmjs.com/package/nice-fns)，拥有完整的单测和文档！***

#### 迁移至指南

安装 `nice-fns`

```shell
# npm
npm i nice-fns

# yarn or pnpm
pnpm add nice-fns
```

函数迁移指南：

1. `arrayToDictionary` 更改调用方式
2. `createBEM.is` => `classState.is`
3. `createDictionary` 更改调用方式
4. `cssVarNameFactory` => `cssVarName`
5. `getParentScroll` 更改调用方式
6. `isClient()` => `isClient`
7. `pxToXxx` 功能优化
8. `pxWithRatio` => `scalePx`
9. `saveAs` 优化
10. `unitToPx` 支持 `vmin`、`vmax`
npm package: @rhapsodic/nuxt-vuewer
Description: Nuxt module for viewing images
Author: rhapsodic.dev
Latest version: 1.3.3

# @rhapsodic/nuxt-vuewer

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]

> Image viewer for your [Nuxt](https://nuxt.com/)️ project

## Features

- 💪 &nbsp;Type safe integration of Vuewer into your project
- ✨ &nbsp;Viewing multiple or a single image
- 🕹️ &nbsp;A `useVuewer()` composable to access all of vuewer methods.

## Quick Setup

Install the module to your Nuxt application with one command:

```bash
npx nuxi module add @rhapsodic/nuxt-vuewer
```

That's it! You can now use Vuewer in your Nuxt app ✨

## Usage
```vue
<script setup>
const { open, close, isOpened } = useVuewer({
  images: [
    {
      url: 'https://placehold.net/2.png',
      thumbUrl: 'https://placehold.net/2-240x160.png',
    },
    'https://placehold.net/5-600x800.png',
    {
      url: 'https://placehold.net/7-600x800.png',
      thumbUrl: 'https://placehold.net/7-240x160.png',
    },
  ],
})

watch(isOpened, (newState) => {
  console.log(`Vuewer state: ${newState ? 'opened' : 'closed'}`)
})
</script>

<template>
  <div>
    <button @click="open">
      Open Vuewer
    </button>
  </div>
</template>
```

`images` supports both raw strings and objects with thumbnail overrides:
`string | { url: string, thumbUrl?: string }`.


## Development

```bash
# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release
```

## License

[MIT License](./LICENSE)

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@rhapsodic/nuxt-vuewer/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/@rhapsodic/nuxt-vuewer

[npm-downloads-src]: https://img.shields.io/npm/dm/@rhapsodic/nuxt-vuewer?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/@rhapsodic/nuxt-vuewer

[license-src]: https://img.shields.io/npm/l/@rhapsodic/nuxt-vuewer?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/@rhapsodic/nuxt-vuewer
npm package: @rharkor/logger
Description: A simple logger for all your applications
Author: HUORT Louis
Latest version: 1.3.3

# Logger 📝

Logger is an intuitive and robust tool tailored for logging messages across all your applications, whether it's a complex web application or a simple script. Ensure every important event is captured with Logger!

![Logger](./docs/demo.png)

## Features 🌟

- **Simple Integration:** Effortlessly embed Logger into your projects.
- **Versatile:** Suitable for both development and production environments.
- **Asynchronous Support:** Built to handle modern asynchronous JavaScript workflows.

## Installation 🔧

Install Logger with a simple command:

```bash
npm install @rharkor/logger
```

## Usage 🛠️

### Logger

To start using Logger in your project, simply import and utilize the logging functions as shown:

```typescript
import { logger } from "@rharkor/logger"

logger.log("This is a log message") // For general logs
logger.subLog("This is a sub log message") // For sub logs
logger.info("This is an info message") // For informational messages
logger.warn("This is a warning message") // For warnings
logger.error("This is an error message") // For errors
logger.success("This is a success message") // For success messages
logger.debug("This is a debug message") // For debugging messages
```

#### Debugging logs

Logger supports debugging logs, which are disabled by default. To enable debugging logs, set the `LOGGER_ENV` environment variable to `development` and it will automatically enable debugging logs. If the environment variable is not set, Logger will default to `production` and debugging logs will be disabled.

## Common Issues and Troubleshooting 🔍

Encountering the warning `Logger is not initialized yet. Please call and await logger.init()`? This means you're attempting to log a message before Logger is ready. Initialization typically completes in under a second.

**Remember: Logger initializes automatically upon import.**

### Resolution Steps

To fix initialization issues, make sure to await the `init()` method before logging:

```typescript
import { logger } from "@rharkor/logger"

async function main() {
  await logger.init()
  logger.info("This is an info message")
}

main()
```

### Explanation

To accommodate CommonJS compatibility, we asynchronously load dependencies like `chalk`. This setup requires that Logger isn't instantly ready upon import.

## License 📄

This project is distributed under the MIT License. For more details, see the [LICENSE](LICENSE) file in the repository.

This enhanced README not only clarifies usage but also incorporates emojis to make it more engaging and reader-friendly.
npm package: @rharkor/task
Description: Track task progress of your scripts
Author: HUORT Louis
Latest version: 1.0.1

# Task 📝

Task is an intuitive and robust tool for logging messages and tracking task progress of your scripts. It's designed to be simple to integrate and provides a variety of logging options to suit your needs.

_Based on the original [Logger](https://github.com/rharkor/logger) project._

[Task demo](https://github.com/user-attachments/assets/6ca18935-07f5-4266-8989-a5190f703053)




## Features 🌟

- **Simple Integration**: Easily add Task to your project with a single command.
- **Customizable Logging**: Choose from a variety of logging options to suit your needs.
- **Task Tracking**: Monitor task progress with Task's built-in tracking capabilities.

## Installation 🔧

Install Task with a simple command:

```bash
npm install @rharkor/task
```

## Usage 🛠️

### Task

To start using task in your project, simply import and use the logging functions as shown:

```typescript
import { task } from "@rharkor/task"

const task1 = await task.startTask({
  name: "Task 1",
})
for (let i = 0; i < 50; i++) {
  task1.log("This is a task message " + i)
  await new Promise((resolve) => setTimeout(resolve, 50))
}
task1.stop("Task 1 is done")
```

## License 📄

This project is distributed under the MIT License. For more details, see the [LICENSE](LICENSE) file in the repository.

This enhanced README not only clarifies usage but also incorporates emojis to make it more engaging and reader-friendly.