@elaraai/east-ui-components

中文文档

1.0.107发布于 2026/11/13AGPL-3.0-or-laterTypeScriptESM + CJS构建来源已验证近 30 天下载 3801

用 Chakra UI 渲染 East UI 类型的反应组件

文档目录13 节

特征
安装
快速启动
品牌字体
主题
州管理层
支助构成部分
发展
Claude 代码插件
许可证
生态系统
链接
关于埃拉拉

东 UI 组件

East UI 反应渲染组件

东 UI 组件 提供渲染组件东方大学数据结构。它弥合了东方UI声明组件定义与使用交互反应应用程序之间的差距 Chakra 用户界面 v3。。。 .

特征

Chakra 用户界面 v3 - 现代、无障碍组件渲染
全部东 UI 组件 - 充分支持布局、形式、图表、上下文等
州管理层 - 东部国家行动的反钩
缩写集成 - 使用Recharts 库提供图表
类型安全 - 全部类型脚本支持

安装

npm install @elaraai/east-ui-components @elaraai/east-ui @elaraai/east

快速启动

import React from "react";
import { Provider } from "@chakra-ui/react";
import { East } from "@elaraai/east";
import { Stack, Text, Button, UIComponentType } from "@elaraai/east-ui";
import { EastUIComponent, system } from "@elaraai/east-ui-components";

// Define your East UI component
const MyUI = East.function([], UIComponentType, $ => {
    return Stack.Root([
        Text.Root("Hello from East UI!", { fontSize: "xl" }),
        Button.Root("Click Me", { variant: "solid", colorPalette: "blue" }),
    ], { gap: "4" });
});

// Compile and get the UI IR
const compiled = East.compile(MyUI);
const uiData = compiled();

// Render in React
function App() {
    return (
        <Provider value={system}>
            <EastUIComponent ir={uiData} />
        </Provider>
    );
}

品牌字体

主题设置了DM Sans,Inter Tight和Chivo Mono等文本. 应用程序在其入门模块中注册一次:

import "@elaraai/east-ui-components/fonts";

输入自主机 @fontsource-variable/* 样式表——三家直立,为哑音"无数据"值的Chivo Mono斜体. 应用软件的捆绑者用他们的 .woff2 文件,在dev服务器和生产架构中,没有从CDN中获取任何信息。字体是一个单独的条目,这样导入组件就永远不需要CSS加载器,而节点测试跑取器缺乏.

没有加入字母: 页面集 font-variant-ligatures: no-common-ligatures,所以ff,fi和fl 保持单独的字母在每一个面部, 和Chivo Mono的每个字母保持自己的细胞.

主题

system 是作为Chakra v3系统的设计系统。将应用程序包入 <ChakraProvider value={system}>Chakra自己的零件以及东部的零件.

Brand是默认的调色板. 没有的部分 colorPalette 拿着牌子,所以.. <Button> 是设计系统在两个主题中的首要:它的填充,一个标签在4.5:1或以上,一个更深的填充在悬浮上. 检查 <Switch> 有品牌赛道。部分设计系统绘制出中性保持中性,在自己的食谱中如此持有:标签,徽章,相机,密钥盖,代码芯片,标签,表格行,进步轨迹,以及每一个不是主键的按钮(outline, (中文(简体) ), ghost, (中文(简体) ), subtle, (中文(简体) ), surface, (中文(简体) ), plainA级 colorPalette 道具在一部分上,或者在一部分不自封的祖先上,仍然选择了另一个调色板.

组合字段将其焦点圈画在相邻的包装上 _focusWithin: { borderColor: "brand.solid", boxShadow: "focus", outline: "none" }。它的内置编辑字段必须选择退出 Chakra 的环和主题的通用 :focus-visible 阴影 :

import type { SystemStyleObject } from "@chakra-ui/react";

const fieldInRingedControl = {
    focusVisibleRing: "none",
    _focusVisible: { outline: "none", boxShadow: "none" },
} satisfies SystemStyleObject;

把这个传入内地的槽食谱中. outline: "none" 单留下第二个阴影, 甚至在鼠标点击文本输入时也是如此。如果Chakra默认的变体提供焦点样式,则将选择退出放入该变体:合并的变体样式凌驾于自定义的基础样式. 主题使用共享字段红外控制编辑组合框大纲变体证明这个位置.

将选出范围保留在包装能提供戒指的字段上. 独立的输入和独立的可聚焦行动,如搜索的清晰按钮,仍然需要自己的焦点指标. 分出的日期和时间保留活性段的填充和包装内接壤. 在真实浏览器中验证自定义的复合材料, 既包括主题, 也包括鼠标和键盘焦点: 包装器的计算 box-shadow 必须平等 focus 标志和内地必须是 none。。。 .

州管理层

East UI 组件为管理东端应用中的状态提供钩子:

import { useEastStore, useEastState } from "@elaraai/east-ui-components";
import { State } from "@elaraai/east-ui";

// In your East function
const MyComponent = East.function([], UIComponentType, $ => {
    const count = $.let(State.read("counter", IntegerType, 0n));
    return Button.Root(
        East.str`Count: ${count}`,
        { onClick: State.write("counter", count.add(1n)) }
    );
});

// In your React app
function App() {
    const store = useEastStore();
    const [count] = useEastState(store, "counter", 0n);

    return (
        <Provider value={system}>
            <EastUIComponent ir={uiData} store={store} />
            <p>Current count: {count}</p>
        </Provider>
    );
}

支助构成部分

支持所有东UI组件:

类别	构成部分
版式	框, Stack, HStack, VStack, 网格, 分解器, 分隔器
类型	文本、代码、标题、链接、高亮、标记、列表、代码锁
按钮	图标按钮按钮
表单	输入( String, Integr, Float, Date Time), 选择、检查框、切换、滑动、文本区域、标记输入、文件装入、字段、字段集
收款	表格、数据列表、树视图
图表	区域、酒吧、行会、派会、雷达、散会、火花会、律师协会、律师协会
显示	徽章、标签、神通、Stat、图标
反馈	警告, 进展
披露	手风琴、塔布和木马
重叠	对话框、 Drawer、 Popover、工具提示、菜单、 HoverCard、 ToggleTip、动作栏
集装箱	纸牌

发展

npm run build     # Build library
npm run dev       # Start development server
npm run lint      # Check code quality

Claude 代码插件

东方生态系统也运载a 克劳德代码插件 — East 语言技能, 实例搜索, 以及 East 代码的先发制人诊断 elaraai 市场:

# Inside Claude Code
/plugin marketplace add elaraai/east-workspace
/plugin install east@elaraai

# From a terminal
claude plugin marketplace add elaraai/east-workspace
claude plugin install east@elaraai

许可证

双重许可证:

开源数字 : AGPL-3.0 导弹 - 免费开放源码使用
商业:可供专有用途-联系方式支助@elara.ai

生态系统

东: statical地打出,以表达为主的语言有可序列的IR. 运行跨 TypeScript, Python, C 等运行时间的可移植逻辑.
- @elaraai/东边: 有类型系统、表达式和参考JS编译器的核心语言SDK
东节点: Node.js 平台用于I/O,数据库和系统操作的功能.
- @elaraai/东节点-std: 控制台、文件系统、获取、加密、时间、路径、随机
- @elaraai/东-北-欧: SQLite, PostgreSQL, MySQL, MongoDB, Redis, S3, FTP, SFTP, XLSX, XML, 压缩
- @elaraai/东-节点-cli: 用于在 Node.js 运行 East IR 程序的 CLI
东 C: C11本土运行时间用于执行东IR. 被压死 linux-x64 财务报告和审定财务报表 linux-arm64,附于每个 GitHub 发布.
- east-c: Core 运行时间 — 类型系统, IR 解释器, 200+内置, 序列化( Beast2, JSON, CSV, East text)
- east-c-std: 控制台、文件系统、获取、加密、时间、路径、随机
- east-c-cli: 用于在本地运行 East IR 程序的 CLI
东 Py: Python 运行时间,标准平台,I/O,以及数据科学平台功能. 发布至PyPI.
- 东平: Core Python 运行时间——类型系统,IR编译器,212+内建,Cython加速热路
- 东平-上: 控制台、文件系统、获取、加密、时间、路径、随机
- 东比欧: SQLite, PostgreSQL, MySQL, MongoDB, Redis, S3, FTP, SFTP, XLSX, XML, 压缩
- 东-平-克利: 用于在 Python 运行 East IR 程序的 CLI
- 东平数据科学 (平价)+ @elaraai/东平数据科学 (npm):优化(MADS, Optuna, ALNS, GoogleOR),ML(XGBoost, LightGBM, NGBoost, PyTorch, Lightning, GP), 贝叶斯推论(PyMC),可解释性(SHAP),相通性预测(MAPIE)
东方大学:已打入UI组件定义和React渲染器,外加VS代码预览.
- @elaraai/东-伊: 50+ 键入的UI 组件用于布局,窗体,图表,表格,对话框
- @elaraai/ 东- ui- 组件: 带有 Chakra UI v3 样式的反相渲染器
- @elaraai/e3-ui (英语):e3 + UI桥-数据绑定, e3.ui() 任务,显示
- @elaai/e3-ui-组件: 为 e3 API 执行查询钩和预览组件
- @elaraai/e3-ui-cli (英语): 在终端浏览一个 e3 寄存器(e3-ui [repo]),并将East-ui / e3-ui组件制入PNG(e3-ui shot(中文(简体) )
e3——东行发动机: 大规模运行东方管线的持久执行引擎。类似Git的内容可处理存储,自动记忆,反应数据流,实时监测.
- @elaraai/e3 请检查url=值 (帮助): SDK 用于编写带有打字任务和管道的 E3 包
- @elaraai/e3-core (英语): 对象存储、数据流管弦器、执行状态
- @elaai/e3型: e3 包的共享类型定义
- @elaraai/e3-cli (英语)数字 : e3 repo, (中文(简体) ), e3 package, (中文(简体) ), e3 workspace, (中文(简体) ), e3 dataflow run, (中文(简体) ), e3 watch, (中文(简体) ), e3 task logs 命令
- @elaraai/e3-api-客户端远程 e3 寄存器的 HTTP 客户端
- @elaraai/e3-api-服务器: 用于 e3 寄存器的 REST API 服务器
- @elaraai/e3-api测试: 共享 API 合规测试套件

链接

现场显示大小写数字 : https://elaai.github.io/东-伊/
网站数字 : https://elaai.com/ (中文(简体) )
东方大学数字 : https://www.npmjs.com/package/@elaraai/east-ui (中文(简体) )
东仓库数字 : https://github.com/elaraai/east-workspace/tree/main/libs/east 页面存档备份,存于互联网档案馆
问题数字 : https://github.com/elaraai/east-workspace/issues (中文(简体) )
电子邮件数字 : 支助@elara.ai

关于埃拉拉

东方由 Elara AI Pty有限公司一个由AI驱动的平台创造经济数字双胞胎企业优化业绩。 Elara将业务目标、决定和数据结合起来,以帮助各组织在业务、采购、销售和客户参与以及项目和投资规划方面作出由数据驱动的决定。东能给以埃拉拉解决方案的计算层,使得复杂的商业逻辑和数据能够以简单,类型安全和可移植的语言来表达.

开发者 Elara AI Pty有限公司。。。 .

开发者 Elara AI Pty有限公司 - 为AI驱动的商业优化的计算层提供动力.

版本与发布记录

@elaraai/east-ui-components 共发布 154 个版本，首次发布于 2025/12/01；过去 12 个月发布了 154 个版本。最新版本附带 npm provenance 构建来源证明，可追溯到公开的 CI 构建记录。

版本	发布日期	距今
`1.0.107`latest	2026/11/13	今天
`1.0.106`	2026/11/09	4 天前
`1.0.105`	2026/11/08	5 天前
`1.0.104`	2026/11/06	7 天前
`1.0.103`	2026/11/04	9 天前
`1.0.102`	2026/11/03	10 天前

其他发布通道：beta → 0.0.1-beta.45。

关于 @elaraai/east-ui-components 的常见问题

@elaraai/east-ui-components 是什么？

用 Chakra UI 渲染 East UI 类型的反应组件

如何安装 @elaraai/east-ui-components？

在项目目录运行 npm install @elaraai/east-ui-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19.0.0）、react-dom（^19.0.0）、@elaraai/east（1.0.107）、@elaraai/east-ui（1.0.107）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

@elaraai/east-ui-components 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

@elaraai/east-ui-components 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require() 都可以使用，打包工具会自动选择合适的版本。

@elaraai/east-ui-components 需要什么版本的 Node.js？

package.json 的 engines 字段要求 Node.js >=22.0.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

@elaraai/east-ui-components 可以商用吗？

@elaraai/east-ui-components 使用 AGPL-3.0-or-later 许可。最严格的 Copyleft：除分发外，通过网络向用户提供基于它的服务也需要开源对应源码。闭源 SaaS 使用前务必评估。以上为概括，不构成法律意见，请以许可原文为准。

@elaraai/east-ui-components 的下载量有多少？

根据 npm 官方下载统计，@elaraai/east-ui-components 在 2026/10/13 – 2026/11/11 这 30 天内被下载 3,801 次，日均约 127 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@elaraai/east-ui-components 还在维护吗？

最新版本 1.0.107 发布于 2026/11/13（今天）；至今共发布 154 个版本，其中过去 12 个月发布了 154 个；首次发布于 2025/12/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

npm install @elaraai/east-ui-components

pnpmpnpm add @elaraai/east-ui-components
yarnyarn add @elaraai/east-ui-components
bunbun add @elaraai/east-ui-components

peer 依赖react ^19.0.0react-dom ^19.0.0@elaraai/east 1.0.107@elaraai/east-ui 1.0.107

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

3,801

约 3801 次日均 127 次

统计周期 2026/10/13 – 2026/11/11
数据来自 npm 官方下载统计，今天更新

最新版本1.0.107发布于今天

开源许可AGPL-3.0-or-later网络 Copyleft

包体积39.3 MB1,015 个文件 · 解压后

运行依赖39 个另有 4 个 peer 依赖

模块格式ESM + CJS

TypeScript自带类型

Node.js>=22.0.0

发布版本154 个近 12 个月 154 个

首次发布2025/12/0111 个月前

元数据更新2026/11/13

每一个软件包背后，
都有分享与创造的人。