このプロジェクトには、プロジェクトにインポートできる再利用可能なJavaScript Reactコンポーネントが含まれています。
ガムドロップは、すべてのスタイルとSASSを処理するGumgum Design System(コンクリート)で使用する必要があります。
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モジュールの構文のためにエラーが発生する可能性があります。これを防ぐには、次のことを試してください。
Jest :Jestは、独自の要件の実装を使用し、ファイルとBabel-Jestでファイルを解析しようとします。デフォルトでは、インポートステートメントからの構文エラーが発生するnode_modulesを無視します。このライブラリを除き、node_modulesのすべてを無視するように、Jest構成の次の行を追加します。
"transformIgnorePatterns": ["/node_modules/(?!gumdrops)"]
Mocha + Webpackの場合:MochaとWebpackの構成もNode_Modulesディレクトリを無視して、構文エラーを防ぐために、 --compilers js:babel-registerまたは--require babel-registerを呼び出す代わりに構成ファイルにバベルをロードします。
ファイルの内容は、次のように簡単にすることができます。
// testSetup.js
require('babel-register')({
ignore: /node_modules/(?!gumdrops)/
});
// Import it into mocha or mocha-webpack:
--require ./testSetup.js
node: ^16.16.0, npm: ^5.5.1, yarn ^1.2.1.eslinrcおよび.prettierrcに構成ファイルがあります。ファイルできれいなスクリプトを実行するための前提条件のフックがあります。 yarn # install dependencies
yarn run storybook
次に、ブラウザでhttp://localhost:6006を開きます。詳細については、React Storybook Repoをご覧ください。
このプロジェクトへの貢献については、Converting.mdをご覧ください。
私たちの貢献者全員に特別なありがとう!さらに、Githubに移る前に貢献した以下:David Mejorado、Jose Santos、Mike Watt
Apache 2.0
重要な注意:このプロジェクトは、サードパーティライブラリを再配布するのではなく、可用性を特定します。このプロジェクトで呼ばれるライブラリは、作成者ライセンスの対象となります。使用するすべてのライセンスに相談して遵守することを忘れないでください。