open-index/open-npm huggingface dataset:
npm package: @garph/gqty
Description: tRPC-style client for Garph
Latest version: 0.4.5

# @garph/gqty

[tRPC](https://github.com/trpc/trpc)-style client for [Garph](https://github.com/stepci/garph), based on [GQty](https://github.com/gqty-dev/gqty)

```
npm i @garph/gqty
```

Example:

**schema.ts**

```ts
import { g, buildSchema } from 'garph'

export const queryType = g.type('Query', {
  greet: g.string()
    .args({
      name: g.string().optional().default('Max'),
    })
    .description('Greets a person')
})

const schema = buildSchema({ g })
```

**client.ts**

```ts
import { InferClient, createClient } from '@garph/gqty'
import { createScalarsEnumsHash, createGeneratedSchema } from '@garph/gqty/dist/utils'
import { schema, queryType } from './schema'

type ClientTypes = InferClient<{ query: typeof queryType }>

export const { useQuery, ... } = createClient<ClientTypes>({
  generatedSchema: createGeneratedSchema(schema),
  scalarsEnumsHash: createScalarsEnumsHash(schema),
  url: 'http://localhost:4000/graphql'
})

// Needed for the babel plugin
export { schema as compiledSchema }
```

Using the client (React):

**query.tsx**

```tsx
import { useQuery } from './client'

export default function Example() {
  const query = useQuery()
  return <p>{ query.greet({ name: 'Mish' }) }</p>
}
```

## Subscriptions

### With Server-Sent-Events

```
npm i graphql-sse
```

```ts
import { createClient as createSubscriptionsClient } from 'graphql-sse'

export const { useSubscription, ... } = createClient<ClientTypes>({
  generatedSchema: createGeneratedSchema(schema),
  scalarsEnumsHash: createScalarsEnumsHash(schema),
  url: 'http://localhost:4000/graphql',
  subscriptionClient: createSubscriptionsClient({
    url: process.env.NODE_ENV === 'production' ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/api/graphql/stream` : 'http://localhost:3000/api/graphql/stream'
  })
})
```

## Using the Babel plugin (alpha)

In production, you might want to use the babel plugin in order to replace the runtime dependencies (such as `generatedSchema`, `scalarsEnumsHash`) in your client config with statically-generated artefacts.

**.babelrc**

```json
{
  "plugins": [["@garph/gqty/dist/plugin", {
    "clientConfig": "./utils/client.ts"
  }]]
}
```

Where `clientConfig` is the path to the file where you call `createClient`

*Special thanks to Vicary of GQty project for early feedback and helping to make `@garph/gqty` possible*
npm package: @garphild/garphild-ui
Description: Some UI components
Author: Serhii Kondrashov
Latest version: 1.0.4

UI KIT for some unusual features

Components:
* ClipboardToApi

#ClipboardToApi
Get a files/images from clipboard and send they to remote REST api.
##Usage
```jsx
import { ClipboardToApi } from '@garphild/garphild-ui';
or
import ClipboardToApi from '@garphild/garphild-ui/ClipboardToApi';

<ClipboardToApi apiUrl="/api/uploads" enabled>
  ...
</ClipboardToApi>
```
## Properties
* apiUrl - URL of remote api
* enabled - allow intercept paste event

## Callbacks
* onFileFound - fires when paste event detected and clipboard has files/images before upload
* onUploadFail - fires when remote api response is not 2xx
* onUploadSuccess - fires when upload is successful

```jsx
<ClipboardToApi
  apiUrl="/api/uploads"
  enabled
  onFileFound={(file) => { /* Do something */ }}
  onUploadFail={(error, file) => { /* Do something */ }}
  onUploadSuccess={(responce, file) => { /* Do something */ }}
>
  ...
</ClipboardToApi>
```
npm package: @garphild/googledrive-client
Description: ```js const { downloadFileById } = await googleApi(path.join(__dirname, 'jwt.keys.json')); ``` ## Download file from google drive ```js const result = await downloadFileById("XXXX-YYY", "./tmp/tmp.jpg"); /**  * {  *   status: "success" | "fail",  *   mess
Latest version: 1.0.3

# Usage
## Init
```js
const { downloadFileById } = await googleApi(path.join(__dirname, 'jwt.keys.json'));
```
## Download file from google drive
```js
const result = await downloadFileById("XXXX-YYY", "./tmp/tmp.jpg");
/**
 * {
 *   status: "success" | "fail",
 *   message: <string> - error message
 *   err: error object
 *   filePath: <string> - path to file
 * }
 */
```

Promise-based:
```js
googleApi(path.join(__dirname, 'jwt.keys.json'))
  .then((myApi) => {
    const resp = myApi.downloadFileById('15j2wx4QHnLTKMVJnwsxjSm-z7uPP2lfN', './tmp/main2.jpg');
    return resp;
  })
  .then((resp) => {
    ...
    /**
     * {
     *   status: "success" | "fail",
     *   message: <string> - error message
     *   err: error object
     *   filePath: <string> - path to file
     * }
     */
  })
  .catch((e) => {
    ...
  });
```
npm package: @garphild/react-editable-input
Description: Simple React component. Show editable field on text click.
Author: Serhii Kondrashov
Latest version: 1.0.5

Simple React component. Show editable field on text click.

## Install
`yarn add @garphild/react-editable-input`

OR

`npm install @garphild/react-editable-input --save`

## Usage

```
import React from 'react';
import ReactEditableInput from '@garphild/react-editable-input';

class View extends React {
  state = {
    editMode: false,
    value: 'test',
  };

  toggleEditMode = () => {
    const { editMode } = this.state;
    this.setState({
      editMode: true,
    });
  };
  
  onEditEnd = () => {
    this.setState({
      editMode: false,
    });
  };
  
  onEditChange = (e) => {
    this.setState({
      value: e.currentTarget.value,
    });
  };

  render() {
    const {
      editMode,
      value,
    } = this.state;
    return (
      <>
        <ReactEditableInput
          value={value}
          toggleEditMode={this.toggleEditMode}
          editMode={editMode}
          changeListener={this.onEditChange}
          onEditEnd={this.onEditEnd}
          disabled={false}
          fullwidth={true}
          disabled={false}
          rootContainerClass=""
          rootContainerEditClass=""
          label="Test label"
          id="test-id"
        />
      </>
    );
  }
}
```

## Props
* value (Default: '') - Current text for field.
* disabled (Default: false) - Disable edit text in input
* rootContainerClass (Default: '') - Class for root container (div)
* rootContainerEditClass (Default: '') - Additional class for root container edit mode.
* changeListener (Default: empty function) - Listener for any text changes in input field.
* onEditEnd (Default: empty function) - Fired if Enter pressed or editable field lose a focus
* editMode (Default: false) - Flag for edit or plain text mode
* toggleEditMode (Default: empty function) - Callback fired on container click
* useDefaultTheme (Default: true) - Enable/disable to use default CSS theme.
* fullwidth (Default: true) - Stretch input to container
* showLabelAlways (Default: true) - Show label for text and input or for input only  
* label (Default: '') - Label text
* id (Default: '') - HTML id property for input

## Changes
See CHANGELOG.md
* 2019-01-10 v.1.0.5
* 2019-01-10 v.1.0.4
npm package: @garpix/base-api
Description: garpix base-api
Author: anatoly
Latest version: 1.2.0

# Base Api

Модуль предназначен для создания единой точки входа при создании клиентского API.

# Установка

Выполнить
```
yarn add @garpix/base-api
```

## Пример использования

```js
import BaseApi from '@garpix/base_api';

class Api extends BaseApi {

}
```

# Changelog

See [CHANGELOG.md](CHANGELOG.md).

# Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md).

# License

[MIT](LICENSE)
npm package: @garpunkal/gridsome-source-devto
Description: dev.to source plugin for gridsome
Author: @garpunkal
Latest version: 0.1.2

# @garpunkal/gridsome-source-devto

> Gridsome plugin to retrieve posts from https://dev.to.

## Install

```bash
yarn add @garpunkal/gridsome-source-devto
```

or

```bash
npm install @garpunkal/gridsome-source-devto
```

## Usage

- Get an API Key from https://dev.to/settings/account
- Add the plugin config inside `gridsome.config.js` plugins array.

<details open><summary><code>gridsome.config.js</code></summary>

```js
module.exports = {
  plugins: [
    ...other gridsome plugins
   {
      use: '@garpunkal/gridsome-source-devto',
      options: {
        typeName: 'Article',
        apiKey: process.env.DEVTO_API_KEY, //get your API key from https://dev.to/settings/account
      }
    }
  ]
}
```

</details>

## Loop Query

Inside `<page-query>` add the following query to get all articles from http://dev.to

<details open>
<summary> <code>./src/Pages/Index.vue </code></summary>

```html
<template>
	<Layout>
		<div v-for="{ node } in $page.allArticle.edges" :key="node.id">
			<g-link :to="node.path" class="single-post-link"> {{node.title}}</g-link>
		</div>
	</Layout>
</template>

<page-query> query Home($page: Int) { allArticle { edges { node { id title published_at description tag_list canonical_url cover_image } } } } </page-query>

<script>
	export default {
		metaInfo: {
			title: "Welcome to my blog :)",
		},
	};
</script>
<style lang="scss" scoped></style>
```

</details>

## Single Article

Normally, you need to create a `[typeName].vue` inside `./src/templates` of your gridsome project.
and then add the query for the post details.

 <details open>
 <summary><code>./src/templates/Article.vue</code></summary>

```vue
<template>
	<Layout>
		{{ $page.article }}
	</Layout>
</template>

<page-query>
query Post($path: String!) {
    article(path: $path) {
       id
        title
        published_at
        description
        tag_list
        canonical_url
        cover_image
    }
}
</page-query>

<script>
export default {
	data() {
		return {
			headings: NodeList,
		};
	},
	metaInfo() {
		return {
			title: this.$page.article.title,
		};
	},
};
</script>

<style lang="scss" scoped></style>
```

 </details>
npm package: @garpunkal/punk-dynamic-modules
Description: A typescript dynamic modules importer with html attribute
Author: @garpunkal
Latest version: 1.0.5

# @garpunkal/punk-dynamic-modules

> A Typescript modules that allows you to dynamically import modules via html attribute

## Install

```bash
yarn add @garpunkal/punk-dynamic-modules
```

or

```bash
npm install @garpunkal/punk-dynamic-modules
```

## Usage

A the following to your entry typescript file.

Provide the following attributes: 

1. the HTML attribute used to dynamically call modules
2. the path of the typescript module files
3. the extension of the module files

```ts
import dynamicImports from '@garpunkal/punk-dynamic-modules';
dynamicImports("data-js", "/src/ts/modules/", "ts");
```

To use the module in HTML, simple add the module name in the HTML element using the dynamic attribute: 

```html
<div data-js="Carousel">
...
</div>

```

# Credit
Created by: Joe Diton: https://www.joontide.co.uk

Packaged by: Gareth Wright: https://garpunkal.dev

# License
MIT
npm package: @garraflavatra/chowchow
Description: Efficient and customisable caching made easy.
Author: Romein van Buren
Latest version: 1.1.1

# Chowchow

[![API docs](.github/api.svg)](https://garraflavatra.github.io/chowchow/)

Efficient and customisable server-side caching made easy. Chowchow caches everything you want to cache, from CMS data to API responses.

- 🚀 Makes your app faster.
- 💼 Bring your own function to get the data.
- 🕰 Expiration time from 2 seconds to 2 eons.
- 🪶 Extremely lightweight (1.8 kB).

## Installation

```shell
npm install @garraflavatra/chowchow
```

## Usage

[![API docs](.github/api.svg)](https://garraflavatra.github.io/chowchow/classes/CacheStore.html)

```js
import CacheStore from 'chowchow';

const cache = new CacheStore(
	/* Store name */ 'cache',
	/* Callback that fetches data */ async () => {
		const res = await fetch('http://localhost:5000/myapi');
		if (!res.ok) return { success: false };

		const entries = await res.json();
		const filtered = entries.filter(e => e.status === 'online');
		if (!filtered.length) return { success: false };

		return { success: true, data: onlineEntries };
	},
	/* Maximum age in minutes */ 15,
	/* Cache file directory */ '.cache',
	/* File name */ 'cache'
);
```

### Get the data

[![API docs](.github/api.svg)](https://garraflavatra.github.io/chowchow/classes/CacheStore.html)

If the cache is not expired yet according to the expiration time, it will return the cache. Otherwise it will fetch new data, save it to the store, and return it.

```js
const data = cache.getData();
```

### Read the cache

[![API docs](.github/api.svg)](https://garraflavatra.github.io/chowchow/classes/CacheStore.html#readCache)

This returns the cache, regardless of whether it is expired or not.

```js
const cachedData = cache.readCache();
```

### Get fresh data

[![API docs](.github/api.svg)](https://garraflavatra.github.io/chowchow/classes/CacheStore.html#getFreshData)

This fetches fresh data and returns it, regardless of whether it is expired or not. The function is the given callback parameter of the constructor. Note that this does not write the cache to the cache file.

```js
const freshData = cache.getFreshData();
```

## License

[MIT](LICENSE.md)
npm package: @garraflavatra/yeslint
Description: Sensible configuration for your ESLint installation
Author: Romein van Buren
Latest version: 1.3.0

# yeslint!

A sensible, modern collection of configuration files for [ESLint] 8.x that enforces beautiful and correct code. It contains both rules to ensure correct code (e.g. enforce `break` statements in each `switch` `case`), and rules to make your code beautiful (e.g. adding a trailing comma to array items that start on a newline).

TypeScript is supported out of the box! No configuration is required.

## What's included

Currently, the 3 following configuration files are available:

* `generic`: generic ESLint configuration for all modern JavaScript runtimes.
* `node`: an extension on the generic config, with rules specific to Node.js. Also works with [Bun]!
* `svelte`: configuration for [Svelte] (v4 & v5) and JavaScript in browser environments.

## Examples

Please see [the `example` directory](./example) for some examples. Files that start with `wrong.` contain many errors, and the fixed version of those files is in their `correct.` equivalent.

## Installation

Install it together with ESLint using [npm], [pnpm], [Bun], or whatever package manager you like to use:

```bash
npm install --save-dev eslint@^8.57 @garraflavatra/yeslint
```

```bash
pnpm add --save-dev eslint@^8.57 @garraflavatra/yeslint
```

```bash
bun add --save-dev eslint@^8.57 @garraflavatra/yeslint
```

## Usage

After installing the package, tell ESLint to extend its configuration. Either add it to `.eslintrc.json`, set it as the default export in `.eslintrc.js`, or add it to your `package.json` under the `"eslintConfig"` key.

Please consider the following example. You should replace `<name>` with the name of the configuration you want to use.

```javascript
module.exports = {
  extends: './node_modules/@garraflavatra/yeslint/configs/<name>.js',
};
```

Or add this to your `package.json` file:

```json
"eslintConfig": {
  "extends": "./node_modules/@garraflavatra/yeslint/configs/<name>.js"
}
```

After installing, run `npx eslint .` to lint your code for the first time, or use `npx eslint --fix .` to lint while automatically fixing all auto-fixable problems ESLint finds in your codebase.

## Feedback

Please feel free to [report](https://github.com/garraflavatra/yeslint/issues/new) any issues and questions! Much appreciated :)

## Author & license

© [Romein van Buren](mailto:romein@vburen.nl) 2023-2024. yeslint! is released under the MIT license — see LICENSE for the full license text.

[![Smart Yellow](https://code.smartyellow.net/smartyellow/meta/raw/branch/main/logo.png)](https://www.smartyellow.nl)

[ESLint]: https://eslint.org/
[Svelte]: https://svelte.dev/
[npm]: https://www.npmjs.com/
[pnpm]: https://pnpm.io/
[Bun]: https://bun.sh/
npm package: @garrattsln/jsreport-fs-store-azure-storage-persistence
Description: Make jsreport fs store persist entities into azure blob storage
Author: Jan Blaha, Tom Garratt
Latest version: 1.0.0

# jsreport-fs-store-azure-storage-persistence
[![NPM Version](http://img.shields.io/npm/v/jsreport-fs-store-azure-storage-persistence.svg?style=flat-square)](https://npmjs.com/package/jsreport-fs-store-azure-storage-persistence)
[![Build Status](https://travis-ci.org/jsreport/jsreport-fs-store-azure-storage-persistence.png?branch=master)](https://travis-ci.org/jsreport/jsreport-fs-store-azure-storage-persistence)

**Make jsreport [fs store](https://github.com/jsreport/jsreport-fs-store) persisting entities into azure blob storage.**


## Installation

> npm install jsreport-fs-store    
> npm install jsreport-fs-store-azure-storage-persistence

Create an azure storage account and copy account name and access key.  Then alter jsreport configuration:
```js
"store": {
  "provider": "fs"
},
"extensions": {
  "fs-store": {
    "persistence": {
      "provider": "azure-storage"
    }
  },
  "fs-store-azure-storage-persistence", {
    "accountName": "...",
    "accountKey": "...",
    // the rest is optional
    "container": "jsreport",
    "lock": {
      "retry": 100,
      "leaseDuration": 30,
      "enabled": true
    }
  }
}
```