open-index/open-npm huggingface dataset:
npm package: @su-hooks/use-coords
Description: React hook to get user's current coordinates
Author: Hyesu Hong
Latest version: 1.1.0

# @su-hooks/use-coords

React hook to get user's current coordinates

## Installation

#### npm

`npm i @su-hooks/use-coords`

## Usage

```javascript
import React from "react";
import useCoords from "@su-hooks/use-coords";

function App() {
	const {coords, loading, error, getPosition} = useCoords();

	return (<div>
		<button onClick={getPosition}>Click Me!</button>
		<p>
			{loading ? 'loading...' : 'done!'}
		</p>
		{coords && (
			<p>lat: {coords.latitude}</p>
			<p>lon: {coords.longitude}</p>
		)}
		{error && (
			<p>error code: {error.code}</p>
			<p>error message: {error.message}</p>
		)}
	</div>)
}
```

### Returns

| Return value | Type     | Description                                                                                                                                                                                        | Default value |
| ------------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| loading      | Boolean  | A boolean representing if the Geolocation API loading.                                                                                                                                             | false         |
| error        | Object   | An object representing error code and error message. If you want the error code's meaning, get information from [here](https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPositionError). | null          |
| coords       | Object   | This has latitude and longitude information.                                                                                                                                                       | null          |
| getPosition  | function | Function wrapped around the Geolocation API's getCurrentPosition function logic.                                                                                                                   | null          |
npm package: @su-hooks/use-form
Description: Custom React hook to use form with input validator
Author: Hyesu Hong
Latest version: 0.0.3

# @su-hooks/use-form

Custom React hook to use form with **input validator**

<!-- ## Installation -->

## Usage

```ts
import useForm, { inputProps } from '@su-hooks/use-form';

export default function App() {
	const inputs: inputProps = {
		email: {
			value: initialValue,
			validator: (value) => value.indexOf('@') > -1,
		},
		password: { value: initialValue, validator: (value) => value.length > 7 },
	};

	const submitHandler = () => {
		// do something...
	};

	const { form, handleChange, handleSubmit, isFormValid } = useForm({
		inputs,
		submitHandler,
	});

	return (
		<form onSubmit={handleSubmit}>
			<input
				type='email'
				name='email'
				value={form.email.value}
				onChange={handleChange}
				required
			/>
			<InputField
				type='password'
				name='password'
				value={form.password.value}
				onChange={handleChange}
				required
			/>
			<button disabled={!isFormValid}>Submit</button>
		</form>
	);
}
```

## Properties

| Name          | Type       | Required | Default |
| ------------- | ---------- | :------: | ------- |
| inputs        | inputProps |    ○     | null    |
| submitHandler | Function   |    ✕     | null    |

- inputs

  - `key`: `key` has to be same with input's `name`. If they are different, never change input state.
  - `value`: initial input value.
  - `validator`: validator function is an optional property. If it is null, that input's validation is always `true`.

  ```ts
  type validator = (value: string) => boolean;

  interface inputProps {
  	[key: string]: { value: string; validator?: validator };
  }
  ```

- `submitHandler`: When submit event is fired, this function will be executed.

## Returns

| Name         | Type        | Description                            |
| ------------ | ----------- | -------------------------------------- |
| form         | Object      | input's information(value, validation) |
| handleChange | ChangeEvent | input change event                     |
| handleSubmit | SubmitEvent | form submit event                      |
| isFormValid  | Boolean     | form validation                        |
npm package: @su-hooks/use-intersection
Description: React hook to use intersection API
Author: Hyesu Hong
Latest version: 1.1.1

# @su-hooks/use-intersection

React hook to use Intersection API

## Installation

#### npm

`npm i @su-hooks/use-intersection`

## Usage

```typescript
import react from 'react';
import useIntersection from '@su-hooks/use-intersection';

function App() {
	const callbackIntersection = (entries, observer) => {
		// something...
	};
	const ref = useIntersection<HTMLDivElement>({
		callbackIntersection,
		rootMargin: ['-50%', 0],
		thresholds: [0, 1],
	});

	return <div ref={ref}>this is target element</div>;
}
```

### Properties

| Name               | Type                 | Required | Default          |
| ------------------ | -------------------- | :------: | ---------------- |
| root               | HTMLElement          |    ✕     | browser viewport |
| rootMargin         | <string \| number>[] |    ✕     | 0                |
| thresholds         | number \| number[]   |    ✕     | 0                |
| handleIntersection | Function             |    ○     | null             |

<details>
	<summary>root</summary>

- Element used as the viewport. If it is not specified or is `NULL`, default value is browser's viewport.

</details>

<details>
	<summary>rootMargin</summary>
	
	
 - Offsets from the root
 - Type definition

```typescript
type marginType = number | string;
type IntersectionMargin =
	| [marginType]
	| [marginType, marginType]
	| [marginType, marginType, marginType]
	| [marginType, marginType, marginType, marginType];
```

- Margin Array order is same as `CSS margin` order
- If property sent as `number`, the unit is considered `px`.
- If property sent as `string`, the unit must be `px` or `%`.
</details>

<details>
	<summary>thresholds</summary>

- Value representing `percentages` of the target element which are visible.
</details>

<details>
	<summary>callbackIntersection</summary>
	
- When occured intersection, use this handling function
- Type Definition

```typescript
type IntersectionHandler = (
	entries: IntersectionObserverEntry[],
	observer: IntersectionObserver
) => void;
```

- entiries: observer's target element array
</details>

If you want more information of Intersection API, please visit **[here](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)**

### Returns

| Return | Type      | Description                    |
| ------ | --------- | ------------------------------ |
| ref    | RefObject | Intersection Observer's target |
npm package: @su-lab-28/ng-form-error
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 1.0.1

# ng-form-error

This library was generated with [Nx](https://nx.dev).

## Intorduction

This Angular library simplify the show proscess for errors.

### Use 
#### ts component
```
... --others imports
import { FormBuilder, Validators } from '@angular/forms';
import { FormErrorComponent } from '@su-lab-28/ng-form-error';
@Component({
    selector: 'lib-form-element',
    imports: [
        ...
        FormErrorComponent
    ],
})
export class someoneComponent{
    _fb$:FormBuilder = inject(FormBuilder);
    form = this._fb$.group(
        {
            text:[null, Validators.required]
        }
    );
}
```
#### html 
```
    <input type="text" formControlName="text">
    <lib-form-error [control]="form.controls['text']"/>
```

The display messages can be updated by setting the values in the localStorage item "form_validation".
ts
 ```
    const messages = {
    "required": "Value required",
    "minlength": "Minleng required",
    "maxlength": "maxleng required",
    "min": "No min required",
    "max": "Max required",
    "email": "No email",
    "mustMatch": "No match",
    "invalidNumber": "No number",
    "pattern": "Strucuture no valid",
    "confirmedValidator": "No confirmed"
}

localStorage.setItem('form_validation', JSON.stringify(messages));
 ```
npm package: @su-lab-28/ng-generic-form-primeng
Description: This Angular library was developed to accelerate form creation. The core idea is to build forms based on a JSON object structure, with all components being generated using [PrimeNG](https://primeng.org/).
Latest version: 1.0.7

# ng-generic-form-primeng

## Introduction
This Angular library was developed to accelerate form creation. The core idea is to build forms based on a JSON object structure, with all components being generated using [PrimeNG](https://primeng.org/).


## Building simple form example
#### ts file
```
export class ...
form = {
    input1:"hola",
    input2: "hola2"
};
buttons = [
    {
      type: 'save',
      text: 'SAVE',
      command: (val) => {
        this.guardar();/// this function must exists in your component
      },
    }
];
```
#### html template 
```
<lib-generic-form #formb [form]="form" [(value)]="valueForm" tittle="Someone tittle" [buttons]="buttonsForm"></lib-generic-form>
```

The component uses the Tailwind CSS grid system for its styles. This can be configured either through a global provider or by defining the classContent and classItem parameters.

#### in params:
```
<lib-generic-form #formb [form]="form" [(value)]="valueForm" tittle="Someone tittle" [buttons]="buttonsForm" [classContent]="'row'" [classItem]="'col-6'"></lib-generic-form>
```
#### in provider
```
providers:[
    {provide:GENERIC_FORM_OPTIONS, useValue:{classContent:'row',classItem:'col-6'}}
]
```

## Advanced Form
You can create a more customizable form by building a JSON configuration.
#### ts file
```
form = {
        id: new FormElement({
        type: 'number',
        required: false,
        visible: false,
        }),
        code: new FormElement({ label: 'codigo', type: 'text', required: true }),
        estatusId: new FormElement({
        label: 'estatus',
        type: 'select',
        required: true,
        }),
        name: new FormElement({
        label: 'nombre rol',
        type: 'text',
        required: true,
        colsClass: 'col-span-12',
        })
    }
```
All configuration is defined in the FormElementConfig interface.
npm package: @su-nakano/eeyan
Description: 文字の末尾にええやんをつけて返してくれる
Latest version: 2.0.0

# eeyan
ええやんと褒めてくれるnpm package

https://img.shields.io/badge/eeyen-%E3%81%88%E3%81%88%E3%82%84%E3%82%93-brightgreen
npm package: @su14iman/typo3-connector
Description: TYPO3-Headless Connector for Typescript
Author: Sulaiman Sulaiman
Latest version: 1.0.5

# typo3-connector
The T3Connector class is designed to facilitate making HTTP requests to an API. It encapsulates the functionality needed to build and execute these requests in a fluent and flexible manner.

# Requirements
- TYPO3 v11 >=
- [friendsoftypo3/headless](https://extensions.typo3.org/extension/headless)

## How to use:
```typescript
import T3Connector from "@su14iman/typo3-connector";

const connector = new T3Connector(`https://headless-typo3.typo3.su14iman.local`);

connector.query({
    path: "/"
})
.method("GET")
.cached()
.fetch<T3ContentElements[]>()
.then((res) => {
    console.log(res['id']);
});
```

## Functions

#### - `query({ path, uri, options } : { path?: string, uri?: string, options?: RequestInit })`
>to start new query and clear old path and old uri <br/>
 - @return **T3Connector**




#### - `cached()`
>to set cache in fetch options <br/>
- @return **T3Connector**

#### - `method(method: string)`
> to set method - GET | POST | PUT | DELETE
- @return **T3Connector**

#### - `data(data: Object)`
>to set data in fetch options <br/>
- @param  **Object** data
- @return **T3Connector**


#### - `requestParser()`
>to parse request, **but you do not need to add it to the query, it was added to be used with tests**
- @return **T3Connector**

#### - `fetch<T>(options?: RequestInit)`
>to fetch data from API
- @return **T3Connector**





## Contributing
1. Fork the repository
2. Create a new branch (`git checkout -b feature/your-feature`)
3. Commit your changes (`git commit -am 'Add your feature'`)
4. Push to the branch (`git push origin feature/your-feature`)
5. Create a new Pull Request


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