open-index/open-npm huggingface dataset:
npm package: @lateral-ai/ui-ember
Description: A set of Ember components for seamlessly integrating Lateral content into your application.
Latest version: 0.0.1

# UI Components (Ember)

A set of Ember components for seamlessly integrating Lateral content into your application.

## Installation

```bash
ember install @lateral-ai/ui-ember
npm install @lateral-ai/telemetry
```

## Initialization

Before using the UI components, you need to initialize both the [Telemetry](https://www.npmjs.com/package/@lateral-ai/telemetry) and [UI](https://www.npmjs.com/package/@lateral-ai/ui-ember) libraries.

Create a service to set up the telemetry client and initialize the UI components:

```javascript
// app/services/lateral.js
import Service from "@ember/service";
import { initTelemetry } from "@lateral-ai/telemetry";
import { init } from "@lateral-ai/ui-ember/utils/setup";

export default class LateralService extends Service {
  @service session;

  // Initialize telemetry
  const client = initTelemetry({
    apiKey: LATERAL_API_KEY,
    userId: this.session.currentUser.id,
  });

  // Initialize UI
  init(client);
}

// src/app/routes/application.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ApplicationRoute extends Route {
  @service session;
  @service lateralTracking;

  async model() {
    await this.session.initSession();
    this.lateralTracking.initializeTracking();
  }
}
```

## Usage

Once initialized, you can use the components in your Ember application.

Use the `LateralUI::Frame` component in your templates:

```hbs
<!-- app/templates/components/your-component.hbs -->
<LateralUI::Frame @lateralLocationId="componentIdConfiguredInLateral">
  <div>
    <h1 data-lateral-field-id="idConfiguredInLateral">My content</h1>
    <p data-lateral-field-id="idConfiguredInLateral">
      Default text if backend is not reachable
    </p>
  </div>
</LateralUI::Frame>
```

The `LateralUI::Frame` component allows you to easily integrate the content you've created in Lateral into your application.

## Related

- [@lateral-ai/telemetry](https://www.npmjs.com/package/@lateral-ai/telemetry): Telemetry package for Lateral, required for UI initialization.

## Support

For any issues or questions, please [contact support](mailto:support@getlateral.ai) or [open an issue](https://github.com/lateral-ai/ui/issues) in this repository.
npm package: @lateral-ai/ui-react
Description: A set of React components for seamlessly integrating Lateral content into your application.
Latest version: 0.0.4

# UI Components (React)

A set of React components for seamlessly integrating Lateral content into your application.

### Installation

```bash
npm install @lateral-ai/ui-react @lateral-ai/telemetry
```

### Initialization

Before using the UI components, you need to initialize both the [Telemetry](https://www.npmjs.com/package/@lateral-ai/telemetry) and [UI](https://www.npmjs.com/package/@lateral-ai/ui-react) libraries:

```javascript
import { initTelemetry } from "@lateral-ai/telemetry";
import LateralUI from "@lateral-ai/ui-react";

// Initialize telemetry
const client = initTelemetry({
  apiKey: LATERAL_API_KEY,
  userId: user.id,
  mode: LATERAL_MODE,
});

// Initialize UI
LateralUI.init(client);
```

This initialization sets up the Lateral telemetry client and prepares the UI components for use.

### Usage

Once initialized, you can use the components in your React application:

```jsx
import LateralUI from "@lateral-ai/ui-react";

// ... in your component
return (
  <LateralUI.Frame lateralLocationId="componentIdConfiguredInLateral">
    <div>
      <h1 data-lateral-field-id="idConfiguredInLateral">My content</h1>
      <p data-lateral-field-id="idConfiguredInLateral">
        Default text if backend is not reachable
      </p>
    </div>
  </LateralUI.Frame>
);
```

The `LateralUI.Frame` component allows you to easily integrate the content you've created in Lateral into your application.

### Related

- [@lateral-ai/telemetry](https://www.npmjs.com/package/@lateral-ai/telemetry): Telemetry package for Lateral, required for UI initialization.

### Support

For any issues or questions, please [contact support](mailto:support@getlateral.ai) or [open an issue](https://github.com/lateral-ai/ui/issues) in this repository.
npm package: @lateralview/lv-react-components
Description: Exposes a set of visual React components
Author: Lateral View
Latest version: 1.0.3

# lv-react-components

Exposes a set of useful visual components

# Components

### CTable
Just like an ordinary table, but with responsive support.

#### Example
```html
<CTable>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td>204 North Ave. Owensboro, KY 42301</td>
    </tr>
    <tr>
      <td>Maeve Phillips</td>
      <td>maeve.phillips@example.com</td>
      <td>391 Halifax Dr. Flemington, NJ 08822</td>
    </tr>
  </tbbody>
</CTable>
```
npm package: @laterhq/vue-timer
Description: Yet another intuitive Vue Timer
Author: Adedoyin Akande
Latest version: 1.4.1

# Vue Timer

Yet another intuitive Vue Timer

## Installation

```bash
pnpm install @laterhq/vue-timer
```

## Usage

See usage [Examples](EXAMPLES.md)

## API

### `useTimer(options, callback?)`

- **options**
  - `log?: boolean`: Enables or disables logging (default: `false`).
  - `immediate?: boolean`: If `true`, the timer starts immediately upon creation (default: `false`).
  - `interval?: number`: Time interval for recurring execution (default: `1`).
  - `ttl?: number{ms,s,m,h} | Date`: Time duration or due DateTime for a one-time execution (default: `60000ms`).

- **callback**: Optional callback function to be executed when the timer ends.

### Timer Properties

- `timerId`: Timer ID based on setInterval API.
- `live`: Current system DateTime.
- `due`: DateTime instance when the timer ends.
- `status`: The current status of the timer.
- `duration`: The total ttl in milliseconds.
- `used`: The time elapsed since the timer started/resumed.
- `left`: The time remaining until the timer expires.
- `isRunning`: Indicates whether the timer is running.
- `hasExpired`: Indicates whether the timer has expired.

### Timer Methods

- `pause()`: Pauses the timer.
- `resume()`: Resumes the paused timer.
- `start()`: Starts the timer.
- `setTtl(newTtl?, newImmediate?)`: Sets the timer duration and starts if option.immediate or newImmediate is true.
- `stop()`: Stops the timer.
- `restart()`: Restarts the timer.

NB: You can always clear or stop  the timer using `clearInterval(timer.timerId)` when needed
npm package: @laterinc/query-kit-auth
Description: JWT auth adapter for @laterinc/query-kit
Latest version: 0.2.0

# @laterinc/query-kit-auth

JWT 认证适配器，配合 @laterinc/query-kit 使用，支持 Token 刷新、加密存储、会话超时。

## 安装

```bash
pnpm add @laterinc/query-kit-auth @laterinc/query-kit @tanstack/react-query react
```

## 快速开始

```tsx
import { QueryKitProvider } from '@laterinc/query-kit';
import { createJwtAuthAdapter } from '@laterinc/query-kit-auth';

const adapter = createJwtAuthAdapter({
  refreshTokenUri: '/api/v1/auth/refresh',
  baseURL: 'https://api.example.com',
  loginUrl: '/login',
});

<QueryKitProvider config={{
  baseURL: 'https://api.example.com',
  auth: { adapter },
}}>
  <App />
</QueryKitProvider>
```

## 登录

```tsx
import { useAuthStore } from '@laterinc/query-kit-auth';

const response = await fetch('/api/login', {
  method: 'POST',
  body: JSON.stringify({ username, password }),
});
const { accessToken, refreshToken, expiresIn } = await response.json();

useAuthStore.getState().setAuth(
  { accessToken, refreshToken, expiresIn },
  { id: '1', username, firstName: 'John', lastName: 'Doe', email }
);
```

## 配置

### 加密存储

```tsx
createJwtAuthAdapter({
  refreshTokenUri: '/api/auth/refresh',
  authStoreConfig: {
    encryptionKey: process.env.NEXT_PUBLIC_ENCRYPTION_KEY,
    enableStorageEncryption: true,
  },
});
```

### 会话超时

```tsx
authStoreConfig: {
  sessionTimeout: 30 * 60 * 1000, // 30 分钟无操作自动登出
}
```

### sessionStorage

```tsx
authStoreConfig: {
  storageType: 'sessionStorage', // 关闭标签页即失效
}
```

## API

| 导出 | 说明 |
|------|------|
| `createJwtAuthAdapter` | 创建 JWT AuthAdapter |
| `useAuthStore` | Zustand store，管理登录状态 |
| `initializeAuthStore` | 初始化配置 |
| `subscribeAuthChange` | 订阅登录状态变化 |
| `useTokenExpiryMonitor` | 监控 Token 过期时间 |
| `clearAuthStorage` | 清空存储 |

## License

MIT