open-index/open-npm huggingface dataset:
npm package: @recipetools/core
Description: 型安全なレシピデータ管理・プロセス図生成・距離計算ツール
Author: Adachi Kenji
Latest version: 0.1.0

# @recipetools/core

型安全・構造化されたレシピデータを扱うための TypeScript ライブラリです。
レシピのパース、バリデーション、プロセス図生成、レシピ間の距離計算ができます。

---

## ✨ 特徴

- ✅ JSONベースのレシピデータを型安全に管理
- ✅ Mermaid記法で調理工程を可視化
- ✅ 材料・アクション単位でレシピ間の距離を計算
- ✅ 完全TypeScript対応
- ✅ OSSライセンス (MIT)

---

## 📦 インストール

```bash
npm install @recipetools/core
# or
pnpm add @recipetools/core
```

---

## 📖 使い方

1. レシピデータをパースする

```typescript
import { parseRecipe } from "@recipetools/core";
import recipeData from "./myRecipe.json";

const recipe = parseRecipe(recipeData);
```

2. レシピデータをバリデーションする

```typescript
import { validateRecipe } from "@recipetools/core";

if (!validateRecipe(recipeData)) {
  throw new Error("Invalid Recipe Format");
}
```

3. プロセス図を生成する（Mermaid記法）

```typescript
import { generateProcessGraph } from "@recipetools/core";

const mermaidGraph = generateProcessGraph(recipe);
console.log(mermaidGraph);
```

出力例:

```mermaid
graph TD
  beef["材料: 牛肉薄切り"]
  beef --> step1
  step1["炒める(beef)\n0-5min\n累計:5min"]
```

4. レシピ同士の距離を計算する

```typescript
import { calculateIngredientDistance, calculateActionDistance } from "@recipetools/core";

const ingredientDistance = calculateIngredientDistance(recipe1, recipe2);
const actionDistance = calculateActionDistance(recipe1, recipe2);

console.log({ ingredientDistance, actionDistance });
```

---

## 🛠 提供される主なAPI

| 関数名 | 説明 |
| -- | -- |
| parseRecipe(data) | 任意データを型安全なRecipeオブジェクトに変換 |
| validateRecipe(data) | レシピデータが正しいか検証 |
| generateProcessGraph(recipe) | プロセス図（Mermaid記法）を生成 |
| calculateIngredientDistance(recipe1, recipe2) | 材料ベースのレシピ間距離を計算 |
| calculateActionDistance(recipe1, recipe2) | アクションベースのレシピ間距離を計算 |

---

## 📚 レシピデータ構造

主要な型定義例（Recipe型）:

```typescript
export interface Recipe {
  title: string;
  ingredients: Ingredient[];
  steps: Step[];
  // オプションでdescription, metadata, yield, nutrition, tools, notesなど
}
```

---

## 📝 ライセンス

MIT License
npm package: @recipher/bootstrap
Description: Server bootstrapper
Author: Johnny Hall
Latest version: 1.0.4

## @recipher/bootstrapper

Bootstrapper will create and start an instance of an App, in an isolated domain.

### Usage

```javascript
var start = require('@recipher/bootstrap').start
  , App = require('./lib/app');

start(new App);
```

To utilise `cluster`:

```javascript
var start = require('@recipher/bootstrap').cluster
  , App = require('./lib/app');

start(new App);
```
npm package: @recipher/configuration
Description: Configuration helper
Author: Johnny Hall
Latest version: 1.0.1

## @recipher/configuration

Configuration helper with sane defaults. 

### File structure

Set your configuration data into this structure:

```
config
  default.json
  development.json
  test.json
  production.json
```

Override default configuration from ```default.json``` in ```<env>.json```.

### Usage

Ensure configuration uses ALL CAPS for setting names (to match environment variables).

Given this configuration file:

```json
{
  "SETTING": 123
, "NESTED": {
    "SETTING": "abc"
  }
}
```

To retrieve configuration settings:

```javascript
var configuration = require('@recipher/configuration');

var setting = configuration('setting');
// setting === 123

var nested = configuration('nested:setting');
// nested === 'abc'
```
npm package: @recipher/errors
Description: Server errors
Author: Johnny Hall
Latest version: 1.0.1

## @recipher/errors

Server errors.

```javascript
throw new DeclinedError();        // 423
throw new DuplicateError();       // 422
throw new NotAuthorizedError();   // 403
throw new NotFoundError();        // 404
throw new UnauthenticatedError(); // 401
throw new ValidationError();      // 422 
```
npm package: @recipher/gulp
Description: Common gulp tasks
Author: Johnny Hall
Latest version: 1.6.6

## @recipher/gulp

Common gulp tasks.

### Usage

In `gulpfile.js`:

```javascript
var gulp = require('gulp');

require('@recipher/gulp')(gulp);

gulp.task('default', [ 'test' ]);
```

### Bump

Bump version number:

```
gulp bump:patch
gulp bump:minor
gulp bump:major
```

### Tag

Tag the release:

```
gulp tag:patch
gulp tag:minor
gulp tag:major
```

### Publish

Publish to npm:

```
gulp publish
```

### Release

Bump the version, then tag and publish the release:

```
gulp release:patch
gulp release:minor
gulp release:major
```

### Test

Tests are assumed to be in the test/unit and test/integration folders.

Run mocha tests:

```
gulp test
gulp test:unit
gulp test:integration
```

To watch tests:

```
gulp test:watch
```

To override options, in your gulpfile.js, provide an options hash as the second parameter in the setup function call.

```javascript
require('@recipher/gulp')(gulp, {
  'test:unit': {
  	setup: require('./test/unit/setup')
  }
, 'test:integration': {
  	setup: require('./test/integration/setup')
  }
});
```
npm package: @recipher/initializer
Description: Initializer helper
Author: Johnny Hall
Latest version: 2.0.1

## @recipher/initializer

Initializer helper.

### Usage

Locate your initializers in the ```lib/initializers``` folder. Given an initializer at ```lib/initializers/routes.js```, then to call the initializer:

```javascript

var initialize = require('@recipher/initializer');

initialize('routes');
```

The initializer should export a function:

```javascript

module.exports = function(apps, options) {
  // Do something with apps and options
};
```

To pass arguments to the initializer:

```javascript
initialize('routes', apps, options);
```
npm package: @recipher/log
Description: Log helper
Author: Johnny Hall
Latest version: 1.0.3

## @recipher/log

Log helper with sane defaults. 

### Usage

Logs to the console by default.

Use configuration to log to file:

```json
{
  "LOGGING": "file"
}
```

Or to Papertrail:

```json
{
  "LOGGING": "papertrail"
, "PAPERTRAIL": {
    "HOST": "..."
  , "PORT": 1234
  }
}
```

To write to the log:

```javascript
var log = require('@recipher/log');

log.info('Information');
log.warn('Warning');
log.error('Error');
log.debug('Debug');
```
npm package: @recipher/server
Description: Koa web server
Author: Johnny Hall
Latest version: 1.3.32

## @recipher/server

Server is a koa.js web server with sane defaults.

### Usage

```javascript
var Server = require('@recipher/server');

var server = new Server();

// To configure routes and middleware
server.configure('/path/to/apps');

// To start
server.start();

// To stop
server.stop();
```

### Resources

Resource files are expected in a specific structure:

```
apps
  users
    resources
      routes.js
      users.js
      user.js
  groups
    resources
      routes.js
      groups.js
      group.js
```

This will mount routes at `/users` and `/groups`, if the `apps` folder is passed to `server.configure`. 

The `routes.js` file should export a single function, passed with these parameters:

```javascript
module.exports = function(router, resources, errors) {
  //
};
```

The `router` parameter is a `koa-router`, the `resources` is an array of all of the files in the directory, each of which should have route handlers.

For example, `users.js` should export a function which returns multiple handlers:

```javascript
module.exports = function(errors) {
  return {
    get: function *(next) { }
  , post: function *(next) { }
  }
};
```

And these would be routed in `routes.js` like this:

```javascript
module.exports = function(router, resources, errors) {
  var users = resources.users(errors);
  
  router.get('/', users.get);
  router.post('/', users.post);
};
npm package: @reciprocity/color-input
Description: An input field for color values that includes a color picker
Latest version: 0.2.10

# ColorInput

An input field that includes a color picker

## Installation

```
npm install @reciprocity/color-input
```
or
```
yarn add @reciprocity/color-input
```

## Usage

This component is meant to be used as an ES module, so you can import it using the ES6 `import` syntax.

After importing you can just register it with Vue. Eg:

app.vue

```vue
<template>
	<color-input value="#0099FF" />
</template>
<script>
	import ColorInput from '@reciprocity/color-input';

	export default Vue.extend({
		name: 'My App',
		components: {
			ColorInput
		}
	};
</script>
```
npm package: @reciprocity/color-picker
Description: A color picker where you can select the color or type the relevant HEX value.
Latest version: 0.2.3

# Color Picker

A color picker where you can select the color or type the relevant HEX value.

## Installation

```
npm install @reciprocity/color-picker
```
or
```
yarn add @reciprocity/color-picker
```

## Usage

This component is meant to be used as an ES module, so you can import it using the ES6 `import` syntax.

After importing you can just register it with Vue. Eg:

app.vue

```vue
<template>
	<color-picker value="#0099FF" />
</template>
<script>
	import ColorPicker from '@reciprocity/color-picker';

	export default Vue.extend({
		name: 'My App',
		components: {
			ColorPicker
		}
	};
</script>
```
npm package: @reciprocity/day-selector
Description: A component that lets you pick days of the week
Latest version: 0.2.2

# DaySelector

A component that lets you pick days of the week.

## Installation

```
npm install @reciprocity/day-selector
```
or
```
yarn add @reciprocity/day-selector
```

## Usage

This component is meant to be used as an ES module, so you can import it using the ES6 `import` syntax.

After importing you can just register it with Vue. Eg:

app.vue

```vue
<template>
	<day-selector :value="[]" @input="onDaysSelected" />
</template>
<script>
	import DaySelector from '@reciprocity/day-selector';

	export default Vue.extend({
		name: 'My App',
		components: {
			DaySelector
		},
		methods: {
			onDaysSelected: days => {
				console.log('new days selected', days);
			}
		}
	};
</script>
```
npm package: @reciprocity/dropdown-multiselect
Description: A dropdown component with multi value support
Latest version: 0.2.3

# Dropdown Multiselect

A component that renders a dropdown for selecting multiple values.

## Installation

```
npm install @reciprocity/dropdown-multiselect
```
or
```
yarn add @reciprocity/dropdown-multiselect
```

## Usage

This component is meant to be used as an ES module, so you can import it using the ES6 `import` syntax.

After importing you can just register it with Vue. Eg:

app.vue

```vue
<template>
    <dropdown-multiselect v-model='value' :options='options' @input='change' />
</template>
<script>
	import DropdownMultiselect from '@reciprocity/dropdown-multiselect';

	export default Vue.extend({
		name: 'My App',
		components: {
			DropdownMultiselect
		}
	};
```
npm package: @reciprocity/file-dropzone
Description: A file input field with file drop support
Latest version: 0.2.1

# FileDropzone

A file input field with file drag and drop support.

## Installation

```
npm install @reciprocity/file-dropzone
```
or
```
yarn add @reciprocity/file-dropzone
```

## Usage

This component is meant to be used as an ES module, so you can import it using the ES6 `import` syntax.

After importing you can just register it with Vue. Eg:

app.vue

```vue
<template>
	<file-dropzone multiple @input="fileSelected" />
</template>
<script>
	import FileDropzone from '@reciprocity/file-dropzone';

	export default Vue.extend({
		name: 'My App',
		components: {
			FileDropzone
		},
		methods: {
			fileSelected(file) {
				console.log('File selected!');
			}
		}
	};
</script>
```
npm package: @reciprocity/loading-spinner
Description: Displays an animated spinner with some text
Latest version: 0.1.10

# LoadingSpinner

A component that renders an animated spinner circle next to a "Loading..." or a custom text.

## Installation

```
npm install @reciprocity/loading-spinner
```
or
```
yarn add @reciprocity/loading-spinner
```

## Usage

This component is meant to be used as an ES module, so you can import it using the ES6 `import` syntax.

After importing you can just register it with Vue. Eg:

app.vue

```vue
<template>
	<loading-spinner text="Downloading..." />
</template>
<script>
	import LoadingSpinner from '@reciprocity/spinner';

	export default Vue.extend({
		name: 'My App',
		components: {
			LoadingSpinner
		}
	};
</script>
```
npm package: @reciprocity/multiselect
Description: A select component with multi value support
Latest version: 0.6.2

# Multiselect

A select component with support multi value selection, auto-complete, etc.

Based on [Vue Multiselect](https://vue-multiselect.js.org). Check out [the documentation](https://vue-multiselect.js.org/#sub-getting-started) for more options.

## Installation

```
npm install @reciprocity/multiselect
```
or
```
yarn add @reciprocity/multiselect
```

## Usage

This component is meant to be used as an ES module, so you can import it using the ES6 `import` syntax.

After importing you can just register it with Vue. Eg:

app.vue

```vue
<template>
	<zen-multiselect v-model='value' :options='options'>Click me!</multiselect>
</template>
<script>
	import ZenMultiselect from '@ reciprocity/multiselect';

	export default Vue.extend({
		name: 'My App',
		data() {
			return {
				value: null,
				options: ['Argentina', 'Slovenia', 'United States'],
			},
		},
		components: {
			ZenMultiselect,
		},
	};
</script>
```

## Props

| **Prop**        | **Description**                                                                    | **Type** | **Default** |
|-----------------|------------------------------------------------------------------------------------|----------|-------------|
| optionMultiline | Display the options in multiple lines in case the label exceeds the options width  | Bool     | false       |
npm package: @reciprocity/multiselect-custom-el-poc
Description: A select component with multi value support created for Micro frontends POC
Latest version: 0.6.0

# Multiselect

A select component with support multi value selection, auto-complete, etc.

Based on [Vue Multiselect](https://vue-multiselect.js.org). Check out [the documentation](https://vue-multiselect.js.org/#sub-getting-started) for more options.

## Installation

```
npm install @reciprocity/multiselect
```
or
```
yarn add @reciprocity/multiselect
```

## Usage

This component is meant to be used as an ES module, so you can import it using the ES6 `import` syntax.

After importing you can just register it with Vue. Eg:

app.vue

```vue
<template>
	<multiselect v-model='value' :options='options'>Click me!</multiselect>
</template>
<script>
	import ZenButton from '@reciprocity/button';

	export default Vue.extend({
		name: 'My App',
		data() {
			return {
				value: null,
				options: ['Argentina', 'Slovenia', 'United States']
			}
		},
		components: {
			Multiselect
		}
	};
</script>
```
npm package: @reciprocity/tags
Description: Extendable tags component
Latest version: 0.1.3

# Zen Tags

A select component with support multi value selection, auto-complete, etc.

## Installation

```
npm install @reciprocity/tags
```
or
```
yarn add @reciprocity/tags
```

## Usage

This component is meant to be used as an ES module, so you can import it using the ES6 `import` syntax.

*Note!*
This component is *not meant to be used as standalone component* (it has no border, no background, ...).
It should be wrapped inside a parent componet!

## Available properties

- *items*
    type: Array,
    default: () => []

- *label*
    Items property that should be printed out in item
    type: String,
    default: "label"

- *customLabel*
    Custom function to substitute text for each item
    type: `function(item) { return 'custom string'; }`,
    default: undefined

- *moreText*
    Custom function to substitute text for more item
    type: `function(count) { return '+' + count + ' items'; }`,
    default: undefined

- *limitItemWidth*
    Width of more item to be used in available space calculation
    type: Number,
    default: 40

## Available slotes
- *item*
- *moreItemsCount*

## Available events
- *removeClicked*
    x on item was clicked. Parent component should do actual item removal!
npm package: @reciprocity/zen-ui
Description: Zen UI components library
Author: Reciprocity Inc.
Latest version: 6.12.0

# ZenUI

[A collection of UI components](https://zen-ui.zengrc.com/) that are shared across Reciprocity applications.

Powered by [Stencil](https://stenciljs.com/) and [Storybook](https://storybook.js.org/).

[![Coverage Status](https://coveralls.io/repos/github/reciprocity/zen-ui/badge.svg?branch=main)](https://coveralls.io/github/reciprocity/zen-ui?branch=main)

## Installation

Before installing, download and install [Node.js](https://nodejs.org/en/). Latest [LTS version](https://nodejs.org/en/about/releases/) is recommended.

It is not necessary to have Docker installed as the project is not containerized.

## Quick start

Install dependencies:
```bash
yarn
```

Start Stencil compiler and Storybook server (available at `http://localhost:6006`):
```bash
# Runs both in watch mode with HMR
yarn start
```

#### Create new Web Components

Scaffolds a new component, creating the folder structure with basic code, styles, unit tests, and documentation:
```bash
yarn create-component zen-{component-name}
```

#### Testing

To run unit and integration tests in Jest:
```bash
yarn test
```

To run E2E/visual tests in Cypress:
```bash
yarn run test:e2e
```

For more details on testing (including visual testing) check the [Testing doc](./docs/testing.md).

#### Linting and Formatting

The code is both linted and formatted with [ESlint](https://eslint.org) and [Prettier](https://prettier.io) on every commit, using a [Husky](https://github.com/typicode/husky) hook.

You can fix lint/format errors in `src/*` files with the following commands:

```bash
# Fix linting errors
yarn lint:all
# Fix formatting errors
yarn format:all
```

You can also manually run the `lint:check` and/or `format:check` to validate possible errors:

```bash
# Only checks for linting errors
yarn lint:check
# Only checks for formatting errors
yarn format:check
```

## Using components within your own app

For instructions on how to consume this library check the [Getting Started stories](src/stories/getting_started.stories.mdx).

## Contributing

To contribute, please familiarize yourself with the [Contributing doc](./docs/contributing.md).
npm package: @recital/recital
Description: An interactive / dynamic story engine, powered by React and Redux. Stories are written in the recital `.stage` format, which is a superset of Markdown.
Author: Amorphous
Latest version: 1.6.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Recital

An interactive / dynamic story engine, powered by React and Redux. Stories are written in the recital `.stage` format, which is a superset of Markdown.

It is absolutely not ready for production use, not in the least because the stage format is not even documented yet, but if you want to anyway, there's three different ways to create a Recital story:

## With a stage source

You can use the `source` prop to add a string representing a stage file directly to Recital, and this will be parsed at runtime:

```
import Recital from '@recital/recital'

...
<Recital
    source={text} />

```

## With an MDX source

You can use `@recital/stage-parser-cli` to convert a stage script into an MDX file, and include that in the `sourceMDX` prop to avoid having to do that parsing step at runtime:

```
import Recital from '@recital/recital'

...
<Recital
    source={text} />
```

## With React components

...or you can import all of the base building blocks of Recital stories, and manually add children instead of dealing with the stage format:

```
import Recital, { Scene, Block, StoryLink } from '@recital/recital'

...
<Recital>
    <Scene id="scene1" enter="next">
        <Block id="block1>
            <h1>This is some story content</h1>
            <StoryLink to=".block2">This is a link to the second block</StoryLink>
        </Block>
        <Block id="block2>
            This will only show up once the first link is clicked
        </Block>
    </Scene>
</Recital>
```
npm package: @recital/stage-parser
Description: Script parser for Recital. Converts the Recital document format into a list of scenes with MDX content, which can then be converted into dynamic or interactive stories.
Author: Amorphous
Latest version: 1.2.0

# Stage Parser

Script parser for Recital. Converts the Recital document format into a list of scenes with MDX content, which can then be converted into dynamic or interactive stories.

## Usage

```
import { parse } from '@recital/stage-parser'

const scenes = parse(text);

for (let scene of scenes) {
    const { frontmatter, text } = scene
    // handle the scene how you want here
}

```
npm package: @recital/stage-parser-cli
Description: CLI for the stage parser to convert .stage files to .mdx ones
Author: Amorphous
Latest version: 0.2.0

stage-parser-cli
================

CLI for the recital stage parser to convert .stage files to .mdx ones

<!-- toc -->
# Usage
<!-- usage -->

```
$ stage-parser-cli <infile> -o <outfile, optional> -t <template file, optional>
```

If no outfile is provided, the generated MDX will be output as a sibling file to the original. Do note that the file will **not** be a valid MDX file - it only converts the tags, and doesn't add proper Recital imports, etc. The generated MDX can be inserted into a Recital component via the `MDXsource` prop, which can cause your stories to be built faster.

## Templating

You can use the `-t` flag to link an MDX file as a template for the output. The template should have the following format:

```

// put your imports at the beginning of the file

...

<Recital ...recitalProps >${content}</Recital>

...

```

where the generated output will all be created in the `${content}` tag. Note that other tags will be ignored, and you should not have more than one content tag.

This is primarily used for `stage-parser-cli` to generate an entire MDX file that can be dropped into an MDX-supporting application, rather than just generating the MDX for the stage file's contents to put into a Recital component.