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更改並捕獲視覺回歸。