gumdrops

Gumdrops

Этот проект содержит многоразовые компоненты реагирования JavaScript, которые вы можете импортировать в свой проект.

Предварительные условия

Gumdrops должны использоваться с системой проектирования Gumgum (бетон), которая обрабатывает все стили, а также SASS.

Добавьте в свой проект Gumgum Design и Sass.

Смотрите документацию по системе конкретной проектирования для тем, CSS Utilities и многое другое.

Документация

Смотрите документацию для этой библиотеки и ее компонентов.

Установка

Чтобы добавить определенную версию, вы можете использовать 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 использует свою собственную реализацию потребностей и попытается проанализировать файлы с ним и Babel-Jest, по умолчанию он игнорирует node_modules, что приведет к ошибкам синтаксиса из операторов импорта. Добавьте следующую строку в свой Jest Config, чтобы он игнорировал все в Node_Modules, за исключением этой библиотеки:

   "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

Предварительные условия для выполнения проекта локально

• 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 Repo.

Внося

Пожалуйста, смотрите Anforming.md для получения информации о участии в этом проекте.

Участники

Особая благодарность всем нашим участникам! Кроме того

Лицензия

Apache 2.0

Важное примечание: этот проект не перераспределяет сторонние библиотеки, но определяет их доступность. Библиотеки, вызванные этим проектом, подчиняются их лицензиям создателя. Не забудьте проконсультироваться и соблюдать все лицензии в вашем использовании.