open-index/open-npm huggingface dataset:
npm package: @sfeed/cli
Description: Social media posting and scheduling CLI + MCP server
Latest version: 0.1.2

# @sfeed/cli

Post to Facebook Pages and Instagram from the terminal or through MCP.

sfeed is a CLI and MCP server for AI agents. It handles auth, immediate posting, hosted scheduling, and billing for hosted scheduling.

## Install

```bash
npm install -g @sfeed/cli
```

Requires Node.js 20+ installed on your machine.

## Quick start

```bash
sfeed auth facebook
sfeed mcp
```

That connects your accounts and starts the MCP server for an agent.

## Core commands

```bash
sfeed auth facebook
sfeed auth status
sfeed auth revoke facebook

sfeed post "content"
sfeed post "content" --to facebook
sfeed post "content" --to instagram
sfeed post "content" --page "My Page"
sfeed post "content" --to facebook --media ./photo.jpg
sfeed post "content" --at "2026-04-01T09:00:00Z"
sfeed post "content" --dry-run

sfeed pages
sfeed schedule list
sfeed schedule list --status failed
sfeed schedule list --status posted
sfeed schedule cancel <id>

sfeed status
sfeed billing
sfeed billing subscribe
sfeed billing portal
sfeed mcp
```

## Posting

- If you have one connected Page, `sfeed post` uses that Page
- If you have multiple connected Pages, you must pass `--page`
- Facebook immediate posts support local image files or public image URLs
- Instagram posts require public image or video URLs

## Scheduling

- `--at` schedules the post for later
- hosted scheduling requires a subscription
- scheduled media must use public URLs
- hosted scheduling checks for due posts every minute
- schedule times must be ISO 8601 with a timezone, for example `2026-04-01T09:00:00Z`

## MCP

sfeed works as an MCP server. Start it with:

```bash
sfeed mcp
```

Example Claude Desktop config:

```json
{
  "mcpServers": {
    "sfeed": {
      "command": "sfeed",
      "args": ["mcp"]
    }
  }
}
```

### MCP tools

- `sfeed_status`
- `sfeed_auth_status`
- `sfeed_pages`
- `sfeed_post`
- `sfeed_schedule_list`
- `sfeed_schedule_cancel`

Full docs: https://sfeed.dev/docs
npm package: @sfeer/kd
Description: 看到，基于ant-design-vue的二次封装
Latest version: 1.2.0

<h1 style="text-align: center">
看到
</h1>

<div style="text-align: center">

[![NPM version](https://img.shields.io/npm/v/@sfeer/kd)](https://www.npmjs.com/package/@sfeer/kd) [![Vue Support](https://img.shields.io/badge/support-TypeScript-blueviolet)](package.json) [![NPM downloads](https://img.shields.io/npm/dm/@sfeer/kd)](https://www.npmjs.com/package/@sfeer/kd) [![License](https://img.shields.io/github/license/sfeer/kd)](LICENSE)

</div>

## GitHub Actions 自动发布 npm 包

参考 https://www.cnblogs.com/gaobw/p/11593602.html

`.npmrc` 里面查看 npm 的 token 值

GitHub Actions 默认模版是在项目创建版本时触发 Action 去发布到 NPM

## 配置 config

json 格式说明
title -- 标题
code -- 应用码，用于文件索引
desc -- 描述
menus -- 菜单

| 属性    | 说明   | 类型          | 备注       |
|-------|------|-------------|----------|
| title | 标题   | string      |
| code  | 应用码  | string      | 和配置文件名同名 |
| desc  | 描述   | string      |
| menus | 菜单   | MenuModel[] |
| pages | 页面配置 |             |

## 待办

- ~~主色调整缺陷~~
- ~~antdv升级到V4~~
- loadData改成约定，和路由url一致（page，list约定大于配置！！！）
- kd 类库按需加载方式
- 登录认证，多因子，安全加密
- 和 yj 的后台系统对接一些基础 4a
- 在线编辑 json 和在线 code 编辑器，在线配置功能强化
- 动态开启 vconsole，自定义 vconsole 上报插件
- ~~- 添加移动端~~
- logo 添加插槽，默认是当前样式
- table 可编辑行，单独组件基于 kd-table
- table 操作栏超过三个变更多
- table 点击行选中

## Tomcat打包

```
<%@ page session="false" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<% response.setStatus(200); %>
```
npm package: @sffs/http
Description: @sffs/http
Author: Vic
Latest version: 0.0.1

# @sffs/http

基于 axios 的二次封装

## usage

```ts
import { Http } from '@sffs/http'

export const request = new Http({
  baseURL: '/',
  headers: {
    hehe: 'haha'
  },
  // 是否提示错误提示,默认设置为显示
  toast: true,
  handleError(res: any, toast?: boolean | undefined) {
    // dealWithMsg(res, toast)
    return Promise.resolve(res)
  },
  // 200 处理业务里面定义的错误
  handleRes(res: any) {
    if (!res?.data?.success) {
      // dealWithCustomError(res.data, this.toast)
      return Promise.resolve(res)
    }
    return res
  }
})
```
npm package: @sfimbreshsda/primitives
Description: [![Radix Primitives Logo](primitives.png)](https://radix-ui.com/primitives)
Latest version: 0.0.1

[![Radix Primitives Logo](primitives.png)](https://radix-ui.com/primitives)

# Radix Primitives

**An open-source UI component library for building high-quality, accessible design systems and web apps.**

Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.

---

## Documentation

For full documentation, visit [radix-ui.com/docs/primitives](https://radix-ui.com/docs/primitives).

## Releases

For changelog, visit [radix-ui.com/docs/primitives/overview/releases](https://radix-ui.com/docs/primitives/overview/releases).

## Contributing

Please follow our [contributing guidelines](./.github/CONTRIBUTING.md).

## Authors

- Benoit Grelard ([@benoitgrelard](https://twitter.com/benoitgrelard)) - [WorkOS](https://workos.com)
- Jenna Smith ([@jjenzz](https://twitter.com/jjenzz))
- Andy Hook ([@Andy_Hook](https://twitter.com/Andy_Hook)) - [WorkOS](https://workos.com)
- Pedro Duarte ([@peduarte](https://twitter.com/peduarte))
- Chance Strickland ([@chancethedev](https://twitter.com/chancethedev))

## Contributors

- Ar Nazeh ([@Nazeh](https://github.com/Nazeh))
- Fabio Capucci ([@cappuc](https://github.com/cappuc))

---

## Community

- Pedro Duarte ([@peduarte](https://twitter.com/peduarte))
- Colm Tuite ([@colmtuite](https://twitter.com/colmtuite)) - [WorkOS](https://workos.com)

- [Discord](https://discord.com/invite/7Xb99uG) - To get involved with the Radix community, ask questions and share tips.
- [Twitter](https://twitter.com/radix_ui) - To receive updates, announcements, blog posts, and general Radix tips.

## Thanks

<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>

Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.

---

## License

Licensed under the MIT License, Copyright © 2022-present [WorkOS](https://workos.com).

See [LICENSE](./LICENSE) for more information.
npm package: @sfitzpatrick/enzyme-context-helpers
Description: Helper functions to deal with missing context issues using Enzyme from 3rd party libs like Styled Components, React Router, ...
Author: Steven Fitzpatrick
Latest version: 0.2.3

# enzyme-context-helpers

[![Greenkeeper badge](https://badges.greenkeeper.io/stevenfitzpatrick/enzyme-context-helpers.svg)](https://greenkeeper.io/)

## 💻 Installation

First include the dependency in your project as dev-dependency.

npm

```bash
$ npm i @sfitzpatrick/enzyme-context-helpers -D
```

Yarn

```bash
$ yarn add @sfitzpatrick/enzyme-context-helpers -D
```

## 📦 Usage

### Styled Components

First you need to `init` once to pass your Styled Components theme.

```js
import { init } from '@sfitzpatrick/enzyme-context-helpers';
// Change path to where your Theme is saved
import theme from '../src/theme/theme';

init({ theme });
```

Then when you want test your styled components, which are dependent on theme context, you can use the following helpers to test with `shallow` and `mount`. These functions will automatically inject the Theme into your components.

```js
import {
  mountWithTheme,
  shallowWithTheme,
  renderWithTheme
} from '@sfitzpatrick/enzyme-context-helpers';

const mountedWrapper = mountWithTheme(component);
const shallowWrapper = shallowWithTheme(component);
const snapshotWrapper = renderWithTheme(component).toJSON();
```

## 👊 Author

* Steven Fitzpatrick [@Fitzy_longhorn](https://twitter.com/Fitzy_longhorn)

## 📃 License

This project is licensed under the MIT License - see the [Licence.md](Licence.md) file for details.

## 📜 Change log

The change log can found on the [CHANGELOG](https://github.com/stevenfitzpatrick/enzyme-context-helpers/blob/master/CHANGELOG.md) page.

## ✍️ Contributions

Feel free to contribute and submit pull requests.test
npm package: @sfitzpatrick/fitzy
Description: React UI Library
Author: Steven Fitzpatrick
Latest version: 4.7.7

# Fitzy

[![npm](https://img.shields.io/npm/v/fitzy.svg)](http://npm.im/fitzy)
[![CircleCI](https://circleci.com/gh/stevenfitzpatrick/fitzy/tree/master.svg?style=shield)](https://circleci.com/gh/stevenfitzpatrick/fitzy/tree/master)
[![coveralls](https://img.shields.io/coveralls/stevenfitzpatrick/fitzy/master.svg)](https://coveralls.io/github/stevenfitzpatrick/fitzy)
![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)

Library of common React UI Components, ready to plug into your website. Uses Emotion CSS-in-JS Library for styles.

## Table of content

* [Getting Started](#getting-started)
* [Usage](#usage)
* [Components](#components)
  * [Tabs](#tabs)
* [Build With](#build-with)
* [Author](#author)
* [Licence](#licence)
* [Links](#links)

## 💻 Getting Started

Follow these instructions to include the Fitzy Library to your website.

First include the dependency in your project.

Fitzy is available as an [npm package](https://www.npmjs.com/package/fitzy).

```bash
$ npm install fitzy --save
```

> This library depends on `react`,`prop-types` and `Emotion`. Please make sure you
> have those installed as well.

## 📦 Usage

The `fitzy` library provides both named and default exports, so you can import everything or just what you need. I would recommend just to import what you need for smaller bundle sizes.

##### Named:

```js
import { Input, Tabs } from 'fitzy';
```

##### Default:

```js
import Fitzy from 'fitzy';
```

## 🎁 Components

### Tabs

## Built With

* [React](https://github.com/emotion-js/emotion) - The javascript library used.
* [Emotion](https://github.com/facebook/react) - CSS-in-JS Library for styling.
* [Jest](https://github.com/facebook/jest) - Test Framework.
* [Styleguidist](https://github.com/styleguidist/react-styleguidist) - React component development library.

## 👊 Author

* Steven Fitzpatrick [@Fitzy_longhorn](https://twitter.com/Fitzy_longhorn)

## 📃 License

This project is licensed under the MIT License - see the [Licence.md](Licence.md) file for details.

## 📜 Change log

The change log can found on the [releases](https://github.com/stevenfitzpatrick/fitzy/releases) page.

## ✍️ Contributions

Feel free to contribute and submit pull requests.test

## 🔗 Links

* [Website](https://fitzy-ui.com)
* [Author Website](https://stevenfitzpatrick.io)
npm package: @sflabs/pixi-joystick
Description: ## Usage
Author: Daniil Kaverzin
Latest version: 6.0.4

# pixi-joystick

## Usage

```typescript
import { Joystick } from '@sflabs/pixi-joystick';

const joystick = new Joystick(app.stage, { x: 44, y: 44 });

joystick.onStart(() => {
  console.log('start');
});

joystick.onChange((angle, power) => {
  console.log(angle, power);

  // Radians
  console.log(joystick.angle);

  // From 0 to 1
  console.log(joystick.power);
}, 500);

joystick.onEnd(() => {
  console.log('end');
});

setTimeout(() => {
  joystick.x = 88;
  joystick.y = 88;
}, 5_000);

setTimeout(() => {
  joystick.destroy();
}, 10_000);
```
npm package: @sflanker/type-mapper
Description: A library for declarative validation and mapping untyped data into classes.
Author: Paul Wheeler
Latest version: 0.0.1

[![Build](https://github.com/sflanker/type-mapper/actions/workflows/build.yml/badge.svg)](https://github.com/sflanker/type-mapper/actions/workflows/build.yml)

# Type-Mapper - Declarative Mapping Between Untyped Data and JavaScript Classes

If you have untyped data in JavaScript, from `JSON.parse` for example, and you want to transform it into a JavaScript class using a combination of constructor arguments and properties, then `type-mapper` is a solution.

# Installation

```
npm install @sflanker/type-mapper
```

# Usage

Given some untyped data:

```json
{
  "make": "Ford",
  "model": "Mustang",
  "year": 1969
}
```

Decorate your class using Type-Mapper:

```typescript
import { mapped, alias, required, defaultValue } from '@sflanker/type-mapper';

class Vehicle {
    @mapped
    public year: number = 0

    constructor(
        @alias('make')
        @alias('manufaturer')
        @required
        public make: string,
        @alias('model')
        @defaultValue('UNKNOWN')
        public model: string) {
    }
}
```

Then use `Mapper` to convert your untyped data to an instance of your class:

```typescript
import { Mapper } from '@sflanker/type-mapper'

const myVehicle = Mapper.convert(Vehicle, myData)
```

# Features

 * Complex Types (via the `typeOf` and `arrayOf` decorators)
 * Mapping nested data via simple "dot" syntax
 * Mapping Arrays -> Objects via Positional Arguments
 * Required fields and Default Values
 * Validation
 * Transformation
npm package: @sflowcode/marterial-demo
Description: @sflowcode/marterial-demo
Author: fusion-team
Latest version: 0.1.0-beta.0

# @sflowcode/marterial-demo

一个面向 PC 的业务组件库

## 调试
启动调试

```
npm run lowcode:dev             # 打开开发环境，运行所有组件
```

构建

```
npm run lowcode:build
```
npm package: @sfomin/tinkoff-payment-sdk
Description: Tinkoff Payment SDK for Node.js
Author: Slava Fomin II
Latest version: 0.1.1


# @sfomin/tinkoff-payment-sdk

<!-- NPM Badge -->
<a href="https://badge.fury.io/js/%40sfomin%2Ftinkoff-payment-sdk">
  <img src="https://badge.fury.io/js/%40sfomin%2Ftinkoff-payment-sdk.svg" alt="npm version" height="18">
</a>

<!-- CodeClimate Badge -->
<a href="https://codeclimate.com/github/slavafomin/tinkoff-payment-sdk/maintainability">
  <img src="https://api.codeclimate.com/v1/badges/0d74bceac218c511a141/maintainability" alt="maintainability">
</a>

<!-- MIT License Badge -->
<a href="https://opensource.org/licenses/MIT">
  <img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT" height="20">
</a>

---

A Node.js SDK for Tinkoff Bank's Payment API.

## Features

- provides API client to communicate with Tinkoff API using HTTPS
- provides Webhook handler to for easier webhook requests processing
- HTTP transport agnostic (you can use any HTTP library),
  [Got][Got] is supported out of the box
- automatically transforms data to/from convenient JavaScript formats
  (e.g. `string` to `Date`)
- type-safe, written in TypeScript and ships with complete type declarations
  for all data types and API requests/responses


## Installation

Install the package:

`npm i -S @sfomin/tinkoff-payment-sdk`

Install the [Got HTTP client][Got]
(if you are not planning to provide custom implementation):

`npm i -S got`


### Examples

@todo


## License (MIT)

Copyright (c) 2020 Slava Fomin II

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


  [Got]: https://github.com/sindresorhus/got
npm package: @sfotty-pie/sfotty
Description: Cycle-exact 6502 emulator for Node.js and the browser
Author: Fatih Aygün <cyco130@gmail.com>
Latest version: 0.1.0

# `@sfotty-pie/sfotty`

**Sfotty** is a cycle-exact 6502 (**S**ixty **F**ive **O**h **T**wo) emulator that can run on Node.js or in the browser.

## Usage

Import `Sfotty` from the `@sfotty-pie/sfotty` package and create a new instance with `new Sfotty(memory)` where `memory` is an object implementing the `Memory` interface:

```ts
interface Memory {
	read(address: number): number;
	write(address: number, value: number): void;
}
```

The CPU starts with a pending reset interrupt. You can execute instructions by repeatedly calling `run()`. The `crashed` property returns `true` if the CPU crashes (by executing an undefined opcode).

## Ideas for future versions

-   Serialize/deserialize CPU state
-   Implement undocumented NMOS instructions
-   Implement CMOS (65C02) instruction set
npm package: @sfpprxy/speak
Description: Cross-platform local TTS speaker CLI.
Latest version: 0.1.11

# speak

English docs: [README.md](./README.md)

`speak` 是一个跨平台命令行语音播报工具。

版本变更记录：
- GitHub Releases：`https://github.com/sfpprxy/speak/releases`
- Changelog：[CHANGELOG.md](./CHANGELOG.md)

安装后可直接使用：

```bash
npm i -g @sfpprxy/speak
speak "你好，世界"
```

## 常用命令

```bash
speak "任务完成"
speak --print-config
speak -h
speak --help
speak -v
speak --debug "任务完成"
```

## 帮助输出

```bash
speak -h
```

```text
Usage: speak [options] --text "hello"
   or: speak [options] "hello"

Options:
  -h, --help                Show this help
  -d, --debug               Enable debug logs
  --print-config, --config  Print effective config and exit
  -t, --text <text>         Text to speak
```

## 首次使用

首次运行会提示输入 `VOLC_TTS_TOKEN`，并保存到本地：

- 路径：`~/.speak/auth.json`
- 权限：目录 `700`，文件 `600`

如果在非交互环境下缺少 token，会直接报错并提示先在终端初始化一次。

## 运行要求

- 需要可用音频播放器（系统内置或常见播放器均可）
- 需要网络访问 Doubao TTS API
- 安装时不要跳过 optionalDependencies（避免使用 `--omit=optional`）

## 配置项

| 变量 | 默认值 | 说明 |
|---|---|---|
| `SPEAKER_DEBUG` | 空 | `1/true/yes/on` 时输出调试日志（也可用 `--debug`） |
| `TTS_PROVIDER` | `doubao` | 当前仅支持 `doubao` |
| `VOLC_TTS_APPID` | `3864509867` | 火山 TTS AppID |
| `VOLC_TTS_CLUSTER` | `volcano_tts` | 集群标识 |
| `VOLC_TTS_RESOURCE_ID` | `volc.seedtts.default` | 资源 ID |
| `VOLC_TTS_VOICE_TYPE` | `zh_female_vv_uranus_bigtts` | 音色 |
| `VOLC_TTS_MODEL` | 空 | 可选模型参数 |
| `VOLC_TTS_ENCODING` | `mp3` | 音频格式 |
| `VOLC_TTS_RATE` | `24000` | 采样率 |
| `VOLC_TTS_SPEED` | `1.0` | 语速比例 |
| `VOLC_TTS_VOLUME` | `1.0` | 音量比例 |
| `VOLC_TTS_PITCH` | `1.0` | 音高比例 |
| `MAX_TTS_TEXT_LEN` | `400` | 最大播报字符数 |
| `TTS_TIMEOUT_MS` | `10000` | 云端超时（ms） |
| `TTS_CACHE_DIR` | `${TMPDIR}/speaker-tts-cache` | 音频缓存目录 |

说明：`VOLC_TTS_TOKEN` 由首次交互输入后持久化到 `~/.speak/auth.json`。

## 常见问题

- 没有声音：先检查系统输出设备和音量；再试 `speak --debug "测试"` 查看日志。
- token 失效：删除 `~/.speak/auth.json` 后重新运行 `speak "测试"` 重新初始化。
- 找不到平台二进制：不要跳过 optionalDependencies，重新安装：
  - `npm i -g @sfpprxy/speak`
npm package: @sfpy/core
Description: Core smart contracts of Sfpy
Latest version: 1.0.2

# sfpy-core
Core smart contracts of sfpy

In-depth documentation on sfpy is available at [sfpy.co](https://sfpy.co/docs).

# Local Development

The following assumes the use of `node@>=10`.

## Install Dependencies

`yarn`

## Compile Contracts

`yarn compile`

## Run Tests

`yarn test`

# Generating markdown references from smart contracts

`solidity-docgen` is used to generate documentation and is loaded into the package.json, meaning if you run `yarn` it will be available to use.
But if you need to install it you can follow this command

`yarn add solidity-docgen`

Get the correct compiler version. `solc` is already loaded into the package.json, meaning if you run `yarn` it will be available to use.
But if you need to install it you can follow this command

`yarn add solc`

There is already a template named `contract.hbs` inside the `/templates` folder located in the same directory as `/contracts`. 
You can edit this file or replace it with your own. Put the updated template `contract.hbs` in the `/templates` folder under the same 
directory as `/contracts` that you want to generate

Run `npx solidity-docgen --solc-module solc -t ./contracts/templates`
npm package: @sfpy/libraries
Description: Solidity libraries that are shared across Sfpy contracts
Latest version: 1.0.2

# sfpy-libraries
Solidity libraries that are shared across Sfpy contracts

## Install

Run `yarn` to install dependencies.

## Test

Run `yarn test` to execute the test suite.

## Usage

Install this in another project via `yarn add @sfpy/libraries`

Then import the contracts via:

```solidity
import '@sfpy/libraries/contracts/libraries/TransferHelper.sol';

```
npm package: @sfpy/periphery
Description: Top level contracts for interacting with Sfpy
Latest version: 1.0.2

# sfpy-periphery
Top level contracts for interacting with Sfpy

In-depth documentation on Sfpy is available at [sfpy.co](https://sfpy.co/docs).

# Local Development

The following assumes the use of `node@>=10`.

## Install Dependencies

`yarn`

## Compile Contracts

`yarn compile`

## Run Tests

`yarn test`

# Generating markdown references from smart contracts

`solidity-docgen` is used to generate documentation and is loaded into the package.json, meaning if you run `yarn` it will be available to use.
But if you need to install it you can follow this command

`yarn add solidity-docgen`

Get the correct compiler version. `solc` is already loaded into the package.json, meaning if you run `yarn` it will be available to use.
But if you need to install it you can follow this command

`yarn add solc`

There is already a template named `contract.hbs` inside the `/templates` folder located in the same directory as `/contracts`. 
You can edit this file or replace it with your own. Put the updated template `contract.hbs` in the `/templates` folder under the same 
directory as `/contracts` that you want to generate

Run `npx solidity-docgen --solc-module solc -t ./contracts/templates`
npm package: @sfpy/react-native-sdk
Description: safepay react-native checkout sdk for merchants to consume for the easiest checkout experience
Author: Safepay
Latest version: 2.0.2

# Safepay React Native Checkout

This project aims to be the easiest way for our merchants to consume safepay-checkout in their React Native applications.

## Installation

npm:
>npm install @sfpy/react-native-sdk

yarn:
>yarn add @sfpy/react-native-sdk

### 1. Add react-native-webview to your dependencies

> $ npm install --save react-native-webview

### `Android:`

Android - `react-native-webview` version <6: This module does not require any extra step after running the link command.

Android - `react-native-webview` version >=6.X.X: Please make sure AndroidX is enabled in your project by editting `android/gradle.properties` and adding 2 lines:

For Android manual installation, please refer to this [article](https://engineering.brigad.co/demystifying-react-native-modules-linking-964399ec731b) where you can find detailed step on how to link any react-native project.

### `iOS:`

If using CocoaPods, in the ios/ or macos/ directory run:
> $ pod install

#### Usage

#### SafepayCheckout

`SafepayCheckout` component is the main component which wraps everything and provides a couple of props (see Config below).

#### Example

``` ts
import React from 'react';
import SafepayCheckout from '@sfpy/react-native-sdk';
import {StyleSheet} from 'react-native';

const Home: React.FC = () => {
  return (
    <>
      <SafepayCheckout
        amount={455}
        clientKey="sec_xxxx-yourkey"
        currency="PKR"
        environment={environment.SANDBOX}
        order_id="12345"
        buttonStyle={styles.button}
        buttonTheme={theme.DEFAULT}
        onPaymentCancelled={() => Alert.alert('Payment Cancelled!')}
        onPaymentComplete={() => Alert.alert('Payment Successfull')}
        onErrorFetchingTracker={() => Alert.alert('error fetching tracker id')}
      />
    </>
  );
};
export default Home;

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: 'lightblue',
    padding: 10,
  },
  btn_text: {
    color: 'black',
    fontSize: 15,
    fontWeight: 'bold',
  },
});
```

#### Props Configuration

| Property | Type | Description |
| :---         |     :---:      |          :---: |
| amount       | number         | use this to specify amount    |
| clientKey     | string       | use your client key      |
| currency     | string       | specify currency for your transactions |
| environment     | enum | use this to specify environment  |
| order_id     | string       | use this for your order id  |
| buttonTheme     | enum       | use this to specify theme to your button|
| buttonStyle     | string      | use this to give styles to your button|
| onPaymentComplete() | function | use this to notify merchants if payment is complete |
| onErrorFetchingTracker() | function | use this to notify merchants if there is an error in fetching tracker id|
| onPaymentCancelled() | function | use this to notify merchants if customer is cancelling the payment|
npm package: @sfpy/styleguide
Description: Safepay's styleguide components for use on the web.
Author: Ziyad Parekh
Latest version: 0.0.9

# @sfpy/styleguide

Safepay's styleguide and components for use on the web.

## Usage

1. Install Safepay Styleguide package:
   ```shell
   yarn add @sfpy/styleguide
   ```
2. Import global CSS files from the package in your JS(X)/TS(X) code:
   ```jsx
   import '@sfpy/styleguide/dist/sfpy-theme.css';
   ```
   or import it the main stylesheet file:
   ```css
   @import '@sfpy/styleguide/dist/sfpy-theme.css';
   ```
3. Add `'./node_modules/@sfpy/styleguide/dist/**/*.{js,ts,jsx,tsx}'` to the Tailwind `content` paths.

### Tailwind theme

For the Styleguide we use our custom Tailwind theme, which is based on the default TW theme, with the following differences:

- only valid media screen scopes are: `xs:`, `sm:`, `md:`, `lg:` and `xl:`
- there is a custom `hocus:` scope which is a shorthand for hover and focus states
- typography elements are predefined as a `heading-[size]` styles sets
- `icon-[size]` are custom component classes defined for icons sizing

The theme can be extended, if needed, and includes `@tailwindcss/typography` plugin by default, with a stripped down version of default config.

## Development

### Get started

1. Install dependencies with `yarn`.
2. Build everything with `yarn build`.
3. Develop with `yarn dev`.

### Changing Tailwind theme

In order to see changes made to the exported **tailwind.js** config:

- Change a value in **packages/styleguide/tailwind.js**
- Run `yarn build` in **packages/styleguide**
- Navigate to **example-web** and restart the dev server
npm package: @sfpy/styleguide-base
Description: Safepay's base colors and style values.
Author: Ziyad Parekh
Latest version: 0.0.5

# @sfpy/styleguide-base

Safepay's base colors and style values.

## Get started

1. Install dependencies with `yarn`.
2. Build everything with `yarn build`.
3. Develop with `yarn dev`.
npm package: @sfroment/blueprints
Description: This package contains the DRP blueprints intended to be used by other DRPs.
Latest version: 0.6.11

# DRP Blueprints

This package contains the DRP blueprints intended to be used by other DRPs.

## Usage

You can use it as a standalone package. For that, you can install it using:

```bash
pnpm install @ts-drp/blueprints
```

### Build

To build the package, you can run:

```bash
pnpm build
```

### Tests

To run the tests, you can run:

```bash
pnpm test
```
npm package: @sfroment/logger
Description: This package makes it easy to log messages in a structured way.
Latest version: 0.6.11

# DRP Logger

This package makes it easy to log messages in a structured way.

## Usage

You can use it as a standalone package. For that, you can install it using:

```bash
pnpm install @ts-drp/logger
```

### Build

To build the package, you can run:

```bash
pnpm build
```
npm package: @sfroment/network
Description: This package contains the network middleware to abstract libp2p for the DRP protocol.
Latest version: 0.6.11

# DRP Network Stack

This package contains the network middleware to abstract libp2p for the DRP protocol.

To do so, we define a `DRPNetworkNode` where we can pass the configs that we want and it "magically" configures libp2p and gives connectivity to the DRP Network.

## Usage

This package is intended to be used as a dependency for the DRP protocol. However, you can use it as a standalone package. For that, you can install it using:

```bash
pnpm install @ts-drp/network
```

### Build

To build the package, you can run:

```bash
pnpm build
```

### Tests

To run the tests, you can run:

```bash
pnpm test
```
npm package: @sfroment/node
Description: This package provides the implementation of a DRP Node, which is a node in a network that can be connected to other nodes and exchange messages with them. The DRP Node is the entrypoint for interacting with the DRP protocol in the network.
Latest version: 0.6.11

# DRP Node

This package provides the implementation of a DRP Node, which is a node in a network that can be connected to other nodes and exchange messages with them.
The DRP Node is the entrypoint for interacting with the DRP protocol in the network.

## Usage

DRP Node can be used using the CLI or integrated into an existing application.

### CLI

The CLI provides a simple way to start a DRP Node and connect it to other nodes in the network.
For more information on what are the commands available, run:

```bash
pnpm cli --help
```

#### Running a bootstrap node

You can run a bootstrap node using the following command:

```bash
pnpm cli -m bootstrap --config configs/bootstrap.json
```

### Integration

To integrate the DRP Node into an existing application, you can install it using:

```bash
pnpm install @ts-drp/node
```

Then, you can import the DRP Node class and create a new instance:

```javascript
import { DRPNode } from "@sfroment/node";

const node = new DRPNode();

// Start the node
node.start();
```
npm package: @sfroment/object
Description: This package provides a simple implementation of Distributed Real-Time Programs (DRPs). DRPs are a type of composable programs that can be replicated across multiple nodes in a network, and can be updated concurrently by multiple clients without the need 
Latest version: 0.6.11

# DRP Objects

This package provides a simple implementation of Distributed Real-Time Programs (DRPs).
DRPs are a type of composable programs that can be replicated across multiple nodes in a network,
and can be updated concurrently by multiple clients without the need for coordination.

## Usage

This package is intended to implement all the fuctionalities for the creation of custom DRPs.
Basic operations for synchronization are provided, but the implementation of the actual program behavior is left to the app developer.

For starting, you can install it using:

```bash
pnpm install @ts-drp/object
```
npm package: @sfroment/tracer
Description: This package provides tracing capabilities using OpenTelemetry and Jaeger.
Latest version: 0.6.5

# Tracer

This package provides tracing capabilities using OpenTelemetry and Jaeger.

## Local Development Setup

### Prerequisites

- Docker and Docker Compose installed on your machine

### Setting up Jaeger

1. Navigate to the tracer package directory:

```bash
cd packages/tracer
```

2. Start the Jaeger and NGINX services using docker-compose:

```bash
docker-compose -f docker/docker-compose.yml up -d
```

This will start:

- Jaeger all-in-one container with the UI available at http://localhost:16686
- NGINX reverse proxy for CORS handling

### Usage

```typescript
import { enableTracing, traceFunc } from "@sfroment/tracer";

// Enable tracing for your service
enableTracing("your-service-name", {
	provider: {
		serviceName: "your-service", // Optional, defaults to "unknown_service"
		exporterUrl: "http://localhost:4318/v1/traces", // Optional
		exporterHeaders: {
			// Optional
			"Content-Type": "application/json",
			"Access-Control-Allow-Headers": "*",
			"Access-Control-Allow-Origin": "*",
		},
	},
});

// Wrap functions to trace them
const tracedFunction = traceFunc(
	"operation-name",
	(param1, param2) => {
		// Your function logic here
		return result;
	},
	// Optional: Add custom attributes to the span
	(span, param1, param2) => {
		span.setAttribute("param1", param1);
		span.setAttribute("param2", param2);
	}
);

// The tracer supports various function types:
// - Synchronous functions
// - Async functions
// - Generator functions
// - Async Generator functions

// Example with async function
const tracedAsync = traceFunc("async-operation", async (id: string) => {
	const result = await fetchData(id);
	return result;
});

// Clean up (for testing purposes)
import { disableTracing, flush } from "@sfroment/tracer";

// Force flush traces before shutdown
await flush();

// Disable tracing (typically only needed in tests)
disableTracing();
```

## Ports

- `16686`: Jaeger UI
- `4318`: OTLP HTTP receiver (NGINX proxy)

## Viewing Traces

1. Open http://localhost:16686 in your browser
2. Select your service from the "Service" dropdown
3. Click "Find Traces" to view your application's traces

## Stopping the Services

To stop the services:

```bash
docker-compose -f docker/docker-compose.yml down
```
npm package: @sft/mp-ci
Description: 小程序自动上传工具
Latest version: 1.0.1

# mp-ci
小程序自动上传工具

1. 获取config发布的配置文件 mp-ci.config.js

IProject
| 键 | 类型 | 说明 |
| ---- | ---- |	---- |
| appid | 属性 | 小程序/小游戏项目的 appid |
| type | 属性 |	项目的类型，有效值miniProgram/miniProgramPlugin/miniGame/miniGamePlugin |
| projectPath |	属性 | 项目的路径，即project.config.json 所在的目录 |
| privateKey | 属性 | 私钥，在获取项目属性和上传时用于鉴权使用，在微信公众平台 上登录后下载 |
| attr | 异步方法 |	项目的属性，如指定了 privateKey 则会使用真实的项目属性 |
| stat | 同步方法 |	特定目录下前缀下（prefix）文件路径 (filePath) 的 stat, 如果不存在则返回 undefined |
| getFile |	异步方法 | 特定目录下前缀下（prefix）文件路径 (filePath) 的 Buffer |
| getFileList |	同步方法 | 特定目录下前缀下（prefix）文件路径 (filePath) 下的文件列表 |
| updateFile | 同步方法 | 更新项目文件 |

IUpload
| 键 | 类型 | 必填 | 说明 |
| ---- | ---- |	---- | ---- |
| project |	IProject |	是 | #项目对象 |
| version | string | 是 | 内部默认会自动生成 |
| desc | string | 否 | 内部默认会根据changelog自动生成 |
| setting | object | 否 | #编译设置 |
| onProgressUpdate | function | 否 | 进度更新监听函数 |
| robot | number | 否 | 指定使用哪一个 ci 机器人，可选值：1 ~ 30 |
| threads | number | 否 | 指定本地编译过程中开启的线程数 |

IPreview
| 键 | 类型 | 必填 | 说明 |
| ---- | ---- |	---- | ---- |
| project | IProject | 是 | #项目对象 |
| desc | string | 否 | 自定义备注，将显示在“小程序助手”开发版列表中 |
| setting | object | 否 | #编译设置 |
| onProgressUpdate | function | 否 | 进度更新监听函数 |
| robot | number | 否 | 指定使用哪一个 ci 机器人，可选值：1 ~ 30 |
| qrcodeFormat | string | 否 | 返回二维码文件的格式 "image" 或 "base64"， 默认值 "terminal" 供调试用 |
| qrcodeOutputDest | string | 是 | 二维码文件保存路径 |
| pagePath | string | 否 | 预览页面路径 |
| searchQuery | string | 否 | 预览页面路径启动参数 |
| scene | number | 否 | 默认值 1011，具体含义见场景值列表 |

### 指令参数
| 指令 | 说明 |
| ---- | ---- |
| `-c`, `--config` | 指定配置文件，没有指定的话，默认回去找根目录下名为`mp-ci.config.js`的文件，如果文件不存在则用库中默认的配置 |
| `--preid` | 指定预发布的类型`alpha` or `beta` |
| `--dry` | 不执行命令，只打印日志 |
| `--progress` | 展示上传和预览的进度, 默认`false` |
| `-r` | 上传和预览时，指定使用哪一个 ci 机器人，可选值：1 ~ 30 |
| `--onlyUpload` | 只执行上传微信的命令 |
| `--skipBuild` | 跳过打包 |
| `--preview` | 开启预览，除了获取版本号和预览外，其他操作均不执行(更新版本，推送git，打包等等) |
| `--pagePath` | 预览页面路径 |
| `--searchQuery` | 预览页面路径启动参数 |
| `--scene` | 预览页面进入的场景，默认值 1011，具体含义见[场景值列表](https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html) |
npm package: @sft/recycle-list
Description: Vue3版本的无限滚动列表
Author: S.F
Latest version: 1.0.0

# RecycleList
Vue3版本的无限滚动列表

### Features 
- [x] 下拉刷新和上拉加载
- [x] 下拉加载很上拉刷新
- [x] 垂直方向单列和多列滚动
- [x] 垂直方向瀑布流
- [ ] 水平方向的正向和反向列表和瀑布流

### Components
+ **`RecycleCore`**: 可容纳无限数据的滚动容器
+ **`PullDown`**: 提供下拉操作的容器组件
+ **`RecycleList`**: 支持上拉加载和下拉刷新，提供`default(item)`, `header`, `pull-down`, `pull-up`, `empty`的插槽
+ **`ResizeView`**: 监听节点高度变化的组件
+ **`ResizeGrid`**: 多列布局


### 注意
1. 如果你是使用的Git相关的应用程序(SublimeMerge)，她的 PATH 环境变量与你的终端中的 PATH 不同，导致 Git 无法找到所需的命令，你可以在终端中运行 "echo $PATH" 命令查看当前的 PATH 环境变量，并将 Git 应用程序的 PATH 设置为相同的值。
2. 如果你使用的是版本管理脚本（如 nvm、n、rbenv、pyenv 等），可以使用 ~/.huskyrc 文件在运行钩子之前加载所需的脚本。以 nvm 为例，可以在 ~/.huskyrc 文件中添加以下内容：
```sh
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
```
npm package: @sfteam/eslint-config-sf
Description: Eslint Test
Author: FE
Latest version: 0.0.3

# eslint-config-sunfe
ESLint 대한 설정입니다.
수정 또는 개선이 필요하면 편하게 수정 부탁드립니다.

## 작업이력
- [규칙](https://github.com/SunC-Kim/eslint-config-sunfe/blob/main/index.js)은 여기를 통해 확인할 수 있습니다

## 프로젝트 내 설치
1. 프로젝트별 내 패키지 설치
```
npx install-peerdeps --dev eslint-config-sunfe
```
2. 프로젝트 디렉터리의 루트에 .eslintrc 파일을 생성하고 아래와 같이 설정을 추가합니다. (예시 코드는 .eslintrc.js파일을 생성하여 작성했습니다)
```
module.exports = {
  extends: ["eslint-config-sunfe"],
  parser: "@typescript-eslint/parser",
};
```
3. package.json에 eslint를 위한 스크립트 추가합니다
```
"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
}
```

## With Create React App
1. 패키지를 설치합니다
```
install-peerdeps --dev eslint-config-sunfe
```
2. package.json 파일에서 "eslintConfig" 내 "extends" 속성의 "react-app"를 지웁니다.
```
"eslintConfig": {
    "extends": [
      "react-app",
      ...
    ]
  },
```
3. 프로젝트 디렉터리의 루트에 .eslintrc 파일을 생성하고 아래와 같이 설정을 추가합니다. (예시 코드는 .eslintrc.js파일을 생성하여 작성했습니다)
```
module.exports = {
  extends: ["eslint-config-sunfe"],
  parser: "@typescript-eslint/parser",
};
```
4. package.json에 eslint를 위한 스크립트 추가합니다.
```
"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
}
```
5. 스크립트를 통해 eslint 실행합니다.
```
yarn lint
```