gumdrops

gumdrops

該項目包含可重複使用的JavaScript React組件，您可以將其導入到項目中。

先決條件

必須與gumgum Design系統（混凝土）一起使用，該系統處理所有樣式以及Sass。

在您的項目中添加Gumgum-Design和Sass。

請參閱主題，CSS實用程序等具體設計系統文檔。

文件

請參閱此庫及其組件的文檔。

安裝

要添加特定版本，您可以使用yarn add [email protected] （用任何版本替換1.0.0，或省略它以獲取最新版本）

當前版本和以前的版本可以在ChangElog.md中找到

用法

庫將其組件作為ES模塊導出，因此您只能導入所需的內容，例如：

 import Button from 'gumdrops/Button';
import Badge from 'gumdrops/Badge';
import Toggle from 'gumdrops/Toggle';

關注文檔將組件與正確的道具一起使用。

為了進行逆轉兼容，提供了一個commonjs捆綁包。它包含整個庫，可以與：

 const gumdrops = require('gumdrops');
// Or
import gumdrops from 'gumdrops';

為了方便和直接在瀏覽器中使用，也提供了一個UMD：

 node_modules/gumdrops/gumdrops.umd.js

測試故障排除

不幸的是，ESM尚未廣泛用於某些當前工具，並且由於ES模塊語法，使用此庫中的組件運行測試可能會丟棄錯誤。為了防止這種情況，請嘗試以下操作：

• 對於開玩笑：開玩笑使用其自己的需求實現，並將嘗試用它來解析文件，而默認情況下，它會忽略node_modules，這將導致導致導入語句的語法錯誤。將下一行添加到您的笑話配置中，以忽略Node_modules中的所有內容，除了此庫：

   "transformIgnorePatterns": ["/node_modules/(?!gumdrops)"]
  

• 對於Mocha + WebPack ：您的摩卡咖啡和WebPack配置也很可能忽略了Node_modules目錄，以防止任何語法錯誤，請通過配置文件加載Babel而不是調用--compilers js:babel-register或-REQUQUIRE BABEL或--require babel-register 。

文件內容可以很簡單：

 // testSetup.js
require('babel-register')({
    ignore: /node_modules/(?!gumdrops)/
});

// Import it into mocha or mocha-webpack:
--require ./testSetup.js

本地運行項目的先決條件

• git和git流
• nodejs/npm＆yarn：最小必需的版本- 我們已經使用以下版本進行了測試 - node: ^16.16.0, npm: ^5.5.1, yarn ^1.2.1
• 在您選擇的編輯器上安裝ESLINT驗證器，並更漂亮。我們在項目的根部（ .eslinrc和.prettierrc上有配置文件。有一個先前的掛鉤可以在文件上運行更漂亮的腳本。

在本地運行故事書

 yarn # install dependencies
yarn run storybook

然後在瀏覽器上打開http://localhost:6006 。有關更多信息，請訪問React Storybook回購。

貢獻

有關為該項目貢獻的信息，請參見貢獻。

貢獻者

特別感謝我們所有的貢獻者！加上以下在我們搬到Github之前做出貢獻的人：David Mejorado，Jose Santos，Mike Watt

執照

Apache 2.0

重要說明：該項目不會重新分配第三方庫，而是確定其可用性。該項目調用的圖書館受其創建者許可。請記住要諮詢並遵守您用途的所有許可證。