open-index/open-npm huggingface dataset:
npm package: @karhu/core
Description: Core package for Karhu, the lib for powering web app productivity tools
Author: Oskar Hane
Latest version: 1.0.0

# `@karhu/core`

Karhu is a productivity tool for web applications. This package has the core functionality
as the command register and entry graph to adapt command listing to users habits and learn over time.

## Install

```bash
npm install @karhu/core
```

## Usage

```js
import Karhu from '@karhu/core';

const karhu = new Karhu();
```

## API

### `Karhu`

#### `karhu.addCommand`

Adds a command to the current Karhu instance.

```ts
karhu.addCommand(command: UnregisteredCommand): Command
```

#### `karhu.removeCommand`

Removes a command from teh current Karhu instance.

```ts
karhu.removeCommand(commandId: string): void
```

#### `karhu.findMatchingCommands`

Searches through the existing commands keywords and the current entry graph to
find commands that matches the provided input, and returns them.

```ts
karhu.findMatchingCommands(): Command[]
```

#### `karhu.runCommand`

Call the command with the provided id's `.actions.onExec()` function.  
Returns the updated entry graph.  
The input is needed to better sort the commands next time `karhu.findMatchingCommands()` is called.

```ts
karhu.runCommand(id: string): CommandRunResult
```

#### `karhu.getCommands`

Returns a list of all registered commands for the Karhu instance.

```ts
karhu.getCommands(): Command[]
```

#### `karhu.getEntryGraph`

Returns the current Entry Graph for the Karhu instance.

```ts
karhu.getEntryGraph(): EntryGraph
```

#### `karhu.replaceEntryGraph`

Overwrites the the current Entry Graph for the Karhu instance with the new one.

```ts
karhu.replaceEntryGraph(entryGraph: EntryGraph): void
```

#### Static `Karhu.createCommand`

Makes an `UnregisteredCommand` -> `Command`. Mostly used internally but can be useful in
some situations.

```ts
Karhu.createCommand (command: UnregisteredCommand): Command
```
npm package: @karhu/react
Description: React bindings and components for Karhu
Author: Oskar Hane
Latest version: 1.0.0

# `@karhu/react`

React bindings and components for Karhu. Expects `@karhu/core` to be there.

## Install

```bash
npm install @karhu/core @karhu/react
```

## Usage

```js
import { KarhuProvider, useKarhu, KarhuComponent, AddCommand } from '@karhu/react';
```

## Hooks

### `useKarhu`

A React hook to access Karhu context and Karhu adapter.
Expects to find a `Karhu` instance in application context.

On every property `input` change the `commandsList` is updated.

Call `exec` with a command id to execute the command and get the entry
graph back.

Types:

```tsx
// Props
type Props = {
  input: string;
};

// Returns
type ChildrenProviderObject = {
  commandsList: Command[];
  exec: (id: string) => CommandRunResult;
};
```

Usage:

```tsx

function MyKarhu({input}) {
  const { exec, commandsList } = useKarhu(input);
  return 'your-ui'
}

const karhu = new Karhu()

<KarhuProvider value={karhu}>
  <MyKarhu input="" />
</KarhuProvider>
```

## Components

### `<KarhuProvider>`

Provide a Karhu instance in React context.

Props:

```tsx
type Props = {
  value: Karhu;
};
```

Usage:

```tsx
const karhu = new Karhu()

<KarhuProvider value={karhu}>
{
  // application
}
</KarhuProvider>
```

### `<KarhuComponent>`

A combined React context Consumer and Karhu adapter.
Expects to find a `Karhu` instance in application context.

On every property `input` change the children get re-rendered
and the `commandsList` is updated.

Call `exec` with a command id to execute the command and get the entry
graph back.

Types:

```tsx
type Props = {
  children: (obj: ChildrenProviderObject) => {};
  input: string;
};

type ChildrenProviderObject = {
  commandsList: Command[];
  exec: (id: string) => CommandRunResult;
};
```

Usage:

```tsx
const karhu = new Karhu()

<KarhuProvider value={karhu}>
  <KarhuComponent input="">
    {({ commandsList, exec }) => {
      // what to render
    }}
  </KarhuComponent>
</KarhuProvider>
```

### `<AddCommand>`

Component to add a command to a Karhu instance.
Expects to find a `Karhu` instance in application context.

Props:

```tsx
type AddCommandProps = {
  command: UnregisteredCommand;
};
```

Usage:

```tsx
const karhu = new Karhu();
const command = Karhu.createCommand({
  name: 'command',
  keywords: ['command'],
  onExec: () => {},
  render: () => {},
});

<KarhuProvider value={karhu}>
  <AddCommand command={command} />
</KarhuProvider>;
```