open-index/open-npm huggingface dataset:
npm package: @seval-ui/react
Description: React integration for S-expression based UI runtime
Author: cpunion
Latest version: 0.1.0

# @seval-ui/react

> React components for S-expression based UI runtime

[![CI](https://github.com/cpunion/seval-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/cpunion/seval-ui/actions/workflows/ci.yml)
[![npm version](https://img.shields.io/npm/v/@seval-ui/react.svg)](https://www.npmjs.com/package/@seval-ui/react)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

`@seval-ui/react` provides React components and hooks for rendering UIs driven by A2UI protocol messages.

## Installation

```bash
npm install @seval-ui/react
# or
pnpm add @seval-ui/react
```

For S-expression runtime support, also install:
```bash
pnpm add @seval-ui/react-code
```

## Quick Start

```tsx
import {
  A2UIProvider,
  SurfaceView,
  createA2UIContextStore
} from '@seval-ui/react'

const store = createA2UIContextStore()

function App() {
  return (
    <A2UIProvider store={store}>
      <SurfaceView surfaceId="main" />
    </A2UIProvider>
  )
}
```

## Features

- **A2UI Protocol Support** - Render UIs from A2UI messages
- **Component Registry** - Extensible component catalog
- **React Hooks** - `useA2UIContextStore`, `useA2UISurface`, etc.
- **Zero seval dependency** - Pure UI library (use @seval-ui/react-code for runtime)

## Exports

### Components
- `A2UIProvider` - Context provider
- `SurfaceView` - Render a surface

### Hooks
- `createA2UIContextStore()` - Create a store
- `useA2UIContextStore()` - Access the store
- `useA2UISurface(surfaceId)` - Get surface data
- `useRendererContext()` - Component renderer context

### Types
- `A2UIMessage`, `SurfaceUpdateMessage`, `DataModelUpdateMessage`
- `ComponentRegistry`, `RendererContext`

## License

MIT
npm package: @sevasok/docusaurus-plugin-moonwave
Description: Display your API docs generated from Moonwave in Docusaurus
Author: eryn L. K.
Latest version: 1.3.19

<div align="center">
    <img src="https://i.eryn.io/2139/moonwave.svg" alt="Moonwave" height="139" />
</div>

# Moonwave for Docusaurus

This is the [Docusaurus](https://docusaurus.io/) plugin for using [Moonwave](https://github.com/evaera/moonwave). While you can use this package directly, it's recommended to use the Moonwave CLI, which can be found at the above link.

## Attribution for Icons

- ["Computer" by Anesckha](https://thenounproject.com/term/computer/2254017/)
- ["Server" by Yazmin Alanis](https://thenounproject.com/term/server/65146/)
- ["yield" by Justin Blake](https://thenounproject.com/search/?q=yield&i=126098)
- ["Invisible" by Marcel Boer](https://thenounproject.com/search/?q=invisible&i=3574587)
- ["Plug" by David Khai](https://thenounproject.com/term/plug/479902/)
- ["Book" by fahmionline](https://thenounproject.com/search/?q=book&i=1299362)
npm package: @sevasok/moonwave
Description: moonwave cli
Author: eryn L. K.
Latest version: 1.3.19

<div align="center">
    <img src="https://i.eryn.io/2139/moonwave.svg" alt="Moonwave" height="139" />
</div>

# Moonwave CLI

A tool that makes it easy to get started using [Moonwave](https://github.com/evaera/moonwave) by generating a Docusaurus project and extracting doc comments without the user needing any prior knowledge about the specific technologies used.
npm package: @sevastian-bahynskyi/dynamic-layouts
Description: Dynamic Layouts is a collection of visually appealing and customizable layouts built with React and TypeScript. These layouts are designed to be responsive, easy to integrate, and performance-optimized.
Author: Sevastian Bahynskyi
Latest version: 1.15.0

# Dynamic Layouts

Dynamic Layouts is a collection of visually appealing and customizable layouts built with React and TypeScript. These layouts are designed to be responsive, easy to integrate, and performance-optimized.

## Technical Details

- **Framework**: React with TypeScript
- **Build Tool**: Vite
- **Release Management**: Semantic Release

## Getting Started

To get started with Dynamic Layouts, you can install it via [NPM](https://www.npmjs.com/package/@sevastian-bahynskyi/dynamic-layouts)

```sh
npm i @sevastian-bahynskyi/dynamic-layouts
```

## Layouts

### Squared Layout

The Squared Layout is a grid-based layout where each square can be individually customized. It adapts seamlessly to different screen sizes and is highly flexible for various use cases.

- **Grid-Based**: Each square in the grid can be individually customized.
- **Responsive**: Adapts seamlessly to different screen sizes.
- **Flexible**: Can be used as a background or a standalone component.
- **Performance Optimized**: Efficient and fast loading times.

#### Result

![Squared layout gif](public/squared-layout.gif)

### Blobs Layout

The Blobs Layout features animated, morphing blobs that move organically within a container. This layout is perfect for creating dynamic and engaging backgrounds.

- **Animated Blobs**: Features morphing blobs that move organically.
- **Dynamic Backgrounds**: Ideal for creating engaging and dynamic backgrounds.
- **Customizable**: Highly flexible and configurable to meet various needs.
- **SVG Based**: Utilizes SVG for smooth animations and scalability without loss of quality.

#### Result

![Blobs layout gif](public/blob-layout.gif)
npm package: @seveelly/baseui
Description: A React Component library implementing the Base design language (custom fork)
Latest version: 16.1.3

<h1>Base Web React Components</h1>

- [Documentation](https://baseweb.design)
- [Component catalog](https://baseweb.design/ladle)
- [Stackblitz playground](https://baseweb.design/new)

⚠️ **Maintenance status**. We are limiting our engagement with this repository while still mirroring our internal development. For more details, please check [Open Source Engagement and Future](https://baseweb.design/blog/open-source-engagement/). If you are an Uber developer and looking to open an issue, use this [link](https://t.uber.com/ui-platform-bug-2) or [contribute](https://p.uber.com/base-code).

**Base** is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base.

<p align="center">
  <a href="https://baseweb.design">
    <img width="500px" src="https://i.imgur.com/UaRZdTq.png">
  </a>
</p>

## Usage

On npm, you can find Base Web as `baseui`.

Add `baseui` and its peer dependencies to your project:

```bash
# using pnpm
pnpm add baseui@next styletron-react styletron-engine-monolithic

# using npm
npm install baseui@next styletron-react styletron-engine-monolithic
```

```javascript
import { Client as Styletron } from "styletron-engine-monolithic";
import { Provider as StyletronProvider } from "styletron-react";
import { LightTheme, BaseProvider, styled } from "baseui";
import { StatefulInput } from "baseui/input";

const engine = new Styletron();

const Centered = styled("div", {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  height: "100%",
});

export default function Hello() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <Centered>
          <StatefulInput />
        </Centered>
      </BaseProvider>
    </StyletronProvider>
  );
}
```

Both Base Web and Styletron come with [TypeScript](https://www.typescriptlang.org/index.html).

## Docs

To read the documentation, please visit [baseweb.design](https://baseweb.design). To preview more component examples, please visit [baseweb.design/ladle](https://baseweb.design/ladle).
npm package: @seveibar/okc-js
Description: OkCollege Javascript Utilities
Author: Severin Ibarluzea
Latest version: 0.0.5

# okc-js

Javascript utilities and bindings for [OkCollege](https://github.com/rpiml/okcollege-dev) services.

## Installation

`npm install --save @seveibar/okc-js`

or

`yarn add @seveibar/okc-js`

## Usage: Redis

### Example

```javascript

import { redis } from '@seveibar/okc-js';

// Setting keys
redis.set('model:weights', '0,1,2,...');

// Getting keys
let weights = redis.get('model:weights');

// You can also directly ask for the redis client
// *Note Don't forget to quit the client!
// This is the redis object from node_redis
let client = redis.getClient();

client.get("somekey", function (err, reply) {
    console.log(reply.toString());
});

// and when we're done...
client.quit();

```

## Usage: Postgres

### Example

```javascript

import { psql } from '@seveibar/okc-js';

async function main(){
  const db = await psql.connect();
  await db.clearSurveyDB(); // clear all surveys
  await db.insertSurvey({
    uuid: "survey_id1",
    content: { ... } // form.json filled out
  }); // insert a new survey
  await db.insertSurvey({ uuid: "survey_id2", ... });
  const surveys = await db.getSurveys(); // get all surveys from db
  console.log(surveys);
  /**
   * [{
   *  uuid: "survey_id1",
   *  content: { ... },
   *  updatedAt: Date
   * },
   * {
   *  uuid: "survey_id2",
   *  content: { ... },
   *  updatedAt: Date
   * }]
   */
}

```

## Usage: Rabbitmq

### csvpredict(surveycsv: string): Promise<string>

Calls into predictor service to get a prediction on a CSV.

```javascript

import fs from 'fs';
import { rmq } from '@seveibar/okc-js';

rmq.csvpredict(fs.readFileSync('completed_survey.csv').toString()).then(result => {
  console.log(result);
  /*
   * college_id, score
   * harvard, 0.5
   * rpi, 0.4
   */
});

```

### fullpredict(survey: Object): Promise<Object>

Calls into prediction preprocessing services to provide prediction with results
in JSON.

```javascript

import { rmq } from '@seveibar/okc-js';

rmq.fullpredict(filledUserSurvey).then(result => {
  console.log(result);
  /*
   * colleges: [
   *   { 'id' : 'harvard', 'score': 0.5 },
   *   { 'id' : 'rpi', 'score': 0.4 }
   * ]
   */
});
```

### rpc(queue:string, message:?string): Promise<string>

Remote procedure call on Rabbitmq

```javascript

import { rmq } from '@seveibar/okc-js';

const msg = JSON.stringify({a: 'message'});
rmq('some_queue', msg).then((rawRes) => {
  const res = JSON.parse(rawRes);
  // do something with response
});

```

### rpcReply(queue:string, reply: : (x: string) => Promise<string>)

Respond to remote procedure calls using rabbitmq.

```javascript

import { rmq } from '@seveibar/okc-js';

rmq.rpcReply('some_queue', async (msg) => {
  let computation = await computeMessage(msg);
  return computation;
})

```