open-index/open-npm huggingface dataset:
npm package: @react-trace/plugin-copy-to-clipboard
Description: react-trace plugin: copy selected component source and path to clipboard
Author: Vitor Buzinaro
Latest version: 0.0.6

# @react-trace/plugin-copy-to-clipboard

`@react-trace/plugin-copy-to-clipboard` adds a `Copy path` item to the Trace action panel for selections that have source information.

When you trigger the action, the plugin copies a project-relative `path:lineNumber` reference to the clipboard.

## Install

Install the plugin alongside its peer dependencies:

```bash
pnpm add --dev @react-trace/core @react-trace/ui-components @react-trace/plugin-copy-to-clipboard
```

If you are already using `@react-trace/kit`, this plugin is included there by default.

## Usage

```tsx
import { Trace } from '@react-trace/core'
import { CopyToClipboardPlugin } from '@react-trace/plugin-copy-to-clipboard'

import App from './App'

export function AppWithTrace() {
  return (
    <>
      <App />
      <Trace
        root={import.meta.env.VITE_ROOT}
        plugins={[CopyToClipboardPlugin()]}
      />
    </>
  )
}
```

`root` should be the absolute project root passed to Trace so the plugin can resolve relative file paths for comments.

## Copied output

The copied value uses the current project root as the base path and looks like this:

```text
src/components/Button.tsx:42
```
npm package: @react-trace/plugin-open-editor
Description: react-trace plugin: open inspected component source in your code editor
Author: Vitor Buzinaro
Latest version: 0.0.7

# @react-trace/plugin-open-editor

Open the currently selected component source in a local editor from the Trace action panel.

This plugin adds:

- an `Open in Editor` action for the selected source
- a settings control for choosing the default editor inside the widget

## Installation

Install the plugin alongside its peer dependencies:

```bash
pnpm add --dev @react-trace/core @react-trace/ui-components @react-trace/plugin-open-editor
```

If you are already using `@react-trace/kit`, this plugin is included there by default.

## Usage

```tsx
import { Trace } from '@react-trace/core'
import { OpenEditorPlugin } from '@react-trace/plugin-open-editor'

import App from './App'

export function AppWithTrace() {
  return (
    <>
      <App />
      <Trace
        root={import.meta.env.VITE_ROOT}
        plugins={[OpenEditorPlugin({ editor: 'vscode' })]}
      />
    </>
  )
}
```

`root` should be the absolute project root passed to Trace so the plugin can resolve relative file paths for comments.

## `editor` option

`OpenEditorPlugin` accepts a single option:

```ts
interface OpenEditorPluginOptions {
  editor?: EditorPreset
}
```

- Default: `vscode`
- If the user changes the editor in the widget settings, that's what's used instead.

The package also exports the `EditorPreset` type.

## Supported editor presets

These are the currently implemented presets:

- `vscode`
- `cursor`
- `windsurf`
- `zed`
- `webstorm`
- `intellij`

## Behavior

When a source location is selected, the plugin resolves the file path relative to the Trace `root` and opens the generated editor URL with `window.open(...)`.
npm package: @react-trace/plugin-preview
Description: react-trace plugin: Monaco-powered source code preview for inspected components
Author: Vitor Buzinaro
Latest version: 0.0.6

# @react-trace/plugin-preview

Monaco-based source preview plugin for `@react-trace/core`.

This package adds a toolbar control for connecting the current project folder and an action-panel preview for the selected source file.

## Installation

```bash
pnpm add --dev @react-trace/core @react-trace/ui-components @react-trace/plugin-preview
```

If you are already using `@react-trace/kit`, this plugin is included there by default.

## Usage

```tsx
import { Trace } from '@react-trace/core'
import { PreviewPlugin } from '@react-trace/plugin-preview'

import App from './App'

export function AppWithTrace() {
  return (
    <>
      <App />
      <Trace
        root={import.meta.env.VITE_ROOT}
        plugins={[PreviewPlugin({ theme: 'one-dark-pro' })]}
      />
    </>
  )
}
```

`root` should be the absolute project root passed to Trace so the plugin can resolve relative file paths for comments.

## What it adds

- A toolbar button for project-folder access.
- An action-panel source preview for the currently selected component source.
- An inline Monaco editor with syntax highlighting.
- Optional save and expand controls when editing is enabled.
- A plugin settings UI for preview theme and editing mode.

## Folder access expectations

The preview plugin reads files from the project through Trace's file-system service, so users must grant folder access before the preview can load file contents.

- Pass the absolute project root to `<Trace root="..." />`.
- When prompted, select the same project folder that contains the source files Trace resolves.
- If a root path is available, the plugin copies that path to the clipboard to make the folder picker easier to use.
- Until access is granted, the toolbar button and action panel show the access flow instead of a live file preview.
- When editing is enabled, saves are written back through the same file-system access.

If you only want inspection without file writes, start the plugin in read-only mode with `disabled: true`.

## Options

`PreviewPlugin(options?: PreviewPluginOptions)`

```ts
interface PreviewPluginOptions {
  disabled?: boolean
  theme?: BundledTheme
}
```

- `disabled` — defaults to `false`. Starts the preview in read-only mode and removes editing controls.
- `theme` — defaults to `'one-dark-pro'`. Accepts any bundled Shiki theme id.

## Settings

The plugin also contributes a settings panel inside Trace where users can:

- toggle code editing on or off
- switch the preview theme

These controls let users adjust preview behavior without changing the plugin registration code.
npm package: @react-trace/ui-components
Description: Shared UI primitives (buttons, tooltips, popovers, icons) for react-trace plugins
Author: Vitor Buzinaro
Latest version: 0.0.2

# @react-trace/ui-components

Shared UI primitives for the React Trace package ecosystem.

Use this package when building a plugin. These components match the widget's existing look and feel, especially toolbar controls, action-panel controls, overlays, and small layout helpers.

## Stable exports across current entrypoints

These are the symbols currently present in both `src/index.tsx` and the production stub surface (`src/index.prod.ts` / `dist/index.prod.d.ts`).

### Action and input primitives

- `Button`
- `IconButton`
- `ToolbarButton`
- `Textarea`

### Layout and small helpers

- `PanelHeader`
- `Separator`
- `Kbd`, `KbdGroup`

### Overlay and selection primitives

- `Tooltip`
- `Popover`
- `DropdownMenu`
- `Select`
- `Combobox`
- `panelPopupStyle`

### Icons

- `ChatBubbleIcon`
- `ChevronRightIcon`
- `ClipboardIcon`
- `CollapseIcon`
- `ExpandIcon`
- `FolderIcon`
- `OpencodeIcon`
- `OpenInEditorIcon`
- `SaveIcon`
- `SettingsIcon`
- `TrashIcon`
- `XIcon`

### Logo

- `Logo`

## Intended usage for package authors

- Prefer these primitives over package-local replacements when you need standard buttons, headers, menus, selects, or text inputs.
- Keep styling inline. These components are designed to be extended with `style` props and the shared inline-style approach used throughout this repo.
- For portal-based UI inside the Trace widget, render into the widget portal container instead of `document.body`. In practice, package authors typically pair this package with `useWidgetPortalContainer()` from `@react-trace/core`.
- Keep examples and public imports limited to the shared surface available across the package's current conditional entrypoints.

## Example

```tsx
import { useWidgetPortalContainer } from '@react-trace/core'
import {
  Button,
  IconButton,
  OpenInEditorIcon,
  PanelHeader,
  Tooltip,
} from '@react-trace/ui-components'

export function ExamplePanel() {
  const portalContainer = useWidgetPortalContainer()

  return (
    <div>
      <PanelHeader
        title="Preview"
        actionsRender={
          <Tooltip label="Open in editor" container={portalContainer}>
            <IconButton aria-label="Open in editor">
              <OpenInEditorIcon size={14} />
            </IconButton>
          </Tooltip>
        }
      />

      <Button variant="secondary">Refresh</Button>
    </div>
  )
}
```
npm package: @react-typed-hooks/use-key-press
Description: React hook written in TypeScript
Author: Christopher Dierkens
Latest version: 1.0.5

# useKeyPress

React hook that returns `true` when the specified `targetKey` is pressed.

![version](https://badgen.net/npm/v/@react-typed-hooks/use-key-press)

## Installation

```bash
npm install @react-typed-hooks/use-key-press
```

## Usage

```tsx
import { useKeyPress } from "@react-typed-hooks/use-key-press";

const Demo = () => {
  const isEscapePressed = useKeyPress({ targetKey: "Escape" });

  return isEscapePressed ? "Yes" : "No";
};
```

## API

### Types

```ts
interface UseKeyPressOptions {
  targetKey: KeyboardEvent["key"];
}
```

```ts
function useKeyPress(options: UseKeyPressOptions): boolean;
```

### Options

`targetKey: KeyboardEvent["key"]`

A [predefined key value](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) (i.e, `Escape`, `Enter`, `Backspace`, etc) to watch the `keydown` and `keyup` event on.
npm package: @react-typed-hooks/use-local-storage
Description: React hook written in TypeScript
Author: Christopher Dierkens
Latest version: 1.0.0-alpha.4

# useLocalStorage

React hook that will return the entry in `localstorage` for the passed in key after passing it through `JSON.parse`.

The hook also returns a setter that will update the returned value and store the result of `JSON.stringify` in `localstorage`

![version](https://badgen.net/npm/v/@react-typed-hooks/use-local-storage)

## Installation

```bash
npm install @react-typed-hooks/use-local-storage
```

## Usage

Get a value out of `localstorage`

```tsx
import { useLocalStorage } from "@react-typed-hooks/use-window-size";

const Demo = () => {
  const [value] = useLocalStorage("any-key");

  ...
};
```

Pass in a default value to return if the key is not found in `localstorage`.

```tsx
import { useLocalStorage } from "@react-typed-hooks/use-window-size";

const Demo = () => {
  const [value, setValue] = useLocalStorage("any-key", { foo: "bar" });

  ...
};
```

Set a value in `localstorage`.

```tsx
import { useLocalStorage } from "@react-typed-hooks/use-window-size";

const Demo = () => {
  const [value, setValue] = useLocalStorage("any-key", "any-value");

  return <button onClick={() => setValue("new-value")}>{value}</button>;
};
```

## API

### Types

```ts
type SetValue = (value: any | ((value: any) => any)) => void;

function useLocalStorage(key: string, defaultValue: any): [any, SetValue];
```
npm package: @react-typed-hooks/use-window-size
Description: React hook written in TypeScript
Author: Christopher Dierkens
Latest version: 1.0.5

# useWindowSize

React hook that returns the window size. Updates on window resize and orientation change.

![version](https://badgen.net/npm/v/@react-typed-hooks/use-window-size)

## Installation

```bash
npm install @react-typed-hooks/use-window-size
```

## Usage

```tsx
import { useWindowSize } from "@react-typed-hooks/use-window-size";

const Demo = () => {
  const size = useWindowSize();

  return size ? (
    <pre>JSON.stringify(size, null, 4)</pre>
  ) : (
    <span>Size is null in a node like environment</span>
  );
};
```

## API

### Types

```ts
interface Size {
  height: number;
  width: number;
}

interface UseWindowSizeOptions {
  wait?: number;
}
```

```ts
function useWindowSize(options?: UseWindowSizeOptions): Size | null;
```

### Options

`wait`

The amount of time to delay updating `Size` after the orientation changes.

The amount of time to throttle between updating `Size` when the window is resized.
npm package: @react-typed-hooks/utils
Description: Utils for React hook written in TypeScript
Author: Christopher Dierkens
Latest version: 1.0.5

# Utils

Utility functions to use within hooks.

![version](https://badgen.net/npm/v/@react-typed-hooks/utils)

## Installation

```bash
npm install @react-typed-hooks/utils
```

## Usage

### `hasWindow`

Returns true if `window` is a type of object.

```ts
import { hasWindow } from @react-typed-hooks/utils;

if (hasWindow()) {
  window.addEventListener("keydown", downHandler);
}
```
npm package: @react-typescript-utils/decorators
Description: decorators for react state and lifesycle!
Author: shmuelhizmi
Latest version: 0.0.3

# React TypeScript decorators

typescript decorators for react components state and lifcycle

## install

- `npm install @react-typescript-utils/decorators`

## code example -

```tsx
import React from "react";
import "./App.css";
import {
  Component,
  onMount,
  useState,
} from "@react-typescript-utils/decorators";

class App extends Component {
  private header = React.createRef<HTMLHeadingElement>();

  @onMount()
  setHeadlineText() {
    console.log("mount");
    if (this.header.current) this.header.current.innerHTML = "hello world";
  }

  @onMount()
  setBackground() {
    document.body.style.backgroundColor = "#f00";
  }

  @useState(5) count!: number;

  render = () => {
    console.log(this.count);
    return (
      <div>
        <h1 ref={this.header}></h1>
        <p
          onClick={() => {
            this.count++;
          }}
        >
          {this.count}
        </p>
      </div>
    );
  };
}
console.log(new App({}).count);

export default App;
```

## Lifesycle decorators

- onMount ( componentDidMout )

```ts
class App {
  ...

  private div = React.createRef<HTMLElement>();

  @onMount()
  setDivContent() {
    if (this.header.current) this.header.current.innerHTML = "hello world";
  }

  ...
}
```

- onWillUnmount ( componentWillUnmount )

```ts
class App {
  ...

  private instance = runSomeThing();

  @onWillUnmount()
  stopInstace() {
    this.instance.stop();
  }

  ...
}
```

- onShouldUpdate ( shouldComponentUpdate )

```ts
class App {
  ...

  @onShouldUpdate()
  update(nextProps: App["props"], nextState: App["state"]) {
    if (nextProps.stuff === nextState.that) {
      return true;
    } else {
      return false;
    }
  }

  ...
}
```

## state

- useState ( shouldComponentUpdate )

```tsx
class App {
  ...

  @useState(5) count!: number;

  render() {
    console.log(this.count)
    return (
      <div>
        <h1 ref={this.header}></h1>
        <p onClick={() => {
          this.count++; // automatic rerender
          }}>{this.count}</p>
      </div>
    );
  };

  ...
}
```
npm package: @react-ui-generator/metaphor
Description: DSL for easing baking of metadata for the react-ui-generator.
Author: A.Zaviruha
Latest version: 0.7.5

# Metaphor

DSL for easing baking of metadata for the react-ui-generator.

## Example

```js
import Metaphor from '@react-ui-generator/metaphor';
import BaseMeta from './meta.json';

const formToView = new Metaphor(BaseMeta)
  .showAll()
  .disableAll()
  .value();

const formToEdit = new Metaphor(BaseMeta)
  .enableAll()
  .disable(['id', 'createdAt', 'author'])
  .config
    .set('email', { showAsterix: true })
    .set(['birthDate', 'employmentDate'], {
      showAsterix: true,
      format: 'DD.MM.YYYY',
    })
    .up()
  .actions
    .set(['btnSave'], { onClick: 'sendFormToServer' })
    .set('btnCancel', { onClick: isFormChanged() ? 'confirmEditCancellation' : 'closeForm' })
    .up()
  .hide(calcSecretFieldsByUserRole(), true)
  .value();
```