precise ui

Полная самоуверенная библиотека компонентов реагирования с минимальными зависимостями, основанными на Zeiss.

Библиотека компонентов пользовательского интерфейса содержит как элементы дизайна очень низкого уровня, так и комбинированные элементы проектирования высокого уровня. В целом, намерение библиотеки состоит в том, чтобы упростить разработку путем разоблачения компонентов, которые удовлетворяют спецификациям проектирования и обеспечивают простоту программирования. Поэтому повторяемые конструкции пользовательского интерфейса должны занимать только минуты вместо часов.

См. Https://precise-ui.io для нашей кухонной раковины (т.е. демо-страница, иллюстрирующая все компоненты, включая их документацию).

Начиная

По сути, общее использование должно быть неявным, в то время как гибкость обеспечивается явными утверждениями. Таким образом, мы стремимся к (самоуверенно) простоте, одновременно способствуя настраиванию как можно больше. Несмотря на то, что стандартный дизайн в значительной степени подставлен для нашей собственной основной цели, мы хотим достичь полной свободы в этой области. По этой причине мы постоянно улучшаем то, как мы делаем тематические и как выставлять компоненты, чтобы обеспечить любую настройку, которая может быть желательной.

Точный пользовательский интерфейс может быть легко интегрирован в ваш проект Frontend с помощью NPM или пряжи. Чтобы начать использовать его, пожалуйста, следуйте инструкциям ниже:

Установка

1. Во -первых, вы должны установить его:

npm i precise-ui

Или альтернативно, используя пряжу

yarn add precise-ui

2. Затем убедитесь, что у вас также установлены все зависимости от сверстников:

npm i react styled-components

Использование

Все готово, теперь вы можете начать импортировать точные компоненты UI.

 import { TextField } from 'precise-ui' ;

< TextField label = "Label" />

Вы можете увидеть список всех доступных компонентов на нашем сайте.

Внося

Каждый может внести какой -либо вклад в точный пользовательский интерфейс. Однако, прежде чем начать, убедитесь, что вы прочитали наши инструкции взносов.

Если вы не уверены, следует ли вам внести свой вклад или нет, может быть, наш код поведения может вам помочь.

Проблемы и поддержка

Если у вас есть какое-либо использование и общие вопросы, вы можете задать вопрос о переполнении стека, используя TAG precise-ui , и вы получите помощь как можно скорее.

Кроме того, при создании новой проблемы здесь используйте один из представленных шаблонов:

• Отчет об ошибках
• Функциональное предложение

Разработка

Следующие разделы направляют вас через процесс разработки точного пользовательского интерфейса.

Установка

Для разработки вам понадобится npm и node.js 8+. После клонирования репозиторий Установите все зависимости через

npm install

Вот быстрый пример, чтобы вы начали. Все, что вам нужно, это запустить:

npm start

В результате это запустит сервер разработчиков, работающий на кухонной раковине (наше демонстрационное приложение), который работает локально и может быть достигнут через Localhost: 6060. Примечание: этот порт может быть изменен. Доступная страница содержит все включенные компоненты и некоторые, надеюсь, полезную документацию для них.

Версии

Увеличение версии также может быть сделано через npm .

npm version

Это покажет текущую версию и попросит новую версию. В результате информация в Package.json обновляется. Кроме того, с информацией создается тег GIT (автоматически с использованием «V»). Процесс также может быть автоматизирован, например, путем непосредственного указания новой версии. Так, например, если наша новая версия «1.2.3», мы просто используем следующую команду:

npm version --new-version 1.2.3

Конвенции

Мы не используем экспорт по умолчанию. Вместо этого каждый экспорт должен быть назван должным образом. Для компонентов имя экспорта равна имени его файла или папки.

Папки

Каждый открытый основной компонент должен быть размещен в собственной папке ниже components . Компоненты, размещенные в *.part.tsx , считаются внутренними компонентами, создаваемыми только для обеспечения некоторой (необходимой) внутренней структуры.

Каждый компонент поднятого проектирования должен быть помещен в файл в папке quarks . Дизайновые помощники начинают с Styled префикса, как и простые компоненты.

Любой компонент высшего порядка (HOC) должен быть расположен в папке hoc . Конвенция об именах состоит в том, чтобы разоблачить HOC with префиксом.

Компоненты, связанные с контекстом, расположены в папке contexts .

Простые функциональные утилиты должны быть размещены в папке utils . Несмотря на то, что для удобства все содержимое UTIL экспортируется, их модули следует ссылаться непосредственно из любых компонентов. Утилиты должны быть в значительной степени самостоятельно самостоятельно, то есть ссылка на компоненты назад запрещены.

Наименования

В то время как компоненты без состояния должны создаваться как const , компоненты Statefull должны быть созданы в качестве class . В первом случае должен быть создан только интерфейс с именем компонента с Props (для объявления типов реквизита). В последнем случае должен быть создан дополнительный интерфейс с State компонента. Этот интерфейс несет информацию типа для внутреннего состояния компонента.

Компоненты поля ввода всегда должны быть суффиксами с Field . Их реквизит должен расширить интерфейс InputProps .

Реквизиты событий должны быть on профиксированы, и у них должен быть только один аргумент. Этот аргумент должен быть объектом, который следует за интерфейсом, который имеет адекватное название для события, обычно состоящее из имени компонента, типа события и суффиксации с Event , например, для onChange на TextField у нас есть TextFieldChangeEvent .

У нас есть множество различных классов компонентов. Мы должны быть в состоянии легко различать различные классы компонентов, глядя на суффикс компонента. У нас есть:

• *Control , состояние функциональных компонентов
• *Panel , макет для использования
• *Field , поле ввода

Исключения из этой конвенции могут возникнуть по различным причинам (исторический, эстетический, ...), но всегда следует рассуждать и обсуждать должным образом.

Форматирование кода

Там не так много, чтобы написать. Мы используем краситель, и наши сборы проверяют, если код был должным образом пристальный. Просто беги

npm run prettier

Если вы сомневаетесь, что изменения вашего кода соответствуют нашему желаемому форматированию.

Модульные тесты

Любые изменения должны быть в компании с соответствующими модульными тестами. Чтобы запустить тесты, мы используем следующую команду:

npm run test

Это также запустит Linter. Автономные модульные тесты доступны с помощью test:unit . Аналогичным образом, мы также можем легко сообщить о покрытии кода:

npm run test:unit --coverage

Для модульных тестов мы используем шутку. Мы рекомендуем использовать тесты на снимки (которые выполняются с помощью фермента и некоторого сериализатора JSON).

Визуальное тестирование

Визуальные снимки расположены в /integration/__image_snapshots__ .

Когда тестирование запускается, оно отображает компоненты из [componentName]/Example.md , делает экрановые снимки и сравнивает их с скриншотами предыдущей версии.

Для запуска тестирования локально Docker должен быть установлен.

npm run test:visual

После того, как компонент был изменен, добавлен или удален, следует обновить снимки. Чтобы обновить снимки:

npm run test:visual -- -u

В некоторых случаях (т.е. компоненты с анимацией) необходимо пропустить тест. Это можно сделать следующим образом: update avess.md -файл:

 ```js { "props": { "data-skip": true } }

<Component />

В некоторых случаях необходимо сказать, что визуальный тест ждать, прежде чем сделать снимок. Это можно сделать следующим образом: update avess.md -файл:

 ```js { "props": { "data-wait": 500 } }

<Component />

Добавление новых значков

Список всех импортированных значков состоит в /tools/icongen.config . После изменения списка вы должны запустить npm run icongen , иначе он будет запущен на Prepush.

Сделать релиз

Весь выпущенный код агрегируется в develop филиала. Чтобы сделать релиз, просто создайте релиз GitHub (обычно копируя текущие записи из файла CHANGELOG.md ).

Таким образом, стандартный рабочий процесс выглядит:

1. Клонировать репозиторий
2. Сделать ветвь
3. Сделайте работу
4. Протолкните свои изменения
5. Сделайте PR вашей вилки / филиала для develop
6. Однажды «достаточно» оснащены агрегированными в develop сделайте релиз GitHub
7. Для следующих изменений, чтобы develop обязательно изменить / увеличить номер версии

Чтобы узнать о выпущенной в настоящее время версии, у вас есть два варианта. Либо вы заходите на страницу NPM, либо используете релизы GitHub. Оба тоже связаны с readme.md .

Лицензия

Точный пользовательский интерфейс выпускается с использованием лицензии MIT. Для получения дополнительной информации см. Файл лицензии.

Мы используем несколько значков из материалов икон пользовательского интерфейса. Их код и дизайн охватываются соответствующей лицензией материала пользовательского интерфейса (MIT).