open-index/open-npm huggingface dataset:
npm package: @ray-js/sdm-react
Description: Smart Device Model React Binding
Latest version: 1.0.6

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

# @ray-js/sdm-react

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

> Smart Device Model React Binding

## Installation

```sh
$ npm install @ray-js/sdm-react
# or
$ yarn add @ray-js/sdm-react
# or
$ pnpm add @ray-js/sdm-react
```

## Usage

```typescript
// src/app.tsx
import React from 'react';
import 'ray';
import '@/i18n';
import { kit } from '@ray-js/panel-sdk';
import { SdmProvider } from '@ray-js/sdm-react';
import { devices } from '@/devices';

const { initPanelEnvironment } = kit;

interface Props {
  children: React.ReactNode;
}

initPanelEnvironment({ useDefaultOffline: true });

export default class App extends React.Component<Props> {
  render() {
    return <SdmProvider value={devices.robot}>{this.props.children}</SdmProvider>;
  }
}
```

### useSdmProps

```tsx
import React from 'react';
import { View } from '@ray-js/components';
import { useSdmProps } from '@ray-js/sdm-react';

export default function PageSdm() {
  const dpState = useSdmProps(
    d => d,
    (prevDpState, nextDpState) => prevDpState.power === nextDpState.power // only rerender when return false
  );
  const power = useSdmProps(props => props.power);
  return (
    <View style={{ flex: 1 }}>
      <View>dpState: {JSON.stringify(dpState)}</View>
      <View>power: {JSON.stringify(power)}</View>
    </View>
  );
}
```

### useSdmDevice

```tsx
import React from 'react';
import { View } from '@ray-js/components';
import { useSdmProps } from '@ray-js/sdm-react';

export default function PageSdm() {
  const network = useSdmDevice(
    device => device.network,
    (prevNetwork, nextNetwork) => prevNetwork.isConnected === nextNetwork.isConnected // only rerender when return false
  );
  const isConnected = useSdmDevice(device => device.network.isConnected);
  return (
    <View style={{ flex: 1 }}>
      <View>network.isConnected: {JSON.stringify(isConnected)}</View>
    </View>
  );
}
```
npm package: @ray-js/search-device-tip-modal
Description: 搜索设备前，重置配网的提示弹窗
Latest version: 2.1.0

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

# @ray-js/search-device-tip-modal

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

> Before searching for a device, a pop-up window for resetting the network configuration

## Installation

```sh
$ npm install @ray-js/search-device-tip-modal
# or
$ yarn add @ray-js/search-device-tip-modal
```

## Usage

### SearchDeviceTipModal Demo

```tsx
import SearchDeviceTipModal from '@ray-js/search-device-tip-modal';

<SearchDeviceTipModal
  show={show}
  onClickOverlay={() => setShow(false)}
  onCloseButtonClick={() => setShow(false)}
  onMoreButtonClick={handleBtnClick}
  onAddButtonClick={handleBtnClick}
  dataSource={dataSource}
/>;
```
npm package: @ray-js/select-device
Description: 多选列表
Latest version: 3.1.0

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

# @ray-js/select-device

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

> Multiple choice list

## Installation

```sh
$ npm install @ray-js/select-device
# or
$ yarn add @ray-js/select-device
```

## Usage

### Multiple choice list Demo

```tsx
import SelectDevice from '@ray-js/select-device';

<SelectDevice
  isShowProgress
  tipText="Please select device"
  max={2}
  dataSource={data}
  onSelect={handleSelectChange}
/>;
```
npm package: @ray-js/skeleton
Description: 骨架屏
Latest version: 1.2.0

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

# @ray-js/skeleton

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

> Skeleton

## Installation

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

## Usage

```tsx

.customSkeleton {
  --width: 50%; // The following css variables are supported
  --height: 20px;
  --border-radius: 8px;
}

import Skeleton from '@ray-js/skeleton';
export default () =>  {
    return (
        <View>
            <Skeleton animated className={styles.customSkeleton} />
            <Skeleton.Title />
            <Skeleton.Paragraph />
        </View>
    )
};
```
npm package: @ray-js/stat-charts
Description: ray 统计图表组件
Author: Tuya.inc
Latest version: 3.1.1

# General statistical chart

## Installation

```bash
npm install @ray-js/stat-charts
```

## Usage

### Displays annual temperature statistics

```jsx
import StatCharts from '@ray-js/stat-charts';

<StatCharts
  devIdList={['vdevo168473759041567']} // device id
  dpList={[{ id: 27, name: 'temperature' }]} // data point id and name
  unit="℃" // Data unit
  range="1month"
  type="avg" // Statistical Type: indicates the average value of the month
  startDate="202301" // Data start from January
  endDate="202312" // The data end time is December
  chartType={'line'} // Line chart
/>;
```

### Collect device energy consumption data

```jsx
import StatCharts from '@ray-js/stat-charts';

<StatCharts
  devIdList={['vdevo168473759041567']}
  dpList={[
    { id: 27, name: 'Temperature controller' },
    { id: 28, name: 'Ambient light' },
  ]}
  unit="kwH" // Unit kilowatt-hour
  range="15min" // One dot every 15 minutes
  startDate="20230522" // Collect the current day's data
  dataZoom={-30} // Zoom slide displays the right 30% of the data by default
  chartType="bar" // Bar chart
/>;
```

### Customized Chart Header

```jsx
import React, { useCallback } from 'react';
import { View, Text } from '@ray-js/ray';
import StatCharts from '@ray-js/stat-charts';
import styles from './index.module.less';

export function Home() {
  const renderTitle = useCallback(({ data }) => {
    const total = data?.[0]?.data?.reduce((acc, cur) => acc + +cur?.value || 0, 0) || 0;
    return (
      <View className={styles['title-container']}>
        <View>
          <Text className={styles['title-main-text']}>{total}</Text>
          <Text className={styles['title-unit-text']}>kWh</Text>
        </View>
        <View>
          <Text className={styles['title-value-text']}>Total Electricity Consumption</Text>
        </View>
      </View>
    );
  }, []);

  return (
    <StatCharts
      devIdList={['vdevo168473759041567']} // Device ID
      dpList={[{ id: 27, name: 'Electricity' }]} // Data Point ID and Name
      range="1month" // Data aggregated by month
      type="sum" // Statistic type, calculating the sum of electricity consumption for each month
      startDate="202301" // Start date of the data (January)
      endDate="202312" // End date of the data (December)
      renderTitle={renderTitle}
      chartType="bar" // Bar chart
    />
  );
}
```

`./index.module.less`

```less
.title {
  &-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 56rpx;
  }

  &-main-text {
    font-weight: 700;
    font-size: 64rpx;
    line-height: 96rpx;
    color: #34363c;
    margin-right: 8rpx;
  }

  &-unit-text {
    font-weight: 500;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #484a5f;
    opacity: 0.5;
  }

  &-value-text {
    font-weight: 400;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #484a5f;
    opacity: 0.5;
  }
}
```
npm package: @ray-js/studio-builder
Description: studio builder cli
Latest version: 0.2.23

# Studio Builder CLI

Studio 打包器
> generator 生成器 - 生成ray项目
> builder 打包器 - 打包小程序源码并上传

关联项目：
- [@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)