open-index/open-npm huggingface dataset:
npm package: @lcui/cli
Description: Command line interface for rapid LCUI development
Author: Liu
Latest version: 1.2.2

# lcui-cli

[![GitHub Actions](https://github.com/lc-ui/lcui-cli/workflows/Node.js%20CI/badge.svg)](https://github.com/lc-ui/lcui-cli/actions)
[![codecov](https://codecov.io/gh/lc-ui/lcui-cli/branch/master/graph/badge.svg?token=USK2SXHC86)](https://codecov.io/gh/lc-ui/lcui-cli)

## 简介

([English](README.md)/**中文**)

LCUI CLI 是一个能帮助你快速开发 LCUI 应用程序的工具，提供：

- 项目脚手架。
- 类似于 Webpack 的编译器，基于多种加载器：
  - ts-loader：加载 JavaScript、TypeScript 文件，支持 JSX 语法。你可以像编写 React 组件一样编写 LCUI 部件。
  - css-loader：加载 CSS 文件，支持 CSS Modules 写法。
  - sass-loader： 加载 Sass/SCSS 文件并将其编译为 CSS。
  - json-loader：加载 JSON 文件，允许你以 JSON 格式描述界面。
  - xml-loader：加载 XML 文件，允许你以 XML 格式描述界面。
  - yaml-loader：加载 YAML 文件，允许你以 YAML 格式描述界面。

LCUI CLI 致力于将 LCUI 生态中的工具基础标准化。

## 安装

在安装这个工具之前，你需要在你的计算机上安装这些依赖:

- [Git](https://git-scm.com)
- [Node.js](https://nodejs.org/en/download/) (自带 [npm](http://npmjs.com))
- [XMake](https://xmake.io/)

之后，运行：

``` bash
npm install -g @lcui/cli
# 或者
yarn global add @lcui/cli
```

## 使用

创建一个 LCUI 应用程序项目：

```bash
lcui create my-project
```

编译 app 目录内的所有文件：

```bash
lcui build
```

编译单个文件：

```bash
lcui build app/page.tsx
```

## 许可

[MIT](LICENSE)
npm package: @lcui/react
Description: A React library for LCUI development
Author: Liu
Latest version: 0.5.0

# @lcui/react

(**中文**/[English](README.md))

一个用于 LCUI 应用程序开发的 React 库，提供 TypeScript 类型声明、React 版预置组件，配合 [@lcui/cli](https://gitee.com/lcui-dev/lcui-cli) 使用。

## 安装

```sh
npm install -D @lcui/react
```

## 使用

```tsx
import { useState, useRef, TextInput, Button } from '@lcui/react';
import styles from './app.module.css';

export default function App() {
  const inputRef = useRef();
  const [name, setName] = useState('World');

  return (
    <div className={styles.app}>
      Hello, {name}!
      <TextInput ref={inputRef} placeholder="Please input..." />
      <Button onClick={() => setName(inputRef.current.value)}>Change</Button>
    </div>
  );
}
```

LCUI 并不是浏览器引擎，像按钮、文本输入框等原生控件需要由特定的 LCUI 组件实现，因此，在 JSX 写法上会有如下差异：

```diff
  <div className={styles.app}>
    Hello, World!
-   <input placeholder="Please input..." />
+   <TextInput placeholder="Please input..." />
-   <button>Click here</button>
+   <Button>Click here</Button>
  <div>
```

## 许可

[MIT](./LICENSE)
npm package: @lcui/react-icons
Description: An icon library for LCUI applications based on @fluentui/react-icons
Author: Liu
Latest version: 1.0.4

# Fluent UI System Icons

(**中文**/[English](README.md))

[Fluent UI 系统图标](https://github.com/microsoft/fluentui-system-icons)是一组来自微软的熟悉、友好和现代的图标。

本项目基于 [Fluent UI System Icons](https://github.com/microsoft/fluentui-system-icons) 的图标文件重新生成图标库，适合 LCUI 应用程序使用，具体生成规则可查看文件：[scripts/convert.js](scripts/convert.js)

![Fluent System Icons](art/readme-banner.png)

## 安装

```sh
npm install @lcui/react-icons
```

## 使用

要使用这些图标，你需要先在你的根组件文件中引入 css 文件：

```tsx
// src/App.tsx

import '@lcui/react-icons/dist/style.css';
```

然后用 `import { [IconName][Style] } from @lcui/react-icons` 来引入它们。例如：

```tsx
// src/MyComponent.tsx

import { AccessTime, AccessTimeFilled } from '@lcui/react-icons';
import styles from './MyCompoennt.module.css';

export default function MyComonent() {
  return (
    <div>
      <AccessTime className={styles.icon} size={24} />
      <AccessTimeFilled className={styles.icon} />
    </div>
  );
}
```

图标有 Regular 和 Filled 两种风格，其中 Regular 是默认风格，用 `AccessTime` 即可，无需写成 `AccessTimeRegular`。

如果你不喜欢这种用法，也可以只用 `Icon` 组件：

```tsx
// src/MyComponent.tsx

import { Icon } from '@lcui/react-icons';
import styles from './MyCompoennt.module.css';

export default function MyComonent() {
  return (
    <div>
      <Icon name="access-time" className={styles.icon} size={24} />
      <Icon name="access-time" className={styles.icon} filled />
    </div>
  );
}
```

如果你不喜欢写 TypeScript React 代码，也可以在 C 代码中这么用：

```c
#include <LCUI.h>

...

int main(int argc, char **argv)
{
  ui_widget_t *icon;

  lcui_init();

  ui_load_css_file("FluentSystemIcons-Regular.css");
  ui_load_css_file("FluentSystemIcons-Filled.css");

  icon = ui_create_widget("text"):
  ui_widget_add_class(icon, "fui-icon-regular access-time-24-regular");
  ui_widget_set_style_unit_value(w, css_prop_font_size, 24, CSS_UNIT_PX)
  ui_root_append(icon);

  icon = ui_create_widget("text"):
  ui_widget_add_class(icon, "fui-icon-filled access-time-24-filled");
  ui_root_append(icon);

  return lcui_main();
}
```

之后，手动复制 `node_modules/@lcui/react-icons/dist` 目录内的 css 和 ttf 文件到应用程序工作目录内。

## 更新

下载 [fluentui-system-icons](https://github.com/microsoft/fluentui-system-icons) 最新源码包，解压其中的 fonts 目录到本项目目录内，然后运行：

```sh
npm run build
```

## 许可

[MIT](./LICENSE)