open-index/open-npm huggingface dataset:
npm package: @hanai/bi-providers
Description: Providers for bi.
Author: Hanai
Latest version: 1.0.5

# bi-providers

Providers for bi.

## Install

```bash
npm i @hanai/bi-providers
```

## Usage

```ts
import { ftx as FtxProvider } from '@hanai/bi-providers'
import { FtxApiConfig } from '@hanai/bi-providers/dist/providers/ftx/types'

const ftxApiConfig: FtxApiConfig = {
  /* your api config */
}

const walletClient = new FtxProvider.WalletClient(ftxApiConfig)
const marketsClient = new FtxProvider.MarketsClient(ftxApiConfig)

const [markets, position] = await Promise.all([
  marketsClient.getMarkets(),
  walletClient.getBalance(),
])

console.log(markets, position)
```
npm package: @hanakin/base-l
Description: A well structured top down base css framework meant for web apps
Author: Michael Miday
Latest version: 1.3.0

[![Logo](https://cdn.rawgit.com/hanakin/base-l/master/base-l-banner.svg)](https://github.com/hanakin/base-l)

## Base-L
> A well structured top down base css framework meant for web apps

## What is it
Base-L is meant as a core layer to your workflow. Its a true CSS framework following
the ITCSS guidelines outlined by [Harry Roberts](http://www.csswizardry.com) in
this [seminar](https://www.youtube.com/watch?v=1OKZOV-iLj4). Designed with
applications in mind. Developed in conjunction with the popular open source
forum application [phpBB](http://www.phpbb.org). It lends it self beautifully to
the project improving its code base and simplifying the process of designing and
creating rich, beautiful customizable themes.

## Read the Documentation
Check out the detailed documentation for the project [here](http://hanakin.github.io/base-l)

## Contribute
1. Fork the project
2. Create an Issue
3. Read our [Code guidelines](http://hanakin.github.io/base-l/codeing-guidelines) and [Git Contribution Guidelines](http://hanakin.github.io/base-l/git-quidelines)
4. Submit a Pull Request

## License
Copyright ©️ 2016 Michael Miday
[MIT](https://opensource.org/licenses/MIT)
npm package: @hanakla/arma
Description: Single killer functions of Web frontend
Author: Hanakla
Latest version: 0.6.2

# @hanakla/arma

Floor killer single functions for Web frontend

## Functions

See details from type definition and カン.

### CSS

- `cssurl` - null safe css `url()` wrapper.

### DOM

- `selectFile` - open file selector
- `letDownload` - Allow users to download blob as file
- `ClipBoardUtil`
- `loadImage` - load image by url
- `loadImageFromBlob` - load image by blob

### React Hooks

- `useAsyncEffect`
- `useChangedEffect`
- `useObjectState`
- `useSetRef`
- `useCombineRef` - combile multiple refs into one ref
- `useCurrentVisibleAnchorName`
- `useIntersection`
- `useFunk` - Dependecy free `useCallback`

### String

- `lineBreakToSpace`
- `ellipsisString`
- `trimString`

### styled-components

- `styleWhen` - conditional styling helper function

### Lang feature

- `rescue` - exception handling function
- `match` - simple pattern mather

## bili.config

```ts
import defaultConfig from '@hanakla/arma/dist/bili.config.base'

import { Config } from 'bili'
import typescript from 'rollup-plugin-typescript2'
import { defaultBiliConfig } from '../../bili.default.config'

export default {
  input: 'src/index.ts',
  plugins: {
    typescript2: typescript(),
    terser: defaultConfig.plugins.terser,
  },
  babel: defaultConfig.babel,
  bundleNodeModules: defaultConfig.bundleNodeModules,
  output: {
    format: ['cjs', 'esm'],
  },
} as Config
```
npm package: @hanakla/cep-utils
Description: Create Adobe CEF extension with React/TypeScript
Author: Hanakla
Latest version: 0.1.0

# @hanakla/cep-utils

Utility fucntions for developing Adobe CEP extension (ExtendScript)

## API Overview

```ts
export {
  // Ilustrator helper
  IlstUtils,
  createMessageHandler,
  MessageRequestTypesOf,
  MessageResponseTypeOf,
  themeClasses,
};
```

## Common

### createMessageHandler

Helper for [`@hanakla/create-cep-app`](https://github.com/hanakla/create-cep-app).  
It make message handler with strict types for host script.

```ts
//
// in host script
//
const messageHandler = createMessageHandler()
  .event("alert", (message: string) => {
    alert(message);
  })
  .event("example", () => ({ reponse: "It's response from host!" }));

$.global.messageHandler = messageHandler.handler;

export type MessageHandler = typeof messageHandler;

//
// And call it from frontend
//
csInterface.evalScript(
  `messageHandler(${JSON.stringify({ type, payload })})`,
  callback
);

//
// Request and Response type can be infer.
//
import {
  MessageRequestTypesOf,
  MessageResponseTypeOf,
} from "@hanakla/cep-utils";

export type MessageTypes = MessageRequestTypesOf<MessageHandler>;
// 👆 { alert: [message: string], example: [] }

export type ResponseTypes = MessageResponseTypeOf<MessageHandler>;
// 👆 { alert: void, example: { response: string } }
```

### Illustrator

#### IlstUtils.queryPageItem(documnet: Document, query: Query): PageItem[]

Querying `PageItem` on `documnet` and returns matched PageItem[]
npm package: @hanakla/headless-nprogress
Description: Headless NProgress package
Author: Hanakla
Latest version: 1.0.2

# headless-nprogress

Headless version of [nprogress](https://github.com/rstacruz/nprogress) for any JavaScript apps

```
yarn add @hanakla/headless-nprogress
```

## Usage 

Example with React

```tsx
import { NProgress } from "@hanakla/headless-nprogress"

// some router event handler
router.events.on('routeChangeStart', () => NProgress.start())
router.events.on('routeChangeCompleted', () => NProgress.done())

// in your hooks
const useNProgress = () => {
  const [state, setState] = useState({ progress: 0, visible: false})

  useEffect(() => {
    const callback = (progress, { started, finished }) => {
      setState(state => ({
        progress: progress * 100,
        visible: (state.visible || started) && !finished
      }))
    }

    NProgress.observeChange(callback)
    return () => NProgress.unobserveChange(callback)
  }, [])

  return state
}

const App = () => {
  const {progress, visible} = useNProgress()

  return (
    <div
      role="progressbar"
      aria-valuenow={progress}
      aria-valuemin="0"
      aria-valuemax="100"
      style={{ width: `${progress}%`, opacity: visible ? 1 : 0 }} />
  )
}
```
npm package: @hanakla/rescue
Description: TypeScript one-line try-catch handling helper
Author: Hanakla
Latest version: 1.0.4

# @hanakla/rescue
Type safe one line try-catch handler

## Example

```ts
import { rescue } from '@hanakla/rescue'

const result = rescue(() => /* success or raise error process */)
if (result.error) { console.warn(result.error) }
if (result.result) { console.log(result.result) }

// Spread style
const [result, error] = rescue(() => /* ... */)

// Support async function
const [result, error] = await rescue(async () => /* async process */)

// Error type expection
class YourError extends Error {}

// when raises `YourError`, rescue handle and return result/
// Otherwise, rescue is not handle error it's rethrowing.
const result = rescue(() => /* process */, { expects: [YourError] })
```
npm package: @hanakla/svg-variable-width-line
Description: Create svg variable width line from points
Author: NateScarlet
Latest version: 0.1.3

> [!NOTE]
> This repository is a fork of [NateScarlet/svg-variable-width-line](https://github.com/NateScarlet/svg-variable-width-line), adapted for use in environments without a DOM, such as Deno.

# SVG Variable width line

[![npm package](https://img.shields.io/npm/v/@hanakla/svg-variable-width-line)](https://www.npmjs.com/package/@hanakla/svg-variable-width-line)
[![GitHub Actions CI](https://github.com/hanakla/svg-variable-width-line/workflows/CI/badge.svg)](https://github.com/hanakla/svg-variable-width-line/actions)

Create svg `path` with each point can have variable width.

Can create line with `PointerEvent.pressure`.

[Demo](https://natescarlet.github.io/svg-variable-width-line/)

## Installation

```bash
npm install @hanakla/svg-variable-width-line
```

### Deno

```typescript
import * as svgVariableWidthLine from 'npm:@hanakla/svg-variable-width-line';
```

## Usage

```javascript
import * as svgVariableWidthLine from '@hanakla/svg-variable-width-line';

svgVariableWidthLine.compute({
  points: [
    { x: 0, y: 0, w: 1 },
    { x: 1, y: 0, w: 0 },
  ],
});
// { d: '<Will be path `d` data>' }
```
npm package: @hanamura/circulate
Description: Circulate a number into given range.
Author: Taro Hanamura
Latest version: 0.1.1

# circulate [![Build Status](https://travis-ci.org/hanamura/circulate.svg?branch=master)](https://travis-ci.org/hanamura/circulate)

Circulate a number into given range.

## Installation

```sh
npm install @hanamura/circulate --save
```

## Usage

### circulate(number, start, end)

Returns normalized `number` between `start` (inclusive) and `end` (exclusive).

## Example

Keeping angles between 0 and 360 degrees (or -180 and 180 degrees):

```javascript
var circulate = require('@hanamura/circulate');

circulate(0, 0, 360);
// -> 0

circulate(180, 0, 360);
// -> 180

circulate(360, 0, 360);
// -> 0

circulate(450, 0, 360);
// -> 90

circulate(-90, 0, 360);
// -> 270

circulate(-3690, 0, 360);
// -> 270

circulate(450, -180, 180);
// -> 90

circulate(-270, -180, 180);
// -> 90
```

## License

MIT