open-index/open-npm huggingface dataset:
npm package: @jsuzuki/learnstorybook-design-system-template
Description: Storybook design systems tutorial
Author: Junya Suzuki
Latest version: 0.2.0

# Storybook design system tutorial

The Storybook design system tutorial is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more in [Storybook tutorials](https://storybook.js.org/tutorials/).

---

# Design Systems for Developers

## このリポジトリの目的

2024 年 11 月時点での最新の Storybook を学び、コンポーネント管理のための指標を策定するための学習をする

## チュートリアルオリジナルページ

https://storybook.js.org/tutorials/design-systems-for-developers/

## 環境

Docker-compose

## 起動方法

```bash
$ docker compose up
```

ブラウザで http://localhost:6006/ を開いてください。

## コンテナ内でコマンドを実行する方法

```bash
$ docker compose exec storybook bash
# yarn add --dev {追加したいアドオンなど}
```
npm package: @jsvelte-tsvelte-experiment/lezer-javascript
Description: lezer-based JavaScript grammar
Author: Marijn Haverbeke
Latest version: 1.4.11

# @lezer/javascript

This is a JavaScript grammar for the
[lezer](https://lezer.codemirror.net/) parser system.

It parses ES2020, and supports a `"ts"`
[dialect](https://lezer.codemirror.net/docs/guide/#dialects) to parse
TypeScript, and a `"jsx"` dialect to parse JSX.

The `top` option can be set to `"SingleExpression"` or
`"SingleClassItem"` to parse an expression or class item instead of a
full program.

The code is licensed under an MIT license.
npm package: @jsvelte-tsvelte-experiment/sveltejs-repl
Description: This is the guts of https://svelte.dev/repl, extracted into its own package so that it can be used elsewhere.
Latest version: 0.6.2

# @sveltejs/svelte-repl

This is the guts of https://svelte.dev/repl, extracted into its own package so that it can be used elsewhere.

## TODO

* Documentation
* Tests
* Themeability

## License

[MIT](LICENSE)
npm package: @jsverse/letify
Description: <div align="center">   <img width="300px" src="./logo-gradient.svg" alt="Letify Logo"> </div>
Latest version: 1.0.0

<div align="center">
  <img width="300px" src="./logo-gradient.svg" alt="Letify Logo">
</div>

<h3 align="center">It sounds like a spell and works like a charm ✨</h3>

<div align="center">
  <a href="https://www.npmjs.com/package/@jsverse/letify">
    <img src="https://img.shields.io/npm/v/@jsverse/letify.svg?style=flat-square" alt="npm version">
  </a>
  <a href="https://github.com/jsverse/letify/actions/workflows/ci.yml">
    <img src="https://github.com/jsverse/letify/workflows/CI/badge.svg" alt="build status">
  </a>
  <a href="https://www.npmjs.com/package/@jsverse/letify">
    <img src="https://img.shields.io/npm/dt/@jsverse/letify.svg?style=flat-square" alt="npm downloads">
  </a>
  <a href="https://github.com/jsverse/letify/blob/main/LICENSE">
    <img src="https://img.shields.io/github/license/jsverse/letify.svg?style=flat-square" alt="license">
  </a>
</div>

--------------------

Letify CLI helps Angular developers optimize their templates by scanning your files and detecting multiple async subscriptions to the same stream.

### Usage
To get started, install Letify CLI:

```bash
npm i -D @jsverse/letify
```

Then, run the command:
```bash
npx letify [analyze|fix] 'a/b.html' 'c/**/*.html' ...
```

* `analyze`: Identifies duplicate subscriptions in the specified files and generates a report.
* `fix`: Identifies duplicate subscriptions and replace duplications with a single `@let` declaration at the beginning of the template.

#### CI / Lint-
Letify will return an error exit code if any duplicate subscriptions are detected in the specified files.
It can be seamlessly integrated into your [lint-staged](https://github.com/lint-staged/lint-staged) or CI workflows to
prevent duplicate subscriptions from being committed.

#### Usage notes
* Letify ignores commented code and does not analyze it.
* Keyed reads (`data[prop] | async`) and function calls with arguments (`myMethod(value, ...) | async`) are currently not supported.
* You'll need Angular `>=18.1` to use the `@let` syntax, if you are using an older version, run the `analyze` command and
use alternatives to reuse your subscriptions.

### Options

* `-r, --reporter <type>`: Specifies the report format:
  * `html` (default): Generates an HTML report.
  * `list`: Outputs a simple list of suggestions.
  * `json`: Provides a JSON report for programmatic use.
* `-o, --open`: Automatically opens the HTML report once generated (default `true`.
* `--verify-convention` (default: `false`): Checks that stream names (observables) in the templates follow the convention of ending with a `$` sign.
* `--variable-suffix` (default: `value`): Adds a suffix to the declared variable in `fix` mode, mainly to avoid collisions.

### Debugging

You can extend the default logs by setting the `DEBUG` environment variable:
```bash
DEBUG=letify:* npx letify ...
```
Supported namespaces: `letify:*|letify:fix`.
npm package: @jsverse/transloco
Description: The internationalization (i18n) library for Angular
Latest version: 8.3.0

> [!IMPORTANT]  
> The Transloco packages are now published under the **@jsverse** scope, update your dependencies to get the latest features 🚀

<br />
<p align="center">
 <img width="50%" height="50%" src="./logo.svg">
</p>

<p align="center">
  The internationalization (i18n) library for Angular
</p>

<h3></h3>

![npm](https://img.shields.io/npm/v/@jsverse/transloco)
![Bundle Size](https://img.shields.io/bundlephobia/min/@jsverse/transloco)
![Downloads](https://img.shields.io/npm/dm/@jsverse/transloco)
[![Build Status](https://github.com/jsverse/transloco/actions/workflows/ci.yml/badge.svg)]()
[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/jsverse/transloco/blob/master/CONTRIBUTING.md)
[![GitBook](https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1)](https://jsverse.gitbook.io/transloco)
[![pkg.pr.new](https://pkg.pr.new/badge/jsverse/transloco)](https://pkg.pr.new/~/jsverse/transloco)

Transloco enables you to define translations for your content in multiple languages and seamlessly switch between them at runtime. With its robust API, managing translations becomes efficient and maintainable. Additionally, Transloco offers an array of plugins designed to enhance your development experience. Here's a quick look at its powerful features:

✅ &nbsp;Signal-based API  
✅ &nbsp;Fully supports standalone components  
✅ &nbsp;Clean and DRY templates  
✅ &nbsp;Lazy Loading support  
✅ &nbsp;Handle multiple languages simultaneously  
✅ &nbsp;Flexible fallbacks for missing translations  
✅ &nbsp;Comprehensive testing support  
✅ &nbsp;Server-Side Rendering (SSR) compatibility  
✅ &nbsp;Localization (L10N) support  
✅ &nbsp;A variety of rich plugins  
✅ &nbsp;Highly customizable and hackable  
✅ &nbsp;Schematics

Transloco is your all-in-one solution for internationalizing Angular applications with ease and flexibility.

<hr />

- 🤓 &nbsp;Explore the (brand new ✨) [documentation](https://jsverse.gitbook.io/transloco) to learn more.
- 🚀 &nbsp;Check out the [Sandbox & Examples](https://jsverse.gitbook.io/transloco/resources/sandbox-and-examples) to see Transloco in action.
- 😎 &nbsp;Leverage [Schematics](https://jsverse.gitbook.io/transloco/developer-tools/schematics) for streamlined setup and configuration.
- 📖 &nbsp;Dive into insightful [blog posts](https://jsverse.gitbook.io/transloco/resources/blog-posts).
- ❓ &nbsp;Find answers to common questions in our [FAQs](https://jsverse.gitbook.io/transloco/resources/faqs).

## Contributors ✨

Thank goes to all these wonderful [people who contributed](https://github.com/jsverse/transloco/graphs/contributors) ❤️
npm package: @jsverse/transloco-keys-manager
Description: Extract translatable keys from projects that uses Transloco
Author: Shahar Kazaz
Latest version: 8.1.0

> [!IMPORTANT]  
> The Transloco packages are now published under the **@jsverse** scope, update your dependencies to get the latest features 🚀

<p align="center">
 <img width="50%" height="50%" src="./logo.png">
</p>

> 🦄 The Key to a Better Translation Experience

![Build Status](https://github.com/jsverse/transloco-keys-manager/actions/workflows/ci.yml/badge.svg)
[![NPM Version](https://img.shields.io/npm/v/%40jsverse%2Ftransloco-keys-manager)](https://www.npmjs.com/package/@jsverse/transloco-keys-manager)

Translation is a tiresome and repetitive task. Each time we add new text, we need to create a new entry in the translation file, find the correct placement for it, etc. Moreover, when we delete existing keys, we need to remember to remove them from each translation file.

To make the process less burdensome, we've created two tools for the Transloco library, which will do the monotonous work for you.

## 🍻Key Features

- ✅ &nbsp;Extract Translate Keys
- ✅ &nbsp;Scopes Support
- ✅ &nbsp;Webpack Plugin
- ✅ &nbsp;Find Missing and Extra Keys

Read the full documentation on the [official Transloco documentation site](https://jsverse.gitbook.io/transloco/tools/keys-manager-tkm).

## Contributors ✨

Thank goes to all these wonderful [people who contributed](https://github.com/jsverse/transloco-keys-manager/graphs/contributors) ❤️
npm package: @jsvfs/adapter-azure-blob
Description: An adapter for Azure Storage Blobs.
Author: Aaron Huggins
Latest version: 1.0.0

# JSVFS Adapter: Azure Blob

The official adapter for [`@jsvfs/core`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_core.html) using Microsoft's [`@azure/storage-blob`](https://github.com/Azure/azure-sdk-for-js/tree/master/sdk/storage/storage-blob) module with block blobs as the back-end.

Allows a developer to set either a storage account or a blob container as the root of the adapter. When the root is a
storage account, the first name in a path will be parsed as the container name, with the remaining part of the path
considered the blob name. When a container is the root, all file paths are considered a blob name.

Additionally, snapshots and flushes can be limited by setting one or more globs in the `include` option. This limits
any potentially destructive behavior to just those blob names which match the given patterns. Flushes are disabled by
default and must be enabled by intentionally setting `flushEnabled` to true.

If you're looking to create new adapters, please use [`@jsvfs/types`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_types.html) and look to [`@jsvfs/adapter-node-fs`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_adapter_node_fs.html) as an example.

## Supported Features

- Async commits
- Pass-through reads
- Snapshots
- Flush
- Journaling

## Installation

Get it from [npm](https://www.npmjs.com/package/@jsvfs/adapter-azure-blob):
```shell
npm install --save @jsvfs/adapter-azure-blob
```

### Usage

This adapter requires either an account connection string or the storage account and storage key in order to work.

```TypeScript
import { AzureBlobAdapter } from '@jsvfs/adapter-azure-blob'

const adapter = new AzureBlobAdapter({ access: { connectionString: process.env.MY_CONNECTION_STRING } })
```

## Documentation

Complete documentation of `jsvfs` can be found at the [jsvfs site](https://ahuggins-nhs.github.io/jsvfs/).
npm package: @jsvfs/adapter-minio-s3
Description: An adapter for Amazon S3 compatible storage using the MinIO JS library.
Author: Aaron Huggins
Latest version: 1.0.1

# JSVFS Adapter: MinIO S3

The official adapter for [`@jsvfs/core`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_core.html) using MinIO's Amazon S3 compatible [`minio`](https://github.com/minio/minio-js) module.

Snapshots and flushes can be limited by setting one or more globs in the `include` option. This limits
any potentially destructive behavior to just those blob names which match the given patterns. Flushes are disabled by
default and must be enabled by intentionally setting `flushEnabled` to true.

If you're looking to create new adapters, please use [`@jsvfs/types`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_types.html) and look to [`@jsvfs/adapter-node-fs`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_adapter_node_fs.html) as an example.

## Supported Features

- Async commits
- Pass-through reads
- Snapshots
- Flush
- Journaling

## Installation

Get it from [npm](https://www.npmjs.com/package/@jsvfs/adapter-minio-s3):
```shell
npm install --save @jsvfs/adapter-minio-s3
```

### Usage

This adapter requires client options to be passed per [MinIO's documentation](https://docs.min.io/docs/javascript-client-api-reference.html#MinioClient_endpoint).

```TypeScript
import { MinioS3Adapter } from '@jsvfs/adapter-minio-s3'

const adapter = new MinioS3Adapter({
  access: {
    endPoint: 'localhost',
    port: 4568,
    useSSL: false,
    accessKey: 'S3RVER',
    secretKey: 'S3RVER'
  }
})
```

## Documentation

Complete documentation of `jsvfs` can be found at the [jsvfs site](https://ahuggins-nhs.github.io/jsvfs/).
npm package: @jsvfs/adapter-multi
Description: An adapter of multiple adapters for JSVFS.
Author: Aaron Huggins
Latest version: 1.0.0

# JSVFS Adapter: Multi Adapter

The official adapter for [`@jsvfs/core`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_core.html) using multiple other adapters.

If you're looking to create new adapters, please use [`@jsvfs/types`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_types.html) and look to [`@jsvfs/adapter-node-fs`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_adapter_node_fs.html) as an example.

## Supported Features

So long as other adapters support these features, this adapter supports:

- Async commits
- Pass-through reads
- Journaling

This adapter does not support:

- Snapshots
- Flush

## Installation

Get it from [npm](https://www.npmjs.com/package/@jsvfs/adapter-multi):
```shell
npm install --save @jsvfs/adapter-multi
```

### Usage

This adapter requires other adapters. After creating an instance, register other adapters to use them together.

```TypeScript
import { MultiAdapter } from '@jsvfs/adapter-multi'
import { MinioS3Adapter } from '@jsvfs/adapter-minio-s3'
import { NodeFSAdapter } from '@jsvfs/adapter-node-fs'

const adapter = new MultiAdapter()

adapter.register(new NodeFSAdapter({ cwd: '/tmp' }))
adapter.register(new MinioS3Adapter({
  access: {
    endPoint: 'localhost',
    port: 4568,
    useSSL: false,
    accessKey: 'S3RVER',
    secretKey: 'S3RVER'
  }
}))
```

## Documentation

Complete documentation of `jsvfs` can be found at the [jsvfs site](https://ahuggins-nhs.github.io/jsvfs/).
npm package: @jsvfs/adapter-node-fs
Description: The official `jsvfs` adapter for Node's `fs` module.
Author: Aaron Huggins
Latest version: 1.0.0

# JSVFS Adapter: Node fs

The official adapter for [`@jsvfs/core`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_core.html) supporting Node's [`fs`](https://nodejs.org/api/fs.html) module as a back-end for `jsvfs`.

Allows a developer to define the current working directory that acts as the root of the adapter, and to enable the
`flush` functionality of the adapter. This second option is important, as flush in this adapter attempts to completely
remove all files and folders from the root of the adapter. To protect developers against accidentally destroying files,
this option defaults to `false` and must be intentionally enabled.

If you're looking to create new adapters, please use [`@jsvfs/types`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_types.html) and look to this module as an example.

## Supported Features

- Async commits
- Pass-through reads
- Snapshots
- Flush
- Journaling

## Installation

Get it from [npm](https://www.npmjs.com/package/@jsvfs/adapter-node-fs):
```shell
npm install --save @jsvfs/adapter-node-fs
```

### Usage

This adapter requires no options, but it will bind by default to the current working directory of the process. Pass a directory in the `cwd` property to bind to that instead.

```TypeScript
import { NodeFSAdapter } from '@jsvfs/adapter-node-fs'

const adapter = new NodeFSAdapter({ cwd: '/tmp' })
```

## Documentation

Complete documentation of `jsvfs` can be found at the [jsvfs site](https://ahuggins-nhs.github.io/jsvfs/).
npm package: @jsvfs/adapter-noop
Description: The default adapter for `@jsvfs/core`.
Author: Aaron Huggins
Latest version: 1.0.0

# JSVFS Adapter: No-op

The default adapter for `jsvfs`. Useful for testing or for using `jsvfs` purely in-memory with no access to persistent storage.

If you're looking to use `jsvfs`, it's probably best to start with `@jsvfs/core`.

This module is the default noop backend for `jsvfs` and already imported if you have installed `@jsvfs/core`.

If you're looking to create new adapters, please use `@jsvfs/types` and look to [`@jsvfs/adapter-node-fs`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_adapter_node_fs.html) as an example.

## Supported Features

- Async commits: nope.
- Pass-through reads: nada.
- Snapshots: nay.
- Flush: nein.
- Journaling: 番号

😀 Because everything is a no-op!

## Installation

Get it from [npm](https://www.npmjs.com/package/@jsvfs/adapter-noop):
```shell
npm install --save @jsvfs/adapter-noop
```

## Documentation

Complete documentation of `jsvfs` can be found at the [jsvfs site](https://ahuggins-nhs.github.io/jsvfs/).
npm package: @jsvfs/core
Description: The JavaScript Virtual File System - an extensible engine for file operations.
Author: Aaron Huggins
Latest version: 1.0.0

# JSVFS Core: JavaScript Virtual File System

The core module for JS Virtual File System. Provides the main `VirtualFileSystem` class with just enough back-end to get started with in-memory file hierarchy.

## Installation

Get it from [npm](https://www.npmjs.com/package/@jsvfs/core):
```shell
npm install --save @jsvfs/core
```

## Supported adapters

Without an adapter which implements a persistent storage, the JS Virtual File System will simply be a non-persistent store. These are the officially supported adapters.

- Amazon S3-compatible [`@jsvfs/adapter-minio-s3`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_adapter_minio_s3.html)
- Microsoft Azure Storage [`@jsvfs/adapter-azure-blob`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_adapter_azure_blob.html)
- Multi-adapter [`@jsvfs/adapter-multi`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_adapter_multi.html)
- Node's `fs` module [`@jsvfs/adapter-node-fs`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_adapter_node_fs.html)
- Non-persistent noop [`@jsvfs/adapter-noop`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_adapter_noop.html); this is included as the default adapter.

### Other adapters

Other adapters can be found using the keyword ["jsvfs adapter"](https://www.npmjs.com/search?q=keywords:jsvfs%20adapter).

### Using adapters

Adapters should be constructed first and passed to the `VirtualFileSystem` class when constructing it. Make sure to read the documentation closely for a given adapter so that it has the appropriate options for accessing and manipulating the persistent storage it implements.

```TypeScript
import { NodeFSAdapter } from '@jsvfs/adapter-node-fs'
import { VirtualFileSystem } from '@jsvfs/core'

const adapter = new NodeFSAdapter({ cwd: '/my/path/' })
const vfs = new VirtualFileSystem(adapter)
```

### Developing adapters

Work on complete documentation for writing adapters is coming. For now, start with the code for `@jsvfs/types` and read through the interface provided for adapters. Consider the Node `fs` adapter to be the reference implementation and take a look at how it implements the interface.

If the adapter implements a storage which is widely used, consider forking the jsvfs repository and contributing the adapter as a module. Assuming that this is the route you take, familiarity with TypeScript and Lerna are a must.

Otherwise, you can simply release your module on NPM or another package repository. If you'd like it to be discoverable relative to jsvfs, please use the keyword "jsvfs adapter" in your package.json.

## Documentation

Complete documentation of `jsvfs` can be found at the [jsvfs site](https://ahuggins-nhs.github.io/jsvfs/).
npm package: @jsvfs/extras
Description: Shared classes and helpers for JSVFS adapters.
Author: Aaron Huggins
Latest version: 1.0.0

# JSVFS Extras

Shared classes and helpers for JSVFS adapters.

If you're looking to use `jsvfs`, it's best to start with [`@jsvfs/core`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_core.html).

This module implements classes that can be used for developing adapters.

## Exports

- `Journal`: The error handling library for JSVFS adapters, providing classes for the official adapters.
- `Matcher`: The glob matching facility for JSVFS adapters.

## Installation

Get it from [npm](https://www.npmjs.com/package/@jsvfs/extras):
```shell
npm install --save @jsvfs/extras
```

## Documentation

Complete documentation of `jsvfs` can be found at the [jsvfs site](https://ahuggins-nhs.github.io/jsvfs/).
npm package: @jsvfs/types
Description: Types for the JavaScript Virtual File System and adapters.
Author: Aaron Huggins
Latest version: 1.0.0

# JSVFS Types

The type library for `jsvfs`, providing TypeScript types and interfaces for the main module and for creating new adapters.

If you're looking to use `jsvfs`, it's best to start with [`@jsvfs/core`](https://ahuggins-nhs.github.io/jsvfs/modules/_jsvfs_core.html).

This module implements types and interfaces that can be used for developing `jsvfs` itself and adapters.

## Installation

Get it from [npm](https://www.npmjs.com/package/@jsvfs/types):
```shell
npm install --save @jsvfs/types
```

## Documentation

Complete documentation of `jsvfs` can be found at the [jsvfs site](https://ahuggins-nhs.github.io/jsvfs/).
npm package: @jswap/sdk
Description: 🛠 An SDK for building applications on top of Jswap.
Latest version: 1.0.2

# Jswap SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/jswap/jswap-sdk/workflows/CI/badge.svg)](https://github.com/jswap/jswap-sdk)
[![npm version](https://img.shields.io/npm/v/@jswap/sdk/latest.svg)](https://www.npmjs.com/package/@jswap/sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@jswap/sdk/latest.svg)](https://bundlephobia.com/result?p=@jswap/sdk@latest)

In-depth documentation on this SDK is available at [jswap.finance](https://docs.jswap.finance/SDK/getting-started/).
npm package: @jsware/jsonpath-cli
Description: Command-Line Interface for the jsonpath-plus library
Author: John Scott
Latest version: 1.1.0

# jsonpath-cli
Command-Line interface for the `jsonpath-plus` library.

The `jpp` command enables running the `jsonpath-plus` library against files from
the command line. JSONPath searches return a JSON array which `jpp` outputs.
The `--pretty` option pretty-prints the output.  Additional command line options
can be found below.

See the [documentation](https://www.jsware.io/jsonpath-cli) for examples,
JSONPath expression syntax and additional details.

## Installation
```
npm install -g @jsware/jsonpath-cli
```

## Usage

```
Usage: jpp [options] [JSONPath Expression] [JSON Input File]

Options:
  -V, --version                display version
  -i, --input <file>           input JSON file (default: stdin)
  -e, --jsonpath <expression>  matching expression
  -o, --output <file>          output file for matches (default: stdout)
  -p, --pretty                 pretty print matches (default: false)
  -s, --separate               output each match separately (default: false)
  -b, --before <text>          output text before any matches
  -r, --prefix [prefix]        prefix when using --separate (default: false)
  -u, --suffix <suffix>        suffix each match except last with <suffix>
  -U, --suffix-all <suffix>    suffix all matches with <suffix>
  -a, --after <text>           output text after all matches
  -h, --help                   display help for command
```
npm package: @jsware/raml-editor
Description: This is a version of MuleSoft's API designer that interacts directly with your filesystem. Forked from sichvoge/api-designer-fs
Author: John Scott
Latest version: 1.0.1

# RAML Editor using Local Filesystem

This repository contains an implementation of the [api-designer](https://github.com/mulesoft/api-designer) using the local filesystem. It is a fork of [sichvoge/api-designer-fs](https://github.com/sichvoge/api-designer-fs) with some refactoring and enhancements.

There are several areas changed to enable accessing the local filesystem and other improvements:

1. Provide an override for the default filesystem that is being used (browser cache) - find necessary code inside the `html` folder - originally by _sichvoge_.
2. Expose local filesystem as HTTP endpoint - find necessary code inside the `lib` folder - originally by _sichvoge_
3. Refactored code. Fixed bug not sending dot files like .gitignore. Added additional debug statements. Removed seemingly redundant additional listener and multiple attempt to start web server.
4. Added api-editor shell scripts that will automatically `npm install` if api-designer is missing.
5. Ability to web server port (which now defaults to a random port to allow multiple copies to run).
6. Made RAML folder optional and default to current directory so you can `cd my_api_folder && api-editor`.

## Installation

Install from NPM.

```
npm -g install @jsware/raml-editor
```

You can also follow these steps:

1. Clone the repository
2. Execute `cd raml-editor`
3. Execute `npm install`
4. Execute `./raml-editor.js examples`

Alternatively you can put `raml-editor/bin` in your PATH so that api-editor works from where-ever you need.  If you don't specify a folder, the current directory is used.

## Usage

```
Usage: raml-editor [options] <location>

Opens the RAML Editor using the local filesystem <location> folder.

Options:
  -V, --version         output the version number
  -p, --port <integer>  listen on the specified port (default: 0)
  -h, --help            output usage information
```