open-index/open-npm huggingface dataset:
npm package: @stoplight/json-schema-tree
Description: <!-- BADGES -->
Author: Stoplight
Latest version: 4.0.0

# @stoplight/json-schema-tree

<!-- BADGES -->

### Use cases

- json-schema-viewer
- json-schema-editor
- masking

### Installation

Supported in modern browsers and Node.JS (>=10.18).

```bash
# latest stable
yarn add @stoplight/json-schema-tree
```

### Usage

```js
import { SchemaTree, SchemaNodeKind, isRegularNode } from '@stoplight/json-schema-tree';

const tree = new SchemaTree(mySchema);
const ALLOWED_DEPTH = 2;

tree.walker.hookInto('stepIn', node => tree.walker.depth <= ALLOWED_DEPTH); // if flattening is needed, this might need to be tweaked to account for the scenarios where certain nodes can be merged (i.e. arrays)

tree.walker.hookInto('filter', node => {
  return !isRegularNode(node) || node.types === null || !node.types.includes(SchemaNodeKind.Integer); // if a schema property is of type integer, it won't be included in the tree
});

tree.populate();

tree.root; // populated tree
```

### Contributing

1. Clone repo.
2. Create / checkout `feature/{name}`, `chore/{name}`, or `fix/{name}` branch.
3. Install deps: `yarn`.
4. Make your changes.
5. Run tests: `yarn test.prod`.
6. Stage relevant files to git.
7. Commit: `yarn commit`. _NOTE: Commits that don't follow the
   [conventional](https://github.com/marionebl/commitlint/tree/master/%40commitlint/config-conventional) format will be
   rejected. `yarn commit` creates this format for you, or you can put it together manually and then do a regular
   `git commit`._
8. Push: `git push`.
9. Open PR targeting the `master` branch.
npm package: @stoplight/json-schema-viewer
Description: A beautiful React component for viewing JSON Schema
Author: Stoplight
Latest version: 4.16.4

# @stoplight/json-schema-viewer

A JSON Schema viewer React component

- Explore the components: [Storybook](https://stoplightio.github.io/json-schema-viewer)
- View the changelog: [Releases](https://github.com/stoplightio/json-schema-viewer/releases)

### Features

- Full JSON Schema Draft 4 support, including `oneOf` and `anyOf` combiner properties
- Renders complicated nested objects to any depth
- Renders validation properties and markdown descriptions
- Capable of linking resolved \$refs
- Theme-able
- Collapsible

### Installation

Supported in modern browsers and node.

```bash
# latest stable
yarn add @stoplight/json-schema-viewer
```

### Usage

```jsx
// index.jsx
import { JsonSchemaViewer } from "@stoplight/json-schema-viewer";

<JsonSchemaViewer
  name="Todos Model"
  schema={schema}
  expanded={true}
  hideTopBar={false}
  emptyText="No schema defined"
  defaultExpandedDepth={0}
/>;
```

More examples can be find in the [Storybook stories](./src/__stories__/JsonSchemaViewer.tsx).

### Contributing

1. Clone repo.
2. Create / checkout `feature/{name}`, `chore/{name}`, or `fix/{name}` branch.
3. Install deps: `yarn`.
4. Make your changes.
5. Run tests: `yarn test.prod`.
6. Stage relevant files to git.
7. Commit: `yarn commit`. _NOTE: Commits that don't follow the [conventional](https://github.com/marionebl/commitlint/tree/master/%40commitlint/config-conventional) format will be rejected. `yarn commit` creates this format for you, or you can put it together manually and then do a regular `git commit`._
8. Push: `git push`.
9. Open PR targeting the `develop` branch.
npm package: @stoplight/markdown
Description: Useful functions when working with Markdown.
Author: Stoplight
Latest version: 3.2.0

# @stoplight/markdown

[![Maintainability](https://api.codeclimate.com/v1/badges/751d2319d7d0fd68d8c9/maintainability)](https://codeclimate.com/github/stoplightio/markdown/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/751d2319d7d0fd68d8c9/test_coverage)](https://codeclimate.com/github/stoplightio/markdown/test_coverage)

Useful functions when working with Markdown. Leverages the Unified / Remark ecosystem under the hood.

- Explore the interfaces: [TSDoc](https://stoplightio.github.io/markdown)
- View the changelog: [Releases](https://github.com/stoplightio/markdown/releases)

### Installation

Supported in modern browsers and node.

```bash
# latest stable
yarn add @stoplight/markdown
```

### Usage

#### Example `parse`

```ts
import { parse } from '@stoplight/markdown';

const result = parse('**markdown**');

console.log(result); // => the MDAST compliant tree
```

### Contributing

1. Clone repo.
2. Create / checkout `feature/{name}`, `chore/{name}`, or `fix/{name}` branch.
3. Install deps: `yarn`.
4. Make your changes.
5. Run tests: `yarn test.prod`.
6. Stage relevant files to git.
7. Commit: `yarn commit`. _NOTE: Commits that don't follow the
   [conventional](https://github.com/marionebl/commitlint/tree/master/%40commitlint/config-conventional) format will be
   rejected. `yarn commit` creates this format for you, or you can put it together manually and then do a regular
   `git commit`._
8. Push: `git push`.
9. Open PR targeting the `develop` branch.
npm package: @stoplight/markdown-viewer
Description: A react component that renders Stoplight flavored markdown.
Author: Stoplight
Latest version: 5.7.1

# @stoplight/markdown-viewer

<!-- BADGES -->

A Stoplight Markdown viewer React component

- Explore the components: [Storybook](https://stoplightio.github.io/markdown-viewer)
- View the changelog: [Releases](https://github.com/stoplightio/markdown-viewer/releases)

### Features

- Supports [Stoplight markdown annotations](https://meta.stoplight.io/docs/platform/ZG9jOjM3MTUxNjgw-stoplight-flavored-markdown)
- MDAST-spec compliant
- Theme-able
- Render custom components

## Installation

Supported in modern browsers.

```bash
# markdown viewer + peer deps
yarn add @stoplight/markdown-viewer @stoplight/mosaic @stoplight/mosaic-code-viewer react react-dom
```

## Basic Usage

````tsx
import { DefaultSMDComponents, MarkdownViewer } from '@stoplight/markdown-viewer';
import { JSONSchemaViewer } from '@stoplight/json-schema-viewer';

const markdown = `
### Welcome

Hi there.
```;

<MarkdownViewer
  markdown={markdown}
  includeToc
  parseOptions={{
    components: {
      // Example of overriding the default code renderer for jsonSchema blocks
      code: props => {
        if (props.jsonSchema) {
          return <JSONSchemaViewer value={JSON.parse(props.children)} />;
        }

        // Fallback to the default component mapping
        const DefaultCodeViewer = DefaultSMDComponents.code;
        return <DefaultCodeViewer {...props} />;
      },
    },
  }}
/>;
````

## MarkdownViewerProvider

When overriding components it is often easier to do so once, globally, in the consuming application. To do so just use
the `MarkdownViewerProvider` component.

```tsx
import { MarkdownViewerProvider, MarkdownViewer } from '@stoplight/markdown-viewer';

const markdown = `[my link](http://hello.com)`;

<MarkdownViewerProvider
  components={{
    a: props => <a {...props} data-test="CUSTOM-1" />,
    p: props => <p {...props} data-test="CUSTOM-1" />,
  }}
>
  // somewhere deeper in your application... the custom a and p components will be used when rendering the markdown
  <MarkdownViewer markdown={markdown} />
</MarkdownViewerProvider>;
```

More examples can be find in the [Storybook stories](./src/__stories__/MarkdownViewer.tsx).

## Contributing

1. Clone repo.
2. Create / checkout `feature/{name}`, `chore/{name}`, or `fix/{name}` branch.
3. Install deps: `yarn`.
4. Make your changes.
5. Run tests: `yarn test.prod`.
6. Stage relevant files to git.
7. Commit: `yarn commit`. _NOTE: Commits that don't follow the
   [conventional](https://github.com/marionebl/commitlint/tree/master/%40commitlint/config-conventional) format will be
   rejected. `yarn commit` creates this format for you, or you can put it together manually and then do a regular
   `git commit`._
8. Push: `git push`.
9. Open PR targeting the `develop` branch.