open-index/open-npm huggingface dataset:
npm package: @rubriclab/events
Description: This Events package gives you a type-safe, Redis-backed pub/sub layer that streams events from your server to the browser over Server-Sent Events (SSE).
Latest version: 0.0.41

# @rubriclab/events

This Events package gives you a type-safe, Redis-backed pub/sub layer that streams events from your server to the browser over Server-Sent Events (SSE).

It is part of Rubric's architecture for Generative UI when used with:
- [@rubriclab/actions](https://github.com/rubriclab/actions)
- [@rubriclab/blocks](https://github.com/rubriclab/blocks)
- [@rubriclab/chains](https://github.com/rubriclab/chains)
- [@rubriclab/agents](https://github.com/rubriclab/agents)

[Demo](https://chat.rubric.sh)

## Get Started
### Installation
`bun add @rubriclab/events`

> @rubriclab scope packages are not built, they are all raw Typescript. If using in a Next.js app, make sure to transpile:

```ts
// next.config.ts
import type { NextConfig } from  'next' 
export default {
	transpilePackages: ['@rubriclab/events'],
	reactStrictMode: true
} satisfies  NextConfig
```

> If using inside the monorepo (@rubric), simply add `{"@rubriclab/events": "*"}` to dependencies and then run `bun i`


### Define Event types

```ts
export const eventTypes = createEventTypes({
  ping: z.literal('ping'),
})
```

### Create the events server and a route
```ts
import { createEventsServer } from '@rubriclab/events/server'
import env from '~/env'
import { eventTypes } from './types'

export const { publish, GET, maxDuration } = createEventsServer({
	eventTypes,
	redisURL: env.UPSTASH_REDIS_URL
})
```

```ts
// app/api/events/route.ts
export { GET, maxDuration } from './server'
```

### Create the events client

```ts
import { createEventsClient } from '@rubriclab/events/client'
import { eventTypes } from './types'

export const { useEvents } = createEventsClient({
	url: '/api/events', // The url of the server
	eventTypes
})
```

### Publish an event from the server
```ts
await publish({
  channel: '123',
  eventType: 'ping',
  payload: 'ping'
})
```


### Consume it on the client!
```ts
useEvents({
		id: '123',
		on: {
			ping: (payload) => {
				console.log('ping', payload)
			}
		}
	})
```

Commits to main will automatically publish a new version to npm.
npm package: @rubriclab/package
Description: A tool for scaffolding and publishing NPM packages quickly.
Latest version: 0.0.124

# Package

A tool for scaffolding and publishing NPM packages quickly.

## Getting Started

### Global Installation

Run `bun add -g @rubriclab/package`.

### Per-project Installation

Run `bun add -d @rubriclab/package`.

### Init a package

Ensure you have a `package.json`. If not, run `bun init`.

Run `bunx rubriclab-package setup-package`. This will add a few resources to your package:

- a publish workflow
  - on push to main, the NPM package will be bumped and auto-published
- scripts
  - `lint`: checks for code issues
  - `format`: tries to fix code issues
  - `bleed`: updates all dependencies to `latest`
  - `clean`: clears node modules and cache

## CLI

Run `bunx rubriclab-package` to see the available commands.
npm package: @rubtsov/ui-components-react
Description: A collection of customizable and reusable UI components built with React, designed to accelerate your development process.
Latest version: 0.0.35

# UI Components React KIT

A collection of customizable and reusable UI components built with React, designed to accelerate your development process.

## Features

- **Reusable components**: Use a wide variety of pre-built UI components that can be easily customized to suit your project's needs.
- **TypeScript support**: Developed with TypeScript, ensuring type safety and a better developer experience.
- **Styled with SCSS**: Components are styled using SCSS, making it easy to override styles or create custom themes.
- **Storybook integration**: Preview all components with live documentation using Storybook. <a href="https://artemrubtsov.github.io/ui-components-react/?path=/docs/components-avatar--docs" target="_blank" rel="noopener noreferrer">View Storybook</a>.
- **Fast setup**: Easily install the package via npm and start building.

## Installation

You can install the library through npm:

```bash
npm install @rubtsov/ui-components-react
```

## Usage

Import and use the components in your React application:

```tsx
import { Avatar } from '@rubtsov/ui-components-react';
import '@rubtsov/ui-components-react/dist/style.css'

const App = () => (
  <div>
    <Avatar src="https://example.com/image.jpg" alt="User Avatar" />
  </div>
);

export default App;
```
npm package: @rubtsov/ui-kit-demo
Description: - Clone template: (replace `my-lib` with your project name)   ```bash   npx degit https://github.com/ershisan99/lib-with-storybook-starter my-lib   ```
Latest version: 0.0.10
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Usage:

- Clone template: (replace `my-lib` with your project name)
  ```bash
  npx degit https://github.com/ershisan99/lib-with-storybook-starter my-lib
  ```

- Change directory: (replace `my-lib` with your project name)
  ```bash
  cd my-lib
  ```

- Install dependencies:
  ```bash
  pnpm i
  ```

- Run storybook:
  ```bash
  pnpm dev
  ```