亮点UI

@brightspot/ui 是一个现成的界面部件——按钮、部件、图标——的库,外加布莱特斯波克CMS内屏幕的全套颜色和样式(浅色、暗色和高相通度).

CMS自己的接口是从这个UI库所建,我们逐渐将其余部分移走. 亦会发表.

你想怎样?

• 修正或更改 CMS 用户界面
• 在工程中使用 UI 库
• 改进UI 库本身

修正或更改 CMS 用户界面

CMS 接口位于 src/legacy/tool-ui/。编辑那里的文件,并以两种方式之一运行的 CMS 预览它们.

你会需要: 节点 22 (nvm use 22),Yarn 1,当地人 brightspot 离职,以及 yarn install 接下来 yarn build 跑一次这里。 CMS 捆绑从构建输出中导入一些库组件, 所以重新运行 yarn build 在改变它们之后.

编辑器提示 : 在VSCode中,建议的扩展自动完成 btu-* 按键的课。 见 VSCode 设置注释。 。 。 .

快活方式——直播预览(供每日编辑)

1. 启动 CMS 后端( 在您的 brightspot/ 文件夹 :

   docker compose up -d
   

2. 启动现场预览( 这里) :

   cd src/legacy/tool-ui
   yarn server:local
   

3. 打开 Dev 服务器 - 注意到 :8080,不简单 localhost数字 :

   https://localhost:8080/cms/
   

   通过证书警告( 本地证书- 普通) 单击 .

现在编辑任何内容 src/legacy/tool-ui/src/ 和浏览器自行更新——不重建.

看见 502 错误? CMS后端无法被接通——检查插座台阶.

看见 The 'btu-…' class does not exist 在拉后吗? 运行 yarn install 在这里。 新的公用事业可以带来新的依赖性版本——图标名称来自 lucide-static ——和一拉更新代码而不更新安装的. 运行在 repo 根安装 src/legacy/tool-ui/ 工作空间也一样,所以一个命令覆盖两个.

全程——构建正版包(仅供最终检查)

慢些,但实际生成 CMS 飞船。 需要两个临时编辑 brightspot —— 说 别让他们犯法。 。 。 .

1. 构建软件包( 这里):

   ./gradlew publishToMavenLocal
   

2. 点 brightspot 在你的建筑:

   • site/build.gradle 添加 mavenLocal() 下级 repositories

   • platform/brightspot-dependencies/build.gradle ——将cms-tool-ui线改为:

     api 'com.brightspot.ui:cms-tool-ui:9999-SNAPSHOT'
     

3. 重建并运行( 在 brightspot/:

   ./gradlew docker
   

4. 请在 https://localhost/ cms/ 上检查, 完成后撤销这两个编辑 .

在工程中使用 UI 库

开始一个新的前端软件包吗 ? @brightspot/ui-builder 脚手架 建筑(Vite)和电线 这个预设给你。 下面的步骤是将库添加到您已有的建筑中.

你会需要: a 前端使用 TailwindCSS v3.

yarn add -D @brightspot/ui

如果您还没有, 请在您前端的根部创建 Tailwind 配置文件 tailwind.config.mjs数字 :

// tailwind.config.mjs
export default {
  content: ['./src/**/*.{js,ts,html,java}'], // wherever your markup lives, including Java that builds class lists
}

然后添加 @brightspot/ui 作为 预设一行牵出一切——所有颜色、风格和组件:

// tailwind.config.mjs
import preset from '@brightspot/ui'

export default {
  presets: [preset],
  content: ['./src/**/*.{js,ts,html,java}'],
}

离开 plugins 空出——预设已经注册了每个组件的插件,所以再次列出它们的双注册.

要使用一个组件,请导入它(它自登记为 btu-* 元素),然后使用标记。 从 components/ 子路径与 .js ——不是深层 dist/ 路径 :

import '@brightspot/ui/components/badge/Badge.js'

<btu-badge>Draft</btu-badge>

在CMS的一页上,CMS只定义了其中的几个元素本身. 导入您插件使用的其他元素, 包括您 Java 通过生成的元素 com.brightspot.ui.dari 课程. 在插件中使用这些 列出CMS定义的.

在 (原始内容存档于2017-10-29). ui.brightspot.com。网站只显示最新版本。 为浏览您安装的版本( 6. 8. 1 或 稍后的版本), 提供包件中船舶的复制件并打开 http://localhost: 6006:

npx http-server node_modules/@brightspot/ui/dist/storybook -p 6006

开幕 index.html 直接从磁盘上跳出来不起作用, 因为浏览器会屏蔽它的脚本 file://。 。 。 .

指定您的 AI 编码代理

包船为编码代理撰写的文件,与已安装的版本相匹配: llms.txt 在软件包根,每个组件一页 docs/components/,和"自定义元素表". 探员不会自己找到的 所以把这个加进你的项目 AGENTS.md 或者说 CLAUDE.md数字 :

## @brightspot/ui

This project uses `@brightspot/ui` web components (`btu-*` tags). Before writing or changing code that uses them,
read `node_modules/@brightspot/ui/llms.txt` and the component pages it links to. They match the installed version,
so prefer them over what you remember about this library.

没有本地安装, 给代理 https://ui.brightspot.com/llms.txt,它描述了最新的发布.

改进UI 库本身

添加或固定一个组件、样式或颜色.

你会需要: 节点 22 (nvm use 22(原始内容存档于2018-03-13) (中文(简体) ). Yarn 1.

物所居之处:

• src/ ——UI库(组件,样式,颜色);这就是要出版的内容.
• src/legacy/tool-ui/ ——CMS接口(见第一节).
• tool-ui/ - 只有包装.

在目录中构建和预览组件——不需要 CMS :

yarn storybook

承诺前:

yarn build              # compile everything
yarn check:conventions  # check the rules
yarn format             # tidy formatting
yarn test:storybook     # run tests

房屋规则 当你摸到其中一个区域时,请在 .ai/ 第一条:

见 CONTRIBUTING.md 文件标准.

释放 自动: 合并到 main,并为您标记并发布一个版本.