open-index/open-npm huggingface dataset:
npm package: @personio/drafts
Description: ## DEPRECATED -- DO NOT TAKE A DEPENDENCY ON THIS LIBRARY
Latest version: 3.0.0

# @personio/drafts

## DEPRECATED -- DO NOT TAKE A DEPENDENCY ON THIS LIBRARY

This library no longer connects to the Drafts API service, which is decommissioned. It now provides a static implementation
to facilitate decommission of the service. The static implementation allows for continued operation of the existing usage
in Recruiting UI until that will be refactored and usage of this library permanently decommissioned.

## Development

```bash
yarn install
yarn test
yarn lint:fix
```

## Installation

Run

```bash
yarn add @personio/drafts
```
## Usage
### How to save data into localStorage

```tsx
import * as React from 'react';
import { useDrafts } from '@personio/drafts';

type Props = {
  companyId: number;
  employeeId: number;
}

const MyComponent = ({ companyId, employeeId }: Props) => {
  const LOCAL_STORAGE_KEY = 'myAwesomeKey';
  const [description, setDescription] = React.useState('');
  const [{ publicKey }, { setData }] = useDrafts({ companyId, employeeId });

  const onSave = () => {
    // Public key should be fetched on mount
    // since we need it in order to encrypt the content stored in the localStorage
    if (publicKey) {
      setData({ localStorageKey: LOCAL_STORAGE_KEY, value: description });
    }
  }
  
  return (
    <>
      <textarea value={description} onChange={({ target: { value } }) = setDescription(value)} />
      <button onClick={onSave}>Save</button>
    </>
  );
}
```

### How to get decrypted value from key

```tsx
import * as React from 'react';
import { useDrafts } from '@personio/drafts';

type Props = {
  companyId: number;
  employeeId: number;
}

const MyComponent = ({ companyId, employeeId }: Props) => {
  const LOCAL_STORAGE_KEY = 'myAwesomeKey';
  const [description, setDescription] = React.useState('');
  const [{ data }, { getData }] = useDrafts({ companyId, employeeId });

  React.useEffect(() => {
    getData({ localStorageKey: LOCAL_STORAGE_KEY })
  }, [getData]);

  React.useEffect(() => {
    if (data) {
      setDescription(data);
    }
  }, [data]);
  
  return (
    <>
      <textarea value={description} onChange={({ target: { value } }) = setDescription(value)} />
    </>
  );
}
```
npm package: @personio/html-sanitizer
Description: A helper library used in Personio UI to sanitize HTML content. Written in TypeScript.
Latest version: 1.1.0

# @personio/html-sanitizer

A helper library used in Personio UI to sanitize HTML content.
Written in TypeScript.

## Installation

Run

```bash
yarn add @personio/html-sanitizer
```

## Usage

There are two ways to use this library:

### As hook

```tsx
import * as React from 'react';
import { useHTMLSanitizer } from '@personio/html-sanitizer';

type Props = {
  htmlContent: string;
}

const MyComponent = ({ htmlContent }: Props) => {
  const sanitized = useHTMLSanitizer({ html: htmlContent });
  
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: sanitized,
      }}
    />
  );
}
```

### As Component (using hook under the hood)

```tsx
import * as React from 'react';
import { HTMLSanitizer } from '@personio/html-sanitizer';

type Props = {
  htmlContent: string;
}

const MyComponent = ({ htmlContent }: Props) => {
  return <HTMLSanitizer html={htmlContent} as="span" />;
}
```
npm package: @personio/prettier-config
Description: ## Description
Latest version: 1.0.0

# Personio - Prettier Config

## Description

This is an internal project used for sharing common prettier rules across all the front-end packages at Personio.

## Installation

In your front-end package, run:

```
yarn add @personio/prettier-config -D
```

Now open your `package.json` file and place the content:

```
{
  "prettier": "@personio/prettier-config"
}
```
npm package: @personio/ui-components
Description: ## Where to put component documentation related assets
Latest version: 7.5.1
Deprecated: This package @personio/ui-components has been deprecated, please use Highlight UI packages.

# Design System Docz assets

## Where to put component documentation related assets

To respect the modularity of each component, the suggested approach is to have a `__docs__` dicrectory in each component's directory and put all the documentation assets there.

The following structure is used for the images and other doc related stuff:

```
src/select
├── __docs__
│   ├── docs.fixtures.js
│   ├── docs.styles.scss
│   └── img
│       ├── select_doc_briefexaple1.png
│       └── select_doc_briefexaple2.png
````

## How to use images in `.mdx` files

The default `![foo](__docs__/img/bar.png)` notation authomatically exposes the image assets to the bundler and the pipeline will upload them to the S3 bucket.

However for the `<Playground/>` components with image address, the suggested approach would be:

```jsx
import fooImgUrl from './__docs__/img/foo.png'

<Playground>
  <FooComponent img={fooImgUrl} />
</Playground>
```
npm package: @personna/gen-ui
Description: A React component library and chat server SDK built on top of shadcn/ui
Author: Vishu Saxena
Latest version: 0.0.1

# @personna/gen-ui

A React component library and chat server SDK built on top of shadcn/ui for building AI-powered applications.

## Features

🎨 **Pre-built React Components** - Complete UI component library based on shadcn/ui  
🤖 **AI Chat SDK** - Full-featured chat server with multiple AI provider support  
⚡ **TypeScript Support** - Full TypeScript support with proper type definitions  
🔧 **Modular Architecture** - Use only what you need - client, server, or both  
🌐 **Multiple AI Providers** - Support for OpenAI, Anthropic, and more  
📱 **Mobile Ready** - Responsive components that work across all devices

## Installation

```bash
npm install @personna/gen-ui
```

## Quick Start

### Client-side Components

```tsx
import { Chat, ChatProvider } from '@personna/gen-ui/client';

function App() {
  return (
    <ChatProvider>
      <Chat />
    </ChatProvider>
  );
}
```

### Server-side SDK

```typescript
import { ChatEngine, AnthropicProvider } from '@personna/gen-ui/server';

const engine = new ChatEngine({
  provider: new AnthropicProvider({
    apiKey: process.env.ANTHROPIC_API_KEY
  })
});

app.post('/api/chat', async (req, res) => {
  const response = await engine.processMessage(req.body.message);
  res.json(response);
});
```

## Available Exports

### Client (`@personna/gen-ui/client`)
- React components for chat interfaces
- UI components (buttons, inputs, cards, etc.)
- Hooks for chat functionality
- TypeScript types

### Server (`@personna/gen-ui/server`)
- Chat engine and agent system
- AI provider integrations (OpenAI, Anthropic)
- Database adapters (MongoDB)
- Storage solutions (S3)
- MCP (Model Context Protocol) support
- Workflow management
- Tool registry

## Documentation

For detailed documentation, examples, and API reference, visit our [documentation site](https://github.com/neonvs/gen-ui-lib).

## Key Components

- **Chat Components**: Full-featured chat UI with message rendering, file uploads, and typing indicators
- **AI Agents**: Extensible agent system for building complex AI workflows
- **Provider System**: Pluggable AI provider architecture
- **Storage**: File and data storage abstractions
- **MCP Integration**: Model Context Protocol for enhanced AI capabilities

## Requirements

- React 18+
- Node.js 16+
- TypeScript 4.5+ (recommended)

## License

MIT

## Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our [GitHub repository](https://github.com/neonvs/gen-ui-lib).

## Author

Built by [Vishu Saxena](https://github.com/neonvs) - Data Scientist & AI Engineer

---

*Building enterprise-ready AI interfaces with React and TypeScript.*
npm package: @personnel84/excalidraw
Description: Excalidraw as a React component
Latest version: 1.18.0

# Excalidraw

**Excalidraw** is exported as a component to directly embed in your projects.

## Installation

You can use `npm`

```bash
npm install react react-dom @excalidraw/excalidraw
```

or via `yarn`

```bash
yarn add react react-dom @excalidraw/excalidraw
```

After installation you will see a folder `excalidraw-assets` and `excalidraw-assets-dev` in `dist` directory which contains the assets needed for this app in prod and dev mode respectively.

Move the folder `excalidraw-assets` and `excalidraw-assets-dev` to the path where your assets are served.

By default it will try to load the files from [`https://unpkg.com/@excalidraw/excalidraw/dist/`](https://unpkg.com/@excalidraw/excalidraw/dist)

If you want to load assets from a different path you can set a variable `window.EXCALIDRAW_ASSET_PATH` depending on environment (for example if you have different URL's for dev and prod) to the url from where you want to load the assets.

#### Note

**If you don't want to wait for the next stable release and try out the unreleased changes you can use `@excalidraw/excalidraw@next`.**

## Dimensions of Excalidraw

Excalidraw takes _100%_ of `width` and `height` of the containing block so make sure the container in which you render Excalidraw has non zero dimensions.

### Demo

[Try here](https://codesandbox.io/s/excalidraw-ehlz3).

## Integration

Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration)

## API

Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api)

## Contributing

Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/contributing)
npm package: @personnummer/generate
Description: Generate Swedish Personal Identity Numbers
Author: Personnummer and Contributors
Latest version: 1.0.3

# generate [![Build Status](https://img.shields.io/github/actions/workflow/status/personnummer/js/nodejs.yml?branch=master)](https://github.com/personnummer/js-generate/actions) [![NPM Downloads](https://img.shields.io/npm/dm/@personnummer/generate.svg)](https://www.npmjs.com/package/@personnummer/generate)

Generate Swedish Personal Identity Numbers.

## Installation

```
npm install @personnummer/generate
```

## Usage

```js
import generate from '@personnummer/generate';

const today = new Date();

// generate with date object
let pin = generate(today);

// generate with random date between now and the previous hundred years and the next hundred years
pin = generate();

// generate with specific gender
pin = generate({ gender: 'male' }); // or 'female'

// generate with date object and with specific gender
pin = generate(today, { gender: 'male' }); // or 'female'
```

## Options

```js
{
  gender: '',    // '' (random), 'male' or 'female',
  format: 'long' // 'long' or 'short'
}
```

This package follows the output format [specification](https://github.com/personnummer/meta#short-format).

## License

MIT
npm package: @perspect3vism/rollup-plugin-dna
Description: Rollup-plugin to load Holochain DNA files as modules returning a string with base64 encoded binary data.
Author: Nicolas Luck
Latest version: 0.0.2

# rollup-plugin-dna
Rollup-plugin to load Holochain DNA files as modules returning a string with base64 encoded binary data.

## Usage
```javascript
import dna from './hc-dna/languages.dna'

export const DNA = Buffer.from(dna, 'base64')
export const DNA_NICK = "languages"
```

## Installation
```
npm i @perspect3vism/rollup-plugin-dna -D
```

## Config
In your `rollup.config.js`:

```javascript
import dna from '@perspect3vism/rollup-plugin-dna`

export default {
    ...
    plugins: [
        dna()
    ]
}
```