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

重要说明：该项目不会重新分配第三方库，而是确定其可用性。该项目调用的图书馆受其创建者许可。请记住要咨询并遵守您用途的所有许可证。