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

# @ray-js/smart-ui

## Introduction

`@ray-js/smart-ui` is a React component library based on the `Ray` framework and `@tuya-miniapp/smart-ui`, designed to provide lightweight and reliable UI components that comply with the mobile design specifications for smart mini programs. By integrating Ray's specification adaptation intermediary layer and built-in perfect TS types, we offer a full set of React components suitable for smart mini programs, enabling developers to quickly build mobile applications that meet design specifications.

## Preview

Scan the QR code below for the smart mini program to experience the component library demo.

<img src="https://images.tuyacn.com/content-platform/hestia/1716260412b7f2ae02271.png" width="200" height="200">

## Before Using

Before using Smart UI, please ensure you have studied the official [Ray Development Overview](https://developer.tuya.com/cn/miniapp/develop/ray/guide/overview) and [Ray Component Introduction](https://developer.tuya.com/cn/miniapp/develop/ray/framework/component) for smart mini programs.

## Installation

```bash
# Install via yarn (recommended)
yarn add @ray-js/smart-ui

# Install via npm
npm i @ray-js/smart-ui
```

## Using Components

Taking the button component as an example

```jsx
import { Button } from '@ray-js/smart-ui';

export default function Demo() {
  return <Button type="info">Info Button</Button>;
}
```

## Dynamic Import on Demand (Recommended)
Considering the project’s demand for dynamic import and overall package size concerns, the above import method might leave some component style files that impact the package size. Therefore, we recommend using the on-demand import plugin, which will automatically parse `import { Button } from '@ray-js/smart-ui';` into `import Button from '@ray-js/smart-ui/es/button';`.

1. Environment Requirements
   * \>= @ray-js/cli@1.7.4
   * esbuild build mode (does not support webpack mode)
   * Use of ESModule import syntax for importing
   * **SmartUI version 2.4.0 and above**

2. Simply import SmartUIAutoImport within the ray.config.ts project file:
```ts
import { RayConfig } from '@ray-js/types';
import SmartUIAutoImport from '@ray-js/smart-ui/lib/auto-import';

const config: RayConfig = {
  ...
  importTransformer: [SmartUIAutoImport],
};
module.exports = config;
```

## Preview in Developer Tools

```bash
# Install project dependencies
$ yarn
```

Open [Tuya MiniApp Tools](https://developer.tuya.com/cn/miniapp/devtools/tools), add the `example` directory, and you can preview the demo.

## Base Library Version

@ray-js/smart-ui provides stable support from the smart mini program base library version `2.19.0` `@ray-js/ray@^1.5.1` and IDE `0.6.5`.

## Open Source License

This project is based on the [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) license. Please feel free to enjoy and participate in open source.