opencollective frontend

开放集体前端

前言

如果您看到以下可以改进（或过时）的步骤，请更新说明。我们很少会自己经历这个过程，因此您的新鲜眼睛和最近的经验使您成为改善其他用户的最佳候选人。谢谢你！

发展

先决条件

1. 确保您的Node.js版本20.X和NPM版本> = 9.0.0。

• 我们建议使用NVM： nvm install && nvm use 。

安装

我们建议将存储库克隆到专用于opencollective项目的文件夹中。

 git clone [email protected]:opencollective/opencollective-frontend.git opencollective/frontend
cd opencollective/frontend
npm install

环境变量

该项目需要访问Open Collective API。

默认情况下，它将尝试连接到开放的集体分期API，您不必更改任何内容。

如果您想连接到本地运行的开放集体API：

• 克隆，安装并启动OpenColtext-api
• 在此项目中，将以下内容复制到.env文件：

 API_URL=http://localhost:3060
API_KEY=dvl-1510egmf4a23d80342403fb599qd

开始

 npm run dev

测试

进行测试：

• 对于页面和组件，使用npm test
• 有关使用柏树的端到端（E2E）测试，请参见我们的专用指南。

更新：

• 开玩笑快照：运行npm run test:update
• 翻译文件：运行npm run langs:update
• ESLINT的GraphQL模式：运行npm run graphql:update

StyleGuide

我们使用Storybook与样式组件和样式系统隔离开发和记录我们的React组件。

更多信息：docs/styleguide.md

本土化

翻译接口不需要任何技术技能，您可以访问https://crowdin.com/project/opencollyce，然后立即开始翻译！

我们目前正在寻找以下语言的贡献：

• 法语
• 西班牙语
• 日本人

想添加一种新语言以进行开放集体吗？与我们联系，我们将很乐意帮助您进行设置！

贡献

代码样式？提交约定？请检查我们的贡献指南。

TL; DR：我们使用更漂亮和Eslint，我们确实喜欢大型提交信息和清洁的GIT历史。

赏金

此存储库是开放集体赏金计划的一部分。获得报酬为开源贡献！开放的集体工程团队很小，我们一直在寻找开源代码库的新贡献者。我们的赏金计划是解决可以忽略的问题的机会。解决这些问题的贡献者将在经济上得到奖励。请参阅我们的文档以获取更多信息：https：//docs.opollatective.com/help/contributing/development/bounties

部署

目前，该项目已部署到Heroku进行分期和生产。要部署，您需要成为公开集体团队的核心成员。

更多信息：文档/deployment.md

发布组件

要将前端组件更新发布到NPM，您需要成为开放集体团队的核心成员。步骤：

1. 使用npm view @opencollective/frontend-components version检查当前发布的版本
2. 通过运行npm run publish-components {NEW_VERSION}来触发发布脚本，其中{NEW_VERSION}是新版本号（请关注SEMVER）。
3. 查看更改，并确认一切是否有意义。

要将新文件或依赖项添加到此导出的软件包中，请查看脚本/Publish-Components/config.ts。

讨论

如果您有任何疑问，请在Discord或Twitter（@OpenCollect）上使用我们。

谢谢

感谢Lost Pixel提供的视觉测试平台，该平台可帮助我们查看UI更改并捕获视觉回归。