上层UI
先决条件
在设置项目之前, 请确保您在本地机器上安装以下设备 :
- 节点.js:v20.11.1(根据建议)
- 国家预防机制: 随节点而来
- 数字: (可选,但建议管理节点版本)
本地设置
从我们的 Github 仓库中切除仓库: https://github.com/IAG-Loyalty/alto-ui (英语)
您需要设置个人访问标志 .
复制后只需运行
npm i
这将安装 Avios 符牌包, 也可以在您的节点- 模块文件夹中找到 .
运行 Linting 格式化( F)
我们用ESLint和Prettier来做衬垫和格式化 您可以使用以下命令运行 :
npm run lint
运行测试
如果要运行此工程的测试,可以使用以下命令: 1
npm run test
运行无障碍测试
如果您想要运行此工程的可访问性测试,可以使用以下命令: 1
npm run test-a11y
提交代码
git add .
npm run commit
本地运行故事本
要在当地运行故事本, 请执行以下命令
npm run storybook
共享空间内容类型文件生成方式 npm run contentful:sync (见 .storybook/contentful-addon/README.md) (中文(简体) ).
创建新组件
脚手架上的新组件运行以下命令:
npm run generate
用活字装入包件
如果要捆绑组件用于生产,请使用以下命令来创建最优化的构建:
npm run vite
创建静态故事书文件
我们需要创建静态的故事书文件,供我们的公有领域网站使用. 运行以下命令
npm run build:storybook
运行色谱 (Dev)
运行以下命令以分析我们的代码并发送到色谱
npx chromatic --project-token <YOUR_PROJECT_TOKEN>
Token 工程可以在色谱仪表板中找到
用于使用我们软件包的应用程序
在应用程序中安装软件包
安装 Avios Alto 组件库软件包
npm install @alto-avios/alto-ui
导入 Alto 组件
在安装过程之后,您可以在您的React应用程序中导入并使用Alto-UI组件. 以下是如何做到这一点的例子.
import { Button } from '@alto-avios/alto-ui';
const App = () => (
<div>
<Button>Click Me!</Button>
</div>
);
export default App;
更新
检查是否有更新 :
npm outdated
如果有更新,则更新软件包:
npm i @alto-avios/alto-ui@latest
节点
确保使用节点 - v 20.11.1。 。 。 .
遵循这些步骤来验证和安装本项目所需的节点.js版本: 打开终端.
通过运行以下命令来检查当前安装在您的系统中的Node.js版本:
node -v
检查输出。 如果不是版本的话 20.11.1,您需要安装此版本.
如果没有节点版本管理器,请安装一个. 我们建议使用 NVM(节点版本管理器).
使用您的版本管理器安装 Node.js 版本 20. 11.1 。 如果你使用NVM,命令是:
nvm install 20.11.1
安装完成后,通过再次检查Node.js版本来验证安装:
node -v
产出现在应为20.11.1。 你现在可以着手进行项目设置.
许可证
本项目的许可条件如下: 麻省理工学院许可证。 。 。 .