open-index/open-npm huggingface dataset:
npm package: @object-studio/react-native-web
Description: This is the development monorepo for "React Native for Web" and related projects.
Author: Nicolas Gallagher
Latest version: 0.1.0

# Development monorepo

This is the development monorepo for "React Native for Web" and related projects.

## Structure

* `.github`
  * Contains workflows used by GitHub Actions.
  * Contains issue templates.
* `configs`
  * Contains configration files used by the monorepo tooling (compiling, linting, testing, etc.)
* `packages`
  * [react-native-web](https://github.com/necolas/react-native-web/blob/master/packages/react-native-web)
  * Contains the individual packages managed in the monorepo.
* `scripts`
  * Contains Node.js scripts for miscellaneous tasks.

## Tasks

* `build`
  * Use `npm run build` to run the build script in every package.
  * Use `npm run build -w <package-name>` to run the build script for a specific package.
* `dev`
  * Use `npm run dev` to run the dev script in every package.
  * Use `npm run dev -w <package-name>` to run the dev script for a specific package.
* `test`
  * Use `npm run test` to run tests for every package.

More details can be found in the contributing guide below.

## Contributing

Development happens in the open on GitHub and we are grateful for contributions including bugfixes, improvements, and ideas.

### Code of conduct

This project expects all participants to adhere to Meta's OSS [Code of Conduct][code-of-conduct]. Please read the full text so that you can understand what actions will and will not be tolerated.

### Contributing guide

Read the [contributing guide][contributing-url] to learn about the development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native for Web.

### Good first issues

To help you get you familiar with the contribution process, there is a list of [good first issues][good-first-issue-url] that contain bugs which have a relatively limited scope. This is a great place to get started.

[contributing-url]: https://github.com/necolas/react-native-web/blob/master/.github/CONTRIBUTING.md
[good-first-issue-url]: https://github.com/necolas/react-native-web/labels/good%20first%20issue
[code-of-conduct]: https://opensource.fb.com/code-of-conduct/
npm package: @object-ui/collaboration
Description: Real-time collaboration for Object UI with presence tracking, live cursors, conflict resolution, and comment threads.
Latest version: 3.1.5

# @object-ui/collaboration

Real-time collaboration for Object UI — live cursors, presence tracking, comment threads, and conflict resolution.

## Features

- 🖱️ **Live Cursors** - Display remote user cursors in real time with `LiveCursors`
- 👥 **Presence Avatars** - Show active users with `PresenceAvatars`
- 💬 **Comment Threads** - Threaded comments with @mentions via `CommentThread`
- 🔄 **Realtime Subscriptions** - WebSocket data subscriptions with `useRealtimeSubscription`
- 👁️ **Presence Tracking** - Track who's viewing or editing with `usePresence`
- ⚔️ **Conflict Resolution** - Version history and merge conflicts with `useConflictResolution`
- 🎯 **Type-Safe** - Full TypeScript support with exported types

## Installation

```bash
npm install @object-ui/collaboration
```

**Peer Dependencies:**
- `react` ^18.0.0 || ^19.0.0
- `react-dom` ^18.0.0 || ^19.0.0

## Quick Start

```tsx
import {
  usePresence,
  useRealtimeSubscription,
  LiveCursors,
  PresenceAvatars,
  CommentThread,
} from '@object-ui/collaboration';

function CollaborativeEditor() {
  const { users, updatePresence } = usePresence({
    channel: 'document-123',
  });

  const { data, connectionState } = useRealtimeSubscription({
    channel: 'document-123',
    event: 'update',
  });

  return (
    <div>
      <PresenceAvatars users={users} />
      <LiveCursors users={users} />
      <Editor data={data} onCursorMove={(pos) => updatePresence({ cursor: pos })} />
      <CommentThread threadId="thread-1" />
    </div>
  );
}
```

## API

### useRealtimeSubscription

Hook for WebSocket data subscriptions:

```tsx
const { data, connectionState, error } = useRealtimeSubscription({
  channel: 'orders',
  event: 'update',
});
```

### usePresence

Hook for tracking user presence:

```tsx
const { users, updatePresence } = usePresence({
  channel: 'document-123',
  user: { id: 'user-1', name: 'Alice' },
});
```

### useConflictResolution

Hook for version history and conflict management:

```tsx
const { versions, conflicts, resolve } = useConflictResolution({
  resourceId: 'doc-123',
});
```

### LiveCursors

Displays remote user cursors on the page:

```tsx
<LiveCursors users={presenceUsers} />
```

### PresenceAvatars

Shows avatar badges for active users:

```tsx
<PresenceAvatars users={presenceUsers} maxVisible={5} />
```

### CommentThread

Threaded comment component with @mentions:

```tsx
<CommentThread
  threadId="thread-1"
  comments={comments}
  onSubmit={(comment) => saveComment(comment)}
/>
```

## License

MIT
npm package: @object-ui/core
Description: Core logic, types, and validation for Object UI. Zero React dependencies.
Latest version: 3.1.5

# @object-ui/core

Core logic, types, and validation for Object UI. Zero React dependencies.

## Features

- 🎯 **Type Definitions** - Complete TypeScript schemas for all components
- 🔍 **Component Registry** - Framework-agnostic component registration system
- 📊 **Data Scope** - Data scope management and expression evaluation
- ✅ **Validation** - Zod-based schema validation
- 🚀 **Zero React** - Can run in Node.js or any JavaScript environment

## Installation

```bash
npm install @object-ui/core
```

## Usage

### Type Definitions

```typescript
import type { 
  PageSchema, 
  FormSchema, 
  InputSchema,
  BaseSchema 
} from '@object-ui/core'

const mySchema: PageSchema = {
  type: 'page',
  title: 'My Page',
  body: []
}
```

### Component Registry

```typescript
import { ComponentRegistry } from '@object-ui/core'

const registry = new ComponentRegistry()
registry.register('button', buttonMetadata)
const metadata = registry.get('button')
```

### Data Scope

```typescript
import { DataScope } from '@object-ui/core'

const scope = new DataScope({ 
  user: { name: 'John', role: 'admin' } 
})

const userName = scope.get('user.name') // 'John'
const isAdmin = scope.evaluate('${user.role === "admin"}') // true
```

## Philosophy

This package is designed to be **framework-agnostic**. It contains:

- ✅ Pure TypeScript types and interfaces
- ✅ Core logic and utilities
- ✅ Validation schemas
- ❌ NO React components
- ❌ NO UI rendering logic
- ❌ NO framework dependencies

This allows the core types and logic to be used in:
- Build tools and CLI utilities
- Backend validation
- Code generators
- Alternative framework adapters (Vue, Svelte, etc.)

## API Reference

See [full documentation](https://objectui.org/api/core) for detailed API reference.

## License

MIT
npm package: @object-ui/create-plugin
Description: CLI tool to scaffold ObjectUI plugins
Latest version: 3.1.5

# @object-ui/create-plugin

CLI tool to quickly scaffold new ObjectUI plugins with best practices.

## Usage

```bash
# Using pnpm
pnpm create @object-ui/plugin my-plugin

# Using npm
npm create @object-ui/plugin my-plugin

# Using npx
npx @object-ui/create-plugin my-plugin
```

## What Gets Generated

The tool creates a complete plugin package structure:

```
packages/plugin-my-plugin/
├── src/
│   ├── index.tsx           # Plugin export & registration
│   ├── MyPluginImpl.tsx    # Component implementation
│   ├── MyPluginImpl.test.tsx # Tests
│   └── types.ts            # Schema definitions
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md
```

## Features

- ✅ TypeScript support out of the box
- ✅ Vite build configuration
- ✅ Component registration with ComponentRegistry
- ✅ Test setup with Vitest
- ✅ Proper package.json with workspace dependencies
- ✅ README template
- ✅ Type definitions

## Interactive Mode

Run without arguments for interactive prompts:

```bash
pnpm create @object-ui/plugin
```

You'll be prompted for:
- Plugin name
- Description
- Author name

## Options

```bash
pnpm create @object-ui/plugin my-plugin --description "My awesome plugin" --author "Your Name"
```

## After Creation

1. Navigate to the plugin directory:
   ```bash
   cd packages/plugin-my-plugin
   ```

2. Install dependencies:
   ```bash
   pnpm install
   ```

3. Build the plugin:
   ```bash
   pnpm build
   ```

4. Run tests:
   ```bash
   pnpm test
   ```

## License

MIT
npm package: @object-ui/fields
Description: Field renderers and registry for Object UI
Latest version: 3.1.5

# @object-ui/fields

The standard field library and registry for Object UI.

## Features

- 📚 **Standard Fields** - Implementation of all ObjectStack protocol fields (Text, Number, Date, Lookup, etc.)
- 🔌 **Plugin System** - `FieldRegistry` allows registering custom renderers or overriding standard ones.
- 🛠 **Helpers** - Utilities for schema mapping, validation, and expression evaluation.

## Installation

```bash
npm install @object-ui/fields
```

## Field Registry

The Field Registry is the core mechanism that allows decoupling view components from specific field implementations.

### Registering a Custom Field

You can override standard fields or add new ones:

```tsx
import { registerFieldRenderer } from '@object-ui/fields';
import { MyCustomColorPicker } from './MyCustomColorPicker';

// Register a new 'color' field type
registerFieldRenderer('color', MyCustomColorPicker);
```

### Using Standard Fields

View components use `getCellRenderer` to resolve the correct component for a field type.

```tsx
import { getCellRenderer } from '@object-ui/fields';

const MyGridCell = ({ field, value }) => {
  const Renderer = getCellRenderer(field.type);
  return <Renderer field={field} value={value} />;
};
```

## Standard Field Types

Supported types out of the box:

- **Basic**: `text`, `textarea`, `number`, `boolean`
- **Format**: `currency`, `percent`
- **Date**: `date`, `datetime`, `time`
- **Selection**: `select`, `lookup`, `master_detail`
- **Contact**: `email`, `phone`, `url`
- **Media**: `file`, `image`
- **System**: `formula`, `summary`, `auto_number`
npm package: @object-ui/i18n
Description: Internationalization (i18n) support for Object UI with 10+ language packs, RTL layout, and date/currency formatting.
Latest version: 3.1.5

# @object-ui/i18n

Internationalization for Object UI — 11 built-in locales, RTL support, and date/currency formatting.

## Features

- 🌍 **11 Built-in Locales** - English, Chinese, Japanese, Korean, German, French, Spanish, Portuguese, Russian, Arabic, and more
- 🔄 **RTL Support** - Automatic right-to-left layout for Arabic and other RTL languages
- 📅 **Date Formatting** - Locale-aware date, datetime, and relative time formatting
- 💰 **Currency & Number Formatting** - Locale-aware currency and number formatting
- 🎣 **React Hooks** - `useObjectTranslation` for translations, language switching, and direction
- 🏗️ **I18nProvider** - Context provider for internationalized applications
- 🔌 **Extensible** - Add custom locales and translation keys
- 🎯 **Type-Safe** - Full TypeScript support with exported types

## Installation

```bash
npm install @object-ui/i18n
```

**Peer Dependencies:**
- `react` ^18.0.0 || ^19.0.0
- `react-dom` ^18.0.0 || ^19.0.0

## Quick Start

```tsx
import { I18nProvider, useObjectTranslation } from '@object-ui/i18n';

function App() {
  return (
    <I18nProvider config={{ defaultLanguage: 'en' }}>
      <MyComponent />
    </I18nProvider>
  );
}

function MyComponent() {
  const { t, language, changeLanguage, direction } = useObjectTranslation();

  return (
    <div dir={direction}>
      <h1>{t('common.save')}</h1>
      <button onClick={() => changeLanguage('zh')}>中文</button>
      <button onClick={() => changeLanguage('ar')}>العربية</button>
    </div>
  );
}
```

## API

### I18nProvider

Wraps your application with i18n context:

```tsx
<I18nProvider config={{ defaultLanguage: 'en', fallbackLanguage: 'en' }}>
  <App />
</I18nProvider>
```

### useObjectTranslation

Hook for translations and language management:

```tsx
const { t, language, changeLanguage, direction } = useObjectTranslation();
```

### createI18n

Factory for creating an i18n instance outside React:

```tsx
import { createI18n } from '@object-ui/i18n';

const i18n = createI18n({ defaultLanguage: 'de' });
i18n.t('common.cancel'); // "Abbrechen"
```

### Formatting Utilities

Locale-aware formatting functions:

```tsx
import { formatDate, formatCurrency, formatNumber, formatRelativeTime } from '@object-ui/i18n';

formatDate(new Date(), 'en');            // "Jan 1, 2025"
formatCurrency(99.99, 'USD', 'en');      // "$99.99"
formatNumber(1234567, 'de');             // "1.234.567"
formatRelativeTime(-3, 'days', 'en');    // "3 days ago"
```

### Built-in Locales

Import individual locale packs:

```tsx
import { en, zh, ja, ko, de, fr, es, pt, ru, ar } from '@object-ui/i18n';
```

### RTL Helpers

```tsx
import { isRTL, RTL_LANGUAGES } from '@object-ui/i18n';

isRTL('ar'); // true
isRTL('en'); // false
```

## License

MIT