open-index/open-npm huggingface dataset:
npm package: @scpdemo/test-sdk-card
Description: React hook + iframe wrapper for the Scallop card SDK
Latest version: 1.6.0

# @scpdemo/test-sdk-card

React wrapper around the Scallop card widget. Ships a single component (`ScPrefixWidgetWrapper`) that renders the hosted experience out of the box—no need to specify an iframe URL unless you host your own.

## Install

```bash
npm install @scpdemo/test-sdk-card
# or: pnpm add @scpdemo/test-sdk-card
```

You can also pass`clientId` directly as props if you prefer not to use env vars. If neither is provided, the built-in default URL is used.

## Usage

```tsx
import "./App.css";
import {
  ScPrefixWidgetWrapper,
  ScallopSDKTransactions,
} from "@scpdemo/test-sdk-card";

function App() {
  return (
    <div className="App">
      <div className="widget-grid">
        <div className="panel">
          <ScPrefixWidgetWrapper
            style={{ minHeight: "720px" }}
            allow="clipboard-write"
            clientId="clientId"
          />
        </div>
        <div className="panel">
          <ScallopSDKTransactions
            style={{ minHeight: "720px" }}
            theme="default"
            clientId="clientId"
            cardId="cardId"
          />
        </div>
      </div>
    </div>
  );
}
```

All extra props are forwarded to the underlying `<iframe>`, so you can control sizing, permissions, sandboxing, `className`, etc.

## Hooks (optional)

The hook `useScPrefixSdk` is also exported if you want direct programmatic access to submit requests and check status from React components.

## Transactions iframe

If you need the transactions view, use the `ScPrefixTransactionsWrapper` component. It accepts the same props as `ScPrefixWidgetWrapper` and defaults to the hosted transactions endpoint; override only if you host your own. Optional card scoping: pass `cardId` as a prop or via env var (`REACT_APP_SC_PREFIX_CARD_ID` / `VITE_SC_PREFIX_CARD_ID` / `NEXT_PUBLIC_SC_PREFIX_CARD_ID` / `SC_PREFIX_CARD_ID`).

Example:

```tsx
import {
  ScallopSDKCards,
  ScallopSDKTransactions,
} from "@scpdemo/test-sdk-card";

function App() {
  return (
    <>
      <ScallopSDKCards
        theme="default"
        clientId="1234"
        allow="clipboard-write"
      />
      <ScallopSDKTransactions
        theme="default"
        clientId="1234"
        cardId="card_abc123"
        style={{ marginTop: 24 }}
      />
    </>
  );
}
```

The transactions iframe expects the user session (username/access token) to be present in `sessionStorage`, typically set by completing the cards/KYC flow first. Ensure the cards iframe runs before loading transactions so session data exists.
npm package: @scqilin/phone-ui
Description: 原生 TypeScript 手机外观组件库，支持多机型配置。
Author: scqilin
Latest version: 0.1.0

# @scqilin/phone-ui

原生 TypeScript 手机外观组件库，支持多机型演示与自定义外观。

> ⚠️ 本组件所有机型外观均为演示效果，并非真实手机尺寸，仅供开发测试参考！

## 🌐 在线演示

[查看在线演示](https://scqilin.github.io/phone-ui/)

## ✨ 特点

- 🚀 零依赖，纯 TypeScript + 动态样式注入
- 📱 内置 iPhone 16 全系列机型（16/Plus/Pro/Pro Max）
- 🎨 支持完全自定义外观（尺寸、颜色、按钮等）
- 💻 适用于任何前端项目
- 🎯 [在线演示](https://scqilin.github.io/phone-ui/)可直接体验

## 📦 安装

```bash
npm install @scqilin/phone-ui
```

## 🚀 快速开始

### 使用预设机型

```javascript
import { createPhoneUI } from '@scqilin/phone-ui';

const container = document.getElementById('phone-demo');
createPhoneUI({
  container,
  phoneType: 'iphone16pro' // 自动使用预设尺寸和布局
});
```

### 自定义机型

```javascript
import { createPhoneUI } from '@scqilin/phone-ui';

const container = document.getElementById('phone-demo');
createPhoneUI({
  container,
  width: 400,
  height: 800,
  frameColor: '#1a1a1a',
  screenColor: '#ffffff',
  showButtons: true
});
```

HTML 结构：
```html
<div id="phone-demo"></div>
```

## 📖 API 文档

### createPhoneUI(options)

| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| container | HTMLElement | ✅ | 渲染目标容器 |
| phoneType | string | ❌ | 机型名称，支持 'iphone16' \| 'iphone16plus' \| 'iphone16pro' \| 'iphone16promax' |
| width | number | ❌ | 自定义宽度（传入 phoneType 时无效） |
| height | number | ❌ | 自定义高度（传入 phoneType 时无效） |
| frameColor | string | ❌ | 边框颜色，默认 '#1a1a1a' |
| screenColor | string | ❌ | 屏幕颜色，默认 '#ffffff' |
| showButtons | boolean | ❌ | 是否显示侧边按钮，默认 true |
| borderRadius | number | ❌ | 圆角大小，默认 30 |

## 📱 支持的机型

| 机型 | phoneType 值 | 尺寸 |
|------|--------------|------|
| iPhone 16 | `'iphone16'` | 402×874 |
| iPhone 16 Plus | `'iphone16plus'` | 440×950 |
| iPhone 16 Pro | `'iphone16pro'` | 402×874 |
| iPhone 16 Pro Max | `'iphone16promax'` | 440×950 |

## 🎨 使用说明

### 预设机型模式
- 传入 `phoneType` 参数时，自动使用对应机型的预设尺寸和布局
- 此时 `width`、`height` 等尺寸参数会被忽略
- 适合快速展示标准机型外观

### 自定义机型模式
- 不传 `phoneType` 或传入 `'custom'` 时进入自定义模式
- 可自由设置 `width`、`height`、`borderRadius` 等所有外观参数
- 适合特殊需求或非标准尺寸

## 💡 注意事项

- 样式自动注入，无需手动引入 CSS 文件
- 按钮为装饰性元素，不提供点击交互功能
- 建议为内容区域设置适当的内边距避免贴边

## 🧪 演示与测试

- [在线演示地址](https://scqilin.github.io/phone-ui/)
- 本地查看：`docs/index.html` 文件
- 包含所有预设机型演示、自定义机型示例、壁纸背景效果

### 本地开发

```bash
# 构建项目
npm run build

# 本地预览演示页面
npm run dev

# 构建并预览
npm run preview
```

## 🗓️ 开发计划

- [ ] 添加更多 iPhone 机型（14/15 系列）
- [ ] 支持 Android 主流机型（Samsung Galaxy、小米等）
- [ ] 增加横屏模式支持
- [ ] 添加动态岛交互效果
- [ ] 支持自定义按钮样式和位置
- [ ] 提供更多预设主题和配色方案

## 📄 License

MIT
npm package: @scr2em/capacitor-contacts
Description: A capacitor plugin for contacts
Author: Mohamed
Latest version: 0.0.4

# @scr2em/capacitor-contacts

A capacitor plugin for contacts

## Setup
#### iOS
Apple requires the following usage description to be added and filled out for your app in Info.plist:
```
NSContactsUsageDescription (Privacy - Contacts Usage Description)
```
Read about Configuring Info.plist in the iOS Guide for more information on setting iOS permissions in Xcode

#### Android
This API requires the following permissions to be added to your AndroidManifest.xml:
```
<!-- Contacts API -->
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
```
## Install

```bash
npm install @scr2em/capacitor-contacts
npx cap sync
```

## API

<docgen-index>

* [`openAddContact(...)`](#openaddcontact)
* [`checkPermissions()`](#checkpermissions)
* [`requestPermissions()`](#requestpermissions)
* [`addListener('contactAdded', ...)`](#addlistenercontactadded-)
* [Interfaces](#interfaces)
* [Type Aliases](#type-aliases)

</docgen-index>

<docgen-api>
<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->

### openAddContact(...)

```typescript
openAddContact(options: { vcardString: string; }) => Promise<void>
```

| Param         | Type                                  |
| ------------- | ------------------------------------- |
| **`options`** | <code>{ vcardString: string; }</code> |

--------------------


### checkPermissions()

```typescript
checkPermissions() => Promise<{ contacts: PermissionState; }>
```

**Returns:** <code>Promise&lt;{ contacts: <a href="#permissionstate">PermissionState</a>; }&gt;</code>

--------------------


### requestPermissions()

```typescript
requestPermissions() => Promise<{ contacts: PermissionState; }>
```

**Returns:** <code>Promise&lt;{ contacts: <a href="#permissionstate">PermissionState</a>; }&gt;</code>

--------------------


### addListener('contactAdded', ...)

```typescript
addListener(eventName: 'contactAdded', listenerFunc: (result: { success: boolean; }) => void) => Promise<PluginListenerHandle>
```

| Param              | Type                                                    |
| ------------------ | ------------------------------------------------------- |
| **`eventName`**    | <code>'contactAdded'</code>                             |
| **`listenerFunc`** | <code>(result: { success: boolean; }) =&gt; void</code> |

**Returns:** <code>Promise&lt;<a href="#pluginlistenerhandle">PluginListenerHandle</a>&gt;</code>

--------------------


### Interfaces


#### PluginListenerHandle

| Prop         | Type                                      |
| ------------ | ----------------------------------------- |
| **`remove`** | <code>() =&gt; Promise&lt;void&gt;</code> |


### Type Aliases


#### PermissionState

<code>'prompt' | 'prompt-with-rationale' | 'granted' | 'denied'</code>

</docgen-api>