design react kit
v5.5.0
Прочитайте это на других языках: английский ??.
Design React Kit - это набор компонентов React, который реализует Bootstrap Italia и стили на дизайне набора пользовательского интерфейса. Чтобы ориентироваться в библиотеке и просмотреть компоненты, использовался сборник рассказов. Общественная версия книги рассказов доступна здесь для последнего опубликованного стабильного релиза. Набор React Graygress доступен для игры с библиотекой.
Чтобы использовать React Design в качестве зависимости в приложении, вы можете установить его из NPM. Мы предлагаем использовать create vite для создания нового реагирования WebApp, следующим образом:
yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --saveБольше информации для создания нового приложения с React:
design-react-kit не включает в себя CSS и файлы шрифтов, и поэтому необходимо установить их отдельно:
yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save На этом этапе, просто импортируйте явно в приложение CSS и Font, если вы использовали, create vite в файле ./src/App.js :
import React from 'react' ;
import './App.css' ;
import { Alert } from 'design-react-kit' ;
import 'bootstrap-italia/dist/css/bootstrap-italia.min.css' ;
import 'typeface-titillium-web' ;
import 'typeface-roboto-mono' ;
import 'typeface-lora' ;
function App ( ) {
return < Alert > This is an Alert </ Alert > ;
}
export default App ;Вы можете проконсультироваться с этим веб -шаблоном с помощью Stackblitz: веб -шаблоны
В теме Bootstrap Italia используется определенный набор шрифта шрифта: titillium-web , roboto-mono и lora . Загрузка этих шрифтов оставлена в браузер, но, если это необходимо, это можно контролировать через соответствующий компонент FontLoader . Просто объявьте компонент FontLoader в верхней части приложения React, чтобы разрешить загрузку.
В качестве альтернативы, необходимо управлять загрузкой шрифтов вручную через пакет webfontloader :
const WebFont = require ( 'webfontloader' ) ;
WebFont . load ( {
custom : {
families : [ 'Titillium Web:300,400,600,700:latin-ext' , 'Lora:400,700:latin-ext' , 'Roboto Mono:400,700:latin-ext' ]
}
} ) ; Библиотека не включает react и react-dom , избегая столкновения версий и бесполезного увеличения размера пакета. По этой причине для локальной разработки необходимо будет вручную установить пристрастия.
Команда, которая должна быть выполнена
yarn install --peersили в качестве альтернативы вручную
yarn install react react-dom? Можно внести свой вклад в библиотеку по -разному:
Хотели бы вы помочь в Design React Kit? Вы находитесь в нужном месте!
Если вы еще этого не сделали, начните с потраченных нескольких минут, чтобы углубить свои знания на рекомендации по проектированию веб -сервисов PA, и обратитесь к указаниям о том, как внести свой вклад в комплект Design React.
Минимальные требования вашей местной среды должны быть:
Клонировать репозиторий и выполнить yarn для установки зависимостей. Затем выполнить
yarn storybook:serveЧтобы запустить сервер разработки.
Справочник будет доступен на http: // localhost: 9001/
Сборник рассказов был обогащен некоторыми addons , которые заставляют его более говорить.
Этот раздел будет направлять создание новых компонентов в репозитории. Все компоненты находятся в папке src : у каждого компонента есть папка со всем, что необходимо, чтобы заставить ее работать. Вместо этого истории Storybook находятся под stories . Модульные тесты находятся в test папке. Например, компонент Button присутствует под маршрутом src/Button , и его структура следующая:
├── src
│ └── Button
│ └── Button.tsx
├── stories
│ ├── Components
│ │ └── Button.stories.tsx
│ └── Documentation
│ └── Button.mdx
└── test
└── Button.test.tsx
Некоторые основные правила структуры компонентов:
.stories.tsx должны содержать только то, что связано с самим компонентом..mdx должны содержать только документацию, относящуюся к самому компоненту.test.tsx Файлы должны содержать только тесты, относящиеся к самому компоненту.Как только новый компонент был создан с его историей, стартовый сборник рассказов сможет проверить, что все работает так, как должно.
Документация:
Система тестирования предусматривает контроль представленных историй с помощью методики, называемого «моментальным снижением»: содержание истории рассказов будет скопировано в специальном файле и сохранит, чтобы уведомить любые изменения в будущем. Это означает, что добавление новых историй может быть в неспособности «тестовой» задачи в PR. Если была добавлена новая история или уже присутствующая, необходимо обновить файл снимка следующим образом:
yarn test -uНа этом этапе создайте новую комиссию и обновите PR с помощью обновленного файла снимка. Убедитесь, что внесенные изменения исправлены перед обновлением PR.
Чтобы заполнить библиотеку и генерировать файлы в папке dist , просто запустите выделенную команду:
yarn build Комплект следует указаниям, показанным в руководящих принципах проектирования для веб -служб государственного управления, раздел 6.3.1.2.1. Поддержка браузера благодаря использованию пакета browserslist-config-design-italia .
Библиотека была доставлена в TypeScript, а типы экспортируются вместе с ней.
Особая благодарность тем, кто сделал возможным разработку этой библиотеки!
 |  |  |  |
|---|---|---|---|
| Сабатино Галассо | Марко Либерати | Маттео Авесани | Федерико Турбино |
и в вклад лабораторий Opencity
Все участники ( сделанные с вкладышами-IMG )
