open-index/open-npm huggingface dataset:
npm package: @grove/dogstatsd
Description: Client for interacting with a local Datadog StatsD agent over UDP
Author: Louis DeScioli
Latest version: 1.0.0

# `@grove/dogstatsd`

A Node.js module for interacting with a local [Datadog](http://www.datadoghq.com) StatsD agent over UDP.

Datadog extends StatsD with additional features — histograms and tags. This client is an extension of a general StatsD client to work with their implementation.

## Installation

```sh
npm install @grove/dogstatsd
```

## Usage

```js
const DogStatsD = require('@grove/dogstatsd')
const metrics = new DogStatsD()
metrics.increment('active_users')
```

*Note:* If you want to use this library as a generic StatsD client it will work just fine. Just don't pass in `tags` parameters or use the `histogram` method.

### Docs
See the [Datadog DogStatsD guide](http://docs.datadoghq.com/guides/dogstatsd/) for information on using these methods.

### API

Aside from the constructor and `sendEvent`, the `options` parameter is a hash that may include `tags` and `sampleRate`

#### *constructor*`(host='localhost', port=8125, [socket], [options])`
If a `socket` parameter is not provided a UDP socket is created and cleaned up as needed.

The last parameter is an optional `options` object, which may have the following properties:

- `globalTags`: an array of strings to be included as tags with every metric sent

#### `increment(stat, delta=1, [options])`
If you're passing `options` you must also pass  `delta`

#### `decrement(stat, delta=1, [options])`
`options` is a hash that may include `tags` and `sampleRate`
If you're passing `options` you must also pass  `delta`

#### `set(stat, value, [options])`

#### `gauge(stat, value, [options])`

#### `timing(stat, value, [options])`

#### `createTimer(stat, [options])`
Returns an object with a `stop` method to call. Then calls `timing` under the hood with the measured change in time. Uses `process.hrtime` for high-resolution timing.

#### `histogram(stat, value, [options])`

#### `sendEvent(title, text, [options])`
Options include:

- `dateHappened=Date.now()`
- `priority='normal'`
- `type='info'`
- `hostname`
- `aggregationKey`
- `sourceTypeName`
- `tags`

### Error handling
If no `socket` argument is given to the constructor, then a UDP socket is created as needed when sending data to the Datadog agent. We place a no-op function as the error handler to swallow any errors that may occur on the socket.

If a `socket` argument is given, then it's up to the user to provide error handling mechanisms. A client's socket is accessible from the `client.socket` property.

## Prior Art
- [node-statsd](https://github.com/sivy/node-statsd)
- [node-dogstatsd](https://github.com/joybro/node-dogstatsd)
- [lynx](https://github.com/dscape/lynx)
npm package: @grove/react-font-awesome
Description: A completely contained Font Awesome React component
Author: software@grovelabs.io
Latest version: 1.1.5

# `<FontAwesome/>`
A pure Javascript, CSS-free implementation of [Font Awesome](http://fontawesome.io) using [React](http://facebook.github.io/react/) and [Radium](https://github.com/FormidableLabs/radium).

## Usage
```sh
npm install @grove/react-font-awesome --save 
```
The published package contains Babel-transpiled code in `lib/` and has peer dependencies of `react`, `radium`, and `babel-runtime`. You'll need to depend on those yourself and `npm install` them.

```js
// Button.jsx
import React, { PropTypes } from 'react';
import radium from 'radium';
import Icon from 'react-font-awesome';

// Some styling for the button
const button = {
  backgroundColor: 'green',
  color: 'white',
  padding: '5px 10px',
  fontSize: 20,
};

// Optional styling to the icon
const icon = {
  transition: 'transform 200ms',
  transform: 'rotateY(180deg)',
  // radium provides hover states and vendor prefixes
  ':hover': {
    transform: 'rotateY(180deg) scale(1.5)'
  },
};

const Button = React.createClass({
  propTypes: {
    style: PropTypes.object,
    iconStyle: PropTypes.object,
  },
  
  render() {
    const { style, iconStyle } = this.props;
    return (
      <button style={[button, style]}>
        Click me!
        <Icon name='pied-piper' style={[icon, iconStyle]} />
      </button>
    );
  }
});

export default radium(Button);
```

## Prior Art
* [react-fontawesome](https://github.com/builtbybig/react-fontawesome)
* [react-fa](https://github.com/andreypopp/react-fa)
* [react-font-awesome](https://github.com/Laiff/react-font-awesome)

Each of the previous libraries implements the icon set using CSS classes and pseudo `:before` elements with the Font Awesome stylesheet. Some of them also require you to setup a bundler like Webpack in order to bring in the CSS. This package was created to avoid both of those hassles.

On the first mount of a `FontAwesome` component, the `@font-face` rule is appended to the `<head>` as a `<style>` element. The font files are loaded from the Bootstrap CDN. No `:before` elements are needed — the icon is a span with the actual unicode character as the content and inline styling to set the font family.

The rest of the Font Awesome API (larger sizes, stack, flip, 2x, etc.) was specifically not implemented. This is because those are shorthands for styling, which you can set yourself with the `style` prop.

## Contributions
Pull requests welcome! Especially tests :smile:
npm package: @grovepath/portal-db-ts-sdk
Description: TypeScript SDK for Grove Portal DB API
Author: Grove Team
Latest version: 1.0.9

# Portal DB TypeScript SDK

Type-safe TypeScript client for the Portal DB API, generated from OpenAPI specification using [openapi-typescript](https://github.com/openapi-ts/openapi-typescript) and [openapi-fetch](https://github.com/openapi-ts/openapi-typescript/tree/main/packages/openapi-fetch).

## **Installation**

```bash
npm install @grovepath/portal-db-ts-sdk openapi-fetch
```

## Usage

### Basic GET Request

```typescript
import createClient from 'openapi-fetch';
import type { paths } from '@grovepath/portal-db-ts-sdk';

const client = createClient<paths>({
  baseUrl: 'http://localhost:3000',
  headers: {
    'Authorization': `Bearer ${JWT_TOKEN}`,
  },
});

// Fetch all services
const { data, error } = await client.GET('/services');

if (error) {
  console.error('Error:', error);
} else {
  console.log('Services:', data);
}
```

### Query with Filters

```typescript
// GET with PostgREST filters
const { data, error } = await client.GET('/services', {
  params: {
    query: {
      active: 'eq.true',              // Filter: active = true
      service_id: 'like.*ethereum*',  // Pattern match
    }
  }
});
```

### React with @tanstack/react-query

For React applications, you can use [openapi-react-query](https://openapi-ts.dev/openapi-react-query/) for a type-safe wrapper around React Query:

```bash
npm install openapi-react-query openapi-fetch @tanstack/react-query
```

```typescript
import createFetchClient from 'openapi-fetch';
import createClient from 'openapi-react-query';
import type { paths } from '@grovepath/portal-db-ts-sdk';

const fetchClient = createFetchClient<paths>({
  baseUrl: 'http://localhost:3000',
  headers: {
    'Authorization': `Bearer ${JWT_TOKEN}`,
  },
});

const $api = createClient(fetchClient);

const ServicesComponent = () => {
  const { data, error, isLoading } = $api.useQuery(
    'get',
    '/services',
    {
      params: {
        query: {
          active: 'eq.true',
        }
      }
    }
  );

  if (isLoading || !data) return 'Loading...';
  if (error) return `Error: ${error.message}`;

  return (
    <div>
      {data.map(service => (
        <div key={service.id}>{service.service_id}</div>
      ))}
    </div>
  );
};
```

## Documentation

- **openapi-fetch**: https://openapi-ts.dev/openapi-fetch/
- **openapi-react-query**: https://openapi-ts.dev/openapi-react-query/
- **PostgREST API Reference**: https://postgrest.org/en/stable/references/api/tables_views.html

## Type Safety

All endpoints, parameters, and responses are fully typed based on the OpenAPI specification. TypeScript will provide autocomplete and catch errors at compile time.
npm package: @grovertb/material
Description: React components that implement Google's Material Design.
Author: GroverTB
Latest version: 0.0.2

<h1 align="center">GroverTB-UI</h1>


## Installation

GroverTB-UI is available as an [npm package](https://www.npmjs.com/package/@grovertb/material).

**[mui@v5](https://mui.com/)**

```sh
// with npm
npm install @grovertb/material

// with yarn
yarn add @grovertb/material
```

## Usage

Here is a quick example to get you started, **it's all you need**:

```jsx
import ReactDOM from 'react-dom';
import Button from '@grovertb/material/Button';

function App() {
  return <Button variant="contained">Hello World</Button>;
}

ReactDOM.render(<App />, document.querySelector('#app'));
```
npm package: @grovertb/react-skeletor
Description: react-skeletor
Author: grovertb
Latest version: 1.0.3

# @grovertb/react-skeletor

> react-skeletor

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

## Install

```bash
npm install --save @grovertb/react-skeletor

or

yarn add @grovertb/react-skeletor

```

## [Demo](https://grovertb.github.io/react-skeletor/)

## Usage

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

import Skeleton from '@grovertb/react-skeletor'

class Example extends Component {
  render () {
    return (
      <Fragment>
        <Skeleton />
        <Skeleton width={100} height={100} circle  />
        <Skeleton count={4} />
        <Skeleton width={300} height={50}  />
      </Fragment>
    )
  }
}

```

## License

MIT © [grovertb](https://github.com/grovertb)
npm package: @grow-components/copy
Description: 点击复制指定文本
Author: ding.qiang
Latest version: 0.1.1

# @grow-components/copy

## 安装

```
yarn add @grow-components/copy (npm i @grow-components/copy)
```

## 使用

```vue
<template>
  <div class="test-view">
    <!-- base -->
    <GrCopy
      copy="Copy components"
      tooltip="Click to copy"
      @success="handleSuccess"
      @err="handleError"
    ></GrCopy>

    <!-- disabled -->
    <GrCopy
      copy="Copy components"
      tooltip="Click to copy"
      disabled
      @success="handleSuccess"
      @err="handleError"
    ></GrCopy>

    <!-- slot -->
    <GrCopy
      copy="Copy components"
      tooltip="Click to copy"
      disabled
      @success="handleSuccess"
      @err="handleError"
    >
      <span class="custom-label">点我复制</span>
    </GrCopy>
  </div>
</template>

<script>
import GrCopy from "@grow-components/copy";
export default {
  name: "TestGrCopy",
  components: { GrCopy },
  methods: {
    handleSuccess() {
      console.log("copy success");
    },
    handleError() {
      console.log("copy error");
    },
  },
};
</script>
```
npm package: @grow-components/flex-scroll
Description: Flex 布局中的项目自适应滚动
Author: ding.qiang
Latest version: 0.1.2

# @grow-components/flex-scroll

`flex` 布局中项目的自适应滚动组件。

## 安装

```
yarn add @grow-components/flex-scroll (npm i @grow-components/flex-scroll)
```

## 使用

`VScroll.vue`

```js
<template>
    <div class="v-scroll-view">
        <div class="header">VScroll</div>
        <div class="content">
            <flex-scroll>
                <div class="item" v-for="n in 50" :key="n">{{ n }}</div>
            </flex-scroll>
        </div>
    </div>
</template>

<script>
import FlexScroll from "@grow-components/flex-scroll";

export default {
    name: "VScroll",
    components: {
        FlexScroll,
    },
};
</script>

<style scoped>
.v-scroll-view {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 100%;
}

.header {
    height: 40px;
    line-height: 40px;
    background: pink;
    text-align: center;
}

.content {
    flex: 1;
}

.item {
    height: 36px;
    line-height: 36px;
    border-bottom: 1px solid #ccc;
    text-align: center;
}
</style>

```

`HScroll.vue`

```js
<template>
    <div class="h-scroll-view">
        <div class="header">HScroll</div>
        <div class="content">
            <flex-scroll scroll="x">
                <div class="list">
                    <div class="item" v-for="n in 50" :key="n">{{ n }}</div>
                </div>
            </flex-scroll>
        </div>
    </div>
</template>

<script>
import FlexScroll from "@grow-components/flex-scroll";

export default {
    name: "HScroll",
    components: {
        FlexScroll,
    },
};
</script>

<style scoped>
.h-scroll-view {
    display: flex;
    flex-direction: row;
    width: 800px;
    height: 100%;
}

.header {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: pink;
    text-align: center;
}

.content {
    flex: 1;
    overflow: auto;
}

.list {
    display: flex;
    flex-direction: row;
}

.item {
    width: 36px;
    height: 100px;
    line-height: 100px;
    border-right: 1px solid #ccc;
    text-align: center;
    flex-shrink: 0;
}
</style>

```