open-index/open-npm huggingface dataset:
npm package: @novasamatech/host-papp-ui
Description: Polkadot app UI Flow
Latest version: 0.5.0-18
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @novasamatech/host-papp-ui

## Overview

## Installation

```shell
npm install @novasamatech/host-papp-ui --save -E
```
npm package: @novasamatech/host-worker-sandbox
Description: QuickJS-based sandbox for running product worker code with Triangle Host API.
Latest version: 0.7.0-0

# @novasamatech/host-worker-sandbox

QuickJS-based sandbox for running product "worker" code in an isolated VM, wired to Triangle Host API via a byte-oriented `Provider`.

## Usage

`createSandbox()` returns a `Sandbox` with `container` (a [`Container`](https://github.com/paritytech/triangle-js-sdks/tree/main/packages/host-container) from `@novasamatech/host-container`) and `provider`. Register `handle*` callbacks on `sandbox.container` so worker code that talks to the Host API receives real responses.

```ts
import { createSandbox } from '@novasamatech/host-worker-sandbox';

const hostStorage = new Map<string, Uint8Array>();

const sandbox = await createSandbox('worker.example-product.dot');

// Container bindings: implement the host side of the Host API (storage, features, chain, …).
const unbindStorageRead = sandbox.container.handleLocalStorageRead((key, { ok }) =>
  ok(hostStorage.get(key) ?? new Uint8Array()),
);
const unbindFeatureSupported = sandbox.container.handleFeatureSupported((_params, { ok }) => ok(false));

const workerSource = `
  // Worker module: __HOST_API_PORT__, TextEncoder, etc. are available in the VM.
`;

await sandbox.run(workerSource);

// Later on...

unbindStorageRead();
unbindFeatureSupported();
sandbox.dispose();
```
npm package: @novasamatech/spektr-sdk
Description: Spektr SDK: integrate and run your dapp inside Polkadot dapp browsers.
Latest version: 0.3.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @novasamatech/spektr-sdk

Easy way to embed Spektr functionality into your dapp.

## Overview

Spektr SDK provides a set of tools to integrate your application with Spektr dapp browser.
Core features:
- Generic account provider similar to [polkadot-js extension](https://polkadot.js.org/extension/).
- Redirect [PAPI](https://papi.how/) requests to host application
- Receive additional information from host application - supported chains, theme, etc.

## Installation

```shell
npm install @novasamatech/spektr-sdk --save -E
```

## Usage

### Injecting account provider into `injectedWeb3` interface

Spektr SDK can provide account information and signers with same interface as any other polkadot compatible wallet.

```ts
import { injectSpektrExtension, SpektrExtensionName } from '@novasamatech/spektr-sdk';
import { connectInjectedExtension, type InjectedPolkadotAccount } from '@polkadot-api/pjs-signer';

async function getSpektrExtension() {
  const ready = await injectSpektrExtension();

  if (ready) {
    return connectInjectedExtension(SpektrExtensionName)
  }

  return null;
}

async function getAccounts(): Promise<InjectedPolkadotAccount[]> {
  const extension = await getSpektrExtension();

  if (extension) {
    return extension.getAccounts()
  }

  // fallback to other providers
  return [];
}
```

### Redirecting PAPI requests to host application

You can wrap your PAPI provider with spektr provider to support redirecting requests to host application.

```diff
import { createClient, type PolkadotClient } from 'polkadot-api';
import { getWsProvider } from 'polkadot-api/ws-provider';
import { createSpektrPapiProvider, WellKnownChain } from '@novasamatech/spektr-sdk';

function createPapiClient(): PolkadotClient {
  const polkadotEndpoint = 'wss://...';

-  const provider = getWsProvider(polkadotEndpoint);
+  const provider = createSpektrPapiProvider({
+    chainId: WellKnownChain.polkadotRelay,
+    fallback: getWsProvider(polkadotEndpoint),
+  });

  return createClient(provider);
}
```

### Subscribing metadata and statuses

```ts
import { spektrMetaProvider } from '@novasamatech/spektr-sdk';

const unsubscribe = spektrMetaProvider.subscribeConnectionStatus((status) => {
  console.log('connection status changed', status);
});
```
npm package: @novasamatech/spektr-sdk-shared
Description: ```shell npm install @novasamatech/spektr-sdk-shared --save -E ```
Latest version: 0.3.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @novasamatech/spektr-sdk-shared

## Installation

```shell
npm install @novasamatech/spektr-sdk-shared --save -E
```
npm package: @novasamatech/spektr-sdk-transport
Description: ```shell npm install @novasamatech/spektr-sdk-transport --save -E ```
Latest version: 0.3.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @novasamatech/spektr-sdk-transport

## Installation

```shell
npm install @novasamatech/spektr-sdk-transport --save -E
```
npm package: @novasamatech/spektr-ui
Description: Spektr UI Component Library
Latest version: 0.1.32

# Spektr UI

A modern, accessible React component library built with Tailwind CSS v4. Spektr UI provides a comprehensive set of components with built-in theming support, TypeScript types, and full accessibility features.

## Installation

```bash
npm install @novasamatech/spektr-ui
```

> **Note:** Spektr UI requires `react`, `react-dom`, and `react-compiler-runtime` as peer dependencies. These are auto-installed by npm 7+.

## Quick Start

### 1. Import Styles

Import the CSS file in your application entry point:

```tsx
import '@novasamatech/spektr-ui/styles.css';
```

### 2. Wrap Your App with ThemeProvider

```tsx
import { ThemeProvider, defaultTheme } from '@novasamatech/spektr-ui';

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      {/* Your app */}
    </ThemeProvider>
  );
}
```

### 3. Use Components

```tsx
import { Button, Card } from '@novasamatech/spektr-ui';

function MyComponent() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Hello Spektr UI</Card.Title>
      </Card.Header>
      <Card.Content>
        <Button>Click me</Button>
      </Card.Content>
    </Card>
  );
}
```

## Using Tailwind Preset

If you want to use Spektr UI's design tokens in your own Tailwind classes, use the preset:

```ts
// tailwind.config.ts
import type { Config } from 'tailwindcss';
import spektrPreset from '@novasamatech/spektr-ui/tailwind.preset';

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  presets: [spektrPreset],
} satisfies Config;
```

Then import styles in your CSS:

```css
@import "tailwindcss";
@config "./tailwind.config.ts";
```

And in your entry point:

```tsx
import '@novasamatech/spektr-ui/styles.css'; // Theme CSS variables
import './index.css'; // Your Tailwind build
```

Now you can use Spektr UI tokens in your own classes:

```tsx
<div className="bg-primary text-primary-foreground">
  Uses spektr-ui colors
</div>
```

## Theming

Spektr UI provides built-in themes:

```tsx
import { ThemeProvider, defaultTheme, amberTheme, techTheme } from '@novasamatech/spektr-ui';

// Default theme
<ThemeProvider theme={defaultTheme}>

// Amber accent theme
<ThemeProvider theme={amberTheme}>

// Dark tech theme
<ThemeProvider theme={techTheme}>
```

### Theme Hook

Use the `useTheme` hook to access and control theme state:

```tsx
import { useTheme } from '@novasamatech/spektr-ui';

function ThemeControls() {
  const { mode, setMode, theme, setTheme } = useTheme();

  return (
    <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
      Toggle Mode
    </button>
  );
}
```

## Storybook

View all components and their variations in Storybook:

```bash
npm run storybook
```

Visit `http://localhost:6006` to explore the component library.

## Development

```bash
# Install dependencies
npm install

# Run development build
npm run dev

# Build for production
npm run build

# Run Storybook
npm run storybook
```

## License

Apache-2.0

## Repository

[https://github.com/novasamatech/spektr-ui](https://github.com/novasamatech/spektr-ui)
npm package: @novasamatech/tr-ui
Description: trUI Component Library
Latest version: 0.2.3

# trUI

A modern, accessible React component library built with Tailwind CSS v4. trUI provides a comprehensive set of components with built-in theming support, TypeScript types, and full accessibility features.

## Installation

```bash
npm install @novasamatech/tr-ui
```

> **Note:** trUI requires `react`, `react-dom`, and `react-compiler-runtime` as peer dependencies. These are auto-installed by npm 7+.

## Quick Start

### 1. Import Styles

Import the CSS file in your application entry point:

```tsx
import '@novasamatech/tr-ui/styles.css';
```

### 2. Wrap Your App with ThemeProvider

```tsx
import { ThemeProvider, defaultTheme } from '@novasamatech/tr-ui';

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      {/* Your app */}
    </ThemeProvider>
  );
}
```

### 3. Use Components

```tsx
import { Button, Card } from '@novasamatech/tr-ui';

function MyComponent() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Hello trUI</Card.Title>
      </Card.Header>
      <Card.Content>
        <Button>Click me</Button>
      </Card.Content>
    </Card>
  );
}
```

## Using Tailwind Preset

If you want to use trUI design tokens in your own Tailwind classes, use the preset:

```ts
// tailwind.config.ts
import type { Config } from 'tailwindcss';
import spektrPreset from '@novasamatech/tr-ui/tailwind.preset';

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  presets: [spektrPreset],
} satisfies Config;
```

Then import styles in your CSS:

```css
@import '@novasamatech/tr-ui/styles.css';
@import 'tailwindcss';

@config '../tailwind.config.ts';
```

And in your entry point:

```tsx
import '@novasamatech/tr-ui/styles.css'; // Theme CSS variables
import './index.css'; // Your Tailwind build
```

Now you can use trUI tokens in your own classes:

```tsx
<div className="bg-primary text-primary-foreground">
  Uses trUI colors
</div>
```

## Theming

trUI provides built-in themes:

```tsx
import { ThemeProvider, defaultTheme, amberTheme, techTheme } from '@novasamatech/tr-ui';

// Default theme
<ThemeProvider theme={defaultTheme}>

// Amber accent theme
<ThemeProvider theme={amberTheme}>

// Dark tech theme
<ThemeProvider theme={techTheme}>
```

### Theme Hook

Use the `useTheme` hook to access and control theme state:

```tsx
import { useTheme } from '@novasamatech/tr-ui';

function ThemeControls() {
  const { mode, setMode, theme, setTheme } = useTheme();

  return (
    <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
      Toggle Mode
    </button>
  );
}
```

## Storybook

View all components and their variations in Storybook: **[paritytech.github.io/trUI](https://paritytech.github.io/trUI/)**.

```bash
npm run storybook
```

Visit `http://localhost:6006` to explore the component library.

## Development

```bash
# Install dependencies
npm install

# Run development build
npm run dev

# Build for production
npm run build

# Run Storybook
npm run storybook
```

## License

Apache-2.0

## Repository

[https://github.com/paritytech/trUI](https://github.com/paritytech/trUI)