open-index/open-npm huggingface dataset:
npm package: @ray-js/studio-project-generator
Description: [![npm package][npm-img]][npm-url]
Latest version: 1.36.1

# @ray-js/studio-project-generator

[![npm package][npm-img]][npm-url]

将 JSON 文件解析生成 Ray 小程序项目


## 开发

```bash
yarn run test  # 执行测试
```

[npm-img]: https://img.shields.io/npm/v/@ray-js/studio-project-generator
[npm-url]: https://www.npmjs.com/package/@ray-js/studio-project-generator

关联项目：
- [@ray-js/studio-builder](https://registry.code.tuya-inc.top/miniapp/studio-builder)
- [@ray-js/studio-project-generator](https://registry.code.tuya-inc.top/miniapp/studio-project-generator)
- [packager](https://registry.code.tuya-inc.top/studio/packager/tree/feature/studio-ray)
- [studio-node](https://registry.code.tuya-inc.top/studio/studio-node/tree/release/auto-pack)
npm package: @ray-js/studio-types
Description: Studio 低代码协议
Latest version: 0.2.7

# protocol

Studio 低代码协议

## 规范

1. 文件命名只允许大驼峰。
2. 协议里面所有可复用的类型都抽离到 Common 里，除 Common 文件外，其他都是对外暴露的标准协议。
3. 所有协议必须包含一个示例文件，且统一放置到 ${Protocol}/__mocks__ 内。

## 协议概述

- UIPackage: 项目搭建协议
- Component: 组件描述协议
- DpSchema: Dp 功能描述协议
- Theme: 主题协议
- I18N: 多语言协议
- Icon: 图标协议
- Expr: 规则协议
- Action: 动作协议

## 协议文档

https://wiki.tuya-inc.com:7799/page/1494272115019366457
npm package: @ray-js/tree-selection
Description: 出行门店选择组件，树状结构数据
Latest version: 0.0.1

English | [简体中文](./README-zh_CN.md)

# @ray-js/tree-selection

[![latest](https://img.shields.io/npm/v/@ray-js/tree-selection/latest.svg)](https://www.npmjs.com/package/@ray-js/tree-selection) [![download](https://img.shields.io/npm/dt/@ray-js/tree-selection.svg)](https://www.npmjs.com/package/@ray-js/tree-selection)

> Travel store selection component, tree structure data

## Installation

```sh
$ npm install @ray-js/tree-selection
# or
$ yarn add @ray-js/tree-selection
```

## Develop

```sh
# watch compile component code
yarn watch
# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import Foo from '@ray-js/tree-selection';

export default function Home() {
  const [visible, setVisible] = useState(false);
  const [selectItem, setSelectItem] = useState<any>({});

  const [visible2, setVisible2] = useState(false);
  const [selectItem2, setSelectItem2] = useState({
    label: '二级组织02',
    code: 'code0_code1_code3',
    parentCode: 'code0_code1_code2',
    children: [],
  });

  return (
    <View className={styles.view}>
      <DemoBlock title="basic">
        <Button onClick={() => setVisible(true)}>当前选择的组织: {selectItem.label}</Button>
        <Template
          show={visible}
          treeData={initTreeData}
          onClickOverlay={() => setVisible(false)}
          onSelect={v => {
            setSelectItem(v);
            setVisible(false);
          }}
        />
      </DemoBlock>
      <DemoBlock title="initial value">
        <Button onClick={() => setVisible2(true)}>当前选择的组织: {selectItem2.label}</Button>
        <Template
          show={visible2}
          treeData={initTreeData}
          onClickOverlay={() => setVisible2(false)}
          defaultCode={['code0_code1', 'code0_code1_code3']}
          onSelect={v => {
            setSelectItem2(v);
            setVisible2(false);
          }}
        />
      </DemoBlock>
    </View>
  );
}
```
npm package: @ray-js/ttt-web
Description: Tuya Mini App TTT Web Implementation
Latest version: 1.5.1

[English](./README.md) | 简体中文

# @ray-js/ttt-web

[![latest](https://img.shields.io/npm/v/@ray-js/ttt-web/latest.svg)](https://www.npmjs.com/package/@ray-js/ttt-web) [![download](https://img.shields.io/npm/dt/@ray-js/ttt-web.svg)](https://www.npmjs.com/package/@ray-js/ttt-web)

> Ray TTT Web version

## Installation

```sh
$ npm install @ray-js/ttt-web
# or
$ yarn add @ray-js/ttt-web
# or
$ pnpm add @ray-js/ttt-web
```

## Usage

```tsx
import Foo from '@ray-js/ttt-web';

TODO
```
npm package: @ray-js/tuya-dp-transform
Description: ## 支持的协议类型
Author: hulf
Latest version: 0.0.7

# dp 协议性数据转换工具库

## 支持的协议类型

### 普通型协议

指可转为一个对象数据的协议，如：彩光协议 color_data
0000 03e8 03e8 可转为 {hue:0, saturation: 1000, value: 1000}

### 循环型协议

指协议可转化为一个数组数据，如：循环定时 timer
00 00 03 00 2f 04 00 06 00 1f 可转为[{startHour: 0, startMinute: 0, endHour: 3, endMinute: 0, temp: 47},{startHour: 4, startMinute: 0, endHour: 6, endMinute: 0, temp: 31}]

### 条件型协议

指协议中会根据某一个字段属性的值不同而协议支持的字段不同，如 照明的混光场景 dp

### 多版本协议

指协议存在一个版本字段属性，不同版本会有不同的解析，如 电热水器的定时周程序 dp

### 其他

## 支持数据类型

### 数值类型 number

### 数值类型 numberBySeparate

### 布尔类型 boolean

### 字符串 string

### 周 week

### 二进制位 bit

### 子节点 child

### 自定义 custom

### 示例
npm package: @ray-js/ty-outdoor-utils
Description: 出行工具库
Latest version: 1.0.1

English | [简体中文](./README-zh_CN.md)

# @ray-js/ty-outdoor-utils

[![latest](https://img.shields.io/npm/v/@ray-js/ty-outdoor-utils/latest.svg)](https://www.npmjs.com/package/@ray-js/ty-outdoor-utils) [![download](https://img.shields.io/npm/dt/@ray-js/ty-outdoor-utils.svg)](https://www.npmjs.com/package/@ray-js/ty-outdoor-utils)

> Outdoor Utils

## Installation

Note: DeviceKit needs to be introduced when using the travel secondary page jump, and it must be in version >=1.2.6

```sh
$ npm install @ray-js/ty-outdoor-utils
# or
$ yarn add @ray-js/ty-outdoor-utils
```

## Develop

```sh
# watch compile component code
yarn watch
# watch compile demo
yarn start:tuya
```

## Usage

```tsx
import OutdoorUtils from '@ray-js/ty-outdoor-utils';

const { hooks } = OutdoorUtils;
const { usePayUrls } = hooks;

export default function Home() {
  const [qrcode, setQrcode] = useState('');
  const { returnUrl } = usePayUrls();
  const makeQrcode = () => {
    const img = OutdoorUtils.QRcode.make('hello world!');
    setQrcode(img);
  };

  const openSubPage = () => {
    OutdoorUtils.jumpSubPage.toCyclingRecord({
      deviceId: 'devId',
      fail: e => console.log('err', e),
    });
  };
  return (
    <View className={styles.view}>
      <Button onClick={makeQrcode}>生成二维码</Button>
      <Button onClick={openSubPage}>跳转出行二级页</Button>
      {qrcode && (
        <View className={styles.center}>
          <Image src={qrcode} />
        </View>
      )}

      <Button onClick={() => console.log('returnUrl', returnUrl)}>获取收银台地址</Button>
      <Button
        onClick={() =>
          console.log(
            OutdoorUtils.pageParameters.setQuery({
              query: { name: '小钻风', age: 20, isBoy: true },
              chineseKey: ['name'],
            })
          )
        }
      >
        参数编码
      </Button>
      <Button
        onClick={() =>
          console.log(
            OutdoorUtils.pageParameters.getQuery({
              query: { name: '小钻风', age: '20', isBoy: 'true' },
              chineseKey: ['name'],
              numberKeys: ['age'],
              booleanKeys: ['isBoy'],
            })
          )
        }
      >
        参数解码
      </Button>
    </View>
  );
}
```
npm package: @ray-js/ty-steps
Description: 步骤条
Latest version: 1.1.1

English | [简体中文](./README-zh_CN.md)

# @ray-js/ty-steps

[![latest](https://img.shields.io/npm/v/@ray-js/ty-steps/latest.svg)](https://www.npmjs.com/package/@ray-js/ty-steps) [![download](https://img.shields.io/npm/dt/@ray-js/ty-steps.svg)](https://www.npmjs.com/package/@ray-js/ty-steps)

> 步骤条

## Installation

```sh
$ npm install @ray-js/ty-steps
# or
$ yarn add @ray-js/ty-steps
```

## Usage

```tsx
import Steps from '@ray-js/ty-steps';
export default () => (
  <Steps value={0}>
    <Steps.Step>Step 1</Steps.Step>
    <Steps.Step>Step 2</Steps.Step>
    <Steps.Step>Step 3</Steps.Step>
    <Steps.Step>Step 4</Steps.Step>
  </Steps>
);
```
npm package: @ray-js/wechat-panel-container-plugin
Description: 提供Ray开发微信小程序面板的运行容器
Latest version: 0.1.2

English | [简体中文](./README-zh_CN.md)

# @ray-js/wechat-panel-container-plugin

[![latest](https://img.shields.io/npm/v/@ray-js/wechat-panel-container/latest.svg)](https://www.npmjs.com/package/@ray-js/wechat-panel-container) [![download](https://img.shields.io/npm/dt/@ray-js/wechat-panel-container.svg)](https://www.npmjs.com/package/@ray-js/wechat-panel-container)

> 提供Ray开发微信小程序面板的运行容器

## Installation

```sh
$ npm install --save-dev @ray-js/wechat-panel-container-plugin
# or
$ yarn add -D @ray-js/wechat-panel-container-plugin
```

## Usage

Configure the plugin into `ray.config.ts`
```tsx
import panelPlugin from '@ray-js/wechat-panel-container-plugin';
const config: RayConfig = {
  plugins: [
    panelPlugin(),
  ],
};

export default config;
```
npm package: @ray-solutions/chonky
Description: A File Browser component for React
Author: Timur Kuzhagaliyev
Latest version: 0.3.1

<p align="center">
    <img src="https://chonky.io/chonky-logo-v2.png" alt="Chonky v2 Logo" width="500" />
    <br />
    <a href="https://www.npmjs.com/package/chonky">
        <img
            alt="NPM package"
            src="https://img.shields.io/npm/v/chonky.svg?style=flat&colorB=ffac5c"
        />
    </a>
    <a href="https://tldrlegal.com/license/mit-license">
        <img
            alt="MIT license"
            src="https://img.shields.io/npm/l/chonky?style=flat&colorB=dcd67a"
        />
    </a>
    <a href="https://www.npmjs.com/package/chonky">
        <img
            alt="NPM downloads"
            src="https://img.shields.io/npm/dt/chonky?style=flat&colorB=aef498"
        />
    </a>
    <a href="https://github.com/TimboKZ/Chonky">
        <img
            alt="GitHub stars"
            src="https://img.shields.io/github/stars/TimboKZ/Chonky?style=flat&colorB=50f4cc"
        />
    </a>
    <a href="https://discord.gg/4HJaFn9">
        <img
            alt="Chat on Discord"
            src="https://img.shields.io/discord/696033621986770957?label=discord&style=flat&colorB=08acee"
        />
    </a>
    <br />
    <br />
    <br />
</p>

Chonky is a file browser component for React. It tries to recreate the native file
browsing experience in your browser. This means your users can make selections, drag
& drop files, toggle between _List_ and _Grid_ file views, use keyboard shortcuts, and
much more!

### [Click here for documentation and examples.](https://chonky.io/)

> Please [create an issue](https://github.com/TimboKZ/Chonky/issues) if you have a
> problem or want to request a feature.

## Preview

<p align="center">
  <img src="https://chonky.io/chonky-v2-preview.gif" alt="Chonky preview">
</p>

## License

MIT © [Tim Kuzhagaliyev](https://github.com/TimboKZ) 2020
npm package: @ray-solutions/chonky-icon-fontawesome
Description: FontAwesome icon component for Chonky file browser
Author: Timur Kuzhagaliyev
Latest version: 0.3.1

# `chonky-icon-fontawesome`

This package contains the icon component for [Chonky][chonky], a file browser component
for React. Please refer to [the official documentation][docs] for usage instructions.

## Usage

```shell
npm install chonky@latest chonky-icon-fontawesome@latest
```

```ts
import { setChonkyDefaults } from 'chonky';
import { ChonkyIconFA } from 'chonky-icon-fontawesome';
// Somewhere in your `index.ts`:
setChonkyDefaults({ iconComponent: ChonkyIconFA });
```

[chonky]: https://chonky.io/
[docs]: https://chonky.io/docs/2.x/installation-usage