open-index/open-npm huggingface dataset:
npm package: @rpeterson/frontier-forms
Description: The smartest web-forms.
Author: Charly POLY
Latest version: 0.1.4

# Frontier forms [![npm version](https://badge.fury.io/js/frontier-forms.svg)](https://badge.fury.io/js/frontier-forms)

Data-driven forms that let you focus on what matters: your application.

Provide a `GraphQL` mutation and `<Frontier/>` will do the rest for you.

Both fast to use and performant ⚡!

➡️ [See all capabilites by watching the introduction talk from React Europe 2019!](https://www.youtube.com/watch?v=Ovg9CYwWFBM&list=PLCC436JpVnK3H8Gm28TuFn2wjL9sj_q_Y&index=5&t=0s)

```js
import gql from "graphql-tag";
import { Frontier } from "frontier-forms";
import { myApplicationKit } from "./uiKit";
import { client } from "./apollo-client";

const mutation = gql`
    mutation($user: User!) {
      createUser(user: $user) { id }
    }
`;

<Frontier
  client={client}
  mutation={mutation}
  uiKit={myApplicationKit}
/>
```



<ul>
  <li>
    <h3>
      Simple
    </h3>
    <p>
      <strong>You already know how to use Frontier</strong>, because it works like other form libraries. <br/>
      More, Frontier will bring you the full data lifecycle management, <strong>with zero configuration</strong>.
    </p>
  </li>

  <li>
    <h3>
      Scalable
    </h3>
    <p>
      Just define your <strong>Application Frontier UI-kit</strong>. <br/>
      Then, take advantage of the <strong>UI-kit full rendering feature</strong> to bring consistent UX to your users.
    </p>
  </li>

  <li>
    <h3>
      Iterative
    </h3>
    <p>
      <strong>Choose your way</strong> to build forms, with or without Frontier UI-kit. <br/>
      Frontier will <strong>adapt to your needs</strong>.
    </p>
  </li>
</ul>

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

## Installation

In order to use Frontier, you will need:

- `react` (`^16.8.6`)
- `apollo-client` (`^2.5.1`)
- `graphql-tag` (`^2.10.1`)

<br />

Then, install `frontier-forms`:

```
yarn add frontier-forms
```

*OR*

```
npm i frontier-forms
```


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

## Links

- [What is Frontier](https://frontier-forms.dev/what-is-frontier)
- [Getting started](https://frontier-forms.dev/getting-started)
- [Frontier UI-Kit](https://frontier-forms.dev/frontier-ui-kit)
- [API: `<Frontier>`](https://frontier-forms.dev/api/frontier-component)
- [API: Frontier UI-Kit](https://frontier-forms.dev/api/frontier-ui-kit)
npm package: @rpgjs/fx
Description: ## Installation
Author: Samuel Ronce
Latest version: 4.3.0

# Emotion Bubble Plugin

## Installation

`npm install @rpgjs/plugin-emotion-bubbles`

and

```ts
import emotionBubblesPlugin from '@rpgjs/plugin-emotion-bubbles'

export default [
    emotionBubblesPlugin
]
```

Add in the file `plugins.ts`

## To use the plugin

Use the `showAnimation` command to display the animation

```ts
player.showAnimation('bubble', 'like')
```
npm package: @rpgjs/interpreter
Description: ## Goal
Author: Samuel Ronce
Latest version: 4.2.2

# RPGJS Interpreter

## Goal

The aim is to interpret JSON to trigger server-side commands.
What's the point? This allows you to launch commands on the fly, via an HTTP request for example, without having to write them in hard code.
It gives you greater flexibility. What's more, we can imagine a graphical game editor mode that constructs the events

## Installation

`npm install @rpgjs/interpreter`

## Usage

Example:

```ts
// in player.ts
import { RpgInterpreter} from '@rpgjs/interpreter'
import { RpgPlayer, RpgPlayerHooks } from '@rpgjs/server'


const blocks = {
    block1: {
        id: 'text',
        text: 'Hello World'
    },
    block2: {
        id: 'change_gold',
        value: 10
    },
    block3: {
        id: 'choice',
        text: 'Please ?',
        choices: 1
    },
    block4: {
        id: 'text',
        text: 'Thanks'
    },
    block5: {
        id: 'text',
        text: 'Ok...'
    }
}

const edges = {
    'block1': 'block2',
    'block2': 'block3',
    'block3': {
        blocks: [{
            blockId: 'block5',
            handle: 'choices.0'
        }]
    }
}

const interpreter = new Interpreter(blocks, edges)

const player: RpgPlayerHooks = {
    onConnected(player: RpgPlayer) {
        interpreter
            .start({
                block: 'block1',
                player
            })
            .subscribe()
    }
}

export default player
```
npm package: @rpgjs/plugin-emotion-bubbles
Description: ## Installation
Author: Samuel Ronce
Latest version: 4.2.2

# Emotion Bubble Plugin

## Installation

`npm install @rpgjs/plugin-emotion-bubbles`

and

```ts
import emotionBubblesPlugin from '@rpgjs/plugin-emotion-bubbles'

export default [
    emotionBubblesPlugin
]
```

Add in the file `plugins.ts`

## To use the plugin

Use the `showAnimation` command to display the animation

```ts
player.showAnimation('bubble', 'like')
```
npm package: @rpgjs/runtime
Description: This package allows you to easily transform the RPGJS engine into standalone mode, making it a breeze to integrate into your web applications. To get started, follow the simple steps below:
Latest version: 4.2.2

# RPGJS Standalone Mode Package

This package allows you to easily transform the RPGJS engine into standalone mode, making it a breeze to integrate into your web applications. To get started, follow the simple steps below:

## Installation

Add the following CDN links and code to your HTML file:

```html
<!-- Include Vue.js (required for RPGJS) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.4/vue.global.min.js"
    integrity="sha512-Wbf9QOX8TxnLykSrNGmAc5mDntbpyXjOw9zgnKql3DgQ7Iyr5TCSPWpvpwDuo+jikYoSNMD9tRRH854VfPpL9A=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Include RPGJS runtime -->
<script src="browser/rpg.runtime.umd.js"></script>

<!-- Create a container for the RPGJS game -->
<div id="rpg"></div>

<script>
    RPG.run([
        {
            server: {
                engine: {
                    onStart() {
                        console.log('RPG engine started')
                    }
                },
                player: {
                    onConnected(player) {
                        console.log('Player connected', player.id)
                    }
                }
            },
            client: {
                // Add your client-side configuration here
            }
        }
    ])
</script>
```

## Usage

The `RPG.run()` method is used to configure and start the RPGJS engine in standalone mode. It accepts an array of objects, where each object represents a module configuration with both server and client settings.

- `server`: This section is for server-side configurations.
- `client`: This section is for client-side configurations. You can add your client-specific settings here.

Feel free to customize these configurations to suit your RPGJS project's needs.

With these simple steps, you can easily transform the RPGJS engine into standalone mode for your web applications. Happy gaming! 🎮

## Development mode

to create the file:

```bash
npm run build
```
npm package: @rpgjs/sync-server
Description: ## Server
Author: Samuel Ronce
Latest version: 3.0.0-rc

# How use it ?

## Server

1. Create just a class :

```js
class Page {

}
```

2. Add this room in World:

```js
import { World } from './world'

World.transport(io) // io is socket.io variable
const room = Word.addRoom('room_id', new Page())
```

3. Send packets to client:

```ts
setInterval(() => {
    World.send()
}, 20)
```

## Client

With `socket.io`

```html
<script src="sync-client.js"></script>
```

```js
const socket = io()
socket.emit(':join', 'room_id')
World.listen(socket).value.subscribe((val: { data: any, partial: any }) => {
    console.log(val)
})
```

# Add Room Properties:

```js
class Page {
    $schema = {
        title: String
    }
    title = ''
}
```

After adding the room, if you change the property, it will be transmitted to everyone.


```js
const room = Word.addRoom('room_id', Page)
room.title = 'my app' // is send to users in room
```

# Define Schema

## Normal Schema

Typescript
```ts
@Schema({
    title: String
})
export class Page {
    title: string = ''
}
```

Javascript
```js
export class Page {
    $schema = {
        title: String
    }
    title = ''
}
```

## Array Properties

Typescript
```ts
@Schema({
     list: [String]
})
export class Page {
    title: string[] = ['yo']
}
```

Javascript
```js
export class Page {
    $schema = {
        list: [String]
    }
    title = ['yo']
}
```

## with collection :

Typescript
```ts
@Schema({
     list: [{ id: Number, name: String }]
})
export class Page {
    list: { id: Number, name: String }[] = []
    constructor() {
        this.list.push({
            id: 1,
            name: 'yo'
        })
    }
}
```

Javascript
```js
export class Page {
    $schema = {
        list: [{ id: Number, name: String }]
    }
    list = []
    
    constructor() {
        this.list.push({
            id: 1,
            name: 'yo'
        })
    }
}
```

## Object generic key

Typescript
```ts
@Schema({
     list: [{ id: Number }]
})
export class Page {
    list: any = {}
    constructor() {
        this.list['mykey'] = {
            id: 1
        }
    }
}
```

Javascript
```js
export class Page {
    $schema = {
        list: [{ id: Number }]
    } 
    list = {}
    
    constructor() {
        this.list['mykey'] = {
            id: 1
        }
    }
}
```
npm package: @rpgjs/vite
Description: Vite plugins for RPGJS
Latest version: 5.0.0-beta.1

# @rpgjs/vite

Plugins Vite pour RPGJS.

## dataFolderPlugin

Plugin qui permet de servir un dossier de données en mode développement et de le copier dans le dossier assets lors du build.

### Utilisation

```typescript
import { defineConfig } from 'vite';
import { dataFolderPlugin } from '@rpgjs/vite';

export default defineConfig({
  plugins: [
    dataFolderPlugin({
      sourceFolder: './game-data',
      publicPath: '/data',
      buildOutputPath: 'assets/data'
    })
  ]
});
```

### Options

- `sourceFolder` (string) : Dossier source contenant les fichiers de données (TMX, TSX, images)
- `publicPath` (string, optionnel) : Préfixe du chemin public pour accéder aux fichiers de données (défaut: '/data')
- `buildOutputPath` (string, optionnel) : Dossier cible dans la sortie de build (défaut: 'assets/data')
- `allowedExtensions` (string[], optionnel) : Extensions de fichiers autorisées (défaut: ['.tmx', '.tsx', '.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg'])

### Fonctionnement

**Mode développement :**
- Sert les fichiers via un middleware Vite
- Accessible via des requêtes HTTP au chemin public configuré
- Exemple : `http://localhost:3000/data/maps/level1.tmx`

**Mode build :**
- Copie automatiquement tous les fichiers autorisés dans le dossier de sortie
- Les fichiers sont disponibles dans le dossier `assets/data` du build final

### Types de fichiers supportés

- **TMX** : Fichiers de cartes Tiled
- **TSX** : Fichiers de tilesets Tiled  
- **Images** : PNG, JPG, JPEG, GIF, WebP, SVG 
## directivePlugin

Plugin inspiré de Next.js permettant d'utiliser les directives `use client` et `use server` afin de générer un code différent selon le côté client ou serveur.

### Utilisation

```typescript
import { defineConfig } from 'vite'
import { directivePlugin } from '@rpgjs/vite'

export default defineConfig({
  plugins: [
    directivePlugin({ side: 'client' }) // ou 'server'
  ]
})
```

La directive placée en début de fichier ou au sein d'une fonction permet d'inclure ou non le code lors de la transformation.
npm package: @rpglogs/api-sdk
Description: Sends HTTP requests to the RPGLogs v2 API.
Author: RPGLogs LLC
Latest version: 2.0.0

# RPGLogs API SDK

Install the API SDK in your project:

```
npm install --save @rpglogs/api-sdk
```

Import the SDK builder function:

```js
import { buildSdk } from "@rpglogs/api-sdk";
```

Build an SDK by providing an access token:

```js
// Default game is Retail Warcraft
const retailWarcraftSdk = buildSdk(accessToken);

// But you can specify particular games
const classicWarcraftSdk = buildSdk(accessToken, 'classic.warcraft');
const vanillaWarcraftSdk = buildSdk(accessToken, 'vanilla.warcraft');
const ffSdk = buildSdk(accessToken, 'ff');
const esoSdk = buildSdk(accessToken, 'eso');
const swtorSdk = buildSdk(accessToken, 'swtor');
```

Use methods on the SDK to call the RPGLogs API:

```js
const response = await sdk.getGuild({
  guildName: 'Reaction',
  guildServerSlug: 'Kazzak',
  guildServerRegion: 'EU',
  includeAttendance: false,
  includeServer: true,
  includeMembers: false,
  includeTags: false
});

const guild = response?.guildData?.guild;
```

Easy!

> You can use the `include*` variables to include nested child data. Only set these to true if you actually need the data, as it will use up more of your rate limit!

Check out the [sample application](https://github.com/RPGLogs/RPGLogsApiSampleApp) to see how to handle different error scenarios,
as well as an example of getting an access token through the client credentials flow.

You can use this SDK to get all sorts of information from the API.
This list of methods gives a good idea of what data you can retrieve:

* `getAbility`
* `getAchievement`
* `getAffixes`
* `getCharacter`
* `getCharacterEncounterRankings`
* `getCharacterZoneRankings`
* `getClasses`
* `getEnchant`
* `getEncounterCharacterRankings`
* `getEncounterFightRankings`
* `getFactions`
* `getGuild`
* `getGuildReports`
* `getItem`
* `getNpc`
* `getProgressRace`
* `getRateLimit`
* `getReportEvents`
* `getReportFights`
* `getReportGraph`
* `getReportRankedCharacters`
* `getReportTable`
* `getReportPlayerDetails`
* `getUserReports`
* `getZones`

There is also formal [documentation for this library](https://rpglogs.github.io/RPGLogsApiSdk/).

### Roadmap

There are still some high-level features that would be good to add:

- [ ] Include game-specific fields so that no data is missing for FF, ESO etc
- [ ] Add support for just using the generator part of the library and specifying your own GraphQL queries
- [ ] Add support for other programming languages supported by `graphql-codegen` (C#, Java)

### Developing in this repository:

```bash
# Install dependencies
yarn install

# Now you can run various yarn commands:
yarn generate
yarn test
yarn build-all
yarn ts-node <filename>
yarn esbuild-browser
...
```