open-index/open-npm huggingface dataset:
npm package: @opencodegraph/codemirror-extension
Description: OpenCodeGraph extension for CodeMirror
Latest version: 0.0.4

# OpenCodeGraph extension for CodeMirror

The [`@opencodegraph/codemirror-extension`](https://www.npmjs.com/package/@opencodegraph/codemirror-extension) npm package implements a [CodeMirror](https://codemirror.net/) extension that shows [OpenCodeGraph](https://opencodegraph.org) annotations in the editor.

Check out the [OpenCodeGraph playground](https://opencodegraph.org/playground) for a live example of this extension.

## Usage

Install it:

```shell
npm install @opencodegraph/codemirror-extension @opencodegraph/client
```

Set up an OpenCodeGraph client and fetch annotations:

```typescript
import { createClient } from '@opencodegraph/client'

// Set up a client.
const client = createClient({
  configuration: () =>
    Promise.resolve({
      enable: true,
      providers: {
        'https://opencodegraph.org/npm/@opencodegraph/provider-hello-world': true,
      },
    }),
  makeRange: r => r,
  logger: console.error,
})

// Fetch annotations for the file.
const annotations = await client.annotations({ file: 'file:///foo.js', content: 'my file\nhello\nworld' })
```

Then register the extension with CodeMirror.

If you're using React, the `useOpenCodeGraphExtension` hook makes it easy:

```typescript
import { useOpenCodeGraphExtension } from '@opencodegraph/codemirror-extension'

function MyComponent() {
  // ...

  // A helpful React hook if using React.
  const ocgExtension = useOpenCodeGraphExtension({
    visibility: true,
    annotations,
  })

  // Pass `ocgExtension` to CodeMirror as an extension.

  // ...
}
```

Otherwise, set up the extension manually. If you're using React, you can get UI components from `@opencodegraph/ui-react`; otherwise, use `@opencodegraph/ui-standalone`.

```tsx
import type { Extension } from '@codemirror/state'
import { openCodeGraphData, showOpenCodeGraphDecorations } from '@opencodegraph/codemirror-extension'
import { IndentationWrapper, ItemChipList } from '@opencodegraph/ui-react'

const ocgExtension: Extension = [
  openCodeGraphData(annotations),
  showOpenCodeGraphDecorations({
    visibility: true,
    createDecoration(container, { indent, items }) {
      const root = createRoot(container)
      root.render(
        <IndentationWrapper indent={indent}>
          <ItemChipList items={items} chipClassName="ocg-chip" popoverClassName="ocg-chip-popover" />
        </IndentationWrapper>
      )
      return {
        destroy() {
          root.unmount()
        },
      }
    },
  }),
]

// Pass `ocgExtension` to CodeMirror as an extension.
```

## Demo

The [OpenCodeGraph playground](https://opencodegraph.org/playground) is a live demo of this extension.

You can also clone this repository and run `pnpm run demo` from this directory, then visit http://localhost:5902. See the `demo/` dir for source code.

## Development

- [Source code](https://sourcegraph.com/github.com/sourcegraph/opencodegraph/-/tree/client/codemirror)
- [Docs](https://opencodegraph.org/docs/clients/codemirror)
- License: Apache 2.0
npm package: @opencodegraph/monaco-editor-extension
Description: OpenCodeGraph extension for Monaco Editor
Latest version: 0.0.3

# OpenCodeGraph extension for Monaco Editor

The [`@opencodegraph/monaco-editor-extension`](https://www.npmjs.com/package/@opencodegraph/monaco-editor-extension) npm package implements a [Monaco Editor](https://microsoft.github.io/monaco-editor/) extension that shows [OpenCodeGraph](https://opencodegraph.org) annotations on files.

## Usage

Install it:

```shell
npm install @opencodegraph/monaco-editor-extension @opencodegraph/client
```

Set up an OpenCodeGraph client:

```typescript
import { createClient } from '@opencodegraph/client'
import { createExtension, makeRange } from '@opencodegraph/monaco-editor-extension'

// Set up a client.
const client = createClient({
  configuration: () =>
    Promise.resolve({
      enable: true,
      providers: {
        'https://opencodegraph.org/npm/@opencodegraph/provider-hello-world': true,
      },
    }),
  makeRange,
  logger: console.error,
})

// Now, get the editor object that refers to the Monaco editor you want to
// extend. Some code calls monaco.editor.create directly, and some code uses
// a wrapper around Monaco.
const editor: monaco.editor.IStandaloneCodeEditor = monaco.editor.create(/* ... */)

// Then create the extension and call it on the Monaco editor object.
const disposable = createExtension(client)(editor)

// Call disposable.dispose() when done to free resources.
```

## Demo

Clone this repository and run `pnpm run demo` from this directory, then visit http://localhost:5901. See the `demo/` dir for source code.

## Development

- [Source code](https://sourcegraph.com/github.com/sourcegraph/opencodegraph/-/tree/client/monaco-editor)
- [Docs](https://opencodegraph.org/docs/clients/monaco-editor)
- License: Apache 2.0
npm package: @opencodegraph/provider-hello-world
Description: Hello World (OpenCodeGraph provider)
Latest version: 0.0.2

# Hello World context provider for OpenCodeGraph

This is a sample context provider for [OpenCodeGraph](https://opencodegraph.org) that annotates every file with `✨ Hello, world!` every 10 lines or so.

## Usage

Add the following to your settings in any OpenCodeGraph client:

```json
"opencodegraph.providers": {
    // ...other providers...
    "https://opencodegraph.org/npm/@opencodegraph/provider-hello-world": true,
},
```

## Configuration

This sample provider is not configurable.

## Development

- [Source code](https://sourcegraph.com/github.com/sourcegraph/opencodegraph/-/tree/provider/hello-world)
- License: Apache 2.0
npm package: @opencodegraph/provider-storybook
Description: Add Storybook links and image previews to your code (OpenCodeGraph provider)
Latest version: 0.0.3

# Storybook context provider for OpenCodeGraph

This is a context provider for [OpenCodeGraph](https://opencodegraph.org) that annotates your React components and `*.story.ts?(x)` files with screenshots and links to your [Storybook](https://storybook.js.org/) component library. It works well with storybooks hosted on [Chromatic](https://chromatic.com/).

## Screenshot

![Screenshot of OpenCodeGraph annotations for Storybook in a code file](https://storage.googleapis.com/sourcegraph-assets/blog/screencast-vscode-storybook-v0.gif)

_Hover over a UI component in code to see what it looks like_

Visit the [OpenCodeGraph playground](https://opencodegraph.org/playground) for live examples.

## Usage

Add the following to your settings in any OpenCodeGraph client:

```json
"opencodegraph.providers": {
    // ...other providers...
    "https://opencodegraph.org/npm/@opencodegraph/provider-storybook": {
        "storybookUrl": "<URL to the Storybook for your application>"
    }
},
```

Tips:

- If you're using VS Code, you can put the snippet above in `.vscode/settings.json` in each repository if you have different storybooks per-repository.
- To use this with storybooks hosted on [Chromatic](https://chromatic.com/), see below in the "[Configuration](#configuration)" section.
- Play around with the Storybook provider in realtime on the [OpenCodeGraph playground](https://opencodegraph.org/playground).

## Configuration

<!-- Keep in sync with index.ts -->

```typescript
/** Settings for the Storybook OpenCodeGraph provider. */
interface Settings {
  /**
   * The URL to a published Storybook for your project.
   *
   * If you're using Chromatic, this is of the form `https://<branch>--<appid>.chromatic.com`; see
   * https://www.chromatic.com/docs/permalinks/#get-permalinks-to-your-project for how to obtain
   * this value.
   *
   * If the URL contains `<branch>`, it will always be replaced with `main`.
   *
   * TODO(sqs): Support non-main branches.
   */
  storybookUrl: string
}
```

## Development

- [Source code](https://sourcegraph.com/github.com/sourcegraph/opencodegraph/-/tree/provider/storybook)
- [Docs](https://opencodegraph.org/docs/providers/storybook)
- License: Apache 2.0